Introduction to Computer Graphics, Version 1.4

Preface

This textbook represents my attempt to develop a one-semester first course in computer graphics, which would typically be taken by a computer science student in the third or fourth year of college. (How long it will continue to be appropriate is an open question, given the always-rapid changes in the field of computer graphics.) I have tried to make the book suitable for self-learning as well.

A reader of this book should have substantial experience with at least one programming language, including some knowledge of object-oriented programming and data structures. Everyone taking my own computer graphics course had at least two semesters of programming, and most had additional experience beyond that. My students studied the Java programming language, but the book should also be accessible to people with background in other languages. Examples in the book use JavaScript, Java, and C. It is possible to do all the programming in JavaScript, but some knowledge of C is also important for certain sections of the book. The essential features of the three programming languages are covered in an appendix. (If you need to learn programming from the beginning, try my free introductory Java textbook, which is available at http://math.hws.edu/javanotes.)

I used Version 1.0 of this book for a course in Fall 2015. Version 1.1 corrected some errors and typos and added some material. It was used in the Fall 2017 version of my course. Version 1.3, which I used in Fall 2021, added some material on WebGL 2.0 and GLSL ES 3.00, updated most of the JavaScript code to use ES6, and updated Chapter 5 to use Release 129 of the three.js library.

Although I have retired from teaching, I decided to work on Version 1.4 in Summer 2023. I added a new chapter on WebGPU and moved to Release 154 for three.js. Because WebGPU uses JavaScript promises, I added a new section to Appendix A to cover promises and async functions. Because three.js will soon remove the non-modular version of the library, I added a short section on JavaScript modules at the start of Chapter 5, and I modified the three.js examples to use modules. Except for the move to modular three.js, the material in Chapter 5 has not changed. Many typos and small errors have been fixed throughout the book. (Thanks to a reader, Danny Hurlburt, for fixing many of those.)

The home web site for this book is https://math.hws.edu/graphicsbook. The page at that address contains links for downloading a copy of the web site and for downloading PDF versions of the book.

This is a free textbook. You are welcome to redistribute it, as long as you do not charge for it. You can post an unmodified copy on your own web site. You can make and distribute modified versions (including translations), as long as your version makes the original source clear and is distributed free of charge and under the same license. (Officially, the book is licensed under a "Creative Commons Non-Commercial Attribution Share-Alike License.")

Many of the sample programs for this book are actually Web pages meant to be viewed in a Web browser. The Web version of this book includes interactive demo programs that are integrated into the Web pages that make up the book.

Most sample programs and all demos use HTML canvas graphics (in Chapter 2), WebGPU (in Chapter 9), or WebGL (in other chapters). Canvas graphics and WebGL should work well in almost any modern browser. WebGPU is a new technology and is more problematic. In July 2023, it is available by default in only a few Web browsers (Chrome and Edge on Windows and MacOS), and even on those it might not work on all hardware. In some other browsers, it can be enabled as an experimental feature. However, WebGPU is very likely to be the future of 3D graphics on the Web, so it is important to start learning it.

The sample programs and demos can all be found in the download of the web site version of this book, which is available from its main page. Look for them in the folders named source and demo. Note that most Web browsers are not willing to use certain resources from the local file system, such as 3D models and modular JavaScript scripts. Those browsers will have errors when they try to run some of the samples locally instead of over the Web. This issue affects only some of the examples. For those examples, you can use an on-line version of the book. Another solution is to run a web server on your own computer and view the textbook through that web server. It might be possible to configure your Web browser to use resources from local files, although it might not be a good idea to browse the Web with that configuration.

I taught computer graphics every couple of years or so over a period of almost 35 years. As the field developed, I had to make major changes almost every time I taught the course, but for much of that time, I was able to structure the course primarily around OpenGL 1.1, a graphics API that was in common use for an extended period. OpenGL 1.1 implements fundamental graphics concepts—vertices, normal vectors, coordinate transformations, lighting, and material—in a way that is transparent and fairly easy to use. Newer graphics APIs are more flexible and more powerful, but they have a much steeper learning curve. I believe that any introductory computer science course benefits from starting with a simpler framework or library, and OpenGL 1.1 serves that purpose well.

OpenGL is still widely supported, but, for various reasons, the parts of it that were easy to use have been officially dropped from the latest versions (although they are in practice supported on most desktop computers). Furthermore, OpenGL is largely being superceded by newer graphics APIs such as Direct3D, Metal, and Vulkan. WebGL is based on OpenGL, and it will continue to be widely supported for some time. WebGPU is inspired by the newer APIs, and may at some point replace WebGL for new applications.

My approach in this book is to use a subset of OpenGL 1.1 as the framework for introducing the fundamental concepts of three-dimensional graphics. I then go on to cover WebGL, the version of OpenGL that runs in a web browser. In the last chapter, I introduce WebGPU. While OpenGL makes up the major foundation for the course, the real emphasis is on fundamental concepts such as geometric modeling and transformations; hierarchical modeling and scene graphs; color, lighting, and textures; and animation. I continue to believe that OpenGL 1.1 makes a good introduction to this material.

Chapter 1 is a short overview of computer graphics. It introduces many concepts that will be covered in much more detail in the rest of the book.

Chapter 2 covers two-dimensional graphics in Java, JavaScript, and SVG, with an emphasis on ideas such as transformations and scene graphs that carry over to three dimensions.

Chapter 3 and Chapter 4 cover OpengGL 1.1. While OpenGL 1.1 is fairly primitive by today's standard, it includes many basic features that are still fundamental to three-dimensional computer graphics. Only part of the API is covered.

Chapter 5 covers three.js, a higher-level object-oriented 3D graphics API for Web graphics using JavaScript. This chapter shows how fundamental concepts can be used in a higher-level interface.

Chapter 6 and Chapter 7 cover WebGL, a modern version of OpenGL for graphics on the Web. WebGL is very low-level, and it requires the programmer to write "shader programs" to implement many features that are built into OpenGL 1.1. Looking at the implementation is an opportunity to understand more deeply how computers actually make 3D images.

Chapter 8 looks very briefly at some advanced techniques that are not possible in OpenGL.

And Chapter 9 is an introduction to WebGPU, the newest API for graphics on the Web.

Appendix A contains brief introductions to three programming languages that are used in the book: Java, C, and JavaScript. Appendix B is meant to get readers started with the most basic uses of Blender, a sophisticated 3D modeling program. I have found that introducing students to Blender is a good way to help them develop their three-dimensional intuition. Appendix C contains even briefer introductions to two 2D graphics programs, Gimp and Inkscape.

Older versions are still available:

Downloads for all versions are available in

The PDF and Web site versions of this book are built from a set of common sources. The sources can be obtained by cloning the following git repository on GitHub:

https://github.com/davidjeck/graphicsbook

The sources were not originally meant for publication and are provided with no guarantee and very limited support for people who might be interested in working on them.

The sources include images, HTML files, Java and C source code, XML files, XSLT transformations, bash shell scripts, and LaTeX macros. Using the sources requires additional software (LaTeX, Xalan-J, Java, and the bash shell). For more information, see the README file.

David J. Eck, Professor Emeritus
Department of Mathematics and Computer Science
Hobart and William Smith Colleges
300 Pulteney Street
Geneva, New York 14456, USA
Email: eck@hws.edu
WWW: http://math.hws.edu/eck/
August, 2023

David Eck