Meshes Clones and (Thin)Instance
Babylon supports several methods of rendering meshes each with there advantages and disadvantages. Anu's scene graph apis currently support creating Meshes, Clones, Instances, and ThinInstance. Since each of these methods works slight differently not all of anu's operators will work with each one. This page will dive deeper into these methods, when to use them, and how to use them in anu.
TIP
The performance of the examples below are influenced by each other since they are running on the same page. Remember to reset the sliders to reduce this effect.
Mesh
The standard method for mesh rendering through create or bind is to call Babylon's MeshBuilder methods generating a new mesh for each call. In this approach each mesh with be created with new geometry and its own draw call. While this gives us the most control and flexibility over how we create and change meshes, it is also the most resource intensive. In typical usage using this method will start to slow down scenes after around 2000 draw calls.
Source
// SPDX-License-Identifier: Apache-2.0
// Copyright : J.P. Morgan Chase & Co.
import { HemisphericLight, ArcRotateCamera, Vector3, Scene} from '@babylonjs/core';
import { AdvancedDynamicTexture, Control, SelectionPanel, SliderGroup} from '@babylonjs/gui';
import * as anu from '@jpmorganchase/anu' //import anu, this project is using a local import of babylon js located at ../babylonjs-anu this may not be the latest version and is used for simplicity.
//create and export a function that takes a babylon engine and returns a scene
export const meshBench = function(engine){
const scene = new Scene(engine);
new HemisphericLight('light1', new Vector3(0, 10, 0), scene);
const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.position = new Vector3(-25, 10, -50);
camera.attachControl(true);
let n = 100
let box = anu.bind('box', {}, [...Array(n).keys()], scene)
.position(() => Vector3.Random(-20,20));
let createBoxes = (num) => {
box.dispose();
box = anu.bind('box', {}, [...Array(num).keys()], scene)
.position(() => Vector3.Random(-20,20));
}
var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("mesh");
var selectBox = new SelectionPanel("mesh");
selectBox.width = 0.25;
selectBox.height = 0.25;
selectBox.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
selectBox.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
advancedTexture.addControl(selectBox);
var numGroup = new SliderGroup("1");
numGroup.addSlider("Boxes", (value) => createBoxes(Math.round(value)), "", 100, 10000, 100, (value) => Math.round(value))
selectBox.addGroup(numGroup);
scene.onAfterRenderObservable.add(() => {
numGroup.header = "FPS: " + scene.getEngine().getFps().toFixed();
})
return scene;
};Clone
If we are drawing many meshes with the same geometry, but we still need them to be fully independent, we can use Clones to reuse geometry and save a little bit of performance. We can do this with bindClone.
anu.bindClone(mesh: Mesh, data: [], scene: Scene)Source
// SPDX-License-Identifier: Apache-2.0
// Copyright : J.P. Morgan Chase & Co.
import { HemisphericLight, ArcRotateCamera, Vector3, Scene} from '@babylonjs/core';
import { AdvancedDynamicTexture, Control, SelectionPanel, SliderGroup} from '@babylonjs/gui';
import * as anu from '@jpmorganchase/anu' //import anu, this project is using a local import of babylon js located at ../babylonjs-anu this may not be the latest version and is used for simplicity.
//create and export a function that takes a babylon engine and returns a scene
export const cloneBench = function(engine){
const scene = new Scene(engine);
new HemisphericLight('light1', new Vector3(0, 10, 0), scene);
const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.position = new Vector3(-25, 10, -50);
camera.attachControl(true);
let n = 100
let root_box = anu.create('box', 'root_box')
let box = anu.bindClone(root_box, [...Array(n).keys()], scene)
.position(() => Vector3.Random(-20,20));
let createBoxes = (num) => {
box.dispose();
box = anu.bindClone(root_box, [...Array(num).keys()], scene)
.position(() => Vector3.Random(-20,20));
}
var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("mesh");
var selectBox = new SelectionPanel("mesh");
selectBox.width = 0.25;
selectBox.height = 0.25;
selectBox.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
selectBox.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
advancedTexture.addControl(selectBox);
var numGroup = new SliderGroup("1");
numGroup.addSlider("Boxes", (value) => createBoxes(Math.round(value)), "", 100, 10000, 100, (value) => Math.round(value))
selectBox.addGroup(numGroup);
scene.onAfterRenderObservable.add(() => {
numGroup.header = "FPS: " + scene.getEngine().getFps().toFixed();
})
return scene;
};Instance
If we are drawing many meshes with the same geometry, we can use Instances to render them all in a single draw call leading to much better performance. InstancedMeshes will still have their own nodes in the scene graph and can each have unique properties such as names, metadata, and transforms. However, since they all share the same mesh geometry, and materials we need to use instanced buffers to set their other properties such as color.
Using anu we can create InstancedMeshes using the bindInstance method. Unlike the bind method that takes a string, bindInstance takes an existing mesh to use as the source mesh for the instances.
anu.bindInstance(mesh: Mesh, data: [], scene: Scene)To register or set instanced buffers we can use setInstanceBuffer and registerInstanceBuffer Selection methods.
//Create a sphere to be used in our instance and register a color buffer
let rootSphere = anu.create('sphere', 'mySphere', {diameter: 0.003});
rootSphere.isVisible = false;
rootSphere.registerInstancedBuffer("color", 4);
rootSphere.instancedBuffers.color = new Color4(1,1,1,1);
let spheres = anu.bindInstance(rootSphere, data)
.setInstancedBuffer("color", (d) => new Color4(0,0,0,1));Source
// SPDX-License-Identifier: Apache-2.0
// Copyright : J.P. Morgan Chase & Co.
import { HemisphericLight, ArcRotateCamera, Vector3, Scene} from '@babylonjs/core';
import { AdvancedDynamicTexture, Control, SelectionPanel, SliderGroup} from '@babylonjs/gui';
import * as anu from '@jpmorganchase/anu' //import anu, this project is using a local import of babylon js located at ../babylonjs-anu this may not be the latest version and is used for simplicity.
//create and export a function that takes a babylon engine and returns a scene
export const instanceBench = function(engine){
const scene = new Scene(engine);
new HemisphericLight('light1', new Vector3(0, 10, 0), scene);
const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.position = new Vector3(-25, 10, -50);
camera.attachControl(true);
let n = 100
let box = anu.create('box', 'box');
let boxes = anu.bindInstance(box, [...Array(n).keys()], scene)
.position(() => Vector3.Random(-20,20));
let createBoxes = (num) => {
boxes.dispose();
boxes = anu.bindInstance(box, [...Array(num).keys()], scene)
.position(() => Vector3.Random(-20,20));
}
var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("instance");
var selectBox = new SelectionPanel("instance");
selectBox.width = 0.25;
selectBox.height = 0.25;
selectBox.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
selectBox.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
advancedTexture.addControl(selectBox);
var numGroup = new SliderGroup("2",);
numGroup.addSlider("Boxes", (value) => createBoxes(Math.round(value)), "", 100, 10000, 100, (value) => Math.round(value))
selectBox.addGroup(numGroup);
scene.onAfterRenderObservable.add(() => {
numGroup.header = "FPS: " + scene.getEngine().getFps().toFixed();
})
return scene;
};Thin Instance
ThinInstances are often the most performant way of drawing many identical meshes at once however come with the most restrictions in how you manipulate those meshes. With thin instance we are essential writing directly to the GPU buffer which allows us to draw potentially millions of meshes in a single draw call. However, these meshes will not be represented in the scene graph and instead will be all represented under a single mesh, the root mesh of the thin instance. Additionally when we want to modify a mesh in the thin instance, we need to rewrite the entire matrix buffer to do so.
To support thin instance, anu provides the bindThinInstance() method as well as several special thinInstanceOperators to make modifying the thin instance more connivent.
bindThinInstance(mesh: Mesh, data: [], scene: Scene)| Function | Parameters |
|---|---|
| thinInstanceAttributeAt(attribute, index, value): Selection | attribute: string, index: number, value: any |
| thinInstanceColor(value, staticBuffer?): Selection | value: Color4 | (d: any, n: Node, i: number) => Color4, staticBuffer: boolean (default: false) |
| thinInstanceColorAt(index, value): Selection | index: number, value: Color4 | (d: any, n: Node, i: number) => Color4 |
| thinInstanceColorFor(method, value): Selection | method: (d: any, n: Node, i: number) => boolean, value: Color4 | (d: any, n: Node, i: number) => Color4 |
| thinInstanceMatrixAt(index, value): Selection | index: number, value: Matrix | (d: any, n: Node, i: number) => Matrix |
| thinInstanceMatrixFor(method, value): Selection | method: (d: any, n: Node, i: number) => boolean, value: Matrix | (d: any, n: Node, i: number) => Matrix |
| thinInstancePosition(value, staticBuffer?): Selection | value: Vector3 | (d: any, n: Node, i: number) => Vector3, staticBuffer: boolean (default: false) |
| thinInstancePositionAt(index, value): Selection | index: number, value: Vector3 | (d: any, n: Node, i: number) => Vector3 |
| thinInstancePositionFor(method, value): Selection | method: (d: any, n: Node, i: number) => boolean, value: Vector3 | (d: any, n: Node, i: number) => Vector3 |
| thinInstanceRegisterAttribute(attribute, stride): Selection | attribute: string, stride: number |
| thinInstanceRotation(value, staticBuffer?): Selection | value: Vector3 | (d: any, n: Node, i: number) => Vector3, staticBuffer: boolean (default: false) |
| thinInstanceRotationAt(index, value): Selection | index: number, value: Vector3 | (d: any, n: Node, i: number) => Vector3 |
| thinInstanceRotationFor(method, value): Selection | method: (d: any, n: Node, i: number) => boolean, value: Vector3 | (d: any, n: Node, i: number) => Vector3 |
| thinInstanceScaling(value, staticBuffer?): Selection | value: Vector3 | (d: any, n: Node, i: number) => Vector3, staticBuffer: boolean (default: false) |
| thinInstanceScalingAt(index, value): Selection | index: number, value: Vector3 | (d: any, n: Node, i: number) => Vector3 |
| thinInstanceScalingFor(method, value): Selection | method: (d: any, n: Node, i: number) => boolean, value: Vector3 | (d: any, n: Node, i: number) => Vector3 |
| thinInstanceSetAttribute(attribute, value): Selection | attribute: string, value: any |
| thinInstanceSetBuffer(attribute, value, stride?, staticBuffer?): Selection | attribute: string, value: Float32Array | (d: any, n: Node, i: number) => Float32Array, stride?: number, staticBuffer: boolean (default: false) |
Source
// SPDX-License-Identifier: Apache-2.0
// Copyright : J.P. Morgan Chase & Co.
import { HemisphericLight, ArcRotateCamera, Vector3, Scene} from '@babylonjs/core';
import { AdvancedDynamicTexture, Control, SelectionPanel, SliderGroup} from '@babylonjs/gui';
import * as anu from '@jpmorganchase/anu' //import anu, this project is using a local import of babylon js located at ../babylonjs-anu this may not be the latest version and is used for simplicity.
//create and export a function that takes a babylon engine and returns a scene
export const thinInstanceBench = function(engine){
const scene = new Scene(engine);
new HemisphericLight('light1', new Vector3(0, 10, 0), scene);
const camera = new ArcRotateCamera("Camera", -(Math.PI / 4) * 3, Math.PI / 4, 10, new Vector3(0, 0, 0), scene);
camera.position = new Vector3(-25, 10, -50);
camera.attachControl(true);
let n = 100
let box = anu.create('box', 'box');
let boxes = anu.bindThinInstance(box.clone(), [...Array(n).keys()], scene)
.thinInstancePosition(() => Vector3.Random(-20,20));
let createBoxes = (num) => {
boxes.dispose()
boxes = anu.bindThinInstance(box.clone(), [...Array(num).keys()], scene)
.thinInstancePosition(() => Vector3.Random(-20,20));
}
var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("instance");
var selectBox = new SelectionPanel("instance");
selectBox.width = 0.25;
selectBox.height = 0.25;
selectBox.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
selectBox.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
advancedTexture.addControl(selectBox);
var numGroup = new SliderGroup("2",);
numGroup.addSlider("Boxes", (value) => createBoxes(Math.round(value)), "", 100, 1000000, 100, (value) => Math.round(value))
selectBox.addGroup(numGroup);
scene.onAfterRenderObservable.add(() => {
numGroup.header = "FPS: " + scene.getEngine().getFps().toFixed();
})
return scene;
};