Merge pull request #27 from takuma-hmng8/#24-useDomSyncer

#24 use dom syncer

Author: takuma-hmng8

.storybook/constant.ts

@@ -1,5 +1,5 @@
 import * as THREE from "three";
 
 export const CONSTANT = {
-   imageResolution: new THREE.Vector2(1440, 1029),
+   textureResolution: new THREE.Vector2(1440, 1029),
 };

.storybook/stories/UseBrush.tsx

@@ -64,7 +64,7 @@ export const UseBrushWithTexture = (args: BrushParams) => {
 
    useFrame((props) => {
       const bgTexture = updateTransitionBg(props, {
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
       const fx = updateBrush(props, {

.storybook/stories/UseDuoTone.tsx

@@ -36,7 +36,7 @@ export const UseDuoTone = (args: DuoToneParams) => {
 
    useFrame((props) => {
       const bgTexture = updateTransitionBg(props, {
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
       const fx = updateDuoTone(props, {

.storybook/stories/UseFluid.tsx

@@ -73,7 +73,7 @@ export const UseFluidWithTexture = (args: FluidParams) => {
 
    useFrame((props) => {
       const bgTexture = updateTransitionBg(props, {
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
 

.storybook/stories/UseFogProjection.tsx

@@ -48,7 +48,7 @@ export const UseFogProjection = (args: FogProjectionParams) => {
 
    useFrame((props) => {
       const bgTexture = updateTransitionBg(props, {
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
       const noise = updateNoise(props);

.storybook/stories/UseRipple.tsx

@@ -69,7 +69,7 @@ export const UseRippleWithTexture = (args: RippleParams) => {
 
    useFrame((props) => {
       const bgTexture = updateTransitionBg(props, {
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
       const fx = updateRipple(props, setConfig());

.storybook/stories/UseTransitionBg.tsx

@@ -48,7 +48,7 @@ export const UseTransitionBg = (args: TransitionBgParams) => {
       const noise = updateNoise(props);
       const fx = updateTransitionBg(props, {
          noiseMap: noise,
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
          texture1: momo,
          ...setConfig(),

app/ShaderFx.tsx

@@ -4,11 +4,8 @@ import { Suspense, useState } from "react";
 import { Canvas } from "@react-three/fiber";
 import { Perf } from "r3f-perf";
 import { PerformanceMonitor } from "@react-three/drei";
-import { Demo } from "./_demo";
 
-// import CreateShaderFx from "@/CreateShaderFx";
-
-export const ShaderFx = () => {
+export const ShaderFx = ({ children }: { children: React.ReactNode }) => {
    const [dpr, setDpr] = useState(1.0);
    return (
       <Canvas dpr={dpr}>
@@ -18,10 +15,7 @@ export const ShaderFx = () => {
                console.log(`dpr:${dpr}`);
                setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
             }}>
-            <Suspense fallback={null}>
-               {/* When creating fx, please rewrite to CreateShaderFx */}
-               <Demo />
-            </Suspense>
+            <Suspense fallback={null}>{children}</Suspense>
             <Perf position={"bottom-left"} minimal={false} />
          </PerformanceMonitor>
       </Canvas>

app/_demo/config.ts renamed to app/_home/config.ts

@@ -15,7 +15,7 @@ import {
 
 extend({ FxTransparentMaterial });
 
-export const Demo = () => {
+export const Home = () => {
    const updateGUI = useGUI(setGUI);
    const mainShaderRef = useRef<FxTransparentMaterialProps>();
 
@@ -90,7 +90,7 @@ the simplest demo
 // import { useFrame, useThree } from "@react-three/fiber";
 // import { useFluid } from "@hmng8/use-shader-fx";
 
-// export const Demo = () => {
+// export const Home = () => {
 //    const ref = useRef<THREE.ShaderMaterial>(null);
 //    const size = useThree((state) => state.size);
 //    const dpr = useThree((state) => state.viewport.dpr);