WebGL Demos
Description
A collection of programs that uses WebGL
What I learned
- Programming in GLSL (ES 3.0)
- Using built-in functions, like
smoothstep
- Using built-in functions, like
- Using WebGL2 Objects
- Framebuffer Objects, rendering to a textures
- Vertex Array Objects
- React
- More complex usage for refs
useImperativeHandlehook- Callback Refs
- More complex usage for 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.
- Since the browser clears the drawing buffer every frame, the previous points that have been painted will be lost.
We can't use
- Used a Frambuffer Object to render subsequent frames to a texture.
Resources
- 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.