TSL: setLayout breaks uniforms in custom Fn

[mdevecka]

Description

Using setLayout with Fn makes uniform usage broken.
Whether uniform is defined within the function or outside is not relevant.
Tested both with WebGPU and WebGL fallback.
Works if setLayout function is not used.

Reproduction steps

See code.

Code

const testColor = Fn(() => {
  const tint = uniform(vec4(1,0,0,1)).label('tint');
  return vec4(1, 1, 1, 1).mul(tint);
}).setLayout({
  name: 'testColor', type: 'vec4',
  inputs: [],
});
...
testMaterial.fragmentNode = testColor();

Result

// Error while parsing WGSL: :23:45 error: unresolved value 'object'

// Three.js r177 - Node System

// global
diagnostic( off, derivative_uniformity );

// structs

struct OutputStruct {
  @location(0) color: vec4<f32>
};
var<private> output : OutputStruct;

// uniforms


// codes
fn testColor (  ) -> vec4<f32> {
  return ( vec4<f32>( 1.0, 1.0, 1.0, 1.0 ) * object.tint );
}

@fragment
fn main(  ) -> OutputStruct {
  // vars
  // flow
  // code
  // result
  output.color = testColor(  );
  return output;
}

Live example

N/A

Screenshots

No response

Version

three 0.177.0

Device

No response

Browser

No response

OS

No response

[linbingquan]

I couldn't reproduce it. Could you please provide the code.

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.177.0/build/three.webgpu.js",
			"three/tsl": "https://unpkg.com/three@0.177.0/build/three.tsl.js",
			"three/webgl": "https://unpkg.com/three@0.177.0/build/three.module.js",
			"three/webgpu": "https://unpkg.com/three@0.177.0/build/three.webgpu.js",
			"three/addons/": "https://unpkg.com/three@0.177.0/examples/jsm/"
		}
	}
</script>

<script type="module">

	import { Fn, uniform, vec4 } from 'three/tsl'
	import { BoxGeometry, Mesh, MeshBasicNodeMaterial, PerspectiveCamera, Scene, WebGPURenderer } from 'three/webgpu'

	const renderer = new WebGPURenderer({ forceWebGL: true })
	renderer.setPixelRatio(window.devicePixelRatio)
	renderer.setSize(window.innerWidth, window.innerHeight)
	document.body.appendChild(renderer.domElement)

	const scene = new Scene()
	const camera = new PerspectiveCamera(50, window.innerWidth / window.innerHeight)
	camera.position.set(3, 3, 3)
	camera.lookAt(0, 0, 0)

	const testColor = Fn(() => {
		const tint = uniform(vec4(1,0,0,1)).label('tint');
		return vec4(1, 1, 1, 1).mul(tint);
	}).setLayout({
		name: 'testColor', type: 'vec4',
		inputs: [],
	});

	const geometry = new BoxGeometry()
	const material = new MeshBasicNodeMaterial()
	material.fragmentNode = testColor()

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

	renderer.render(scene, camera)

	console.log(await renderer.debug.getShaderAsync(scene, camera, mesh))

</script>

[mdevecka]

Your example is indeed working.
My setup is quite complicated but I have noticed that if I move the function from global scope to local function the error goes away.
So it's probably some setup / timing issue.
I'll try to investigate a little bit more.
Otherwise we might just close this one.

[mdevecka]

UPDATE
The error occurs when you try to create second mesh + material and using the same TSL function.
The error goes away if setLayout is not used.

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.177.0/build/three.webgpu.js",
			"three/tsl": "https://unpkg.com/three@0.177.0/build/three.tsl.js",
			"three/webgl": "https://unpkg.com/three@0.177.0/build/three.module.js",
			"three/webgpu": "https://unpkg.com/three@0.177.0/build/three.webgpu.js",
			"three/addons/": "https://unpkg.com/three@0.177.0/examples/jsm/"
		}
	}
</script>

<script type="module">

	import { Fn, uniform, vec4 } from 'three/tsl'
	import { BoxGeometry, Mesh, MeshBasicNodeMaterial, PerspectiveCamera, Scene, WebGPURenderer } from 'three/webgpu'

	const renderer = new WebGPURenderer({ forceWebGL: true })
	renderer.setPixelRatio(window.devicePixelRatio)
	renderer.setSize(window.innerWidth, window.innerHeight)
	document.body.appendChild(renderer.domElement)

	const scene = new Scene()
	const camera = new PerspectiveCamera(50, window.innerWidth / window.innerHeight)
	camera.position.set(3, 3, 3)
	camera.lookAt(0, 0, 0)

	const testColor = Fn(() => {
		const tint = uniform(vec4(1,0,0,1)).label('tint');
		return vec4(1, 1, 1, 1).mul(tint);
	}).setLayout({
		name: 'testColor', type: 'vec4',
		inputs: [],
	});

	const geometry = new BoxGeometry()
	const material = new MeshBasicNodeMaterial()
	material.fragmentNode = testColor()

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

        // second cube
	const geometry2 = new BoxGeometry()
	const material2 = new MeshBasicNodeMaterial()
	material2.fragmentNode = testColor()

	const mesh2 = new Mesh(geometry2, material2)
	scene.add(mesh2)

	renderer.render(scene, camera)

	console.log(await renderer.debug.getShaderAsync(scene, camera, mesh))

</script>