Where can I find my material parameters in a node material so that I can change them?

Questions
1

I’ve made very good progress with the 3js material nodesystem for the last two days. Now I’ve encountered a new obstacle.

If I clone a material in webgl, its parameters such as the uniforms are also cloned and I can then safely change them in isolation from other objects that also use the same material, because each object has its own material clone with its cloned parameters. Here’s an example:

const uniform = {
   time: {value: 0}
}

const material = new THREE.RawShaderMaterial({
   glslVersion: THREE.GLSL3,
   uniforms: uniform,
   vertexShader: VS,			
   fragmentShader: FS
});

const geometry = new THREE.BoxGeometry();
this.mesh1 = new THREE.Mesh(geometry, material.clone());
this.scene.add(this.mesh1);

const geometry = new THREE.BoxGeometry();
this.mesh2 = new THREE.Mesh(geometry, material.clone());
this.scene.add(this.mesh2);

If I now want to change the uniform, I simply do it like this:

//in the update method
this.mesh1.material.uniforms.time.value = newtime;

mesh2 is unaffected by the change in mesh1, as it should be.

Now I want to implement the same in webgpu with the 3js node system. My code looks like this:

this.wgslShaderParams = {
   vTex: texture( vertexTexture ),
   vTex_sampler: texture( vertexTexture ),
   uv: uv(),
   time: uniform(0),
   position: attribute('position')
}

const material = new MeshBasicNodeMaterial();
material.colorNode = getWGSLTextureSample(this.wgslShaderParams);
	
const geometry = new THREE.BoxGeometry();
this.cube = new THREE.Mesh(geometry, material.clone());
this.scene_.add(this.cube);

//in the update method
this.wgslShaderParams.time.value += this.dt;

My problem here is I am changing a global parameter set “this.wgslShaderParams”.
But I do not want that. According to my idea, all parameters must be found somewhere in the cloned node material itself, just like in the webgl solution as cloned parameters so that I can then change everything in isolation. I just don’t know where to find my parameters (vTex, vTex_sampler, uv, time, position) in the cloned node material.

this.cube.material. ??? .time.value += this.dt;

I guess this is the last part I’m missing to be able to convert my webgl apps to webgpu apps.

For the sake of completeness here is my wgls function. This is not necessary for my question, but maybe someone is interested or it helps to create your own wgsl functions.

// WGSL function
const getWGSLTextureSample = wgslFn(`
   fn getWGSLTextureSample( 
      vTex: texture_2d<f32>, 
      vTex_sampler: sampler,
      uv: vec2<f32>,
      position: vec3<f32>
   ) -> vec4<f32> {

      var idx: i32 = 100; //test

      var texSize: vec2<u32> = textureDimensions(vTex, 0);
      var texHeight: u32 = texSize.y; 
      var texWidth: u32 = texSize.x;
      var colIdx: u32 = u32(floor(f32(idx) / f32(texWidth)));
      var rowIdx: u32 = u32(f32(idx) % f32(texHeight));
      var texelCoord: vec2<f32> = vec2<f32>(f32(rowIdx)/f32(texHeight), f32(colIdx)/f32(texWidth));
      var vPosition: vec3<f32> = textureSample( vTex, vTex_sampler, texelCoord ).rgb;
   		
      return vec4<f32>( position, 1.0 );   //test
   }
`);
2

I found it using Object.keys:

this.cube.material.colorNode.parameters.time.value += this.dt;
1 Like