Painting Pixels with WebGL with React Hooks
summary
A demo stacks raw WebGL shaders with React state management and a tiny runtime that streams Apple Pencil events over WebSocket so the GPU paints live. It uses luma.gl + parcel + WebSocket piping stylus data to feed vertex buffers, a vertex shader mapping X Y pressure to position color and size, and fragment shaders that implement a flood-fill / Voronoi style watercolor, blurs, afterimage and Game of Life. Resource sharing is handled by a spreadsheet-like evaluator; the prototype works but has reload and performance quirks.
AI-written summary · about
chapters (8)
- 0:00Start
- 4:36Vertex Shader
- 5:52Outputs
- 11:39Limitations
- 13:36Fragment Shader
- 15:13Bleeding Fragment Shader
- 16:19Shaders
- 26:05Simple Shaders
related talks
35mGamedev on React + WebGL
36mBlasting React into Space: Building fluid interface swith React and WebGL
18mReact and WebGL
43mWebGL 2D Rendering with PixiJS
58mRendering performance from the ground up
39mLife of a pixel: A visual explanation of rendering performance
36mCanvas Pixel Transformation: Beauty comes slowly
36mCreative Coding with React & SVG