v1.1.41

README.md

@@ -116,7 +116,13 @@ import { useFluid } from "@funtech-inc/use-shader-fx";
 
 export const Home = () => {
    const { size } = useThree();
-   const [updateFluid, , { output }] = useFluid({ size, dpr: 1 });
+   const [updateFluid, , { output }] = useFluid({
+      size: {
+         width: size.width,
+         height: size.height,
+      },
+      dpr: 1,
+   });
    useFrame((rootState) => updateFluid(rootState));
    return (
       <mesh>

app/ShaderFx.tsx

@@ -54,7 +54,7 @@ export const ShaderFx = ({
                   setDpr(Math.round((0.5 + 1.5 * factor) * 10) / 10);
                }}>
                {children}
-               {/* <Perf position={"bottom-left"} minimal={false} /> */}
+               <Perf position={"bottom-left"} minimal={false} />
             </PerformanceMonitor>
          </Canvas>
       </Suspense>

app/_home/Playground.tsx

@@ -97,7 +97,10 @@ export const Playground = ({
       dpr: viewport.dpr,
    });
    const [updateBlank, _, { output: blank }] = useBlank({
-      size,
+      size: {
+         width: size.width,
+         height: size.height,
+      },
       dpr: viewport.dpr,
       onBeforeInit: useCallback((params: OnBeforeInitParameters) => {
          Object.assign(params.uniforms, {

app/useWobble3D/Playground.tsx

@@ -102,11 +102,14 @@ export const Playground = () => {
       baseMaterial: THREE.MeshPhysicalMaterial,
       materialParameters: MATERIAL_CONFIG,
       isCustomTransmission: true,
-      onBeforeInit: (params) => {
-         console.log(params);
-      },
+      depth: true,
+      // onBeforeInit: (params) => {
+      //    console.log(params);
+      // },
    });
-   wobble.mesh.customDepthMaterial = wobble.depthMaterial;
+   if (wobble.depthMaterial) {
+      wobble.mesh.customDepthMaterial = wobble.depthMaterial;
+   }
    wobble.mesh.receiveShadow = true;
    wobble.mesh.castShadow = true;