Codrops 원본

Three.js Instances: Rendering Multiple Objects Simultaneously

섹션 · MIT

섹션 더 보기
ORIGINAL PREVIEW
Three.js Instances: Rendering Multiple Objects Simultaneously 정적 미리보기

갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.

큰 화면으로 보기 새 탭

SOURCE FILES

원본 코드 읽기

57개 파일

수집한 원본 소스와 실행 안내를 함께 제공합니다.

eslint.config.mjs
파일 저장

import { dirname } from "path"
import { fileURLToPath } from "url"
import { FlatCompat } from "@eslint/eslintrc"

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const compat = new FlatCompat({
  baseDirectory: __dirname
})

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "plugin:prettier/recommended"),
  {
    files: ["**/*.{js,jsx,ts,tsx}"],
    languageOptions: {
      parser: "@typescript-eslint/parser",
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module"
      }
    },
    plugins: {
      "simple-import-sort": compat.plugin("simple-import-sort"),
      "@typescript-eslint": compat.plugin("@typescript-eslint"),
      prettier: compat.plugin("prettier")
    },
    rules: {
      "react/react-in-jsx-scope": "off",
      "react/display-name": "off",
      "react/prop-types": "off",
      "@typescript-eslint/explicit-function-return-type": "off",
      "@typescript-eslint/explicit-member-accessibility": "off",
      "@typescript-eslint/indent": "off",
      "@typescript-eslint/member-delimiter-style": "off",
      "@typescript-eslint/no-explicit-any": "off",
      "@typescript-eslint/no-var-requires": "off",
      "@typescript-eslint/no-use-before-define": "off",
      "@typescript-eslint/ban-ts-comment": "off",
      "simple-import-sort/imports": "warn",
      "simple-import-sort/exports": "warn",
      "react-hooks/exhaustive-deps": ["warn", {
        additionalHooks: "(useIsomorphicLayoutEffect)"
      }],
      "react/no-unescaped-entities": "off",
      curly: ["error", "multi-line"],
      "react/jsx-no-target-blank": [2, {
        allowReferrer: true
      }],
      "@typescript-eslint/no-unused-vars": [2, {
        argsIgnorePattern: "^_"
      }],
      "no-console": [1, {
        allow: ["warn", "error"]
      }],
      "prettier/prettier": ["warn", {
        endOfLine: "auto"
      }],
      "@typescript-eslint/explicit-module-boundary-types": "off"
    }
  }
]

export default eslintConfig
next.config.ts
파일 저장

import type { NextConfig } from "next";

const config: NextConfig = {
  // Since this is an experiment, I'll ignore errors
  eslint: {
    ignoreDuringBuilds: true
  },
  typescript: {
    ignoreBuildErrors: true
  },
  webpack: (config, _options) => {
    /** Add glslify loader to webpack */
    config.module.rules.push({
      test: /\.(glsl|vs|fs|vert|frag)$/,
      use: ["raw-loader", "glslify-loader"]
    })

    return config
  },
  turbopack: {
    rules: {
      "*.{glsl,vert,frag,vs,fs}": {
        loaders: ["raw-loader", "glslify-loader"],
        as: "*.js"
      }
    }
  },
}

export default config

함께 쓰는 파일 55개 보기
postcss.config.mjs
파일 저장

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;
src/app/(examples)/create-instances/page.tsx
파일 저장

"use client"

import { Canvas } from "@react-three/fiber"
import { Scene } from "./scene"
import { eventManagerFactory } from "./scene/event-manager"
import { Perf } from "r3f-perf"
import { OrbitControls, PerspectiveCamera } from "@react-three/drei"

export default function Home() {
  return (
    <div className="grow relative w-full h-full">
      <Canvas
        events={eventManagerFactory}
        dpr={[1, 1.5]}
        className="!absolute top-0 left-0 !w-full !h-full"
      >
        <Scene />
        <PerspectiveCamera makeDefault position={[0, 0, 20]} />
        <OrbitControls />
        <Perf />
      </Canvas>
    </div>
  )
}
src/app/(examples)/create-instances/scene/event-manager.tsx
파일 저장

import { Canvas, events, RootState } from "@react-three/fiber";
import { DomEvent } from "@react-three/fiber/dist/declarations/src/core/events";
import * as THREE from "three";
import { valueRemap } from "@/lib/utils/math";

export const hitConfig = {
  scale: 1,
};

export const eventManagerFactory: Parameters<typeof Canvas>[0]["events"] = (
  state
) => ({
  // Default configuration
  ...events(state),

  // Determines if the event layer is active
  enabled: true,

  // Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer
  priority: 1,

  // The filter can re-order or re-structure the intersections
  filter: (items: THREE.Intersection[], state: RootState) => items,

  // The compute defines how pointer events are translated into the raycaster and pointer vector2
  compute: (event: DomEvent, state: RootState, previous?: RootState) => {
    let pointerX = (event.offsetX / state.size.width) * 2 - 1;
    let pointerY = -(event.offsetY / state.size.height) * 2 + 1;

    if (hitConfig.scale !== 1) {
      pointerX = valueRemap(pointerX, -1, 1, 0, hitConfig.scale);
      pointerY = valueRemap(pointerY, -1, 1, 0, hitConfig.scale);

      pointerX = pointerX % 1;
      pointerY = pointerY % 1;

      pointerX = valueRemap(pointerX, 0, 1, -1, 1);
      pointerY = valueRemap(pointerY, 0, 1, -1, 1);
    }

    state.pointer.set(pointerX, pointerY);
    state.raycaster.setFromCamera(state.pointer, state.camera);
  },

  // Find more configuration default on ./packages/fiber/src/web/events.ts
  // And type definitions in ./packages/fiber/src/core/events.ts
});
src/app/(examples)/create-instances/scene/index.tsx
파일 저장

import { createInstances } from "@react-three/drei"
import * as THREE from "three"

const boxCount = 1000
const sphereCount = 1000

const [CubeInstances, Cube] = createInstances()
const [SphereInstances, Sphere] = createInstances()

function InstancesProvider({ children }: { children: React.ReactNode }) {
  return (
    <CubeInstances limit={boxCount}>
      <boxGeometry />
      <meshBasicMaterial />
      <SphereInstances limit={sphereCount}>
        <sphereGeometry />
        <meshBasicMaterial />
        {children}
      </SphereInstances>
    </CubeInstances>
  )
}

const getRandomPosition = () => {
  return [
    (Math.random() - 0.5) * 10,
    (Math.random() - 0.5) * 10,
    (Math.random() - 0.5) * 10
  ] as const
}

const getRandomColor = () => {
  return new THREE.Color(Math.random(), Math.random(), Math.random())
}

const getRandomScale = () =>
  new THREE.Vector3(0.4, 0.4, 0.4).multiplyScalar(Math.random() + 0.1)

export function Scene() {
  return (
    <InstancesProvider>
      {Array.from({ length: boxCount }).map((_, index) => (
        <Cube
          key={index}
          position={getRandomPosition()}
          color={getRandomColor()}
          scale={getRandomScale()}
        />
      ))}

      {Array.from({ length: sphereCount }).map((_, index) => (
        <Sphere
          key={index}
          position={getRandomPosition()}
          color={getRandomColor()}
          scale={getRandomScale()}
        />
      ))}
    </InstancesProvider>
  )
}
src/app/(examples)/custom-shader/page.tsx
파일 저장

"use client"

import { Canvas } from "@react-three/fiber"
import { Scene } from "./scene"
import { eventManagerFactory } from "./scene/event-manager"
import { Perf } from "r3f-perf"
import { OrbitControls, PerspectiveCamera } from "@react-three/drei"

export default function Home() {
  return (
    <div className="grow relative w-full h-full">
      <Canvas
        events={eventManagerFactory}
        dpr={[1, 1.5]}
        className="!absolute top-0 left-0 !w-full !h-full"
      >
        <Scene />
        <PerspectiveCamera makeDefault position={[0, 0, 20]} />
        <OrbitControls />
        <Perf />
      </Canvas>
    </div>
  )
}
src/app/(examples)/custom-shader/scene/event-manager.tsx
파일 저장

import { Canvas, events, RootState } from "@react-three/fiber";
import { DomEvent } from "@react-three/fiber/dist/declarations/src/core/events";
import * as THREE from "three";
import { valueRemap } from "@/lib/utils/math";

export const hitConfig = {
  scale: 1,
};

export const eventManagerFactory: Parameters<typeof Canvas>[0]["events"] = (
  state
) => ({
  // Default configuration
  ...events(state),

  // Determines if the event layer is active
  enabled: true,

  // Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer
  priority: 1,

  // The filter can re-order or re-structure the intersections
  filter: (items: THREE.Intersection[], state: RootState) => items,

  // The compute defines how pointer events are translated into the raycaster and pointer vector2
  compute: (event: DomEvent, state: RootState, previous?: RootState) => {
    let pointerX = (event.offsetX / state.size.width) * 2 - 1;
    let pointerY = -(event.offsetY / state.size.height) * 2 + 1;

    if (hitConfig.scale !== 1) {
      pointerX = valueRemap(pointerX, -1, 1, 0, hitConfig.scale);
      pointerY = valueRemap(pointerY, -1, 1, 0, hitConfig.scale);

      pointerX = pointerX % 1;
      pointerY = pointerY % 1;

      pointerX = valueRemap(pointerX, 0, 1, -1, 1);
      pointerY = valueRemap(pointerY, 0, 1, -1, 1);
    }

    state.pointer.set(pointerX, pointerY);
    state.raycaster.setFromCamera(state.pointer, state.camera);
  },

  // Find more configuration default on ./packages/fiber/src/web/events.ts
  // And type definitions in ./packages/fiber/src/core/events.ts
});
src/app/(examples)/custom-shader/scene/index.tsx
파일 저장

import { useFrame } from "@react-three/fiber"
import * as THREE from "three"

const baseMaterial = new THREE.RawShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uAmplitude: { value: 1 }
  },
  vertexShader: /*glsl*/ `
    attribute vec3 position;
    attribute vec3 instanceColor;
    attribute vec3 normal;
    attribute vec2 uv;
    uniform mat4 modelMatrix;
    uniform mat4 viewMatrix;
    uniform mat4 projectionMatrix;

    uniform float uTime;
    uniform float uAmplitude;

    vec3 movement(vec3 position) {
      vec3 pos = position;
      pos.x += sin(position.y + uTime) * uAmplitude;
      return pos;
    }

    void main() {
      vec3 blobShift = movement(position);
      vec4 modelPosition = modelMatrix * vec4(blobShift, 1.0);
      vec4 viewPosition = viewMatrix * modelPosition;
      vec4 projectionPosition = projectionMatrix * viewPosition;
      gl_Position = projectionPosition;
    }
  `,
  fragmentShader: /*glsl*/ `
    void main() {
      gl_FragColor = vec4(1, 0, 0, 1);
    }
  `
})

export function Scene() {
  useFrame((state) => {
    baseMaterial.uniforms.uTime.value = state.clock.elapsedTime
  })

  return (
    <mesh material={baseMaterial}>
      <sphereGeometry args={[1, 32, 32]} />
    </mesh>
  )
}
src/app/(examples)/custom-shader-instances/page.tsx
파일 저장

"use client"

import { Canvas } from "@react-three/fiber"
import { Scene } from "./scene"
import { eventManagerFactory } from "./scene/event-manager"
import { Perf } from "r3f-perf"
import { OrbitControls, PerspectiveCamera } from "@react-three/drei"

export default function Home() {
  return (
    <div className="grow relative w-full h-full">
      <Canvas
        events={eventManagerFactory}
        dpr={[1, 1.5]}
        className="!absolute top-0 left-0 !w-full !h-full"
      >
        <Scene />
        <PerspectiveCamera makeDefault position={[0, 0, 100]} />
        <OrbitControls />
        <Perf />
      </Canvas>
    </div>
  )
}
src/app/(examples)/custom-shader-instances/scene/event-manager.tsx
파일 저장

import { Canvas, events, RootState } from "@react-three/fiber";
import { DomEvent } from "@react-three/fiber/dist/declarations/src/core/events";
import * as THREE from "three";
import { valueRemap } from "@/lib/utils/math";

export const hitConfig = {
  scale: 1,
};

export const eventManagerFactory: Parameters<typeof Canvas>[0]["events"] = (
  state
) => ({
  // Default configuration
  ...events(state),

  // Determines if the event layer is active
  enabled: true,

  // Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer
  priority: 1,

  // The filter can re-order or re-structure the intersections
  filter: (items: THREE.Intersection[], state: RootState) => items,

  // The compute defines how pointer events are translated into the raycaster and pointer vector2
  compute: (event: DomEvent, state: RootState, previous?: RootState) => {
    let pointerX = (event.offsetX / state.size.width) * 2 - 1;
    let pointerY = -(event.offsetY / state.size.height) * 2 + 1;

    if (hitConfig.scale !== 1) {
      pointerX = valueRemap(pointerX, -1, 1, 0, hitConfig.scale);
      pointerY = valueRemap(pointerY, -1, 1, 0, hitConfig.scale);

      pointerX = pointerX % 1;
      pointerY = pointerY % 1;

      pointerX = valueRemap(pointerX, 0, 1, -1, 1);
      pointerY = valueRemap(pointerY, 0, 1, -1, 1);
    }

    state.pointer.set(pointerX, pointerY);
    state.raycaster.setFromCamera(state.pointer, state.camera);
  },

  // Find more configuration default on ./packages/fiber/src/web/events.ts
  // And type definitions in ./packages/fiber/src/core/events.ts
});
src/app/(examples)/custom-shader-instances/scene/index.tsx
파일 저장

import { createInstances, Instance, Instances } from "@react-three/drei"
import { useFrame } from "@react-three/fiber"
import * as THREE from "three"

const sphereCount = 1000

const baseMaterial = new THREE.RawShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uAmplitude: { value: 1 }
  },
  vertexShader: /*glsl*/ `
    attribute vec3 position;
    attribute vec3 instanceColor;
    attribute vec3 normal;
    attribute vec2 uv;
    uniform mat4 modelMatrix;
    uniform mat4 viewMatrix;
    uniform mat4 projectionMatrix;
    attribute mat4 instanceMatrix;

    uniform float uTime;
    uniform float uAmplitude;

    vec3 movement(vec3 position) {
      vec3 pos = position;
      pos.x += sin(position.y + uTime) * uAmplitude;
      return pos;
    }

    void main() {
      vec3 blobShift = movement(position);
      vec4 modelPosition = modelMatrix * instanceMatrix * vec4(blobShift, 1.0);
      vec4 viewPosition = viewMatrix * modelPosition;
      vec4 projectionPosition = projectionMatrix * viewPosition;
      gl_Position = projectionPosition;
    }
  `,
  fragmentShader: /*glsl*/ `
    void main() {
      gl_FragColor = vec4(1, 0, 0, 1);
    }
  `
})

const getRandomPosition = () => {
  return [
    (Math.random() - 0.5) * 50,
    (Math.random() - 0.5) * 50,
    (Math.random() - 0.5) * 50
  ] as const
}

const [BlobInstances, Blob] = createInstances()

export function Scene() {
  useFrame((state) => {
    baseMaterial.uniforms.uTime.value = state.clock.elapsedTime
  })

  return (
    <BlobInstances material={baseMaterial} limit={sphereCount}>
      <sphereGeometry args={[1, 32, 32]} />
      {Array.from({ length: sphereCount }).map((_, index) => (
        <Blob key={index} position={getRandomPosition()} />
      ))}
    </BlobInstances>
  )
}
src/app/(examples)/drei-instances/page.tsx
파일 저장

"use client"

import { Canvas } from "@react-three/fiber"
import { Scene } from "./scene"
import { eventManagerFactory } from "./scene/event-manager"
import { Perf } from "r3f-perf"
import { OrbitControls, PerspectiveCamera } from "@react-three/drei"

export default function Home() {
  return (
    <div className="grow relative w-full h-full">
      <Canvas
        events={eventManagerFactory}
        dpr={[1, 1.5]}
        className="!absolute top-0 left-0 !w-full !h-full"
      >
        <Scene />
        <PerspectiveCamera makeDefault position={[0, 0, 20]} />
        <OrbitControls />
        <Perf />
      </Canvas>
    </div>
  )
}
src/app/(examples)/drei-instances/scene/event-manager.tsx
파일 저장

import { Canvas, events, RootState } from "@react-three/fiber";
import { DomEvent } from "@react-three/fiber/dist/declarations/src/core/events";
import * as THREE from "three";
import { valueRemap } from "@/lib/utils/math";

export const hitConfig = {
  scale: 1,
};

export const eventManagerFactory: Parameters<typeof Canvas>[0]["events"] = (
  state
) => ({
  // Default configuration
  ...events(state),

  // Determines if the event layer is active
  enabled: true,

  // Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer
  priority: 1,

  // The filter can re-order or re-structure the intersections
  filter: (items: THREE.Intersection[], state: RootState) => items,

  // The compute defines how pointer events are translated into the raycaster and pointer vector2
  compute: (event: DomEvent, state: RootState, previous?: RootState) => {
    let pointerX = (event.offsetX / state.size.width) * 2 - 1;
    let pointerY = -(event.offsetY / state.size.height) * 2 + 1;

    if (hitConfig.scale !== 1) {
      pointerX = valueRemap(pointerX, -1, 1, 0, hitConfig.scale);
      pointerY = valueRemap(pointerY, -1, 1, 0, hitConfig.scale);

      pointerX = pointerX % 1;
      pointerY = pointerY % 1;

      pointerX = valueRemap(pointerX, 0, 1, -1, 1);
      pointerY = valueRemap(pointerY, 0, 1, -1, 1);
    }

    state.pointer.set(pointerX, pointerY);
    state.raycaster.setFromCamera(state.pointer, state.camera);
  },

  // Find more configuration default on ./packages/fiber/src/web/events.ts
  // And type definitions in ./packages/fiber/src/core/events.ts
});
src/app/(examples)/drei-instances/scene/index.tsx
파일 저장

import { Instance, Instances } from "@react-three/drei"
import * as THREE from "three"

const boxCount = 1000

const getRandomPosition = () => {
  return [
    (Math.random() - 0.5) * 10,
    (Math.random() - 0.5) * 10,
    (Math.random() - 0.5) * 10
  ] as const
}

const getRandomColor = () => {
  return new THREE.Color(Math.random(), Math.random(), Math.random())
}

const getRandomScale = () =>
  new THREE.Vector3(0.4, 0.4, 0.4).multiplyScalar(Math.random() + 0.1)

export function Scene() {
  return (
    <Instances limit={boxCount}>
      <boxGeometry />
      <meshBasicMaterial />
      {Array.from({ length: boxCount }).map((_, index) => (
        <Instance
          key={index}
          position={getRandomPosition()}
          scale={getRandomScale()}
          color={getRandomColor()}
        />
      ))}
    </Instances>
  )
}
src/app/(examples)/forest/page.tsx
파일 저장

"use client"

import { Canvas } from "@react-three/fiber"
import { Scene } from "./scene"
import { eventManagerFactory } from "./scene/event-manager"
import { Perf } from "r3f-perf"
import {
  ContactShadows,
  Environment,
  OrbitControls,
  PerspectiveCamera,
  Sky
} from "@react-three/drei"

export default function Home() {
  return (
    <div className="grow relative w-full h-full">
      <Canvas
        events={eventManagerFactory}
        dpr={[1, 1.5]}
        className="!absolute top-0 left-0 !w-full !h-full"
      >
        <Scene />
        <PerspectiveCamera makeDefault position={[30, 30, 30]} />
        <OrbitControls />
        <Sky />
        <Environment preset="sunset" />
        <mesh rotation-x={-Math.PI / 2}>
          <planeGeometry args={[500, 500]} />
          <meshStandardMaterial color="#967937" />
        </mesh>
        <Perf />
      </Canvas>
    </div>
  )
}
src/app/(examples)/forest/scene/event-manager.tsx
파일 저장

import { Canvas, events, RootState } from "@react-three/fiber";
import { DomEvent } from "@react-three/fiber/dist/declarations/src/core/events";
import * as THREE from "three";
import { valueRemap } from "@/lib/utils/math";

export const hitConfig = {
  scale: 1,
};

export const eventManagerFactory: Parameters<typeof Canvas>[0]["events"] = (
  state
) => ({
  // Default configuration
  ...events(state),

  // Determines if the event layer is active
  enabled: true,

  // Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer
  priority: 1,

  // The filter can re-order or re-structure the intersections
  filter: (items: THREE.Intersection[], state: RootState) => items,

  // The compute defines how pointer events are translated into the raycaster and pointer vector2
  compute: (event: DomEvent, state: RootState, previous?: RootState) => {
    let pointerX = (event.offsetX / state.size.width) * 2 - 1;
    let pointerY = -(event.offsetY / state.size.height) * 2 + 1;

    if (hitConfig.scale !== 1) {
      pointerX = valueRemap(pointerX, -1, 1, 0, hitConfig.scale);
      pointerY = valueRemap(pointerY, -1, 1, 0, hitConfig.scale);

      pointerX = pointerX % 1;
      pointerY = pointerY % 1;

      pointerX = valueRemap(pointerX, 0, 1, -1, 1);
      pointerY = valueRemap(pointerY, 0, 1, -1, 1);
    }

    state.pointer.set(pointerX, pointerY);
    state.raycaster.setFromCamera(state.pointer, state.camera);
  },

  // Find more configuration default on ./packages/fiber/src/web/events.ts
  // And type definitions in ./packages/fiber/src/core/events.ts
});
src/app/(examples)/forest/scene/index.tsx
파일 저장

import { createInstances, useGLTF } from "@react-three/drei"
import * as THREE from "three"
import { GLTF } from "three/examples/jsm/Addons.js"

interface TreeGltf extends GLTF {
  nodes: {
    tree_low001_StylizedTree_0: THREE.Mesh<
      THREE.BufferGeometry,
      THREE.MeshStandardMaterial
    >
  }
}

const getRandomPosition = () => {
  return [
    (Math.random() - 0.5) * 10000,
    0,
    (Math.random() - 0.5) * 10000
  ] as const
}

function getRandomScale() {
  return Math.random() * 0.7 + 0.5
}

const [TreeInstances, Tree] = createInstances()
const treeCount = 1000

export function Scene() {
  const { scene, nodes } = useGLTF(
    "/stylized_pine_tree_tree.glb"
  ) as unknown as TreeGltf

  return (
    <group>
      <TreeInstances
        limit={treeCount}
        scale={0.02}
        geometry={nodes.tree_low001_StylizedTree_0.geometry}
        material={nodes.tree_low001_StylizedTree_0.material}
      >
        {Array.from({ length: treeCount }).map((_, index) => (
          <Tree
            key={index}
            position={getRandomPosition()}
            scale={getRandomScale()}
            rotation-y={Math.random() * Math.PI * 2}
          />
        ))}
      </TreeInstances>
    </group>
  )
}
src/app/(examples)/instanced-attributes/page.tsx
파일 저장

"use client"

import { Canvas } from "@react-three/fiber"
import { Scene } from "./scene"
import { eventManagerFactory } from "./scene/event-manager"
import { Perf } from "r3f-perf"
import { OrbitControls, PerspectiveCamera } from "@react-three/drei"

export default function Home() {
  return (
    <div className="grow relative w-full h-full">
      <Canvas
        events={eventManagerFactory}
        dpr={[1, 1.5]}
        className="!absolute top-0 left-0 !w-full !h-full"
      >
        <Scene />
        <PerspectiveCamera makeDefault position={[0, 0, 100]} />
        <OrbitControls />
        <Perf />
      </Canvas>
    </div>
  )
}
src/app/(examples)/instanced-attributes/scene/event-manager.tsx
파일 저장

import { Canvas, events, RootState } from "@react-three/fiber";
import { DomEvent } from "@react-three/fiber/dist/declarations/src/core/events";
import * as THREE from "three";
import { valueRemap } from "@/lib/utils/math";

export const hitConfig = {
  scale: 1,
};

export const eventManagerFactory: Parameters<typeof Canvas>[0]["events"] = (
  state
) => ({
  // Default configuration
  ...events(state),

  // Determines if the event layer is active
  enabled: true,

  // Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer
  priority: 1,

  // The filter can re-order or re-structure the intersections
  filter: (items: THREE.Intersection[], state: RootState) => items,

  // The compute defines how pointer events are translated into the raycaster and pointer vector2
  compute: (event: DomEvent, state: RootState, previous?: RootState) => {
    let pointerX = (event.offsetX / state.size.width) * 2 - 1;
    let pointerY = -(event.offsetY / state.size.height) * 2 + 1;

    if (hitConfig.scale !== 1) {
      pointerX = valueRemap(pointerX, -1, 1, 0, hitConfig.scale);
      pointerY = valueRemap(pointerY, -1, 1, 0, hitConfig.scale);

      pointerX = pointerX % 1;
      pointerY = pointerY % 1;

      pointerX = valueRemap(pointerX, 0, 1, -1, 1);
      pointerY = valueRemap(pointerY, 0, 1, -1, 1);
    }

    state.pointer.set(pointerX, pointerY);
    state.raycaster.setFromCamera(state.pointer, state.camera);
  },

  // Find more configuration default on ./packages/fiber/src/web/events.ts
  // And type definitions in ./packages/fiber/src/core/events.ts
});
src/app/(examples)/instanced-attributes/scene/index.tsx
파일 저장

import { createInstances, InstancedAttribute } from "@react-three/drei"
import { useFrame } from "@react-three/fiber"
import * as THREE from "three"

const sphereCount = 1000

const baseMaterial = new THREE.RawShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uAmplitude: { value: 1 }
  },
  vertexShader: /*glsl*/ `
    attribute vec3 position;
    attribute vec3 instanceColor;
    attribute vec3 normal;
    attribute vec2 uv;
    uniform mat4 modelMatrix;
    uniform mat4 viewMatrix;
    uniform mat4 projectionMatrix;
    attribute mat4 instanceMatrix;

    uniform float uTime;
    uniform float uAmplitude;
    attribute float timeShift;

    vec3 movement(vec3 position) {
      vec3 pos = position;
      pos.x += sin(position.y + uTime + timeShift) * uAmplitude;
      return pos;
    }

    void main() {
      vec3 blobShift = movement(position);
      vec4 modelPosition = modelMatrix * instanceMatrix * vec4(blobShift, 1.0);
      vec4 viewPosition = viewMatrix * modelPosition;
      vec4 projectionPosition = projectionMatrix * viewPosition;
      gl_Position = projectionPosition;
    }
  `,
  fragmentShader: /*glsl*/ `
    void main() {
      gl_FragColor = vec4(1, 0, 0, 1);
    }
  `
})

const getRandomPosition = () => {
  return [
    (Math.random() - 0.5) * 50,
    (Math.random() - 0.5) * 50,
    (Math.random() - 0.5) * 50
  ] as const
}

// Tell typescript about our custom attribute
const [BlobInstances, Blob] = createInstances<{ timeShift: number }>()

export function Scene() {
  useFrame((state) => {
    baseMaterial.uniforms.uTime.value = state.clock.elapsedTime
  })

  return (
    <BlobInstances material={baseMaterial} limit={sphereCount}>
      {/* Declare an instanced attribute with a default value */}
      <InstancedAttribute name="timeShift" defaultValue={0} />
      <sphereGeometry args={[1, 32, 32]} />
      {Array.from({ length: sphereCount }).map((_, index) => (
        <Blob
          key={index}
          position={getRandomPosition()}
          // Set the instanced attribute value for this instance
          timeShift={Math.random() * 10}
        />
      ))}
    </BlobInstances>
  )
}
src/app/(examples)/no-instancing/page.tsx
파일 저장

"use client"

import { Canvas } from "@react-three/fiber"
import { Scene } from "./scene"
import { eventManagerFactory } from "./scene/event-manager"
import { Perf } from "r3f-perf"
import { OrbitControls, PerspectiveCamera } from "@react-three/drei"

export default function Home() {
  return (
    <div className="grow relative w-full h-full">
      <Canvas
        events={eventManagerFactory}
        dpr={[1, 1.5]}
        className="!absolute top-0 left-0 !w-full !h-full"
      >
        <Scene />
        <Perf />
        <PerspectiveCamera makeDefault position={[0, 0, 20]} />
        <OrbitControls />
      </Canvas>
    </div>
  )
}
src/app/(examples)/no-instancing/scene/event-manager.tsx
파일 저장

import { Canvas, events, RootState } from "@react-three/fiber";
import { DomEvent } from "@react-three/fiber/dist/declarations/src/core/events";
import * as THREE from "three";
import { valueRemap } from "@/lib/utils/math";

export const hitConfig = {
  scale: 1,
};

export const eventManagerFactory: Parameters<typeof Canvas>[0]["events"] = (
  state
) => ({
  // Default configuration
  ...events(state),

  // Determines if the event layer is active
  enabled: true,

  // Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer
  priority: 1,

  // The filter can re-order or re-structure the intersections
  filter: (items: THREE.Intersection[], state: RootState) => items,

  // The compute defines how pointer events are translated into the raycaster and pointer vector2
  compute: (event: DomEvent, state: RootState, previous?: RootState) => {
    let pointerX = (event.offsetX / state.size.width) * 2 - 1;
    let pointerY = -(event.offsetY / state.size.height) * 2 + 1;

    if (hitConfig.scale !== 1) {
      pointerX = valueRemap(pointerX, -1, 1, 0, hitConfig.scale);
      pointerY = valueRemap(pointerY, -1, 1, 0, hitConfig.scale);

      pointerX = pointerX % 1;
      pointerY = pointerY % 1;

      pointerX = valueRemap(pointerX, 0, 1, -1, 1);
      pointerY = valueRemap(pointerY, 0, 1, -1, 1);
    }

    state.pointer.set(pointerX, pointerY);
    state.raycaster.setFromCamera(state.pointer, state.camera);
  },

  // Find more configuration default on ./packages/fiber/src/web/events.ts
  // And type definitions in ./packages/fiber/src/core/events.ts
});
src/app/(examples)/no-instancing/scene/index.tsx
파일 저장

import * as THREE from "three"

const boxCount = 1000

const getRandomPosition = () => {
  return [
    (Math.random() - 0.5) * 10,
    (Math.random() - 0.5) * 10,
    (Math.random() - 0.5) * 10
  ] as const
}

const getRandomColor = () => {
  return new THREE.Color(Math.random(), Math.random(), Math.random())
}

const getRandomScale = () =>
  new THREE.Vector3(0.4, 0.4, 0.4).multiplyScalar(Math.random() + 0.1)

export function Scene() {
  return (
    <>
      {Array.from({ length: boxCount }).map((_, index) => (
        <mesh
          key={index}
          position={getRandomPosition()}
          scale={getRandomScale()}
        >
          <boxGeometry />
          <meshBasicMaterial color={getRandomColor()} />
        </mesh>
      ))}
    </>
  )
}
src/app/globals.css
파일 저장

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

#root {
  width: 100%;
  height: 100%;
}
src/app/layout.tsx
파일 저장

import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import "./globals.css"
import { Leva } from "@/components/layout/leva"

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"]
})

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"]
})

export const metadata: Metadata = {
  title: "R3F Instances",
  description: "From the basement.studio"
}

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
        <Leva />
      </body>
    </html>
  )
}
src/app/page.tsx
파일 저장

"use client"

export default function Home() {
  return (
    <div className="w-full h-screen flex flex-col items-center justify-center"></div>
  )
}
src/components/debug-textures/index.tsx
파일 저장

import { createPortal, useFrame, useThree } from "@react-three/fiber"
import { folder as levaFolder, useControls } from "leva"
import { useEffect, useMemo } from "react"
import {
  GLSL3,
  Group,
  OrthographicCamera,
  RawShaderMaterial,
  Texture
} from "three"
import vertexShader from "./shader/index.vert"
import fragmentShader from "./shader/index.frag"
import { saveGlState } from "@/lib/save-gl-state"

export interface DebugTexturesProps {
  hitConfig?: {
    scale: number
  }
  textures: Record<string, Texture | null>
  defaultTexture?: string
}

function getInitialSelectedTexture(defaultTexture: string, textures: string[]) {
  const query =
    typeof window !== "undefined"
      ? new URLSearchParams(window.location.search).get("debugTarget") ||
        defaultTexture
      : defaultTexture

  if (textures.includes(query)) {
    return query
  }

  return defaultTexture
}

export function DebugTextures({
  hitConfig,
  textures,
  defaultTexture = "screen"
}: DebugTexturesProps) {
  const camera = useMemo(() => new OrthographicCamera(), [])
  const numTextures = Object.keys(textures).length

  const debugTextureProgram = useMemo(
    () =>
      new RawShaderMaterial({
        vertexShader,
        fragmentShader,
        glslVersion: GLSL3,
        uniforms: {
          uMap: { value: null }
        }
      }),
    []
  )

  const grid = useMemo(() => {
    const sqrt = Math.sqrt(numTextures)
    const columns = Math.ceil(sqrt)
    const rows = Math.ceil(sqrt)
    const total = columns * rows

    return {
      columns,
      rows,
      total
    }
  }, [numTextures])

  const debugScene = useMemo(() => new Group(), [])

  const { debugTarget } = useControls({
    DebugTextures: levaFolder({
      debugTarget: {
        value: getInitialSelectedTexture(defaultTexture, Object.keys(textures)),
        options: Object.keys(textures).concat("all"),
        onChange: (value) => {
          if (typeof window !== "undefined") {
            window.history.pushState(
              {},
              "",
              window.location.pathname + "?debugTarget=" + value
            )
          }
        },
        transient: false
      }
    })
  })

  const size = useThree((state) => state.size)

  const DEFAULT_SCISSOR = {
    x: 0,
    y: 0,
    width: size.width,
    height: size.height
  }

  // const saveGlState = useCallback(() => {
  //   const prevTarget = gl.getRenderTarget()
  //   const prevAutoClear = gl.autoClear
  //   return () => {
  //     gl.setRenderTarget(prevTarget)
  //     gl.autoClear = prevAutoClear
  //   }
  // }, [gl])

  useEffect(() => {
    return () => {
      if (!hitConfig) return
      hitConfig.scale = 1
    }
  }, [])

  useFrame((state) => {
    const { gl } = state

    const resetGl = saveGlState(state)

    gl.autoClear = false
    gl.setRenderTarget(null)

    // gl.clear("#000", )

    gl.setViewport(
      DEFAULT_SCISSOR.x,
      DEFAULT_SCISSOR.y,
      DEFAULT_SCISSOR.width,
      DEFAULT_SCISSOR.height
    )

    gl.setScissor(
      DEFAULT_SCISSOR.x,
      DEFAULT_SCISSOR.y,
      DEFAULT_SCISSOR.width,
      DEFAULT_SCISSOR.height
    )

    const width = size.width
    const height = size.height

    const { columns, rows } = grid

    if (debugTarget !== "all" && debugTarget in textures) {
      hitConfig && (hitConfig.scale = 1)
      debugTextureProgram.uniforms.uMap.value = textures[debugTarget]
      gl.render(debugScene, camera)
      resetGl()
      return
    }

    hitConfig && (hitConfig.scale = columns)

    for (let i = 0; i < numTextures; i++) {
      const col = i % columns
      const row = rows - Math.floor(i / columns) - 1

      const w = width / columns
      const h = height / rows
      const x = col * w
      const y = row * h

      // console.log(w, h, x, y)

      gl.setViewport(x, y, w, h)
      // gl.setScissor(x, y, w, h)

      debugTextureProgram.uniforms.uMap.value =
        textures[Object.keys(textures)[i]]

      gl.render(debugScene, camera)
    }

    // reset

    gl.setViewport(
      DEFAULT_SCISSOR.x,
      DEFAULT_SCISSOR.y,
      DEFAULT_SCISSOR.width,
      DEFAULT_SCISSOR.height
    )

    gl.setScissor(
      DEFAULT_SCISSOR.x,
      DEFAULT_SCISSOR.y,
      DEFAULT_SCISSOR.width,
      DEFAULT_SCISSOR.height
    )
    resetGl()
  }, 1)

  return (
    <>
      {createPortal(
        <mesh>
          <planeGeometry args={[2, 2]} />
          <primitive object={debugTextureProgram} />
        </mesh>,
        debugScene
      )}
    </>
  )
}
src/components/debug-textures/shader/index.frag
파일 저장

precision highp float;

in vec2 vUv;

uniform sampler2D uMap;

out vec4 fragColor;

void main() {
  fragColor = texture(uMap, vUv);
}
src/components/debug-textures/shader/index.vert
파일 저장

precision highp float;

in vec3 position;
in vec2 uv;

out vec2 vUv;

void main() {
  vUv = uv;

  gl_Position = vec4(position, 1.0);
}
src/components/layout/leva.tsx
파일 저장

"use client"

import { Leva as LevaComponent } from "leva"

export const Leva = () => (
  <div className="fixed bottom-4 right-4 z-50">
    <LevaComponent fill />
  </div>
)
src/components/layout/navigation-menu.tsx
파일 저장

import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"
import * as React from "react"

import { cn } from "@/lib/utils/utils"

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      "relative z-10 flex max-w-max flex-1 items-center justify-center",
      className
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      "group flex flex-1 list-none items-center justify-center space-x-1",
      className
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  "bg-black/25 backdrop-blur-3xl border border-white/50 text-white group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-black/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent cursor-pointer"
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), "group", className)}
    {...props}
  >
    {children}{" "}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
      className
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-white/50 bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
      className
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
  NavigationMenuViewport
}
src/components/quad-shader/index.tsx
파일 저장

import { createPortal, RenderCallback, useFrame } from "@react-three/fiber"
import { RefObject, useMemo } from "react"
import {
  BufferAttribute,
  BufferGeometry,
  OrthographicCamera,
  Scene,
  ShaderMaterial,
  Vector3,
  WebGLRenderTarget
} from "three"

export const quadCamera = new OrthographicCamera(-1, 1, 1, -1, 0.1, 2)

quadCamera.position.set(0, 0, 1)

export const quadGeometry = new BufferGeometry()
quadGeometry.setAttribute(
  "position",
  new BufferAttribute(new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]), 3)
)
quadGeometry.setAttribute(
  "uv",
  new BufferAttribute(new Float32Array([0, 0, 2, 0, 0, 2]), 2)
)

export interface QuadShaderProps {
  program: ShaderMaterial
  renderTarget: WebGLRenderTarget | RefObject<WebGLRenderTarget>
  beforeRender?: RenderCallback
  afterRender?: RenderCallback
  autoRender?: boolean
  priority?: number
}

export function QuadShader({
  program,
  renderTarget,
  beforeRender,
  afterRender,
  autoRender = true,
  priority = 0
}: QuadShaderProps) {
  const containerScene = useMemo(() => new Scene(), [])

  useFrame((state, delta) => {
    if (beforeRender) {
      beforeRender(state, delta)
    }

    if (autoRender) {
      if ("current" in renderTarget) {
        state.gl.setRenderTarget(renderTarget.current)
      } else {
        state.gl.setRenderTarget(renderTarget)
      }

      state.gl.render(containerScene, quadCamera)
      state.gl.setRenderTarget(null)
    }

    if (afterRender) {
      afterRender(state, delta)
    }
  }, priority)

  return (
    <>
      {createPortal(
        <mesh geometry={quadGeometry}>
          <primitive object={program} />
        </mesh>,
        containerScene
      )}
    </>
  )
}

export function QuadMesh({ children }: { children: React.ReactNode }) {
  return <mesh geometry={quadGeometry}>{children}</mesh>
}
src/components/render-texture/index.tsx
파일 저장

import { createPortal, RenderCallback, useFrame } from "@react-three/fiber"
import { PropsWithChildren, RefObject, useMemo } from "react"
import {
  OrthographicCamera,
  PerspectiveCamera,
  Scene,
  WebGLRenderTarget
} from "three"
import { saveGlState } from "@/lib/save-gl-state"

export interface RenderTextureProps {
  renderTarget: WebGLRenderTarget | RefObject<WebGLRenderTarget> | null
  beforeRender?: RenderCallback
  afterRender?: RenderCallback
  autoRender?: boolean
  camera?: OrthographicCamera | PerspectiveCamera
  priority?: number
}

function RenderTextureWrapper({
  renderTarget,
  beforeRender,
  afterRender,
  autoRender = true,
  camera,
  priority,
  children
}: PropsWithChildren<RenderTextureProps>) {
  useFrame((state, delta) => {
    // console.log(state.camera.position)

    const restore = saveGlState(state)
    if (beforeRender) {
      beforeRender(state, delta)
    }

    if (autoRender) {
      if (renderTarget && "current" in renderTarget) {
        state.gl.setRenderTarget(renderTarget.current)
      } else {
        state.gl.setRenderTarget(renderTarget)
      }

      state.gl.render(state.scene, camera ?? state.camera)
    }

    if (afterRender) {
      afterRender(state, delta)
    }
    restore()
  }, priority)

  return children
}

export function RenderTexture(props: PropsWithChildren<RenderTextureProps>) {
  const containerScene = useMemo(() => new Scene(), [])

  return (
    <>
      {createPortal(
        <RenderTextureWrapper {...props}>
          {props.children}
        </RenderTextureWrapper>,
        containerScene
      )}
    </>
  )
}
src/hooks/use-audio-analyzer.ts
파일 저장

import { useCallback, useEffect, useRef, useState } from "react"

interface UseAudioAnalyzerReturn {
  isPlaying: boolean
  currentVolumeRef: React.MutableRefObject<number>
  playAudio: () => void
  pauseAudio: () => void
  toggleAudio: () => void
}

export function useAudioAnalyzer(audioUrl: string): UseAudioAnalyzerReturn {
  const audioRef = useRef<HTMLAudioElement | null>(null)
  const audioContextRef = useRef<AudioContext | null>(null)
  const analyserRef = useRef<AnalyserNode | null>(null)
  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null)
  const dataArrayRef = useRef<Uint8Array | null>(null)
  const animationFrameRef = useRef<number | null>(null)
  const currentVolumeRef = useRef(0)
  const isPlayingRef = useRef(false)

  const [isPlaying, setIsPlaying] = useState(false)

  // Initialize audio context and analyzer
  const initializeAudio = useCallback(async () => {
    if (audioRef.current && !audioContextRef.current) {
      // Create audio context
      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)()

      // Create analyzer
      analyserRef.current = audioContextRef.current.createAnalyser()
      analyserRef.current.fftSize = 256
      analyserRef.current.smoothingTimeConstant = 0.8

      // Create source and connect to analyzer
      sourceRef.current = audioContextRef.current.createMediaElementSource(audioRef.current)
      sourceRef.current.connect(analyserRef.current)
      analyserRef.current.connect(audioContextRef.current.destination)

      // Initialize data array
      const bufferLength = analyserRef.current.frequencyBinCount
      dataArrayRef.current = new Uint8Array(bufferLength)
    }
  }, [])

  // Analyze audio data
  const analyzeAudio = useCallback(() => {

    function raf() {
      if (!analyserRef.current || !dataArrayRef.current) return

      analyserRef.current.getByteFrequencyData(dataArrayRef.current)

      // Calculate average volume
      let sum = 0
      for (let i = 0; i < dataArrayRef.current.length; i++) {
        sum += dataArrayRef.current[i]
      }
      const average = sum / dataArrayRef.current.length

      // Normalize to 0-1 range and apply some scaling for better visual response
      const normalizedVolume = Math.min(1, (average / 255) * 3)
      currentVolumeRef.current = normalizedVolume

      // Use ref instead of state to avoid callback recreation
      if (isPlayingRef.current) {
        animationFrameRef.current = requestAnimationFrame(raf)
      }
    }
    raf()
  }, []) // No dependencies to avoid callback recreation

  // Play audio
  const playAudio = useCallback(async () => {
    if (!audioRef.current) return

    try {
      await initializeAudio()

      if (audioContextRef.current?.state === 'suspended') {
        await audioContextRef.current.resume()
      }

      await audioRef.current.play()
      isPlayingRef.current = true
      setIsPlaying(true)
      analyzeAudio()
    } catch (error) {
      console.error('Error playing audio:', error)
    }
  }, [initializeAudio, analyzeAudio])

  // Pause audio
  const pauseAudio = useCallback(() => {
    if (audioRef.current) {
      audioRef.current.pause()
      isPlayingRef.current = false
      setIsPlaying(false)
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }
  }, [])

  // Toggle audio
  const toggleAudio = useCallback(() => {
    if (isPlayingRef.current) {
      pauseAudio()
    } else {
      playAudio()
    }
  }, [playAudio, pauseAudio])

  // Initialize audio element
  useEffect(() => {
    const audio = new Audio(audioUrl)
    audio.crossOrigin = "anonymous"
    audio.loop = false
    audioRef.current = audio

    // Handle audio events
    const handleEnded = () => {
      isPlayingRef.current = false
      setIsPlaying(false)
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }

    const handlePause = () => {
      isPlayingRef.current = false
      setIsPlaying(false)
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }

    audio.addEventListener('ended', handleEnded)
    audio.addEventListener('pause', handlePause)

    return () => {
      audio.removeEventListener('ended', handleEnded)
      audio.removeEventListener('pause', handlePause)

      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }

      if (sourceRef.current) {
        sourceRef.current.disconnect()
      }

      if (audioContextRef.current) {
        audioContextRef.current.close()
      }

      audio.pause()
      audio.src = ""
    }
  }, [audioUrl])

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }
  }, [])

  return {
    isPlaying,
    currentVolumeRef,
    playAudio,
    pauseAudio,
    toggleAudio
  }
} 
src/hooks/use-double-fbo.ts
파일 저장

import { useCallback, useEffect, useMemo } from "react"
import * as THREE from "three"
import type { RenderTargetOptions } from "three"

// TODO create vanilla versions

// export type DoubleFBO<TTexture extends THREE.Texture | THREE.Texture[] = THREE.Texture> = {
//   read: THREE.WebGLRenderTarget<TTexture>
//   write: THREE.WebGLRenderTarget<TTexture>
//   swap: () => void
//   dispose: () => void
//   resize: (width: number, height: number) => void
// }

class DoubleFBO<TTexture extends THREE.Texture | THREE.Texture[] = THREE.Texture> {

  public read: THREE.WebGLRenderTarget<TTexture>
  public write: THREE.WebGLRenderTarget<TTexture>

  constructor(width: number, height: number, options: RenderTargetOptions) {
    this.read = new THREE.WebGLRenderTarget<TTexture>(width, height, options)
    this.write = new THREE.WebGLRenderTarget<TTexture>(width, height, options)
  }

  get texture(): THREE.Texture {
    return this.read.texture as THREE.Texture
  }

  get textures(): TTexture {
    return this.read.textures as any as TTexture
  }

  swap() {
    const temp = this.read
    this.read = this.write
    this.write = temp
  }

  dispose() {
    this.read.dispose()
    this.write.dispose()
  }

  setSize(width: number, height: number) {
    this.read.setSize(width, height)
    this.write.setSize(width, height)
  }
}

export function useDoubleFBO<TTexture extends THREE.Texture | THREE.Texture[] = THREE.Texture>(
  width: number,
  height: number,
  options: RenderTargetOptions
): DoubleFBO<TTexture> {
  const fbo = useMemo(() => new DoubleFBO<TTexture>(width, height, options), [])

  useEffect(() => {
    fbo.setSize(width, height)
  }, [width, height, fbo])

  return fbo
}

// export function useDoubleFBO<TTexture extends THREE.Texture | THREE.Texture[] = THREE.Texture>(
//   width: number,
//   height: number,
//   options: RenderTargetOptions
// ): DoubleFBO<TTexture> {
//   const read = useMemo(() => {
//     const fbo = new THREE.WebGLRenderTarget<TTexture>(width, height, options)
//     return fbo
//     // eslint-disable-next-line react-hooks/exhaustive-deps
//   }, [])

//   const write = useMemo(() => {
//     const fbo = new THREE.WebGLRenderTarget<TTexture>(width, height, options)
//     return fbo
//     // eslint-disable-next-line react-hooks/exhaustive-deps
//   }, [])

//   const resize = useCallback((width: number, height: number) => {
//     read.setSize(width, height)
//     write.setSize(width, height
//   }, [read, write])

//   useEffect(() => {
//     resize(width, height)
//   }, [width, height, resize])

//   useEffect(() => {
//     // dispose on unmount
//     return () => {
//       read.dispose()
//       write.dispose()
//     }
//     // eslint-disable-next-line react-hooks/exhaustive-deps
//   }, [])

//   const fbo = useMemo<DoubleFBO<TTexture>>(
//     () => ({
//       read,
//       write,
//       resize,
//       swap: () => {
//         const temp = fbo.read
//         fbo.read = fbo.write
//         fbo.write = temp
//       },
//       dispose: () => {
//         read.dispose()
//         write.dispose()
//       }
//     }),
//     // eslint-disable-next-line react-hooks/exhaustive-deps
//     []
//   )

//   return fbo
// }
src/hooks/use-download-fbo.ts
파일 저장

import { useCallback, useRef } from "react"
import { RootState, useThree } from "@react-three/fiber"
import { useControls, button } from "leva"
import * as THREE from "three"

interface UseDownloadFboProps {
  canScale?: boolean
  fbo: THREE.WebGLRenderTarget
  onDownloadRequest?: (state: RootState, delta: number, sizeMultiplier: number) => () => void
}

export function useDownloadFbo({ fbo, onDownloadRequest, canScale = true }: UseDownloadFboProps) {
  const { gl } = useThree()

  const downloadRequestRef = useRef(onDownloadRequest)
  downloadRequestRef.current = onDownloadRequest

  const state = useThree()

  const isRenderingRef = useRef(false)

  const sizeMultiplierRef = useRef(1)

  const downloadFboTexture = useCallback(() => {
    const canvas = document.createElement("canvas")
    const ctx = canvas.getContext("2d")

    if (!ctx) return

    isRenderingRef.current = true

    const cleanupFunction = downloadRequestRef.current?.(state, 0.001, sizeMultiplierRef.current)

    // Set canvas size to match texture
    canvas.width = fbo.texture.image.width
    canvas.height = fbo.texture.image.height

    // Read pixels from the texture
    const pixels = new Uint8Array(canvas.width * canvas.height * 4)
    gl.readRenderTargetPixels(
      fbo,
      0,
      0,
      canvas.width,
      canvas.height,
      pixels
    )

    // Create ImageData and flip Y (WebGL has origin at bottom-left, canvas at top-left)
    const imageData = ctx.createImageData(canvas.width, canvas.height)
    for (let y = 0; y < canvas.height; y++) {
      for (let x = 0; x < canvas.width; x++) {
        const srcIdx = ((canvas.height - 1 - y) * canvas.width + x) * 4
        const dstIdx = (y * canvas.width + x) * 4
        imageData.data[dstIdx] = pixels[srcIdx] // R
        imageData.data[dstIdx + 1] = pixels[srcIdx + 1] // G
        imageData.data[dstIdx + 2] = pixels[srcIdx + 2] // B
        imageData.data[dstIdx + 3] = pixels[srcIdx + 3] // A
      }
    }

    ctx.putImageData(imageData, 0, 0)

    // Create download link
    canvas.toBlob((blob) => {
      if (!blob) return

      const url = URL.createObjectURL(blob)
      const link = document.createElement("a")
      link.href = url
      link.download = `texture-${Date.now()}.png`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(url)

      cleanupFunction?.()

      isRenderingRef.current = false
    }, "image/png")
  }, [gl, fbo])

  useControls("Export", {
    download: button(() => downloadFboTexture()),
    sizeMultiplier: {
      disabled: !canScale,
      value: 1,
      min: 1,
      max: 5,
      step: 1,
      onChange: (value) => {
        sizeMultiplierRef.current = value
      }
    }
  })

  return isRenderingRef
} 
src/hooks/use-fbo.ts
파일 저장

import { useEffect, useMemo } from "react"
import * as THREE from "three"
import type { RenderTargetOptions } from "three"


export function useFBO<TTexture extends THREE.Texture | THREE.Texture[] = THREE.Texture>(
  width: number,
  height: number,
  options: RenderTargetOptions
): THREE.WebGLRenderTarget<TTexture> {
  const target = useMemo(() => {
    const fbo = new THREE.WebGLRenderTarget<TTexture>(width, height, options)
    return fbo
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    target.setSize(width, height)
  }, [width, height, target])

  useEffect(() => {
    // dispose on unmount
    return () => {
      target.dispose()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return target
}
src/hooks/use-shader.ts
파일 저장

import { useMemo } from "react"
import { RawShaderMaterial, ShaderMaterial, ShaderMaterialParameters } from "three"

type IUniform = {
  value: unknown
}

type ShaderProgram<U extends Record<string, IUniform> = {}> = ShaderMaterial & {
  uniforms: U
  setDefine: (name: string, value: string) => void
}

export function useShader<U extends Record<string, IUniform> = {}>(parameters: Omit<ShaderMaterialParameters, 'uniforms'>, uniforms: U = {} as U): ShaderProgram<U> {
  const program = useMemo(() => {
    const p = new ShaderMaterial({
      ...parameters,
      uniforms
    }) as ShaderProgram<U>

    p.setDefine = (name, value) => {
      p.defines[name] = value
      p.needsUpdate = true
    }

    return p
  }, [parameters.vertexShader, parameters.fragmentShader])



  return program
}

type RawShaderProgram<U extends Record<string, IUniform> = {}> = RawShaderMaterial & {
  uniforms: U
  setDefine: (name: string, value: string) => void
}

export function useRawShader<U extends Record<string, IUniform> = {}>(parameters: Omit<ShaderMaterialParameters, 'uniforms'>, uniforms: U = {} as U): RawShaderProgram<U> {
  const program = useMemo(() => {
    const p = new RawShaderMaterial({
      ...parameters,
      uniforms
    }) as RawShaderProgram<U>

    return p
  }, [parameters.vertexShader, parameters.fragmentShader])

  return program
}
src/hooks/use-uniforms.ts
파일 저장

import { useMemo } from "react"
import * as THREE from "three"

export function useUniforms<T extends Record<string, THREE.IUniform>>(uniforms: T) {
  return useMemo<T>(() => uniforms, [])
}
src/hooks/use-upload-image.ts
파일 저장

import { useCallback, useRef } from "react"
import { useControls, button } from "leva"
import * as THREE from "three"

export function useUploadImage(
  label: string,
  onUploadCallback: (texture: THREE.Texture) => void
) {
  const fileInputRef = useRef<HTMLInputElement | null>(null)
  const callbackRef = useRef(onUploadCallback)
  callbackRef.current = onUploadCallback

  const handleFileUpload = useCallback((event: Event) => {
    const target = event.target as HTMLInputElement
    const file = target.files?.[0]

    if (!file || !file.type.startsWith('image/')) return

    const reader = new FileReader()
    reader.onload = (e) => {
      const img = new Image()
      img.onload = () => {
        // Create texture from the loaded image
        const texture = new THREE.Texture(img)
        texture.needsUpdate = true
        texture.flipY = false // Adjust based on your needs
        texture.wrapS = THREE.ClampToEdgeWrapping
        texture.wrapT = THREE.ClampToEdgeWrapping
        texture.minFilter = THREE.LinearFilter
        texture.magFilter = THREE.LinearFilter

        callbackRef.current(texture)
      }
      img.src = e.target?.result as string
    }
    reader.readAsDataURL(file)

    // Reset the input so the same file can be selected again
    target.value = ''
  }, [])

  const triggerFileUpload = useCallback(() => {
    // Create file input if it doesn't exist
    if (!fileInputRef.current) {
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = 'image/*'
      input.style.display = 'none'
      input.addEventListener('change', handleFileUpload)
      document.body.appendChild(input)
      fileInputRef.current = input
    }

    fileInputRef.current.click()
  }, [handleFileUpload])

  useControls(label, {
    "upload image": button(() => triggerFileUpload())
  })

  // Cleanup function to remove the file input when component unmounts
  const cleanup = useCallback(() => {
    if (fileInputRef.current) {
      fileInputRef.current.removeEventListener('change', handleFileUpload)
      document.body.removeChild(fileInputRef.current)
      fileInputRef.current = null
    }
  }, [handleFileUpload])

  // Return cleanup function in case it's needed
  return cleanup
} 
src/lib/clx.ts
파일 저장

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export const clx = (...inputs: ClassValue[]) => twMerge(clsx(...inputs))
src/lib/constants.ts
파일 저장

export const isDev = process.env.NODE_ENV === "development"
export const isProd = process.env.NODE_ENV === "production"

export const isClient = typeof document !== "undefined"
export const isServer = !isClient

export const basementLog = `

   ██╗
   ██║
   ██████╗
   ██╔══██╗  ██╗
   ██████╔╝  ██╝
   ╚═════╝   
                                                                                
   From the basement. https://basement.studio
`
src/lib/easings.ts
파일 저장

export type EasingFunction = (t: number) => number

export const inOutQuad: EasingFunction = (x) =>
  x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2

export const outQuad: EasingFunction = (x) => 1 - (1 - x) * (1 - x)

export const inQuad: EasingFunction = (x) => x * x

export const inQuart: EasingFunction = (x) => x * x * x * x

export const inOutCubic: EasingFunction = (x) =>
  x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2

export const inOurExpo: EasingFunction = (x) =>
  x === 0 ? 0 : Math.pow(2, 10 * x - 10)

export const linear: EasingFunction = (x) => x
src/lib/save-gl-state.ts
파일 저장

import { RootState } from "@react-three/fiber"
import * as THREE from "three"

export function saveGlState(state: RootState) {
  const prevTarget = state.gl.getRenderTarget()
  const prevClearColor = new THREE.Color()
  state.gl.getClearColor(prevClearColor)
  const prevClearAlpha = state.gl.getClearAlpha()
  const prevViewport = new THREE.Vector4()
  state.gl.getViewport(prevViewport)
  const prevAutoClear = state.gl.autoClear

  const restore = () => {
    state.gl.setRenderTarget(prevTarget)
    state.gl.setClearColor(prevClearColor, prevClearAlpha)
    state.gl.setViewport(prevViewport)
    state.gl.autoClear = prevAutoClear
  }

  return restore
}
src/lib/subscribable.ts
파일 저장

export interface Subscribable<T extends Function = () => void> {
  addCallback: (callback: T, id?: string) => string
  removeCallback: (id: string | T) => void
  getCallbacks: () => T[]
  getCallback: (id: string) => T
  getCallbackIds: () => string[]
  clearCallbacks: () => void
  runCallbacks: T
}

export const subscribable = <
  T extends Function = () => void
>(): Subscribable<T> => {
  const callbacks: Record<string, T> = {}

  const addCallback = (callback: T, id: string): string => {
    const _id = id || crypto.randomUUID()
    callbacks[_id] = callback
    return _id
  }

  const removeCallback = (id: string | Function): void => {
    if (typeof id === "function") {
      const key = Object.keys(callbacks).find((k) => callbacks[k] === id)
      if (key) delete callbacks[key]
      return
    }

    delete callbacks[id]
  }

  const getCallbacks = (): T[] => Object.values(callbacks)

  const getCallback = (id: string): T => callbacks[id]

  const clearCallbacks = (): void => {
    Object.keys(callbacks).forEach((id) => {
      removeCallback(id)
    })
  }

  const runCallbacks = (...params: unknown[]): void => {
    let response = undefined as any
    Object.values(callbacks).forEach((callback) => {
      response = callback(...params)
    })
    return response
  }

  return {
    addCallback,
    removeCallback,
    getCallback,
    getCallbacks,
    getCallbackIds: () => Object.keys(callbacks),
    clearCallbacks,
    runCallbacks: runCallbacks as unknown as T
  } as Subscribable<T>
}
src/lib/utils/can-prefetch.ts
파일 저장

import type { UrlObject } from "node:url"

/**
 * Checks whether the provided URL can be prefetched (i.e. is an internal URL).
 * Used by the `Link` component to determine whether to prefetch the URL.
 */

export function canPrefetch(href: string | UrlObject): boolean {
  const _href = typeof href === "string" ? href : href.pathname

  if (!_href || /^https?:\/\/$/.exec(_href)) {
    return false
  }

  // URL constructor implemenation in Firefox crashes if url contains *
  if (_href.includes("*")) return false

  return _href.startsWith("/")
}
src/lib/utils/canvas.ts
파일 저장

/*
  Since the quad does not make camera relative calcs to position the plane, we just need to make
  a rule of three calculation to convert the px to canvas units. No need to cam fov or zoom.
*/
export const pxToQuadCanvasUnits = (base: number, px: number) => {
  return (px * 2) / base
}

export const noScissor = (gl: WebGLRenderingContext, cb: () => void) => {
  gl.disable(gl.SCISSOR_TEST)
  cb()
  gl.enable(gl.SCISSOR_TEST)
}

export const canvasFit = (
  destWidth: number,
  destHeight: number,
  srcWidth: number,
  srcHeight: number,
  strategy: "cover" | "contain"
) => {
  const aspectRatio = srcWidth / srcHeight
  const canvasAspectRatio = destWidth / destHeight

  let drawWidth = destWidth
  let drawHeight = destHeight
  let drawX = 0
  let drawY = 0

  if (strategy === "cover") {
    /* cover */
    if (aspectRatio < canvasAspectRatio) {
      drawHeight = destWidth / aspectRatio
      drawY = (destHeight - drawHeight) / 2
    } else {
      drawWidth = destHeight * aspectRatio
      drawX = (destWidth - drawWidth) / 2
    }
  }

  if (strategy === "contain") {
    /* contain */
    if (aspectRatio < canvasAspectRatio) {
      drawWidth = destHeight * aspectRatio
      drawX = (destWidth - drawWidth) / 2
    } else {
      drawHeight = destWidth / aspectRatio
      drawY = (destHeight - drawHeight) / 2
    }
  }

  return {
    drawWidth,
    drawHeight,
    drawX,
    drawY
  }
}
src/lib/utils/image.ts
파일 저장

// in sync with next.config.js (https://nextjs.org/docs/api-reference/next/image#device-sizes)
const imageWidths = [
  16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840
] as const

export type NextImageWidth = (typeof imageWidths)[number]

export const getNextImageSrc = ({
  src,
  width,
  quality = 75
}: {
  src: string
  width: NextImageWidth
  quality?: number
}) => {
  return `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`
}

export const findClosestNextImageWidth = (width: number): NextImageWidth => {
  return (
    (imageWidths.find((w) => w >= width) ||
      imageWidths[imageWidths.length - 1]) ??
    3840
  )
}

export const getImageSizes = (
  desktop: number,
  tablet?: number,
  mobile?: number
) => {
  let str = ""

  if (mobile) {
    str += `(max-width: 767px) ${mobile}, `
  }
  if (tablet) {
    str += `(max-width: 1024px) ${tablet}, `
  }
  if (desktop) {
    str += desktop
  }

  return str
}
src/lib/utils/index.ts
파일 저장

import { isClient } from "@/lib/constants"

export const formatError = (
  error: unknown
): { message: string; name?: string } => {
  try {
    if (error instanceof Error) {
      return { message: error.message, name: error.name }
    }
    return { message: String(error) }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
  } catch (error) {
    return { message: "Un error desconocido ocurrió." }
  }
}

export const isApiSupported = (api: string) => isClient && api in window

/* Builds responsive sizes string for images */
export const getSizes = (
  entries: ({ breakpoint: string; width: string } | string | number)[]
) => {
  const sizes = entries.map((entry) => {
    if (!entry) {
      return ""
    }

    if (typeof entry === "string") {
      return entry
    }

    if (typeof entry === "number") {
      return `${entry}px`
    }

    if (entry.breakpoint.includes("px") || entry.breakpoint.includes("rem")) {
      return `(min-width: ${entry.breakpoint}) ${entry.width}`
    }

    throw new Error(`Invalid breakpoint: ${entry.breakpoint}`)
  })

  return sizes.join(", ")
}

export interface SplittedText {
  chars: string[]
  words: [string, string[]][]
}

export const splitText = (text: string): SplittedText => {
  const chars: string[] = []
  const words: [string, string[]][] = []

  text.split(" ").forEach((word, i, wordArr) => {
    /* If not last add space to last letters */
    const wordChars = word.split("").map((char, j, charArr) => {
      const isLastWord = i === wordArr.length - 1
      const isLastChar = j === charArr.length - 1

      return !isLastWord && isLastChar ? `${char} ` : char
    })

    chars.push(...wordChars)

    words.push([word, wordChars])
  })

  return {
    chars,
    words
  }
}
src/lib/utils/math.ts
파일 저장

export const lerp = (start: number, end: number, t: number) => {
  return start * (1 - t) + end * t
}

export const valueRemap = (
  value: number,
  inMin: number,
  inMax: number,
  outMin: number,
  outMax: number
) => {
  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin
}

export const ruleOfThree = (a: number, b: number, c: number): number =>
  (b * c) / a

export const degToRad = (angle: number) => (angle * Math.PI) / 180

export const secToMs = (sec: number) => sec * 1000

export const msToSec = (ms: number) => ms / 1000

export const mod = (n: number, m: number) => ((n % m) + m) % m

export const clamp = (min: number, max: number, value: number) =>
  Math.min(Math.max(value, min), max)

export const round = (value: number, decimals: number) =>
  Number(value.toFixed(decimals))

export const hexToRgb = (hex: string) => {
  const match = hex.replace(/#/, "").match(/.{1,2}/g)
  if (!match) return
  /* check three components */
  if (!match[0] || !match[1] || !match[2]) {
    throw new Error("Invalid hex color")
  }
  const r = parseInt(match[0], 16)
  const g = parseInt(match[1], 16)
  const b = parseInt(match[2], 16)
  return { r, g, b }
}


export const mix = (a: number, b: number, t: number) => {
  return a * (1 - t) + b * t
}

/** highp smoothstep */
export const smoothstep = (edge0: number, edge1: number, x: number) => {
  const denom = edge1 - edge0
  if (Math.abs(denom) < 1e-6) return 0.5

  const t = Math.max(0, Math.min(1, (x - edge0) / denom))
  return t * t * (3 - 2 * t)
}
src/lib/utils/utils.ts
파일 저장

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
src/types/glsl.d.ts
파일 저장

declare module "*.frag" {
  const content: string
  export default content
}

declare module "*.vert" {
  const content: string
  export default content
}

declare module "*.glsl" {
  const content: string
  export default content
}
Original author attribution실행 안내·자료
파일 저장

Three.js Instances: Rendering Multiple Objects Simultaneously
Original author: Matias Gonzalez Fernandez
Published by Codrops. Copyright (c) 2026 Codrops.
License: MIT, pursuant to the publisher's downloadable-demo grant.
Keep CODROPS-MIT-2026.txt and the original project notices with copies.
Third-party media exceptions and credits are recorded separately in the source inventory.
external/drei-assets/venice_sunset_1k.hdr — CC0-1.0실행 안내·자료

큰 소스 파일과 이미지·모델 등의 자료는 파일을 저장해 확인할 수 있어요.

Google Draco decoder notices실행 안내·자료
파일 저장

Google Draco 1.5.5 license and bundled notices
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

--------------------------------------------------------------------------------
Files: docs/assets/js/ASCIIMathML.js

Copyright (c) 2014 Peter Jipsen and other ASCIIMathML.js contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

--------------------------------------------------------------------------------
Files: docs/assets/css/pygments/*

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.

In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to <http://unlicense.org>
Bundled dependency licenses실행 안내·자료
파일 저장

react@19.3.0 — LICENSE
MIT License

Copyright (c) Meta Platforms, Inc. and affiliates.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


scheduler@0.28.0 — LICENSE
MIT License

Copyright (c) Meta Platforms, Inc. and affiliates.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


react-dom@19.3.0 — LICENSE
MIT License

Copyright (c) Meta Platforms, Inc. and affiliates.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


three@0.176.0 — LICENSE
The MIT License

Copyright © 2010-2025 three.js authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.


use-sync-external-store@1.7.0 — LICENSE
MIT License

Copyright (c) Meta Platforms, Inc. and affiliates.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


zustand@5.0.15 — LICENSE
MIT License

Copyright (c) 2019 Paul Henschel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


suspend-react@0.1.3 — LICENSE
MIT License

Copyright (c) 2021 Paul Henschel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


scheduler@0.27.0 — LICENSE
MIT License

Copyright (c) Meta Platforms, Inc. and affiliates.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


its-fine@2.0.0 — LICENSE
MIT License

Copyright (c) 2022-2025 Poimandres

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


react-use-measure@2.1.7 — LICENSE
MIT License

Copyright (c) 2019-2025 Poimandres

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


zustand@4.5.7 — LICENSE
MIT License

Copyright (c) 2019 Paul Henschel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


r3f-perf@7.2.3 — LICENSE
MIT License

Copyright (c) 2021-2023 Renaud ROHLINGER

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


eventemitter3@4.0.7 — LICENSE
The MIT License (MIT)

Copyright (c) 2014 Arnout Kazemier

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


@radix-ui/react-icons@1.3.2 — LICENSE
MIT License

Copyright (c) 2022 WorkOS

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


@babel/runtime@7.29.7 — LICENSE
MIT License

Copyright (c) 2014-present Sebastian McKenzie and other contributors

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


@react-three/drei@9.122.0 — LICENSE
MIT License

Copyright (c) 2020 react-spring

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


zustand@5.0.15 — LICENSE
MIT License

Copyright (c) 2019 Paul Henschel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


@use-gesture/core@10.3.1 — LICENSE
Copyright (c) 2018-present Paul Henschel <drcmda@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

@use-gesture/react@10.3.1 — LICENSE
Copyright (c) 2018-present Paul Henschel <drcmda@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

@react-spring/rafz@9.7.5 — LICENSE
MIT License

Copyright (c) 2018-present Paul Henschel, react-spring, all contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


@react-spring/shared@9.7.5 — LICENSE
MIT License

Copyright (c) 2018-present Paul Henschel, react-spring, all contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


@react-spring/animated@9.7.5 — LICENSE
MIT License

Copyright (c) 2018-present Paul Henschel, react-spring, all contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


@react-spring/types@9.7.5 — LICENSE
MIT License

Copyright (c) 2018-present Paul Henschel, react-spring, all contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


@react-spring/core@9.7.5 — LICENSE
MIT License

Copyright (c) 2018-present Paul Henschel, react-spring, all contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


@react-spring/three@9.7.5 — LICENSE
MIT License

Copyright (c) 2018-present Paul Henschel, react-spring, all contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


three-stdlib@2.36.1 — LICENSE
MIT License

Copyright (c) 2021-2023 Poimandres

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


potpack@1.0.2 — LICENSE
ISC License

Copyright (c) 2018, Mapbox

Permission to use, copy, modify, and/or distribute this software for any purpose
with or without fee is hereby granted, provided that the above copyright notice
and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
THIS SOFTWARE.


fflate@0.6.11 — LICENSE
MIT License

Copyright (c) 2020 Arjun Barrett

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

troika-worker-utils@0.52.0 — LICENSE
MIT License

Copyright (c) 2019 ProtectWise
Copyright (c) 2021 Jason Johnston

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


webgl-sdf-generator@1.1.1 — LICENSE.txt
Copyright (c) 2021 Jason Johnston

MIT License

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


bidi-js@1.1.0 — LICENSE.txt
Copyright (c) 2021 Jason Johnston

MIT License

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


troika-three-utils@0.52.5 — LICENSE
MIT License

Copyright (c) 2019 ProtectWise
Copyright (c) 2021 Jason Johnston

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


troika-three-text@0.52.5 — LICENSE
MIT License

Copyright (c) 2019 ProtectWise
Copyright (c) 2021 Jason Johnston

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


meshline@3.3.1 — LICENSE
MIT License

Copyright (c) 2016 Jaume Sanchez

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


camera-controls@2.10.1 — LICENSE
MIT License

Copyright (c) 2017 @yomotsu

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


hls.js@1.7.3 — LICENSE
Copyright (c) 2017 Dailymotion (http://www.dailymotion.com)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

src/remux/mp4-generator.js and src/demux/exp-golomb.ts implementation in this project
are derived from the HLS library for video.js (https://github.com/videojs/videojs-contrib-hls)

That work is also covered by the Apache 2 License, following copyright:
Copyright (c) 2013-2015 Brightcove


THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.


stats.js@0.17.0 — LICENSE
The MIT License

Copyright (c) 2009-2016 stats.js authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.


detect-gpu@5.0.70 — LICENSE
MIT License

Copyright (c) 2020 Tim van Scherpenzeel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


three-mesh-bvh@0.7.8 — LICENSE
MIT License

Copyright (c) 2018 Garrett Johnson

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


prop-types@15.8.1 — LICENSE
MIT License

Copyright (c) 2013-present, Facebook, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


react-composer@5.0.3 — LICENSE
MIT License

Copyright (c) 2018 James, please

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


@monogrid/gainmap-js@3.4.0 — LICENSE
MIT License

Copyright (c) 2023 MONOGRID

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


zustand@4.5.7 — LICENSE
MIT License

Copyright (c) 2019 Paul Henschel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


tunnel-rat@0.1.2 — LICENSE
MIT License

Copyright (c) 2022 Poimandres

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


@react-three/drei@10.7.8 — LICENSE
MIT License

Copyright (c) 2020 react-spring

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


camera-controls@3.1.2 — LICENSE
MIT License

Copyright (c) 2017 @yomotsu

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


three-mesh-bvh@0.8.3 — LICENSE
MIT License

Copyright (c) 2018 Garrett Johnson

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.