12.6: WebGL Examples

WebGL is the version of OpenGL for use on Web pages. It is discussed in Chapter 6 and Chapter 7. The sample programs can be found in a folder named webgl, inside the source folder of the web site download. The sample programs for WebGL are HTML files. Run the programs by opening them in a Web browser. View the source code in a text editor or using a “View Source” command in a web browser. Part of a WebGL program is written in JavaScript. The other part consists of a vertex shader and a fragment shader written in GLSL. Many of these examples rely on scripts that are in the same webgl directory. In particular, the 3D examples use the glMatrix library (Subsection 7.1.1).

• webgl/webgl-rgb-triangle.html — The standard OpenGL example rendered using WebGL: a triangle whose vertices are red, green, and blue, where the colors of interior pixels are computed by interpolating colors from the vertices. Demonstrates the use of attributes and varying variables. From Section 6.2.
• webgl/shape-stamper.html — The user “stamps” shapes onto the canvas by clicking it with the mouse. Properties of the shape are determined by a set of pop-up menus. Demonstrates the use of uniform variables, the preserveDrawingBuffer option on the WebGL context, and a simple coordinate transformation in the vertex shader. From Section 6.2.
• webgl/moving-points.html — A set of circles moves around in the canvas, bouncing off the edges. Shows how to use the POINTS primitive in WebGL and introduces the discard statement in the fragment shader. From Section 6.2.
• webgl/simple-texture.html — A very minimal texture example. It just applies a texture image to a triangle. From Section 6.4.
• webgl/texture-from-pixels.html — Shows how to load a texture from an array that contains the pixel color component values for the texture. (Also demonstrates the difference between a gl.LINEAR and a gl.NEAREST magnification filter.) From Section 6.4.
• webgl/cubemap-fisheye.html — Loads a cubemap texture, but uses it in a 2D context to imitate a picture taken with a fisheye lens. 2D texture coordinates are first mapped onto a sphere to get the direction vector that is used to sample the cubemap. From Section 6.4.
• webgl/simple-hierarchy2D.html — Demonstrates using 2D modeling transformations in WebGL and GLSL, with some simple animated hierarchical objects. Transforms are implemented in JavaScript as objects of type AffineTransform2D, defined in the file webgl/AffineTransform2D.js. From Section 6.5.
• webgl/glmatrix-cube-unlit.html — A first example of doing 3D graphics directly in WebGL, with no lighting. From Section 7.1.
• webgl/cube-with-simple-rotator.html — Demonstrates the use of a SimpleRotator (defined in webgl/simple-rotator.js) to do mouse rotation. From Section 7.1.
• webgl/cube-with-trackball-rotator.html — Demonstrates the use of a TrackballRotator (defined in webgl/trackball-rotator.js) to do mouse rotation. This is almost identical to the previous example. From Section 7.1.
• webgl/cube-with-basic-lighting.html — A first example of implementing lighting directly in WebGL. Adds lighting to webgl/glmatrix-cube-unlit.html. The lighting in this case uses only diffuse color and a directional light from the direction of the viewer. From Section 7.2.
• webgl/basic-specular-lighting.html — A first implementation of specular reflection. From Section 7.2.
• webgl/basic-specular-lighting-Phong.html — A second implementation of specular reflection, using Phong shading (with the lighting calculations in the fragment shader). Aside from moving the calculation to the fragment shader, this example is identical to the previous example. From Section 7.2.
• webgl/parametric-function-grapher.html — Lets the user graph a parametric surface, given by equations \( x(u,v), y(u,v), z(u,v) \) entered by the user. A relatively complex program, it illustrates GLSL data structures, two-sided lighting, and polygon offset. From Section 7.2.
• webgl/spotlights.html — A demo of spotlights, with three colored spotlights. The user can change the cutoff angle and spot exponent. From Section 7.2.
• webgl/diskworld-2.html — A relatively complex program with hierarchical modeling and several kinds of lighting, including moving lights, spotlights, and light attenuation. This is the same scene as the three.js example threejs/diskworld-1.html, with added lighting features. From Section 7.2.
• webgl/texture-transform.html — Animated texture images, using glMatrix to implement texture transformations. From Section 7.3.
• webgl/bumpmap.html — A mostly successful attempt to implement bumpmapping. From Section 7.3.
• webgl/skybox-and-env-map.html — Uses a cubemap texture to make a skybox and as an environment map. From Section 7.3.
• webgl/image-blur.html — Applies a blur filter to an image. A very simple demo of using blending for something other than transparency. Also a very simple example of a multi-pass algorithm. From Section 7.4.
• webgl/render-to-texture.html — Uses a WebGL framebuffer to draw an image directly into a texture. From Section 7.4.
• webgl/cube-camera.html — Shows a skybox and moving cubes reflected on the surface of an object. Uses a dynamic cubemap texture as an environment map on the reflective object. The six images for the cubemap texture are redrawn for each frame of an animation. From Section 7.4.
• webgl/anisotropic-filtering.html — Demonstrates the use of the WebGL anisotropic filtering extension. Shows a large textured rectangle extending into the distance and lets the user turn anisotropic filtering on and off. From Section 7.5.
• webgl/image-evolver.html — demonstrates use of the WEBGL_color_buffer_float WebGL extension. The application is a simple genetic algorithm that tries to approximate a given image. The floating point color buffer is used for finding the average of the color values in an image. From Section 7.5.