Automatic initialization and updates of standard matrices in wgslFn and tslFn analogous to RawShaders in webGL

[Spiri0]

Description

In webGL you only need to declare the standard matrices in a RawShader, but you don't have to initialize or update them by yourself using the uniforms. Threejs does this automatically. I have two simple shaders here as an example in webGL and webGPU. The four standard matrices can be seen in both.

//rawShader glsl shader
const vertexShader = `
	precision highp float;
	
	uniform mat4 viewMatrix;	
	uniform mat4 modelMatrix;
	uniform mat4 projectionMatrix;
	uniform mat4 modelViewMatrix;
			
	in vec3 position;
	
	void main(){
		gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);			
	}
`;

//vertexNode wgsl shader
const vertexShader = wgslFn(`
fn mainFunction(
	position: vec3<f32>,
	viewMatrix: mat4x4<f32>,
	modelMatrix: mat4x4<f32>,
	projectionMatrix: mat4x4<f32>,
	modelViewMatrix: mat4x4<f32>,
) -> vec4<f32> {
     
	return projectionMatrix * viewMatrix * modelMatrix * vec4<f32>(position, 1.0);
}`);

For the wgslFn and tslFn you have to initialize and update these four matrices yourself. It would be nice if this would also happen automatically like in a RawShader, because the effort can be considerable if you have to do it yourself with a more complex app

Solution

The solution is to adopt the functionality of threejs for the rawShaders from webGL into the wgslFn and tslFn.

Alternatives

At the moment this can be done through manual initialization and updates via the material parameters of a MeshBasicNodeMaterial.

Additional context

No response

[Spiri0]

I found a manual way to do this, but it's pretty complicated and not practical for the average user. The problem is the modelMatrix because it is usually different for one material but different meshes. Threejs seems to create its own material instance internally in webgl for each mesh in order to be able to use the individual modelMatrix.
I was able to solve this with attributes in webgpu and then calculate the individual modelMatrix in the shader, but that is very laborious.
That this is done automatically in webgl by threejs by just declaring the matrices is a huge relief. I didn't think this would be such a complex topic, but it certainly is.