Black plane appears after creation background canvas texture. Problem with GTAO pass

Questions
, , ,
1

Hi everyone :raised_hands:
I am trying to create background texture using canvas for orthographic camera. But if I use GTAO pass- black plane appears in the middle of scene.
To show this I’ve created texture(using canvas) in this GTAO file.
Code I have added to 101 line:

const createGradientTexture = () => {
	const canvas = document.createElement('canvas');
	canvas.width = 16;
	canvas.height = 256;
	const context = canvas.getContext('2d');
	const gradient = context.createLinearGradient(0, 0, 0, 256);
	gradient.addColorStop(0, '#3aa4d9');
	gradient.addColorStop(1, '#64ec3f');
	context.fillStyle = gradient;
	context.fillRect(0, 0, canvas.width, canvas.height);
	return new THREE.CanvasTexture(canvas);
};

const gradientTexture = createGradientTexture();
scene.background = gradientTexture;

and I scaled down model:
model.scale.set( 0.001, 0.001, 0.001 );

Version of three: “^0.162.0”
I would appreciate any help you can give me :pray:

Here is result with black plane:

Снимок экрана 2024-09-23 в 20.05.23
Снимок экрана 2024-09-23 в 20.05.231146×958 105 KB

2

Any help is welcome :pray:
Here is a fiddle:

3

As a workaround, try it like so: gtao pass issue - JSFiddle - Code Playground

The problem is that scene’s background mesh is honored by the override material which is a more fundamental issue in WebGLRenderer. You can avoid this by using TexturePass at the beginning of your pass chain to produce a textured background. The only thing you have to be aware of is to use special clear settings for the render pass otherwise the textured background gets overwritten when rendering the beauty pass.

Using WebGPURenderer would be also an alternative where the issue does not appear in the first place. You can use the same AO technique with a faster and more flexible FX system: three.js webgpu - ambient occlusion (GTAO)

2 Likes
4

Thank you so much for your help, now it works as it should!

1 Like