How to have different colors/textures on bottom and top side of a Plane?

@hofk
I follow @pailhead’s suggestion: Instancing + selective bloom
So I simply use uniforms by reference.
It makes things simplier.

If I have

var uniforms = {
  time: {value: 0}
}

...

mat.onBeforeCompile = shader => {
  shader.uniforms.time = uniforms.time;
  ...
}

// and then in the animation loop
...
  uniforms.time.value = clock.getElapsedTime();

I don’t need to check in my animation loop, if uniforms.time exists or defined.

Whereas pushing uniforms from .onBeforeCompile() makes things messy/complicated.

var shaderMaterial;

...
mat.onBeforeCompile = shader => {
  shader.uniforms.time = {value: 0};
  ...
  shaderMaterial = shader;
}

// in the animation loop
  if (shaderMaterial) { // without this check you'll get an error message that object is undefined
    shaderMaterial.uniforms.time.value = clock.getElapsedTime();
  }

and you can’t access uniforms from material itself, like so:

// in the animation loop
  mat.uniforms.time.value = clock.getElapsedTime(); // causes error

Also good to use this addon from @Fyrestar : Chainable onBeforeCompile + Uniforms access (per Mesh)

3 Likes