WebGL Demos


A collection of programs that uses WebGL

What I learned

  • Programming in GLSL (ES 3.0)
    • Using built-in functions, like smoothstep
  • Using WebGL2 Objects
    • Framebuffer Objects, rendering to a textures
    • Vertex Array Objects
  • React
    • More complex usage for refs
      • useImperativeHandle hook
      • Callback Refs

Implementation Notes

  • Particles
    • Used a double buffering technique using transform feedback feature available in a webgl2 context
    • Collision detection is calculated in the GPU
  • Chaos Game
    • Used a Frambuffer Object to render subsequent frames to a texture.
      • Since the browser clears the drawing buffer every frame, the previous points that have been painted will be lost. We can't use { preserveDrawingBuffer: true } considering the same canvas can be reused for different programs (which may not need that option set), and we can't change the context options once we've already obtained a context.


  • WebGL2Fundamentals
    • An amazing resource for everything you need to know to get started with webgl. The technniques I used were pretty much taken from the examples, with some adjustments to suit my use case.