跳转至

示例程序的源代码

Source Code and Demos

这本书的网页版下载中，源代码示例可以在名为“source”的文件夹中找到。此页面还包含了书中使用的所有“实时演示”的链接列表；它们可以在名为“demos”的文件夹中找到。

（注意：HTML canvas 图形、three.js、WebGL 和 WebGPU 的示例和演示是 HTML 文件，可以在网络浏览器中打开。要查看源代码，你可以在纯文本编辑器中打开文件，或者在网络浏览器中打开它并使用浏览器的“查看源代码”命令。许多 HTML 程序会加载图形模型和其他文件。在大多数浏览器中，使用这些资源的程序在从本地硬盘加载 HTML 文件时将无法工作。也就是说，当从这本书的网页版下载的源代码或演示文件夹中运行时，它们在那些网络浏览器中会失败。当通过网络服务器加载时，程序应该可以正常工作。可以在当地运行网络服务器。可能可以配置你的网络浏览器以使用本地文件的资源，但通常不建议使用该设置浏览网络。）

This page contains links to source code for the programs that are used as examples in this book. In the web site download of the book, the source code examples can be found in the folder named source. This page also contains a list of links to all of the "live demos" that are used in the book; they can be found in the folder named demos.

(Note: Examples and demos for HTML canvas graphics, three.js, WebGL, and WebGPU are html files, which can be opened in a web browser. To see the source code, you can open the file in a plain text editor, or you can open it in a Web browser and use the browser's "View Source" command. Many of the html programs load graphical models and other files. In most browsers, the programs that use such resources will not work when the html files are loaded from a local hard drive. That is, they will fail in those web browsers when run from the source or demo folder in the web site download of this book. The programs should work OK when loaded through a web server. It is possible to run a web server locally. It might be possible to configure your web browser to use resources from local files, but it is generally not recommended to browse the web with that setting.)

1. Java Graphics2D 示例

1. Java Graphics2D Examples

在这本书的 第 2.4 节 和 第 2.5 节 中，有一些示例使用了 Java Swing GUI 工具包中包含的 2D 图形 API。在网站下载的版本中，这些示例的源代码可以在源文件夹内的 java2d 文件夹中找到。每个示例都是一个单独的文件，可以编译生成应用程序；不需要额外的 Java 文件。

  • HierarchicalModeling2D.java — 展示了一个简单的动画场景，包括移动的手推车和旋转的风车，它使用了分层建模。在这个程序版本中，层次结构是通过过程式实现的，使用子程序来绘制场景中的对象。
  • SceneGraphAPI2D.java — 展示了与前一个示例相同的场景，但这次使用场景图数据结构实现。场景图是使用主类中的静态嵌套类实现的。
  • GraphicsStarter.java 和 AnimationStarter.java 分别绘制简单的静态和动画场景，旨在作为使用 Java 图形的实验框架。EventsStarter.java 是一个类似的框架，用于在图形程序中处理鼠标和键盘事件。
  • PaintDemo.java 绘制了一个可以填充渐变或纹理图像的多边形，并允许你调整它们的性质。这只是 Java 绘画的演示。图像文件 QueenOfHearts.png 和 TinySmiley.png 是这个程序的一部分，当程序运行时，它们必须与编译的 Java 类文件在同一位置。
  • JavaPixelManipulation.java 是一个演示，它在 BufferedImage 中操作单个像素的颜色。用户可以绘制一个简单的图片或从文件加载图片。"涂抹"工具将像素颜色涂抹开来，过滤器通过对图像中的像素颜色执行平均操作来修改图像。

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 示例

2. HTML Canvas 2D Examples

在 第 2.6 节 中讨论了 2D 画布 API，并且在那一节中提到了几个示例。画布示例被编写为网页，你可以在浏览器中查看网页来了解它的功能。然而，你也应当阅读源代码。前四个示例旨在作为你自己实验的基础。（注意，第 2 章 中的所有实时演示都使用了画布 API，但你不一定需要理解演示的源代码。）在这本书的网站下载中，你可以在源文件夹内的 canvas2d 文件夹中找到这些示例。

  • GraphicsStarter.html 是一个在 HTML 画布上绘图的最小框架。它包括绘制文本和各种形状的示例。
  • GraphicsPlusStarter.html 在前一个示例中增加了一些便利函数，包括一个在画布上设置坐标系的函数，以及一些基本 API 中未包含的绘制线条和椭圆形等形状的函数。它包括使用变换的示例。
  • AnimationStarter.html 在前一个示例中增加了动画，并包括了一个使用分层建模的简单示例。
  • EventsStarter.html 是一个使用键盘和鼠标事件与画布交互的最小框架，其中一些基本事件处理的示例。
  • SimplePaintProgram.html 允许用户使用简单形状进行绘图。还有一个“涂抹”工具，允许用户像在湿漆上绘画一样涂抹图画；这是 HTML 画布 API 中像素操作的一个示例。程序展示了如何使用“离屏画布”。演示程序 c2/SimplePaintDemo.html 是这个程序的一个版本，它使用“叠加画布”而不是离屏画布。

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. SVG 示例

3. Scalable Vector Graphics Examples

第 2.7 节 讨论了 SVG，这是一种用于二维矢量图形的场景描述语言。在那一节中讨论了几个示例。这些示例可以在网络浏览器中打开，以查看它们产生的图像。查看网页的源代码，了解生成图像的程序。你也可以在文本编辑器中打开文件，阅读源代码。一些示例产生了动画图像。SVG 图像应该在几乎所有现代网络浏览器中都能工作。这些示例可以在源文件夹内的 svg 文件夹中找到。

  • first-svg-example.svg 是一个非常简单的示例，只绘制了一些基本形状。
  • svg-starter.svg 展示了 SVG 图像的基本文档结构，包括大多数基本形状的示例，并有许多注释来解释发生了什么。
  • svg-face.svg 是一个非常简单的分组示例。
  • svg-hierarchy.svg 是一个分层建模的示例，它制作了一个车轮模型和一个使用两个车轮作为组件的手推车模型。图像显示了一个车轮和四辆手推车的副本。车轮和手推车模型也用于列表末尾的风车动画。
  • first-svg-animation.svg 包含了简单动画、关键帧动画和变换动画的示例。
  • hierarchical-animation.svg 展示了一个简单的分层动画模型。
  • cart-and-windmill.svg 是 SVG 中分层建模的一个更复杂的示例。场景是一个动画，显示一个“手推车”在风车转动的背景下沿着道路移动。这个动画与 Java 示例 java2d/HierarchicalModeling2D.java 和 JavaScript 演示 c2/cart-and-windmills.html 中实现的动画相同。

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 示例

4. OpenGL 1.1 Examples

OpenGL 1.1 是 第 3 章 和 第 4 章 的主题。这些章节中的示例主要使用 OpenGL 的 C API。然而，也讨论了 Java API，JOGL。大多数程序示例都可以在 C 和 Java API 中找到。JOGL 版本可以在源目录中的 jogl 目录中找到。使用 GLUT 库创建和管理 OpenGL 窗口的 C 版本可以在源目录中的 glut 目录中找到（这些程序中的许多都使用在 jogl/Camera.java 中为 Java 定义的“摄像机”API，在 glut/camera.c 和 glut/camera.h 中为 C 定义）。

书中的 OpenGL 演示是用 glsim.js 编写的，这是一个 JavaScript 库，它在 WebGL 1.0 上实现了 OpenGL 1.1 的一小部分 C API。关于 glsim 的信息可以在 glsim/glsim-doc.html 中找到。一些程序示例也有使用 glsim 库的 HTML 版本。它们可以在源目录中的 glsim 目录中找到。

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.

5. Three.js 示例

5. Three.js Examples

Three.js 是一个用于网页上 3D 图形的 JavaScript 库，使用 WebGL 和 HTML 画布。它在 第 5 章 中进行了讨论。示例可以在网站下载的源文件夹中找到，位于名为 threejs 的文件夹内。所有示例都使用 JavaScript 文件 three.module.min.js，这是库的“压缩”版本，不适合人类阅读。也有一个适合人类阅读的版本，three.module.js。示例还使用其他 three.js 脚本，可以在 threejs 文件夹内的 script 文件夹中找到。版本是 three.js 版本 154。Three.js 是一个开源项目。它可以从 threejs.org 下载。

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 示例

6. WebGL Examples

WebGL 是用于网页上的 OpenGL 版本。它在第6章和第7章中进行了讨论。示例程序可以在名为webgl的文件夹中找到，该文件夹位于网站下载的source文件夹内。WebGL的示例程序是HTML文件。通过在Web浏览器中打开它们来运行程序。可以在文本编辑器中查看源代码，或者使用Web浏览器中的“查看源代码”命令。WebGL程序的一部分是用JavaScript编写的。另一部分由顶点着色器和片段着色器组成，这些着色器是用GLSL编写的。许多这些示例依赖于同一webgl目录中的脚本。特别是，3D示例使用了glMatrix库(7.1.1小节)。这些程序中的大多数使用WebGL 1.0，但有一些需要WebGL 2.0，如文中所述。

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.

7. WebGPU 示例

7. WebGPU Examples

WebGPU 是 Web 上的全新图形 API。它从头开始设计，以整合更现代 API 的一些特性，如 Vulkan、Direct3D 和 Metal。它在第9章中被介绍。这些程序需要支持 WebGPU 的网络浏览器。截至2023年7月，WebGPU 在 Windows 和 MacOS 上的 Chrome 和 Edge 浏览器中默认启用。在其他一些浏览器中，它是用户可以启用的实验性功能。在网站的下载中，它们可以在源目录中名为webgpu的目录中找到。一些示例使用wgpu-matrix (9.4.4小节) 以及同一目录中可以找到的其他脚本和资源。

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

8. 实时演示

8. Live Demos

这本书包括嵌入在网页中的“实时”或“交互式”演示。这些演示是使用 JavaScript 和 HTML 画布图形或 WebGL 编写的小程序。尽管它们被设计为在其他网页内作为小型应用程序运行，但它们也可以作为独立的网页运行。在这本书的网站下载中，你可以在按章节编号组织的 demos 文件夹中找到演示。它们可以直接从该文件夹运行。请注意，每个演示都需要演示文件夹中包含的某些其他文件；如果你将演示复制到另一个位置，请确保也复制它所依赖的所有文件。

第2章Chapter 2的演示使用 2D 画布图形 API，它将在几乎所有现代网络浏览器中工作。第3章到第8章的演示使用 WebGL，这也将在几乎所有现代网络浏览器中工作。（然而，在某些机器上的一些浏览器中，WebGL 可能仍然存在问题。）所有使用 WebGL 的演示程序都将与 WebGL 1.0 兼容。第9章的演示需要支持 WebGPU 的网络浏览器。

第3章Chapter 3和第4章Chapter 4的演示使用 glsim.js，一个我编写的 JavaScript 库，用于模拟 OpenGL 1.1 的一个子集。关于 glsim 的信息可以在 glsim/glsim-doc.html 中找到。

对于许多演示，读者在书中演示出现的点上并不期望理解演示的程序代码。请注意，演示中的 JavaScipt 代码尚未更新为在 Section A.3 中介绍的更现代的 JavaSctipt 版本。

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.