1. Java Graphics2D Examples

There are a few examples in Section 2.4 and Section 2.5 that uses the 2D graphics API that is part of Java's Swing GUI toolkit. In the web site download, the source code for these examples can be found in the folder named java2d inside the source folder. Each example is a single file that can be compiled to produce an application; no additional Java files are needed.

• HierarchicalModeling2D.java — shows a simple animated scene, with a moving cart and rotating windmills, that uses hierarchical modeling. In this version of the program, the hierarchy is implemented procedurally, using subroutines to draw the objects in the scene.
• SceneGraphAPI2D.java — shows the same scene as the previous example, but this time implemented using a scene graph data structure. The scene graph is implemented using static nested classes in the main class.
• GraphicsStarter.java and AnimationStarter.java draw simple static and animated scenes, respectively, and are meant to be used as a framework for experimenting with Java graphics. EventsStarter.java is a similar framework for working with mouse and key events in a graphics program.
• PaintDemo.java draws a polygon that can be filled with either a gradient or a texture image, and lets you adjust their properties. This is just a demo of Java paints. The image files QueenOfHearts.png and TinySmiley.png are part of this program and must be in the same location as the compiled Java class files when the program is run.
• JavaPixelManipulation.java is a demo that manipulates colors of individual pixels in a BufferedImage. The user can draw a simple picture or load an image from a file. A "Smudge" tool smears out pixel colors, and filters modify the image by performing averaging operations on the pixel colors in the image.

2. HTML Canvas 2D Examples

The 2D canvas API is discussed in Section 2.6, and several examples are mentioned in that section. Canvas examples are written as web pages, and you can look at the web page in a browser to see what it does. However, you are also meant to read the source code. And the first four examples are meant to be used as a basis for your own experimentation. (Note that all of the live demos in Chapter 2 use the canvas API, but you are not necessarily meant to understand the source code of the demos.) In the web site download of this book, you can find these examples in the canvas2d folder inside the source folder.

• GraphicsStarter.html is a minimal framework for drawing on an HTML canvas. It includes examples of drawing text and various shapes.
• GraphicsPlusStarter.html adds a few convenience functions to the previous example, including a function for setting up a coordinate system on the canvas and functions to draw shapes such as lines and ovals that are not included in the basic API. It includes examples of using transforms
• AnimationStarter.html adds animation to the previous example and includes a simple example using hierarchical modeling.
• EventsStarter.html is a minimal framework for using keyboard and mouse events with a canvas, with some examples of basic event handling.
• SimplePaintProgram.html lets the user draw using simple shapes. There is also a "smudge" tool that lets the user smudge the drawing as if it is drawn in wet paint; this is an example of pixel manipulation in the HTML canvas API. The program shows how to use an "off-screen canvas." The demo program c2/SimplePaintDemo.html is a version of this program that uses an "overlay canvas" instead of an off-screen canvas.

3. Scalable Vector Graphics Examples

Section 2.7 discusses SVG, a scene description language for 2D vector graphics. Several examples were discussed in that section. These examples can be opened in a web browser to see the images they produce. View the source code for the web page to see the program that produces the image. You can also open the files in a text editor to read the source. Some of the examples produce animated images. SVG images should work in almost all modern web browsers. These examples can be found in the svg folder inside the source folder.

• first-svg-example.svg is a very short first example that just draws a few basic shapes.
• svg-starter.svg shows the basic document structure for an SVG image, includes examples of most of the basic shapes, and has a lot of comments to explain what is going on.
• svg-face.svg is a very simple first example of grouping.
• svg-hierarchy.svg is an example of hierarchical modeling that makes a model of a wheel and a model of a cart that uses two wheels as components. The image shows a wheel and four copies of the cart. The wheel and cart models are also used in the cart-and-windmill animation at the end of this list.
• first-svg-animation.svg contains examples of simple animation, keyframe animation, and transform animation.
• hierarchical-animation.svg shows a simple animated hierarchical model.
• cart-and-windmill.svg is a more complex example of hierarchical modeling in SVG. The scene is an animation that shows a "cart" moving down a road as windmills turn in the background. The animation is the same as the one implemented in the Java example java2d/HierarchicalModeling2D.java and in the JavaScript demo c2/cart-and-windmills.html.

4. OpenGL 1.1 Examples

OpenGL 1.1 is the topic of Chapter 3 and Chapter 4. Examples in those chapters primarily use the C API for OpenGL. However, the Java API, JOGL, is also discussed. Most program examples are available in both the C and the Java APIs. The JOGL versions can be found in the directory named jogl inside the source directory. The C versions, which use the GLUT library to create and manage OpenGL windows, can be found in the directory named glut inside source. (Many of these programs use a "camera" API defined in jogl/Camera.java for Java and in glut/camera.c and glut/camera.h for C.)

The OpenGL demos in the book are written using glsim.js, a JavaScript library that implements a small subset of the C API for OpenGL 1.1 on top of WebGL 1.0. Information about glsim can be found in glsim/glsim-doc.html. Some of the program examples are available in HTML versions that use the glsim library. They can be found in the glsim directory inside the source directory.

• glut/first-triangle.c, jogl/FirstTriangle.java and glsim/first-triangle.html are C, Java, and JavaScript versions of the very first OpenGL example: a triangle whose vertices are assigned the colors red, green, and blue. You can use this example as a starting point for trying out some basic 2D drawing commands. From Section 3.1.
• glut/unlit-cube.c, jogl/UnlitCube.java, and glsim/unlit-cube.html are C, Java, and JavaScript versions of a program that draws a cube using modeling transformations applied to a square. There is no lighting in this program, and it uses a basic orthographic projection, so the image is not realistic. From Section 3.2.
• glut/opengl-cart-and-windmill-2d.c (for C), jogl/CartAndWindmillJogl2D.java (for Java), and glsim/opengl-cart-and-windmill.html (for JavaScript) are versions of an example of hierarchical modeling and animation in two dimensions with OpenGL 1.1. It illustrates 2D graphics in OpenGL as well as the use of glPushMatrix and glPopMatrix for hierarchical modeling. The animation is almost the same as the one implemented in the Java Graphics2D example java2d/HierarchicalModeling2D.java and in the HTML canvas graphics demo c2/cart-and-windmills.html. From Section 3.2.
• glut/camera.c and the corresponding header file glut/camera.h for C, or jogl/Camera.java for JOGL, implement a "camera" API for use with OpenGL 1.1. This is a library for use in other programs, not itself a complete program. The corresponding API for JavaScript is part of my GLSim library, glsim/glsim.js. A camera is used in most of the following examples. Discussed in Section 3.3.
• glut/ifs-polyhedron-viewer.c and jogl/IFSPolyhedronViewer.java are C and Java versions of a program that lets the user view polyhedra that are defined as indexed face sets. The polyhedra models are defined in jogl/Polyhedron.java for Java and in glut/polyhedron.c and glut/polyhedron.h for C. This program also requires the camera API discussed in the previous item. From Section 3.4.
• glut/cubes-with-vertex-arrays.c, jogl/CubesWithVertexArrays.java, and the JavaScript version glsim/cubes-with-vertex-arrays.html demonstrate drawing using glDrawArrays and glDrawElements. From Section 3.4.
• glut/color-cube-of-spheres.c and jogl/ColorCubeOfSpheres.java draw a large number of spheres using a variety of rendering methods, and show the time that it takes to render the image. The point is to compare render times for different rendering methods, including display lists, glDrawArrays, and vertex buffer objects. The reader is not expected to understand all of the code in this program. From Section 3.4.
• glut/glut-starter.c, jogl/JoglStarter.java, and glsim/glsim-starter.html are "starter" files for writing OpenGL 1.1 applications using C, Java, and my JavaScript OpenGL simulator. These programs don't draw anything, but they have function/method stubs for drawing as well as for mouse and keyboard interaction and animation. Discussed in Section 3.6
• glut/four-lights.c and jogl/FourLights.java are an example of using light sources and material properties. The program demonstrates multiple, moving light sources and lets the user turn the lights on and off to see the effect. The demo glsim/fout-lights-demo.html is a JavaScript version of the same program. From Section 4.2.
• glut/texture-demo.c is a C program that shows a variety of textures on a variety of objects. It depends on the files glut/textured-shapes.c and glut/textured-shapes.h, and on the folder glut/textures that contains the texture images used by the program. The Java version is jogl/TextureDemo.java, and it requires jogl/TexturedShapes.java, as well as the image folder jogl/textures. From Section 4.3.
• glut/texture-from-color-buffer.c and jogl/TextureFromColorBuffer.java demonstrate the technique of copying an image from the color buffer using the function glCopyTexImage2D(). Draws an animated 2D scene and then uses it as a texture on various objects. Requires the same textured shape libraries mentioned in the previous item. From Section 4.3.
• glut/texture-objects.c is a small program to demonstrate the use of texture objects to handle multiple textures. It is available for C only. From Section 4.3.

5. Three.js Examples

Three.js is a JavaScript library for 3D graphics on Web pages, using WebGL and the HTML canvas. It is discussed in Chapter 5. The examples can be found in the folder named threejs, inside the source folder of the web site download. All of the examples use the JavaScript file three.module.min.js, which is a "minified" version of the library, not meant for human readers. A human-readable version, three.module.js is also available. The examples also use other three.js scripts, which can be found in the script folder inside the threejs folder. The version is three.js Release 154. Three.js is an open-source project. It can be downloaded from threejs.org.

• threejs/full-window.html — Three.js is typically used to write programs that fill the browser window and continually run an animation. This example shows how to do that, but my other examples do not follow the same pattern. The animation shows colored balls bouncing around inside a translucent box. The user can rotate the scene with the mouse. From Section 5.1
• threejs/modeling-starter.html — A starter program for experimenting with building and animating a scene graph model with three.js. The user can rotate the model using the keyboard. It includes a simple example. From Section 5.1
• threejs/diskworld-1.html — Shows an animated model of a simple "car" driving around the edge of a disk, with "trees" made from a cylinder and a cone. Based on the previous sample program. From Section 5.1
• threejs/vertex-groups.html — Shows how to use an array of materials on a cube and on a pyramid whose geometry is constructed by hand. This uses the "vertex group" feature of THREE.BufferedGeometry. This is also a version threejs/vertex-groups-indexed.html that represents the pyramid using the indexed face set pattern. From Section 5.2
• threejs/textured-pyramid.html — Shows the same pyramid as the previous example, with a texture. Shows how to define texture coordinates for a three.js geometry. From Section 5.2
• threejs/curves-and-surfaces.html — Creates several surfaces using a parametric surface, tube geometry, lathing, and extrusion. From Section 5.2
• threejs/model-viewer.html — Displays models that are loaded from files various formats, using three.js loaders. Models are from the three.js download. (See the demo c5/mesh-animation.html to see animated versions of two of the models.) From Section 5.2
• threejs/instanced-mesh.html — A small example of using a THREE.InstancedMesh object, which makes it possible to draw a large numbers of instances of the same basic geometry, with different transformations and, optionally, different colors for each copy. From Section 5.3
• threejs/skybox.html — Demonstrates using a cubemap texture to make a skybox. From Section 5.3
• threejs/reflection.html — A demonstration of using an environment map to simulate the reflection by an object of its environment. The environment is a skybox. From Section 5.3
• threejs/refraction.html — A demonstration of simulated refraction. This example is almost identical to the previous example, except for using refraction rather than reflection. From Section 5.3

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). Most of these programs work with WebGL 1.0, but a few require WebGL 2.0, as noted.

• webgl/VAO-test-webgl2.html — Demonstrates the use of Vertex Array Objects. Mentioned in Subsection 6.1.7, but it uses many techniques that will be covered later in the textbook. This program requires WebGL 2.0.
• webgl/instancing-test-webgl2.html — Demonstrates the use of instanced drawing with gl.drawArraysInstanced(). Mentioned in Subsection 6.1.8, but it uses techniques that will be covered later in the textbook. This program requires WebGL 2.0
• 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/webgl-game-of-life.html — An implementation of John H. Conway's "Game of Live" in WebGL, as a basic example of how GPUs can be used to perform computational tasks. From Section 6.4.
• webgl/texelFetch-MonaLisa-webgl2.html — A rather silly demo program that uses the GLSL ES 3.00 function texelFetch() to get colors from a texture image. This program requires WebGL 2.0. 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. There is also a version that has been ported to WebGL 2.0 and GLSL ES 3.00: webgl/basic-specular-lighting-Phong-webgl2.html. The required changes are minimal.
• webgl/parametric-function-grapher.html — Lets the user graph a parametric surface, given by equations x(u,v), y(u,v), and 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. There is also a port to WebGL 2.0, which uses vertex array objects and gl.texStorage2D(): webgl/render-to-texture-webgl2.html.
• 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 two computations: finding the average of the color values in an image and computing an image that represents the difference between two images. From Section 7.5.
• webgl/instancing-test-webgl1.html — Demonstrates the use of an extension to do instanced drawing in WebGL 1.0. This is a copy of webgl/instancing-test-webgl2.html, modified to work with WebGL 1.0. From Section 7.5.
• webgl/multiple-draw-buffers-webgl2.html — Demonstrates drawing to multiple textures attached as draw buffers to the same framebuffer. Requires WebGL 2.0 (but something similar could be done in WebGL 1.0 with an extension.) From Section 7.5.

7. WebGPU Examples

WebGPU is a new API for graphics on the Web. It has been designed from scratch to incorporate some of the features of more modern APIs such as Vulkan, Direct3D, and Metal. It is covered in Chapter 9. These programs require a web browser that supports WebGPU. As of July, 2023, WebGPU is enabled by default in the Chrome and Edge browsers on Windows and MacOS. In some other browsers, it is an experimental feature that can be enabled by the user. In a download of the web site, they can be found in the directory named webgpu in the source directory. Some of the examples use wgpu-matrix (Subsection 9.4.4) and other scripts and resources that can be found in the same directory

• webgpu/basic_webgpu_1.html — A first WebGPU example, which just draws a colored triangle. The source code has extensive comments to explain WebGPU. From Section 9.1.
• webgpu/basic_webgpu_2.html and webgpu/basic_webgpu_3.html — Variations on the previous example that draw a triangle with different colored vertices. This requires adding a second parameter to the vertex shader program. The first program does this by using two vertex buffers; the second, by using a single vertex buffer with interleaved values for the two input parameters. From Subsection 9.1.6.
• webgpu/instanced_draw.html — Uses instanced drawing to draw multiple colored disks using a single call to draw(). Shows how to use instance attributes in vertex buffers. From Subsection 9.2.1.
• webgpu/indexed_draw.html — Uses the drawIndexed() method to draw a single disk as an indexed face set using a triangle-list primitive. Also draws the disk outline using a triangle-strip primitive and shows how to use two render passes in one command buffer. From Subsection 9.2.2.
• webgpu/draw_multiple.html — Draws multiple outlined disks using different rendering passes for each disk. Also illustrates using copyBufferToBuffer() to set the value of a uniform variable between rendering passes. Also, webgpu/draw_multiple_2.html is a variation on the program that does the same thing using writeBuffer(), which requires a separate command encoder for drawing each disk. From Subsection 9.2.3.
• webgpu/indices_in_shader.html — An example of using the vertex index and the instance index in the vertex shader function. The application in this case is to imitate what can be done in WebGL with a POINTS primitive by setting a point size. WebGPU does not implement point size, so a points-list primitive can only be rendered as individual pixels. From Subsection 9.2.4.
• webgpu/multisampling.html — Demonstrates how to add multisampling to a WebGPU program, by adding it to webgpu/instanced_draw.html. Multisampling is a kind of antialiasing. From Subsection 9.2.5.
• webgpu/depth_test.html — Shows how to enable the depth test in WebGPU. The program duplicates the functionality of webgpu/draw_multiple.html but does it with instanced drawing. It also adds multisampling. But the only comments in the code are about the depth test. From Subsection 9.4.1
• webgpu/Phong_lighting.html — A direct port of webgl/basic-specular-lighting-Phong.html to WebGPU. It displays one object at a time, with some user control of material and light properties. From Subsection 9.4.2
• webgpu/diskworld_webgpu.html — A direct port of webgl/diskworld-2.html to WebGPU. It is an example of the implementation of hierarchical 3D graphics and of the OpenGL lighting model. From Subsection 9.4.5
• webgpu/first_texture.html — A first example of using textures in WebGPU. The user can select among three different kinds of texture, applied to a square. From Section 9.5.
• webgpu/textured_objects.html — Applies texture images to 3D shapes, with basic lighting. From Section 9.5.
• webgpu/texture_from_canvas.html — Takes the image for a texture from another canvas on the same page and applies it to 3D shapes. The user can do some very simple drawing on the canvas. (Aside from grabbing the texture from a canvas, there is nothing new in this program.) From Section 9.5.
• webgpu/making_mipmaps.html — Defines and tests a function that creates an image texture with a full set of mipmaps from an ImageBitmap. From Subsection 9.5.3.
• webgpu/cubemap_texture.html — Loads a cubemap texture and uses it for a skybox and for reflection mapping. It is functionally identical to the WebGL example webgl/skybox-and-env-map.html. From Subsection 9.5.4.
• webgpu/life_1.html — Conway's "Game of Life", using integer-format "r32uint" textures and the WGSL functions textureLoad() and textureStore(). The program webgpu/life_2.html performs the same task, but does it using two "r8unorm" textures, one used for sampling in the shader and one used as a color attachment for the render pipeline. From Subsection 9.5.5.
• webgpu/diffusion.html — Uses compute shaders to run a simulation of Brownian motion. White particles move randomly. When they hit a yellow or cyan particle, they change color and stop moving. Over time, an interesting dendrite-like pattern will form. From Subsection 9.6.3.
• webgpu/map_buffer_for_read.html — Illustrates reading data from a GPU buffer into the JavaScript side of the program. The application (which is really not the point of the exercise) is to use the trapezoid rule to approximate a definite integral. From Subsection 9.6.4.
• webgpu/viewport_and_scissor.html — Another moving disk animation, showing four copies of the scene in different viewports. A scissor rect is also applied in two of the viewports. From Subsection 9.7.4.
• webgpu/alpha_blend.html — Uses alpha blending to draw translucent colors. Demonstrates the blend property of the target in a render pipeline. From Subsection 9.7.5.
• webgpu/color_mask.html — Demonstrates the writeMask property of the target in a render pipeline by letting the user select which color channels to write. From Subsection 9.7.5.
• webgpu/polyhedra.html — Lets the user view several polyhedra. Demonstrates depth bias in a render pipeline by drawing the faces of the polyhedra with a depth bias, to make sure that parts of the edges are not hidden by the faces. Also uses face culling. From Subsection 9.7.5.

8. Live Demos

This book includes "live" or "interactive" demos that are embedded in the web pages. 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, Demos from Chapters 3 through 8 use WebGL, which will also work with almost all modern web browsers. (However, WebGL might still have problems in some of these browsers on some machines.) All demo programs that use WebGL will work with WebGL 1.0. The demos in Chapter 9 require a web browser that supports WebGPU.

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. Note that the JavaScipt code in the demos has not been updated to use the more modern version of JavaSctipt that is covered in Section A.3.

• 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 simulate 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.
• c9/first-webgpu-demo.html — from Section 9.1. A WebGPU demo that just draws a colored triangle. It is also meant as a test to check whether a browser supports WebGPU.
• c9/multisampling-demo.html — from Section 9.2. Shows an animation of moving randomly colored disks. The disks are drawn using instanced drawing. The demo uses multisampling for antialiasing, and lets the user turn multisampling on and off to see the effect.
• c9/diskworld-webgpu-demo.html — from Section 9.4. Illustrates hierarchical 3D graphics in WebGPU. The functionality and code are identical to the sample program webgpu/diskworld_webgpu.html except for changes made to turn it into a demo.
• c9/diffusion-demo.html —from Subsection 9.6.3. Uses WebGPU compute shaders to implement a simulation of diffusion. White particles move by Brownian motion. When a white particle hits a yellow or cyan particle, it changes color to match and stops moving. The result is to build up an interesting dendrite-like pattern. This is a demo version of the sample program webgpu/diffusion.html.