@aethervtt/shard-sprite 0.0.1 → 0.1.0

package/dist/methods.js

@@ -0,0 +1,246 @@
+import { assetServer } from "@aethervtt/shard-assets";
+import { defineSchema, ShardError, t } from "@aethervtt/shard-core";
+import { TextureAtlases } from "./atlas.js";
+import { Tilemap, TilemapData, TilemapDatas, tileNames } from "./tilemap.js";
+import { layerChunks, readChunkRows, rectRows, TILE_FLAG_NAMES } from "./tilemap-format.js";
+function layerNamed(data, name) {
+  const layer = name ? data.layers.find((l) => l.name === name) : data.layers[0];
+  if (!layer) {
+    throw new ShardError("sprite/no-layer", `The tilemap has no layer ${JSON.stringify(name)}`, {
+      hint: `Its layers: ${data.layers.map((l) => l.name).join(", ") || "none"}.`
+    });
+  }
+  return layer;
+}
+function checkRect(layer, r, path) {
+  if (r.x + r.w > layer.width || r.y + r.h > layer.height) {
+    throw new ShardError(
+      "sprite/tile-out-of-range",
+      `Rect ${r.x},${r.y} ${r.w}\xD7${r.h} is outside the ${layer.width}\xD7${layer.height} layer "${layer.name}"`,
+      { path }
+    );
+  }
+}
+function chunkRect(data, layer, chunk, path) {
+  if (chunk.length !== 2) throw new ShardError("sprite/bad-chunk", "A chunk is [cx, cy]", { path });
+  const cs = data.chunkSize;
+  const x = chunk[0] * cs;
+  const y = chunk[1] * cs;
+  checkRect(layer, { x, y, w: 1, h: 1 }, path);
+  return { x, y, w: Math.min(cs, layer.width - x), h: Math.min(cs, layer.height - y) };
+}
+function flagsOf(value, path) {
+  if (typeof value === "number") return value;
+  if (!value) return 0;
+  let flags = 0;
+  for (const f of String(value).split("+")) {
+    const bit = TILE_FLAG_NAMES[f];
+    if (!bit) {
+      throw new ShardError("sprite/bad-flag", `Unknown tile flag "${f}"`, {
+        path,
+        hint: "Flags are fx, fy and r90, joined by +."
+      });
+    }
+    flags |= bit;
+  }
+  return flags;
+}
+function idOf(data, name) {
+  return name === "." || name === "" ? 0 : data.tileId(name);
+}
+function readTiles(data, options = {}, atlas) {
+  const layer = layerNamed(data, options.layer);
+  const names = tileNames(data, atlas);
+  const head = {
+    layer: layer.name,
+    width: layer.width,
+    height: layer.height,
+    chunkSize: data.chunkSize,
+    encoding: data.encoding
+  };
+  const rect = options.rect;
+  if (rect && rect.w > 0 && rect.h > 0) {
+    checkRect(layer, rect, "/rect");
+    return { ...head, rect, rows: rectRows(layer, names, rect.x, rect.y, rect.w, rect.h).rows };
+  }
+  if (options.chunk && options.chunk.length > 0) {
+    const r = chunkRect(data, layer, options.chunk, "/chunk");
+    return {
+      ...head,
+      chunk: [...options.chunk],
+      rows: rectRows(layer, names, r.x, r.y, r.w, r.h).rows
+    };
+  }
+  return { ...head, chunks: layerChunks(layer, names, data.chunkSize) };
+}
+function editTiles(data, options, atlas) {
+  const name = layerNamed(data, options.layer).name;
+  if (!data.palette) {
+    data.copyFrom(TilemapData.fromJson(data.toJson({ atlas: { names: tileNames(data, atlas) } })));
+  }
+  const layer = layerNamed(data, name);
+  let changed = 0;
+  const set = (x, y, id, flags, path) => {
+    if (x >= layer.width || y >= layer.height) {
+      throw new ShardError(
+        "sprite/tile-out-of-range",
+        `Cell (${x}, ${y}) is outside the ${layer.width}\xD7${layer.height} layer "${layer.name}"`,
+        { path }
+      );
+    }
+    const i = y * layer.width + x;
+    if (layer.tiles[i] === id && layer.flags[i] === flags) return;
+    layer.set(x, y, id, flags);
+    changed++;
+  };
+  const cells = options.cells ?? [];
+  for (let k = 0; k < cells.length; k++) {
+    const c = cells[k];
+    set(c.x, c.y, idOf(data, c.tile), flagsOf(c.flags, `/cells/${k}/flags`), `/cells/${k}`);
+  }
+  const fill = options.fill;
+  if (fill && fill.rect.w > 0 && fill.rect.h > 0) {
+    checkRect(layer, fill.rect, "/fill/rect");
+    const id = idOf(data, fill.tile);
+    for (let y = fill.rect.y; y < fill.rect.y + fill.rect.h; y++)
+      for (let x = fill.rect.x; x < fill.rect.x + fill.rect.w; x++) set(x, y, id, 0, "/fill");
+  }
+  const rows = options.rows;
+  if (rows && rows.chunk.length > 0) {
+    const r = chunkRect(data, layer, rows.chunk, "/rows/chunk");
+    const grid = {
+      width: layer.width,
+      height: layer.height,
+      tiles: layer.tiles.slice(),
+      flags: layer.flags.slice()
+    };
+    for (let y = r.y; y < r.y + r.h; y++) {
+      grid.tiles.fill(0, y * layer.width + r.x, y * layer.width + r.x + r.w);
+      grid.flags.fill(0, y * layer.width + r.x, y * layer.width + r.x + r.w);
+    }
+    const palette = data.palette;
+    const index = new Map(palette.map((n, i) => [n, i]));
+    readChunkRows(
+      grid,
+      palette,
+      index,
+      rows.chunk[0],
+      rows.chunk[1],
+      data.chunkSize,
+      rows.rows,
+      "/rows/rows"
+    );
+    for (let y = r.y; y < r.y + r.h; y++)
+      for (let x = r.x; x < r.x + r.w; x++) {
+        const i = y * layer.width + x;
+        set(x, y, grid.tiles[i], grid.flags[i], "/rows");
+      }
+  }
+  return changed;
+}
+function findTilemapData(world, asset) {
+  const server = assetServer(world);
+  const entry = server.entry(asset);
+  const data = server.item(asset);
+  if (!(data instanceof TilemapData)) {
+    throw new ShardError(
+      "sprite/unknown-tilemap",
+      entry ? `${asset} is a ${entry.type}, not loaded TilemapData` : `No tilemap data "${asset}" is loaded`,
+      { hint: "Name a *.tilemap.json asset by path or guid that a Tilemap in the world uses." }
+    );
+  }
+  const store = world.resource(TilemapDatas);
+  let atlas;
+  for (const table of world.query({ with: [Tilemap] }).tables) {
+    const dataRefs = table.column(Tilemap, "data");
+    const atlasRefs = table.column(Tilemap, "atlas");
+    for (let row = 0; row < table.count && !atlas; row++) {
+      if (store.get(dataRefs[row]) !== data) continue;
+      atlas = world.tryResource(TextureAtlases)?.get(atlasRefs[row]);
+    }
+  }
+  return { data, guid: entry?.guid, atlas };
+}
+const Rect = t.struct({
+  x: t.u32({ description: "Left column." }),
+  y: t.u32({ description: "Top row." }),
+  w: t.u32({ description: "Width in cells (0: no rect)." }),
+  h: t.u32({ description: "Height in cells." })
+});
+const tilemapMethods = [
+  {
+    name: "tilemap.read",
+    description: "A tilemap layer's cells as rows (0059): runs of name[:flags][*count], '.' empty, flags fx/fy/r90 joined by +. The whole layer by chunk, one chunk, or a rect.",
+    params: defineSchema("sprite/TilemapReadParams", {
+      asset: t.string({ required: true, description: "The TilemapData asset: path or guid." }),
+      layer: t.string({ description: "Layer name (default: the first)." }),
+      chunk: t.list(t.u32(), { description: "[cx, cy]: just this chunk." }),
+      rect: Rect
+    }),
+    handler: ({ world }, p) => {
+      const { data, atlas } = findTilemapData(world, p.asset);
+      return {
+        asset: p.asset,
+        ...readTiles(
+          data,
+          {
+            layer: p.layer || void 0,
+            chunk: p.chunk,
+            rect: p.rect
+          },
+          atlas
+        )
+      };
+    }
+  },
+  {
+    name: "tilemap.edit",
+    description: "Edits a tilemap layer's cells by tile name (0059): cells, a filled rect, or a chunk's rows. Applies to the live world (only the touched chunks re-upload); save writes the asset file in its own encoding. Returns the changed cell count.",
+    params: defineSchema("sprite/TilemapEditParams", {
+      asset: t.string({ required: true, description: "The TilemapData asset: path or guid." }),
+      layer: t.string({ description: "Layer name (default: the first)." }),
+      cells: t.list(
+        t.struct({
+          x: t.u32(),
+          y: t.u32(),
+          tile: t.string({ description: "Palette name; '.' clears the cell." }),
+          flags: t.string({ description: "fx, fy and r90, joined by +." })
+        }),
+        { description: "Cells to set." }
+      ),
+      fill: t.struct(
+        { rect: Rect, tile: t.string({ description: "Palette name; '.' clears." }) },
+        { description: "A rect to fill with one tile." }
+      ),
+      rows: t.struct(
+        {
+          chunk: t.list(t.u32(), { description: "[cx, cy]" }),
+          rows: t.list(t.string(), { description: "The chunk rows, from the top." })
+        },
+        { description: "Replaces one chunk's cells with rows, as tilemap.read returns them." }
+      ),
+      save: t.bool({ description: "Also write the asset file, keeping its encoding." })
+    }),
+    handler: async ({ world }, p) => {
+      const { data, guid, atlas } = findTilemapData(world, p.asset);
+      const changed = editTiles(
+        data,
+        {
+          layer: p.layer || void 0,
+          cells: p.cells,
+          fill: p.fill,
+          rows: p.rows
+        },
+        atlas
+      );
+      const saved = p.save ? await assetServer(world).writeSource(guid ?? p.asset, data.toJson()) : null;
+      return { changed, saved };
+    }
+  }
+];
+export {
+  editTiles,
+  findTilemapData,
+  readTiles,
+  tilemapMethods
+};

package/dist/plugin.d.ts

@@ -1,6 +1,7 @@
 /**
  * Sprites, atlases, frame animation, and tilemaps, drawn in the render graph: world sprites after
  * opaque 3D (so 2D gets HDR and post-processing), screen sprites over the finished image. Cameras
- * with Lighting2d light them with 2D lights and shadows.
+ * with Lighting2d light them with 2D lights and shadows. A tilemap with a GroundLayer draws on the
+ * ground instead, as chunk meshes among the tabletop's bands (0059).
  */
 export declare const spritePlugin: import("@aethervtt/shard-runtime").Plugin;

package/dist/plugin.js

@@ -1,13 +1,31 @@
-import { Last, Update } from "@aethervtt/shard-core";
-import { Gpu, Graph, Picking, RenderDescribers, RenderSet, Shaders } from "@aethervtt/shard-render";
+import { Last, PostUpdate, Update } from "@aethervtt/shard-core";
+import {
+  addRenderFeatures,
+  Gpu,
+  Graph,
+  Picking,
+  RenderDescribers,
+  RenderSet,
+  Shaders
+} from "@aethervtt/shard-render";
 import { definePlugin } from "@aethervtt/shard-runtime";
+import { TransformSystems } from "@aethervtt/shard-transform";
 import * as atlasModule from "./atlas.js";
 import { TextureAtlases } from "./atlas.js";
 import * as clipModule from "./clip.js";
 import { animateSprites, SpriteClips } from "./clip.js";
+import * as groundModule from "./ground.js";
+import {
+  GROUND_TILE_SHADERS,
+  GroundTiles,
+  observeGroundTiles,
+  syncGroundTiles,
+  tileDetail
+} from "./ground.js";
 import * as lightingModule from "./lighting.js";
 import * as lights2dModule from "./lights2d.js";
-import { lights2dNode, prepareLights2d } from "./lights2d.js";
+import { lights2dNode, loadBaselineLighting, prepareLights2d } from "./lights2d.js";
+import { tilemapMethods } from "./methods.js";
 import * as renderModule from "./render.js";
 import {
   describeSprites,
@@ -30,6 +48,7 @@ const spritePlugin = definePlugin({
   provides: [
     atlasModule,
     clipModule,
+    groundModule,
     lightingModule,
     lights2dModule,
     renderModule,
@@ -44,22 +63,40 @@ const spritePlugin = definePlugin({
     w.initResource(TilemapDatas);
     w.initResource(Sprite2dSettings);
     w.initResource(Tilemaps);
+    w.initResource(GroundTiles);
     observeSpriteRemovals(w);
-    app.addSystems(Update, animateSprites).addSystems(Last, prepareSprites.inSet(RenderSet.Prepare)).addSystems(Last, prepareLights2d.inSet(RenderSet.Prepare));
+    observeGroundTiles(w);
+    app.addSystems(Update, animateSprites).addSystems(PostUpdate, syncGroundTiles.before(TransformSystems));
+    app.addMethod(...tilemapMethods).addSystems(Last, prepareSprites.inSet(RenderSet.Prepare)).addSystems(Last, prepareLights2d.inSet(RenderSet.Prepare));
   },
   ready(app) {
     const world = app.world;
     app.insertResource(Sprites, new SpriteStore(world.resource(Gpu)));
     const shaders = world.resource(Shaders);
-    for (const [path, source] of Object.entries(SPRITE_SHADERS)) {
+    for (const [path, source] of Object.entries({ ...SPRITE_SHADERS, ...GROUND_TILE_SHADERS })) {
       shaders.register(path, source, `engine:${path}`);
     }
     const graph = world.resource(Graph);
+    addRenderFeatures(world, {
+      name: "sprite/lights2d",
+      description: "2D lighting: light tiles, occluder shadows, soft-shadow coarse maps.",
+      nodes: ["sprites/lights2d"],
+      baseline: { strategy: "Light binning and shadow rows on the CPU, uploaded as data textures" }
+    });
+    addRenderFeatures(world, {
+      name: "sprite",
+      description: "Sprites and tilemaps, in the scene and in the overlay.",
+      nodes: ["sprites", "sprites/overlay"],
+      baseline: { strategy: "Sprite, tile and chunk records in data textures" }
+    });
     graph.addNode("sprites/lights2d", lights2dNode(world));
     graph.addNode("sprites", spriteNode(world));
     graph.addNode("sprites/overlay", overlayNode(world));
     world.initResource(RenderDescribers).set("sprites", (w) => describeSprites(w));
-    world.initResource(Picking).drawers.set("sprites", drawSpritePicks);
+    const picking = world.initResource(Picking);
+    picking.drawers.set("sprites", drawSpritePicks);
+    picking.detailers.set("tiles", tileDetail);
+    if (world.resource(Gpu).tier === "baseline") return loadBaselineLighting();
   }
 });
 export {

package/dist/render.d.ts

@@ -1,7 +1,8 @@
 import { type AssetRef, type Entity, type World } from '@aethervtt/shard-core';
 import { GpuBuffer, type GpuContext } from '@aethervtt/shard-gpu';
-import { type CameraData, type NodeContext, type NodeDescriptor } from '@aethervtt/shard-render';
+import { type CameraData, DataStore, type NodeContext, type NodeDescriptor } from '@aethervtt/shard-render';
 import { type Texture } from '@aethervtt/shard-texture';
+import { type TilemapData } from './tilemap.js';
 /** Floats per sprite record: affine rows (12), uv rect (4), size (2), anchor (2), color, flags, pad. */
 export declare const SPRITE_FLOATS = 24;
 /** Sprites sharing a texture, blend, and space: one draw per contiguous run in sorted order. */
@@ -55,8 +56,8 @@ export declare class SpriteStore {
     /** Bytes of sprite records uploaded this frame. */
     uploadedBytes: number;
     sorts: number;
-    readonly records: GpuBuffer;
-    readonly orderBuffer: GpuBuffer;
+    readonly records: DataStore;
+    readonly orderBuffer: DataStore;
     private orderUploaded;
     /** Hidden sprites per ECS table id, from the last visit. */
     readonly tableSeen: number[];
@@ -93,7 +94,7 @@ export declare const prepareSprites: import("@aethervtt/shard-core").SystemDef<{
 /** Frees a sprite's slot when the Sprite goes away (including on despawn). */
 export declare function observeSpriteRemovals(world: World): void;
 interface LayerGpu {
-    buffer: GpuBuffer;
+    buffer: DataStore;
     chunksX: number;
     chunksY: number;
     cursor: number;
@@ -106,10 +107,12 @@ interface TilemapGpu {
     version: number;
     chunkSize: number;
     layers: LayerGpu[];
-    regions: GpuBuffer;
+    regions: DataStore;
     regionKey: string;
-    remap: GpuBuffer;
+    remap: DataStore;
     remapData: Uint32Array;
+    /** Tile id → atlas region + 1, before animation. */
+    baseRemap: Uint32Array;
     layer: number;
     tileSize: [number, number];
     affine: Float32Array;
@@ -133,6 +136,15 @@ export declare class TilemapStore {
     }>;
 }
 export declare const Tilemaps: import("@aethervtt/shard-core").ResourceDef<TilemapStore>;
+/**
+ * Tile id → atlas region + 1 for a map (0059): each palette name looked up in the atlas once, so a
+ * re-packed atlas draws the same map. Version 1 ids are regions + 1 already (clamped to the atlas).
+ * A name the atlas lacks draws nothing and is reported once (`sprite/unknown-tile`, see unknownTiles).
+ */
+export declare function resolveTiles(world: World, data: TilemapData, atlas: {
+    count: number;
+    region(name: string): number;
+}): Uint32Array;
 interface DrawCaches {
     generation: number;
     layouts?: {
@@ -152,7 +164,7 @@ interface DrawCaches {
     }>;
     views: Map<string, {
         uniform: GpuBuffer;
-        chunks: GpuBuffer;
+        chunks: DataStore;
     }>;
     batchParams: Map<SpriteBatch, GpuBuffer>;
     samplers?: {

package/dist/render.js

@@ -7,14 +7,17 @@ import { GpuBuffer } from "@aethervtt/shard-gpu";
 import {
   ComputedVisibility,
   cameraOf,
+  DataStore,
+  dataEntry,
   Gpu,
   GpuAssetsResource,
+  GroundLayer,
   PICK_TARGETS,
   RenderPhase,
   Shaders,
   sceneColor
 } from "@aethervtt/shard-render";
-import { Time } from "@aethervtt/shard-runtime";
+import { LogResource, Time } from "@aethervtt/shard-runtime";
 import { Textures } from "@aethervtt/shard-texture";
 import { GlobalTransform } from "@aethervtt/shard-transform";
 import { TextureAtlases } from "./atlas.js";
@@ -26,7 +29,7 @@ import {
   litView
 } from "./lights2d.js";
 import { Sprite, Sprite2dSettings, SpriteSlot } from "./sprite.js";
-import { Tilemap, TilemapDatas } from "./tilemap.js";
+import { Tilemap, TilemapDatas, unknownTiles } from "./tilemap.js";
 const SPRITE_FLOATS = 24;
 const SPRITE_BYTES = SPRITE_FLOATS * 4;
 const BLEND_ALPHA = 0;
@@ -80,13 +83,8 @@ class SpriteStore {
   constructor(gpu) {
     this.gpu = gpu;
     this.generation = gpu.generation;
-    const storage = GPUBufferUsage.STORAGE;
-    this.records = new GpuBuffer(gpu, {
-      label: "sprites",
-      usage: storage,
-      size: SPRITE_BYTES * 256
-    });
-    this.orderBuffer = new GpuBuffer(gpu, { label: "sprites/order", usage: storage, size: 1024 });
+    this.records = new DataStore(gpu, { label: "sprites", size: SPRITE_BYTES * 256 });
+    this.orderBuffer = new DataStore(gpu, { label: "sprites/order", size: 1024 });
     this.grow(256);
   }
   get live() {
@@ -553,9 +551,8 @@ function syncTilemaps(world) {
           const chunksX = Math.ceil(l.width / cs);
           const chunksY = Math.ceil(l.height / cs);
           return {
-            buffer: new GpuBuffer(gpu, {
+            buffer: new DataStore(gpu, {
               label: `tilemap/${entity}/${i}`,
-              usage: GPUBufferUsage.STORAGE,
               size: Math.max(16, chunksX * chunksY * cs * cs * 4)
             }),
             chunksX,
@@ -569,18 +566,11 @@ function syncTilemaps(world) {
             })
           };
         }),
-        regions: map?.regions ?? new GpuBuffer(gpu, {
-          label: `tilemap/${entity}/regions`,
-          usage: GPUBufferUsage.STORAGE,
-          size: 256
-        }),
+        regions: map?.regions ?? new DataStore(gpu, { label: `tilemap/${entity}/regions`, size: 256 }),
         regionKey: "",
-        remap: map?.remap ?? new GpuBuffer(gpu, {
-          label: `tilemap/${entity}/remap`,
-          usage: GPUBufferUsage.STORAGE,
-          size: 256
-        }),
+        remap: map?.remap ?? new DataStore(gpu, { label: `tilemap/${entity}/remap`, size: 256 }),
         remapData: new Uint32Array(0),
+        baseRemap: new Uint32Array(0),
         layer: 0,
         tileSize: [1, 1],
         affine: new Float32Array(12),
@@ -647,7 +637,7 @@ function syncTilemaps(world) {
         chunkBounds(g, x0, y0, x1, y1, b, chunk * 6);
       }
     });
-    const key = `${atlas.version}/${texture.width}x${texture.height}/${atlas.count}`;
+    const key = `${atlas.version}/${texture.width}x${texture.height}/${atlas.count}/${data.version}/${data.palette?.length ?? -1}`;
     if (map.regionKey !== key) {
       const uv = new Float32Array(Math.max(4, atlas.count * 4));
       for (let r = 0; r < atlas.count; r++) {
@@ -658,18 +648,16 @@ function syncTilemaps(world) {
       }
       map.regions.write(uv);
       map.regionKey = key;
-      map.remapData = new Uint32Array(atlas.count + 1);
-      for (let t = 0; t < map.remapData.length; t++) map.remapData[t] = t;
+      map.baseRemap = resolveTiles(world, data, atlas);
+      map.remapData = map.baseRemap.slice();
       map.remap.write(map.remapData);
     }
     if (data.animations.length > 0) {
       let changed = false;
       for (const a of data.animations) {
         if (a.frames.length === 0 || a.tile >= map.remapData.length) continue;
-        const frame = Math.min(
-          a.frames[Math.floor(time / a.frameTime) % a.frames.length],
-          atlas.count
-        );
+        const id = a.frames[Math.floor(time / a.frameTime) % a.frames.length];
+        const frame = map.baseRemap[Math.min(id, map.baseRemap.length - 1)];
         if (map.remapData[a.tile] !== frame) {
           map.remapData[a.tile] = frame;
           changed = true;
@@ -680,6 +668,27 @@ function syncTilemaps(world) {
   }
   for (const entity of tilemaps.maps.keys()) if (!seen.has(entity)) tilemaps.maps.delete(entity);
 }
+const unknownChecked = /* @__PURE__ */ new WeakMap();
+function resolveTiles(world, data, atlas) {
+  if (!data.palette) {
+    const out2 = new Uint32Array(atlas.count + 1);
+    for (let t = 0; t < out2.length; t++) out2[t] = t;
+    return out2;
+  }
+  const out = new Uint32Array(data.palette.length + 1);
+  let unknown = false;
+  for (let i = 0; i < data.palette.length; i++) {
+    const region = atlas.region(data.palette[i]);
+    out[i + 1] = region + 1;
+    if (region === -1) unknown = true;
+  }
+  if (unknown && unknownChecked.get(data) !== data.palette.length) {
+    unknownChecked.set(data, data.palette.length);
+    const log = world.tryResource(LogResource);
+    for (const error of unknownTiles(data, atlas)) log?.error(error);
+  }
+  return out;
+}
 function chunkBounds(g, x0, y0, x1, y1, out, o) {
   out[o] = out[o + 1] = out[o + 2] = Number.POSITIVE_INFINITY;
   out[o + 3] = out[o + 4] = out[o + 5] = Number.NEGATIVE_INFINITY;
@@ -706,7 +715,10 @@ function boxInFrustum(planes, b, o) {
   return true;
 }
 function* queryTilemaps(world) {
-  for (const table of world.query({ with: [Tilemap, GlobalTransform, ComputedVisibility] }).tables) {
+  for (const table of world.query({
+    with: [Tilemap, GlobalTransform, ComputedVisibility],
+    without: [GroundLayer]
+  }).tables) {
     const g = table.column(GlobalTransform, "matrix");
     const vis = table.column(ComputedVisibility, "visible");
     const atlas = table.column(Tilemap, "atlas");
@@ -725,7 +737,8 @@ function* queryTilemaps(world) {
           tileSize: [tileSize[i * 2], tileSize[i * 2 + 1]],
           chunkSize: chunkSize[i],
           layer: layer[i],
-          lit: lit[i] !== 0
+          // Enum index: 0 is '2d', the only mode the sprite pass lights.
+          lit: lit[i] === 0
         },
         g.subarray(i * 12, i * 12 + 12)
       ];
@@ -752,6 +765,9 @@ function idOf(o) {
   }
   return id;
 }
+function dataKey(d) {
+  return `${idOf(d)}:${d.version}`;
+}
 function check(ctx) {
   const gpu = ctx.gpu;
   const caches = ctx.world.initResource(SpriteDrawCaches);
@@ -768,11 +784,7 @@ function check(ctx) {
   if (!caches.layouts) {
     const V = GPUShaderStage.VERTEX;
     const F = GPUShaderStage.FRAGMENT;
-    const storage = (binding) => ({
-      binding,
-      visibility: V,
-      buffer: { type: "read-only-storage" }
-    });
+    const storage = (binding) => dataEntry(gpu, binding, V);
     caches.layouts = {
       view: gpu.layouts.bindGroupLayout({
         label: "sprites/view",
@@ -900,11 +912,7 @@ function viewGroup(ctx, cam) {
         usage: GPUBufferUsage.UNIFORM,
         size: 96
       }),
-      chunks: new GpuBuffer(gpu, {
-        label: `${ctx.view.name}/tilemap-chunks`,
-        usage: GPUBufferUsage.STORAGE,
-        size: 1024
-      })
+      chunks: new DataStore(gpu, { label: `${ctx.view.name}/tilemap-chunks`, size: 1024 })
     };
     c.views.set(ctx.view.name, v);
   }
@@ -1047,13 +1055,13 @@ function drawSpace(ctx, space) {
         group(
           ctx,
           `${ctx.view.name}/tilemap/${d.map.entity}/${d.layer}`,
-          `${idOf(layer.buffer.buffer)}/${idOf(v.chunks.buffer)}/${idOf(d.map.regions.buffer)}/${idOf(d.map.remap.buffer)}/${idOf(layer.params.buffer)}`,
+          `${dataKey(layer.buffer)}/${dataKey(v.chunks)}/${dataKey(d.map.regions)}/${dataKey(d.map.remap)}/${idOf(layer.params.buffer)}`,
           c.layouts.tilemap,
           () => [
-            { binding: 0, resource: { buffer: layer.buffer.buffer } },
-            { binding: 1, resource: { buffer: v.chunks.buffer } },
-            { binding: 2, resource: { buffer: d.map.regions.buffer } },
-            { binding: 3, resource: { buffer: d.map.remap.buffer } },
+            { binding: 0, resource: layer.buffer.resource() },
+            { binding: 1, resource: v.chunks.resource() },
+            { binding: 2, resource: d.map.regions.resource() },
+            { binding: 3, resource: d.map.remap.resource() },
             { binding: 4, resource: { buffer: layer.params.buffer } }
           ]
         )
@@ -1098,11 +1106,11 @@ function drawSpace(ctx, space) {
         group(
           ctx,
           "sprites/records",
-          `${idOf(store.records.buffer)}/${idOf(store.orderBuffer.buffer)}`,
+          `${dataKey(store.records)}/${dataKey(store.orderBuffer)}`,
           c.layouts.sprites,
           () => [
-            { binding: 0, resource: { buffer: store.records.buffer } },
-            { binding: 1, resource: { buffer: store.orderBuffer.buffer } }
+            { binding: 0, resource: store.records.resource() },
+            { binding: 1, resource: store.orderBuffer.resource() }
           ]
         )
       );
@@ -1138,11 +1146,11 @@ function drawSpritePicks(ctx, cam) {
       group(
         ctx,
         "sprites/records",
-        `${idOf(store.records.buffer)}/${idOf(store.orderBuffer.buffer)}`,
+        `${dataKey(store.records)}/${dataKey(store.orderBuffer)}`,
         c.layouts.sprites,
         () => [
-          { binding: 0, resource: { buffer: store.records.buffer } },
-          { binding: 1, resource: { buffer: store.orderBuffer.buffer } }
+          { binding: 0, resource: store.records.resource() },
+          { binding: 1, resource: store.orderBuffer.resource() }
         ]
       )
     );
@@ -1212,5 +1220,6 @@ export {
   observeSpriteRemovals,
   overlayNode,
   prepareSprites,
+  resolveTiles,
   spriteNode
 };