WebGPU: UV flips Y on WebGL fallback when a texture node is reused

[shotamatsuda]

Description

Using WebGPURenderer with WebGLBackend, reusing a texture node to assign a RenderTarget texture flips the Y texture coordinate. This can be reproduced with nodes in the examples such as GaussianBlurNode.

This might be caused by some internal state for texture coordinate abstraction not being updated or relying on a wrong assumption, but I'm not sure where.

Reproduction steps

1. Render a texture using a texture node.
2. Assign a new texture to the texture node to reuse it.
3. Render the texture.

Code

const textureNode = texture(null)
const material = new NodeMaterial()
material.fragmentNode = textureNode
const mesh = new QuadMesh(material)

// First pass:
textureNode.value = image
const rt1 = new RenderTarget(100, 100)
renderer.setRenderTarget(rt1)
mesh.render(renderer)

// Second pass:
textureNode.value = rt1.texture
// Uncommenting the line below doesn't change the result, but uncommenting it
// and commenting out the above line does change the result.
// material.fragmentNode = texture(rt1.texture)
const rt2 = new RenderTarget(100, 100)
renderer.setRenderTarget(rt2)
mesh.render(renderer)

See also the fiddles below.

Live example

• Minimal reproduction: https://jsfiddle.net/shotamatsuda/j6btgk0n/
• Using GaussianBlurNode: https://jsfiddle.net/shotamatsuda/o6dbgyL4/

Screenshots

WebGPU:

WebGL fallback:

Version

r179

Device

Desktop

Browser

Chrome

OS

MacOS

[Mugen87]

The problem is TextureNode embeds the y-flip of textures in shader code. You can see the respective section below:

three.js/src/nodes/accessors/TextureNode.js

Lines 300 to 312 in 27151c8

	if ( builder.isFlipY() && ( ( texture.image instanceof ImageBitmap && texture.flipY === true ) || texture.isRenderTargetTexture === true || texture.isFramebufferTexture === true || texture.isDepthTexture === true ) ) {
	if ( this.sampler ) {
	uvNode = uvNode.flipY();
	} else {
	uvNode = uvNode.setY( int( textureSize( this, this.levelNode ).y ).sub( uvNode.y ).sub( 1 ) );
	}
	}

Since you reuse the node, the node setup and thus setupUV() are only executed once which means the second pass reuses the same shader code and eventually does not flip the render target texture.

Enforcing a setup per texture exchange is not an option since that results in too much overhead. If we want to provide that level of flexibility in TextureNode, we must represent flipY as a uniform similar to WebGLRenderer. We can then use an update callback to update the flag per render object.

If we don't provide such a logic, you indeed have to work with separate texture nodes. Or even better with separate materials for each render pass since that it easier for the engine to detect different shaders are required.

[shotamatsuda]

Thank you. Your explanation makes sense and explains why it doesn't reproduce when the first input texture is a render target. Also, it is not related to WebGLBackend.

Then the question would be whether we will represent flipY as a uniform, or modify the GaussianBlurNode in the example. Representing flipY as a uniform sounds reasonable to me because a TextureNode can be seen as a uniform and might change between textures that need flipY and non-flipY.