Render different effects for different meshes.

[Dalejan]

Hi folks!
I have been trying to render 2 objects with differents effects for each one (Bloom pass and Filter Pass). Im aware that threejs allow the use of layers and those layers can be seen by the camera, so meshes that are on certain layers can be filtered of the scene.

So this is what i have tried to code:

Inside my Effects Component i enable layers 1 and 2 of the camera:

camera.layers.enable(1);
camera.layers.enable(2);
On the useEffect Hook i set size for each of the composer refs:

  useEffect(() => {
    composer.current.setSize(size.width, size.height);
    sunComposer.current.setSize(size.width, size.height);
  }, [size, gl]);

Inside one effectComposer 'composer' i render the Filter Pass:

<effectComposer ref={composer} args={[gl]}>
        <renderPass attachArray="passes" scene={scene} camera={camera} />
        <filmPass
          attachArray="passes"
          args={[noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale]}
        />
</effectComposer>

And i build another composer to render the Bloom Pass:

<effectComposer ref={sunComposer} args={[gl]}>
        <renderPass attachArray="passes" scene={scene} camera={camera} />
        <unrealBloomPass
          attachArray="passes"
          args={[aspect, strength, radius, threshold]}
        />
</effectComposer>

Finally i do update the camera render layer on the useFrame Hook:

  useFrame(() => {
    camera.layers.set(1);
    composer.current.render();
    camera.layers.set(2);
    sunComposer.current.render();
  }, 1);

And in two different meshes i set the layers property just like this:

....
 <mesh ref={obj1} layers={1}>
    ....
 </mesh>
 <mesh ref={obj2} layers={2}>
    ....
 </mesh>

This did not worked. So i also cleared and depth cleared the renderer, thinking that for each frame it would re take the composers and render them to each layer:

  useFrame(() => {
    gl.autoClear = false;
    gl.clear();
    camera.layers.set(1);
    composer.current.render();
    gl.clearDepth();
    camera.layers.set(2);
    sunComposer.current.render();
  }, 1);

Didnt worked ...
If anyone could help me with this it would be soo great, i dont know what else i can do to achieve selective effects render.

Note: The camera appears to stay on the 0 layer, i can notice this because if i set the layers property of a light to a different layer the camera does not render the light.

[dangrabcad]

You can't set the layers property like this:

 <mesh ref={obj1} layers={1}>

because it isn't a number, it's a THREE.Layers object. Instead, set it like this:

 <mesh ref={obj1} layers-mask={1}>

This sets the bitmask directly, so if you pass the value 3, you get the first two layers (because 3 = 1 | 2).

I'd suggest trying to get it working with just one effect, and then when that's working, try only the second effect. Only when they're both working independently, rendering only the objects you want, should you try to use them both together. It'll be much easier to debug that way.

[drcmda]

imo <mesh layers={1} is fine. leyers has a set method, so it would do .set(1) internally, similar to colors, vectors, etc.

[njm222]

@Dalejan
I was struggling with this a few weeks ago. I was just missing some props on the effect composer and had issues with blending.

Your render loop should look something like this:

useFrame(() => {
    camera.layers.set(1);
    bloomComposer.current.render();
    gl.clearDepth();
    camera.layers.set(0);
    composer.current.render();
    gl.clearDepth();
  }, 1);

and your effects:

      <effectComposer ref={bloomComposer} args={[gl, bloomRenderTarget]} renderToScreen={false}>
        <renderPass attachArray="passes" args={[scene, camera]} />
        <unrealBloomPass
          attachArray="passes"
          args={[undefined, 0.8, 0, 0.85]}
          needsSwap={false}
        />
      </effectComposer>
      <effectComposer ref={composer} args={[gl]}>
        <renderPass attachArray="passes" args={[scene, camera]} />
        <shaderPass
          attachArray="passes"
          args={[BlendingShader]}
          uniforms-tAdd-value={bloomComposer.current ? bloomComposer.current.renderTarget2.texture : ''}
        />
       <filmPass
          attachArray="passes"
          args={[noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale]}
        />
      </effectComposer>

finally the BlendingShader will change depending on how you want to blend the effects. This section might be helpful:
https://www.khronos.org/opengl/wiki/Blending#Blend_Equations