Selective SSR on planes

Questions
,
1

Hey here !
Hope you are doing well,

I’m trying to get a mirror-like effect on the floor for my scene.

(i’m working with React Three Fiber actually), i’m using effect composer to use the SSR effect, and so, having a floor that will mirror the lights and the objects on my scene. But the problem is, my objects also get the light. They also have the mirror effect but I don’t want it. They are planeBufferGeometry, with custom shaderMaterial.

I tried with some attributes like receiveShadows, but not working.

I’m maybe searching for a way to select only the meshes on which I want the effect to apply. I saw that in ThreeJS, there is something like “selects” for SSR Pass

For some code, here is the global Effect Composer

        <EffectComposer disableNormalPass autoClear={true} multisampling={0}>
          {hovered < 6 && <GodRays ref={god} sun={itemsRef.current[hovered]} density={0.4} weight={0.4} exposure={0.4} decay={0.8} blur />}
          <Bloom luminanceThreshold={0} mipmapBlur luminanceSmoothing={0.0} intensity={0.3} />
          <SSR />
          <FXAA />
        </EffectComposer>

here is the effect of R3F that work well to create the mirror effect

        <ContactShadows resolution={1024} frames={1} position={[0, -1, 0]} scale={15} blur={0.5} opacity={1} far={20} />

here is one of my mesh

          <mesh position={[0, 0, 0.1]}
            ref={el => itemsRef.current[i] = el}
            transparent={true}
            <planeBufferGeometry attach="geometry" args={[3.1 * 1.3, 10 * 1.3, 100, 100]}/>
            <imageFadeMaterial ref={shaderRef} attach="material" tex1={tex1} tex2={tex2} transparent={false} colorSpace={THREE.SRGBColorSpace}/>
          </mesh>

Thank you all ! Have a great day !

1 Like
2

I’m going to up that

3

I guess the correct approach should be using <Selection> and <Select> components like explained here: React Postprocessing Documentation

However, I often had issues with those. Let me know if you manage to make it work!

4

Hi !

Thanks for your reply !

I just have the time to test it quickly, it may works in some case, but in mine,
I have multiple objects that I want to have “Godrays”, and another one that I want to have “SSR reflection”, but in the case of

5

Godrays effect does not seem to use Selection api so you should be able to make it work I think. What’s your issue? Unfortunately your message was truncated as you need to wrap <Select> with backticks ` to avoid it being parsed as HTML :smile:

In case you want to mix 2 postprocessing effects that rely on Selection API I think you would need to create a namespaced version starting from react-postprocessing/src/Selection.tsx at 29fda1b9d5f3ecfb5a5aa8b376569cc96aea2588 · pmndrs/react-postprocessing · GitHub
I imagine something like:

<>
  <Select enabled for="SSR">
    <mesh />
    <mesh />
  </Select>
  <Select enabled for="Godrays">
    <mesh />
  </Select>
</>

But in this case you would need to update the postprocessing effects as well.