WebGL playground guide

Every control

Every control in the panel, top to bottom. Scene, Presets, Camera, Geometry and Material start open; the sections from Lighting down start closed; tap a title to open it.

Load and save

Choose a music fileButton: Opens a music file from your device; the button then shows its name, and Play and Pause appear. See audio file.
Use the micButton: Asks the browser for the microphone and listens to it; the button then reads Mic on. See microphone input.
Save PNGButton: Saves the frame as a PNG at the size chosen above. See PNG.
Save 4K PNGButton: Saves the frame as a PNG 3840 pixels wide, with the frame's shape, whatever Resolution says.
CopyButton: Copies the frame, at the frame's size, to the clipboard as a PNG. See clipboard.

Scene

The first line counts, once a second, how many frames were drawn (frame rate), how many triangles and draw calls the last frame took, and how many objects, lights included, sit in the scene.

Particles · Terrain · Fractal · Fluid · CrystalPick one: What the particles surround.

Particles: The main shape from Geometry, turning in the middle.

Terrain: A wide rolling landscape below the main shape, its hills moving slowly. It is drawn with flat faces in the Material colour, and takes Wireframe as it is when you press it. On phones it has fewer faces. See terrain mesh.

Fractal: A branching tree of small octahedra, each branch smaller than the last, drawn with the chosen shader. It turns on its own. On phones it has 31 pieces instead of 156. See fractal.

Fluid: Sixty-four shiny spheres in the Material colour, swirling in a ring and swelling and shrinking. See instancing.

Crystal: Twelve to nineteen glassy, pointed crystals in random colours, which turn slowly and glimmer. Each press grows a new cluster.
BackgroundColour · starts #08080A: The colour behind the scene.
FogSlider · 0 to 1 · starts at 0: Fades faraway things into the fog colour. At 0 it is off. Shapes drawn with the Hologram, Fresnel glow, Iridescent and Noise shaders ignore it. See fog.
Fog colorColour · starts #08080A: The colour things fade into. Set it close to the background for a soft fade.
Time scaleSlider · 0 to 3 · starts at 1: How fast the scene's own motion runs: floating, pulsing, shaders, terrain, fluid, fractal and crystals, and Auto orbit. At 0 they stop. Rotate X, Y and Z and the particles keep their own speed.

Presets

A preset sets the background, the shape's colour and shader, the particles, the bloom, the vignette and the colour grade, and some also set fog, speed, grain, scanlines or chromatic aberration. Every other look setting goes back to how the page opened first, so nothing stays from the preset before. The scene, the camera's distance, and the Audio and Export choices stay as they are. See preset.

Default · Cosmic · Neon storm · Zen · Chaos · Deep ocean · Inferno · MatrixPick one: Sets many controls at once.

Default: The settings the page opens with, for the controls it names: a green metal sphere in green and violet points.

Cosmic: An iridescent shape in a violet and cyan spiral of 20,000 points, with strong bloom, a light fog, slower time and the Cool grade.

Neon storm: A pink Hologram shape in cyan and pink points on a Lorenz attractor, with strong bloom, chromatic aberration, scanlines and the Cyberpunk grade.

Zen: A pale, rough, barely shiny shape in 2,000 slow cream points, with little bloom, half-speed time and the Warm grade.

Chaos: A coral Noise shader in 30,000 fast, churning coral and amber points, with chromatic aberration, grain and double-speed time.

Deep ocean: A cyan Fresnel glow in green and cyan points, sunk in a dark blue fog, with the Cool grade.

Inferno: An orange Noise shader in 20,000 fast orange and amber points, with strong bloom, a dark red fog and the Warm grade.

Matrix: A green Hologram shape in a cube of green points, with scanlines, grain and the Matrix grade.

Camera

Dragging on the frame turns the camera around the middle, the scroll wheel or a two-finger pinch moves it closer or further, and right-drag or a two-finger drag moves it sideways. See orbit camera.

FOVSlider · 20 to 120 · starts at 60: How wide the camera sees, in degrees. Wider shows more and stretches the edges; narrower is like a zoom lens. See field of view.
DistanceSlider · 1 to 50 · starts at 12: Moves the camera to this distance from the middle, keeping the direction it looks from. Scrolling or pinching moves it too, and the slider and number follow the camera.
Auto orbitSlider · 0 to 1 · starts at 0.15: Turns the camera around the scene on its own. At 0 it stays still.
Orbit YSlider · 0 to 0.5 · starts at 0.05: While Auto orbit is on, the camera also rises and sinks; this sets how far and how fast.
Dolly zoom, the Hitchcock effectOn or off · starts off: Keeps the middle of the scene the same size while you change FOV: the camera moves in as the view widens, and out as it narrows, so the background seems to stretch. While it is on, it holds the camera's distance, so Distance, scroll and pinch have no lasting effect. See dolly zoom.

Geometry

The main shape. It shows only in the Particles and Terrain scenes.

ShapeChoice: The main shape: a sphere, a torus, a torus knot, an icosahedron, an octahedron, a dodecahedron, a cube, a cylinder, a cone, or a Klein bottle: a tube that passes through its own side, so its inside joins its outside.
DetailSlider · 1 to 128 · starts at 64: How finely the shape is cut into triangles. The shape is made again when you let go. The three many-sided shapes only change every 16 steps. On phones and touch screens it opens at 48 and stops at 64. See vertex.
ScaleSlider · 0.1 to 5 · starts at 1: How big the main shape is.
WireframeOn or off · starts off: Draws only the edges of the triangles. The terrain takes it when you press Terrain. See wireframe.
Show the vertices as pointsOn or off · starts off: Marks every vertex of the shape with a small green dot.
ExplodeSlider · 0 to 2 · starts at 0: Pushes every vertex outward by a changing amount, so the surface bulges and ripples. Shapes made of separate faces, such as the cube, split at their edges. See vertex displacement.
Noise displaceSlider · 0 to 2 · starts at 0: Pushes the surface in and out with slowly moving noise, like a blob. See vertex displacement.
TwistSlider · 0 to 6.28 · starts at 0: Turns the shape more the higher up it goes, around its upright middle. See twist.

Material

How the main shape's surface is drawn. The Fractal scene takes the shader when you press Fractal. Terrain and Fluid follow Color as you change it.

ShaderChoice: How the surface is drawn. See shader.
ColorColour · starts #10B981: The shape's colour, for Standard PBR, Toon, Hologram, Fresnel glow and Noise shader.
EmissiveColour · starts #000000: A colour the surface gives off by itself, even in the dark. Standard PBR and Toon use it. See emissive.
MetalnessSlider · 0 to 1 · starts at 0.5: How much the Standard PBR surface looks like metal. See metalness.
RoughnessSlider · 0 to 1 · starts at 0.3: How blurred the Standard PBR reflections are. Low is glossy; high is matte. See roughness.
OpacitySlider · 0 to 1 · starts at 1: How see-through the shape is, for Standard PBR, Normal map, Matcap, Toon and Hologram. The other shaders ignore it.
EnvironmentSlider · 0 to 3 · starts at 1: How strongly the Standard PBR surface reflects the dim blue surroundings. See environment reflection.

Lighting

The three lights and the ambient light reach Standard PBR and Toon, the terrain, the fluid and the crystals. Normal map, Matcap and the four hand-written shaders ignore them. See three-point lighting.

AmbientSlider · 0 to 2 · starts at 0.3: Light that reaches every side equally. See ambient light.
Ambient colorColour · starts #404060: The colour of the ambient light.
Key lightSlider · 0 to 5 · starts at 1.5: The strength of the main light, which shines from far away like the sun. See key light and directional light.
Key colorColour · starts #ffffff: The colour of the main light.
Key angle XSlider · -180 to 180 · starts at 45: Moves the main light around the scene, in degrees.
Key angle YSlider · -90 to 90 · starts at 30: Raises or lowers the main light, in degrees: 90 is straight above, -90 straight below.
Fill lightSlider · 0 to 3 · starts at 0.5: The strength of a violet lamp behind and to the left, which lifts the shadows. It fades with distance, so it is soft. See fill light and point light.
Fill colorColour · starts #7A5BFF: The colour of the fill lamp.
Rim lightSlider · 0 to 3 · starts at 0.8: The strength of a cyan lamp below and in front. See rim light.
Rim colorColour · starts #00D4FF: The colour of the rim lamp.

Particles

The particles show in every scene. Changing Count, Spread, Shape, Blend, Depth write or either colour makes a fresh set.

CountSlider · 0 to 50000 · starts at 5000: How many particles, from 0 to 50,000. At 0 there are none. A fresh set is made when you let go. On phones and touch screens it opens at 3,000 and stops at 15,000. See particle system.
SizeSlider · 0.01 to 0.3 · starts at 0.04: How big each point is drawn. Nearer points are drawn bigger. See point size and size attenuation.
SpreadSlider · 1 to 30 · starts at 8: How far the cloud reaches. Points that drift past it are pulled back.
SpeedSlider · 0 to 3 · starts at 0.5: How fast the points drift. At 0 they stay still.
TurbulenceSlider · 0 to 3 · starts at 0.5: A swirling push on every point, so the cloud churns. At 0 the points drift in straight lines and slow down. See turbulence.
ColorColour · starts #10B981: One end of the particle colours. Each point takes a random mix of the two.
Second colorColour · starts #7A5BFF: The other end of the particle colours.
OpacitySlider · 0 to 1 · starts at 0.8: How see-through the points are.
ShapeChoice: The shape the points start in. As they drift, the shape slowly loosens; set Speed to 0 to hold it.
BlendChoice: Additive adds each point's light to what is behind it, so crowded parts glow white. Normal draws points over each other. See additive blending and blend mode.
Depth writeOn or off · starts off: Lets near points hide the points behind them. Off, every point shows through.

Post-processing

These work on the finished picture, after the scene is drawn. See post-processing.

BloomSlider · 0 to 3 · starts at 0.5: How strongly bright parts glow and spill into their surroundings. See bloom.
Bloom thresholdSlider · 0 to 1 · starts at 0.8: How bright a part must be before it glows. Lower makes more of the picture glow. See bloom threshold.
Bloom radiusSlider · 0 to 1 · starts at 0.4: How far the glow spreads.
Chromatic aberrationSlider · 0 to 0.02 · starts at 0: Shifts the red and blue apart to the sides, like a cheap lens. See chromatic aberration.
Film grainSlider · 0 to 0.5 · starts at 0: Adds moving specks, like film. See film grain.
VignetteSlider · 0 to 1 · starts at 0.3: Darkens the corners. See vignette.
PixelateSlider · 0 to 16 · starts at 0: Draws the picture in blocks this many pixels wide. At 0 it is off. See pixel.
ScanlinesSlider · 0 to 1 · starts at 0: Darkens fine horizontal lines, like an old screen. See scanlines.
Color gradeChoice: A colour change over the whole picture: Warm, Cool, Cyberpunk (strong red and blue, weak green), Noir (black and white), Vintage (faded and brown) or Matrix (green).

Animation

These move the main shape, so they show only in the Particles and Terrain scenes.

Rotate XSlider · 0 to 2 · starts at 0: How fast the main shape turns around its side-to-side line.
Rotate YSlider · 0 to 2 · starts at 0.3: How fast the main shape turns around its upright line.
Rotate ZSlider · 0 to 2 · starts at 0: How fast the main shape turns around the line toward you.
Float heightSlider · 0 to 2 · starts at 0.3: How far the main shape bobs up and down.
Float speedSlider · 0 to 3 · starts at 1: How fast it bobs.
PulseSlider · 0 to 0.5 · starts at 0: Makes the main shape grow and shrink in a steady beat. See pulse.
MorphSlider · 0 to 1 · starts at 0: Pulls the shape toward the form chosen in Morph target: at 0 it is its own shape, at 1 it is the target. See morphing.
Morph targetChoice: The form Morph pulls toward: a sphere, a cube, a flat plane, a spiral that twists with height, or an explosion that throws each point outward. See morph target.

Audio

While sound is playing, a Level line shows how loud the chosen band is, from 0 to 1, after Sensitivity. See Web Audio.

Stop audioButton: Shows while sound is on. It stops the music file and turns the microphone off, so the browser no longer shows it in use.
PlayButton: Plays the music file through your speakers, and the scene reacts to it.
PauseButton: Pauses the music file.
SensitivitySlider · 0.5 to 5 · starts at 2: Multiplies how loud the tool hears the sound. The level stops at 1. See sensitivity.
BandChoice: Which part of the sound the tool listens to: Bass, the lowest sixth or so; Mids, up to half way; Highs, the rest; or Full. See frequency band and FFT.
AffectChoice: What the sound moves. Scale makes the main shape swell. Displacement pushes its surface out, but only while Explode, Noise displace or Twist is above 0. Particles makes the points rush and churn. Color shift turns the colour of the shape, the terrain, the fluid, the fractal and the particles around the colour wheel as the sound gets louder. Everything does all four.

Pointer

Highlight on hover finds the thing under the pointer. Attract, Repel and the lamp work where the pointer crosses an upright plane through the middle of the scene.

Highlight on hoverOn or off · starts on: The main shape, a fractal branch or a crystal under the pointer grows a little; the main shape and crystals also glow green. It starts on. See raycasting.
AttractSlider · 0 to 3 · starts at 0: Pulls the particles toward the pointer. See attract.
RepelSlider · 0 to 3 · starts at 0: Pushes the particles away from the pointer. If Attract is also above 0, the two cancel out. See repel.
A light follows the pointerOn or off · starts off: Puts a lamp where the pointer is, which lights Standard PBR and Toon shapes, the terrain, the fluid and the crystals. See point light.
Light colorColour · starts #10B981: The colour of the pointer lamp.
Light strengthSlider · 0 to 5 · starts at 2: The strength of the pointer lamp.

Export

ResolutionChoice: How many times bigger than the frame Save PNG makes the picture: 1x, 2x or 4x. It starts at 2x. See resolution.

Reset

Every setting goes back to how the page opened, with the Particles scene, the Default preset and the camera where it started. A music file or the microphone keeps playing.

ResetButton: Puts every setting back to how the page opened, with the Particles scene and the camera where it started. Sound keeps playing.