WebGPURenderer produces washed out colours compared to WebGL

[danrossi]

Description

I've integrated a bundle of the WebGPURenderer to begin testing and I am seeing a difference in the colors produced compared to WebGLRenderer. They are highly exposed. I'm not sure if a property is needed for it.

The WebXR manager is also not available yet and might need integration.

Reproduction steps

live examples

Code

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );

scene = new THREE.Scene();

const geometry = new THREE.SphereGeometry( 500, 60, 40 );
// invert the geometry on the x-axis so that all of the faces point inward
geometry.scale( - 1, 1, 1 );

const video = document.getElementById( 'video' );
video.play();

const texture = new THREE.VideoTexture( video );
texture.colorSpace = THREE.SRGBColorSpace;
const material = new THREE.MeshBasicMaterial( { map: texture } );

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

if (await WebGPU.isAvailable()) {
	renderer = new WebGPURenderer();
} else {
	renderer = new THREE.WebGLRenderer();
}



renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

Live example

• WebGPU - https://danrossi.github.io/three-webgpu-renderer/tests/webgpu_video_panorama_equirectangular.html
• WebGL - https://danrossi.github.io/three-webgpu-renderer/tests/webgl_video_panorama_equirectangular.html

Screenshots

No response

Version

153dev

Device

No response

Browser

No response

OS

No response

[Mugen87]

At first sight it looks like the color space for the video texture isn't honored.

[danrossi]

ok a color space issue I am seeing it on other projects. I can help debug it perhaps. So its on any texture setting or the renderer as the renderer as colorSpace and outsideColorSpace.

[danrossi]

Both of these are needed. if outputColorSpace is not set it has the problem.

renderer.outputColorSpace = LinearSRGBColorSpace
renderer.colorSpace = LinearSRGBColorSpace

[danrossi]

update: I'm experiencing high cpu usage with video textures and will make a seperate ticket. I have 20% usage with the example below.

In an external project adding the colorSpace property helped but not for these examples I updated. Its the current builds.

https://danrossi.github.io/three-webgpu-renderer/tests/webgpu_video_panorama_equirectangular.html

https://github.com/danrossi/three-webgpu-renderer/blob/master/tests/webgpu_video_panorama_equirectangular.html#L88

[danrossi]

The Linear color space stops the problem but only when configuring outputColorSpace. changing the texture colorspace didn't resolve it.

https://github.com/danrossi/three-webgpu-renderer/blob/master/tests/webgpu_video_panorama_equirectangular.html#L91

[danrossi]

This is possibly replated and "washed out" is gamma correction is needed when srb is used ?

https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791/53

[Mugen87]

@danrossi Please wait until @sunag responds to this issue. You will not speed-up this process by posting at every related thread/topic.

[sunag]

We're using GPUExternalTexture for video, which is recommended by WebGPU, but it doesn't support UNORM, so we'll have to made this color space conversion via code. I will work on this fix.

[danrossi]

I get carried away and spam sorry guys. It's something to do with video textures but I saw it on images loaded by the TextureLoader also. I can make an example for that. Thanks.

I am experiencing performance problems in chrome with video textures and webgpu. I can't determine whos problem it is to report. Should I try GPUExternalTexture ?

[Mugen87]

I suggest you wait until this particular issue is fixed. It's about wrong/missing color space conversion.

The performance issues are something that I would investigate separately after the colors are right. If there are performance issues in the WebGPU implementation, we have to delegate these to the Chromium team in any event. But first, we should make sure the visual results on our side are correct.

[danrossi]

OK I found a possible AB test this doesn't have color or cpu resource issues but it's a small canvas. So I will wait to report my findings with chrome. https://webgpu.github.io/webgpu-samples/samples/videoUploading

[danrossi]

Confirmed it is working. But I need to figure out how to report the performance problem with videotextures with Chrome. Do I add it here or with chrome ?

[Mugen87]

I think it's okay to open an issue here first. When we are sure it's not three.js related, we can delegate the issue to the Chromium bug tracker.

[Mugen87]

I think it's okay to open an issue here first.

Oh, you already did^^: #26266