Understanding building / accessing a material map in an abstract way inside a Fn function without passing an argument

[Samsy]

Description

As far as my understanding goes :

Assigning a pre-computed Fn into a node like colorNode then to a bunch of materials reduces dramatically the building time of a node per material since it's been " pre-computed "

Like :

export const colorNode = Fn( ([color] ) => {
  
  var c = materialColor.toVar();

  c.r.assign(0.0);

  return c;
})()

material.colorNode = colorNode
material2.colorNode = colorNode
material3.colorNode = colorNode

etc..

Assigning a non computed Fn into a node, increases building time X materials required to be built :

Fiddle example

export const textureNode = /*#__PURE__*/ Fn( ( [uu, map ]  ) => {
  
  var coord0 = uu.toVar();
  coord0.x.addAssign(-0.1)

  var coord1 = uu.toVar();

  var coord2 = uu.toVar();
  coord2.x.addAssign(0.1)

  var c  = texture( map, coord0 ).toVar()

  var c2 = texture( map, coord1 ).toVar()

  var c3 = texture( map, coord2 ).toVar()

  var final = vec4( c.r, c2.g, c3.b, 1.0 );

  return final;
})


material.colorNode = textureNode( uv(), material.map ); 

I've got a use-case here where in which I build for example a RGB shift colorNode
That takes in a texture as arg of a Fn

My question is, how can I build this node so it can be pre-computed once ? and re-usable by any material that has any maps ?

The material is the same for all the meshes in the scene, and would just need to assign a pre-computed Fn into the colorNode directly, but unfortunately, on build time it goes through an expensive builder for first render as it need to re-build the node for each, even though this is the same one

Is there a way to access the material.map but in an abstract way without passing it to the Fn argurment, but more as a reference like the materialColor etc.. but like materialMap ?

[sunag]

The idea would be to share the same material with different uniforms, but you are having difficulties doing it with the textures, would that be it?

[Samsy]

I guess yes, how would you specify that two meshes are using the same material but different uniforms on build time ?

[Makio64]

I reach the same problems while doing new meshlines this weekend and had the same performance node building issue .

I just did a manual material versions cache but it feels sub-optimal ( in my case it was dashes / colors / gradient / map / etc.. )

[sunag]

I think the ideal is to use uniform events for this.

// the onObjectUpdate() event will be called every time a mesh is rendered, 
// thus updating the value according to the material.map used by the mesh.

const mapUniform = texture( builder.material.map ).onObjectUpdate( ( frame ) => frame.material.map );

Example

const textureNode = /*#__PURE__*/ Fn( ( [ uu ], builder ) => {

   const mapUniform = texture( builder.material.map ).onObjectUpdate( ( frame ) => frame.material.map );

   const coord0 = uu.toVar();
   coord0.x.addAssign( - 0.1 );

   const coord1 = uu.toVar();

   const coord2 = uu.toVar();
   coord2.x.addAssign( 0.1 );

   const c = mapUniform.sample( coord0 ).toVar()

   const c2 = mapUniform.sample( coord1 ).toVar()

   const c3 = mapUniform.sample( coord2 ).toVar()

   const final = vec4( c.r, c2.g, c3.b, 1.0 );

   return final;

} );

// precomputed function
const textureNodeCall = textureNode( uv() );

[sunag]

We can also follow these new approaches. #31190

[Samsy]

@sunag

Here I updated the jsfiddle with your suggestion => uniform event

And turned the node to be a pre-computed one

Modified live link

Not certain what is not working here

[sunag]

I used map.sample() but you can replace one line to work after uniformTexture() PR.

const map = uniformTexture( builder.material.map ).onObjectUpdate( ( frame ) => frame.material.map );

https://jsfiddle.net/f7L1cgt9/1/