Codrops 원본
Three.js Instances: Rendering Multiple Objects Simultaneously
섹션 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다.
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.
BEHIND THE EXAMPLE
이 장면을 만드는 원리
공유 재질 시간과 인스턴스별 위상차
화면 크기·입력·동시 작업을 고정하고 실제 렌더링 실패와 비용을 관찰합니다.
- 이 예제에서는
- instanced-attributes 예제는 하나의 uTime을 매 프레임 갱신하고 Blob마다 timeShift 속성을 넣습니다. vertex shader는 로컬 위치의 사인 이동 후 instanceMatrix와 modelMatrix를 적용합니다.
