foundry-component-library 0.2.9 → 0.2.10

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';
+import clearFrag from '../glsl/clear.frag';
+import curlFrag from '../glsl/curl.frag';
+import divergenceFrag from '../glsl/divergence.frag';
+import gradientSubstractFrag from '../glsl/gradientSubstract.frag';
+import pressureFrag from '../glsl/pressure.frag';
+import splatFrag from '../glsl/splat.frag';
+import advectionFrag from '../glsl/advection.frag';
+import vorticityFrag from '../glsl/vorticity.frag';
+
+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);
+};

package/lib/components/ServiceHubsTeaserEffects/glass/Lens.tsx

@@ -0,0 +1,66 @@
+import * as THREE from "three";
+import { useRef, useState } from "react";
+import { createPortal, useFrame, useThree } from "@react-three/fiber";
+import { useFBO, useGLTF, MeshTransmissionMaterial } from "@react-three/drei";
+import { easing } from "maath";
+
+const Lens = ({ children, damping = 0.2, ...props }) => {
+  const ref = useRef(null);
+  const { nodes } = useGLTF("/lens-transformed.glb");
+  const buffer = useFBO();
+  const viewport = useThree((state) => state.viewport);
+  const [scene] = useState(() => new THREE.Scene());
+  useFrame((state, delta) => {
+    // Tie lens to the pointer
+    // getCurrentViewport gives us the width & height that would fill the screen in threejs units
+    // By giving it a target coordinate we can offset these bounds, for instance width/height for a plane that
+    // sits 15 units from 0/0/0 towards the camera (which is where the lens is)
+    const viewport = state.viewport.getCurrentViewport(
+      state.camera,
+      [0, 0, 15]
+    );
+    easing.damp3(
+      ref.current!.position,
+      [
+        (state.pointer.x * viewport.width) / 2,
+        (state.pointer.y * viewport.height) / 2,
+        15,
+      ],
+      damping,
+      delta
+    );
+    // This is entirely optional but spares us one extra render of the scene
+    // The createPortal below will mount the children of <Lens> into the new THREE.Scene above
+    // The following code will render that scene into a buffer, whose texture will then be fed into
+    // a plane spanning the full screen and the lens transmission material
+    state.gl.setRenderTarget(buffer);
+    state.gl.setClearColor("#f197f4");
+    state.gl.render(scene, state.camera);
+    state.gl.setRenderTarget(null);
+  });
+  return (
+    <>
+      {createPortal(children, scene)}
+      <mesh scale={[viewport.width, viewport.height, 1]}>
+        <planeGeometry />
+        <meshBasicMaterial map={buffer.texture} />
+      </mesh>
+      <mesh
+        scale={0.25}
+        ref={ref}
+        rotation-x={Math.PI / 2}
+        geometry={nodes.Cylinder.geometry}
+        {...props}>
+        <MeshTransmissionMaterial
+          buffer={buffer.texture}
+          ior={1.2}
+          thickness={1.5}
+          anisotropy={0.1}
+          chromaticAberration={0.02}
+        />
+      </mesh>
+    </>
+  );
+};
+
+export default Lens;