diff --git a/app/examples/v2/FxMaterial.tsx b/app/examples/v2/FxMaterial.tsx
deleted file mode 100644
index df2cb704..00000000
--- a/app/examples/v2/FxMaterial.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as THREE from "three";
-import { shaderMaterial } from "@react-three/drei";
-
-declare global {
-   namespace JSX {
-      interface IntrinsicElements {
-         fxMaterial: any;
-      }
-   }
-}
-
-export type FxMaterialProps = {
-   u_blur: THREE.Texture;
-   u_gooey: THREE.Texture;
-   u_model: THREE.Texture;
-   u_noise?: THREE.Texture;
-   u_color0?: THREE.Color;
-   u_color1?: THREE.Color;
-};
-
-export const FxMaterial = shaderMaterial(
-   {
-      u_blur: new THREE.Texture(),
-      u_gooey: new THREE.Texture(),
-      u_model: new THREE.Texture(),
-      u_noise: new THREE.Texture(),
-      u_fluid: new THREE.Texture(),
-      u_color0: new THREE.Color(0xfa1bb1),
-      u_color1: new THREE.Color(0x4a96ec),
-   },
-
-   `
-		varying vec2 vUv;
-		void main() {
-			vUv = uv;
-			gl_Position = vec4(position, 1.0);
-		}
-	`,
-   `
-		precision highp float;
-		varying vec2 vUv;
-		uniform sampler2D u_blur;
-		uniform sampler2D u_gooey;
-		uniform sampler2D u_model;
-		uniform sampler2D u_noise;
-		uniform sampler2D u_fluid;
-		uniform vec3 u_color0;
-		uniform vec3 u_color1;
-
-		float rand(vec2 n) { 
-			return fract(sin(dot(n ,vec2(12.9898,78.233))) * 43758.5453);
-		}
-
-		//// params ////
-		
-		// グラデーション
-		float gradationColorFactor = 0.5; // color0に寄せるか、color1に寄せるか
-		float gradationGrainIntensity = -.02; // グラデーションに適用する粒子ノイズの強さ
-
-		// ブラー
-		float blurGrainIntensity = -0.16; // ブラーに加算する粒子ノイズの強さ
-		float blurGradationIntensity = 2.4; // ブラーに加算するグラデーションカラーの加算強度
-		
-		// ビネット
-		float vignetteStrength = .9; // 強度（0.0〜1.0）
-		float vignetteRadius = 0.5;  // 効果が始まる半径（0.0〜1.0）
-		
-		// グーイ
-		float gooeyAlphaContrast = 80.0;
-		float gooeyAlphaOffset = -20.0;
-		vec2 gooeyNoisePosition = vec2(0.3, 0.3);
-		vec2 gooeyNoiseIntensity = vec2(0.4, 0.4);
-
-		// 流体
-		float fluidIntensity = 0.08;
-
-		void main() {
-			vec2 uv = vUv;
-			float grain = rand(uv); // 0〜1
-
-			// 流体
-			vec4 fluid = texture2D(u_fluid, uv);
-			vec2 fluidUv = uv - fluid.rg * fluidIntensity;
-
-			// グラデーション
-			vec4 noise = texture2D(u_noise, fluidUv);
-			vec3 gradationColor = mix(u_color0, u_color1, length(noise.rg * fluidUv) + gradationColorFactor);
-			gradationColor += grain * gradationGrainIntensity;
-
-			// ブラー
-			vec4 blurColor = texture2D(u_blur,fluidUv);
-			blurColor.rgb += grain * blurGrainIntensity;
-			blurColor.rgb += gradationColor * blurGradationIntensity;
-
-			// ブラーとノイズを混ぜる		
-			vec3 mixedBlurColor = mix(gradationColor, blurColor.rgb, blurColor.r);
-			
-			// モデル
-			vec4 modelColor = texture2D(u_model,uv);
-			float gooeyAlpha = texture2D(u_gooey,uv).r;
-			vec3 mixedModelColor = mix(mixedBlurColor, vec3(0.), clamp(gooeyAlpha * gooeyAlphaContrast + gooeyAlphaOffset, 0., 1.));
-
-			// ビネット
-			vec2 position = fluidUv - .5;
-
-			position.x += (noise.g - gooeyNoisePosition.x) * gooeyNoiseIntensity.x;
-			position.y += (noise.g - gooeyNoisePosition.y) * gooeyNoiseIntensity.y;
-
-			float distance = length(position);
-			float vignette = smoothstep(vignetteRadius, vignetteRadius - 0.5, distance);
-			vignette = mix(1.0, vignette, vignetteStrength);
-
-			vec3 finalColor = mixedModelColor * vignette;
-	
-			// アウトプット
-			gl_FragColor = vec4(finalColor, 1.);
-
-		
-		}
-	`
-);
diff --git a/app/examples/v2/Playground.tsx b/app/examples/v2/Playground.tsx
deleted file mode 100644
index f60fe70f..00000000
--- a/app/examples/v2/Playground.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import {
-   useFrame,
-   useThree,
-   extend,
-   createPortal,
-   MeshProps,
-} from "@react-three/fiber";
-import {
-   useNoise,
-   useSingleFBO,
-   useGaussianBlur,
-   useFluid,
-} from "@/packages/use-shader-fx/src";
-import { FxMaterial } from "./FxMaterial";
-import { Float } from "@react-three/drei";
-
-extend({ FxMaterial });
-
-// ここをシングルトンでメソッド化する
-const newPosition = [
-   new THREE.Vector3(2, 1, -1),
-   new THREE.Vector3(-2, 2, 0),
-   new THREE.Vector3(1, 2, 2),
-];
-
-/** 円 */
-const Sphere = forwardRef<THREE.Mesh, MeshProps>((props, ref) => {
-   return (
-      <mesh ref={ref} {...props}>
-         <sphereGeometry args={[2, 32, 32]} />
-         <meshStandardMaterial />
-      </mesh>
-   );
-});
-
-export const Playground = () => {
-   const { size, viewport, camera } = useThree();
-
-   const [offscreenScene] = useState(() => new THREE.Scene());
-
-   const [renderTarget, updateRenderTarget] = useSingleFBO({
-      scene: offscreenScene,
-      camera,
-      size,
-      dpr: viewport.dpr,
-      depthBuffer: true,
-   });
-
-   const blur = useGaussianBlur({
-      size,
-      dpr: 0.2,
-      texture: {
-         src: renderTarget.texture,
-      },
-   });
-   blur.setValues({
-      radius: 24,
-   });
-
-   const gooey = useGaussianBlur({
-      size,
-      dpr: 1,
-      texture: {
-         src: renderTarget.texture,
-      },
-   });
-   gooey.setValues({
-      radius: 24,
-   });
-
-   const noise = useNoise({
-      size,
-      dpr: 0.1,
-   });
-   noise.setValues({
-      scale: 0.03,
-      timeStrength: 0.3,
-   });
-
-   const fluid = useFluid({
-      size,
-      dpr: 0.3,
-   });
-
-   const mesh0 = useRef<THREE.Mesh>(null);
-   const mesh1 = useRef<THREE.Mesh>(null);
-   const mesh2 = useRef<THREE.Mesh>(null);
-   const spheres = [mesh0, mesh1, mesh2];
-
-   // これもシングルトンでメソッド化
-   const lerpSpheresPosition = (
-      position: THREE.Vector3[],
-      alpha: number = 0.03
-   ) => {
-      spheres.forEach((sphere, i) => {
-         sphere.current!.position.lerp(position[i], alpha);
-      });
-   };
-
-   useFrame((state) => {
-      blur.render(state);
-      gooey.render(state);
-      noise.render(state);
-      fluid.render(state);
-      updateRenderTarget({ gl: state.gl });
-      // mesh0.current!.position.x -=
-      //    Math.sin(state.clock.getElapsedTime()) * 0.02;
-
-      // positionの設定
-      lerpSpheresPosition(newPosition);
-   });
-
-   return (
-      <>
-         <mesh>
-            <planeGeometry args={[2, 2]} />
-            <fxMaterial
-               u_blur={blur.texture}
-               u_gooey={gooey.texture}
-               u_model={renderTarget.texture}
-               u_noise={noise.texture}
-               u_fluid={fluid.texture}
-               key={FxMaterial.key}
-            />
-         </mesh>
-         {createPortal(
-            <>
-               <ambientLight intensity={2} />
-               <color attach="background" args={["#000000"]} />
-               <Float rotationIntensity={2} floatIntensity={2} speed={2}>
-                  <Sphere ref={mesh0} scale={1.2} position={[1, 0, 0]} />
-                  <Sphere ref={mesh1} scale={1} position={[2, 2, 0]} />
-                  <Sphere ref={mesh2} scale={0.5} position={[-2, -1, 0]} />
-               </Float>
-            </>,
-            offscreenScene
-         )}
-      </>
-   );
-};
-
-/*===============================================
-必要な機能
-1. マウスでカメラ視点の操作
-2. 数字を与えるとその数字でランダムで位置とカメラワークがlerpする的なの
-===============================================*/
diff --git a/app/examples/v2/page.tsx b/app/examples/v2/page.tsx
deleted file mode 100644
index a84dd222..00000000
--- a/app/examples/v2/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ShaderFx } from "../ShaderFx";
-import { Playground } from "./Playground";
-
-export default function Page() {
-   return (
-      <div
-         style={{
-            position: "fixed",
-            width: "100%",
-            height: "100svh",
-            pointerEvents: "none",
-         }}>
-         <ShaderFx isDprUpdate={false}>
-            <Playground />
-         </ShaderFx>
-      </div>
-   );
-}
diff --git a/app/examples/v2_distortion/Playground.tsx b/app/examples/v2_distortion/Playground.tsx
deleted file mode 100644
index 92f3b94e..00000000
--- a/app/examples/v2_distortion/Playground.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import { useFrame, useThree, extend } from "@react-three/fiber";
-import {
-   createFxMaterialImpl,
-   createBasicFxMaterialImpl,
-   FxMaterialImplValues,
-   BasicFxMaterialImplValues,
-   useRGBShift,
-   useDistortion,
-} from "@/packages/use-shader-fx/src";
-import { useTexture } from "@react-three/drei";
-import { useCoverTexture } from "@/packages/use-shader-fx/src/hooks/useCoverTexture";
-import { useNoise } from "@/packages/use-shader-fx/src";
-import { useMotionBlur } from "@/packages/use-shader-fx/src/hooks/blur/useMotionBlur";
-
-const FxMaterialImpl = createFxMaterialImpl({
-   fragmentShader: `
-	uniform sampler2D src;
-	void main() {      
-		vec4 oC = texture2D(src, vUv);            
-      gl_FragColor = oC;
-	}
-`,
-});
-const BasicFxMaterialImpl = createBasicFxMaterialImpl();
-
-extend({ FxMaterialImpl, BasicFxMaterialImpl });
-
-export const Playground = () => {
-   const { size, viewport, camera } = useThree();
-
-   const [app] = useTexture(["/dummy3.png"]);
-   // const [app] = useTexture(["/funkun.jpg"]);
-   // const [app] = useTexture(["/private//fv.png"]);
-
-   const coverTexture = useCoverTexture({
-      size,
-      dpr: 1,
-      src: app,
-      textureResolution: new THREE.Vector2(app.image.width, app.image.height),
-   });
-
-   const noise = useNoise({
-      size,
-      dpr: 1,
-      scale: 0.002,
-      timeStrength: 0.01,
-      timeOffset: 0,
-   });
-
-   const noise2 = useNoise({
-      size,
-      dpr: 1,
-      scale: 0.002,
-      timeStrength: 0.01,
-      timeOffset: 0.1,
-   });
-
-   const noise3 = useNoise({
-      size,
-      dpr: 1,
-      scale: 0.002,
-      timeStrength: 0.01,
-      timeOffset: 0.2,
-   });
-
-   const rgbShift = useRGBShift({
-      size,
-      dpr: 2,
-      shiftScale: 0.04,
-      shiftPower: new THREE.Vector2(2, 2),
-      shiftPowerSrcR: noise.texture,
-      shiftPowerSrcG: noise2.texture,
-      shiftPowerSrcB: noise3.texture,
-      isUseShiftPowerSrcR: true,
-      isUseShiftPowerSrcG: true,
-      isUseShiftPowerSrcB: true,
-      texture: {
-         src: coverTexture.texture,
-      },
-   });
-
-   const motionBlur = useMotionBlur({
-      size,
-      dpr: 1,
-      texture: {
-         src: rgbShift.texture,
-      },
-   });
-
-   const distortion = useDistortion({
-      size,
-      dpr: 1,
-      scale: new THREE.Vector2(0, 0.2),
-      freq: new THREE.Vector2(120, 1),
-      powNum: new THREE.Vector2(1, 1),
-      timeStrength: new THREE.Vector2(1.0, 1.0),
-      texture: {
-         src: motionBlur.texture,
-      },
-   });
-
-   useFrame((state) => {
-      coverTexture.render(state);
-      noise.render(state);
-      noise2.render(state);
-      noise3.render(state);
-      rgbShift.render(state);
-      motionBlur.render(state);
-      distortion.render(state);
-      // gbBur.render(state);
-   });
-
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={distortion.texture} />
-      </mesh>
-   );
-};
diff --git a/app/examples/v2_distortion/page.tsx b/app/examples/v2_distortion/page.tsx
deleted file mode 100644
index 6256d104..00000000
--- a/app/examples/v2_distortion/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ShaderFx } from "../ShaderFx";
-import { Playground } from "./Playground";
-import Image from "next/image";
-
-export default function Page() {
-   return (
-      <div
-         style={{
-            position: "fixed",
-            width: "100%",
-            height: "100svh",
-            pointerEvents: "none",
-         }}>
-         {/* <div
-            style={{
-               width: "400px",
-               height: "400px",
-               backgroundColor: "white",
-               position: "fixed",
-               inset: 0,
-               margin: "auto",
-               zIndex: 1000,
-               mixBlendMode: "hard-light",
-            }}>
-            <Image
-               priority
-               src="/momo.jpg"
-               alt=""
-               fill
-               sizes={"100%"}
-               style={{ objectFit: "cover" }}
-            />
-         </div> */}
-         <ShaderFx isDprUpdate={false}>
-            <Playground />
-         </ShaderFx>
-      </div>
-   );
-}
diff --git a/app/examples/v2_fxMaterials/Playground.tsx b/app/examples/v2_fxMaterials/Playground.tsx
deleted file mode 100644
index 6fcc76ad..00000000
--- a/app/examples/v2_fxMaterials/Playground.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client";
-
-import { useRef } from "react";
-import { useFrame, extend } from "@react-three/fiber";
-import {
-   NoiseMaterial,
-   NoiseMaterialProps,
-} from "@/packages/use-shader-fx/src";
-import { useTexture } from "@react-three/drei";
-
-extend({ NoiseMaterial });
-
-export const Playground = () => {
-   const ref = useRef<any>();
-   useFrame(({ clock }) => {
-      ref.current.tick = clock.getElapsedTime();
-   });
-   const [funkun] = useTexture(["/funkun.jpg"]);
-   return (
-      <>
-         <mesh>
-            <planeGeometry args={[2, 2]} />
-            <noiseMaterial
-               ref={ref}
-               mixDst_src={funkun}
-               mixDst_colorFactor={0.5}
-               scale={0.01}
-            />
-         </mesh>
-      </>
-   );
-};
-
-declare global {
-   namespace JSX {
-      interface IntrinsicElements {
-         noiseMaterial: NoiseMaterialProps &
-            JSX.IntrinsicElements["shaderMaterial"];
-      }
-   }
-}
diff --git a/app/examples/v2_fxMaterials/page.tsx b/app/examples/v2_fxMaterials/page.tsx
deleted file mode 100644
index cc9a6d74..00000000
--- a/app/examples/v2_fxMaterials/page.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ShaderFx } from "../ShaderFx";
-import { Playground } from "./Playground";
-import Image from "next/image";
-
-export default function Page() {
-   return (
-      <div
-         style={{
-            position: "fixed",
-            width: "100%",
-            height: "100svh",
-            pointerEvents: "none",
-         }}>
-         <div
-            style={{
-               width: "100px",
-               height: "100px",
-               backgroundColor: "white",
-               position: "fixed",
-               inset: 0,
-               margin: "auto",
-               zIndex: 1000,
-               mixBlendMode: "hard-light",
-            }}>
-            <Image src="/momo.jpg" alt="" fill style={{ objectFit: "cover" }} />
-         </div>
-         <ShaderFx isDprUpdate={false}>
-            <Playground />
-         </ShaderFx>
-      </div>
-   );
-}
diff --git a/app/examples/v2_grid/Playground.tsx b/app/examples/v2_grid/Playground.tsx
deleted file mode 100644
index 50791ce8..00000000
--- a/app/examples/v2_grid/Playground.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import { useEffect, useRef, useState } from "react";
-import { useFrame, useThree, extend, createPortal } from "@react-three/fiber";
-import {
-   useNoise,
-   NoiseValues,
-   useSingleFBO,
-   createFxMaterialImpl,
-   createBasicFxMaterialImpl,
-   FxMaterialImplValues,
-   BasicFxMaterialImplValues,
-   useFluid,
-} from "@/packages/use-shader-fx/src";
-import {
-   Float,
-   OrbitControls,
-   useTexture,
-   useVideoTexture,
-} from "@react-three/drei";
-/*===============================================
-idea of useGrid
-セルカラーの可能性
-- カラフル
-- テクスチャ
-- spriteテクスチャ
-- 単純なカラー指定
-- マッピングに使うテクスチャのカラーをそのままレンダリング
-- サイズ調整map
-- 円モード
-- サイズ変更チャンネル
-- カラー変更チャンネル
-- alpha変更チャンネル
-- カラーマップとかアルファマップ的なの加えて、陰影つけられるように。古文を3dモデルでなんかやる。
-- shuffleCenterを追加する
-MEMO * floorでgrid化するときは、Nearestにしないといけない
-
-機能整理
-- texture （SamplingFxMaterial）
-- cellTexture
-- spriteTexture
-
-===============================================*/
-
-const FxMaterialImpl = createFxMaterialImpl({
-   uniforms: {
-      celltxture: { value: null },
-      spriteTexture: { value: null },
-      time: { value: 0 },
-      pointer: { value: new THREE.Vector2(0.5, 0.5) },
-   },
-   fragmentShader: `
-	uniform sampler2D src;
-	uniform sampler2D celltxture;
-	uniform sampler2D spriteTexture;
-	uniform vec2 pointer;
-	uniform float time;
-
-	float u_lineWidth = .01; // 0.01 ~
-	vec2 u_gridCount = vec2(50.);
-	vec3 u_fillColor = vec3(.0, 1.0, 0.0);
-	vec3 u_backgroundColor = vec3(0.0, 0.0, 0.0);
-	vec3 u_gridColor = vec3(.2, .2, .2);
-	bool u_isEdge = false;
-	float shuffleFrequency = 5.0;
-	float shuffleRadius = 15.0;
-	float maxShuffle = 2.0;
-	
-	float rand(vec2 n) {
-		return fract(sin(dot(n ,vec2(12.9898,78.233))) * 43758.5453);
-	}
-	
-	// 2次元のセル座標からランダムな float を生成するハッシュ関数
-	float hash(vec2 p) {
-		return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
-	}
-
-	vec3 randomColor(float time) {
-		return 0.5 + 0.5 * sin(vec3(12.9898, 78.233, 45.164) * time);
-	}
-
-	// cellIndex を時間に応じてシャッフルする関数
-	vec2 shuffleIndex(vec2 cellIndex) {
-		// 1秒あたり frequency 回更新、離散化
-		float discreteTime = floor(time * shuffleFrequency);
-		
-		// cellIndex に基づく乱数を2種類生成
-		float r1 = hash(cellIndex + vec2(0.123, discreteTime));
-		float r2 = hash(cellIndex + vec2(0.789, discreteTime));
-		
-		// 乱数を使って -maxShuffle ～ +maxShuffle の整数オフセットを生成
-		float offsetX = floor(r1 * (maxShuffle * 2.0 + 1.0)) - maxShuffle;
-		float offsetY = floor(r2 * (maxShuffle * 2.0 + 1.0)) - maxShuffle;
-		vec2 offset = vec2(offsetX, offsetY);
-		
-		// center からの距離を計算（cellIndex と center は同じグリッド座標系である前提）
-		vec2 cellPointer = floor(pointer * u_gridCount);
-		float d = distance(cellIndex, cellPointer);
-		// d=0 のとき重み1、d>=radius で重み0になるよう補間
-		float weight = 1.0 - smoothstep(0.0, shuffleRadius, d);
-		
-		// オフセットに重みを掛ける
-		// TODO * ここでcenterに重み付できる
-		// offset *= weight;
-		
-		// cellIndex にオフセットを加算し、グリッド内にラップアラウンド
-		vec2 shuffled = cellIndex + offset;
-		return mod(shuffled, u_gridCount);
-	}
-
-	void main() {
-
-		vec2 fittedUV = vUv * fitScale + (1. - fitScale) / 2.;
-
-		// 現在のセルのインデックスを計算（例：(3, 5) など）
-		
-		// TODO autoFitさせないようにもしないと柔軟性に欠けるね
-		u_gridCount.x *= aspectRatio;
-		
-		vec2 cellIndex = floor(vUv * u_gridCount);
-		// セル毎に一意のhashを生成
-		float cellHash = hash(cellIndex);
-
-		// セルシャッフル
-		vec2 shuffledIndex = shuffleIndex(cellIndex);
-
-		// セル内の位置 (0～1) AKA cellUV
-		vec2 cellPos = fract(vUv * u_gridCount);
-
-		// 各セルの中心座標を計算 テクスチャのfitScaleを考慮する
-		vec2 cellCenterUV = ((shuffledIndex + 0.5) / u_gridCount) * fitScale + (1. - fitScale) / 2.;
-
-		// セルの中心でテクスチャをサンプリング
-		vec4 texColor = texture2D(src, cellCenterUV);
-		// TODO この基準のチャンネルをcolor か alpha かを選べるようにする
-		// TODO float len = texColor[0]; みたいにアクセスできるね
-		float len = texColor[0];
-		// float len = texColor.r;
-		
-		// --- セルカラー ---
-		float threshold = 0.;
-		// 1 セル毎のカラフル セル毎に一意のhashを生成しtimeに乗算する。
-		// vec3 fillColor = (len >= threshold) ? randomColor((time * cellHash) * .1) : u_backgroundColor;
-		// 2 セル毎のテクスチャ
-		// vec3 fillColor = (len >= threshold) ? texture2D(celltxture,cellPos).rgb : u_backgroundColor;
-		// 3. spriteテクスチャ
-		// float spriteCount = 10.0;
-		// float spritePos = fract(cellHash + time * 0.4);
-		// float spriteIndex = floor(spritePos * spriteCount);
-		// float spriteSize = 1.0 / spriteCount;
-		// float spriteOffset = spriteIndex * spriteSize;
-		// float spriteU = spriteOffset + cellPos.x * spriteSize;
-		// vec2 spriteUV = vec2(spriteU, cellPos.y);
-		
-		// TODO スプライトテクスチャのrgbにtexColorのrgbを乗算できるようにする
-		// THINK alphaはalpha mapとかにする？ => 普通にtextureのaをそのままが一旦シンプルかな
-
-		// vec3 fillColor = (len >= threshold) ? texture2D(spriteTexture, spriteUV).rgb : u_backgroundColor;
-		// 4. マッピングに使うテクスチャのカラーをそのままレンダリング
-		vec3 fillColor = (len >= threshold) ? texColor.rgb : u_backgroundColor;
-
-		// --- グリッド線描画の処理 ---
-		// 各辺の境界までの距離を求める
-		float distToEdgeX = min(cellPos.x, 1.0 - cellPos.x);
-		float distToEdgeY = min(cellPos.y, 1.0 - cellPos.y);
-		
-		// 微小なマージン
-		float margin = u_lineWidth;
-		
-		// smoothstep により、境界付近で 1.0、境界から離れると 0.0
-		float edgeX = 1.0 - smoothstep(u_lineWidth, u_lineWidth + margin, distToEdgeX);
-		float edgeY = 1.0 - smoothstep(u_lineWidth, u_lineWidth + margin, distToEdgeY);
-		
-		// X, Y のうちどちらかがエッジなら検出（両方の場合も 1.0 になる）
-		float edge = max(edgeX, edgeY);
-		
-		// グリッド線部分は u_gridColor、そうでなければ fillColor
-		vec3 finalColor = u_isEdge ? mix(fillColor, u_gridColor, edge) : fillColor;
-		gl_FragColor = vec4(finalColor, 1.0);
-
-	}
-`,
-});
-
-extend({ FxMaterialImpl });
-
-export const Playground = () => {
-   const { size, viewport, camera } = useThree();
-
-   const [funkun, sprite] = useTexture([
-      "/publicdomainq-0037959yqgbhh.jpg",
-      "/sprite.jpg",
-   ]);
-
-   // MEMO * floorでgrid化するときは、Nearestにしないといけない
-   funkun.minFilter = THREE.NearestFilter;
-   funkun.magFilter = THREE.NearestFilter;
-
-   const fitScale = useRef(new THREE.Vector2(1));
-   const aspectRatio = size.width / size.height;
-   fitScale.current.set(
-      Math.min(aspectRatio / 0.642, 1),
-      Math.min(0.642 / aspectRatio, 1)
-   );
-
-   const material = useRef<any>();
-   useEffect(() => {
-      material.current?.updateResolution(size);
-   }, [size]);
-
-   useFrame((state) => {
-      material.current.uniforms.time.value = state.clock.getElapsedTime();
-      material.current.uniforms.pointer.value = state.pointer
-         .clone()
-         .multiplyScalar(0.5)
-         .addScalar(0.5);
-   });
-
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl
-            ref={material}
-            key={FxMaterialImpl.key}
-            src={funkun}
-            fitScale={fitScale.current}
-            celltxture={funkun}
-            spriteTexture={sprite}
-         />
-      </mesh>
-   );
-};
diff --git a/app/examples/v2_grid/page.tsx b/app/examples/v2_grid/page.tsx
deleted file mode 100644
index 6256d104..00000000
--- a/app/examples/v2_grid/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ShaderFx } from "../ShaderFx";
-import { Playground } from "./Playground";
-import Image from "next/image";
-
-export default function Page() {
-   return (
-      <div
-         style={{
-            position: "fixed",
-            width: "100%",
-            height: "100svh",
-            pointerEvents: "none",
-         }}>
-         {/* <div
-            style={{
-               width: "400px",
-               height: "400px",
-               backgroundColor: "white",
-               position: "fixed",
-               inset: 0,
-               margin: "auto",
-               zIndex: 1000,
-               mixBlendMode: "hard-light",
-            }}>
-            <Image
-               priority
-               src="/momo.jpg"
-               alt=""
-               fill
-               sizes={"100%"}
-               style={{ objectFit: "cover" }}
-            />
-         </div> */}
-         <ShaderFx isDprUpdate={false}>
-            <Playground />
-         </ShaderFx>
-      </div>
-   );
-}
diff --git a/app/examples/v2_impl/Playground.tsx b/app/examples/v2_impl/Playground.tsx
deleted file mode 100644
index 07d27e63..00000000
--- a/app/examples/v2_impl/Playground.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import { useRef, useState } from "react";
-import { useFrame, useThree, extend, createPortal } from "@react-three/fiber";
-import {
-   useNoise,
-   NoiseValues,
-   useBoxBlur,
-   useSingleFBO,
-   createFxMaterialImpl,
-   createBasicFxMaterialImpl,
-   FxMaterialImplValues,
-   BasicFxMaterialImplValues,
-   useFluid,
-   useCoverTexture,
-} from "@/packages/use-shader-fx/src";
-import { Float, OrbitControls } from "@react-three/drei";
-
-const FxMaterialImpl = createFxMaterialImpl({
-   fragmentShader: `
-	uniform sampler2D src;
-	void main() {
-		vec2 vel = texture2D(src, vUv).xy;
-		float len = length(vel);
-		vel = vel * 0.5 + 0.5;
-		
-		vec3 color = vec3(vel.x, vel.y, 1.0);
-		color = mix(vec3(1.0), color, len);
-
-		gl_FragColor = vec4(color,  1.0);
-	}
-`,
-});
-const BasicFxMaterialImpl = createBasicFxMaterialImpl();
-
-extend({ FxMaterialImpl, BasicFxMaterialImpl });
-
-export const Playground = () => {
-   const { size, viewport, camera } = useThree();
-
-   const [offscreenScene] = useState(() => new THREE.Scene());
-
-   const [renderTarget, updateRenderTarget] = useSingleFBO({
-      scene: offscreenScene,
-      camera,
-      size,
-      dpr: viewport.dpr,
-      depthBuffer: true,
-   });
-
-   // const blur = useBoxBlur({
-   //    size,
-   //    dpr: 1,
-   //    src: renderTarget.texture,
-   // });
-
-   const fluid = useFluid({
-      size,
-      dpr: 0.25,
-   });
-
-   const noise = useNoise({
-      size,
-      dpr: 1,
-      scale: 100,
-      noiseOctaves: 2,
-      // mixSrc: fluid.texture,
-      // mixSrcColorFactor: 0.5,
-      // mixSrcUvFactor: 0.6,
-   });
-
-   const cover = useCoverTexture({
-      size,
-      dpr: 1,
-      src: renderTarget.texture,
-      mixSrc: {
-         src: noise.texture,
-         uvFactor: 0.2,
-      },
-   });
-
-   // noise.setValues({
-   //    mixSrc: cover.texture,
-   //    mixSrcColorFactor: 1,
-   // });
-
-   useFrame((state) => {
-      updateRenderTarget({ gl: state.gl });
-      noise.render(state);
-      // blur.render(state);
-      cover.render(state);
-      fluid.render(state);
-   });
-
-   const ref = useRef<any>();
-
-   return (
-      <>
-         <mesh>
-            <planeGeometry args={[2, 2]} />
-            <fxMaterialImpl
-               key={FxMaterialImpl.key}
-               ref={ref}
-               src={fluid.texture}
-            />
-         </mesh>
-         {createPortal(
-            <Float rotationIntensity={2} floatIntensity={2} speed={2}>
-               <mesh scale={0.8}>
-                  <torusKnotGeometry args={[2, 0.5, 400, 32]} />
-                  <ambientLight intensity={2} />
-                  <directionalLight intensity={2} />
-                  <meshStandardMaterial />
-               </mesh>
-               <OrbitControls />
-            </Float>,
-            offscreenScene
-         )}
-      </>
-   );
-};
diff --git a/app/examples/v2_impl/page.tsx b/app/examples/v2_impl/page.tsx
deleted file mode 100644
index 6256d104..00000000
--- a/app/examples/v2_impl/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ShaderFx } from "../ShaderFx";
-import { Playground } from "./Playground";
-import Image from "next/image";
-
-export default function Page() {
-   return (
-      <div
-         style={{
-            position: "fixed",
-            width: "100%",
-            height: "100svh",
-            pointerEvents: "none",
-         }}>
-         {/* <div
-            style={{
-               width: "400px",
-               height: "400px",
-               backgroundColor: "white",
-               position: "fixed",
-               inset: 0,
-               margin: "auto",
-               zIndex: 1000,
-               mixBlendMode: "hard-light",
-            }}>
-            <Image
-               priority
-               src="/momo.jpg"
-               alt=""
-               fill
-               sizes={"100%"}
-               style={{ objectFit: "cover" }}
-            />
-         </div> */}
-         <ShaderFx isDprUpdate={false}>
-            <Playground />
-         </ShaderFx>
-      </div>
-   );
-}
diff --git a/app/examples/v2_impl_colorAdjustments/Playground.tsx b/app/examples/v2_impl_colorAdjustments/Playground.tsx
deleted file mode 100644
index 202b3e80..00000000
--- a/app/examples/v2_impl_colorAdjustments/Playground.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import { useRef, useState } from "react";
-import { useFrame, useThree, extend, createPortal } from "@react-three/fiber";
-import {
-   useNoise,
-   NoiseValues,
-   useSingleFBO,
-   createFxMaterialImpl,
-   createBasicFxMaterialImpl,
-   FxMaterialImplValues,
-   BasicFxMaterialImplValues,
-   useFluid,
-} from "@/packages/use-shader-fx/src";
-import { Float, OrbitControls, useTexture } from "@react-three/drei";
-
-const FxMaterialImpl = createFxMaterialImpl({
-   fragmentShader: `
-	uniform sampler2D src;
-
-	vec3 hsv2rgb(vec3 c)
-{
-    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
-    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
-    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
-}
-
-vec3 rgb2hsv(vec3 c)
-{
-    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
-    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
-    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
-
-    float d = q.x - min(q.w, q.y);
-    float e = 1.0e-10;
-    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
-}
-
-	void main() {
-	
-		vec4 fluid = texture2D(src, vUv);
-		vec2 vel = fluid.rg;
-		float len = length(vel); // 0~1
-		vec4 fluidColor = vec4(len);
-
-		// color balance
-		fluidColor.r *= clamp(fluidColor.r * 1., 0., 1.);
-		fluidColor.g *= clamp(fluidColor.g * 0.6, 0., 1.);
-		fluidColor.b *= clamp(fluidColor.b * .6, 0., 1.);
-		// THINK ここまでがデフォルトのfluidのcolor
-		
-		// THINK ここからがbasicFxの色調補正
-		// THINK ガンマ補正とコントラストはvec4でやればいいのかも
-
-		vec4 outputColor = fluidColor;
-
-		/*===============================================
-		COLOR ADJUSTMENTS
-		===============================================*/
-		
-		/*===============================================
-		// レベル補正 Levels		vec4 に意味がありそう
-		===============================================*/
- 		// vec4のテスト
-		vec4 u_shadows = vec4(0., 0., 0., 0.); // シャドウ値
-		vec4 u_midtones = vec4(1., 1., 1., .5); // ミッドトーン値
-		vec4 u_highlights = vec4(1., 1., 1., 1.); // ハイライト値
-		vec4 u_outputMin = vec4(0., 0., 0., 0.); // 出力の最小値
-		vec4 u_outputMax = vec4(1., 1., 1., 1.); // 出力の最大値
-
-		// 入力レベル補正
-		outputColor = (outputColor - vec4(u_shadows)) / (vec4(u_highlights) - vec4(u_shadows));
-
-		// ガンマ補正
-		outputColor = pow(outputColor, vec4(1.0 / u_midtones));
-
-		// 出力レベル補正
-		outputColor = outputColor * (vec4(u_outputMax) - vec4(u_outputMin)) + vec4(u_outputMin);
-
-		/*===============================================
-		// コントラスト Contrast TODO これもvec4でuniformを渡す！ alphaだけコントラストかけたり！
-		===============================================*/
-		// コントラスト
-		vec4 contrastFactor = vec4(1.,1.,1.,1.);
-		outputColor = clamp(((outputColor-.5)*contrastFactor)+.5, 0., 1.);
-
-		/*===============================================
-		// ColorBalance
-		===============================================*/
-		vec3 colorBalance = vec3(2., .2, 12.2);
-		// outputColor.rgb = clamp(outputColor.rgb * colorBalance, 0., 1.);
-
-		/*===============================================
-		// hsv
-		===============================================*/
-		float hueShift   = 0.10; // 色相を +X 度分回転 (0.0~1.0 で0~360度)
-		float saturation = 2.0; // 彩度乗算 (1.0で変化なし)
-		float brightness = 2.0; // 明度乗算 (1.0で変化なし)
-
-		vec3 hsv = rgb2hsv(outputColor.rgb);
-
-		hsv.x = fract(hsv.x + hueShift); // Hue (色相) - 加算で回転、fract で 0~1 に収める
-		hsv.y = clamp(hsv.y * saturation, 0.0, 1.0); // Saturation (彩度) - 乗算して 0~1 に clamp
-		hsv.z = clamp(hsv.z * brightness, 0.0, 1.0); // brightness (明度) - 乗算して 0~1 に clamp
-
-		outputColor.rgb = hsv2rgb(hsv);
-
-		/*===============================================
-		// ポスタライゼーション Posterize
-		===============================================*/
-		vec4 posterization = vec4(0.,1.,0.,1.); // 1以上
-		outputColor.r = posterization.r > 1. ? floor(outputColor.r * posterization.r) / posterization.r : outputColor.r;
-		outputColor.g = posterization.g > 1. ? floor(outputColor.g * posterization.g) / posterization.g : outputColor.g;
-		outputColor.b = posterization.b > 1. ? floor(outputColor.b * posterization.b) / posterization.b : outputColor.b;
-		outputColor.a = posterization.a > 1. ? floor(outputColor.a * posterization.a) / posterization.a : outputColor.a;
-
-		/*===============================================
-		// BlackAndWhite TODO * 以下の型
-		grayscale = {
-			weight:vector3;
-			duotone:{
-				color0:vector3;
-				color1:vector3;
-			};
-			threashold:float; // 0~1 負の値は処理をスキップする
-		}
-		===============================================*/
-		float redWeight = 0.4;
-		float greenWeight = 2.;
-		float blueWeight = 0.;
-		float grayscale = dot(outputColor.rgb, vec3(0.299 + redWeight, 0.587 + greenWeight, 0.114 + blueWeight));
-
-		// outputColor.rgb = vec3(grayscale);
-
-		/*===============================================
-		// DuoTone TODO ここからgrayscaleとしてまとめる？
-		===============================================*/
-		vec3 color0 = vec3(0.45, .5, 0.534);
-		vec3 color1 = vec3(.3, 0.876, 0.579);
-		// outputColor.rgb = mix(color0, color1, grayscale);
-
-		/*===============================================
-		// Threshold
-		===============================================*/
-		float threshold = 0.2;
-		// outputColor.rgb = grayscale > threshold ? vec3(1.) : vec3(0.);
-
-		
-		/*===============================================
-		ここまでが色調補正
-		===============================================*/
-
-		// alpha TODO * transparentを選択できるようにする？
-		float alpha = outputColor.a;
-		// float alpha = 1.;
-		gl_FragColor = vec4(outputColor.rgb, alpha);
-	}
-`,
-});
-const BasicFxMaterialImpl = createBasicFxMaterialImpl();
-
-extend({ FxMaterialImpl, BasicFxMaterialImpl });
-
-export const Playground = () => {
-   const { size, viewport, camera } = useThree();
-
-   const [funkun] = useTexture(["/funkun.jpg"]);
-
-   const fluid = useFluid({
-      size,
-      dpr: 0.6,
-   });
-
-   useFrame((state) => {
-      fluid.render(state);
-   });
-
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={fluid.texture} />
-      </mesh>
-   );
-};
-
-declare global {
-   namespace JSX {
-      interface IntrinsicElements {
-         fxMaterialImpl: any;
-         fxMaterialImpl2: any;
-         BasicFxMaterialImpl: any;
-      }
-   }
-}
diff --git a/app/examples/v2_impl_colorAdjustments/page.tsx b/app/examples/v2_impl_colorAdjustments/page.tsx
deleted file mode 100644
index 6256d104..00000000
--- a/app/examples/v2_impl_colorAdjustments/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ShaderFx } from "../ShaderFx";
-import { Playground } from "./Playground";
-import Image from "next/image";
-
-export default function Page() {
-   return (
-      <div
-         style={{
-            position: "fixed",
-            width: "100%",
-            height: "100svh",
-            pointerEvents: "none",
-         }}>
-         {/* <div
-            style={{
-               width: "400px",
-               height: "400px",
-               backgroundColor: "white",
-               position: "fixed",
-               inset: 0,
-               margin: "auto",
-               zIndex: 1000,
-               mixBlendMode: "hard-light",
-            }}>
-            <Image
-               priority
-               src="/momo.jpg"
-               alt=""
-               fill
-               sizes={"100%"}
-               style={{ objectFit: "cover" }}
-            />
-         </div> */}
-         <ShaderFx isDprUpdate={false}>
-            <Playground />
-         </ShaderFx>
-      </div>
-   );
-}
diff --git a/app/examples/v2_mask/Playground.tsx b/app/examples/v2_mask/Playground.tsx
deleted file mode 100644
index 61ea315b..00000000
--- a/app/examples/v2_mask/Playground.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import { useEffect, useRef, useState } from "react";
-import { useFrame, useThree, extend, createPortal } from "@react-three/fiber";
-import {
-   createFxMaterialImpl,
-   FxMaterialImplValues,
-   useFluid,
-} from "@/packages/use-shader-fx/src";
-import { useTexture } from "@react-three/drei";
-
-const FxMaterialImpl = createFxMaterialImpl({
-   uniforms: {
-      mask: { value: null },
-   },
-   fragmentShader: `
-	uniform sampler2D src;
-	uniform sampler2D mask;
-	void main() {
-		vec2 vel = texture2D(src, vUv).xy;
-		float len = length(vel);
-		vel = vel * 0.5 + 0.5;
-		
-		vec3 color = vec3(vel.x, vel.y, 1.0);
-		color = mix(vec3(1.0), color, len);
-
-		// fluid カラー
-		vec4 fluidColor = vec4(color, 1.0);
-
-		// マスク
-		vec4 maskColor = texture2D(mask, vUv);
-
-		// チャンネル α
-		vec4 outPut = fluidColor * maskColor.a;
-
-		// チャンネル r
-		// vec4 outPut = fluidColor * maskColor.r;
-
-		// チャンネル g
-		// vec4 outPut = fluidColor * maskColor.g;
-
-		// チャンネル b
-		// vec4 outPut = fluidColor * maskColor.b;
-
-
-		gl_FragColor = outPut;
-	}
-`,
-});
-
-extend({ MaskMaterialImpl: FxMaterialImpl });
-
-/*===============================================
-Idea of Mask in BasicFx
-- figmaみたいにmaskをかけることができる
-- チャンネルを選択できる[ α | r | g | b ]
-===============================================*/
-
-export const Playground = () => {
-   const { size, viewport, camera } = useThree();
-
-   const [colorMask, alphaMask] = useTexture(["/mask.jpg", "/mask.png"]);
-
-   const fluid = useFluid({
-      size,
-      dpr: 0.5,
-   });
-
-   useFrame((state) => {
-      fluid.render(state);
-   });
-
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <maskMaterialImpl
-            key={FxMaterialImpl.key}
-            src={fluid.texture}
-            mask={alphaMask}
-         />
-      </mesh>
-   );
-};
-
-declare global {
-   namespace JSX {
-      interface IntrinsicElements {
-         maskMaterialImpl: {
-            mask: THREE.Texture | null;
-         } & FxMaterialImplValues &
-            JSX.IntrinsicElements["shaderMaterial"];
-      }
-   }
-}
diff --git a/app/examples/v2_mask/page.tsx b/app/examples/v2_mask/page.tsx
deleted file mode 100644
index 0fad2258..00000000
--- a/app/examples/v2_mask/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ShaderFx } from "../ShaderFx";
-import { Playground } from "./Playground";
-import Image from "next/image";
-
-export default function Page() {
-   return (
-      <div
-         style={{
-            position: "fixed",
-            width: "100%",
-            height: "100svh",
-            pointerEvents: "none",
-            backgroundColor: "white",
-         }}>
-         <div
-            style={{
-               position: "absolute",
-               width: "100%",
-               height: "100svh",
-               fontSize: "40px",
-            }}>
-            くぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlp
-            くぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlp
-            くぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlp
-            くぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlp
-            くぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlp
-            くぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlpくぁwせdrftgyふじこlp
-         </div>
-         <ShaderFx isDprUpdate={false}>
-            <Playground />
-         </ShaderFx>
-      </div>
-   );
-}
diff --git a/app/examples/v2_pipe/Playground.tsx b/app/examples/v2_pipe/Playground.tsx
deleted file mode 100644
index cecabb99..00000000
--- a/app/examples/v2_pipe/Playground.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-"use client";
-
-import { useFrame, useThree, extend, createPortal } from "@react-three/fiber";
-import {
-   useNoise,
-   createFxMaterialImpl,
-   createBasicFxMaterialImpl,
-   FxMaterialImplValues,
-   BasicFxMaterialImplValues,
-   useFluid,
-   usePipeline,
-} from "@/packages/use-shader-fx/src";
-import { useTexture } from "@react-three/drei";
-import * as THREE from "three";
-
-const FxMaterialImpl = createFxMaterialImpl();
-const BasicFxMaterialImpl = createBasicFxMaterialImpl();
-
-extend({ FxMaterialImpl, BasicFxMaterialImpl });
-
-/*===============================================
-reactive way
-- fxの変更をtriggerにkeyを変更することで、reactiveにfxを変更することが可能
-===============================================*/
-
-// const Pipeline = ({
-//    fxConfig,
-//    pipelineConfig,
-// }: {
-//    fxConfig: FxConfig[];
-//    pipelineConfig: PipelineConfig[];
-// }) => {
-//    const { texture, render, setPipeline } = usePipeline(...fxConfig);
-//    setPipeline(...pipelineConfig);
-//    useFrame((state) => render(state));
-//    return <fxMaterialImpl key={FxMaterialImpl.key} src={texture} />;
-// };
-
-// export const Playground = () => {
-//    const { size } = useThree();
-
-//    const fxConfig = [
-//       { fx: useFluid, size, dpr: 0.2 },
-//       {
-//          fx: useNoise,
-//          size,
-//          dpr: 0.1,
-//          mixSrcColorFactor: 0.2,
-//       },
-//    ];
-
-//    const pipelineConfig: PipelineConfig[] = [{}, { mixSrc: 0 }];
-
-//    // keyを変更することで、fxの変更をreactiveにすることが可能
-//    // UIではGUIの変更を検知して、keyを変更することで、reactiveに変更を反映するなどを想定
-//    const [pipelineCache, setPipelineCache] = useState(fxConfig.length);
-//    const [version, setVersion] = useState(0);
-//    if (fxConfig.length !== pipelineCache) {
-//       setPipelineCache(fxConfig.length);
-//       setVersion(version + 1);
-//    }
-
-//    return (
-//       <mesh>
-//          <planeGeometry args={[2, 2]} />
-//          <Pipeline
-//             fxConfig={fxConfig}
-//             pipelineConfig={pipelineConfig}
-//             key={version}
-//          />
-//       </mesh>
-//    );
-// };
-
-/*===============================================
-non-reactive way
-- resolutionはreactive
-	- ただし他のhooksと同様、resolution以外はnon-reactive
-===============================================*/
-export const Playground = () => {
-   const { size } = useThree();
-
-   const [app] = useTexture(["/app-head.jpg"]);
-
-   const { texture, render, setPipeline } = usePipeline(
-      {
-         fx: useFluid,
-         size,
-         dpr: 0.5,
-      },
-      {
-         fx: useNoise,
-         size,
-         dpr: 0.8,
-         fboAutoSetSize: true,
-         mixSrc: {
-            uvFactor: 0.7,
-            colorFactor: 0.2,
-         },
-      }
-   );
-
-   setPipeline({}, { mixSrc: 0 });
-
-   useFrame((state) => render(state));
-
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={texture} />
-      </mesh>
-   );
-};
diff --git a/app/examples/v2_pipe/page.tsx b/app/examples/v2_pipe/page.tsx
deleted file mode 100644
index a84dd222..00000000
--- a/app/examples/v2_pipe/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ShaderFx } from "../ShaderFx";
-import { Playground } from "./Playground";
-
-export default function Page() {
-   return (
-      <div
-         style={{
-            position: "fixed",
-            width: "100%",
-            height: "100svh",
-            pointerEvents: "none",
-         }}>
-         <ShaderFx isDprUpdate={false}>
-            <Playground />
-         </ShaderFx>
-      </div>
-   );
-}
diff --git a/app/examples/v2_pixelGeometry/Playground.tsx b/app/examples/v2_pixelGeometry/Playground.tsx
deleted file mode 100644
index 40db4533..00000000
--- a/app/examples/v2_pixelGeometry/Playground.tsx
+++ /dev/null
@@ -1,396 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import { useEffect, useRef, useState } from "react";
-import { useFrame, useThree, extend, createPortal } from "@react-three/fiber";
-import {
-   useNoise,
-   NoiseValues,
-   useSingleFBO,
-   createFxMaterialImpl,
-   createBasicFxMaterialImpl,
-   FxMaterialImplValues,
-   BasicFxMaterialImplValues,
-   useFluid,
-} from "@/packages/use-shader-fx/src";
-import {
-   Float,
-   OrbitControls,
-   useTexture,
-   useVideoTexture,
-} from "@react-three/drei";
-
-/*===============================================
-idea of useCRT? / usePixelGeometry?
-### pixel geometryについて
-
-- サブピクセル…pixelよりもより細かい単位でRGBの単色の各点のこと
-- LCD…液晶ディスプレイ
-- CRT…ブラウン管
-
-パターン
-
-- delta 型
-	- 主にCRTディスプレイで採用されている三角形の配置パターン
-- stripe 型
-	- 主にLCDディスプレイで採用される
-
-その他、ペンタイル型とかあるけど、高解像度を実現するための手法なので、glslでの演出で旧来のディスプレイ表現を再現する目的では不要かな。
-
-deltaとstripeだけでいいかな。
-
-
-- ✅色収差
-
-- ✅ノイズ
-- ✅スキャンライン
-
-- ✅グロー効果（発光っぽさ）
-- ✅delta配置にする
-- ✅サブピクセルを強調する
-
-- ✅歪み（ジッター）
-
-- ✅円形にする
-- ✅ストライプ型も円形にする
-===============================================*/
-/*===============================================
-- torusをCRTにしたやつ
-- fluidをCRTにしたやつ
-- fluidをgridにしてcrtにしたやつ
-- torusを古文にしたやつ
-- torusを古文にしたやつを、CRTにしたやつ
-===============================================*/
-
-const FxMaterialImpl = createFxMaterialImpl({
-   uniforms: {
-      time: { value: 0 },
-   },
-   fragmentShader: `
-	uniform sampler2D src;
-	uniform float time;
-
-	float hash(vec2 p) {
-		return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
-	}
-
-	// uvとtimeに依存するジッターノイズ（-1～1）
-	vec2 jitterNoise(vec2 uv, float t) {
-		float jitterStrength = 0.001; // ジッター量
-		float n1 = hash(uv + t);
-		float n2 = hash(uv + t + 31.4159);
-		return (vec2(n1, n2)*2.-1.) * jitterStrength;
-	}
-
-	// RGBストライプ型マスク（従来の実装）
-	vec3 rgbMaskStripe(vec2 uv) {
-		float subPixelSize = 1.; // サブピクセルのサイズ
-		vec2 pixelPos = floor(uv * resolution / subPixelSize);
-
-		// uv.x に基づいたシンプルなRGBストライプ
-		float r = smoothstep(0.0, 1.0, mod(pixelPos.x, 3.0) / 3.0);
-		float g = smoothstep(0.0, 1.0, mod(pixelPos.x + 1.0, 3.0) / 3.0);
-		float b = smoothstep(0.0, 1.0, mod(pixelPos.x + 2.0, 3.0) / 3.0);
-
-		// サブピクセル内での局所座標を計算（各サブピクセル内の位置）
-		vec2 subPixelCoord = mod(uv * resolution, subPixelSize);
-		vec2 center = vec2(subPixelSize * 0.5);
-		float d = length(subPixelCoord - center);
-
-		// 角丸（円形）マスク：中心から外側に向かって滑らかにフェードアウト
-		float radius = .5;         // サブピクセルサイズに対する内側の半径（0～1の値）
-		float fadeWidthFactor = 0.3;  // フェードアウトする幅（サブピクセルサイズに対する割合）
-		float r0 = subPixelSize * radius;
-		float r1 = subPixelSize * (radius + fadeWidthFactor);
-		float circleMask = 1.0 - smoothstep(r0, r1, d);
-
-		return vec3(r, g, b) * circleMask;
-	}
-
-	// Delta CRTディスプレイ
-	vec3 rgbMaskDelta(vec2 uv) {
-		float subPixelSize = 2.; // サブピクセルのサイズ（ピクセル単位）
-		
-		// サブピクセル単位の座標（各サブピクセルごとのインデックス）
-		vec2 pixelPos = floor(uv * resolution / subPixelSize);
-		
-		// x, y方向のパターンを決定（3ピクセル周期、2行ごとのパターン変更）
-		float x = mod(pixelPos.x, 3.0);
-		float y = mod(pixelPos.y, 2.0);
-		
-		// サブピクセルごとのRGBチャンネル割り当て
-		float r = 0.0, g = 0.0, b = 0.0;
-		if (y == 0.0) {
-			r = (x == 0.0) ? 1.0 : 0.0;
-			g = (x == 1.0) ? 1.0 : 0.0;
-			b = (x == 2.0) ? 1.0 : 0.0;
-		} else {
-			// 奇数行はシフトしたパターン（デルタ配置風）
-			g = (x == 0.0) ? 1.0 : 0.0;
-			b = (x == 1.0) ? 1.0 : 0.0;
-			r = (x == 2.0) ? 1.0 : 0.0;
-		}
-		
-		// サブピクセル内での局所座標を計算
-		// uv*resolution の小数部分を使って、各サブピクセル内での相対位置を求める
-		vec2 subPixelCoord = mod(uv * resolution, subPixelSize);
-		
-		vec2 center = vec2(subPixelSize * 0.5);
-		float d = length(subPixelCoord - center);
-		
-		// サブピクセルは円形になるはずなので、中心から外側に向かってフェードアウトする
-		// r0: 中心部で完全にON、r1: 外側で完全にOFF
-		float radius = .4; // サブピクセルの半径
-		float fadeWidthFactor = 0.3; // サブピクセルサイズに対するフェード幅の割合
-		float r0 = subPixelSize * radius;
-		float r1 = subPixelSize * (radius + fadeWidthFactor);
-		float circleMask = 1.0 - smoothstep(r0, r1, d);
-		
-		return vec3(r, g, b) * circleMask;
-	}
-
-	// スキャンライン効果（必要に応じてパラメータ調整可）
-	float scanline(vec2 uv) {
-		float scanlineBaseBrightness = 0.8;
-		float scanlineWave = 1.;
-		return clamp(scanlineBaseBrightness + sin(uv.y * resolution.y * scanlineWave) * .5 + .5 , 0.0 , 1.0);
-	} // return 0 ~ 1
-
-
-	// 色収差（左右に微小なオフセット）
-	vec3 chromaticAberration(vec2 uv) {
-		float shiftStrength = .1;
-		float radiusStrength = .1;
-		
-		// 画面中心からの距離に応じて強さを変える
-		float offset = shiftStrength * length(uv - 0.5) * radiusStrength;
-		vec3 col;
-		col.r = texture(src, uv + vec2(-offset,offset)).r;
-		col.g = texture(src, uv).g;
-		col.b = texture(src, uv + vec2(offset,-offset)).b;
-		return col;
-	}
-
-	// 発光
-	vec3 glowEffect(vec2 uv) {
-		vec3 glow = vec3(0.0);
-		float glowIntensity = 0.04;
-		float blurSize = 0.0;
-		vec2 perDivSize = vec2(blurSize) / resolution;
-		for (float i = -2.0; i <= 2.0; i++) {
-			for (float j = -2.0; j <= 2.0; j++) {
-					glow += texture2D(src, uv + vec2(i, j) * perDivSize).rgb;
-			}
-		}
-		return glow * glowIntensity;
-	}
-	
-	void main() {
-		vec2 uv = vUv;
-
-		// ジッターノイズ
-		uv += jitterNoise(uv,time);
-		
-		// お好みで、以下のどちらかのマスク関数を選択
-		// vec3 mask = rgbMaskStripe(uv); // RGBストライプ型（従来）
-		vec3 mask = rgbMaskDelta(uv); // CRT風デルタ配置
-		
-		// 色収差をかけた色にマスクを適用
-		vec3 color = chromaticAberration(uv) * mask;
-		
-		// スキャンライン効果を加える
-		color *= scanline(uv);
-
-		// ぼやけた発光を加える
-		color += glowEffect(uv);
-
-		// 0~1にクランプ
-		color = clamp(color,0.,1.);
-
-		gl_FragColor = vec4(color, 1.0);
-	}
-`,
-});
-
-extend({ FxMaterialImpl });
-
-export const Playground = () => {
-   const { size, viewport, camera } = useThree();
-
-   const [offscreenScene] = useState(() => new THREE.Scene());
-   const [renderTarget, updateRenderTarget] = useSingleFBO({
-      scene: offscreenScene,
-      camera,
-      size,
-      dpr: viewport.dpr,
-      depthBuffer: true,
-   });
-
-   const [funkun, sprite] = useTexture(["/momo.jpg", "/sprite.jpg"]);
-   const funkunVideo = useVideoTexture("/FT_Ch02.mp4", {
-      width: 1280,
-      height: 720,
-   });
-
-   const fluid = useFluid({
-      size,
-      dpr: 0.3,
-   });
-
-   const material = useRef<any>();
-   useEffect(() => {
-      material.current?.updateResolution(size);
-   }, [size]);
-
-   useFrame((state) => {
-      updateRenderTarget({ gl: state.gl });
-      // fluid.render(state);
-      material.current.uniforms.time.value = state.clock.getElapsedTime();
-   });
-
-   return (
-      <>
-         <mesh>
-            <planeGeometry args={[2, 2]} />
-            <fxMaterialImpl
-               ref={material}
-               key={FxMaterialImpl.key}
-               src={funkunVideo}
-            />
-         </mesh>
-         {createPortal(
-            <Float rotationIntensity={2} floatIntensity={2} speed={2}>
-               <mesh scale={0.8}>
-                  <torusKnotGeometry args={[2, 0.5, 400, 32]} />
-                  <ambientLight intensity={1.6} />
-                  <directionalLight intensity={3} />
-                  <meshStandardMaterial color={0xf8f2de} />
-               </mesh>
-               <OrbitControls />
-            </Float>,
-            offscreenScene
-         )}
-      </>
-   );
-};
-
-/*===============================================
-
-vec3 rgbMaskDelta(vec2 uv) {
-		vec2 pixelPos = uv * resolution; // ピクセル単位の座標
-		float x = mod(pixelPos.x, 3.0); // 3ピクセル周期でRGB
-		float y = mod(pixelPos.y, 2.0); // 2行ごとにパターン変更
-
-		float r = step(0.5, x) * step(1.5, y); // Rの配置
-		float g = step(1.5, x) * step(0.5, y); // Gの配置
-		float b = step(2.5, x) * step(1.5, y); // Bの配置
-
-		return vec3(r, g, b);
-	}
-
-	// CRTのデルタ配置を模したマスク
-	vec3 rgbMaskDelta2(vec2 uv) {
-		// 画面上の絶対位置に変換
-		vec2 pos = uv * resolution;
-		
-		// 各走査ラインごとに、水平方向に半ピクセル分のオフセットを加えることで
-		// サブピクセルの位置を交互にシフト（デルタ配置風に）する。
-		float lineOffset = mod(floor(pos.y), 2.0) * 0.5;
-		pos.x += lineOffset;
-		
-		// 水平方向に3サブピクセル分の周期でRGBを割り当てる
-		float r = smoothstep(0.0, 1.0, mod(pos.x, 3.0) / 3.0);
-		float g = smoothstep(0.0, 1.0, mod(pos.x + 1.0, 3.0) / 3.0);
-		float b = smoothstep(0.0, 1.0, mod(pos.x + 2.0, 3.0) / 3.0);
-		return vec3(r, g, b);
-	}
-
-	vec3 rgbMaskDelta3(vec2 uv) {
-		// ピクセル単位の座標に変換
-		vec2 pixelPos = uv * resolution;
-		
-		// x座標は3サブピクセル周期でRGBを割り当てる
-		float x = mod(pixelPos.x, 3.0);
-		// floor()を用いて、整数の行番号を算出し、2行ごとにパターン変更
-		float row = mod(floor(pixelPos.y), 2.0);
-		
-		vec3 mask;
-		if (row < 1.0) {
-			// 偶数行の場合：通常のRGB順
-			mask.r = smoothstep(0.0, 1.0, mod(x, 3.0) / 3.0);
-			mask.g = smoothstep(0.0, 1.0, mod(x + 1.0, 3.0) / 3.0);
-			mask.b = smoothstep(0.0, 1.0, mod(x + 2.0, 3.0) / 3.0);
-		} else {
-			// 奇数行の場合：x方向に半サブピクセル分のオフセットを適用
-			mask.r = smoothstep(0.0, 1.0, mod(x + 0.5, 3.0) / 3.0);
-			mask.g = smoothstep(0.0, 1.0, mod(x + 1.5, 3.0) / 3.0);
-			mask.b = smoothstep(0.0, 1.0, mod(x + 2.5, 3.0) / 3.0);
-		}
-		return mask;
-	}
-
-	vec3 rgbMaskDelta4(vec2 uv) {
-		// ピクセル単位の座標に変換
-		vec2 pixelPos = uv * resolution;
-		
-		// グローバルX方向オフセットを適用（この値は調整可能）
-		float globalXOffset = 1.6;
-		pixelPos.x += globalXOffset;
-		
-		// 3サブピクセル周期のx座標
-		float x = mod(pixelPos.x, 3.0);
-		// 2行ごとにパターンを変更するため、行番号の偶奇を判定
-		float row = mod(floor(pixelPos.y), 2.0);
-		
-		vec3 mask;
-		if (row < 1.0) {
-			// 偶数行：通常のRGB順
-			mask.r = smoothstep(0.0, 1.0, mod(x, 3.0) / 3.0);
-			mask.g = smoothstep(0.0, 1.0, mod(x + 1.0, 3.0) / 3.0);
-			mask.b = smoothstep(0.0, 1.0, mod(x + 2.0, 3.0) / 3.0);
-		} else {
-			// 奇数行：x方向に0.5サブピクセル分のオフセットを適用
-			mask.r = smoothstep(0.0, 1.0, mod(x + 0.5, 3.0) / 3.0);
-			mask.g = smoothstep(0.0, 1.0, mod(x + 1.5, 3.0) / 3.0);
-			mask.b = smoothstep(0.0, 1.0, mod(x + 2.5, 3.0) / 3.0);
-		}
-		return mask;
-	}
-
-	vec3 rgbMaskDelta5(vec2 uv) {
-		vec2 pixelPos = uv * resolution; // ピクセル単位の座標
-		float x = mod(pixelPos.x, 3.0); // 3ピクセル周期
-		float y = mod(pixelPos.y, 2.0); // 2行ごとにパターン変更
-
-		float r = step(0.5, x) * step(1.5, y); // Rの配置
-		float g = step(1.5, x) * step(0.5, y); // Gの配置
-		float b = step(2.5, x) * step(1.5, y); // Bの配置
-
-		return vec3(r, g, b);
-	}
-	
-
-
-	// // Delta CRTディスプレイ
-	// vec3 rgbMaskDelta(vec2 uv) {
-	// 	float subPixelSize = 5.; // サブピクセルのサイズ
-	// 	vec2 pixelPos = floor(uv * resolution / subPixelSize); // サブピクセル単位の座標
-
-	// 	float x = mod(pixelPos.x, 3.0); // 3ピクセル周期
-	// 	float y = mod(pixelPos.y, 2.0); // 2行ごとにパターン変更
-
-	// 	float r, g, b;
-		
-	// 	if (y == 0.0) {
-	// 		r = (x == 0.0) ? 1.0 : 0.0;
-	// 		g = (x == 1.0) ? 1.0 : 0.0;
-	// 		b = (x == 2.0) ? 1.0 : 0.0;
-	// 	} else {
-	// 		g = (x == 0.0) ? 1.0 : 0.0;
-	// 		b = (x == 1.0) ? 1.0 : 0.0;
-	// 		r = (x == 2.0) ? 1.0 : 0.0;
-	// 	}
-
-	// 	return vec3(r, g, b);
-	// }
-===============================================*/
diff --git a/app/examples/v2_pixelGeometry/page.tsx b/app/examples/v2_pixelGeometry/page.tsx
deleted file mode 100644
index 6256d104..00000000
--- a/app/examples/v2_pixelGeometry/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ShaderFx } from "../ShaderFx";
-import { Playground } from "./Playground";
-import Image from "next/image";
-
-export default function Page() {
-   return (
-      <div
-         style={{
-            position: "fixed",
-            width: "100%",
-            height: "100svh",
-            pointerEvents: "none",
-         }}>
-         {/* <div
-            style={{
-               width: "400px",
-               height: "400px",
-               backgroundColor: "white",
-               position: "fixed",
-               inset: 0,
-               margin: "auto",
-               zIndex: 1000,
-               mixBlendMode: "hard-light",
-            }}>
-            <Image
-               priority
-               src="/momo.jpg"
-               alt=""
-               fill
-               sizes={"100%"}
-               style={{ objectFit: "cover" }}
-            />
-         </div> */}
-         <ShaderFx isDprUpdate={false}>
-            <Playground />
-         </ShaderFx>
-      </div>
-   );
-}
diff --git a/app/examples/v2_rgbShift/Playground.tsx b/app/examples/v2_rgbShift/Playground.tsx
deleted file mode 100644
index b9015b5c..00000000
--- a/app/examples/v2_rgbShift/Playground.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import { useEffect, useRef, useState } from "react";
-import { useFrame, useThree, extend, createPortal } from "@react-three/fiber";
-import {
-   createFxMaterialImpl,
-   createBasicFxMaterialImpl,
-   FxMaterialImplValues,
-   BasicFxMaterialImplValues,
-   useRGBShift,
-   useGaussianBlur,
-   useBoxBlur,
-} from "@/packages/use-shader-fx/src";
-import { Float, OrbitControls, useTexture } from "@react-three/drei";
-import { useCoverTexture } from "@/packages/use-shader-fx/src/hooks/useCoverTexture";
-import { useNoise } from "@/packages/use-shader-fx/src";
-import { useMotionBlur } from "@/packages/use-shader-fx/src/hooks/blur/useMotionBlur";
-
-const FxMaterialImpl = createFxMaterialImpl({
-   fragmentShader: `
-	uniform sampler2D src;
-	void main() {      
-		vec4 oC = texture2D(src, vUv);            
-      gl_FragColor = oC;
-	}
-`,
-});
-const BasicFxMaterialImpl = createBasicFxMaterialImpl();
-
-extend({ FxMaterialImpl, BasicFxMaterialImpl });
-
-export const Playground = () => {
-   const { size, viewport, camera } = useThree();
-
-   const [app] = useTexture(["/dummy2.png"]);
-
-   // const coverTexture = useCoverTexture({
-   //    size,
-   //    dpr: 1,
-   //    src: app,
-   //    textureResolution: new THREE.Vector2(app.image.width, app.image.height),
-   // })
-
-   const noise = useNoise({
-      size,
-      dpr: 1,
-      scale: 0.005,
-      timeOffset: 0,
-   });
-
-   const noise2 = useNoise({
-      size,
-      dpr: 1,
-      scale: 0.005,
-      timeOffset: 0.03,
-   });
-
-   const noise3 = useNoise({
-      size,
-      dpr: 1,
-      scale: 0.005,
-      timeOffset: 0.06,
-   });
-
-   const rgbShift = useRGBShift({
-      size,
-      dpr: 2,
-      shiftScale: 0.03,
-      shiftPower: new THREE.Vector2(2, 2),
-      shiftPowerSrcR: noise.texture,
-      shiftPowerSrcG: noise2.texture,
-      shiftPowerSrcB: noise3.texture,
-      isUseShiftPowerSrcR: true,
-      isUseShiftPowerSrcG: true,
-      isUseShiftPowerSrcB: true,
-      texture: {
-         src: app,
-         fit: 2,
-      },
-   });
-
-   // const gbBur = useGaussianBlur({
-   //    size,
-   //    dpr: 1,
-   //    radius: 2,
-   //    sigma: new THREE.Vector2(0, 0),
-   //    texture: {
-   //       src: rgbShift.texture,
-   //    }
-   // });
-
-   const motionBlur = useMotionBlur({
-      size,
-      dpr: 1,
-      texture: {
-         src: rgbShift.texture,
-      },
-   });
-
-   useFrame((state) => {
-      // coverTexture.render(state);
-      noise.render(state);
-      noise2.render(state);
-      noise3.render(state);
-      rgbShift.render(state);
-      // gbBur.render(state);
-      motionBlur.render(state);
-   });
-
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={motionBlur.texture} />
-      </mesh>
-   );
-};
diff --git a/app/examples/v2_rgbShift/page.tsx b/app/examples/v2_rgbShift/page.tsx
deleted file mode 100644
index 6256d104..00000000
--- a/app/examples/v2_rgbShift/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ShaderFx } from "../ShaderFx";
-import { Playground } from "./Playground";
-import Image from "next/image";
-
-export default function Page() {
-   return (
-      <div
-         style={{
-            position: "fixed",
-            width: "100%",
-            height: "100svh",
-            pointerEvents: "none",
-         }}>
-         {/* <div
-            style={{
-               width: "400px",
-               height: "400px",
-               backgroundColor: "white",
-               position: "fixed",
-               inset: 0,
-               margin: "auto",
-               zIndex: 1000,
-               mixBlendMode: "hard-light",
-            }}>
-            <Image
-               priority
-               src="/momo.jpg"
-               alt=""
-               fill
-               sizes={"100%"}
-               style={{ objectFit: "cover" }}
-            />
-         </div> */}
-         <ShaderFx isDprUpdate={false}>
-            <Playground />
-         </ShaderFx>
-      </div>
-   );
-}
diff --git a/app/examples/v2_test/Playground.tsx b/app/examples/v2_test/Playground.tsx
deleted file mode 100644
index d42c88ac..00000000
--- a/app/examples/v2_test/Playground.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import {
-   Environment,
-   MeshTransmissionMaterial,
-   OrbitControls,
-   useGLTF,
-} from "@react-three/drei";
-
-import { useFluid, useNoise } from "@/packages/use-shader-fx/src";
-
-import { useCallback, useRef } from "react";
-import { useFrame, useThree } from "@react-three/fiber";
-
-const Model = ({ children }: { children?: React.ReactNode }) => {
-   const ref = useRef<THREE.Mesh>(null);
-   const { nodes, materials } = useGLTF("/ANRI_LOGO_WEB_EXPORT_V01.gltf");
-   return (
-      <mesh
-         ref={ref}
-         castShadow
-         receiveShadow
-         scale={10}
-         geometry={nodes["OBJECTS"].children[0].geometry}>
-         {children}
-      </mesh>
-   );
-};
-
-const Light = () => {
-   return (
-      <Environment
-         // resolution={256}
-         files={"/snowpark.exr"}
-         background
-         // preset="park"
-         backgroundIntensity={1}
-         backgroundBlurriness={0}></Environment>
-   );
-};
-
-export const Playground = () => {
-   const { size } = useThree();
-   const fluid = useFluid({
-      size,
-      dpr: 0.3,
-      scale: new THREE.Vector2(10, 10),
-      colorBalance: {
-         factor: new THREE.Vector3(1, 0, 0),
-      },
-      hsv: {
-         saturation: 5,
-      },
-   });
-   const materialRef = useRef<any>(null);
-   useFrame((state) => {
-      fluid.render(state);
-      materialRef.current.userData.time.value = state.clock.getElapsedTime();
-      state.camera.position.lerp(
-         { x: state.pointer.x * 0.8, y: state.pointer.y * 0.8, z: 6 },
-         0.05
-      );
-   });
-   return (
-      <mesh>
-         <Model>
-            <MeshTransmissionMaterial
-               ref={materialRef}
-               map={fluid.texture}
-               clearcoat={0.3}
-               metalness={0.6}
-               roughness={0.2}
-               userData={{
-                  time: { value: 0 },
-               }}
-               onBeforeCompile={useCallback((shader: any) => {
-                  Object.assign(shader.uniforms, materialRef.current.userData);
-                  shader.vertexShader = shader.vertexShader.replace(
-                     "#include <beginnormal_vertex>",
-                     `
-               			vec3 objectNormal = custom_Normal;
-               			#ifdef USE_TANGENT
-               			vec3 objectTangent = vec3( tangent.xyz );
-               			#endif
-               		`
-                  );
-
-                  shader.vertexShader = shader.vertexShader.replace(
-                     "#include <begin_vertex>",
-                     `
-               			vec3 transformed = custom_Position;
-               			#ifdef USE_ALPHAHASH
-               			vPosition = vec3( position );
-               			#endif
-               		`
-                  );
-
-                  shader.vertexShader = shader.vertexShader.replace(
-                     "void main() {",
-                     `
-               			uniform float time;
-
-               			void main() {
-
-               				vec3 custom_Position = position;
-               				vec3 custom_Normal = normal;
-
-               				custom_Position += custom_Normal * (sin(time) * .5 + .5) * 0.05;
-
-               		`
-                  );
-               }, [])}
-            />
-         </Model>
-         <OrbitControls />
-         <Light />
-      </mesh>
-   );
-};
diff --git a/app/examples/v2_textureTransition/Playground.tsx b/app/examples/v2_textureTransition/Playground.tsx
deleted file mode 100644
index fb883adf..00000000
--- a/app/examples/v2_textureTransition/Playground.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import { useRef, useState } from "react";
-import { useFrame, useThree, extend, createPortal } from "@react-three/fiber";
-import {
-   useNoise,
-   NoiseValues,
-   useSingleFBO,
-   createFxMaterialImpl,
-   createBasicFxMaterialImpl,
-   FxMaterialImplValues,
-   BasicFxMaterialImplValues,
-   useFluid,
-} from "@/packages/use-shader-fx/src";
-import { Float, OrbitControls, useTexture } from "@react-three/drei";
-
-const FxMaterialImpl = createFxMaterialImpl({
-   uniforms: {
-      targetTexture: { value: THREE.Texture },
-      u_time: { value: 0 },
-   },
-   fragmentShader: `
-	uniform sampler2D src;
-	uniform sampler2D targetTexture;
-	uniform float u_time;
-	void main() {
-
-		float progress = sin(u_time * .1) * 0.5 + 0.5;
-		if(vUv.x < progress) {
-			vec4 srcColor = texture2D(targetTexture,vec2(progress,vUv.y));
-			gl_FragColor = srcColor;
-		}else {
-			vec2 fitScale = vec2(1.,1.);
-			vec2 uv = vUv * fitScale + (1.0 - fitScale) * .5;
-			vec4 srcColor = texture2D(src,uv);
-			gl_FragColor = srcColor;
-		}
-	}
-`,
-});
-
-const BasicFxMaterialImpl = createBasicFxMaterialImpl();
-
-extend({ FxMaterialImpl, BasicFxMaterialImpl });
-
-export const Playground = () => {
-   const { size, viewport, camera } = useThree();
-
-   const [funkun, funkun2] = useTexture(["/momo.jpg", "/momo.jpg"]);
-
-   const material = useRef<THREE.ShaderMaterial>();
-
-   useFrame((state) => {
-      if (material.current) {
-         material.current.uniforms.u_time.value = state.clock.getElapsedTime();
-      }
-   });
-
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl
-            ref={material}
-            key={FxMaterialImpl.key}
-            src={funkun}
-            targetTexture={funkun2}
-         />
-      </mesh>
-   );
-};
diff --git a/app/examples/v2_textureTransition/page.tsx b/app/examples/v2_textureTransition/page.tsx
deleted file mode 100644
index 6256d104..00000000
--- a/app/examples/v2_textureTransition/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ShaderFx } from "../ShaderFx";
-import { Playground } from "./Playground";
-import Image from "next/image";
-
-export default function Page() {
-   return (
-      <div
-         style={{
-            position: "fixed",
-            width: "100%",
-            height: "100svh",
-            pointerEvents: "none",
-         }}>
-         {/* <div
-            style={{
-               width: "400px",
-               height: "400px",
-               backgroundColor: "white",
-               position: "fixed",
-               inset: 0,
-               margin: "auto",
-               zIndex: 1000,
-               mixBlendMode: "hard-light",
-            }}>
-            <Image
-               priority
-               src="/momo.jpg"
-               alt=""
-               fill
-               sizes={"100%"}
-               style={{ objectFit: "cover" }}
-            />
-         </div> */}
-         <ShaderFx isDprUpdate={false}>
-            <Playground />
-         </ShaderFx>
-      </div>
-   );
-}
diff --git a/app/tests/_utils/Output.tsx b/app/tests/_utils/Output.tsx
new file mode 100644
index 00000000..ac08dacc
--- /dev/null
+++ b/app/tests/_utils/Output.tsx
@@ -0,0 +1,28 @@
+import * as THREE from "three";
+
+export const Output = ({ src }: { src: THREE.Texture }) => {
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <shaderMaterial
+            uniforms={{
+               src: { value: src },
+            }}
+            vertexShader={`
+					varying vec2 vUv;
+					void main() {
+						vUv = uv;
+						gl_Position = vec4(position, 1.0);
+					}
+				`}
+            fragmentShader={`
+						uniform sampler2D src;
+						varying vec2 vUv;
+						void main() {
+							gl_FragColor = texture2D(src, vUv);
+						}
+					`}
+         />
+      </mesh>
+   );
+};
diff --git a/app/tests/bufferMaterial/Playground.tsx b/app/tests/bufferMaterial/Playground.tsx
new file mode 100644
index 00000000..584ad32d
--- /dev/null
+++ b/app/tests/bufferMaterial/Playground.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import * as THREE from "three";
+import { extend, useFrame, useThree } from "@react-three/fiber";
+import { BufferMaterial } from "@/packages/use-shader-fx/src";
+import { useTexture } from "@react-three/drei";
+import { useEffect, useRef } from "react";
+import { useFluid } from "@/packages/use-shader-fx/src";
+
+extend({ BufferMaterial });
+
+export const Playground = () => {
+   const { size } = useThree();
+   const [momo] = useTexture(["/momo.jpg"]);
+   const material = useRef<BufferMaterial>(null);
+   useEffect(() => {
+      if (material.current)
+         material.current.updateResolution(size.width, size.height);
+   }, [size]);
+   const fluid = useFluid({
+      size,
+      dpr: 0.25,
+   });
+   fluid.setValues({
+      // colorBalance: {
+      //    factor: new THREE.Vector3(0.5, 0, 0),
+      // },
+      // posterize: {
+      //    levels: new THREE.Vector4(8, 8, 8, 8),
+      // },
+      colorBalance: false,
+      posterize: false,
+   });
+   useFrame((state) => {
+      fluid.render(state);
+   });
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <bufferMaterial
+            ref={material}
+            key={BufferMaterial.key}
+            texture_src={momo}
+            texture_fit={1}
+            mixSrc={true}
+            mixSrc_src={fluid.texture}
+            mixSrc_uv={true}
+            mixSrc_uv_factor={0.1}
+            mixSrc_uv_mixMap={true}
+            mixSrc_uv_mixMap_src={fluid.texture}
+            posterize
+            posterize_levels={new THREE.Vector4(4, 4, 4, 4)}
+         />
+      </mesh>
+   );
+};
diff --git a/app/examples/v2_test/page.tsx b/app/tests/bufferMaterial/page.tsx
similarity index 100%
rename from app/examples/v2_test/page.tsx
rename to app/tests/bufferMaterial/page.tsx
diff --git a/app/tests/useBlank-useBuffer/Playground.tsx b/app/tests/useBlank-useBuffer/Playground.tsx
index c08c32f2..90c7940f 100644
--- a/app/tests/useBlank-useBuffer/Playground.tsx
+++ b/app/tests/useBlank-useBuffer/Playground.tsx
@@ -1,17 +1,10 @@
 "use client";
 
-import { useFrame, useThree, extend } from "@react-three/fiber";
-import {
-   createFxMaterialImpl,
-   useFluid,
-   useBuffer,
-   useBlank,
-} from "@/packages/use-shader-fx/src";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useFluid, useBuffer, useBlank } from "@/packages/use-shader-fx/src";
 import { useBasicFxGUI } from "../_utils/useBasicFxGUI";
 import { useTexture } from "@react-three/drei";
-
-const FxMaterialImpl = createFxMaterialImpl();
-extend({ FxMaterialImpl });
+import { Output } from "../_utils/Output";
 
 export const Playground = () => {
    const { size } = useThree();
@@ -88,7 +81,7 @@ export const Playground = () => {
       dpr: 1.5,
       texture: {
          src: mask,
-         fit: "fill",
+         fit: 1,
       },
    });
 
@@ -110,10 +103,5 @@ export const Playground = () => {
       updateBasicFxGUI();
    });
 
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={basic.texture} />
-      </mesh>
-   );
+   return <Output src={basic.texture} />;
 };
diff --git a/app/tests/useBlank/Playground.tsx b/app/tests/useBlank/Playground.tsx
index c454d8ef..9a7e32ab 100644
--- a/app/tests/useBlank/Playground.tsx
+++ b/app/tests/useBlank/Playground.tsx
@@ -1,11 +1,9 @@
 "use client";
 
-import { useFrame, useThree, extend } from "@react-three/fiber";
-import { createFxMaterialImpl, useBlank } from "@/packages/use-shader-fx/src";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useBlank } from "@/packages/use-shader-fx/src";
 import { useTexture } from "@react-three/drei";
-
-const FxMaterialImpl = createFxMaterialImpl();
-extend({ FxMaterialImpl });
+import { Output } from "../_utils/Output";
 
 /*===============================================
 vibe coded by ShaderGPT
@@ -82,10 +80,5 @@ export const Playground = () => {
       blank.render(state);
    });
 
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={blank.texture} />
-      </mesh>
-   );
+   return <Output src={blank.texture} />;
 };
diff --git a/app/tests/useBuffer/Playground.tsx b/app/tests/useBuffer/Playground.tsx
index 0edf39b1..c588728d 100644
--- a/app/tests/useBuffer/Playground.tsx
+++ b/app/tests/useBuffer/Playground.tsx
@@ -1,18 +1,10 @@
 "use client";
 
-import { useFrame, useThree, extend } from "@react-three/fiber";
-import {
-   createFxMaterialImpl,
-   FxMaterialImplValues,
-   useBuffer,
-   useFluid,
-   useNoise,
-} from "@/packages/use-shader-fx/src";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useBuffer, useFluid, useNoise } from "@/packages/use-shader-fx/src";
 import { useBasicFxGUI } from "../_utils/useBasicFxGUI";
 import { useTexture } from "@react-three/drei";
-
-const FxMaterialImpl = createFxMaterialImpl();
-extend({ FxMaterialImpl });
+import { Output } from "../_utils/Output";
 
 export const Playground = () => {
    const { size } = useThree();
@@ -30,7 +22,7 @@ export const Playground = () => {
       dpr: 1,
       texture: {
          src: mask,
-         fit: "contain",
+         fit: 2,
       },
    });
 
@@ -57,10 +49,5 @@ export const Playground = () => {
       updateBasicFxGUI();
    });
 
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={basic.texture} />
-      </mesh>
-   );
+   return <Output src={basic.texture} />;
 };
diff --git a/app/tests/useFluid/Playground.tsx b/app/tests/useFluid/Playground.tsx
index fa968507..8e95e41c 100644
--- a/app/tests/useFluid/Playground.tsx
+++ b/app/tests/useFluid/Playground.tsx
@@ -1,18 +1,10 @@
 "use client";
 
-import * as THREE from "three";
-import { useFrame, useThree, extend } from "@react-three/fiber";
-import {
-   createFxMaterialImpl,
-   FxMaterialImplValues,
-   useFluid,
-   useNoise,
-} from "@/packages/use-shader-fx/src";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useFluid, useNoise } from "@/packages/use-shader-fx/src";
 import { useBasicFxGUI } from "../_utils/useBasicFxGUI";
 import { useTexture } from "@react-three/drei";
-
-const FxMaterialImpl = createFxMaterialImpl();
-extend({ FxMaterialImpl });
+import { Output } from "../_utils/Output";
 
 export const Playground = () => {
    const { size } = useThree();
@@ -48,10 +40,5 @@ export const Playground = () => {
       updateBasicFxGUI();
    });
 
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={fluid.texture} />
-      </mesh>
-   );
+   return <Output src={fluid.texture} />;
 };
diff --git a/app/tests/useGrid/Playground.tsx b/app/tests/useGrid/Playground.tsx
index b70a2f59..ec149bac 100644
--- a/app/tests/useGrid/Playground.tsx
+++ b/app/tests/useGrid/Playground.tsx
@@ -1,9 +1,7 @@
 "use client";
 import * as THREE from "three";
-import { useFrame, useThree, extend } from "@react-three/fiber";
+import { useFrame, useThree } from "@react-three/fiber";
 import {
-   createFxMaterialImpl,
-   FxMaterialImplValues,
    useBuffer,
    useFluid,
    useGrid,
@@ -11,9 +9,7 @@ import {
 } from "@/packages/use-shader-fx/src";
 import { useBasicFxGUI } from "../_utils/useBasicFxGUI";
 import { useTexture } from "@react-three/drei";
-
-const FxMaterialImpl = createFxMaterialImpl();
-extend({ FxMaterialImpl });
+import { Output } from "../_utils/Output";
 
 export const Playground = () => {
    const { size } = useThree();
@@ -87,10 +83,5 @@ export const Playground = () => {
       updateBasicFxGUI();
    });
 
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={grid.texture} />
-      </mesh>
-   );
+   return <Output src={grid.texture} />;
 };
diff --git a/app/tests/useNoise/Playground.tsx b/app/tests/useNoise/Playground.tsx
index 029815ef..27aa6c43 100644
--- a/app/tests/useNoise/Playground.tsx
+++ b/app/tests/useNoise/Playground.tsx
@@ -1,17 +1,10 @@
 "use client";
 
-import { useFrame, useThree, extend } from "@react-three/fiber";
-import {
-   createFxMaterialImpl,
-   FxMaterialImplValues,
-   useFluid,
-   useNoise,
-} from "@/packages/use-shader-fx/src";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useFluid, useNoise } from "@/packages/use-shader-fx/src";
 import { useBasicFxGUI } from "../_utils/useBasicFxGUI";
 import { useTexture } from "@react-three/drei";
-
-const FxMaterialImpl = createFxMaterialImpl();
-extend({ FxMaterialImpl });
+import { Output } from "../_utils/Output";
 
 export const Playground = () => {
    const { size } = useThree();
@@ -47,10 +40,5 @@ export const Playground = () => {
       updateBasicFxGUI();
    });
 
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={noise.texture} />
-      </mesh>
-   );
+   return <Output src={noise.texture} />;
 };
diff --git a/app/tests/useRawBlank-useBuffer/Playground.tsx b/app/tests/useRawBlank-useBuffer/Playground.tsx
index 5944251b..81916dc1 100644
--- a/app/tests/useRawBlank-useBuffer/Playground.tsx
+++ b/app/tests/useRawBlank-useBuffer/Playground.tsx
@@ -1,17 +1,10 @@
 "use client";
 
 import * as THREE from "three";
-import { useFrame, useThree, extend } from "@react-three/fiber";
-import {
-   createFxMaterialImpl,
-   useFluid,
-   useRawBlank,
-   useBuffer,
-} from "@/packages/use-shader-fx/src";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useFluid, useRawBlank, useBuffer } from "@/packages/use-shader-fx/src";
 import { useBasicFxGUI } from "../_utils/useBasicFxGUI";
-
-const FxMaterialImpl = createFxMaterialImpl();
-extend({ FxMaterialImpl });
+import { Output } from "../_utils/Output";
 
 export const Playground = () => {
    const { size } = useThree();
@@ -183,7 +176,7 @@ export const Playground = () => {
       dpr: 1,
       texture: {
          src: rawShader.texture,
-         fit: "fill",
+         fit: 0,
       },
    });
 
@@ -207,10 +200,5 @@ export const Playground = () => {
       updateBasicFxGUI();
    });
 
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={basic.texture} />
-      </mesh>
-   );
+   return <Output src={basic.texture} />;
 };
diff --git a/app/tests/useRawBlank/Playground.tsx b/app/tests/useRawBlank/Playground.tsx
index 4c2827e7..fc2ed416 100644
--- a/app/tests/useRawBlank/Playground.tsx
+++ b/app/tests/useRawBlank/Playground.tsx
@@ -1,15 +1,8 @@
 "use client";
 
-import * as THREE from "three";
-import { useFrame, useThree, extend } from "@react-three/fiber";
-import {
-   createFxMaterialImpl,
-   useFluid,
-   useRawBlank,
-} from "@/packages/use-shader-fx/src";
-
-const FxMaterialImpl = createFxMaterialImpl();
-extend({ FxMaterialImpl });
+import { useFrame, useThree } from "@react-three/fiber";
+import { useFluid, useRawBlank } from "@/packages/use-shader-fx/src";
+import { Output } from "../_utils/Output";
 
 export const Playground = () => {
    const { size } = useThree();
@@ -51,10 +44,5 @@ export const Playground = () => {
       fluid.render(state);
    });
 
-   return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterialImpl key={FxMaterialImpl.key} src={rawShader.texture} />
-      </mesh>
-   );
+   return <Output src={rawShader.texture} />;
 };
diff --git a/packages/use-shader-fx/src/hooks/index.ts b/packages/use-shader-fx/src/hooks/index.ts
index 035219a8..a4370d9c 100644
--- a/packages/use-shader-fx/src/hooks/index.ts
+++ b/packages/use-shader-fx/src/hooks/index.ts
@@ -5,7 +5,6 @@ export type FxTypes = typeof useNoise;
 export type FxProps<T> = T extends typeof useNoise ? NoiseProps : never;
 
 export * from "./useNoise";
-export * from "./useRGBShift";
 export * from "./useFluid";
 export * from "./useBuffer";
 export * from "./useRawBlank";
diff --git a/packages/use-shader-fx/src/hooks/useRGBShift/index.tsx b/packages/use-shader-fx/src/hooks/useRGBShift/index.tsx
deleted file mode 100644
index 651e4781..00000000
--- a/packages/use-shader-fx/src/hooks/useRGBShift/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useCallback } from "react";
-import { HooksProps, HooksReturn } from "../types";
-import { getDpr, useSetup } from "../../utils";
-import { RootState } from "../types";
-import { RGBShiftMaterial, RGBShiftValues } from "../../materials";
-import { useSingleFBO } from "../../utils/useSingleFBO";
-
-type RGBShiftValuesAndConfig = RGBShiftValues;
-export type RGBShiftProps = HooksProps & RGBShiftValuesAndConfig;
-
-/**
- * @link https://github.com/FunTechInc/use-shader-fx?tab=readme-ov-file#usage
- */
-export const useRGBShift = ({
-   size,
-   dpr,
-   fboAutoSetSize,
-   renderTargetOptions,
-   materialParameters,
-   ...uniformValues
-}: RGBShiftProps): HooksReturn<RGBShiftValuesAndConfig, RGBShiftMaterial> => {
-   const _dpr = getDpr(dpr);
-
-   const { scene, material, camera } = useSetup({
-      size,
-      dpr: _dpr.shader,
-      material: RGBShiftMaterial,
-      uniformValues,
-      materialParameters,
-   });
-
-   const [renderTarget, updateRenderTarget] = useSingleFBO({
-      scene,
-      camera,
-      size,
-      dpr: _dpr.fbo,
-      fboAutoSetSize,
-      ...renderTargetOptions,
-   });
-
-   const setValues = useCallback(
-      (newValues: RGBShiftValuesAndConfig) => {
-         const { ...rest } = newValues;
-         material.setUniformValues(rest);
-      },
-      [material]
-   );
-
-   const render = useCallback(
-      (rootState: RootState, newValues?: RGBShiftValuesAndConfig) => {
-         const { gl } = rootState;
-         newValues && setValues(newValues);
-         updateRenderTarget({ gl });
-         return renderTarget.texture;
-      },
-      [setValues, updateRenderTarget, renderTarget]
-   );
-
-   return {
-      render,
-      setValues,
-      texture: renderTarget.texture,
-      material,
-      scene,
-      camera,
-      renderTarget,
-   };
-};
diff --git a/packages/use-shader-fx/src/materials/core/BasicFxMaterial.ts b/packages/use-shader-fx/src/materials/core/BasicFxMaterial.ts
index 780859ab..7f49327e 100644
--- a/packages/use-shader-fx/src/materials/core/BasicFxMaterial.ts
+++ b/packages/use-shader-fx/src/materials/core/BasicFxMaterial.ts
@@ -10,15 +10,13 @@ export class BasicFxMaterial extends FxMaterial {
    programCache: number;
 
    constructor({
-      uniformValues,
-      materialParameters = {},
       uniforms,
       vertexShader,
       fragmentShader,
+      ...rest
    }: FxMaterialProps<BasicFxLib.BasicFxValues> = {}) {
       super({
-         uniformValues,
-         materialParameters,
+         ...rest,
          uniforms: {
             ...THREE.UniformsUtils.clone(BasicFxLib.BASICFX_VALUES),
             ...uniforms,
@@ -26,7 +24,7 @@ export class BasicFxMaterial extends FxMaterial {
       });
 
       this.defines = {
-         ...materialParameters?.defines,
+         ...rest?.materialParameters?.defines,
       };
 
       this.programCache = 0;
@@ -184,12 +182,13 @@ export class BasicFxMaterial extends FxMaterial {
    protected _defineUniformAccessors(onSet?: () => void) {
       super._defineUniformAccessors(() => {
          this._updateFxShaders();
+         this._updateFitScale();
          onSet?.();
       });
    }
 
-   public updateResolution(resolution: THREE.Vector2): void {
-      super.updateResolution(resolution);
+   public updateResolution(width: number, height: number): void {
+      super.updateResolution(width, height);
       this._updateFitScale();
    }
 }
diff --git a/packages/use-shader-fx/src/materials/core/FxMaterial.ts b/packages/use-shader-fx/src/materials/core/FxMaterial.ts
index 5564deff..ab8417cb 100644
--- a/packages/use-shader-fx/src/materials/core/FxMaterial.ts
+++ b/packages/use-shader-fx/src/materials/core/FxMaterial.ts
@@ -5,6 +5,7 @@ import {
    ShaderWithUniforms,
 } from "../../shaders/uniformsUtils";
 import { warn } from "../../utils";
+import { Size } from "../../hooks/types";
 
 export type DefaultUniforms = {
    resolution: { value: THREE.Vector2 };
@@ -50,8 +51,7 @@ export class FxMaterial extends THREE.ShaderMaterial {
    }
 
    /** This is updated in useFxScene */
-   public updateResolution(resolution: THREE.Vector2) {
-      const { width, height } = resolution;
+   public updateResolution(width: number, height: number) {
       const maxAspect = Math.max(width, height);
       this.uniforms.resolution.value.set(width, height);
       this.uniforms.texelSize.value.set(1 / width, 1 / height);
diff --git a/packages/use-shader-fx/src/materials/core/SamplingFxMaterial.ts b/packages/use-shader-fx/src/materials/core/SamplingFxMaterial.ts
index 378e8f52..b9309726 100644
--- a/packages/use-shader-fx/src/materials/core/SamplingFxMaterial.ts
+++ b/packages/use-shader-fx/src/materials/core/SamplingFxMaterial.ts
@@ -41,18 +41,9 @@ const SAMPLINGFX_VALUES: SamplingFxUniformsUnique & SamplingFxUniformsFitScale =
 export class SamplingFxMaterial extends BasicFxMaterial {
    uniforms!: SamplingFxUniforms;
 
-   constructor({
-      uniformValues,
-      materialParameters = {},
-      uniforms,
-      vertexShader,
-      fragmentShader,
-   }: FxMaterialProps<SamplingFxValues>) {
+   constructor({ uniforms, ...rest }: FxMaterialProps<SamplingFxValues>) {
       super({
-         vertexShader,
-         fragmentShader,
-         uniformValues,
-         materialParameters,
+         ...rest,
          uniforms: {
             ...THREE.UniformsUtils.clone(SAMPLINGFX_VALUES),
             ...uniforms,
diff --git a/packages/use-shader-fx/src/materials/impl/BasicFxMaterialImpl.ts b/packages/use-shader-fx/src/materials/impl/BasicFxMaterialImpl.ts
deleted file mode 100644
index 07d65f1d..00000000
--- a/packages/use-shader-fx/src/materials/impl/BasicFxMaterialImpl.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as THREE from "three";
-import { FxMaterialProps } from "../core/FxMaterial";
-import { ShaderLib } from "../../shaders/ShaderLib";
-import { BasicFxMaterial } from "../core/BasicFxMaterial";
-import { BasicFxUniforms, BasicFxValues } from "../core/BasicFxMaterial";
-import {
-   NestUniformValues,
-   ShaderWithUniforms,
-} from "../../shaders/uniformsUtils";
-
-type BasicFxMaterialImplUniforms = {
-   src: { value: THREE.Texture };
-} & BasicFxUniforms;
-
-export type BasicFxMaterialImplValues =
-   NestUniformValues<BasicFxMaterialImplUniforms> & BasicFxValues;
-
-const DEFAULT_VERTEX = `
-	void main() {
-		${ShaderLib.plane_vertex}
-	}
-`;
-
-const DEFAULT_FRAGMENT = `
-	uniform sampler2D src;
-	void main() {
-
-		vec2 usf_Uv = vUv;
-
-		${ShaderLib.basicFx_fragment_begin}
-
-		vec4 usf_FragColor = texture2D(src, usf_Uv);
-
-		${ShaderLib.basicFx_fragment_end}
-
-		gl_FragColor = usf_FragColor;
-
-	}
-`;
-
-export const createBasicFxMaterialImpl = ({
-   uniforms,
-   vertexShader = DEFAULT_VERTEX,
-   fragmentShader = DEFAULT_FRAGMENT,
-}: ShaderWithUniforms = {}) => {
-   class BasicFxMaterialImpl extends BasicFxMaterial {
-      public static readonly key: string = THREE.MathUtils.generateUUID();
-
-      static get type() {
-         return "BasicFxMaterialImpl";
-      }
-
-      uniforms!: BasicFxMaterialImplUniforms;
-
-      constructor(props: FxMaterialProps<BasicFxMaterialImplValues>) {
-         super({
-            vertexShader: props?.vertexShader || vertexShader,
-            fragmentShader: props?.fragmentShader || fragmentShader,
-            uniformValues: props?.uniformValues,
-            materialParameters: props?.materialParameters,
-            uniforms: {
-               src: { value: null },
-               ...uniforms,
-               ...props?.uniforms,
-            },
-         });
-
-         this.type = BasicFxMaterialImpl.type;
-      }
-   }
-
-   return BasicFxMaterialImpl as typeof BasicFxMaterialImpl & {
-      key: string;
-   };
-};
diff --git a/packages/use-shader-fx/src/materials/impl/FxMaterialImpl.ts b/packages/use-shader-fx/src/materials/impl/FxMaterialImpl.ts
deleted file mode 100644
index d17a62b2..00000000
--- a/packages/use-shader-fx/src/materials/impl/FxMaterialImpl.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as THREE from "three";
-import {
-   DefaultUniforms,
-   FxMaterial,
-   FxMaterialProps,
-} from "../core/FxMaterial";
-import { ShaderLib } from "../../shaders/ShaderLib";
-import { DEFAULT_TEXTURE } from "../../libs/constants";
-import {
-   ShaderWithUniforms,
-   NestUniformValues,
-} from "../../shaders/uniformsUtils";
-
-type FxMaterialImplUniforms = {
-   src: { value: THREE.Texture };
-} & DefaultUniforms;
-
-export type FxMaterialImplValues = NestUniformValues<FxMaterialImplUniforms>;
-
-const DEFAULT_VERTEX = `
-	void main() {
-		${ShaderLib.plane_vertex}
-	}
-`;
-
-const DEFAULT_FRAGMENT = `
-	uniform sampler2D src;
-	void main() {
-		gl_FragColor = texture2D(src, vUv);
-	}
-`;
-
-export const createFxMaterialImpl = ({
-   uniforms,
-   vertexShader = DEFAULT_VERTEX,
-   fragmentShader = DEFAULT_FRAGMENT,
-}: ShaderWithUniforms = {}) => {
-   class FxMaterialImpl extends FxMaterial {
-      public static readonly key: string = THREE.MathUtils.generateUUID();
-
-      static get type() {
-         return "FxMaterialImpl";
-      }
-
-      uniforms!: FxMaterialImplUniforms;
-
-      constructor(props: FxMaterialProps<FxMaterialImplValues>) {
-         super({
-            vertexShader: props?.vertexShader || vertexShader,
-            fragmentShader: props?.fragmentShader || fragmentShader,
-            uniformValues: props?.uniformValues,
-            materialParameters: props?.materialParameters,
-            uniforms: {
-               src: { value: DEFAULT_TEXTURE },
-               ...uniforms,
-               ...props?.uniforms,
-            },
-         });
-
-         this.type = FxMaterialImpl.type;
-      }
-   }
-
-   return FxMaterialImpl as typeof FxMaterialImpl & {
-      key: string;
-   };
-};
diff --git a/packages/use-shader-fx/src/materials/impl/blank/BlankMaterial.ts b/packages/use-shader-fx/src/materials/impl/blank/BlankMaterial.ts
index 33d92bbb..ab672e1f 100644
--- a/packages/use-shader-fx/src/materials/impl/blank/BlankMaterial.ts
+++ b/packages/use-shader-fx/src/materials/impl/blank/BlankMaterial.ts
@@ -26,9 +26,9 @@ export class BlankMaterial extends FxMaterial {
    uniforms!: BlankUniforms;
 
    constructor({
-      uniforms,
       vertexShader,
       fragmentShader,
+      uniforms,
       ...rest
    }: FxMaterialProps) {
       super({
diff --git a/packages/use-shader-fx/src/materials/impl/buffer/BufferMaterial.ts b/packages/use-shader-fx/src/materials/impl/buffer/BufferMaterial.ts
index b4b5d6aa..798eddde 100644
--- a/packages/use-shader-fx/src/materials/impl/buffer/BufferMaterial.ts
+++ b/packages/use-shader-fx/src/materials/impl/buffer/BufferMaterial.ts
@@ -1,3 +1,4 @@
+import * as THREE from "three";
 import {
    SamplingFxUniforms,
    SamplingFxValues,
@@ -10,6 +11,14 @@ import {
 } from "../../../shaders/uniformsUtils";
 import { ShaderLib } from "../../../shaders/ShaderLib";
 
+/*===============================================
+memo
+
+- BufferMaterialはMaterialをそのまま、r3fでextendしてコンポーネントとして使うケースが考えられる
+ので、keyを持たせる
+- また、globalで型定義する
+===============================================*/
+
 type BufferUniforms = SamplingFxUniforms;
 
 export type BufferValues = NestUniformValues<BufferUniforms> & SamplingFxValues;
@@ -17,17 +26,17 @@ export type BufferValues = NestUniformValues<BufferUniforms> & SamplingFxValues;
 export type BufferMaterialProps = ExtractUniformValues<BufferUniforms>;
 
 export class BufferMaterial extends SamplingFxMaterial {
+   public static readonly key: string = THREE.MathUtils.generateUUID();
+
    static get type() {
       return "BufferMaterial";
    }
 
    uniforms!: BufferUniforms;
 
-   constructor({
-      uniformValues,
-      materialParameters = {},
-   }: FxMaterialProps<BufferValues>) {
+   constructor(props: FxMaterialProps<BufferValues> = {}) {
       super({
+         ...props,
          vertexShader: `
 				void main() {
 					${ShaderLib.plane_vertex}
@@ -46,10 +55,19 @@ export class BufferMaterial extends SamplingFxMaterial {
 					gl_FragColor = usf_FragColor;
 				}
 			`,
-         uniformValues,
-         materialParameters,
       });
 
       this.type = BufferMaterial.type;
    }
 }
+
+declare global {
+   namespace JSX {
+      interface IntrinsicElements {
+         bufferMaterial: BufferMaterialProps & {
+            ref?: React.RefObject<BufferMaterial>;
+            key?: React.Key;
+         };
+      }
+   }
+}
diff --git a/packages/use-shader-fx/src/materials/impl/fluid/AdvectionMaterial.ts b/packages/use-shader-fx/src/materials/impl/fluid/AdvectionMaterial.ts
index 973a3e95..28840337 100755
--- a/packages/use-shader-fx/src/materials/impl/fluid/AdvectionMaterial.ts
+++ b/packages/use-shader-fx/src/materials/impl/fluid/AdvectionMaterial.ts
@@ -25,15 +25,11 @@ export class AdvectionMaterial extends FxMaterial {
 
    uniforms!: AdvectionUniforms;
 
-   constructor({
-      uniformValues,
-      materialParameters = {},
-   }: FxMaterialProps<AdvectionValues>) {
+   constructor(props: FxMaterialProps<AdvectionValues>) {
       super({
+         ...props,
          vertexShader: vertex.advection,
          fragmentShader: fragment,
-         uniformValues,
-         materialParameters,
          uniforms: {
             dissipation: { value: 0.99 },
             velocity: { value: DEFAULT_TEXTURE },
diff --git a/packages/use-shader-fx/src/materials/impl/fluid/DivergenceMaterial.ts b/packages/use-shader-fx/src/materials/impl/fluid/DivergenceMaterial.ts
index 46427f97..3e05aeb3 100755
--- a/packages/use-shader-fx/src/materials/impl/fluid/DivergenceMaterial.ts
+++ b/packages/use-shader-fx/src/materials/impl/fluid/DivergenceMaterial.ts
@@ -25,15 +25,11 @@ export class DivergenceMaterial extends FxMaterial {
 
    uniforms!: DivergenceUniforms;
 
-   constructor({
-      uniformValues,
-      materialParameters = {},
-   }: FxMaterialProps<DivergenceValues>) {
+   constructor(props: FxMaterialProps<DivergenceValues>) {
       super({
+         ...props,
          vertexShader: vertex.main,
          fragmentShader: fragment,
-         uniformValues,
-         materialParameters,
          uniforms: {
             bounce: { value: true },
             velocity: { value: DEFAULT_TEXTURE },
diff --git a/packages/use-shader-fx/src/materials/impl/fluid/OutputMaterial.ts b/packages/use-shader-fx/src/materials/impl/fluid/OutputMaterial.ts
index 95184d37..197abb46 100755
--- a/packages/use-shader-fx/src/materials/impl/fluid/OutputMaterial.ts
+++ b/packages/use-shader-fx/src/materials/impl/fluid/OutputMaterial.ts
@@ -19,13 +19,9 @@ export class OutputMaterial extends BasicFxMaterial {
 
    uniforms!: OutputUniforms;
 
-   constructor({
-      uniformValues,
-      materialParameters = {},
-   }: FxMaterialProps<OutputValues> = {}) {
+   constructor(props: FxMaterialProps<OutputValues> = {}) {
       super({
-         uniformValues,
-         materialParameters,
+         ...props,
          vertexShader: `
 				void main() {
 					${ShaderLib.plane_vertex}
diff --git a/packages/use-shader-fx/src/materials/impl/fluid/PoissonMaterial.ts b/packages/use-shader-fx/src/materials/impl/fluid/PoissonMaterial.ts
index 92785aef..2b5531dc 100755
--- a/packages/use-shader-fx/src/materials/impl/fluid/PoissonMaterial.ts
+++ b/packages/use-shader-fx/src/materials/impl/fluid/PoissonMaterial.ts
@@ -29,16 +29,11 @@ export class PoissonMaterial extends FxMaterial {
 
    iterations: number;
 
-   constructor({
-      uniformValues,
-      materialParameters = {},
-      customParameters,
-   }: FxMaterialProps<PoissonValues>) {
+   constructor({ customParameters, ...rest }: FxMaterialProps<PoissonValues>) {
       super({
+         ...rest,
          vertexShader: vertex.poisson,
          fragmentShader: fragment,
-         uniformValues,
-         materialParameters,
          uniforms: {
             bounce: { value: true },
             pressure: { value: DEFAULT_TEXTURE },
diff --git a/packages/use-shader-fx/src/materials/impl/fluid/PressureMaterial.ts b/packages/use-shader-fx/src/materials/impl/fluid/PressureMaterial.ts
index d3dc1ca8..f21d3a50 100755
--- a/packages/use-shader-fx/src/materials/impl/fluid/PressureMaterial.ts
+++ b/packages/use-shader-fx/src/materials/impl/fluid/PressureMaterial.ts
@@ -29,15 +29,11 @@ export class PressureMaterial extends FxMaterial {
 
    uniforms!: PressureUniforms;
 
-   constructor({
-      uniformValues,
-      materialParameters = {},
-   }: FxMaterialProps<PressureValues>) {
+   constructor(props: FxMaterialProps<PressureValues>) {
       super({
+         ...props,
          vertexShader: vertex.main,
          fragmentShader: fragment,
-         uniformValues,
-         materialParameters,
          uniforms: {
             bounce: { value: true },
             deltaTime: { value: DELTA_TIME },
diff --git a/packages/use-shader-fx/src/materials/impl/fluid/SplatMaterial.ts b/packages/use-shader-fx/src/materials/impl/fluid/SplatMaterial.ts
index 908d6abe..b19e3fbf 100755
--- a/packages/use-shader-fx/src/materials/impl/fluid/SplatMaterial.ts
+++ b/packages/use-shader-fx/src/materials/impl/fluid/SplatMaterial.ts
@@ -25,16 +25,11 @@ export class SplatMaterial extends FxMaterial {
 
    forceBias: number;
 
-   constructor({
-      uniformValues,
-      materialParameters = {},
-      customParameters,
-   }: FxMaterialProps) {
+   constructor({ customParameters, ...rest }: FxMaterialProps) {
       super({
+         ...rest,
          vertexShader: vertex.splat,
          fragmentShader: fragment,
-         uniformValues,
-         materialParameters,
          uniforms: {
             force: { value: new THREE.Vector2(0, 0) },
             center: { value: new THREE.Vector2(0, 0) },
diff --git a/packages/use-shader-fx/src/materials/impl/grid/GridMaterial.ts b/packages/use-shader-fx/src/materials/impl/grid/GridMaterial.ts
index b7e4fdad..69455e25 100644
--- a/packages/use-shader-fx/src/materials/impl/grid/GridMaterial.ts
+++ b/packages/use-shader-fx/src/materials/impl/grid/GridMaterial.ts
@@ -40,13 +40,9 @@ export class GridMaterial extends SamplingFxMaterial {
 
    uniforms!: GridUniforms;
 
-   constructor({
-      uniformValues,
-      materialParameters = {},
-   }: FxMaterialProps<GridValues>) {
+   constructor(props: FxMaterialProps<GridValues>) {
       super({
-         uniformValues,
-         materialParameters,
+         ...props,
          vertexShader: gridVertex,
          fragmentShader: gridFragment,
          uniforms: {
diff --git a/packages/use-shader-fx/src/materials/impl/noise/NoiseMaterial.ts b/packages/use-shader-fx/src/materials/impl/noise/NoiseMaterial.ts
index 21c48c43..84ce80cf 100644
--- a/packages/use-shader-fx/src/materials/impl/noise/NoiseMaterial.ts
+++ b/packages/use-shader-fx/src/materials/impl/noise/NoiseMaterial.ts
@@ -42,13 +42,9 @@ export class NoiseMaterial extends BasicFxMaterial {
 
    uniforms!: NoiseUniforms;
 
-   constructor({
-      uniformValues,
-      materialParameters = {},
-   }: FxMaterialProps<NoiseValues> = {}) {
+   constructor(props: FxMaterialProps<NoiseValues> = {}) {
       super({
-         uniformValues,
-         materialParameters,
+         ...props,
          vertexShader: noiseVertex,
          fragmentShader: noiseFragment,
          uniforms: {
diff --git a/packages/use-shader-fx/src/materials/impl/rgbShift/RGBShiftMaterial.ts b/packages/use-shader-fx/src/materials/impl/rgbShift/RGBShiftMaterial.ts
deleted file mode 100644
index 7804bb20..00000000
--- a/packages/use-shader-fx/src/materials/impl/rgbShift/RGBShiftMaterial.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as THREE from "three";
-import {
-   SamplingFxUniforms,
-   SamplingFxValues,
-   SamplingFxMaterial,
-} from "../../core/SamplingFxMaterial";
-import { fragment, vertex } from "./rgbShift.glsl";
-import { FxMaterialProps } from "../../core/FxMaterial";
-import { NestUniformValues } from "../../../shaders/uniformsUtils";
-import { TexturePipelineSrc } from "../../../misc";
-
-type RGBShiftUniforms = {
-   shiftPower: { value: THREE.Vector2 };
-   // TODO * ネストして、条件判定用のparantKeyで判定する（flattenUniformValues）
-   shiftPowerSrcR: { value: TexturePipelineSrc };
-   isUseShiftPowerSrcR: { value: boolean };
-   shiftPowerSrcG: { value: TexturePipelineSrc };
-   isUseShiftPowerSrcG: { value: boolean };
-   shiftPowerSrcB: { value: TexturePipelineSrc };
-   isUseShiftPowerSrcB: { value: boolean };
-   shiftScale: { value: number };
-} & SamplingFxUniforms;
-
-export type RGBShiftValues = NestUniformValues<RGBShiftUniforms> &
-   SamplingFxValues;
-
-export class RGBShiftMaterial extends SamplingFxMaterial {
-   static get type() {
-      return "RGBShiftMaterial";
-   }
-
-   uniforms!: RGBShiftUniforms;
-
-   constructor({
-      uniformValues,
-      materialParameters = {},
-   }: FxMaterialProps<RGBShiftValues>) {
-      super({
-         vertexShader: vertex,
-         fragmentShader: fragment,
-         uniformValues,
-         materialParameters,
-         uniforms: {
-            shiftPower: { value: new THREE.Vector2(1, 1) },
-            shiftPowerSrcR: { value: null },
-            isUseShiftPowerSrcR: { value: false },
-            shiftPowerSrcG: { value: null },
-            isUseShiftPowerSrcG: { value: false },
-            shiftPowerSrcB: { value: null },
-            isUseShiftPowerSrcB: { value: false },
-            shiftScale: { value: 0.01 },
-         } as RGBShiftUniforms,
-      });
-
-      this.type = RGBShiftMaterial.type;
-   }
-}
diff --git a/packages/use-shader-fx/src/materials/impl/rgbShift/rgbShift.glsl.ts b/packages/use-shader-fx/src/materials/impl/rgbShift/rgbShift.glsl.ts
deleted file mode 100644
index 78d1200a..00000000
--- a/packages/use-shader-fx/src/materials/impl/rgbShift/rgbShift.glsl.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { ShaderLib } from "../../../shaders/ShaderLib";
-
-export const vertex = `
-	void main() {
-		${ShaderLib.plane_vertex}
-	}
-`;
-
-/*===============================================
-TODO 
-- shiftがvec2なので、vec3にする。
-	- たぶんshiftPowerSrcをつくる過程でvec2にしたっぽい
-===============================================*/
-
-export const fragment = `
-	
-	uniform vec2 shiftPower;
-	
-	uniform sampler2D shiftPowerSrcR;
-	uniform bool isUseShiftPowerSrcR;
-	uniform sampler2D shiftPowerSrcG;
-	uniform bool isUseShiftPowerSrcG;
-	uniform sampler2D shiftPowerSrcB;
-	uniform bool isUseShiftPowerSrcB;
-	uniform float shiftScale;	
-
-	void main() {
-		vec2 usf_Uv = gl_FragCoord.xy;
-
-		${ShaderLib.basicFx_fragment_begin}
-
-		// vec2 shift = shiftPower * shiftScale;
-		vec2 shift = vec2(.5, .1);
-		vec2 uv = vTextureCoverUv;		
-
-		float r = 0.0;
-		if(isUseShiftPowerSrcR){		
-			vec2 shiftR = (texture2D(shiftPowerSrcR, uv).rg * 4.0 - 1.0) * shiftScale;
-			r = texture2D(texture_src, uv + shiftR).r;
-		} else {
-		 	r = texture2D(texture_src, uv + .03).r;
-		}
-
-		float g = 0.0;
-		if(isUseShiftPowerSrcG){
-			vec2 shiftG = (texture2D(shiftPowerSrcG, uv).rg * 4.0 - 1.0) * shiftScale;
-			g = texture2D(texture_src, uv + shiftG).g;
-		} else {
-			g = texture2D(texture_src, uv + .01).g;
-		}
-
-		float b = 0.0;
-		if(isUseShiftPowerSrcB){
-			vec2 shiftB = (texture2D(shiftPowerSrcB, uv).rg * 4.0 - 1.0) * shiftScale;
-			b = texture2D(texture_src, uv + shiftB).b;
-		} else {
-			b = texture2D(texture_src, uv + .02).b;
-		}
-
-
-		vec4 outColor = vec4(r, g, b, 1.0);
-
-		vec4 usf_FragColor = outColor;
-
-		${ShaderLib.basicFx_fragment_end}
-
-		gl_FragColor = outColor;
-		// gl_FragColor = vec4(1.,0.,0.,1.);
-
-	}
-`;
diff --git a/packages/use-shader-fx/src/materials/index.js b/packages/use-shader-fx/src/materials/index.js
index e3056f1b..b038f2bd 100644
--- a/packages/use-shader-fx/src/materials/index.js
+++ b/packages/use-shader-fx/src/materials/index.js
@@ -1,10 +1,6 @@
 export * from "./core/BasicFxLib";
 
-export * from "./impl/FxMaterialImpl";
-export * from "./impl/BasicFxMaterialImpl";
-
 export * from "./impl/noise/NoiseMaterial";
-export * from "./impl/rgbShift/RGBShiftMaterial";
 export * as FluidMaterials from "./impl/fluid";
 export * from "./impl/buffer/BufferMaterial";
 export * from "./impl/rawBlank/RawBlankMaterial";
diff --git a/packages/use-shader-fx/src/utils/useSetup.ts b/packages/use-shader-fx/src/utils/useSetup.ts
index b8892d6c..aae76e05 100644
--- a/packages/use-shader-fx/src/utils/useSetup.ts
+++ b/packages/use-shader-fx/src/utils/useSetup.ts
@@ -67,7 +67,7 @@ export const useSetup = <M extends FxMaterial>({
 
    // materialのresolutionはreactiveに更新する
    const resolution = useResolution(size, dpr);
-   _material.updateResolution(resolution);
+   _material.updateResolution(resolution.x, resolution.y);
 
    useObject3D(scene, _geometry, _material, THREE.Mesh);
 
diff --git a/utils/fxMaterial.tsx b/utils/fxMaterial.tsx
deleted file mode 100644
index 00581514..00000000
--- a/utils/fxMaterial.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as THREE from "three";
-import { shaderMaterial } from "@react-three/drei";
-
-declare global {
-   namespace JSX {
-      interface IntrinsicElements {
-         fxMaterial: any;
-      }
-   }
-}
-
-export type FxMaterialProps = {
-   u_fx: THREE.Texture | null;
-   /** Set it to 0.0 if you want it to be transparent. */
-   u_alpha: number | null;
-};
-
-export const FxMaterial = shaderMaterial(
-   {
-      u_fx: null,
-      u_alpha: 1.0,
-   },
-   `
-		varying vec2 vUv;
-		void main() {
-			vUv = uv;
-			gl_Position = vec4(position, 1.0);
-		}
-	`,
-   `
-		precision highp float;
-		varying vec2 vUv;
-		uniform sampler2D u_fx;
-		uniform float u_alpha;
-
-		void main() {
-			vec2 uv = vUv;
-			gl_FragColor = texture2D(u_fx, uv);
-			if(u_alpha > 0.0){
-				gl_FragColor.a = u_alpha;
-			}
-		}
-	`
-);