Grand Valley State University

CIS367 - Computer Graphics

This page is intended to get you up and running with the WebGL examples from Interactive Computer Graphics: A Top-Down Approach with WebGL - Edward Angel and Dave Shreiner, 7th edition.

Book homepage

Environment setup

All you need for this class is a text editor and a modern browser. I will be using Vim and Chrome (Firefox has been laggy lately with WebGL for some reason), however feel free to use whichever WebGL-enabled browser you wish. If you are looking for a modern IDE that supports JavaScript, consider VSCode, JetBrains (should be free via student educational discount), or Brackets.

To run an example

Create an HTML file. Open it in your browser. Done. If you want others to be able to see what you’ve worked on, you’ll need a webserver. If you’re in my class, you’ll have a separate walkthrough of how to host your code on Google Cloud.

The links below serve as easy access to the demonstration examples from the book chapters. New/custom examples are denoted by **. Note that, to view the code, all you have to do is View Source in your browser (note, you may need to follow the link to the JavaScript file in most cases).

• Extra
  • ** Blender Mesh Loader **
  • ** Pentagon **
• Chapter 1
  • ** Hello world (black box) * *
  • ** Hello world (triangle) * *
  • ** Lecture Square (triangles) * *
  • ** Lecture Shaded Triangle * *
  • ** Keycode demo (jQuery) * *
• Chapter 2
  • Gasket 1
  • Gasket 1v2
  • Gasket 2
  • Gasket 3
  • Gasket 4
• Chapter 3
  • Triangle
  • Square
  • Square EM
  • Gasket 5
  • CAD1
  • CAD2
  • Rotating Square 1
  • Rotating Square 2
  • Rotating Square 3
• Chapter 4
  • Cube
  • Cube Q
  • Cube V
  • Trackball
  • Trackball Quaternion
• Chapter 5
  • Hat
  • HatA
  • Orthogonal
  • Orthogonal 1
  • Orthogonal 2
  • Perspective
  • Perspective 1
  • Perspective 2
  • Shadow
• Chapter 6
  • Shaded Cube
  • Wire Sphere
  • Shaded Sphere 1
  • Shaded Sphere 2
  • Shaded Sphere 3
  • Shaded Sphere 4
  • Shaded Sphere Eye Space
  • Shaded Sphere Object Space
• Chapter 7
  • Bump Map
  • Bump Map 2
  • Cube T
  • Hat Image 1
  • Hat Image 2
  • Hawaii Image
  • Particle Diffusion
  • Pick Cube 1
  • Pick Cube 2
  • Pick Cube 3
  • Pick Cube 4
  • Pick Cube 5
  • Reflecting Cube
  • Reflecting Sphere
  • Reflection Map 1
  • Reflection Map 2
  • Render 1
  • Render 2
  • Render 3
  • Render 4
  • Render 5
  • Textured Cube 1
  • Textured Cube 2
  • Textured Cube 3
  • Textured Cube 4
  • Textured Square

• Chapter 8

• Chapter 9
  • Figure
  • Robot Arm
• Chapter 10
  • Mandelbrot 1
  • Mandelbrot 2
  • Particle Diffusion 1
  • Particle Diffusion 2
  • Particle Diffusion 5
  • Particle Diffusion 9
  • Particle System
• Chapter 11
  • Teapot 1
  • Teapot 2
  • Teapot 3
  • Teapot 4
  • Teapot 5
  • Teapot 6
  • Teapot 7

---

INTERACTIVE COMPUTER GRAPHICS

A TOP-DOWN APPROACH WITH SHADER-BASED OPENGL®

EDWARD ANGEL and DAVE SHREINER

Here you have the examples of the book ordered by chapters.