Reflector add needsUpdate flag

[Shane-oo]

Description

We have a scene of an inside of a house, currently when in the kitchen everything is running smooth, but when the client moves towards the bathroom they encounter a massive lag.

This is due to the reflector in the bathroom acting as a mirror. The reflector has a condition where if the reflector is not facing the camera then the render wont occur, so when we first see the mirror theres a delay because this is the first time the render is occurring.

three.js/examples/jsm/objects/Reflector.js

Line 81 in dbb8427

if ( view.dot( normal ) > 0 ) return;

Solution

Include a needsUpdate flag in the Reflector class so that we can do a pre-render so that the first initial time seeing the Reflector there is no jump

Alternatives

Not sure, whatever other options I'm happy to hear

Additional context

No response

[Mugen87]

Could you work around the issue by doing this:

// wait until the reflector can be added to the scene without blocking due to shader compilation
await renderer.compileAsync( reflector, camera, scene );

scene.add( reflector );

When this is about shader compilation stutter, there is existing API that can be used to avoid it during rendering.

[Shane-oo]

Could you work around the issue by doing this:

// wait until the reflector can be added to the scene without blocking due to shader compilation
await renderer.compileAsync( reflector, camera, scene );

scene.add( reflector );

When this is about shader compilation stutter, there is existing API that can be used to avoid it during rendering.

hmmm not quite I don't think, I have tried to implement it and I seem to still get the stutter step when first look at reflector.

I don't believe the issue is the reflector itself is not compiled in my scene its that internally in the Reflector class in the onBeforeRender() the renderer.render( scene, virtualCamera ); is only first called when you eventually look at the reflector which seems to be a heavy operation