Rendering Optimization

Rendering is the process of drawing the scene every frame.

Expensive Rendering Features

Shadows

Very expensive.

Bad:

10 shadow lights

Good:

1 shadow light

Shadow Map Resolution

Bad:

light.shadow.mapSize.set(
    4096,
    4096
);

Good:

light.shadow.mapSize.set(
    1024,
    1024
);

Pixel Ratio Optimization

Bad:

renderer.setPixelRatio(
    window.devicePixelRatio
);

Some phones:

devicePixelRatio = 4

Heavy GPU load.

Good:

renderer.setPixelRatio(
    Math.min(
        window.devicePixelRatio,
        2
    )
);

Professional approach.

Best Practices

✓ Reduce shadows

✓ Lower shadow resolution

✓ Limit pixel ratio

✓ Disable unused effects