Table of Contents (18) Chapters
WebGL Beginner's Guide
Credits
About the Authors
Acknowledgement
About the Reviewers
www.PacktPub.com
Preface
1. Getting Started with WebGL
- System requirements
- What kind of rendering does WebGL offer?
- Structure of a WebGL application
- Creating an HTML5 canvas
- Time for action – creating an HTML5 canvas
- Accessing a WebGL context
- Time for action – accessing the WebGL context
- WebGL is a state machine
- Time for action – setting up WebGL context attributes
- Loading a 3D scene
- Time for action – visualizing a finished scene
- Summary
2. Rendering Geometry
- Vertices and Indices
- Overview of WebGL's rendering pipeline
- Rendering geometry in WebGL
- Putting everything together
- Time for action – rendering a square
- Rendering modes
- Time for action – rendering modes
- WebGL as a state machine: buffer manipulation
- Time for action – enquiring on the state of buffers
- Advanced geometry loading techniques: JavaScript Object Notation (JSON) and AJAX
- Time for action – JSON encoding and decoding
- Time for action – loading a cone with AJAX + JSON
- Summary
3. Lights!
- Lights, normals, and materials
- Using lights, normals, and materials in the pipeline
- Shading methods and light reflection models
- ESSL—OpenGL ES Shading Language
- Writing ESSL programs
- Time for action – updating uniforms in real time
- Time for action – Goraud shading
- Time for action – Phong shading with Phong lighting
- Back to WebGL
- Bridging the gap between WebGL and ESSL
- Time for action – working on the wall
- More on lights: positional lights
- Time for action – positional lights in action
- Summary
4. Camera
- WebGL does not have cameras
- Vertex transformations
- Normal transformations
- WebGL implementation
- The Model-View matrix
- The Camera matrix
- Time for action – exploring translations: world space versus camera space
- Time for action – exploring rotations: world space versus camera space
- Basic camera types
- Time for action – exploring the Nissan GTX
- The Perspective matrix
- Time for action – orthographic and perspective projections
- Structure of the WebGL examples
- Summary
5. Action
- Matrix stacks
- Animating a 3D scene
- Timing strategies
- Architectural updates
- Connecting matrix stacks and JavaScript timers
- Time for action – simple animation
- Parametric curves
- Time for action – bouncing ball
- Optimization strategies
- Interpolation
- Time for action – interpolation
- Summary
6. Colors, Depth Testing, and Alpha Blending
- Using colors in WebGL
- Use of color in objects
- Time for action – coloring the cube
- Use of color in lights
- Architectural updates
- Time for action – adding a blue light to a scene
- Time for action – adding a white light to a scene
- Time for action – directional point lights
- Use of color in the scene
- Depth testing
- Alpha blending
- Time for action – blending workbench
- Creating transparent objects
- Time for action – culling
- Time for action – creating a transparent wall
- Summary
7. Textures
- What is texture mapping?
- Creating and uploading a texture
- Using texture coordinates
- Using textures in a shader
- Time for action – texturing the cube
- Texture filter modes
- Time for action – trying different filter modes
- Texture wrapping
- Time for action – trying different wrap modes
- Using multiple textures
- Time for action – using multitexturing
- Cube maps
- Time for action – trying out cube maps
- Summary
8. Picking
- Picking
- Setting up an offscreen framebuffer
- Assigning one color per object in the scene
- Rendering to an offscreen framebuffer
- Clicking on the canvas
- Reading pixels from the offscreen framebuffer
- Looking for hits
- Processing hits
- Architectural updates
- Time for action – picking
- Implementing unique object labels
- Time for action – unique object labels
- Summary
9. Putting It All Together
- Creating a WebGL application
- Architectural review
- Virtual Car Showroom application
- Defining what the GUI will look like
- Implementing the shaders
- Setting up the scene
- Configuring some WebGL properties
- Loading the cars
- Rendering
- Time for action – customizing the application
- Summary
10. Advanced Techniques
- Post-processing
- Architectural updates
- Time for action – testing some post-process effects
- Point sprites
- Time for action – using point sprites to create a fountain of sparks
- Normal mapping
- Time for action – normal mapping in action
- Ray tracing in fragment shaders
- Time for action – examining the ray traced scene
- Summary
Index
Chapter1.Getting Started with WebGL
In 2007, Vladimir Vukicevic, an American-Serbian software engineer, began working on an OpenGL prototype for the then upcoming HTML <canvas> element which he called Canvas 3D. In March, 2011, his work would lead Kronos Group, the nonprofit organization behind OpenGL, to create WebGL: a specification to grant Internet browsers access to Graphic Processing Units (GPUs) on those computers where they were used.
WebGL was originally based on OpenGL ES 2.0 (ES standing for Embedded Systems), the OpenGL specification version for devices such as Apple's iPhone and iPad. But as the specification evolved, it became independent with the goal of providing portability across various operating systems and devices. The idea of web-based, real-time rendering opened a new universe of possibilities for web-based 3D environments such as videogames, scientific visualization, and medical imaging. Additionally, due to the pervasiveness of web browsers, these and other kinds of 3D applications could be taken to mobile devices such as smart phones and tablets. Whether you want to create your first web-based videogame, a 3D art project for a virtual gallery, visualize the data from your experiments, or any other 3D application you could have in mind, the first step will be always to make sure that your environment is ready.
In this chapter, you will:
Understand the structure of a WebGL application
Set up your drawing area (canvas)
Test your browser's WebGL capabilities
Understand that WebGL acts as a state machine
Modify WebGL variables that affect your scene
Load and examine a fully-functional scene
Previous Section
Section 1 of 13
Next Section
