WebGL hands drawing to the GPU: you upload vertex data once, write two small programs called shaders, and the GPU runs them in parallel on every vertex and pixel. Games, map libraries such as MapLibre 34,367 , Three.js 30,815 and Babylon.js 89,603 (Three.js and Babylon.js) build on it.
It is also low level: you write your own matrices and lighting in GLSL. This chapter teaches WebGL 2 and GLSL ES 3.00 and notes where WebGL 1 differs.
The running example is BookNest's shelf of six books, which gains a camera, lights and textures as you go.
What you will learn
How the pipeline, ANGLE 2,592 and the GPU turn vertices into pixels, and how to write GLSL ES shaders.
How to feed shaders with buffers, uniforms and textures, and build 3D matrices.
How to light, blend, fog, texture and shadow a scene, up to normal mapping and physically based rendering.
How to use framebuffers, instancing and post-processing, and debug your code.
Sections
- WebGL and ANGLE
- GLSL Types and Operators
- Statements and Built-ins
- Shaders and Data
- Buffers and VAOs
- MVP Matrices
- gl-matrix
- Depth, Culling, Blending
- Directional and Point Lighting
- Specular Lighting and Fog
- Stencil Shadow Volumes
- Textures
- Framebuffers and Shadows
- Normal Maps and PBR
- Deferred Rendering
- Post-Processing and Particles
- Rotation and Picking
- HUDs, OBJ and Matrix Stacks
- Context and WebGL 2
- Profiling and Debugging
- Extensions and WebGPU
- Libraries and Engines
- Test Yourself!