16:I[54961,["/_next/static/immutable/chunks/23kzrxojb_1p2.js","/_next/static/immutable/chunks/39h58d1utebdp.js","/_next/static/immutable/chunks/2nrtc1lb04fz1.js","/_next/static/immutable/chunks/21y0r7k6jovn5.js","/_next/static/immutable/chunks/31l88bjo9blmv.js","/_next/static/immutable/chunks/2z8nc0r40hilq.js","/_next/static/immutable/chunks/27fhzxv1uvtm8.js"],"default"] 17:T1218,'use client'; import { useEffect, useId, useRef } from 'react'; import { createAtelierEngine, atelierRender, pairedSketch, type AtelierOptions, } from './atelier-engine'; export type AtelierProps = { sketchImage?: string; renderImage?: string; portalSize?: number; brushSize?: number; trailFadeSpeed?: number; edgeRoughness?: number; title?: string; subtitle?: string; compact?: boolean; paused?: boolean; className?: string; }; export default function Atelier({ sketchImage = '', renderImage = atelierRender, portalSize = 1, brushSize = 64, trailFadeSpeed = 1, edgeRoughness = 1, title = 'From quiet lines to warm spaces.', subtitle = 'Light, material and the spaces between.', compact = false, paused = false, className = '', }: AtelierProps) { const root = useRef(null), canvas = useRef(null), engine = useRef | null>(null), id = useId().replace(/:/g, ''); const options = useRef({ renderImage, sketchImage, portalSize, brushSize, trailFadeSpeed, edgeRoughness, paused, }); options.current = { renderImage, sketchImage, portalSize, brushSize, trailFadeSpeed, edgeRoughness, paused, }; const paired = pairedSketch(renderImage, sketchImage); useEffect(() => { try { engine.current = createAtelierEngine( canvas.current!, compact, () => options.current, ); } catch { root.current!.dataset.failed = 'true'; } return () => { engine.current?.dispose(); engine.current = null; }; }, [compact]); useEffect( () => engine.current?.sync(), [ renderImage, sketchImage, portalSize, brushSize, trailFadeSpeed, edgeRoughness, paused, ], ); return (

); } const styles = `.atelier{position:relative;isolation:isolate;width:100%;height:100%;min-height:0;overflow:clip;container-type:size;background:#fff;color:#141414;touch-action:none;outline:none}.atelier[data-compact=true]{touch-action:pan-y}.atelier>canvas,.atelier-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}.atelier>canvas{opacity:0;transition:opacity .25s linear}.atelier[data-ready=true]>canvas{opacity:1}.atelier[data-ready=true]>.atelier-fallback{visibility:hidden}.atelier-fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.atelier-room{clip-path:polygon(28% 39%,33% 35%,39% 37%,43% 33%,51% 35%,57% 32%,62% 37%,69% 36%,71% 42%,75% 45%,73% 51%,76% 56%,72% 62%,74% 67%,66% 70%,62% 74%,55% 73%,48% 77%,44% 73%,36% 74%,33% 68%,28% 67%,26% 61%,24% 56%,27% 50%,25% 45%)}.atelier-copy{position:absolute;inset:0;pointer-events:none;font-family:inherit;text-align:center}.atelier-copy h2{position:absolute;top:13%;left:18%;right:18%;margin:0;font-weight:500;font-size:clamp(17px,5.3cqw,58px);line-height:1.05;letter-spacing:-.055em;color:#fff;mix-blend-mode:difference;text-wrap:balance}.atelier-copy p{position:absolute;bottom:10%;left:20%;right:20%;margin:0;font-size:clamp(8px,1.6cqw,13px);line-height:1.4;letter-spacing:-.025em;color:#fff;mix-blend-mode:difference}.atelier:focus-visible{outline:1px solid #191919;outline-offset:-4px}@media(prefers-reduced-motion:reduce){.atelier>canvas{transition:none}}`; 18:T29af,import { createNativeGL, nativeClamp, type GLTarget, type GLPass } from './native-gl'; import { addBrushStroke, ageBrush, brushRadius, coverUV, brushCapacity, type BrushPoint, } from './atelier-math'; import { atelierMask, atelierComposite } from './atelier-shaders'; export type AtelierOptions = { renderImage: string; sketchImage: string; portalSize: number; brushSize: number; trailFadeSpeed: number; edgeRoughness: number; paused: boolean; }; export const atelierRender = '/media/atelier-room.webp', atelierSketch = '/media/atelier-sketch.webp'; export function pairedSketch(render: string, sketch: string) { return sketch || (render === atelierRender ? atelierSketch : ''); } export function createAtelierEngine( canvas: HTMLCanvasElement, compact: boolean, read: () => AtelierOptions, ) { const host = canvas.parentElement!, media = matchMedia('(prefers-reduced-motion: reduce)'), brush: BrushPoint[] = [], packed = new Float32Array(brushCapacity * 4); let gpu: ReturnType | undefined, maskPass: GLPass, compositePass: GLPass, mask: GLTarget | undefined, renderTexture: WebGLTexture, sketchTexture: WebGLTexture; let photo: HTMLImageElement | undefined, sketch: HTMLImageElement | undefined, photoReady = false, sketchReady = false, sketchPending = false, imageKey = '', loadVersion = 0, frame = 0, disposed = false, lost = false, visible = true, width = 0, height = 0, last = 0, time = 0; let pointer: { x: number; y: number } | undefined, keyPoint = { x: 0.5, y: 0.5 }; function stop() { cancelAnimationFrame(frame); frame = 0; } function fail() { stop(); host.dataset.failed = 'true'; delete host.dataset.ready; gpu?.dispose(); gpu = undefined; } function build() { try { gpu = createNativeGL(canvas); maskPass = gpu.pass(atelierMask); compositePass = gpu.pass(atelierComposite); renderTexture = gpu.texture(); sketchTexture = gpu.texture(); delete host.dataset.failed; } catch { fail(); } } function draw() { if (!gpu || lost || !mask || !photoReady || !photo || sketchPending) return; packed.fill(0); brush.forEach((p, i) => { packed[i * 4] = p.x / width; packed[i * 4 + 1] = 1 - p.y / height; packed[i * 4 + 2] = brushRadius(p); packed[i * 4 + 3] = Math.min(1, (1 - p.age / 0.8) * 3); }); gpu.draw(maskPass, mask, { uResolution: [width, height], uPortal: nativeClamp(read().portalSize, 0.4, 1.7), uBrushCount: brush.length, uBrush: { vec4Array: packed }, uRoughness: nativeClamp(read().edgeRoughness, 0, 2), uTime: time, }); gpu.draw(compositePass, null, { uRender: { texture: renderTexture }, uSketch: { texture: sketchTexture }, uMask: mask, uCover: coverUV(width, height, photo.naturalWidth, photo.naturalHeight), uSketchCover: sketchReady && sketch ? coverUV(width, height, sketch.naturalWidth, sketch.naturalHeight) : [1, 1], uImageTexel: [1 / photo.naturalWidth, 1 / photo.naturalHeight], uResolution: [width, height], uHasSketch: sketchReady ? 1 : 0, }); host.dataset.ready = 'true'; host.dataset.brushCount = String(brush.length); } function wake() { if ( !disposed && !lost && gpu && !frame && visible && !document.hidden && !read().paused && !media.matches ) { last = performance.now(); frame = requestAnimationFrame(tick); } } function tick(now: number) { frame = 0; if (disposed || lost || !visible || document.hidden) return; const dt = Math.min(0.04, Math.max(0, (now - last) / 1000)); last = now; if (!read().paused && !media.matches) { time += dt; ageBrush(brush, dt, nativeClamp(read().trailFadeSpeed, 0.25, 3)); } draw(); if (brush.length && !read().paused && !media.matches) frame = requestAnimationFrame(tick); } function loadImages() { const o = read(), paired = pairedSketch(o.renderImage, o.sketchImage), key = `${o.renderImage}\n${paired}`; if (key === imageKey) return; imageKey = key; const version = ++loadVersion; if (photo) { photo.onload = photo.onerror = null; photo.src = ''; } if (sketch) { sketch.onload = sketch.onerror = null; sketch.src = ''; } photoReady = sketchReady = false; delete host.dataset.ready; photo = new Image(); photo.crossOrigin = 'anonymous'; photo.decoding = 'async'; photo.onload = () => { if (disposed || version !== loadVersion || !gpu || lost) return; try { gpu.upload(renderTexture, photo!); photoReady = true; delete host.dataset.failed; draw(); } catch { host.dataset.failed = 'true'; } }; photo.onerror = () => { if (!disposed && version === loadVersion) host.dataset.failed = 'true'; }; photo.src = o.renderImage; sketchPending = !!paired; if (paired) { sketch = new Image(); sketch.crossOrigin = 'anonymous'; sketch.decoding = 'async'; sketch.onload = () => { if (disposed || version !== loadVersion || !gpu || lost) return; sketchPending = false; try { gpu.upload(sketchTexture, sketch!); sketchReady = true; draw(); } catch { sketchReady = false; draw(); } }; sketch.onerror = () => { if (!disposed && version === loadVersion) { sketchPending = false; sketchReady = false; draw(); } }; sketch.src = paired; } } function resize() { if (!gpu || lost) return; const r = host.getBoundingClientRect(), w = Math.max(1, r.width), h = Math.max(1, r.height); if (w === width && h === height) { draw(); return; } width = w; height = h; const dpr = Math.min(devicePixelRatio || 1, compact ? 1 : 1.5); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); if (mask) gpu.release(mask); const scale = Math.min(1, (compact ? 256 : 440) / Math.max(w, h)); try { mask = gpu.target( Math.max(16, Math.round(w * scale)), Math.max(16, Math.round(h * scale)), ); brush.length = 0; draw(); } catch { fail(); } } function sync() { stop(); if (media.matches) brush.length = 0; loadImages(); draw(); if (brush.length) wake(); } function point(e: PointerEvent) { if (read().paused || media.matches) return; const r = host.getBoundingClientRect(), to = { x: nativeClamp(e.clientX - r.left, 0, width), y: nativeClamp(e.clientY - r.top, 0, height), }, radius = nativeClamp(read().brushSize, 16, 150) * (compact ? 0.6 : 1); addBrushStroke(brush, pointer, to, radius); pointer = to; draw(); wake(); } function leave() { pointer = undefined; } function down(e: PointerEvent) { if (e.pointerType === 'touch' && !compact) host.setPointerCapture(e.pointerId); point(e); } function up(e: PointerEvent) { if (host.hasPointerCapture(e.pointerId)) host.releasePointerCapture(e.pointerId); pointer = undefined; } function key(e: KeyboardEvent) { if ( e.target !== host || !['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'Escape'].includes( e.key, ) ) return; e.preventDefault(); if (e.key === 'Home' || e.key === 'Escape') { brush.length = 0; draw(); return; } if (media.matches || read().paused) return; const old = { x: keyPoint.x * width, y: keyPoint.y * height }; keyPoint.x = nativeClamp( keyPoint.x + (e.key === 'ArrowRight' ? 0.07 : e.key === 'ArrowLeft' ? -0.07 : 0), 0.05, 0.95, ); keyPoint.y = nativeClamp( keyPoint.y + (e.key === 'ArrowDown' ? 0.07 : e.key === 'ArrowUp' ? -0.07 : 0), 0.05, 0.95, ); addBrushStroke( brush, old, { x: keyPoint.x * width, y: keyPoint.y * height }, nativeClamp(read().brushSize, 16, 150), ); draw(); wake(); } function visibility() { stop(); if (visible && !document.hidden) { draw(); if (brush.length) wake(); } } function onLost(e: Event) { e.preventDefault(); lost = true; stop(); delete host.dataset.ready; } function onRestored() { gpu?.dispose(); gpu = undefined; mask = undefined; lost = false; width = height = 0; imageKey = ''; build(); resize(); loadImages(); } const size = new ResizeObserver(resize), intersection = new IntersectionObserver(([e]) => { visible = e.isIntersecting; visibility(); }); host.addEventListener('pointermove', point); host.addEventListener('pointerleave', leave); host.addEventListener('pointerdown', down); host.addEventListener('pointerup', up); host.addEventListener('pointercancel', up); host.addEventListener('keydown', key); media.addEventListener('change', sync); document.addEventListener('visibilitychange', visibility); canvas.addEventListener('webglcontextlost', onLost); canvas.addEventListener('webglcontextrestored', onRestored); build(); size.observe(host); intersection.observe(host); resize(); loadImages(); return { sync, dispose() { if (disposed) return; disposed = true; loadVersion++; stop(); size.disconnect(); intersection.disconnect(); host.removeEventListener('pointermove', point); host.removeEventListener('pointerleave', leave); host.removeEventListener('pointerdown', down); host.removeEventListener('pointerup', up); host.removeEventListener('pointercancel', up); host.removeEventListener('keydown', key); media.removeEventListener('change', sync); document.removeEventListener('visibilitychange', visibility); canvas.removeEventListener('webglcontextlost', onLost); canvas.removeEventListener('webglcontextrestored', onRestored); if (photo) { photo.onload = photo.onerror = null; photo.src = ''; } if (sketch) { sketch.onload = sketch.onerror = null; sketch.src = ''; } gpu?.dispose(); gpu = undefined; brush.length = 0; canvas.width = canvas.height = 0; delete host.dataset.ready; }, }; } 19:T941,export const atelierMask = `uniform vec2 uResolution;uniform float uPortal,uBrushCount,uRoughness,uTime;uniform vec4 uBrush[32]; float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}float noise(vec2 p){vec2 i=floor(p),f=fract(p);f=f*f*(3.-2.*f);return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);} float fbm(vec2 p){return noise(p)*.57+noise(p*2.03)*.28+noise(p*4.1)*.15;} void main(){vec2 uv=vUv;vec2 warp=vec2(fbm(uv*17.+.02*uTime),fbm(uv*19.+31.-.015*uTime))-.5;uv+=warp*.034*uRoughness; vec2 portalRadii=vec2(.255,min(.185,.155*uResolution.x/uResolution.y))*uPortal; vec2 ellipse=(uv-vec2(.5,.42))/portalRadii;float field=1.45*exp(-dot(ellipse,ellipse)*1.3); for(int i=0;i<32;i++){if(float(i)>=uBrushCount)break;vec4 b=uBrush[i];vec2 d=(uv-b.xy)*uResolution/max(1.,b.z);field=max(field,1.45*exp(-dot(d,d)*1.4)*b.w);} float dry=(noise(vUv*uResolution*.18)-.5)*.125*uRoughness+(noise(vUv*uResolution*.055+19.)-.5)*.12*uRoughness; fragColor=vec4(clamp(field+dry,0.,1.),0,0,1.);}`; export const atelierComposite = `uniform sampler2D uRender,uSketch,uMask;uniform vec2 uCover,uSketchCover,uImageTexel,uResolution;uniform float uHasSketch; float luminance(vec3 c){return dot(c,vec3(.299,.587,.114));} void main(){vec2 uv=(vUv-.5)*uCover+.5;vec3 room=texture(uRender,uv).rgb;vec3 sketch; if(uHasSketch>.5){sketch=texture(uSketch,(vUv-.5)*uSketchCover+.5).rgb;} else{vec2 t=uImageTexel*2.;float a=luminance(texture(uRender,uv+vec2(-t.x,t.y)).rgb),b=luminance(texture(uRender,uv+vec2(0,t.y)).rgb),c=luminance(texture(uRender,uv+t).rgb),d=luminance(texture(uRender,uv-vec2(t.x,0)).rgb),f=luminance(texture(uRender,uv+vec2(t.x,0)).rgb),g=luminance(texture(uRender,uv-t).rgb),h=luminance(texture(uRender,uv-vec2(0,t.y)).rgb),i=luminance(texture(uRender,uv+vec2(t.x,-t.y)).rgb);float edge=length(vec2(-a-2.*d-g+c+2.*f+i,-a-2.*b-c+g+2.*h+i));sketch=vec3(1.-smoothstep(.07,.7,edge)*.38);} vec2 edgeDistance=abs(vUv-.5)*2.;float vignette=smoothstep(.24,.97,length(edgeDistance*vec2(.85,.9)));sketch=mix(sketch,vec3(1.),vignette*.92); float field=texture(uMask,vUv).r,aa=max(.007,fwidth(field)*.65);float reveal=smoothstep(.5-aa,.5+aa,field); float charcoal=(smoothstep(.455,.49,field)-smoothstep(.525,.57,field))*.35; vec3 color=mix(sketch,room,reveal);color*=1.-charcoal; fragColor=vec4(color,1.);}`; 1a:T6d2,export type BrushPoint = { x: number; y: number; radius: number; age: number }; export const brushCapacity = 32; export function addBrushStroke( points: BrushPoint[], from: { x: number; y: number } | undefined, to: { x: number; y: number }, radius: number, ) { const head = points.at(-1), anchor = points.at(-2), spacing = Math.max(4, radius * 0.22); // Coalesce dense input into a moving tip, preserving trail capacity for its full fade. if ( from && head && anchor && Math.hypot(to.x - (anchor ?? head).x, to.y - (anchor ?? head).y) < spacing ) { head.x = to.x; head.y = to.y; head.radius = radius; head.age = 0; return; } const start = from ?? to, distance = Math.hypot(to.x - start.x, to.y - start.y), steps = Math.max(1, Math.min(12, Math.ceil(distance / Math.max(4, radius * 0.22)))); for (let i = 1; i <= steps; i++) { const t = i / steps; points.push({ x: start.x + (to.x - start.x) * t, y: start.y + (to.y - start.y) * t, radius, age: 0, }); } if (points.length > brushCapacity) points.splice(0, points.length - brushCapacity); } export function ageBrush(points: BrushPoint[], dt: number, speed: number) { for (let i = points.length - 1; i >= 0; i--) { points[i].age += dt * speed; if (points[i].age >= 0.8) points.splice(i, 1); } } export function brushRadius(point: BrushPoint) { return point.radius * Math.max(0, 1 - point.age / 0.8) ** 0.65; } export function coverUV( width: number, height: number, imageWidth: number, imageHeight: number, ): [number, number] { const view = width / height, image = imageWidth / imageHeight; return view > image ? [1, image / view] : [view / image, 1]; } 1b:T1be1,export type GLTarget = { texture: WebGLTexture; framebuffer: WebGLFramebuffer; width: number; height: number; }; type Uniform = number | readonly number[] | { texture: WebGLTexture } | { vec4Array: Float32Array }; export type GLPass = { program: WebGLProgram; locations: Map; }; const vertex = `#version 300 es precision highp float;out vec2 vUv; void main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);vUv=p;gl_Position=vec4(p*2.-1.,0.,1.);}`; const header = `#version 300 es precision highp float;precision highp sampler2D;in vec2 vUv;out vec4 fragColor; `; /** Small WebGL2 owner shared by the native fluid and brush renderers. */ export function createNativeGL(canvas: HTMLCanvasElement, alpha = false) { const context = canvas.getContext('webgl2', { alpha, premultipliedAlpha: false, antialias: false, depth: false, stencil: false, powerPreference: 'high-performance', }); if (!context) throw Error('WebGL2 is unavailable'); const gl = context; const programs = new Set(), textures = new Set(), targets = new Set(); let disposed = false; const vao = gl.createVertexArray(); if (!vao) throw Error('Vertex array unavailable'); gl.bindVertexArray(vao); gl.disable(gl.DEPTH_TEST); gl.disable(gl.BLEND); function pass(body: string): GLPass { const shaders: WebGLShader[] = []; let program: WebGLProgram | null = null; try { for (const [type, code] of [ [gl.VERTEX_SHADER, vertex], [gl.FRAGMENT_SHADER, header + body], ] as const) { const shader = gl.createShader(type); if (!shader) throw Error('Shader unavailable'); shaders.push(shader); gl.shaderSource(shader, code); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw Error(gl.getShaderInfoLog(shader) || 'Shader compilation failed'); } program = gl.createProgram(); if (!program) throw Error('Program unavailable'); shaders.forEach((s) => gl.attachShader(program!, s)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw Error(gl.getProgramInfoLog(program) || 'Program linking failed'); programs.add(program); return { program, locations: new Map() }; } catch (error) { if (program) gl.deleteProgram(program); throw error; } finally { shaders.forEach((s) => gl.deleteShader(s)); } } function texture() { const t = gl.createTexture(); if (!t) throw Error('Texture unavailable'); textures.add(t); gl.bindTexture(gl.TEXTURE_2D, t); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255, 255]), ); return t; } function upload(t: WebGLTexture, source: TexImageSource) { gl.bindTexture(gl.TEXTURE_2D, t); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); try { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source); } finally { gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); } } function target(width: number, height: number, floating = false): GLTarget { const t = texture(), framebuffer = gl.createFramebuffer(); if (!framebuffer) { gl.deleteTexture(t); textures.delete(t); throw Error('Framebuffer unavailable'); } gl.bindTexture(gl.TEXTURE_2D, t); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, floating ? gl.NEAREST : gl.LINEAR, ); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, floating ? gl.NEAREST : gl.LINEAR, ); gl.texImage2D( gl.TEXTURE_2D, 0, floating ? gl.RGBA16F : gl.RGBA8, width, height, 0, gl.RGBA, floating ? gl.HALF_FLOAT : gl.UNSIGNED_BYTE, null, ); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0); if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) { gl.deleteFramebuffer(framebuffer); gl.deleteTexture(t); textures.delete(t); throw Error('Framebuffer is not renderable'); } const result = { texture: t, framebuffer, width, height }; targets.add(result); gl.viewport(0, 0, width, height); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); return result; } function release(t: GLTarget) { if (!targets.delete(t)) return; gl.deleteFramebuffer(t.framebuffer); gl.deleteTexture(t.texture); textures.delete(t.texture); } function draw( p: GLPass, destination: GLTarget | null, uniforms: Record = {}, ) { gl.bindVertexArray(vao); gl.useProgram(p.program); gl.bindFramebuffer(gl.FRAMEBUFFER, destination?.framebuffer ?? null); gl.viewport( 0, 0, destination?.width ?? canvas.width, destination?.height ?? canvas.height, ); let unit = 0; for (const [name, value] of Object.entries(uniforms)) { if (!p.locations.has(name)) p.locations.set(name, gl.getUniformLocation(p.program, name)); const location = p.locations.get(name)!; if (location === null) continue; if (typeof value === 'number') gl.uniform1f(location, value); else if ('texture' in value) { gl.activeTexture(gl.TEXTURE0 + unit); gl.bindTexture(gl.TEXTURE_2D, value.texture); gl.uniform1i(location, unit++); } else if ('vec4Array' in value) gl.uniform4fv(location, value.vec4Array); else if (value.length === 2) gl.uniform2f(location, value[0], value[1]); else if (value.length === 3) gl.uniform3f(location, value[0], value[1], value[2]); else if (value.length === 4) gl.uniform4f(location, value[0], value[1], value[2], value[3]); } gl.drawArrays(gl.TRIANGLES, 0, 3); } return { gl, pass, texture, upload, target, release, draw, dispose() { if (disposed) return; disposed = true; targets.forEach(release); programs.forEach((p) => gl.deleteProgram(p)); programs.clear(); textures.forEach((t) => gl.deleteTexture(t)); textures.clear(); gl.deleteVertexArray(vao); }, }; } export const nativeClamp = (n: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, Number.isFinite(n) ? n : lo)); export function nativeColor(hex: string, fallback: string): [number, number, number] { const h = /^#[\da-f]{6}$/i.test(hex) ? hex : fallback; return [ parseInt(h.slice(1, 3), 16) / 255, parseInt(h.slice(3, 5), 16) / 255, parseInt(h.slice(5, 7), 16) / 255, ]; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"atelier":[{"name":"atelier.tsx","code":"$17"},{"name":"atelier-engine.ts","code":"$18"},{"name":"atelier-shaders.ts","code":"$19"},{"name":"atelier-math.ts","code":"$1a"},{"name":"native-gl.ts","code":"$1b"}]},"initialElement":"atelier","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]