The Design Engineer's Notebook · Issue 003 · 3D & Shaders

How to build an animated dot grid in WebGL

A dot grid drawn by one WebGL fragment shader. Each pattern returns a value from 0 to 1 for every cell, and one renderer turns that value into the dot's size and colour.

CONTROLS

Pattern
Rows60
LOWHIGH
Speed1.0
LOWHIGH

Details

Renderer
WebGL 1, one fragment shader
Dependencies
None