12.7: Live Demos

The web site version of this book includes “live” or “interactive” demos. The demos are small programs written as web pages using JavaScript and either HTML canvas graphics or WebGL. Although they are designed to be run as small applications inside other web pages, they can also be run as independent web pages. In the web site download of this book, you can find the demos in the folder named demos, organized by chapter number. They can be run directly from that folder. Note that each of the demos requires certain other files that are contained in the demos folder; if you copy a demo to a different location, be sure to also copy all the files on which it depends.

The demos from Chapter 2 use the 2D canvas graphics API, which will work in almost all modern web browsers, including Internet Explorer 9 or later. Demos from the remaining chapters use WebGL, which will work with most modern desktop browsers, including Internet Explorer 11 or later, and many browsers on mobile devices. (However, WebGL might have problems in some of these browsers on some machines.)

The demos in Chapter 3 and Chapter 4 use glsim.js, a JavaScript library that I wrote to simulate a subset of OpenGL 1.1. Information about glsim can be found in glsim/glsim-doc.html. For many of the demos, the reader is not expected to understand the program code for the demo at the point where the demo occurs in the book.

• c2/pixel-magnifier.html — from Section 2.1. Magnifies a small square of pixels in an image so that the user can see how text, lines and other shapes are made from pixels, including antialiasing.
• c2/rgb-hsv.html — from Section 2.1. Lets the user modify a color in the RGB and HSV color spaces by dragging sliders.
• c2/approximating-ovals.html — from Section 2.2. Shows how ovals can be approximated by a polygons with different numbers of sides.
• c2/cubic-bezier.html — from Section 2.2. Lets the user modify a cubic Bezier curve by dragging endpoints and control points.
• c2/quadratic-bezier.html — from Section 2.2. Lets the user modify a quadratic Bezier curve by dragging endpoints and control points.
• c2/transforms-2d.html — from Section 2.3. Lets the user apply a sequence of rotation, scaling, and translation transforms to a shape and see the results.
• c2/transform-equivalence-2d.html — from Section 2.4. attempts to demonstrate the equivalence between the modeling transform and the viewport transform in 2D.
• c2/cart-and-windmills.html — from Section 2.4. Shows a simple, animated 2D scene constructed using hierarchical modeling.
• c2/SimplePaintDemo.html — from Section 2.6. Lets the user draw on a canvas using some basic shapes. A “Smudge” tool illustrates pixel manipulation. This demo is pretty much the same as the sample program canvas2d/SimplePaintProgram.html.
• c2/image-filters.html — from Section 2.6. Lets the user apply a variety of “filters” to several images. A filter, as the term is used here, replaces the color of each pixel with a weighted average of the colors of that pixel and its eight neighbors.
• c3/first-triangle-demo.html — from Section 3.1. Shows the usual first example for OpenGL: A triangle with differently colored vertices. For this demo, you can change the colors of the vertices.
• c3/first-cube.html — from Section 3.1. Draws a cube with six different colors for the sides (with no lighting effects, and with the default orthographic projection). The user can turn the depth test on and off to see the effect. And the user can use a bigger cube, to see the effects of “clipping” when parts of the cube extend outside the visible range of z-values.
• c3/axes3D.html — from Section 3.2. Shows a set of coordinate axes in 3D. The user can drag the mouse to rotate the view.
• c3/rotation-axis.html — from Section 3.2. Illustrates rotation about an axis in 3D. A cube spins about an axis of rotation. The user can select the axis.
• c3/transform-equivalence-3d.html — from Section 3.3 attempts to demonstrate the equivalence between modeling and viewing in 3D. The user drags sliders to modify a transform, and sees that transform applied both to objects as a modeling transform and to the view volume as a viewing transform. The contents of the view volume and the image that is produced are the same in either interpretation.
• c3/ifs-polyhedron-viewer.html — from Section 3.4. Lets the user view a variety of polyhedra that are defined in the program as indexed face sets. The user can rotate the polyhedron and control some rendering options.
• c4/materials-demo.html — from Section 4.1. Lets the user change the diffuse, specular and shininess properties of an object and see the result.
• c4/smooth-vs-flat.html — from Section 4.1. Lets the user see the difference between using normal vectors to model a smooth surface versus modeling a flat-sided polyhedron.
• c4/four-lights-demo.html — from Section 4.2. Demonstrates the effect of multiple, differently colored, moving lights.
• c4/two-sided-demo.html — from Section 4.2. A little demo that illustrates two-sided lighting, with different front and back materials.
• c4/texture-transform.html — from Section 4.3. Shows textures on various objects, with texture transformations that the user can control using sliders.
• c4/texture-from-color-buffer.html — from Section 4.3. A simple demo of the copyTexImage2D() function; draws an animated 2D scene and uses it as a texture on a 3D object.
• c4/walkthrough.html — from Section 4.4. Lets the user move around in a 3D world by clicking buttons, demonstrating the idea of a moving viewer or camera.
• c5/point-cloud.html — from Section 5.1. A first example of using the three.js JavaScript 3D modeling API. It uses a PointCloud object to show an animated cloud of points.
• c5/mesh-objects.html — from Section 5.1. Lets the user view many of the basic three.js geometries, with a variety of materials.
• c5/vertex-and-color-animation.html — from Section 5.2. Uses per-face and per-vertex coloring to create a multicolored sphere. Both the colors and the position of the vertices can be animated.
• c5/textures.html — from Section 5.2. Demonstrates textures on a variety of three.js objects.
• c5/mesh-animation.html — from Section 5.2. Shows animated models of a horse and a stork, using models with “morph targets” and the class THREE.MorphAnimation. The models are from the three.js download.
• c5/raycaster-input.html — from Section 5.3. Lets the user edit a scene using the mouse. Uses an object of type THREE.Raycaster to get mouse input from the user.
• c5/shadows.html — from Section 5.3. Demonstrates support for shadows in three.js.
• c5/reflection-demo.html — from Section 5.3. Demonstrates environment mapping to sim- ulate reflection of an environment. The environment in this case is a skybox. (The demo is very similar to the sample program threejs/reflection.html.)
• c6/shape-stamper-demo.html — from Section 6.2. A demo version of the sample WebGL program webgl/shape-stamper.html. The user clicks the canvas to stamp shapes onto the canvas, with properties determined by a set of popup menus. The demo has the same functionality as the sample program, but the shapes are drawn using a different technique.
• c6/moving-points-demo.html — from Section 6.2. A demo version of the sample WebGL program webgl/moving-points.html, with identical functionality. Uses a single gl.POINTS primitive to display a set of moving, colored disks.
• c6/webgl-limits.html — from Section 6.3. Displays a list of values for certain resource limits in WebGL, such as the number of attributes in a shader program or the size of the viewport. These values can be different on different devices and in different web browsers.
• c6/textured-points.html — from Section 6.4. shows texture images used on a primitive of type gl.POINTS. It is similar to moving-points-demo.html, except that the points are textured instead of colored.
• c6/multi-texture.html — from Section 6.4. Uses two textures on the same object, with two sampler variables in the shader program to represent the texture units that are used to apply the textures.
• c7/rotators.html — from Section 7.1. Demonstrates the difference between a SimpleRotator (webgl/simple-rotator.js) and a TrackballRotator (webgl/trackball-rotator.js) by letting the user rotate cubes using the two rotators.
• c7/per-pixel-vs-per-vertex.html — from Section 7.2. Lets the user compare per-pixel lighting to per-vertex lighting, by applying the two techniques to identical objects with identical lighting settings.
• c7/spotlight-demo.html — from Section 7.2. Three colored spotlights shine on a square, and the user controls the cutoff angle and spot exponent. A demo version of the sample program webgl/spotlights.html, with some added animation for fun.
• c7/generated-texcoords.html — from Section 7.3. Uses texture coordinates generated from object or eye coordinates, instead of providing the texture coordinates to the shader program as an attribute.
• c7/procedural-textures.html — from Section 7.3. Demonstrates several 2D and 3D procedural textures.
• c7/cube-camera-demo.html — from Section 7.4. Essentially a copy of the sample WebGL program webgl/cube-camera.html. Shows a skybox and moving cubes reflected on the surface of a teapot or other object. Uses a dynamic cubemap texture that is redrawn for every frame.