TSL: WGSL compiler error when layout is used, GLSL is OK

[boytchev]

Description

While trying to set the layout of a large TSL function to avoid its multiple inlining (and reduce TSL compilation time) the generated code for WGSL is incomplete, but for GLSL is working fine. If the layout is removed, both WGSL and GLSL work, but there are several copies of the compiled function.

The error message is about unresolved values for some of the predefined TSL variables.

A minimal function that generates the error:

var foo = Fn( () => { return positionGeometry; }, { return: "vec3" } );

The function is used like this:

var material = new MeshBasicNodeMaterial({ positionNode: foo() });

For this function, the error message is:

Error while parsing WGSL: :37:9 error: unresolved value 'position'
  return position;
         ^^^^^^^^
 While calling [Device].CreateShaderModule([ShaderModuleDescriptor ""vertex""]).

After further experiments, these are some possible ways to avoid the error, but none of them is good:

• removing layout -- results in duplicate compilation of the function
• using fallback -- results in slower execution of the function
• using release 0.0.174 -- other parts of the original function fail to compile

Reproduction steps

1. Run the live example https://codepen.io/boytchev/pen/myeVXVg?editors=0011 from a WebGPU enabled browser and check the error message in the JavaScript console (not the codepen.io's console)
2. In line 17 change forceWebGL: false to forceWebGL: !false and rerun the code -> there is no error message
3. Revert back line 17, remove the layout in line 23 from }, { return: "vec3" } to }, and rerun the code -> there is no error message

Code

import * as THREE from "three";
import * as TSL from "three/tsl";

var renderer = new THREE.WebGPURenderer({ forceWebGL: false }),
    scene = new THREE.Scene(),
    camera = new THREE.PerspectiveCamera();

var foo = TSL.Fn( () => {
        return TSL.positionGeometry;
    }, { return: "vec3" }
);

var geometry = new THREE.BoxGeometry(),
    material = new THREE.MeshBasicNodeMaterial({ positionNode: foo() }),
    box = new THREE.Mesh(geometry, material);

scene.add(box);

renderer.renderAsync(scene, camera);

Live example

https://codepen.io/boytchev/pen/myeVXVg?editors=0010

Screenshots

Version

0.0.178

Device

Desktop

Browser

Chrome

OS

Windows

[sunag]

This feature may take a while, it would be better to use function parameters for now. e.g:

const foo = Fn( ( { positionGeometry } ) => ... )

material.positionNode = foo( { positionGeometry } );