+ {/*
+
+
+ );
+}
diff --git a/app/test/004/Playground.tsx b/app/test/004/Playground.tsx
new file mode 100644
index 00000000..3a75e36c
--- /dev/null
+++ b/app/test/004/Playground.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import * as THREE from "three";
+import { useFrame, useThree, extend } from "@react-three/fiber";
+import {
+ createFxMaterialImpl,
+ createBasicFxMaterialImpl,
+ FxMaterialImplValues,
+ BasicFxMaterialImplValues,
+ useRGBShift
+} from "@/packages/use-shader-fx/src";
+import { useTexture } from "@react-three/drei";
+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 } = useThree();
+
+ const [app] = useTexture(["/dummy2.png"]);
+
+ const noise = useNoise({
+ size,
+ dpr: 1,
+ scale: 0.005,
+ timeOffset: 0,
+ })
+
+ const noise2 = useNoise({
+ size,
+ dpr: 1,
+ scale: 0.005,
+ timeOffset: .03,
+ })
+
+ const noise3 = useNoise({
+ size,
+ dpr: 1,
+ scale: 0.005,
+ timeOffset: .06,
+ })
+
+ const rgbShift = useRGBShift({
+ size,
+ dpr: 2,
+ shiftScale: .13,
+ 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: 'cover',
+ }
+ })
+
+ const motionBlur = useMotionBlur({
+ size,
+ dpr: 1,
+ texture: {
+ src: rgbShift.texture,
+ }
+ });
+
+ useFrame((state) => {
+ noise.render(state);
+ noise2.render(state);
+ noise3.render(state);
+ rgbShift.render(state);
+ motionBlur.render(state);
+ });
+
+ return (
+
+
*/}
+
+
+ );
+}
diff --git a/app/test/style.module.scss b/app/test/style.module.scss
new file mode 100644
index 00000000..8dbacb9d
--- /dev/null
+++ b/app/test/style.module.scss
@@ -0,0 +1,21 @@
+.page {
+ width: 100%;
+ padding: 6.4rem 2rem;
+}
+
+
+.ctt {
+ width: 100%;
+ max-width: 78rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item {
+ color: #fff;
+ font-size: 1rem;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
\ No newline at end of file
diff --git a/app/useBlank/FxMaterial.tsx b/app/useBlank/FxMaterial.tsx
deleted file mode 100644
index b87eac16..00000000
--- a/app/useBlank/FxMaterial.tsx
+++ /dev/null
@@ -1,38 +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;
-};
-
-export const FxMaterial = shaderMaterial(
- {
- u_fx: new THREE.Texture(),
- },
-
- `
- varying vec2 vUv;
- void main() {
- vUv = uv;
- gl_Position = vec4(position, 1.0);
- }
- `,
- `
- precision highp float;
- varying vec2 vUv;
- uniform sampler2D u_fx;
- void main() {
- vec2 uv = vUv;
- vec4 color = texture2D(u_fx, uv);
- gl_FragColor = color;
- }
- `
-);
diff --git a/app/useBlank/Playground.tsx b/app/useBlank/Playground.tsx
deleted file mode 100644
index 9a19c213..00000000
--- a/app/useBlank/Playground.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import { useCallback, useMemo } from "react";
-import { useFrame, useThree, extend } from "@react-three/fiber";
-import { useBlank, useCoverTexture } from "@/packages/use-shader-fx/src";
-import { FxMaterial } from "./FxMaterial";
-import { useVideoTexture } from "@react-three/drei";
-import { OnBeforeInitParameters } from "@/packages/use-shader-fx/src/fxs/types";
-
-extend({ FxMaterial });
-
-export const Playground = () => {
- const { size, viewport, gl } = useThree();
- const funkun_mov = useVideoTexture("/FT_Ch02-comp.mp4", {
- width: 1280,
- height: 720,
- });
- const [updateCover, setCover, { output: cover }] = useCoverTexture({
- size,
- dpr: 1,
- });
- setCover({
- texture: funkun_mov,
- });
- const [updateBlank, setBlank, { output: blank }] = useBlank({
- size,
- dpr: viewport.dpr,
- onBeforeInit: useCallback((params: OnBeforeInitParameters) => {
- Object.assign(params.uniforms, {
- hoge: { value: 0 },
- });
- params.fragmentShader = params.fragmentShader.replace(
- "#usf
+
+ -
+
- + 001: Noise + +
- + 002: GaussianBlur + +
- + 003: BoxBlur + +
-
-
-
- );
-}
diff --git a/app/useWobble3D/FxMaterial.tsx b/app/useWobble3D/FxMaterial.tsx
deleted file mode 100644
index d1a9c743..00000000
--- a/app/useWobble3D/FxMaterial.tsx
+++ /dev/null
@@ -1,38 +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;
-};
-
-export const FxMaterial = shaderMaterial(
- {
- u_fx: new THREE.Texture(),
- },
-
- `
- varying vec2 vUv;
- void main() {
- vUv = uv;
- gl_Position = vec4(position, 1.0);
- }
- `,
- `
- precision highp float;
- varying vec2 vUv;
- uniform sampler2D u_fx;
-
- void main() {
- gl_FragColor = texture2D(u_fx,vUv);
- // gl_FragColor = vec4(1.,1.,0.,1.);
- }
- `
-);
diff --git a/app/useWobble3D/Playground.tsx b/app/useWobble3D/Playground.tsx
deleted file mode 100644
index 1a1a63a8..00000000
--- a/app/useWobble3D/Playground.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-"use client";
-
-import * as THREE from "three";
-import { useEffect } from "react";
-import { useFrame, useThree, extend, useLoader } from "@react-three/fiber";
-import {
- useBeat,
- useCreateWobble3D,
- Wobble3DParams,
- WOBBLE3D_PARAMS,
- useWobble3D,
-} from "@/packages/use-shader-fx/src";
-import { FxMaterial } from "./FxMaterial";
-import GUI from "lil-gui";
-import { useGUI } from "@/utils/useGUI";
-import { OrbitControls, Environment } from "@react-three/drei";
-
-extend({ FxMaterial });
-
-const CONFIG: Wobble3DParams = {
- ...structuredClone(WOBBLE3D_PARAMS),
- color0: new THREE.Color(0x1adb91),
- color1: new THREE.Color(0xdbff57),
- color2: new THREE.Color(0xdf6bff),
- color3: new THREE.Color(0x9eaeff),
- wobbleStrength: 0.8,
- wobbleTimeFrequency: 0.4,
- warpStrength: 0.2,
- colorMix: 0.6,
- chromaticAberration: 0.8,
- anisotropicBlur: 0.2,
- distortion: 2,
- distortionScale: 0.8,
- temporalDistortion: 0.3,
- refractionSamples: 6,
-};
-
-const MATERIAL_CONFIG: THREE.MeshPhysicalMaterialParameters = {
- iridescence: 0,
- metalness: 0.0,
- roughness: 0.0,
- transmission: 0.99,
- thickness: 0.2,
- transparent: true,
-};
-
-const setGUI = (gui: GUI) => {
- gui.addColor(CONFIG, "color0");
- gui.addColor(CONFIG, "color1");
- gui.addColor(CONFIG, "color2");
- gui.addColor(CONFIG, "color3");
- gui.add(CONFIG, "wobbleStrength", 0, 10, 0.01);
- gui.add(CONFIG, "wobblePositionFrequency", 0, 10, 0.01);
- gui.add(CONFIG, "wobbleTimeFrequency", 0, 10, 0.01);
- gui.add(CONFIG, "warpStrength", 0, 10, 0.01);
- gui.add(CONFIG, "warpPositionFrequency", 0, 10, 0.01);
- gui.add(CONFIG, "warpTimeFrequency", 0, 10, 0.01);
- gui.add(CONFIG, "refractionSamples", 0, 10, 1);
- gui.add(CONFIG, "colorMix", 0, 1, 0.01);
- gui.add(CONFIG, "chromaticAberration", 0, 10, 0.01);
- gui.add(CONFIG, "anisotropicBlur", 0, 10, 0.01);
- gui.add(CONFIG, "distortion", 0, 10, 0.01);
- gui.add(CONFIG, "distortionScale", 0, 10, 0.01);
- gui.add(CONFIG, "temporalDistortion", 0, 10, 0.01);
- const mpm = gui.addFolder("MeshPhysicalMaterial");
- mpm.add(MATERIAL_CONFIG, "iridescence", 0, 1, 0.01);
- mpm.add(MATERIAL_CONFIG, "metalness", 0, 1, 0.01);
- mpm.add(MATERIAL_CONFIG, "roughness", 0, 1, 0.01);
- mpm.add(MATERIAL_CONFIG, "transmission", 0, 10, 0.01);
- mpm.add(MATERIAL_CONFIG, "thickness", 0, 10, 0.01);
- return gui;
-};
-const setConfig = () => {
- return {
- ...CONFIG,
- } as Wobble3DParams;
-};
-
-export const Playground = () => {
- const updateGUI = useGUI(setGUI);
- const [funkun] = useLoader(THREE.TextureLoader, ["/funkun.jpg"]);
-
- /*===============================================
- example of FBO
- ===============================================*/
- // const { size, viewport, camera } = useThree();
- // const [update, _, { output, scene }] = useWobble3D({
- // size,
- // dpr: viewport.dpr,
- // camera,
- // });
- // useEffect(() => {
- // const light = new THREE.AmbientLight(0xffffff, 2);
- // scene.add(light);
- // }, [scene]);
- // useFrame((props) => update(props));
-
- /*===============================================
- example of primitive
- ===============================================*/
- const [updateWobble, wobble] = useCreateWobble3D({
- baseMaterial: THREE.MeshPhysicalMaterial,
- materialParameters: MATERIAL_CONFIG,
- isCustomTransmission: true,
- depth: true,
- // onBeforeInit: (params) => {
- // console.log(params);
- // },
- });
- if (wobble.depthMaterial) {
- wobble.mesh.customDepthMaterial = wobble.depthMaterial;
- }
- wobble.mesh.receiveShadow = true;
- wobble.mesh.castShadow = true;
-
- const beat = useBeat(140, "easeInOutBack");
-
- useFrame((state) => {
- updateWobble(state, {
- ...setConfig(),
- beat: beat(state.clock).beat,
- });
- const mat = wobble.mesh.material as THREE.MeshPhysicalMaterial;
- mat.iridescence = MATERIAL_CONFIG.iridescence!;
- mat.metalness = MATERIAL_CONFIG.metalness!;
- mat.roughness = MATERIAL_CONFIG.roughness!;
- mat.transmission = MATERIAL_CONFIG.transmission!;
- mat.thickness = MATERIAL_CONFIG.thickness!;
- updateGUI();
- });
-
- return (
-
-
-
-
- );
-}
diff --git a/app/v2/FxMaterial.tsx b/app/v2/FxMaterial.tsx
new file mode 100644
index 00000000..df2cb704
--- /dev/null
+++ b/app/v2/FxMaterial.tsx
@@ -0,0 +1,121 @@
+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/v2/Playground.tsx b/app/v2/Playground.tsx
new file mode 100644
index 00000000..f60fe70f
--- /dev/null
+++ b/app/v2/Playground.tsx
@@ -0,0 +1,150 @@
+"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
+ {/*
+
+
+ );
+}
diff --git a/app/v2_fxMaterials/Playground.tsx b/app/v2_fxMaterials/Playground.tsx
new file mode 100644
index 00000000..6fcc76ad
--- /dev/null
+++ b/app/v2_fxMaterials/Playground.tsx
@@ -0,0 +1,41 @@
+"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
+
*/}
+
+
+ {/*
+
+
+ );
+}
diff --git a/app/v2_impl_colorAdjustments/Playground.tsx b/app/v2_impl_colorAdjustments/Playground.tsx
new file mode 100644
index 00000000..9fbf3c98
--- /dev/null
+++ b/app/v2_impl_colorAdjustments/Playground.tsx
@@ -0,0 +1,169 @@
+"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,
+ useCoverTexture,
+} 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.1, 0., 1.);
+ fluidColor.g *= clamp(fluidColor.g * 0.2, 0., 1.);
+ fluidColor.b *= clamp(fluidColor.b * .6, 0., 1.);
+ // THINK ここまでがデフォルトのfluidのcolor
+
+ // THINK ここからがbasicFxの色調補正
+ // THINK ガンマ補正とコントラストはvec4でやればいいのかも
+
+ vec4 outputColor = fluidColor;
+
+ /*===============================================
+ // レベル補正
+ ===============================================*/
+ float u_shadows = 1.2; // シャドウ値
+ float u_midtones = 1.1; // ミッドトーン値
+ float u_highlights = 1.4; // ハイライト値
+ float u_outputMin = 0.0; // 出力の最小値
+ float u_outputMax = 1.0; // 出力の最大値
+
+ // 入力レベル補正
+ 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);
+ /*===============================================
+ // コントラスト TODO これもvec4でuniformを渡す！ alphaだけコントラストかけたり！
+ ===============================================*/
+ // コントラスト
+ float contrastFactor = 20.;
+ outputColor = clamp(((outputColor-.5)*contrastFactor)+.5, 0., 1.);
+
+ /*===============================================
+ // color balance
+ ===============================================*/
+ outputColor.r *= clamp(outputColor.r * 1., 0., 1.);
+ outputColor.g *= clamp(outputColor.g * 1., 0., 1.);
+ outputColor.b *= clamp(outputColor.b * 1., 0., 1.);
+
+ /*===============================================
+ // saturation・brightness
+ ===============================================*/
+ vec3 hsv = rgb2hsv(outputColor.rgb);
+ hsv.y *= 1.; // 彩度
+ hsv.z *= 2.; // 明度
+ outputColor.rgb = hsv2rgb(hsv);
+
+ /*===============================================
+ // ポスタライゼーション
+ ===============================================*/
+ float posterizationLevels = 6.;
+ outputColor.rgb = floor(outputColor.rgb * posterizationLevels) / posterizationLevels;
+
+ /*===============================================
+ // black&White
+ ===============================================*/
+ float redWeight = 0.;
+ float greenWeight = 0.;
+ float blueWeight = 0.;
+ float grayscale = dot(outputColor.rgb, vec3(0.299 + redWeight, 0.587 + greenWeight, 0.114 + blueWeight));
+
+ outputColor.rgb = vec3(grayscale);
+
+ /*===============================================
+ // duo tone
+ ===============================================*/
+ 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.4;
+ // 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 (
+
+
*/}
+
+ {/*
+
+
+ );
+}
diff --git a/app/v2_mask/Playground.tsx b/app/v2_mask/Playground.tsx
new file mode 100644
index 00000000..61ea315b
--- /dev/null
+++ b/app/v2_mask/Playground.tsx
@@ -0,0 +1,95 @@
+"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 (
+
+
*/}
+
+
+
+
+ );
+}
diff --git a/app/v2_pipe/Playground.tsx b/app/v2_pipe/Playground.tsx
new file mode 100644
index 00000000..323715b3
--- /dev/null
+++ b/app/v2_pipe/Playground.tsx
@@ -0,0 +1,124 @@
+"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
+ くぁ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
+
+
+ {/*
+
+
+ );
+}
diff --git a/app/v2_test/Playground.tsx b/app/v2_test/Playground.tsx
new file mode 100644
index 00000000..b85f9505
--- /dev/null
+++ b/app/v2_test/Playground.tsx
@@ -0,0 +1,76 @@
+"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,
+} from "@/packages/use-shader-fx/src";
+import { Float, OrbitControls, useTexture } from "@react-three/drei";
+import { useGaussianBlur } from "@/packages/use-shader-fx/src/hooks/blur/useGaussianBlur";
+
+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 [app] = useTexture(["/app-head.jpg"]);
+
+ const blur = useGaussianBlur({
+ size,
+ dpr: 1,
+ radius: 21,
+ // blurIteration: 1,
+ // src: app,
+ texture: {
+ src: app,
+ }
+ });
+
+ blur.setValues({
+ radius: 41,
+ // blurIteration: 20,
+ });
+
+ useFrame((state) => {
+ blur.render(state);
+ });
+
+ return (
+
+
*/}
+
+ {/*
+
+
+ );
+}
diff --git a/packages/use-shader-fx/build/use-shader-fx.js b/packages/use-shader-fx/build/use-shader-fx.js
deleted file mode 100644
index 726d0fa2..00000000
--- a/packages/use-shader-fx/build/use-shader-fx.js
+++ /dev/null
@@ -1,4808 +0,0 @@
-import * as o from "three";
-import { useMemo as y, useEffect as Z, useRef as B, useCallback as _, useState as Be } from "react";
-import { mergeVertices as Ee } from "three-stdlib";
-var Le = "#usf
+
*/}
+