How to Program Your GPU (and Not Do It Alone)
summary
Explains how WebGL runs thousands of simple cores in parallel (about two thousand cores) and why shaders are tiny C‑like programs; shows a 400‑line shader built from reusable helpers that renders moving cars and works in the browser; demonstrates using glslify to npm‑install and bundle a Perlin noise implementation so it runs without copy‑paste; mentions tooling and sites like shader toy and the Book of Shaders and that shaders hit 60fps when done right.
AI-written summary · about
chapters (26)
- 0:00Intro
- 0:56Not Programming Alone
- 1:32Require
- 1:46Browser Bundlers
- 2:17Webpack Browserify
- 3:05JavaScript Renaissance
- 3:39What is a GPU
- 5:19GPU Constraints
- 6:02Shaders
- 6:46JavaScript
- 7:01GLSL
- 9:38shadertoy
- 11:57example
- 12:07Perlin Noise
- 12:41Perlin Noise Basics
- 14:28MPM
- 14:42glslify
- 15:43Why Parallel Noise Works
- 16:17Free Benefits
- 17:02Tasting Menu
- 17:16HSL to RGB
- 17:44GLSL Rotate
- 18:14GLSL Ray Trace
- 19:18Conclusion
- 19:52Resources
- 20:14Community
related talks
05mA Brief Intro to GPU Shader Programming in WebGL
22mWebGL For More Than Graphics: Is It Possible?
26mCreative experiments with WebGL shaders in JavaScript
44mWebGL and Shaders: Programming Light
25mArbitrary Computation on the GPU Using WebGL
38mMy journey with WebGL
20mThe future of the web is paved with shaders
43mShaders: How to Create Mind-Blowing Effects on Your Website