Learn WebGL — LearnWebGL (2024)

The traditional approach to learning a subject is to divide the topic intosub-topics, study each sub-topic, and thenshow how the sub-topics relate to each other. That is not theapproach for these tutorials. These tutorials start with the “big picture”and then study the details of each sub-system that composes the complexoverall system. The study of each sub-system startsfrom basic principles and tries to avoid any assumptions about whatthe student knows or does not know.

Why learn WebGL? Very simply, it is the only cross platform solutionfor producing real-time, 3D computer graphics we have.

You could learn Direct3D, which is a proprietary system made by Microsoft,but you would be restricted to running your software on a Microsoft based computer.
You could learn OpenGL, which is cross platform, but OpenGL does not have adefinitive way to interface to an operating system’s user interface.

WebGL is an offspring of OpenGL that executes in all modern web browsers,including web browsers on tablets and phones. Therefore, when you learn WebGL,you are learning OpenGL for an environment that basically will execute onall modern computing devices. That is really cool!!!

These tutorials are designed to be studied in sequence because they buildon each other.

We start with the “big picture” to show the critical sub-systems of anyWebGL web page.
Then we isolate the details in an individual sub-system and attempt to makesense of why it is designed like it is and how it works.

Note: WebGL requires programming and youare encouraged to experiment with sample code at each stage of your learning.Good programming practices use an incremental development cycle.You start development with a simple working program and use asimple cycle of implement/test, implement/test, implement/test, ... until youreach your goal. Rarely, if ever, should you program a complex WebGL program“from scratch.” Always start with a working program and add complexity slowly.

A critical idea for these lessons is that you MUSTmaster a topic before moving to a new topic. If you are confused abouteven a small part of a topic, you will probably not understand the morecomplex topic that follow. So take your time and thoroughly master eachtopic before moving to the next topic.

Table of Contents¶

SECTION 1: The Big Picture¶

1.1 - Introduction
1.2 - 3D Computer Graphics - What and How
1.3 - Computer Graphics - A Brief History
1.4 - File Organization For WebGL programs
1.5 - Software Organization For WebGL programs
1.6 - Software Coding Standards

SECTION 2: Tools and Languages¶

2.1 - Introduction to Languages and Tools
2.2 - HTML and CSS
2.3 - JavaScript Language
2.4 - DOM and jQuery
2.5 - Canvas and GL Context
2.6 - Asynchronous File Loading
2.7 - Events
2.8 - Debugging

SECTION 3: Model Data¶

3.1 - Introduction - Describing Virtual Worlds
3.2 - Modeling Location
3.3 - Direction / Orientation
3.4 - Volume / Surfaces
3.5 - Material Properties
3.6 - Color
3.7 - Texture Maps
3.8 - Light Modeling
3.9 - Surface Normals
3.10 - Lines

SECTION 4: Modeling¶

4.1 - 3D Modeling
4.2 - Blender
4.3 - OBJ Data Format

SECTION 5: Rendering Basics¶

5.1 - Introduction to Rendering
5.2 - A Primer on Shaders
5.3 - A Primer on Buffer Objects
5.4 - A Simple Model
5.5 - Example 1: One Color per Model
5.6 - Example 2: One Color per Triangle
5.7 - Example 3: One Color per Vertex
5.8 - Example 4: Textures
5.9 - Interleaved Buffers
5.10 - Converting OBJ Model Data to Buffer Objects

SECTION 6: Model Transformations¶

6.1 - Introduction to Transformations
6.2 - Scaling
6.3 - Translating
6.4 - Rotating
6.5 - Transformation Matrices
6.6 - A Matrix Code Library - Learn_webgl_matrix
6.7 - Using Learn_webgl_matrix - A Robot Arm Base
6.8 - Chaining Transformations - Adding a Forearm
6.9 - Chaining Transformations - Adding an Upper Arm
6.10 - Chaining Transformations (Summary)
6.11 - More Matrix Math Concepts
6.12 - Coding Issues

SECTION 7: Cameras¶

7.1 - Introduction to Cameras
7.2 - Camera Math
7.3 - Camera Movement
7.4 - Moving a Camera
7.5 - Rotating a Camera
7.6 - Points Along A Path
7.7 - Timing Along A Path
7.8 - Screen Updates and Animation

SECTION 8: Projections and Viewports¶

8.1 - Introduction to Projections
8.2 - Orthographic Projections
8.3 - Perspective Projections
8.4 - Viewports
8.5 - Summary of Projections and Viewports

SECTION 9: Lights¶

9.1 - Introduction to Lighting
9.2 - Diffuse Lighting
9.3 - Specular Lighting
9.4 - Ambient Lighting
9.5 - Combining Ambient, Diffuse, and Specular Lighting
9.6 - Fragment Shader Debugging
9.7 - Light Attenuation
9.8 - Types of Light Sources

SECTION 10: Surface Properties¶

10.1 - Introduction to Surface Properties
10.2 - Surface Colors
10.3 - Smooth “Phong” Shading
10.4 - Texture Mapping Using Images
10.5 - Texture Mapping - Texture Coordinates
10.6 - Texture Mapping Using Procedures
10.7 - Texture Mapping Using Procedures - Continued
10.8 - Transformations on Texture Maps
10.9 - Other Surface Manipulations
10.10 - Combining Light and Surface Properties

SECTION 11: Advanced Rendering and Transparency¶

11.1 - Introduction to Advanced Rendering
11.2 - Hidden Surface Removal
11.3 - Selecting Objects
11.4 - Transparency (and Alpha Blending)
11.5 - Shadows
11.6 - Particle Systems
11.7 - Overlays

SECTION 12: Shader Language¶

12.1 - WebGL Shader Language
12.2 - GLSL Data Types and Variables
12.3 - GLSL Control Structures
12.4 - GLSL Operators (Mathematical and Logical)
12.5 - GLSL Built-in Functions and Variables
12.6 - GLSL Compiling and Linking

Appendices¶

Acknowledgements¶

WebGL References
Tutorial Author

Next Section - 1.1 - Introduction