Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WebGPURenderer: Interference between LinearSRGBColorSpace and z-buffer in WebGL2 backend of r173 #30526

Closed
boytchev opened this issue Feb 15, 2025 · 1 comment · Fixed by #30527
Closed

WebGPURenderer: Interference between LinearSRGBColorSpace and z-buffer in WebGL2 backend of r173 #30526

boytchev opened this issue Feb 15, 2025 · 1 comment · Fixed by #30527
Labels
Regression
Milestone
r174

Comments

@boytchev
Copy link
Contributor

Description

When the WebGL2 backend of WebGPURenderer with a LinearSRGBColorSpace is used in Three.js r173, the z-buffering appears broken - i.e. objects are drawn as if no z-buffering is used, or as if depth testing/writing is turned off. The problem does not appear if any of these things is done:

  • an older release is used, e.g. r172
  • a WebGPU browser is used (thus no fallback to WebGL2 backend)
  • SRGBColorSpace is used instead of LinearSRGBColorSpace

A side node: is there a way to force WebGPURenderer to use WebGL2 backend for testing/debug purposes? Currently I have to switch between two browsers - Chrome for WebGPU and Firefox for WebGL2 backend.

Reproduction steps

  1. Create a scene with two objects that intersect
  2. Use WebGPURenderer from r173 with outputColorSpace set to LinearSRGBColorSpace
  3. Run in a non-WebGPU browser, so the WebGL2 backend is used
  4. One of the objects will be draw on top of the other, without expected intersection

Code

Import maps:

<head>
  <script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.webgpu.min.js"
    }
  }
</script>
</head>

JS code:

import * as THREE from "three";

var camera = new THREE.PerspectiveCamera( 60, innerWidth/innerHeight );
    camera.position.set( 0, 0, 10 );

var scene = new THREE.Scene();
    scene.add(
          new THREE.Mesh(
                new THREE.BoxGeometry( 2, 2, 2 ),
                new THREE.MeshBasicNodeMaterial( {color: 'red'} )
          ),
          new THREE.Mesh(
                new THREE.BoxGeometry( 4, 1, 1 ),
                new THREE.MeshBasicNodeMaterial( {color: 'tan'} )
          )	
    );		

var renderer = new THREE.WebGPURenderer( );
    renderer.setSize( innerWidth, innerHeight );
    document.body.appendChild( renderer.domElement );
    renderer.setAnimationLoop( animationLoop );

function animationLoop( t ) {

    scene.rotation.y = t/1000;
    renderer.renderAsync( scene, camera );

}

// remove next line to show well intersecting boxes
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;

Live example

Screenshots

Wrong rendering: overlapping boxes with LinearSRGBColorSpace

Image

Correct rendering: intersecting boxes without LinearSRGBColorSpace

Image

Version

r173

Device

Desktop

Browser

Firefox

OS

Windows
@Mugen87 Mugen87 mentioned this issue Feb 15, 2025
Merged
@Mugen87 Mugen87 added this to the r174 milestone Feb 15, 2025
@Mugen87
Copy link
Collaborator

Mugen87 commented Feb 15, 2025

Sorry, for the inconvenience. When implementing #30413, I've overlooked the linear-srgb option that renders directly to screen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Regression
Projects
None yet
Milestone
r174
Development

Successfully merging a pull request may close this issue.

WebGLBackend: Fix depth regression. Mugen87/three.js
2 participants
@Mugen87 @boytchev