WebGL and Shaders: Programming Light
summary
Introduces what WebGL is and the differences between CPU and GPU rendering, then outlines the essential elements needed to create a 3D scene in the browser. Shows how to write a simple vertex and fragment shader, implementing step‑by‑step lighting math without Three.js, and modifies the shader to produce a toon-style (cartoon) shading; may also demonstrate additional artistic effects if time permits.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 4:00Differences between drawing with the CPU and with the GPU
- 6:37Essential elements of a scene
- 9:57What are shaders and examples
- 18:41Basic vector operations
- 22:38Programming light in the vertex shader
- 27:42Programming light in the fragment shader
- 32:13Changing the shadow effect
- 35:15Making the ghost explode
related talks
20mThe future of the web is paved with shaders
25mHow to Program Your GPU (and Not Do It Alone)
34mWebGL Practical Application
43mShaders: How to Create Mind-Blowing Effects on Your Website
26mCreative experiments with WebGL shaders in JavaScript
33mWebGL wind. GPU programming
31mWebGL: Building Interactive 3D Worlds in the Browser
41mWebGL Is Easier Than You Think (feat. three.js)