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.
myRapportScene.sessionRequest({
rendererSetupHook: ({ renderer, THREE }) => {
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
},
});
Related topics:
https://threejs.org/docs/#api/en/renderers/WebGLRenderer
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.
Related topics:
https://threejs.org/docs/#api/en/materials/MeshToonMaterial
https://threejs.org/examples/?q=too#webgl_materials_variations_toon
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.
scene.sessionRequest({
rendererSetupHook: ({ renderer, THREE }) => {
renderer.shadowMap.enabled = false;
renderer.setPixelRatio(1);
},
targetFps: 30,
});