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)

[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!