@solidrt/2d 0.0.56 → 0.0.58

package/src/oversample-math.ts

@@ -1,6 +1,6 @@
 // The pure oversample math: arithmetic on plain numbers, no GPU or window
 // imports, so the headless check (checks/oversample-check.ts) drives it
-// directly. oversample.ts wraps it with the device limits; components.tsx
+// directly. oversample.ts wraps it with the device limits; components/
 // adds the measured inputs (window box, display scale, camera).
 
 /** Tolerance under a whole number when rounding a display scale up, so a

package/src/records.ts

@@ -20,26 +20,14 @@
 // (addSprite/setSprite/...) are shared with the node layer; picking here is
 // the JS reverse walk (pointInSprite), since records have no nodes.
 import { getOwner, onCleanup } from "@solidrt/core"
-import {
-  beginBufferWrite,
-  createBuffer,
-  createPipelineTexture,
-  destroyBuffer,
-  destroyTexture,
-  endBufferWrite,
-  setDraw,
-  setTargetParams,
-  setTargetSize,
-} from "@solidrt/core/gpu"
+import { beginBufferWrite, createBuffer, destroyBuffer, endBufferWrite } from "@solidrt/core/gpu"
 import type { BufferId, TextureId } from "@solidrt/core/gpu"
-import { checkCamera, projectCamera, unprojectCamera } from "./camera.ts"
 import { FULL_FRAME, writeFrame } from "./frames.ts"
-import { spriteDispatch } from "./dispatch.ts"
 import { checkTint, readFrame } from "./layer.ts"
-import type { LayerBase, LayerPointerListener, Sprite, SpriteHandlers, SpriteLayerOptions, SpriteOptions, SpriteState } from "./layer.ts"
+import type { LayerBase, Sprite, SpriteLayerOptions, SpriteOptions, SpriteState } from "./layer.ts"
 import { pointInSprite } from "./pick.ts"
-import { checkOversample, thrashSentinel } from "./oversample.ts"
-import { FRAGMENT, INSTANCE_ATTRIBUTES, VERTEX } from "./shaders.ts"
+import { createSpritePipeline, INSTANCE_ATTRIBUTES, VERTEX } from "./shaders.ts"
+import { createViews } from "./views.ts"
 
 // Floats per instance record:
 // [cx, cy, w, h, u0, v0, u1, v1, rot, tintR, tintG, tintB, tintA]
@@ -92,33 +80,21 @@ export type RecordLayer = LayerBase & {
 }
 
 /**
- * Create a records layer rendering into a `width` x `height` texture from
- * one atlas texture (same target shape as createSpriteLayer; the atlas is
- * NOT owned). Disposed automatically with the owning reactive scope (opt
- * out with `{ autoFree: false }`).
+ * Create a records layer over one atlas texture (the atlas is NOT owned).
+ * Like createSpriteLayer it renders nothing by itself: `createView` is
+ * where it shows. Disposed automatically with the owning reactive scope
+ * (opt out with `{ autoFree: false }`).
  */
-export function createRecordLayer(
-  width: number,
-  height: number,
-  atlas: TextureId,
-  opts?: RecordLayerOptions,
-): RecordLayer {
+export function createRecordLayer(atlas: TextureId, opts?: RecordLayerOptions): RecordLayer {
   let capacity = opts?.capacity ?? 1024
   if (!(capacity > 0 && Number.isInteger(capacity))) {
     throw new Error(`createRecordLayer: capacity must be a positive integer, got ${capacity}`)
   }
   let label = opts?.label ?? "sprites"
-  // One unit quad (triangle strip), reused by every instance.
-  let quad = createBuffer(new Float32Array([-0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5]), {
-    label: `${label}-quad`,
-    autoFree: false,
-  })
   let records: BufferId = createBuffer(capacity * FLOATS_PER_SPRITE * 4, {
     label: `${label}-records`,
     autoFree: false,
   })
-  let oversample = opts?.oversample ?? 1
-  checkOversample("createRecordLayer", oversample, width, height)
   let tint = opts?.tint ?? [1, 1, 1, 1]
   checkTint("createRecordLayer", tint)
   let orderBy = opts?.orderBy
@@ -128,37 +104,8 @@ export function createRecordLayer(
       : orderBy === "y"
         ? { field: Y_FIELD_OFFSET }
         : { field: orderBy.field, descending: orderBy.descending }
-  let thrash = thrashSentinel(`record layer "${label}"`)
-  let texture = createPipelineTexture(
-    VERTEX,
-    FRAGMENT,
-    width * oversample,
-    height * oversample,
-    { uViewport: [width, height], uCamera: [0, 0, 1, 1], uCameraRot: [1, 0, 0, 0], uTint: tint },
-    {
-      label,
-      topology: "triangle-strip",
-      vertexCount: 4,
-      attributes: [{ name: "aPos", format: "vec2" }],
-      buffer: quad,
-      instanceAttributes: INSTANCE_ATTRIBUTES,
-      instanceBuffer: records,
-      instanceOrder,
-      instanceCount: 0,
-      blend: "alpha",
-      textures: { uAtlas: atlas },
-      clearColor: opts?.clearColor ?? [0, 0, 0, 0],
-      autoFree: false,
-    },
-  )
+  let gpu = createSpritePipeline(label, VERTEX, INSTANCE_ATTRIBUTES)
 
-  // Camera state, mirrored for picking (the inverse mapping).
-  let camX = 0
-  let camY = 0
-  let camZoom = 1
-  let camRot = 0
-  let camPivotX = 0
-  let camPivotY = 0
   let disposed = false
   let dirty = false
   let scheduled = false
@@ -167,7 +114,7 @@ export function createRecordLayer(
   // The GPU buffer's record capacity; the canonical array grows ahead of it
   // (addSprite) and the publish catches the buffer up: a larger buffer is
   // created, written in full, swapped in, and the old one destroyed. The
-  // entry holds the old buffer alive until the swap lands, so the destroy
+  // entries hold the old buffer alive until the swaps land, so the destroy
   // is safe to issue right after.
   let gpuCapacity = capacity
   let flush = () => {
@@ -185,7 +132,8 @@ export function createRecordLayer(
     out.set(layer.records.subarray(0, count * FLOATS_PER_SPRITE))
     endBufferWrite(target, count * FLOATS_PER_SPRITE * 4)
     if (grown !== null) {
-      setDraw(texture, { instanceBuffer: grown, instanceCount: count })
+      views.setBuffers({ instanceBuffer: grown })
+      views.setCount(count)
       if (instanceOrder !== undefined) {
         // The growth publish above landed BEFORE the swap (the entry must
         // never point at an unwritten buffer), so the order had not yet
@@ -200,7 +148,7 @@ export function createRecordLayer(
       records = grown
       published = count
     } else if (count !== published) {
-      setDraw(texture, { instanceCount: count })
+      views.setCount(count)
       published = count
     }
   }
@@ -239,71 +187,31 @@ export function createRecordLayer(
     }
   }
 
-  let listeners = new Set<LayerPointerListener>()
+  let views = createViews({
+    label,
+    pipeline: gpu.pipeline,
+    quad: gpu.quad,
+    atlas,
+    buffers: () => ({ instanceBuffer: records }),
+    count: () => published,
+    tint: () => tint,
+    pick: (x, y) => layer.pick(x, y),
+    order: instanceOrder,
+  })
 
   let layer: RecordLayer = {
-    texture,
-    handlers: undefined as unknown as SpriteHandlers,
     get count() {
       return layer._order.length
     },
-    get width() {
-      return width
-    },
-    get height() {
-      return height
-    },
-    setSize(w, h) {
-      if (disposed || (w === width && h === height)) return
-      checkOversample("setSize", oversample, w, h)
-      width = w
-      height = h
-      setTargetSize(texture, w * oversample, h * oversample)
-      setTargetParams(texture, { uViewport: [w, h] })
-    },
-    listen(listener) {
-      listeners.add(listener)
-      return () => {
-        listeners.delete(listener)
-      }
-    },
-    get oversample() {
-      return oversample
-    },
-    setOversample(n) {
-      if (disposed || n === oversample) return
-      checkOversample("setOversample", n, width, height)
-      thrash()
-      oversample = n
-      setTargetSize(texture, width * n, height * n)
-    },
-    setCamera(update) {
-      if (disposed) return
-      checkCamera(update)
-      if (update.x !== undefined) camX = update.x
-      if (update.y !== undefined) camY = update.y
-      if (update.zoom !== undefined) camZoom = update.zoom
-      if (update.rotation !== undefined) camRot = update.rotation
-      if (update.pivotX !== undefined) camPivotX = update.pivotX
-      if (update.pivotY !== undefined) camPivotY = update.pivotY
-      setTargetParams(texture, {
-        uCamera: [camX, camY, camZoom, camZoom],
-        uCameraRot: [Math.cos(camRot), Math.sin(camRot), camPivotX, camPivotY],
-      })
-    },
-    camera() {
-      return { x: camX, y: camY, zoom: camZoom, rotation: camRot, pivotX: camPivotX, pivotY: camPivotY }
-    },
-    project(x, y) {
-      return projectCamera(layer.camera(), x, y)
-    },
-    unproject(x, y) {
-      return unprojectCamera(layer.camera(), x, y)
-    },
     setTint(next) {
       if (disposed) return
       checkTint("setTint", next)
-      setTargetParams(texture, { uTint: next })
+      tint = next
+      views.setTint(next)
+    },
+    createView(vopts) {
+      if (disposed) throw new Error("createView: layer is disposed")
+      return views.create(vopts)
     },
     pick(x, y) {
       // Topmost first: reverse draw order, exact rotated-rect containment.
@@ -317,18 +225,14 @@ export function createRecordLayer(
       }
       return out
     },
-    handlersFor(layout) {
-      return dispatch(layout)
-    },
     dispose() {
       if (disposed) return
       disposed = true
-      listeners.clear()
       for (let sprite of layer._order) sprite.layer = null
       layer._order.length = 0
-      destroyTexture(texture)
+      views.dispose()
       destroyBuffer(records)
-      destroyBuffer(quad)
+      gpu.dispose()
     },
     _add(opts) {
       if (opts?.parent) {
@@ -405,15 +309,6 @@ export function createRecordLayer(
     },
     _order: [],
   }
-  let dispatch = spriteDispatch({
-    size: () => [width, height],
-    camera: () => layer.camera(),
-    pick: (x, y) => layer.pick(x, y),
-    root: layer,
-    listeners,
-  })
-  layer.handlers = dispatch(null)
-
   if (opts?.autoFree !== false && getOwner()) onCleanup(() => layer.dispose())
   return layer
 }

package/src/shaders.ts

@@ -20,8 +20,8 @@
 // projectCamera in camera.ts. The differential checks guard the JS side
 // against oracles but NOT against these shaders - if you touch one
 // rotation, touch all.
-import { glsl } from "@solidrt/core/gpu"
-import type { InstanceAttribute, VertexAttribute } from "@solidrt/core/gpu"
+import { compileShader, createBuffer, createRenderPipeline, destroyBuffer, destroyProgram, destroyRenderPipeline, destroyShader, glsl, linkProgram } from "@solidrt/core/gpu"
+import type { BufferId, InstanceAttribute, RenderPipelineId, VertexAttribute } from "@solidrt/core/gpu"
 
 export let VERTEX = glsl`
   in vec2 aPos;
@@ -31,6 +31,7 @@ export let VERTEX = glsl`
   in float iRot;
   in vec4 iTint;
   out vec2 vUv;
+  flat out vec4 vFrame;
   out vec4 vTint;
   uniform vec2 uViewport;
   uniform vec4 uCamera;
@@ -45,6 +46,7 @@ export let VERTEX = glsl`
     // World and clip are both y-down, so the mapping carries no flip.
     gl_Position = vec4(screen / uViewport * 2.0 - 1.0, 0.0, 1.0);
     vUv = mix(iUv.xy, iUv.zw, aPos + 0.5);
+    vFrame = iUv;
     vTint = iTint;
   }
 `
@@ -52,14 +54,31 @@ export let VERTEX = glsl`
 // uTint is the LAYER tint, multiplied over the per-instance vTint (identity
 // [1, 1, 1, 1] - GLSL uniforms default to ZERO, so every pipeline creation
 // must pin it explicitly or everything renders transparent black).
+//
+// The sample is clamped to its frame, pulled in by half a texel: a quad at
+// a fractional position lands edge samples so close to the frame's edge
+// that a linear tap (and float interpolation under nearest) reaches the
+// cell next door, painting a one-texel line of the neighbour along the
+// sprite's edge. The clamp keeps the quad's texel mapping 1:1 and only
+// moves those edge samples onto the edge texel, so touching cells do not
+// bleed and no gutter or inset is needed at mip level 0. It cannot help a
+// mip chain, whose texels straddle the cell edge before sampling - that is
+// okf/backlog/2d-atlas-extrude.md. min/max because a flipped frame stores
+// its UVs swapped, and the inner min/max because a sub-texel frame would
+// otherwise hand clamp() a lower bound above its upper one.
 export let FRAGMENT = glsl`
   in vec2 vUv;
+  flat in vec4 vFrame;
   in vec4 vTint;
   uniform sampler2D uAtlas;
   uniform vec4 uTint;
 
   void main() {
-    fragColor = texture(uAtlas, vUv) * vTint * uTint;
+    vec2 halfTexel = 0.5 / vec2(textureSize(uAtlas, 0));
+    vec2 lo = min(vFrame.xy, vFrame.zw) + halfTexel;
+    vec2 hi = max(vFrame.xy, vFrame.zw) - halfTexel;
+    vec2 uv = clamp(vUv, min(lo, hi), max(lo, hi));
+    fragColor = texture(uAtlas, uv) * vTint * uTint;
   }
 `
 
@@ -80,6 +99,7 @@ export let VERTEX_SPLIT = glsl`
   in vec4 iUv;
   in vec4 iTint;
   out vec2 vUv;
+  flat out vec4 vFrame;
   out vec4 vTint;
   uniform vec2 uViewport;
   uniform vec4 uCamera;
@@ -94,6 +114,7 @@ export let VERTEX_SPLIT = glsl`
     // World and clip are both y-down, so the mapping carries no flip.
     gl_Position = vec4(screen / uViewport * 2.0 - 1.0, 0.0, 1.0);
     vUv = mix(iUv.xy, iUv.zw, aPos + 0.5);
+    vFrame = iUv;
     vTint = iTint;
   }
 `
@@ -108,3 +129,44 @@ export const INSTANCE_ATTRIBUTES_SPLIT: InstanceAttribute[] = [
   { name: "iTint", format: "vec4", slot: 1 },
   { name: "iRenderOrder", format: "f32", slot: 1 },
 ]
+
+/** What a layer's targets draw with: the unit quad every instance reuses
+ * and the pipeline over one of the two layouts above. */
+export type SpritePipeline = { quad: BufferId; pipeline: RenderPipelineId; dispose(): void }
+
+/**
+ * Compile one sprite pipeline: `vertex` with its matching attribute list
+ * (VERTEX + INSTANCE_ATTRIBUTES, or the split pair) over the shared
+ * fragment stage, alpha-blended triangle strips. Spelled out (not the
+ * fused createPipelineTexture) so a layer's targets - its own and every
+ * view - add entries over the one pipeline. The program lives as long as
+ * the pipeline; `dispose` frees both and the quad.
+ */
+export function createSpritePipeline(label: string, vertex: string, instanceAttributes: InstanceAttribute[]): SpritePipeline {
+  // One unit quad (triangle strip), reused by every instance.
+  let quad = createBuffer(new Float32Array([-0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5]), {
+    label: `${label}-quad`,
+    autoFree: false,
+  })
+  let vs = compileShader("vertex", vertex, { header: true })
+  let fs = compileShader("fragment", FRAGMENT, { header: true })
+  let program = linkProgram(vs, fs, { label })
+  destroyShader(vs)
+  destroyShader(fs)
+  let pipeline = createRenderPipeline(program, {
+    label,
+    topology: "triangle-strip",
+    attributes: [{ name: "aPos", format: "vec2" }],
+    instanceAttributes,
+    blend: "alpha",
+  })
+  return {
+    quad,
+    pipeline,
+    dispose() {
+      destroyRenderPipeline(pipeline)
+      destroyProgram(program)
+      destroyBuffer(quad)
+    },
+  }
+}