One simple animation explained
summary
Shows converting a 50×50 hexagonal mesh animation from CPU-side per-vertex updates in JavaScript (which overloaded the frame budget) to GPU-side vertex shaders using Perlin/Simplex noise so each vertex is computed in parallel. Uses smoothstep in the fragment shader to render crisp hex patterns without jagged edges, moves pathfinding onto a 2D canvas that becomes a texture, and as a result the animation and UI interactions run smoothly; shader and noise implementations are ~40–50 lines.
AI-written summary · about
chapters (9)
- 0:00Animation intro
- 3:17Fogged glass order
- 11:123D inefficiency in JS
- 13:41First noise animation
- 15:28Ornament shaders
- 21:50Distance fields
- 24:35Hex grid pathfinding
- 31:02Merging 2D and 3D
- 31:44Shader examples
