foundry-component-library 0.2.9 → 0.2.10

package/lib/components/ServiceHubsTeaserEffects/TileBalls.tsx

@@ -0,0 +1,35 @@
+import { Canvas } from "@react-three/fiber";
+import { Environment, Text } from "@react-three/drei";
+import { EffectComposer, N8AO, TiltShift2 } from "@react-three/postprocessing";
+import Bubbles from "./bubbles/Bubbles";
+
+const TileBalls = () => {
+  return (
+    <Canvas
+      shadows
+      dpr={[1, 2]}
+      gl={{ antialias: false }}
+      camera={{ fov: 15, position: [0, 0, 20] }}>
+      <color attach="background" args={["#380de8"]} />
+      <fog attach="fog" args={["red", 20, -5]} />
+      <ambientLight intensity={1.5} />
+      <pointLight position={[10, 10, 10]} intensity={1} castShadow />
+      <Bubbles />
+      <EffectComposer>
+        <N8AO aoRadius={6} intensity={2} color="red" />
+        <TiltShift2 blur={0.1} />
+      </EffectComposer>
+      <Environment preset="city" />
+      <Text
+        position={[0, 0, 0]}
+        fontSize={0.4}
+        textAlign="center"
+        fontWeight={600}
+        color="#fff">
+        Content and{"\n"}Campaigning
+      </Text>
+    </Canvas>
+  );
+};
+
+export default TileBalls;

package/lib/components/ServiceHubsTeaserEffects/TileFluid.tsx

@@ -0,0 +1,29 @@
+import { Text } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import { EffectComposer } from "@react-three/postprocessing";
+import { Fluid } from "./fluid/Fluid";
+
+const TileFluid = () => {
+  return (
+    <Canvas
+      style={{
+        height: "100%",
+        width: "100%",
+      }}
+      camera={{ position: [0, 0, 20], fov: 15 }}>
+      <Text
+        position={[0, 0, 0]}
+        fontSize={0.4}
+        textAlign="center"
+        fontWeight={600}
+        color="#380de8">
+        Branding &{"\n"}Corporate ID
+      </Text>
+      <EffectComposer>
+        <Fluid backgroundColor="#fbff00" fluidColor="#380de8" rainbow={true} />
+      </EffectComposer>
+    </Canvas>
+  );
+};
+
+export default TileFluid;

package/lib/components/ServiceHubsTeaserEffects/TileGlass.tsx

@@ -0,0 +1,23 @@
+import { Canvas } from "@react-three/fiber";
+import { Text } from "@react-three/drei";
+import Lens from "./glass/Lens";
+
+const TileGlass = () => {
+  return (
+    <Canvas camera={{ position: [0, 0, 20], fov: 15 }}>
+      <Lens>
+        <Text
+          position={[0, 0, 0]}
+          fontSize={0.4}
+          textAlign="center"
+          fontWeight={600}
+          color="#491b11">
+          Strategy &{"\n"}
+          Positioning
+        </Text>
+      </Lens>
+    </Canvas>
+  );
+};
+
+export default TileGlass;

package/lib/components/ServiceHubsTeaserEffects/TileRays.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import React, { useRef } from "react";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { OrbitControls, useGLTF } from "@react-three/drei";
+import { Vector2, MeshBasicMaterial, DoubleSide } from "three";
+import { LightSource } from "./rays/LightSource";
+import {
+  EffectComposer,
+  EffectPass,
+  GodRaysEffect,
+  RenderPass,
+} from "postprocessing";
+
+function Slab({ url }) {
+  const gltf = useGLTF(url);
+  const slabRef = useRef();
+  const { camera, scene, gl } = useThree();
+
+  // GodRays light
+  const lightRef = useRef();
+  useFrame(({ pointer }) => {
+    if (lightRef.current) {
+      const LIGHT_RANGE = 5;
+      lightRef.current.position.x = pointer.x * LIGHT_RANGE;
+      lightRef.current.position.y = pointer.y * LIGHT_RANGE;
+    }
+  });
+
+  React.useEffect(() => {
+    if (!gltf) return;
+
+    const slab = gltf.scene;
+    slab.rotation.x = Math.PI / 2;
+
+    slab.traverse((obj) => {
+      if (obj.isMesh) {
+        obj.material = new MeshBasicMaterial({
+          color: 0x491b11,
+          side: DoubleSide,
+        });
+      }
+    });
+
+    slabRef.current.add(slab);
+
+    // Setup postprocessing
+    const composer = new EffectComposer(gl);
+    composer.addPass(new RenderPass(scene, camera));
+
+    const gre = new GodRaysEffect(camera, lightRef.current, {
+      height: 480,
+      kernelSize: 2,
+      density: 1,
+      decay: 0.8,
+      weight: 0.5,
+      exposure: 0.3,
+      samples: 20,
+      clampMax: 0.95,
+    });
+
+    composer.addPass(new EffectPass(camera, gre));
+
+    // Render loop override
+    const originalSetAnimationLoop = gl.setAnimationLoop;
+    gl.setAnimationLoop(() => composer.render());
+
+    return () => {
+      // Cleanup
+      gl.setAnimationLoop(originalSetAnimationLoop);
+      composer.dispose();
+    };
+  }, [gltf, gl, scene, camera]);
+
+  return (
+    <>
+      {/* <mesh ref={lightRef} position={[0, 0, -10]} /> */}
+      <group ref={slabRef} />
+      <LightSource ref={lightRef} position={[0, 0, -20]} />
+    </>
+  );
+}
+
+export default function SlabScene() {
+  return (
+    <Canvas
+      camera={{ fov: 60, position: [0, 0, 10], near: 1, far: 100 }}
+      gl={{ antialias: true, powerPreference: "high-performance" }}>
+      {/* <ambientLight intensity={0.2} /> */}
+      {/* <OrbitControls /> */}
+      <Slab url="/slab-with-text.glb" />
+    </Canvas>
+  );
+}

package/lib/components/ServiceHubsTeaserEffects/bubbles/Bubble.tsx

@@ -0,0 +1,35 @@
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import { Instance } from "@react-three/drei";
+
+const Bubble = ({ factor, speed, xFactor, yFactor, zFactor }) => {
+  const ref = useRef();
+
+  useFrame((state) => {
+    const t = factor + state.clock.elapsedTime * (speed / 2);
+
+    ref.current!.scale.setScalar(Math.max(1.5, Math.cos(t) * 5));
+
+    ref.current!.position.set(
+      Math.cos(t) +
+        Math.sin(t * 1) / 10 +
+        xFactor +
+        Math.cos((t / 10) * factor) +
+        (Math.sin(t * 1) * factor) / 10,
+      Math.sin(t) +
+        Math.cos(t * 2) / 10 +
+        yFactor +
+        Math.sin((t / 10) * factor) +
+        (Math.cos(t * 2) * factor) / 10,
+      Math.sin(t) +
+        Math.cos(t * 2) / 10 +
+        zFactor +
+        Math.cos((t / 10) * factor) +
+        (Math.sin(t * 3) * factor) / 4
+    );
+  });
+
+  return <Instance ref={ref} />;
+};
+
+export default Bubble;

package/lib/components/ServiceHubsTeaserEffects/bubbles/Bubbles.tsx

@@ -0,0 +1,44 @@
+import { MathUtils } from "three";
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import { Instances } from "@react-three/drei";
+import Bubble from "./Bubble";
+
+const particles = Array.from({ length: 20 }, () => ({
+  factor: MathUtils.randInt(20, 100),
+  speed: MathUtils.randFloat(0.01, 0.75),
+  xFactor: MathUtils.randFloatSpread(3),
+  yFactor: MathUtils.randFloatSpread(3),
+  zFactor: MathUtils.randFloatSpread(5),
+}));
+
+const Bubbles = () => {
+  const ref = useRef(null);
+
+  useFrame(
+    (state, delta) =>
+      void (ref.current.rotation.y = MathUtils.damp(
+        ref.current.rotation.y,
+        (-state.pointer.x * Math.PI) / 6,
+        2.75,
+        delta
+      ))
+  );
+
+  return (
+    <Instances
+      limit={particles.length}
+      ref={ref}
+      castShadow
+      receiveShadow
+      position={[0, 2.5, 0]}>
+      <sphereGeometry args={[0.45, 64, 64]} />
+      <meshStandardMaterial roughness={1} color="#f0f0f0" />
+      {particles.map((data, i) => (
+        <Bubble key={i} {...data} />
+      ))}
+    </Instances>
+  );
+};
+
+export default Bubbles;

package/lib/components/ServiceHubsTeaserEffects/fluid/Fluid.tsx

@@ -0,0 +1,192 @@
+import { createPortal, useFrame, useThree } from '@react-three/fiber';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Camera, Color, Mesh, Scene, Texture, Vector2, Vector3 } from 'three';
+import { ShaderPass } from 'three/examples/jsm/Addons.js';
+import { Effect as FluidEffect } from './effect/Fluid';
+import { useFBOs } from './hooks/useFBOs';
+import { useMaterials } from './hooks/useMaterials';
+import { type FluidProps } from './types';
+import { DEFAULT_CONFIG } from './constant';
+import { usePointer } from './hooks/usePointer';
+import { normalizeScreenHz } from './utils';
+
+type MaterialName = keyof ReturnType<typeof useMaterials>;
+type FBONames = keyof ReturnType<typeof useFBOs>;
+
+type Uniforms = {
+    uColor: Vector3 | Color;
+    uPointer: Vector2;
+    uTarget: Texture | null;
+    uVelocity: Texture;
+    uCurl: Texture;
+    uTexture: Texture;
+    uPressure: Texture;
+    uDivergence: Texture;
+    uSource: Texture;
+    uRadius: number;
+    uClearValue: number;
+    uCurlValue: number;
+    uDissipation: number;
+};
+
+export const Fluid = ({
+    blend = DEFAULT_CONFIG.blend,
+    force = DEFAULT_CONFIG.force,
+    radius = DEFAULT_CONFIG.radius,
+    curl = DEFAULT_CONFIG.curl,
+    swirl = DEFAULT_CONFIG.swirl,
+    intensity = DEFAULT_CONFIG.intensity,
+    distortion = DEFAULT_CONFIG.distortion,
+    fluidColor = DEFAULT_CONFIG.fluidColor,
+    backgroundColor = DEFAULT_CONFIG.backgroundColor,
+    showBackground = DEFAULT_CONFIG.showBackground,
+    rainbow = DEFAULT_CONFIG.rainbow,
+    pressure = DEFAULT_CONFIG.pressure,
+    densityDissipation = DEFAULT_CONFIG.densityDissipation,
+    velocityDissipation = DEFAULT_CONFIG.velocityDissipation,
+    blendFunction = DEFAULT_CONFIG.blendFunction,
+}: FluidProps) => {
+    const size = useThree((three) => three.size);
+    const gl = useThree((three) => three.gl);
+
+    const [bufferScene] = useState(() => new Scene());
+    const bufferCamera = useMemo(() => new Camera(), []);
+
+    const meshRef = useRef<Mesh>(null);
+    const postRef = useRef<ShaderPass>(null);
+    const pointerRef = useRef(new Vector2());
+    const colorRef = useRef(new Vector3());
+
+    const FBOs = useFBOs();
+    const materials = useMaterials();
+    const splatStack = usePointer({ force });
+
+    const setShaderMaterial = useCallback(
+        (name: MaterialName) => {
+            if (!meshRef.current) return;
+
+            meshRef.current.material = materials[name];
+            meshRef.current.material.needsUpdate = true;
+        },
+        [materials],
+    );
+
+    const setRenderTarget = useCallback(
+        (name: FBONames) => {
+            const target = FBOs[name];
+
+            if ('write' in target) {
+                gl.setRenderTarget(target.write);
+                gl.clear();
+                gl.render(bufferScene, bufferCamera);
+                target.swap();
+            } else {
+                gl.setRenderTarget(target);
+                gl.clear();
+                gl.render(bufferScene, bufferCamera);
+            }
+        },
+        [bufferCamera, bufferScene, FBOs, gl],
+    );
+
+    const setUniforms = useCallback(
+        <K extends keyof Uniforms>(material: MaterialName, uniform: K, value: Uniforms[K]) => {
+            const mat = materials[material];
+
+            if (mat && mat.uniforms[uniform]) {
+                mat.uniforms[uniform].value = value;
+            }
+        },
+        [materials],
+    );
+
+    useFrame((_, delta) => {
+        if (!meshRef.current || !postRef.current) return;
+
+        for (let i = splatStack.length - 1; i >= 0; i--) {
+            const { mouseX, mouseY, velocityX, velocityY } = splatStack[i];
+
+            pointerRef.current.set(mouseX, mouseY);
+            colorRef.current.set(velocityX, velocityY, 10.0);
+
+            setShaderMaterial('splat');
+            setUniforms('splat', 'uTarget', FBOs.velocity.read.texture);
+            setUniforms('splat', 'uPointer', pointerRef.current);
+            setUniforms('splat', 'uColor', colorRef.current);
+            setUniforms('splat', 'uRadius', radius / 100.0);
+            setRenderTarget('velocity');
+            setUniforms('splat', 'uTarget', FBOs.density.read.texture);
+            setRenderTarget('density');
+
+            splatStack.pop();
+        }
+
+        setShaderMaterial('curl');
+        setUniforms('curl', 'uVelocity', FBOs.velocity.read.texture);
+        setRenderTarget('curl');
+
+        setShaderMaterial('vorticity');
+        setUniforms('vorticity', 'uVelocity', FBOs.velocity.read.texture);
+        setUniforms('vorticity', 'uCurl', FBOs.curl.texture);
+        setUniforms('vorticity', 'uCurlValue', curl);
+        setRenderTarget('velocity');
+
+        setShaderMaterial('divergence');
+        setUniforms('divergence', 'uVelocity', FBOs.velocity.read.texture);
+        setRenderTarget('divergence');
+
+        setShaderMaterial('clear');
+        setUniforms('clear', 'uTexture', FBOs.pressure.read.texture);
+        setUniforms('clear', 'uClearValue', normalizeScreenHz(pressure, delta));
+        setRenderTarget('pressure');
+
+        setShaderMaterial('pressure');
+        setUniforms('pressure', 'uDivergence', FBOs.divergence.texture);
+
+        for (let i = 0; i < swirl; i++) {
+            setUniforms('pressure', 'uPressure', FBOs.pressure.read.texture);
+            setRenderTarget('pressure');
+        }
+
+        setShaderMaterial('gradientSubstract');
+        setUniforms('gradientSubstract', 'uPressure', FBOs.pressure.read.texture);
+        setUniforms('gradientSubstract', 'uVelocity', FBOs.velocity.read.texture);
+        setRenderTarget('velocity');
+
+        setShaderMaterial('advection');
+        setUniforms('advection', 'uVelocity', FBOs.velocity.read.texture);
+        setUniforms('advection', 'uSource', FBOs.velocity.read.texture);
+        setUniforms('advection', 'uDissipation', normalizeScreenHz(velocityDissipation, delta));
+
+        setRenderTarget('velocity');
+        setUniforms('advection', 'uVelocity', FBOs.velocity.read.texture);
+        setUniforms('advection', 'uSource', FBOs.density.read.texture);
+        setUniforms('advection', 'uDissipation', normalizeScreenHz(densityDissipation, delta));
+
+        setRenderTarget('density');
+    });
+
+    return (
+        <>
+            {createPortal(
+                <mesh ref={meshRef} scale={[size.width, size.height, 1]}>
+                    <planeGeometry args={[2, 2]} />
+                </mesh>,
+                bufferScene,
+            )}
+
+            <FluidEffect
+                blendFunction={blendFunction}
+                intensity={intensity}
+                rainbow={rainbow}
+                distortion={distortion}
+                backgroundColor={backgroundColor}
+                blend={blend}
+                fluidColor={fluidColor}
+                showBackground={showBackground}
+                ref={postRef}
+                tFluid={FBOs.density.read.texture}
+            />
+        </>
+    );
+};

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

@@ -0,0 +1,23 @@
+import { BlendFunction } from 'postprocessing';
+
+export const DEFAULT_CONFIG = {
+    blend: 5,
+    intensity: 2,
+    force: 1.1,
+    distortion: 0.4,
+    curl: 1.9,
+    radius: 0.3,
+    swirl: 4,
+    pressure: 0.8,
+    densityDissipation: 0.96,
+    velocityDissipation: 1.0,
+    fluidColor: '#3300ff',
+    backgroundColor: '#070410',
+    showBackground: true,
+    rainbow: false,
+    dyeRes: 512,
+    simRes: 128,
+    blendFunction: BlendFunction.SET,
+} as const;
+
+export const REFRESH_RATE = 60;

package/lib/components/ServiceHubsTeaserEffects/fluid/effect/Fluid.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, useEffect, useMemo } from 'react';
+import { EffectProps } from '../types';
+import { FluidEffect } from './FluidEffect';
+
+export const Effect = forwardRef(function Fluid(props: EffectProps, ref) {
+    // prevent re-creating the effect on every render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const effect = useMemo(() => new FluidEffect(props), []);
+
+    useEffect(() => {
+        effect.state = { ...props };
+        effect.update();
+    }, [effect, props]);
+
+    useEffect(() => {
+        return () => {
+            effect.dispose?.();
+        };
+    }, [effect]);
+
+    return <primitive ref={ref} object={effect} dispose={null} />;
+});

package/lib/components/ServiceHubsTeaserEffects/fluid/effect/FluidEffect.tsx

@@ -0,0 +1,58 @@
+import { Effect, EffectAttribute } from 'postprocessing';
+import { Texture, Uniform, Vector3 } from 'three';
+import compositeFrag from '../glsl/composite.frag';
+import { type EffectProps } from '../types';
+import { hexToRgb } from '../utils';
+
+type Uniforms = {
+    tFluid: Texture;
+    uColor: Vector3;
+    uBackgroundColor: Vector3;
+    uRainbow: boolean;
+    uShowBackground: boolean;
+    uDistort: number;
+    uBlend: number;
+    uIntensity: number;
+};
+
+export class FluidEffect extends Effect {
+    state: EffectProps;
+
+    constructor(props: EffectProps) {
+        const uniforms: Record<keyof Uniforms, Uniform> = {
+            tFluid: new Uniform(props.tFluid),
+            uDistort: new Uniform(props.distortion),
+            uRainbow: new Uniform(props.rainbow),
+            uIntensity: new Uniform(props.intensity),
+            uBlend: new Uniform(props.blend),
+            uShowBackground: new Uniform(props.showBackground),
+            uColor: new Uniform(hexToRgb(props.fluidColor!)),
+            uBackgroundColor: new Uniform(hexToRgb(props.backgroundColor!)),
+        };
+
+        super('FluidEffect', compositeFrag, {
+            blendFunction: props.blendFunction,
+            attributes: EffectAttribute.CONVOLUTION,
+            uniforms: new Map(Object.entries(uniforms)),
+        });
+
+        this.state = props;
+    }
+
+    private updateUniform<K extends keyof Uniforms>(key: K, value: Uniforms[K]) {
+        const uniform = this.uniforms.get(key);
+        if (uniform) {
+            uniform.value = value;
+        }
+    }
+
+    update() {
+        this.updateUniform('uIntensity', this.state.intensity);
+        this.updateUniform('uDistort', this.state.distortion);
+        this.updateUniform('uRainbow', this.state.rainbow);
+        this.updateUniform('uBlend', this.state.blend);
+        this.updateUniform('uShowBackground', this.state.showBackground);
+        this.updateUniform('uColor', hexToRgb(this.state.fluidColor));
+        this.updateUniform('uBackgroundColor', hexToRgb(this.state.backgroundColor));
+    }
+}

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

@@ -0,0 +1,16 @@
+precision highp float;
+
+varying vec2 vUv;
+uniform sampler2D uVelocity;
+uniform sampler2D uSource;
+uniform vec2 texelSize;
+uniform float dt;
+uniform float uDissipation;
+
+void main() {
+    vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
+
+    gl_FragColor = uDissipation * texture2D(uSource, coord);
+
+    gl_FragColor.a = 1.0;
+}

package/lib/components/ServiceHubsTeaserEffects/fluid/glsl/base.vert

@@ -0,0 +1,26 @@
+#ifdef USE_V_UV
+  varying vec2 vUv;
+#endif
+
+#ifdef USE_OFFSETS
+  varying vec2 vL;
+  varying vec2 vR;
+  varying vec2 vT;
+  varying vec2 vB;
+  uniform vec2 texelSize;
+#endif
+
+void main() {
+  #ifdef USE_V_UV
+    vUv = uv;
+  #endif
+
+  #ifdef USE_OFFSETS
+    vL = uv - vec2(texelSize.x, 0.0);
+    vR = uv + vec2(texelSize.x, 0.0);
+    vT = uv + vec2(0.0, texelSize.y);
+    vB = uv - vec2(0.0, texelSize.y);
+  #endif
+
+  gl_Position = vec4(position, 1.0);
+}

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

@@ -0,0 +1,7 @@
+precision highp float;
+
+varying vec2 vUv;
+uniform sampler2D uTexture;
+uniform float uClearValue;
+
+void main() { gl_FragColor = uClearValue * texture2D(uTexture, vUv); }

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);
+}