Causes different Render Effect.

[Azure-Phoenix]

Hi! This Fluid is a great library! But I found an issue while using this.

import { Suspense } from "react";
import * as THREE from "three";

import { Canvas, useLoader } from "@react-three/fiber";

import { PerspectiveCamera } from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

import { Fluid } from "@whatisjery/react-fluid-distortion";
import { EffectComposer } from "@react-three/postprocessing";

import CanvasLoader from "../../../components/three.js/CanvasLoader";
import HeroCamera from "../../../components/three.js/HeroCamera";

const Hand = () => {
  const handModel = useLoader(GLTFLoader, "models/untitled.glb", (loader) => {
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("/draco/");
    loader.setDRACOLoader(dracoLoader);
  });

  return (
    <div className="w-full h-full inset-0 fixed">
      <Canvas className="w-full h-full">
        <EffectComposer>
          <Fluid />
          <Suspense fallback={<CanvasLoader />}>
            <PerspectiveCamera makeDefault position={[0, 0, 30]} />
            <HeroCamera>
              {/* <axesHelper args={[5]} /> */}
              <primitive object={handModel.scene} scale={2} />
            </HeroCamera>
            <ambientLight intensity={10} />
          </Suspense>
        </EffectComposer>
      </Canvas>
    </div>
  );
};

export default Hand;

Here, as you can see, without Fluid, my gradient transparent arm looks fine, but with Fluid, it looks awful. What is the issue here? Could you help me with this?

https://github.com/user-attachments/assets/818453f1-9895-4a51-bc71-f7abf690884d

[Azure-Phoenix]

I just found what makes this issue here. That's showBackground props. If I set it as false, gradient works fine. But I really need to show background. How to fix this issue? @whatisjery

https://github.com/user-attachments/assets/49ddf2e5-5953-421c-bb03-1e74f383cf16

[whatisjery]

Have you tried moving the Suspense block outside EffectComposer? It should only be used to render post processing effects.

[Azure-Phoenix]

Thanks for your reply first of all!!

Have you tried moving the Suspense block outside EffectComposer? It should only be used to render post processing effects.

Yeah, I have tried just now. But.. nothing changes..

[Azure-Phoenix]

https://drive.google.com/file/d/1BKJXrLP8HEu6VpfVADVw3FC6JrsVPjR6/view?usp=sharing

This is just that model file. As I said before, when I set showBackground as false, it works fine. But not good when I set it as true. I think it's due to some different renderer settings between true and false of showBackground. But I have no clue what is different..