WebGL playground guide

Start

The tool opens with a green sphere turning slowly inside a cloud of green and violet points. The first line of the panel counts frames per second, triangles, draw calls and objects.

What you need

• A browser with WebGL. Current Chrome, Edge, Firefox and Safari have it.
• Nothing else. A music file or a microphone is only needed to make the scene move to sound.

Your first result

1. Open WebGL playground. The scene is already moving.
2. Under Presets, press Cosmic, Neon storm or Inferno to change the shape's shader, the particles and the finish all at once.
3. Under Scene, press Terrain, Fractal, Fluid or Crystal to change what the particles surround.
4. Drag across the frame to turn the view. Scroll, or pinch with two fingers, to move closer or further.
5. Press Save PNG at the top of the panel to keep the frame as threejs-lab- followed by a number, such as threejs-lab-1789000000000.png.

Good to know

• A preset starts from the settings the page opens with, then sets its own, so nothing is left over from the last preset. It never changes the scene. Press Reset to put everything back.
• The Geometry and Animation sections move the main shape, which shows only in the Particles and Terrain scenes. In Fractal, Fluid and Crystal they change nothing you can see.
• Most sliders glide to their new value over a few frames instead of jumping.
• With a mouse, right-drag moves the view sideways. With a finger, drag with one to turn and pinch or drag with two to zoom and move.
• On a phone the controls sit in a bar at the bottom of the screen. Tap the bar to open them.