foundry-component-library 0.2.9 → 0.2.12

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl/composite.frag

@@ -0,0 +1,41 @@
+uniform sampler2D tFluid;
+
+uniform vec3 uColor;
+uniform vec3 uBackgroundColor;
+
+uniform float uDistort;
+uniform float uIntensity;
+uniform float uRainbow;
+uniform float uBlend;
+uniform float uShowBackground;
+
+void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+
+    vec3 fluidColor = texture2D(tFluid, uv).rgb;
+
+    vec2 distortedUv = uv - fluidColor.rg * uDistort * 0.001;
+
+    vec4 texture = texture2D(inputBuffer, distortedUv);
+
+    float intensity = length(fluidColor) * uIntensity * 0.0001;
+
+    vec3 selectedColor = uColor * length(fluidColor);
+
+    vec4 colorForFluidEffect = vec4(uRainbow == 1.0 ? fluidColor : selectedColor, 1.0);
+
+    vec4 computedBgColor = uShowBackground != 0.0 ? vec4(uBackgroundColor, 1.0) : vec4(0.0, 0.0, 0.0, 0.0);
+
+    outputColor = mix(texture, colorForFluidEffect, intensity);
+
+    vec4 computedFluidColor = mix(texture, colorForFluidEffect, uBlend * 0.01);
+
+    vec4 finalColor;
+
+    if(texture.a < 0.1) {
+        finalColor = mix(computedBgColor, colorForFluidEffect, intensity);
+    } else {
+        finalColor = mix(computedFluidColor, computedBgColor, 1.0 - texture.a);
+    }
+
+    outputColor = finalColor;
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl/curl.frag

@@ -0,0 +1,22 @@
+precision highp float;
+
+varying vec2 vL;
+varying vec2 vR;
+varying vec2 vT;
+varying vec2 vB;
+
+uniform sampler2D uVelocity;
+
+void main() {
+    float L = texture2D(uVelocity, vL).y;
+
+    float R = texture2D(uVelocity, vR).y;
+
+    float T = texture2D(uVelocity, vT).x;
+
+    float B = texture2D(uVelocity, vB).x;
+
+    float vorticity = R - L - T + B;
+
+    gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0);
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl/divergence.frag

@@ -0,0 +1,41 @@
+precision highp float;
+
+varying highp vec2 vUv;
+varying highp vec2 vL;
+varying highp vec2 vR;
+varying highp vec2 vT;
+varying highp vec2 vB;
+
+uniform sampler2D uVelocity;
+
+void main() {
+    float L = texture2D(uVelocity, vL).x;
+
+    float R = texture2D(uVelocity, vR).x;
+
+    float T = texture2D(uVelocity, vT).y;
+
+    float B = texture2D(uVelocity, vB).y;
+
+    vec2 C = texture2D(uVelocity, vUv).xy;
+
+    if(vL.x < 0.0) {
+        L = -C.x;
+    }
+
+    if(vR.x > 1.0) {
+        R = -C.x;
+    }
+
+    if(vT.y > 1.0) {
+        T = -C.y;
+    }
+
+    if(vB.y < 0.0) {
+        B = -C.y;
+    }
+
+    float div = 0.5 * (R - L + T - B);
+
+    gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl/gradientSubstract.frag

@@ -0,0 +1,26 @@
+precision highp float;
+
+varying highp vec2 vUv;
+varying highp vec2 vL;
+varying highp vec2 vR;
+varying highp vec2 vT;
+varying highp vec2 vB;
+
+uniform sampler2D uPressure;
+uniform sampler2D uVelocity;
+
+void main() {
+    float L = texture2D(uPressure, vL).x;
+
+    float R = texture2D(uPressure, vR).x;
+
+    float T = texture2D(uPressure, vT).x;
+
+    float B = texture2D(uPressure, vB).x;
+
+    vec2 velocity = texture2D(uVelocity, vUv).xy;
+
+    velocity.xy -= vec2(R - L, T - B);
+
+    gl_FragColor = vec4(velocity, 0.0, 1.0);
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl/pressure.frag

@@ -0,0 +1,28 @@
+precision highp float;
+
+varying highp vec2 vUv;
+varying highp vec2 vL;
+varying highp vec2 vR;
+varying highp vec2 vT;
+varying highp vec2 vB;
+
+uniform sampler2D uPressure;
+uniform sampler2D uDivergence;
+
+void main() {
+    float L = texture2D(uPressure, vL).x;
+
+    float R = texture2D(uPressure, vR).x;
+
+    float T = texture2D(uPressure, vT).x;
+
+    float B = texture2D(uPressure, vB).x;
+
+    float C = texture2D(uPressure, vUv).x;
+
+    float divergence = texture2D(uDivergence, vUv).x;
+
+    float pressure = (L + R + B + T - divergence) * 0.25;
+
+    gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl/splat.frag

@@ -0,0 +1,19 @@
+varying vec2 vUv;
+
+uniform sampler2D uTarget;
+uniform float aspectRatio;
+uniform vec3 uColor;
+uniform vec2 uPointer;
+uniform float uRadius;
+
+void main() {
+    vec2 p = vUv - uPointer.xy;
+
+    p.x *= aspectRatio;
+
+    vec3 splat = exp(-dot(p, p) / uRadius) * uColor;
+
+    vec3 base = texture2D(uTarget, vUv).xyz;
+
+    gl_FragColor = vec4(base + splat, 1.0);
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl/vorticity.frag

@@ -0,0 +1,36 @@
+precision highp float;
+
+varying vec2 vUv;
+varying vec2 vL;
+varying vec2 vR;
+varying vec2 vT;
+varying vec2 vB;
+
+uniform sampler2D uVelocity;
+uniform sampler2D uCurl;
+uniform float uCurlValue;
+uniform float dt;
+
+void main() {
+    float L = texture2D(uCurl, vL).x;
+
+    float R = texture2D(uCurl, vR).x;
+
+    float T = texture2D(uCurl, vT).x;
+
+    float B = texture2D(uCurl, vB).x;
+
+    float C = texture2D(uCurl, vUv).x;
+
+    vec2 force = vec2(abs(T) - abs(B), abs(R) - abs(L)) * 0.5;
+
+    force /= length(force) + 1.;
+
+    force *= uCurlValue * C;
+
+    force.y *= -1.;
+
+    vec2 vel = texture2D(uVelocity, vUv).xy;
+
+    gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl.d.ts

@@ -0,0 +1,14 @@
+declare module '*.glsl' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.vert' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.frag' {
+    const value: string;
+    export default value;
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/hooks/useDoubleFBO.tsx

@@ -0,0 +1,37 @@
+import * as THREE from 'three';
+import { useFBO, type FboProps } from '@react-three/drei';
+import { useRef } from 'react';
+
+type FBO = {
+    read: THREE.WebGLRenderTarget;
+    write: THREE.WebGLRenderTarget;
+    swap: () => void;
+    dispose: () => void;
+    setGenerateMipmaps: (value: boolean) => void;
+};
+
+export const useDoubleFBO = (width: number, height: number, options: FboProps) => {
+    const read = useFBO(width, height, options);
+
+    const write = useFBO(width, height, options);
+
+    const fbo = useRef<FBO>({
+        read,
+        write,
+        swap: () => {
+            const temp = fbo.read;
+            fbo.read = fbo.write;
+            fbo.write = temp;
+        },
+        dispose: () => {
+            read.dispose();
+            write.dispose();
+        },
+        setGenerateMipmaps: (value: boolean) => {
+            read.texture.generateMipmaps = value;
+            write.texture.generateMipmaps = value;
+        },
+    }).current;
+
+    return fbo;
+};

package/lib/components/ServiceHubsTeaserEffects/fluid/hooks/useFBOs.tsx

@@ -0,0 +1,71 @@
+import * as THREE from 'three';
+
+import { useFBO } from '@react-three/drei';
+import { useEffect, useMemo } from 'react';
+import { useDoubleFBO } from '../hooks/useDoubleFBO';
+import { DEFAULT_CONFIG } from '../constant';
+
+export const useFBOs = () => {
+    const density = useDoubleFBO(DEFAULT_CONFIG.dyeRes, DEFAULT_CONFIG.dyeRes, {
+        type: THREE.HalfFloatType,
+        format: THREE.RGBAFormat,
+        minFilter: THREE.LinearFilter,
+        depthBuffer: false,
+    });
+
+    const velocity = useDoubleFBO(DEFAULT_CONFIG.simRes, DEFAULT_CONFIG.simRes, {
+        type: THREE.HalfFloatType,
+        format: THREE.RGFormat,
+        minFilter: THREE.LinearFilter,
+        depthBuffer: false,
+    });
+
+    const pressure = useDoubleFBO(DEFAULT_CONFIG.simRes, DEFAULT_CONFIG.simRes, {
+        type: THREE.HalfFloatType,
+        format: THREE.RedFormat,
+        minFilter: THREE.NearestFilter,
+        depthBuffer: false,
+    });
+
+    const divergence = useFBO(DEFAULT_CONFIG.simRes, DEFAULT_CONFIG.simRes, {
+        type: THREE.HalfFloatType,
+        format: THREE.RedFormat,
+        minFilter: THREE.NearestFilter,
+        depthBuffer: false,
+    });
+
+    const curl = useFBO(DEFAULT_CONFIG.simRes, DEFAULT_CONFIG.simRes, {
+        type: THREE.HalfFloatType,
+        format: THREE.RedFormat,
+        minFilter: THREE.NearestFilter,
+        depthBuffer: false,
+    });
+
+    const FBOs = useMemo(() => {
+        return {
+            density,
+            velocity,
+            pressure,
+            divergence,
+            curl,
+        };
+    }, [curl, density, divergence, pressure, velocity]);
+
+    useEffect(() => {
+        for (const FBO of Object.values(FBOs)) {
+            if ('write' in FBO) {
+                FBO.setGenerateMipmaps(false);
+            } else {
+                FBO.texture.generateMipmaps = false;
+            }
+        }
+
+        return () => {
+            for (const FBO of Object.values(FBOs)) {
+                FBO.dispose();
+            }
+        };
+    }, [FBOs]);
+
+    return FBOs;
+};

package/lib/components/ServiceHubsTeaserEffects/fluid/hooks/useMaterials.tsx

@@ -0,0 +1,242 @@
+import { ShaderMaterial, Texture, Vector2, Vector3 } from "three";
+import { useEffect, useMemo } from "react";
+import { useThree } from "@react-three/fiber";
+import { DEFAULT_CONFIG, REFRESH_RATE } from "../constant";
+
+import baseVertex from "../glsl/base.vert?raw";
+import clearFrag from "../glsl/clear.frag?raw";
+import curlFrag from "../glsl/curl.frag?raw";
+import divergenceFrag from "../glsl/divergence.frag?raw";
+import gradientSubstractFrag from "../glsl/gradientSubstract.frag?raw";
+import pressureFrag from "../glsl/pressure.frag?raw";
+import splatFrag from "../glsl/splat.frag?raw";
+import advectionFrag from "../glsl/advection.frag?raw";
+import vorticityFrag from "../glsl/vorticity.frag?raw";
+
+export const useMaterials = (): { [key: string]: ShaderMaterial } => {
+  const size = useThree((s) => s.size);
+
+  const shaderMaterials = useMemo(() => {
+    const advection = new ShaderMaterial({
+      name: "Fluid/Advection",
+      uniforms: {
+        uVelocity: {
+          value: new Texture(),
+        },
+        uSource: {
+          value: new Texture(),
+        },
+        dt: {
+          value: 1 / REFRESH_RATE,
+        },
+        uDissipation: {
+          value: 1.0,
+        },
+        texelSize: { value: new Vector2() },
+      },
+      fragmentShader: advectionFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    const clear = new ShaderMaterial({
+      name: "Fluid/Clear",
+      uniforms: {
+        uTexture: {
+          value: new Texture(),
+        },
+        uClearValue: {
+          value: DEFAULT_CONFIG.pressure,
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: clearFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    const curl = new ShaderMaterial({
+      name: "Fluid/Curl",
+      uniforms: {
+        uVelocity: {
+          value: new Texture(),
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: curlFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_OFFSETS: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    const divergence = new ShaderMaterial({
+      name: "Fluid/Divergence",
+      uniforms: {
+        uVelocity: {
+          value: new Texture(),
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: divergenceFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+        USE_OFFSETS: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    const gradientSubstract = new ShaderMaterial({
+      name: "Fluid/GradientSubtract",
+      uniforms: {
+        uPressure: {
+          value: new Texture(),
+        },
+        uVelocity: {
+          value: new Texture(),
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: gradientSubstractFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+        USE_OFFSETS: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    const pressure = new ShaderMaterial({
+      name: "Fluid/Pressure",
+      uniforms: {
+        uPressure: {
+          value: new Texture(),
+        },
+        uDivergence: {
+          value: new Texture(),
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: pressureFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+        USE_OFFSETS: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    const splat = new ShaderMaterial({
+      name: "Fluid/Splat",
+      uniforms: {
+        uTarget: {
+          value: new Texture(),
+        },
+        aspectRatio: {
+          value: size.width / size.height,
+        },
+        uColor: {
+          value: new Vector3(),
+        },
+        uPointer: {
+          value: new Vector2(),
+        },
+        uRadius: {
+          value: DEFAULT_CONFIG.radius / 100.0,
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: splatFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    const vorticity = new ShaderMaterial({
+      name: "Fluid/Vorticity",
+      uniforms: {
+        uVelocity: {
+          value: new Texture(),
+        },
+        uCurl: {
+          value: new Texture(),
+        },
+        uCurlValue: {
+          value: DEFAULT_CONFIG.curl,
+        },
+        dt: {
+          value: 1 / REFRESH_RATE,
+        },
+        texelSize: {
+          value: new Vector2(),
+        },
+      },
+      fragmentShader: vorticityFrag,
+      vertexShader: baseVertex,
+      defines: {
+        USE_V_UV: "",
+        USE_OFFSETS: "",
+      },
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    return {
+      splat,
+      curl,
+      clear,
+      divergence,
+      pressure,
+      gradientSubstract,
+      advection,
+      vorticity,
+    };
+  }, [size]);
+
+  useEffect(() => {
+    for (const material of Object.values(shaderMaterials)) {
+      const aspectRatio = size.width / (size.height + 400);
+      material.uniforms.texelSize.value.set(
+        1 / (DEFAULT_CONFIG.simRes * aspectRatio),
+        1 / DEFAULT_CONFIG.simRes
+      );
+    }
+
+    return () => {
+      for (const material of Object.values(shaderMaterials)) {
+        material.dispose();
+      }
+    };
+  }, [shaderMaterials, size]);
+
+  return shaderMaterials;
+};

package/lib/components/ServiceHubsTeaserEffects/fluid/hooks/usePointer.tsx

@@ -0,0 +1,54 @@
+import { useThree } from '@react-three/fiber';
+import { useCallback, useEffect, useRef } from 'react';
+import { Vector2 } from 'three';
+
+type SplatStack = {
+  mouseX: number;
+  mouseY: number;
+  velocityX: number;
+  velocityY: number;
+};
+
+export const usePointer = ({ force }: { force: number }) => {
+  const { size, gl } = useThree();
+
+  const splatStack = useRef<SplatStack[]>([]).current;
+  const lastMouse = useRef(new Vector2());
+  const hasMoved = useRef(false);
+
+  const onPointerMove = useCallback(
+    (event: PointerEvent) => {
+      const rect = gl.domElement.getBoundingClientRect();
+
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+
+      const deltaX = x - lastMouse.current.x;
+      const deltaY = y - lastMouse.current.y;
+
+      if (!hasMoved.current) {
+        hasMoved.current = true;
+        lastMouse.current.set(x, y);
+        return;
+      }
+
+      lastMouse.current.set(x, y);
+
+      splatStack.push({
+        mouseX: x / size.width,
+        mouseY: 1 - y / size.height,
+        velocityX: deltaX * force,
+        velocityY: -deltaY * force,
+      });
+    },
+    [force, size.width, size.height, gl, splatStack],
+  );
+
+  useEffect(() => {
+    const el = gl.domElement;
+    el.addEventListener('pointermove', onPointerMove);
+    return () => el.removeEventListener('pointermove', onPointerMove);
+  }, [onPointerMove, gl]);
+
+  return splatStack;
+};

package/lib/components/ServiceHubsTeaserEffects/fluid/index.ts

@@ -0,0 +1,5 @@
+/// <reference path="./glsl.d.ts" />
+
+export type { FluidProps } from './types';
+export { DEFAULT_CONFIG } from './constant';
+export { Fluid } from './Fluid';

package/lib/components/ServiceHubsTeaserEffects/fluid/types.ts

@@ -0,0 +1,27 @@
+import { BlendFunction } from 'postprocessing';
+import { Texture } from 'three';
+
+export type SharedProps = {
+    blend?: number;
+    intensity?: number;
+    distortion?: number;
+    rainbow?: boolean;
+    fluidColor?: string;
+    backgroundColor?: string;
+    showBackground?: boolean;
+    blendFunction?: BlendFunction;
+};
+
+export type FluidProps = SharedProps & {
+    densityDissipation?: number;
+    pressure?: number;
+    velocityDissipation?: number;
+    force?: number;
+    radius?: number;
+    curl?: number;
+    swirl?: number;
+};
+
+export type EffectProps = Required<SharedProps> & {
+    tFluid: Texture;
+};

package/lib/components/ServiceHubsTeaserEffects/fluid/utils.ts

@@ -0,0 +1,12 @@
+import { Color, Vector3 } from 'three';
+import { REFRESH_RATE } from './constant';
+
+export const hexToRgb = (hex: string) => {
+    const color = new Color(hex);
+
+    return new Vector3(color.r, color.g, color.b);
+};
+
+export const normalizeScreenHz = (value: number, dt: number) => {
+    return Math.pow(value, dt * REFRESH_RATE);
+};