Advanced Customisation

Rendering custom characters

It's possible to render characters with custom shader, materials, and scene effects. Setting specific properties in the character's materials enables these features.

Renderer setup hook

Its possible to customize the renderer with a setup hook function. The hook function arguments will be supplied with the RWV renderer and the three.js module.

CODE

myRapportScene.sessionRequest({
  rendererSetupHook: ({ renderer, THREE }) => {
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1;
  },
});

Toon shader material

By setting a property named typeOverride with a string value including the 'ToonMaterial' keyword to a material's userData adds an outline effect to the scene and changes all materials with this typeOverride to a Three.js build in MeshToonMaterial.

When this material type override is active, the material's normal map will be used as a gradient map.
Properties named map, color, alphaMap, normalMap from the original material will be used for the MeshToonMaterial material override.

Performance options

In order to improve performance on devices with lower graphical or processing capabilities, it may be necessary to reduce the rendering quality. Additionally, disabling shadows can provide an overall increase in performance. However, keep in mind that lowering the pixel ratio may result in a less clear visual output as a trade-off for improved performance.

Target FPS can be lowered to produce a more stable frame rate on devices which can’t produce a stable frame rate with default settings.

JS

scene.sessionRequest({
  rendererSetupHook: ({ renderer, THREE }) => {
    renderer.shadowMap.enabled = false;
    renderer.setPixelRatio(1);
  },
  targetFps: 30,
});