Creative experiments with WebGL shaders in JavaScript
summary
Shows how to write real GLSL running in the browser: canvas → typed arrays and buffer uploads → vertex and fragment shaders, with GLSL fragment shader code doing texture2D lookups and a vignette; uses a uniform time value to drive a sine wobble and produces a working animated effect at interactive rates (target ~60 fps) by exploiting the GPU’s thousands of cores instead of the CPU. Live code compiles and renders the effect.
AI-written summary · about
chapters (8)
- 0:00Start
- 0:45What Is Webgl
- 7:48Vertices
- 10:09Buffer in Opengl
- 12:08Vertex Shader
- 12:52Fragment Shader
- 13:28What Is the Shader
- 15:47Perspective Transformation
related talks
25mHow to Program Your GPU (and Not Do It Alone)
22mWebGL For More Than Graphics: Is It Possible?
20mThe future of the web is paved with shaders
05mA Brief Intro to GPU Shader Programming in WebGL
34mWebGL Practical Application
44mWebGL and Shaders: Programming Light
25mArbitrary Computation on the GPU Using WebGL
38mMy journey with WebGL