Full game-grade 3D engines for the web. Where Three.js is a library, Babylon.js and PlayCanvas are batteries-included engines — scene graph, physics, materials, animation and editors.
A genuine Babylon scene: an arc-rotate camera you can drag to orbit, a hemispheric + directional light, a ground plane and animated meshes bobbing and spinning via Babylon's built-in animation loop. Click a sphere to recolour it.
// a Babylon.js scene = engine + scene + camera + light + mesh const engine = new BABYLON.Engine(canvas, true); const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("cam", -Math.PI/2, Math.PI/2.4, 12, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, true); new BABYLON.HemisphericLight("l", new BABYLON.Vector3(0,1,0), scene); const sphere = BABYLON.MeshBuilder.CreateSphere("s", { diameter: 2 }, scene); engine.runRenderLoop(() => scene.render());
Full TypeScript engine with a Node Material Editor, built-in physics (Havok), PBR materials, glTF loading, WebXR and a web-based Playground & Inspector. Great for apps, configurators and serious games.
A similar full engine with a collaborative browser-based visual editor (like a Unity-in-the-browser). Entity-component system, real-time multi-user editing, and tiny published builds. Used for web games and product 3D.
Both go beyond a rendering library: they bundle a scene graph, asset pipeline, animation system, physics and an editor — so you assemble experiences rather than wiring up WebGL by hand.
Notice you never wrote a requestAnimationFrame loop — engine.runRenderLoop() owns the frame. The engine also handles resize, picking (click detection), and a declarative animation system, which is why the spheres above bob and the camera orbits with almost no code.
cdn.babylonjs.com/babylon.js — a genuine Engine, Scene, ArcRotateCamera, lights, animated meshes and mesh picking. PlayCanvas is described as a comparable engine but is not loaded here. The shared CSS shell styles the page chrome.