liveBook · Manning

Render loop

As explained in Web Components in Action

A render loop is a repeated execution cycle that updates and redraws an interactive graphics scene.

A render loop repeatedly invokes rendering work so an interactive 3D scene can redraw while responding to camera input and application changes. section 15.2

Starting a Babylon.js render loop

After creating the engine, scene, camera, and lights, start the cycle with `this.engine.runRenderLoop(() => this.render());`. Keep rendering inside the scene component, alongside the canvas and resize handling. section 15.2

Listing 15.13. 3D scene setup code
initScene() {
   this.engine = new BABYLON.Engine(                      #1
     this.dom.scene, true);
   this.scene = new BABYLON.Scene(this.engine);
   this.scene.clearColor = new BABYLON.Color3(0.894, 0.894, 0.894);

   const camera = new BABYLON.ArcRotateCamera(            #2
     "Camera",
     Math.PI / 2,
     Math.PI / 2, 4,
     BABYLON.Vector3.Zero(), this.scene);
   const light1 = new BABYLON.HemisphericLight("light1",
     new BABYLON.Vector3(1, 1, 0), this.scene);
   const light2 = new BABYLON.PointLight("light2",
     new BABYLON.Vector3(0, 1, -1), this.scene);
   camera.attachControl(this.dom.scene, true);            #3

   this.engine.runRenderLoop(                             #4
     () => this.render() );
   window.addEventListener(                               #5
     'resize', () => this.onResize());
}
render() {
   this.scene.render();
}

onResize() {
   this.engine.resize();
}

Inspect the surrounding 3D scene setup, including the Babylon.js engine, camera controls, render callback, and resize listener. section 15.2

How Web Components in Action covers it

How deep it goes
Shows the Babylon.js call and callback setup, but does not detail frame timing or loop internals.
Examples
Uses a Babylon.js scene component containing a canvas, camera controls, lights, resize handling, and a selectable colored primitive.
What you can do after
Builds a component-level Babylon.js render cycle that redraws a scene and supports camera interaction.
How it connects
Connects render loops with WebGL, Babylon.js, canvas elements, cameras, lights, and Web Components.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.