@solidrt/2d 0.0.53 → 0.0.54

package/AGENTS.md

@@ -224,7 +224,8 @@ is flat. Event x/y are layer pixels with the camera undone.
   (nearest inside keeps blocks square), the linear composite spreads the
   fraction over one device pixel at block edges. The components pick n
   every layout from their leaf's window box (`getBoundingBoxViewport` x
-  `displayScale()`, which composes designSize fits and camera zoom); the
+  `displayScale()`, which composes designSize fits and camera zoom), within
+  a budget of the window's own device pixel count; the
   primitives default to 1 and take `{ oversample }` / `setOversample(n)`
   - with `output` on `<SpriteLayer>` there is no built-in leaf, so set it
   yourself. Never fix a shimmer by snapping the fit to an integer: the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/2d",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -16,6 +16,6 @@
   ],
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.3",
-    "@solidrt/core": "0.0.53"
+    "@solidrt/core": "0.0.54"
   }
 }

package/src/components.tsx

@@ -6,13 +6,21 @@
 // sprite with `ref` and call setSprite from onFrame - signals carry
 // structure and slow state, per-frame motion goes straight to the layer.
 // The same split, with the same reasoning, as @solidrt/3d's components.
-import { createContext, createEffect, createSignal, displayScale, For, getBoundingBoxViewport, onCleanup, onLayout, untrack, useContext } from "@solidrt/core"
+import { createContext, createEffect, createSignal, displayScale, For, getBoundingBoxViewport, onCleanup, onLayout, untrack, useContext, windowSize } from "@solidrt/core"
 import type { Element, ParentComponent, TextureId, VoidComponent } from "@solidrt/core"
 import type { FilterMode } from "@solidrt/core/gpu"
 import { addGroup, addSprite, createSpriteLayer, removeGroup, removeSprite, setGroup, setGroupTransition, setSprite, setSpriteTransition } from "./layer.ts"
 import type { NodeTransition } from "flux:spatial"
 import type { CameraUpdate, Sprite as SpriteHandle, SpriteGroup, SpriteLayer as LayerHandle, SpriteOptions, SpritePointerEvent, TransitionEndEvent } from "./layer.ts"
 import { fitOversample } from "./oversample.ts"
+
+// The window's device pixel count: the texel budget an auto-picked
+// oversample target stays within (see fitOversample).
+function windowTexels(): number {
+  let win = windowSize()
+  let scale = displayScale()
+  return win.width * scale * (win.height * scale)
+}
 import { createTileLayer } from "./tiles.ts"
 import type { TileChunk, TileLayer as TileLayerHandle } from "./tiles.ts"
 
@@ -117,7 +125,7 @@ export let SpriteLayer: ParentComponent<SpriteLayerProps> = props => {
     let box = getBoundingBoxViewport(leaf)
     if (!box) return
     let scale = displayScale() * Math.max(box.width / props.width, box.height / props.height)
-    layer.setOversample(fitOversample(scale, props.width, props.height))
+    layer.setOversample(fitOversample(scale, props.width, props.height, windowTexels()))
   }
   onLayout(pick)
   createEffect(() => displayScale(), pick)
@@ -316,7 +324,7 @@ export let TileLayer: VoidComponent<TileLayerProps> = props => {
     let box = getBoundingBoxViewport(world)
     if (!box) return
     let scale = displayScale() * Math.max(box.width / layer.width, box.height / layer.height)
-    layer.setOversample(fitOversample(scale, layer.chunkW, layer.chunkH))
+    layer.setOversample(fitOversample(scale, layer.chunkW, layer.chunkH, windowTexels()))
   }
   onLayout(pick)
   createEffect(() => displayScale(), pick)

package/src/oversample.ts

@@ -6,11 +6,6 @@
 // instead of snapping to uneven widths). okf/backlog/2d-layer-display-scale.md.
 import { limits } from "@solidrt/core/gpu"
 
-/** Ceiling on an auto-picked oversample: a small layer in a huge box would
- * otherwise ask for a target the size of the window squared. Eight covers a
- * 4x design fit on a 2x display. */
-export const MAX_OVERSAMPLE = 8
-
 /** Tolerance under a whole number when rounding a display scale up, so a
  * scale that is 3 up to float noise picks 3, not 4. */
 const FIT_EPSILON = 1e-6
@@ -28,12 +23,18 @@ export function checkOversample(verb: string, n: number, width: number, height:
 
 /**
  * The oversample for a layer shown at `scale` device pixels per layer pixel:
- * the ceiling of the scale, so no device pixel goes without a target texel,
- * capped by MAX_OVERSAMPLE and by what a `targetW x targetH` target can grow
- * to on this device.
+ * the ceiling of the scale, so no device pixel goes without a target texel.
+ * Bounded by `budget` texels for the `targetW x targetH` target (the
+ * window's own device pixel count: a target beyond it buys nothing on
+ * screen, and a layer stretched far past the window inside a scroller must
+ * not ask for one) and by what the target can grow to on this device.
  */
-export function fitOversample(scale: number, targetW: number, targetH: number): number {
-  let n = Math.max(1, Math.ceil(scale - FIT_EPSILON))
+export function fitOversample(scale: number, targetW: number, targetH: number, budget: number): number {
+  // The budget bounds the scale, not the rounded factor: the ceiling may
+  // still round a fit that fills the window up by one (a 320 x 200 design
+  // on a 2560 x 1440 panel fits at 7.2 and needs 8).
+  let byBudget = Math.sqrt(budget / (targetW * targetH))
+  let n = Math.max(1, Math.ceil(Math.min(scale, byBudget) - FIT_EPSILON))
   let byDevice = Math.floor(limits.maxTextureSize / Math.max(targetW, targetH))
-  return Math.max(1, Math.min(n, MAX_OVERSAMPLE, byDevice))
+  return Math.max(1, Math.min(n, byDevice))
 }