WebGLRenderer: Render target discrepancy between Chrome and Firefox.

[lambocorp]

Description

Experiencing two different results when opening project in Chrome versus Firefox.

I have a sky object and a clone of it.
(1) render the sky clone to a target.

const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { 
	type: THREE.HalfFloatType,
})

(2) render the main scene containing the sky object

// all other objects in the main scene, 
// for example, the red cube in the image below, sample the render target with:
uniform sampler2D renderTarget;
// ...
vec2 screenUV = gl_FragCoord.xy / resolution.xy;
color = texture(renderTarget, screenUV);

In Firefox, the samples align perfectly with the background.
In Chrome, the perspective is warped.
r175

Reproduction steps

Code

// code goes here

Live example

• jsfiddle-latest-release WebGLRenderer
• jsfiddle-dev WebGLRenderer
• jsfiddle-latest-release WebGPURenderer
• jsfiddle-dev WebGPURenderer

Screenshots

No response

Version

0.175.0

Device

Desktop

Browser

Chrome

OS

Linux

[Mugen87]

Do you mind demonstrating the issue with a live example?

You can use on of the fiddles from the Live example issue section.

[lambocorp]

Code Sandbox

If you move the gui slider for 'far' to 0, the sphere material mixes between it's color and the sample from the render target.
I can't seem to replicate the issue yet, it looks fine in FF and Chrome, but I will try one more modification on the test still.

Just to explain the demo:
it renders a scene with the camera inside of a cube that has plants on the backface (as a temporary 'Sky').
Also render a scene with just that cube (Sky) to target (sky-controller.js).
Put a sphere in the center of the screen.
Patch the sphere's material in fog-controller.js.
The sphere's fog fragment now samples the render target.

[Mugen87]

I can't seem to replicate the issue yet, it looks fine in FF and Chrome, but I will try one more modification on the test still.

That's good. The smaller the code example the better. This could potentially be a browser issue so a compact test case will be helpful when the issue is reported to a browser vendor.

[lambocorp]

Yea my core build is huge and complicated, and I tried to extract relevant parts into a test, but CodeSandbox refuses to let me extend Three.Mesh... not sure why, but the test uses a temporary work around instead to try and show the issue. So there's still room for me either to try and get the test closer to the core build which has the issue, or remove aspects from the core to get to a minimal example.