WebGL playground guide

Overview

WebGL playground is a small 3D studio: a shape, a cloud of particles, three lights and a finishing pass, all in your browser.

A rainbow-sheened sphere glowing inside a spiral of violet and cyan points on a deep blue ground
The Cosmic preset with Bloom lowered to 0.8: an iridescent sphere inside a spiral of violet and cyan particles, with the Cool grade.

Everything sits in a 3D scene. A camera looks at the middle, and you turn it around the scene by dragging. That is an orbit camera.

The scene holds a mesh, such as a sphere or a torus knot, and a particle system of up to 50,000 points. Five scenes swap the shape for a moving terrain, a branching fractal, a ring of fluid spheres or a cluster of crystals. The particles stay in all of them.

Three lights shine on it: a key light, a fill light and a rim light, plus soft ambient light. That is three-point lighting. A shader decides how the surface answers the light; eight are offered, from Standard PBR to hand-written ones.

Then post-processing works on the finished picture: bloom, chromatic aberration, film grain, a vignette, pixel blocks, scanlines and a colour grade. Music or the microphone can make the shape swell and the particles rush. That is audio-reactive art.

Open WebGL playground Start here

In this guide

  1. StartWhat you need, your first scene, and how to turn it.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree pictures and the settings that made them.
  4. Keep your workThe PNG sizes and the copy.
  5. HelpWhat to do when something goes wrong.

It opens on the Particles scene with the Default preset: a green metal sphere turning inside a cloud of green and violet points.

It runs in your browser with WebGL, drawn by your GPU with three.js. Nothing is uploaded. A mouse, a trackpad, a pen and a finger all work.

The shape under the pointer grows a little and glows green while Highlight on hover is on.