### Introduction to Computer Graphics, Version 1.3.1

## Preface

**About Version 1.3.1:** I taught Computer Graphics for the last time
in Fall 2021, using Version 1.3 as the textbook for that course. In this version
of the course, instead of using Java or C for the OpenGL 1.1 segment of
the course, we used my JavaScript simulator, glsim.js. This required fixing
a few errors and limitations in that script. The new version of glsim.js
is included in Version 1.3.1. (The assignments for the course can be found at
http://math.hws.edu/eck/cs424/index_f21.html.)
I have used the opportunity to correct a
few statements about *three.js* in Chapter 5. There are no
other changes in Version 1.3.1.

This textbook represents my attempt to develop a modern, 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. (Whether it will continue to be appropriate is an open question, given the always-rapid changes in the field of computer graphics.)

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 has had at least two semesters of programming, and most will have additional experience beyond that. My students have studied the Java programming language, but the book should also be accessible to people with background in other languages. Examples in the book use Java, C, and JavaScript. The essential features of those 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. I will teach computer
graphics again in Fall 2021, and I have updated the book to Version 1.3
for use in that course. The new version covers the same topics as Version 1.1,
but there are some significant updates: Chapter 5 is updated to use Version 129
of the *three.js* library. Chapters 6 and 7 now include some material on
WebGL 2.0 and GLSL ES 3.00. JavaScript in sample programs and
in Section 3 of Appendix A has been updated to use ES6 (but the code for
the demos embedded in the textbook's web pages has not been updated).
And Appendix B now covers Blender 2.93. There are other minor updates
and corrections throughout.

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

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.

The sample programs and demos use HTML canvas graphics (in Chapter 2) or WebGL (in later chapters). Canvas graphics should work well in almost any modern browser. WebGL is a newer technology and is more problematic. WebGL 1.0 now seems to work fairly reliably in almost all modern browsers, including browsers on mobile devices. WebGL 2.0 works in most desktop browsers and some mobile browsers, but is still not universally available. This means that you are not guaranteed to be able to run every sample program in this book in your favorite browser.

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 some Web browsers won't use
images from the local file system in canvas and WebGL graphics. 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. (See the section on
"How to run things locally" in the *three.js* documentation at
https://threejs.org/docs for more
information about this issue.)

I have taught computer graphics every couple of years or so for 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 supported fundamental graphics concepts in a way that was fairly easy to use. 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). The result is a much more powerful API but one that is much harder to learn. In particular, modern OpenGL in its pure form does not make for a good introduction to graphics programming, and it seems likely that some sort of simplified library or framework would be used to get people started in most introductory courses.

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—a version of OpenGL that runs in a web browser—as an example of the more modern approach to computer graphics. 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.

*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, in a form that is an easier starting point for people
new to 3D 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.

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

*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.

Professor David J. Eck

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, 2021 and December, 2021*