Welcome to WebGL Hotshot. Web3D was first introduced about the same time as HTML and web browsers in the early 1990s. VRML 1.0, the Virtual Reality Modeling Language, made its L.A. debut by its co-inventors, Mark Pesce, Tony Parisi, and others, as part of the VR SIG (special interest group) organized by Dave Blackburn at Kit and Sherrie Galloway's Electronic Café (http://www.ecafe.com/), a part of Santa Monica's 18th Street Arts Center (http://18thstreet.org/). Meanwhile, 3D was an emerging entertainment medium as Toy Story was released in 1995 about the same time as Microsoft's DirectX 3D game interface, and a few years after Doom launched, one of the first 3D games. VRML 2.0 adopted the tag style, < >, of HTML a few years later. VRML, however, required either a plugin for your web browser, common at the time with the emergence of real audio and flash, or a pure Java implementation such as Dynamic 3D.
For much of the first decade of this century, the commercial applications of 3D graphics were seen in animated movies, special effects, and video games. Web3D had little visibility and was mostly used in research centers such as the U.S. Naval Postgraduate School in Monterey, California, USC Behavioral Technology Labs, and the Fraunhofer Institute for Computer Graphics in Europe. However, two new technologies were about to bring Web3D into the foreground. XML (eXtensible Markup Language) emerged as the file format and validation system for passing data across the Internet, and shader languages provided the ability to program the GPU (Graphics Processing Unit), which was a significant boost in the performance of 3D graphics.
Behind every technology are innovative, imaginative people. Two organizations, Khronos and the Web3D Consortium, provided the implementation of Web3D to be robust and simple for both developers and artists. Khronos (https://www.khronos.org) is a group of major media-centric technology companies dedicated to creating open standards in computer graphics. Khronos defined WebGL and its adoption among web browser developers to enable interactive Web3D. The Web3D Consortium (http://www.web3d.org) defined X3D, the VRML 2.0-based file format using XML standards.
This book will introduce the two leading technologies for interactive Web3D: X3D and WebGL. Emphasis is placed on real-world applications while intertwining technical concepts. We begin with X3D and the fundamental concepts of creating 3D scenes. If you have never built anything in 3D, you'll be amazed at how quickly you can create colorful 3D environments. Then, we transition to WebGL, writing JavaScript to parse the 3D meshes, control the interactivity, and handle the interfacing to the GPU for rendering 3D meshes with texture maps. Then, GPU shader languages are applied to create various lights, free-flowing cloth, and animated waterfalls.
More advanced techniques are then demonstrated, such as integrating WebGL with content from Facebook, the social media site, and with live stock market data to show how 3D can be a more effective means of navigation and communication. We then deploy content from other 3D applications developed by architects and engineers to bring their content to the Web and as an engaging tool for education. Finally, we look at WebGL as art applied to the design of 3D websites to engage audiences like never before.
Project 1, Building Great Web3D, introduces us to 3D graphics concepts—lights, cameras, 3D meshes, and their placement in 3D space, plus animation with X3D.
Project 2, WebGL for E-Commerce, describes how to build e-commerce sites in 3D using existing assets while introducing WebGL technology including shader programming inside the GPU. Then, we look at the issues and opportunities in building a WebGL 3D e-commerce site.
Project 3, User Experience, Story, Character, Visual Design, and Interactivity, applies shader languages to texture maps in order to create effects such as flags waving in the wind and waterfalls. Then, we will create engaging night scenes with lighting and fog when navigating 3D scenes.
Project 4, Mobile and Web3D Gaming, builds 2D user interfaces in a 3D environment, common in video games. We will then implement features of games such as misdirection to create challenges in games and implement gravity.
Project 5, Social Media Meets Its Destiny, interfaces WebGL with Facebook, the social media website, in order to build 3D interfaces to visit your Facebook friends. Also, we will learn about the Facebook programming interface to expand our applications.
Project 6, 3D Reveals More Information, demonstrates how to display data from a real-time Internet feed such as the stock market in 3D. We then demonstrate techniques to display large amounts of data and show how to navigate into the data so that we can analyze the data for a full year down to a day for a more refined display.
Project 7, Adapting Architecture, Medical, and Mechanical Engineering to Web3D, discusses the issues and solutions to porting the work of architects and engineers to the Web, given their 3D drawings. We then add the features of 3D renderings, including reflection and refraction of light to simulate windows and transparencies, other materials such as bricks with depth, and multiple cameras in a scene.
Project 8, 3D Websites, revisits X3D to create and navigate 3D websites and create engaging scenes with lighting and normal maps so that surfaces look natural. We then add portals to transport within a 3D website for faster navigation.
Project 9, Education in the Third Dimension, demonstrates how to select a specific chemical element from the periodic chart and then select countries off a wall map, demonstrating how to pick irregular shapes. Finally, we show how 3D graphics can be an effective tool to show math algorithms.
Project 10, The New World of 3D Art, recreates the complex architecture of Chicago's Art Institute, and then invents a new interactive 3D art based on the work of the famous pop artist Roy Lichtenstein.
WebGL requires a basic editor such as Notepad and a web browser, preferably Firefox as it is better suited for development and testing WebGL. To build engaging 3D scenes, you will also need an image editing software such as Photoshop, but many tools will work. Also, you will need a 3D modeling tool to create content, preferably 3D Studio Max because of its simple user interface, but Blender is available for free.
WebGL is developed with JavaScript and applies math algorithms such as matrices, distance formulae, and trigonometry. For many, this will be a refresher from high school math, with quick tutorials into the math included in the book.
Web developers will be particularly interested in this next wave of content. Your JavaScript and HTML5 skills are completely transferable to Web3D. Web developers will discover that creating Web3D and 3D graphics is an excellent new skill to add to your resume.
Those looking for an introduction to 3D graphics will find this book an excellent starting point. WebGL can be built quickly using technologies and techniques common to all 3D graphics applications without the complexity, from motion pictures and video games to mobile development.
2D and 3D artists will be very happy working in Web3D. They will enjoy applying their skills in creative ways and exploring the possibilities that WebGL offers, yet with simple examples from the book.
For those who are new to programming, you will find this book to be an excellent starting point. JavaScript has many constructs that are common to all programming languages, yet it does not have the overhead and learning curve of high-level languages such as Java and C++. In addition, 3D graphics is a great way to validate whether a program works and have fun experimenting in it too.
Finally, managers in marketing and research and development and producers involved with content development will appreciate learning the possibilities of WebGL. This book will be an excellent reference and will give you insights into managing Web3D's development with just enough insights into the technology. Managers can expect to learn both fundamental concepts and the capabilities of interactive Web3D for web and mobile applications.
This section explains what you will build, with a screenshot of the completed project.
This section explains why the project is cool, unique, exciting, and interesting. It describes the advantages that the project will give you.
This section explains the major tasks required to complete your project, which are as follows:
Task 1
Task 2
Task 3
Task 4
This section mentions the prerequisites for the project (if any), such as resources or libraries that need to be downloaded.
Each task is explained using the following sections:
This section explains any preliminary work that you may need to do before beginning work on the task.
This section explains how the steps performed in the previous section (Engage thrusters) allow us to complete the task.
This section explains the task we accomplished in the project. This is mandatory and should occur after all the tasks in the project are completed.
This section explains things to be done or tasks to be performed using the concepts explained in this project.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Saturn also has a <Transform> node centered around the Sun and two child <Transform> nodes to control Saturn's day and rings that are constructed from a flat plane and a texture map with a transparency."
A block of code is set as follows:
<Shape>
<Appearance>
<ImageTexture url="./textureMaps/bassethound.jpg"/>
</Appearance>
<IndexedFaceSet coordIndex="0 1 2 -1 2 3 0 -1" texCoordIndex="0 1 2 -1 2 3 0 -1">
<Coordinate point="-2 2 0 -2 -2 0 2 -2 0 2 2 0"/>
<TextureCoordinate point="0 1 0 0 1 0 1 1"/>
</IndexedFaceSet>
</Shape>New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "The neon X Y Z display on the left turns on in a red, green, and blue sequence, and glows onto the street with a red, green, and blue tinge using point lights."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
We also provide you a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from: https://www.packtpub.com/sites/default/files/downloads/0919OS_ColoredImages.pdf.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.