Introduction to Computer
Graphics with WebGL
Ed Angel
Professor Emeritus of Computer Science
Founding Director, Arts, Research,
Technology and Science Laboratory
University of New Mexico
Angel and Shreiner: Interactive Computer Graphics 8E © Pearson Education 2020 1
Overview
• These lectures are for a senior/graduate elective
for computer science and engineering
majors(and others with good programming skills)
• The course is based on a modern approach
using programmable shaders in the new
textbook: Ed Angel and Dave Shreiner,
Interactive Computer Graphics, A Top-down
Approach with WebGL(Eighth Edition), Addison-
Wesley
• These lectures cover Chapters 1-7 in detail and
survey Chapters 8-13
Angel and Shreiner: Interactive Computer Graphics 8E © Pearson Education 2020 2
History
• Editions 1-3
C based Fixed function OpenGL (no shaders)
• Edition 4
Programmable Shaders
• Editions 5-6
Fully Shader-based
• Edition 7
WebGL 1.0 and JavaScript
• Edition 8
WebGL 2.0
Ang el and Shreiner: Interactive Computer Graphics 8E © Pearson Education 3
2020
Web Support
• [Link]
Website for 8E
WebGL 2.0 Code for all examples in book
WebGL 1.0 Code where possible
• [Link]/~angel/BOOK/
INTERACTIVE_COMPUTER_GRAPHICS
Support for earlier editions
Videos for the 7E version of this class
Angel and Shreiner: Interactive Computer Graphics 8E © Pearson Education 2020 4
Week 1
• Lecture 1.1: Introduction
• Lecture 1.2: Detailed Outline and Examples
• Lecture 1.3: Example Code in JS
• Lecture 1.4: What is Computer Graphics?
• Lecture 1.5: Image Formation
• Reading: Chapter 1
• Exercises: Run some examples on your
browser
Angel and Shreiner: Interactive Computer Graphics 8E © Pearson Education 2020 5
Contact Information
angel@[Link]
[Link]/~angel
[Link]
Angel and Shreiner: Interactive Computer Graphics 8E © Pearson Education 2020 6
Objectives
• Broad introduction to Computer Graphics
Software
Hardware
Applications
• Top-down approach
• Shader-Based WebGL
Integrates with HTML5
Code runs in latest browsers
Angel and Shreiner: Interactive Computer Graphics 8E © Pearson Education 2020 7
Prerequisites
• Good programming skills in JavaScript,
C/C++, Java, or Python
WebGL uses JS
• Basic Data Structures
Linked lists
Arrays
Trees
• High-School level Geometry & Trigonometry
• Basic Linear Algebra
Angel and Shreiner: Interactive Computer Graphics 8E © Pearson Education 2020 8
My Class Requirements
• 3 Assigned Projects
Simple
Interactive
3D
• Term Project
You pick
• See
[Link]/~angel/ONLINE_GRAPHICS
for assignments, projects and other info
Angel and Shreiner: Interactive Computer Graphics 8E © Pearson Education 2020 9
Why is this course different?
• Shader-based
Most computer graphics use OpenGL and still
use fixed-function pipeline
Many do not require shaders
Does not make use of the full capabilities of the
graphics processing unit (GPU)
• Web
With HTML5, WebGL runs in the latest browsers
makes use of local hardware
no system dependencies
Angel and Shreiner: Interactive Computer Graphics 8E © Pearson Education 2020 10
References
• Interactive Computer Graphics (7th and 8th
Editions)
• The OpenGL Programmer’s Guide (the
Redbook) 8th Edition
• OpenGL ES 2.0 Programming Guide
• WebGL Programming Guide
• WebGL Beginner’s Guide
• WebGL: Up and Running
• JavaScript: The Definitive Guide
Angel and Shreiner: Interactive Computer Graphics 8E © Pearson Education 2020 11
Web Resources
• [Link]/~angel/BOOK
• [Link]
• [Link]
• [Link]
• [Link]/webgl
• [Link]/webgl
• [Link]
Angel and Shreiner: Interactive Computer Graphics 8E © Pearson Education 2020 12
