Better var naming for generated WGSL?

Questions
, , ,
1

I’m trying to debug/learn, and inspecting things such as the output WGSL code from WebGPURenderer, and I see shader code like this,

Screenshot 2025-12-18 at 10.47.34 PM
Screenshot 2025-12-18 at 10.47.34 PM1572×752 68.7 KB

This makes me wonder if there is some way to generate the code with human readable naming, to make it easier to understand the output code.

Is there? I see some nodes have .name properties. Can we perhaps more liberally output names into the vars? (f.e. nodeVar7 becomes someName_nodeVar7)

1 Like
2

I’ve been there. I think what’s needed are better debug tools.

For example, there can be a verbose generation mode which would insert comments into the emitted code, allowing you to figure out what’s what better.

Second thing that would be welcome is some kind of a source map perhaps. Not sure exactly what that would look like though, since the true source is JS, but there could be some kind of a mock node representation, similar to what JS looks like, to the best of compiler’s ability.

The reason why variables look that way, and arguably should continue to look that way, is because they are treated as infinite registers, there is no inherent meaning to them at that point.

For example, consider the following line:

y = ( a + b ) / (c - d);

a,b,c,d, and y make sense to us as programmers, but what the CPU will eventually see is something like:

$1 = a + b
$2 = c - d
$3 = $1 / $2
y = $3

I hope to impress that $1 and $2 have no inherent meaning to us. We could name them, but we didn’t, and any attempt by the compiler to name them would be largely meaningless.

When generating code there’s a contention between readability for humans and readability for the machine. The code in your screenshot has pretty good machine readability, but yeah - for humans it’s garbage.

2 Likes
3

You can name vars this way.

const p = positionLocal.toVar('leet')

Example : SBEDIT:1337

outputs

@fragment
fn main( @location( 2 ) positionLocal : vec3<f32> ) -> OutputStruct {

	// vars
	
	var leet : vec3<f32>;


	// flow
	// code

	leet = positionLocal;
	leet = ( leet * vec3<f32>( 5.0 ) );
	leet = ( fract( leet ) - vec3<f32>( 0.5 ) );
	leet = vec3<f32>( length( leet ) );
	leet = sin( ( ( leet * vec3<f32>( 10.0 ) ) + vec3<f32>( render.nodeUniform0 ) ) );
	leet = abs( leet );
	leet = step( vec3<f32>( 0.5 ), leet );

	// result

	output.color = vec4<f32>( leet, 1.0 );

	return output;

}

image

4 Likes