4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1c2d,"use client" import { shaderMaterial, useFBO } from "@react-three/drei" import { createPortal, extend, type ThreeElement, useFrame, useThree } from "@react-three/fiber" import { type ReactNode, type RefObject, useLayoutEffect, useMemo, useRef } from "react" import { type Mesh, PerspectiveCamera, Scene, Texture } from "three" import { webglTeleport } from "../webgl-portal/webgl-portal" const DisplayMaterial = shaderMaterial( { uMap: new Texture() }, /* glsl */ ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, /* glsl */ ` uniform sampler2D uMap; varying vec2 vUv; void main() { gl_FragColor = texture2D(uMap, vUv); } `, ) extend({ DisplayMaterial }) declare module "@react-three/fiber" { interface ThreeElements { displayMaterial: ThreeElement } } export type WebglSceneProps = { track: RefObject children: ReactNode camera?: PerspectiveCamera /** * - texture: children render into an FBO each frame: Global post-processing will work on it. * - scissor: a scissored pass painted on top of the composed frame. lighter, but excluded from global post-processing. */ mode?: "texture" | "scissor" priority?: number zIndex?: number transparent?: boolean /** * Re-measures the DOM rect every frame so the plane follows animated parents (motion, parallax). * Costs one layout read per frame, so only enable it when needed. */ autoReflow?: boolean } function WebglScenePortal({ track, children, camera: propCamera, mode = "scissor", priority, zIndex = 0, transparent = true, autoReflow = false, }: WebglSceneProps) { const defaultCamera = useMemo(() => { const cam = new PerspectiveCamera(75, 1, 0.1, 1000) cam.position.z = 5 return cam }, []) const scene = useMemo(() => new Scene(), []) const camera = propCamera ?? defaultCamera const bounds = useRef({ x: 0, y: 0, width: 0, height: 0, }) const gl = useThree((s) => s.gl) const size = useThree((s) => s.size) const viewport = useThree((s) => s.viewport) const displayMesh = useRef(null) const fbo = useFBO(1, 1, { samples: 4 }) useLayoutEffect(() => { fbo.texture.colorSpace = gl.outputColorSpace }, [fbo, gl]) useLayoutEffect(() => { const target = track.current if (!target) return const measure = () => { const rect = target.getBoundingClientRect() bounds.current.x = rect.left + window.scrollX bounds.current.y = rect.top + window.scrollY bounds.current.width = rect.width bounds.current.height = rect.height } measure() const resizeObserver = new ResizeObserver(measure) resizeObserver.observe(target) resizeObserver.observe(document.body) return () => resizeObserver.disconnect() }, [track]) const renderPriority = priority ?? (mode === "texture" ? 0 : 2) useFrame(() => { const transitioning = document.documentElement.hasAttribute("data-atelier-transitioning") let left: number let top: number let width: number let height: number if ((autoReflow || transitioning) && track.current) { const rect = track.current.getBoundingClientRect() left = rect.left top = rect.top width = rect.width height = rect.height } else { const b = bounds.current left = b.x - window.scrollX top = b.y - window.scrollY width = b.width height = b.height } if (width === 0 || height === 0) return const aspect = width / height if (camera.aspect !== aspect) { camera.aspect = aspect camera.updateProjectionMatrix() } if (mode === "scissor") { const canvasHeight = gl.domElement.clientHeight const canvasWidth = gl.domElement.clientWidth const previousAutoClear = gl.autoClear gl.autoClear = false gl.setViewport(left, canvasHeight - (top + height), width, height) gl.setScissor(left, canvasHeight - (top + height), width, height) gl.setScissorTest(true) gl.clear() gl.render(scene, camera) gl.setScissorTest(false) gl.setViewport(0, 0, canvasWidth, canvasHeight) gl.setScissor(0, 0, canvasWidth, canvasHeight) gl.autoClear = previousAutoClear return } const pixelRatio = gl.getPixelRatio() const fboWidth = Math.max(1, Math.ceil(width * pixelRatio)) const fboHeight = Math.max(1, Math.ceil(height * pixelRatio)) if (fbo.width !== fboWidth || fbo.height !== fboHeight) { fbo.setSize(fboWidth, fboHeight) } const previousClearAlpha = gl.getClearAlpha() const previousAutoClear = gl.autoClear gl.autoClear = true gl.setRenderTarget(fbo) gl.setClearAlpha(transparent ? 0 : 1) gl.clear() gl.render(scene, camera) gl.setRenderTarget(null) gl.setClearAlpha(previousClearAlpha) gl.autoClear = previousAutoClear const mesh = displayMesh.current if (mesh) { const pxToWorld = viewport.height / size.height mesh.position.x = (left + width / 2 - size.width / 2) * pxToWorld mesh.position.y = -(top + height / 2 - size.height / 2) * pxToWorld mesh.scale.x = width * pxToWorld mesh.scale.y = height * pxToWorld } }, renderPriority) const portal = createPortal(children, scene, { camera, events: { compute: (event, state) => { const rect = track.current?.getBoundingClientRect() if (!rect) return state.pointer.set( ((event.clientX - rect.left) / rect.width) * 2 - 1, -(((event.clientY - rect.top) / rect.height) * 2 - 1), ) state.raycaster.setFromCamera(state.pointer, camera) }, }, }) return ( <> {portal} {mode === "texture" && ( )} ) } export function WebglScene(props: WebglSceneProps) { return ( ) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three"}]]}]}],["$","li","@types/three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40types%2Fthree","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@types/three"}]]}]}],["$","li","@react-three/fiber",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Ffiber","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/fiber"}]]}]}],["$","li","@react-three/drei",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Fdrei","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/drei"}]]}]}]]}],["$","$L4e",null,{"namespace":"@atelier","registryDependencies":["https://atelier-ui.com/r/webgl-portal.json","https://atelier-ui.com/r/agent-rules.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/webgl-scene/webgl-scene.tsx","content":"$50","type":"registry:component","target":"components/webgl-scene/webgl-scene.tsx"}],"className":"h-[70svh] min-h-80"}]]}]