Custom Rendering

The ImFusion Web SDK allows you to add your own custom rendering to one or several views of a Display. Using createCustomGlObject allows you to provide a CustomGlObject which can be added to the desired view via addObject.

The CustomGlObject interface requires you to implement the two functions render and bounds. The render function gets called by the ImFusion Web SDK and is provided with a GlViewState object which you can query to set up your rendering state, i.e. it stores information about the viewport, projection matrix, and modelview matrix.

The following examples show integration of existing WebGL rendering engines. Both animate on every frame, so they drive rendering themselves instead of letting the ImFusion Web SDK autorender when its display state changes:

const imf = await init(canvas, { autoRender: false });

function render() {
  imf.display.render();
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

• three.js: a torus knot lit by rotating area lights.
• babylon.js: area lights over reflective spheres.