Problem with effect composer on grouped mesh

theres a weird unexpected effect with effect composer a my grouped mesh - the card
this how its supposed to be or is normally
ezgif.com-optimize

and heres how it looks with effect composer (it seems to do this regardless of the effect i put…):
ezgif.com-optimize (1)

heres the code for the grouped mesh:


export default function Card(props) {
  const ref = useRef();
  useFrame((_, delta) => {
    ref.current.rotation.y += 0.5 * delta;
  });

  function CardZf() {
    const [tex1] = useTexture(["../img/pp3front.jpg"]);

    return (
      <mesh>
        <planeGeometry args={[8, 12]} />
        <meshStandardMaterial map={tex1} transparent={true} />
      </mesh>
    );
  }

  function CardZb() {
    const [tex1] = useTexture(["../img/joshpx2.jpg"]);

    return (
      <mesh>
        <boxGeometry args={[8, 12, 0.1]} />
        <meshStandardMaterial side={BackSide} transparent={true} map={tex1} />
      </mesh>
    );
  }

  return (
    <group {...props} rotation={[0, 0, 0.4]} ref={ref}>
      <CardZf />
      <CardZb />
    </group>
  );
}

and for the canvas:

function Scene() {
  return (
    <div id="canvas">
      <Suspense>
        <Canvas
          resize={{ debounce: 0 }}
          gl={{ antialias: true }}
          performance={{ current: 1, min: 0.1, max: 1 }}
          // frameloop="demand"
          camera={{ fov: 45, position: [0, 0, 47] }}
        >
          <OrbitControls
            enablePan={false}
            enableRotate={false}
            // autoRotate={true}
            enableZoom={false}
          />
          <Lights />
          <Suspense fallback={null}>
            {/* <mesh>
              <RoundedBox args={[60,40,2]} transparent={true}/>
              <MeshPortalMaterial></MeshPortalMaterial>
            </mesh> */}
            <Card />
            {/* <Zcage /> */}
            <Handz />
            <LayerA />
            <LayerB />
          </Suspense>
          <EffectComposer autoClear={true}>
            <Glitch
              delay={[7.5, 8.5]} // min and max glitch delay
              duration={[0.2, 1.0]} // min and max glitch duration
              strength={[0.05, 1.5]} // min and max glitch strength
              mode={GlitchMode.SPORADIC} // glitch mode
              active // turn on/off the effect (switches between "mode" prop and GlitchMode.DISABLED)
              ratio={0.35}
            />
          </EffectComposer>
          <Preload all />
          {/* <Perf /> */}
        </Canvas>
      </Suspense>
    </div>
  );
}

Not too sure why this is happening im new to using effect composer can anyone help?

it looks like a floating point problem. try making near/far more narrow to get more dynamic range.

1 Like

The near or far in the camera settings? If so I will give that a try :+1:t4:

your right it works thanks alot side note if you get to read this is Blendedfunction.ADD deprecated by chance? all the other blended function options work fine but not that one for me…

not that i know of, but you might want to cross check with the postpro library to see if it has been.

1 Like

ok it seems to make my scene disappear if i do blendfunction.add on noise its fine everywhere else thostrange thank you for all the help tho