Transmission not working properly when a Reflector is added to the scene

[LR17]

Description

The transmission effect is not correct when a Reflector is added to the scene and facing the camera. It seems that the WebGLRenderer.render() invoked inside Reflector.onBeforeRender() alters the internal state of the renderer while it is rendering the transmissive object.

Reproduction steps

1. Create a material with transmission
2. Add a Reflector to the scene

Live example

• https://jsfiddle.net/buym1ef8/

Screenshots

No response

Version

dev

Device

No response

Browser

No response

OS

No response

[LR17]

I've investigated the issue and found that the problem is the renderer _transmissionRenderTarget being overwritten when rendering the transmission pass triggered by the Reflector's render.

To workaround the problem I added 2 new methods to WEBGLRenderer:

this.setTransmissionRenderTarget = function (renderTarget) {
	_transmissionRenderTarget = renderTarget;
}

this.getTransmissionRenderTarget = function () {
	return _transmissionRenderTarget;
}

Then added a render target for transmission to Reflector class and used it in onBeforeRender and onAfterRender callbacks:

// Reflector: constructor

this.transmissionRenderTarget = new THREE.WebGLRenderTarget(1, 1, {
    generateMipmaps: true,
    type: THREE.HalfFloatType,
    minFilter: THREE.LinearMipmapLinearFilter,
    samples: 4
})


// Reflector: OnBeforeRender

this.transmissionRenderTargetSwap = renderer.getTransmissionRenderTarget();
const size = renderer.getDrawingBufferSize(new THREE.Vector2());
this.transmissionRenderTarget.setSize(size.x, size.y);
renderer.setTransmissionRenderTarget(this.transmissionRenderTarget); 


// Reflector: OnAfterRender

renderer.setTransmissionRenderTarget(this.transmissionRenderTargetSwap);

In this way transmission is renderered correctly. In my particular use case I also use a transparent background and found that this line in WEBGLRenderer is a bit arbitrary because the alpha setting is hardcoded. It would be useful to be able to control the alpha/clear color for transmission.

[Mugen87]

In my particular use case I also use a transparent background and found that this line in WEBGLRenderer is a bit arbitrary because the alpha setting is hardcoded. It would be useful to be able to control the alpha/clear color for transmission.

You are referring to:

if ( _currentClearAlpha < 1 ) _this.setClearColor( 0xffffff, 0.5 );

Some background information about the mentioned line: #25819 (comment)

[lo-th]

/!\ Transmission material become super slow on last three update

the add of "stencilBuffer: stencil" in _transmissionRenderTarget give me 24 fps instead of 144 :(

in demo

[Mugen87]

@lo-th Are you using r162? If so, this release does not have the stencil update. This is only available on dev.

[Mugen87]

Oh wait. I see now in your sources that your are using r163dev.

Um, if I manually set stencilBuffer to true while debugging, I don't see much of a performance difference (1-2 FPS). Do you mind sharing two links of the app? One with enabled stencil and one without it. You can disable it by creating the renderer like so:

renderer = new THREE.WebGLRenderer( { stencil: false } );

[Mugen87]

@lo-th Please let's continue the discussion in #27799. It's not right to hijack this thread for stencil related issues.

[Mugen87]

Um, issues like that show how tricky the transmission implementation is^^.

@LR17 Instead of having setTransmissionRenderTarget() and getTransmissionRenderTarget(), I think we can implement this in a way so it works for all logic that uses nested render calls.

The idea is to have a transmission render target for each render state. Can you please give the following commit a try and see if it solves the issue? Mugen87@449b914

[LR17]

Yes, it works!