Playground

The Playground 89,603 is Babylon 89,603 's online editor: code on the left, the live scene on the right, in JavaScript or TypeScript, on the stable or preview engine. You write a createScene function that returns a scene; the Playground supplies engine and canvas, and a createEngine function of yours replaces the engine (with WebGPUEngine, for example). Save stores the code on Babylon's snippet server under a permanent address such as playground.babylonjs.com/#6F0LKI#2, the last part being the revision, which each save increments. Swap the page for full.html (canvas only), frame.html (canvas with FPS and edit buttons, for an iframe) or debug.html (unminified engine); Download zips a runnable index.html. A Playground link is how you ask for help on Babylon's forum. Saved snippets are public, so keep keys out of them.

A Playground in miniature: an editable createScene function on the left, the scene it returns on the rightHTMLLive

<!doctype html>
<style>
  body { margin: 0; background: #f7f3ec; font: 13px system-ui, sans-serif; color: #333; }
  canvas { width: 100%; max-width: 600px; height: 340px; display: block; touch-action: none; outline: none; }
  #wrap { max-width: 600px; display: flex; } #code { width: 45%; height: 340px; box-sizing: border-box; font: 11px/1.4 monospace; border: 0; padding: 6px; background: #fffdf8; resize: none; } #view { width: 55% !important; } #bar { max-width: 600px; padding: 6px 8px; } button { font: inherit; padding: 3px 10px; }
</style>
<canvas id="view"></canvas>
<div id="bar"><button id="run">Run</button> <span id="info">The Playground supplies engine and canvas; your createScene returns the scene.</span></div>
<script src="https://cdn.jsdelivr.net/npm/babylonjs@9.28.0/babylon.js"></script>
<script>
// Babylon's Playground is at playground.babylonjs.com; this page imitates its contract.
const canvas = document.getElementById('view');
const code = document.createElement('textarea');
code.id = 'code';
code.spellcheck = false;
code.value = `const createScene = function () {
  const scene = new BABYLON.Scene(engine);
  scene.clearColor = new BABYLON.Color4(0.97, 0.95, 0.92, 1);
  const camera = new BABYLON.ArcRotateCamera('camera',
    -Math.PI / 2, 1.2, 4, BABYLON.Vector3.Zero(), scene);
  camera.attachControl(canvas, true);
  new BABYLON.HemisphericLight('light',
    new BABYLON.Vector3(0, 1, 0), scene);
  const book = BABYLON.MeshBuilder.CreateBox('book',
    { width: 1, height: 1.5, depth: 0.25 }, scene);
  const cover = new BABYLON.StandardMaterial('cover', scene);
  cover.diffuseColor = BABYLON.Color3.FromHexString('#b5452f');
  book.material = cover;
  scene.onBeforeRenderObservable.add(() => {
    book.rotation.y += 0.01;
  });
  return scene;
};`;
const wrap = document.createElement('div');
wrap.id = 'wrap';
canvas.replaceWith(wrap);
wrap.append(code, canvas);

const engine = new BABYLON.Engine(canvas, true);
let scene = null;
function run() {                                     // what the Playground's Run button does
  try {
    const createScene = new Function('engine', 'canvas', `${code.value}\nreturn createScene();`);
    const next = createScene(engine, canvas);
    scene?.dispose();
    scene = next;
    document.getElementById('info').textContent = `ran: ${scene.meshes.length} meshes`;
  } catch (error) {
    document.getElementById('info').textContent = error.message;
  }
}
run();
document.getElementById('run').addEventListener('click', run);
engine.runRenderLoop(() => scene?.render());
addEventListener('resize', () => engine.resize());
</script>

MENU