WebGL playground guide
Three looks
Each picture below was made in WebGL playground. The table under each one is the whole recipe, in the order it was set; everything not listed stays as the page opens. Press the preset first: it would undo settings made before it.
The scene moves all the time, so yours will differ in the detail.
A neon storm
The Hologram shader draws see-through stripes that scroll along the knot, so it reads as glowing light rather than a solid. The points trace a Lorenz attractor, and chromatic aberration and scanlines finish it like an old screen.
| Setting | Value |
|---|---|
| Presets | Neon storm |
| Shape | Torus knot |
| Count | 6000 |
| Bloom | 0.6 |
| Bloom threshold | 0.7 |
Raise Bloom back to 2 and Bloom threshold to 0.3, as the preset has them, and the knot melts into a pink glow.
A wireframe landscape
Wireframe draws only the edges of the terrain's faces, so the moving hills read as a green net. The fog fades the far side into the background, and the main shape floats above.
| Setting | Value |
|---|---|
| Wireframe | On |
| Scene | Terrain |
| Fog | 0.4 |
| FOV | 80 |
| Auto orbit | 0 |
Turn Wireframe off and press Terrain again for solid hills with flat faces.
A fractal in normal colours
Every branch is a smaller copy of the one before, so the tree is a fractal. The Normal map shader colours each face by the way it points, so faces turned the same way share a colour, pink, blue or pale green, whatever the lights do.
| Setting | Value |
|---|---|
| Shader | Normal map |
| Scene | Fractal |
| Bloom | 0.3 |
| Count | 2000 |
| Distance | 16 |
The fractal takes the shader when you press Fractal; pick another shader, then press Fractal again to see it.