Engine and Canvas

Engine and Canvas

Creating an Engine and a Canvas

new BABYLON.Engine(canvas, antialias, options, adaptToDeviceRatio) creates a WebGL 2 context (WebGL 1 if WebGL 2 is missing). options passes Context Attributes's context attributes (stencil, powerPreference, alpha, preserveDrawingBuffer) plus engine settings such as doNotHandleContextLost: by default the engine rebuilds every resource after a lost context (Context Loss), which the documentation warns "consumes a lot of memory".

The drawing buffer takes the canvas's CSS size, times the pixel ratio if adaptToDeviceRatio is true, so style the canvas first. Here a 480 x 270 canvas at a pixel ratio of 2 reported webGLVersion 2, a 960 x 540 getRenderWidth() x getRenderHeight(), and a maxTextureSize of 16384 from getCaps(), which wraps the limits WebGL queried by hand. One engine can drive several scenes and canvases.

An Engine created on a styled canvas, reporting its WebGL version, buffer size and capsHTMLLive

<!doctype html>
<style>
  body { margin: 0; background: #f7f3ec; font: 13px/1.45 system-ui, sans-serif; color: #333; }
  /* Style the canvas first: the drawing buffer takes its CSS size (times the pixel ratio) */
  #view { width: 100%; max-width: 480px; height: 270px; display: block; touch-action: none; }
  #info { max-width: 480px; margin: 6px 0 0; padding: 6px 10px; background: #fff; border-radius: 6px; }
</style>
<canvas id="view"></canvas>
<pre id="info"></pre>
<script src="https://cdn.jsdelivr.net/npm/babylonjs@9.28.0/babylon.js"></script>
<script>
const canvas = document.getElementById('view');
// Engine(canvas, antialias, options, adaptToDeviceRatio)
const engine = new BABYLON.Engine(canvas, true, {
  stencil: true,                    // context attributes pass straight to getContext
  powerPreference: 'high-performance',
  preserveDrawingBuffer: false,
  doNotHandleContextLost: true,     // skip the memory-hungry rebuild after a lost context
}, true);

const scene = new BABYLON.Scene(engine);
scene.clearColor = BABYLON.Color4.FromHexString('#cfd8dcff');
const camera = new BABYLON.ArcRotateCamera('cam', -Math.PI / 2.4, 1.2, 3.2, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
new BABYLON.HemisphericLight('sky', new BABYLON.Vector3(0.3, 1, -0.4), 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('#1f5f8b');
book.material = cover;

function report() {
  const caps = engine.getCaps();
  document.getElementById('info').textContent = [
    `webGLVersion        ${engine.webGLVersion}`,
    `canvas CSS size     ${canvas.clientWidth} x ${canvas.clientHeight}`,
    `devicePixelRatio    ${devicePixelRatio}`,
    `render size         ${engine.getRenderWidth()} x ${engine.getRenderHeight()}`,
    `maxTextureSize      ${caps.maxTextureSize}`,
    `maxAnisotropy       ${caps.maxAnisotropy}`,
    `renderer            ${engine.description}`,
  ].join('\n');
}
report();
addEventListener('resize', () => { engine.resize(); report(); });
engine.runRenderLoop(() => {
  book.rotation.y += 0.01;
  scene.render();
});
</script>

MENU