3D / Canvas Playground

Five canvas & 3D libraries. One page. All live.

Three.js The definitive WebGL 3D library — scenes, cameras, lights, meshes.

loading three.js…

shape

color

wire

speed 1×

lights

Drag to orbit. Scroll to zoom. Geometry and material update live. docs ↗

Babylon.js Game & 3D engine with physics, PBR materials, and a full editor.

loading babylon.js…

mesh

material

color

roughness 0.4

metallic 0.6

Click + drag to orbit. Scroll to zoom. PBR = Physically Based Rendering. docs ↗

PixiJS Super-fast 2D WebGL renderer for games, data viz, and interactive graphics.

loading pixi.js…

mode

count 80

size 8

Move your mouse over the canvas to interact with particles. docs ↗

p5.js Creative coding inspired by Processing — draw, sketch, generative art.

loading p5.js…

sketch

color

speed 1×

Move mouse over canvas to interact. Each sketch responds to position. docs ↗

Konva.js 2D canvas with drag-and-drop, hit detection, and a node-based scene graph.

fill

opacity 0.85

All shapes are draggable. Click a shape to select it. Double-click to delete. docs ↗