@zephyr3d/scene 0.9.27 → 0.10.0

package/dist/render/clipmap.js

@@ -1,9 +1,17 @@
-import { AABB, Vector3, BoxSide, Disposable, Matrix4x4, ClipState, Vector2 } from '@zephyr3d/base';
+import { AABB, Vector3, Vector2, BoxSide, Disposable, Matrix4x4, ClipState } from '@zephyr3d/base';
 import { Primitive } from './primitive.js';
 import { getVertexAttributeIndex, VERTEX_ATTRIB_POSITION, VERTEX_ATTRIB_TEXCOORD0, getVertexAttributeFormat } from '@zephyr3d/device';
 
 const tmpAABB = new AABB();
 const tmpV3 = new Vector3();
+// Scratch vectors for gather() and calcLevelAABB(), which run per camera every frame
+const tmpSnappedPos = new Vector2();
+const tmpTileSize = new Vector2();
+const tmpBase = new Vector2();
+const tmpOffset = new Vector2();
+const tmpNextSnappedPos = new Vector2();
+const tmpTileCentre = new Vector2();
+const tmpNextBase = new Vector2();
 const rotationValues = [
     0,
     Math.PI * 1.5,
@@ -13,7 +21,13 @@ const rotationValues = [
 /**
  * Frustum plane mask covering everything but the far plane, for a clipmap that
  * reaches past it. @internal
- */ const ALL_PLANES_EXCEPT_FAR = 0b111111 & ~(1 << BoxSide.BACK);
+ */ /**
+ * Instance data is rewritten for every camera every frame: dynamic buffers keep their upload
+ * staging buffers for reuse instead of creating and destroying one per upload
+ */ const INSTANCE_BUFFER_OPTIONS = {
+    dynamic: true
+};
+const ALL_PLANES_EXCEPT_FAR = 0b111111 & ~(1 << BoxSide.BACK);
 /** @internal */ class Clipmap extends Disposable {
     _instanceDataPool;
     _instanceDataPoolSize;
@@ -44,6 +58,10 @@ const rotationValues = [
     _skirtMesh;
     _skirtMeshLines;
     _wireframe;
+    _levelAABBs;
+    /** Grid origin of the gather/cull call in progress, see ClipmapGatherContext.gridOriginX */ _originX;
+    _originZ;
+    _cullScratch;
     constructor(resolution, extraInstanceBuffers, maxMipLevels = 64){
         super();
         if (extraInstanceBuffers && extraInstanceBuffers.findIndex((val)=>getVertexAttributeIndex(val) === VERTEX_ATTRIB_POSITION || getVertexAttributeIndex(val) === VERTEX_ATTRIB_TEXCOORD0 || getVertexAttributeFormat(val) !== 'f32') >= 0) {
@@ -61,6 +79,10 @@ const rotationValues = [
         this._nonInstanceMipLevelDataPool = [];
         this._nonInstanceMipLevelDataPoolSize = 0;
         this._wireframe = false;
+        this._levelAABBs = [];
+        this._originX = 0;
+        this._originZ = 0;
+        this._cullScratch = new Map();
         this.generateCrossMesh();
         this.generateFillerMesh();
         this.generateSeamMesh();
@@ -80,6 +102,7 @@ const rotationValues = [
     set tileResolution(val) {
         if (val !== this._tileResolution) {
             this._tileResolution = val;
+            this._cullScratch.clear();
             this.generateCrossMesh();
             this.generateFillerMesh();
             this.generateSeamMesh();
@@ -183,10 +206,10 @@ const rotationValues = [
             }
         }
         this._tileMesh.createAndSetVertexBuffer('position_f32x3', vertices);
-        this._tileMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance');
+        this._tileMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._instanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._tileMesh.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance');
+            this._tileMesh.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._instanceDataPoolSize++;
         }
         this._tileMesh.createAndSetIndexBuffer(indices);
@@ -206,10 +229,10 @@ const rotationValues = [
         this._tileMeshLines?.dispose();
         this._tileMeshLines = new Primitive();
         this._tileMeshLines.setVertexBuffer(this._tileMesh.getVertexBuffer('position'));
-        this._tileMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance');
+        this._tileMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._instanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._tileMeshLines.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance');
+            this._tileMeshLines.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._instanceDataPoolSize++;
         }
         this._tileMeshLines.createAndSetIndexBuffer(indicesLines);
@@ -281,10 +304,10 @@ const rotationValues = [
             }
         }
         this._fillerMesh.createAndSetVertexBuffer('position_f32x3', vertices);
-        this._fillerMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance');
+        this._fillerMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._instanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._fillerMesh.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance');
+            this._fillerMesh.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._instanceDataPoolSize++;
         }
         this._fillerMesh.createAndSetIndexBuffer(indices);
@@ -304,10 +327,10 @@ const rotationValues = [
         this._fillerMeshLines?.dispose();
         this._fillerMeshLines = new Primitive();
         this._fillerMeshLines.setVertexBuffer(this._fillerMesh.getVertexBuffer('position'));
-        this._fillerMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance');
+        this._fillerMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._instanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._fillerMeshLines.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance');
+            this._fillerMeshLines.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._instanceDataPoolSize++;
         }
         this._fillerMeshLines.createAndSetIndexBuffer(indicesLines);
@@ -358,10 +381,10 @@ const rotationValues = [
             indices[n++] = startOfHorizonal + (i + 0) * 2 + 1;
         }
         this._trimMesh.createAndSetVertexBuffer('position_f32x3', vertices);
-        this._trimMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance');
+        this._trimMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._instanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._trimMesh.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance');
+            this._trimMesh.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._instanceDataPoolSize++;
         }
         this._trimMesh.createAndSetIndexBuffer(indices);
@@ -381,10 +404,10 @@ const rotationValues = [
         this._trimMeshLines?.dispose();
         this._trimMeshLines = new Primitive();
         this._trimMeshLines.setVertexBuffer(this._trimMesh.getVertexBuffer('position'));
-        this._trimMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance');
+        this._trimMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._instanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._trimMeshLines.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance');
+            this._trimMeshLines.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._instanceDataPoolSize++;
         }
         this._trimMeshLines.createAndSetIndexBuffer(indicesLines);
@@ -445,10 +468,10 @@ const rotationValues = [
         this._crossMesh?.dispose();
         this._crossMesh = new Primitive();
         this._crossMesh.createAndSetVertexBuffer('position_f32x3', vertices);
-        this._crossMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance');
+        this._crossMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._nonInstanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._crossMesh.createAndSetVertexBuffer(fmt, this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance');
+            this._crossMesh.createAndSetVertexBuffer(fmt, this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._nonInstanceDataPoolSize++;
         }
         this._crossMesh.createAndSetIndexBuffer(indices);
@@ -468,10 +491,10 @@ const rotationValues = [
         this._crossMeshLines?.dispose();
         this._crossMeshLines = new Primitive();
         this._crossMeshLines.setVertexBuffer(this._crossMesh.getVertexBuffer('position'));
-        this._crossMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance');
+        this._crossMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._nonInstanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._crossMeshLines.createAndSetVertexBuffer(fmt, this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance');
+            this._crossMeshLines.createAndSetVertexBuffer(fmt, this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._nonInstanceDataPoolSize++;
         }
         this._crossMeshLines.createAndSetIndexBuffer(indicesLines);
@@ -498,6 +521,16 @@ const rotationValues = [
             vertices[(clipmapVertResolution * 3 + i) * 3 + 1] = clipmapVertResolution - i;
             vertices[(clipmapVertResolution * 3 + i) * 3 + 2] = 0;
         }
+        // Seam triangles are collinear in XZ by design: each odd vertex is the midpoint between two
+        // coarse-level vertices. Flag those midpoints with position.z = -side (1..4) so a shader
+        // clamping the grid to a finite region can snap them onto their previous neighbour when
+        // the whole seam edge lies outside it; otherwise the flap they form stands up as a vertical
+        // curtain along the region border. Negative, so it never reads as the skirt flag.
+        for(let side = 0; side < 4; side++){
+            for(let i = 1; i < clipmapVertResolution; i += 2){
+                vertices[(clipmapVertResolution * side + i) * 3 + 2] = -(side + 1);
+            }
+        }
         const indices = new Uint16Array(clipmapVertResolution * 6);
         let n = 0;
         for(let i = 0; i < clipmapVertResolution * 4; i += 2){
@@ -507,10 +540,10 @@ const rotationValues = [
         }
         indices[indices.length - 1] = 0;
         this._seamMesh.createAndSetVertexBuffer('position_f32x3', vertices);
-        this._seamMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance');
+        this._seamMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._instanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._seamMesh.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance');
+            this._seamMesh.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._instanceDataPoolSize++;
         }
         this._seamMesh.createAndSetIndexBuffer(indices);
@@ -530,10 +563,10 @@ const rotationValues = [
         this._seamMeshLines?.dispose();
         this._seamMeshLines = new Primitive();
         this._seamMeshLines.setVertexBuffer(this._seamMesh.getVertexBuffer('position'));
-        this._seamMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance');
+        this._seamMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._instanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._seamMeshLines.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance');
+            this._seamMeshLines.createAndSetVertexBuffer(fmt, this.allocInstanceBuffer(), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._instanceDataPoolSize++;
         }
         this._seamMeshLines.createAndSetIndexBuffer(indicesLines);
@@ -614,10 +647,10 @@ const rotationValues = [
         this._skirtMesh?.dispose();
         this._skirtMesh = new Primitive();
         this._skirtMesh.createAndSetVertexBuffer('position_f32x3', vertices);
-        this._skirtMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance');
+        this._skirtMesh.createAndSetVertexBuffer('tex0_f32x4', this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._nonInstanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._skirtMesh.createAndSetVertexBuffer(fmt, this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance');
+            this._skirtMesh.createAndSetVertexBuffer(fmt, this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._nonInstanceDataPoolSize++;
         }
         this._skirtMesh.createAndSetIndexBuffer(indices);
@@ -636,10 +669,10 @@ const rotationValues = [
         this._skirtMeshLines?.dispose();
         this._skirtMeshLines = new Primitive();
         this._skirtMeshLines.setVertexBuffer(this._skirtMesh.getVertexBuffer('position'));
-        this._skirtMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance');
+        this._skirtMeshLines.createAndSetVertexBuffer('tex0_f32x4', this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance', INSTANCE_BUFFER_OPTIONS);
         this._nonInstanceDataPoolSize++;
         for (const fmt of this._extraInstanceBuffers){
-            this._skirtMeshLines.createAndSetVertexBuffer(fmt, this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance');
+            this._skirtMeshLines.createAndSetVertexBuffer(fmt, this.allocNonInstanceBuffer(0, 0, 0, 0), 'instance', INSTANCE_BUFFER_OPTIONS);
             this._nonInstanceDataPoolSize++;
         }
         this._skirtMeshLines.createAndSetIndexBuffer(indicesLines);
@@ -657,10 +690,10 @@ const rotationValues = [
         } else {
             AABB.transform(aabb, Matrix4x4.rotationZ(rotation), tmpAABB);
         }
-        const minX = (tmpAABB.minPoint.x * scale + offset.x) * gridScale;
-        const maxX = (tmpAABB.maxPoint.x * scale + offset.x) * gridScale;
-        const minZ = (tmpAABB.minPoint.y * scale + offset.y) * gridScale;
-        const maxZ = (tmpAABB.maxPoint.y * scale + offset.y) * gridScale;
+        const minX = (tmpAABB.minPoint.x * scale + offset.x) * gridScale + this._originX;
+        const maxX = (tmpAABB.maxPoint.x * scale + offset.x) * gridScale + this._originX;
+        const minZ = (tmpAABB.minPoint.y * scale + offset.y) * gridScale + this._originZ;
+        const maxZ = (tmpAABB.maxPoint.y * scale + offset.y) * gridScale + this._originZ;
         if (minX < outAABB.minPoint.x) {
             outAABB.minPoint.x = minX;
         }
@@ -681,11 +714,17 @@ const rotationValues = [
         } else {
             AABB.transform(aabb, Matrix4x4.rotationZ(rotation), tmpAABB);
         }
-        const minX = (tmpAABB.minPoint.x * scale + offset.x) * gridScale;
-        const maxX = (tmpAABB.maxPoint.x * scale + offset.x) * gridScale;
-        const minZ = (tmpAABB.minPoint.y * scale + offset.y) * gridScale;
-        const maxZ = (tmpAABB.maxPoint.y * scale + offset.y) * gridScale;
+        const minX = (tmpAABB.minPoint.x * scale + offset.x) * gridScale + this._originX;
+        const maxX = (tmpAABB.maxPoint.x * scale + offset.x) * gridScale + this._originX;
+        const minZ = (tmpAABB.minPoint.y * scale + offset.y) * gridScale + this._originZ;
+        const maxZ = (tmpAABB.maxPoint.y * scale + offset.y) * gridScale + this._originZ;
         ctx.calcAABB(ctx.userData, minX, maxX, minZ, maxZ, tmpAABB, level);
+        if (camera.clipMask) {
+            // Shadow cull cameras test only some planes: a directional cascade keeps casters at any
+            // depth along the light.
+            const mask = ctx.skirt ? camera.clipMask & ALL_PLANES_EXCEPT_FAR : camera.clipMask;
+            return tmpAABB.getClipStateWithFrustumMask(camera.frustum, mask) !== ClipState.NOT_CLIPPED;
+        }
         if (ctx.skirt) {
             // Every plane except the far one. A skirted clipmap deliberately reaches
             // past the far plane and pins the depth of whatever lands beyond it, so
@@ -696,20 +735,25 @@ const rotationValues = [
         }
         return tmpAABB.getClipStateWithFrustum(camera.frustum) !== ClipState.NOT_CLIPPED;
     }
-    calcLevelAABB(camera, minMaxWorldPos, gridScale) {
+    calcLevelAABB(camera, minMaxWorldPos, gridScale, gridOriginX = 0, gridOriginZ = 0) {
+        this._originX = gridOriginX;
+        this._originZ = gridOriginZ;
         const mipLevels = this.calcMipLevels(camera, minMaxWorldPos, gridScale);
         camera.getWorldPosition(tmpV3);
-        const snappedPos = new Vector2();
-        const tileSize = new Vector2();
-        const base = new Vector2();
-        const offset = new Vector2();
-        const posX = tmpV3.x / gridScale;
-        const posY = tmpV3.z / gridScale;
-        const outAABB = [];
-        for(let i = 0; i < mipLevels; i++){
-            const aabb = new AABB();
+        const snappedPos = tmpSnappedPos;
+        const tileSize = tmpTileSize;
+        const base = tmpBase;
+        const offset = tmpOffset;
+        const posX = (tmpV3.x - gridOriginX) / gridScale;
+        const posY = (tmpV3.z - gridOriginZ) / gridScale;
+        // Reused across calls: callers consume the result before the next one
+        const outAABB = this._levelAABBs;
+        while(outAABB.length < mipLevels){
+            outAABB.push(new AABB());
+        }
+        outAABB.length = mipLevels;
+        for (const aabb of outAABB){
             aabb.beginExtend();
-            outAABB.push(aabb);
         }
         snappedPos.setXY(Math.floor(posX), Math.floor(posY));
         // cross
@@ -735,16 +779,15 @@ const rotationValues = [
             // draw filler
             this.updateAABB(this._fillerMeshAABB, null, snappedPos, scale, gridScale, aabb);
             const nextScale = scale * 2;
-            const nextSnappedPos = new Vector2(Math.floor(posX / nextScale) * nextScale, Math.floor(posY / nextScale) * nextScale);
+            const nextSnappedPos = tmpNextSnappedPos.setXY(Math.floor(posX / nextScale) * nextScale, Math.floor(posY / nextScale) * nextScale);
             // draw trim
-            const tileCentre = new Vector2(snappedPos.x + scale * 0.5, snappedPos.y + scale * 0.5);
-            const d = new Vector2(posX - nextSnappedPos.x, posY - nextSnappedPos.y);
+            const tileCentre = tmpTileCentre.setXY(snappedPos.x + scale * 0.5, snappedPos.y + scale * 0.5);
             let r = 0;
-            r |= d.x >= scale ? 0 : 2;
-            r |= d.y >= scale ? 0 : 1;
+            r |= posX - nextSnappedPos.x >= scale ? 0 : 2;
+            r |= posY - nextSnappedPos.y >= scale ? 0 : 1;
             this.updateAABB(this._trimMeshAABB, rotationValues[r], tileCentre, scale, gridScale, aabb);
             // draw seam
-            const nextBase = new Vector2(nextSnappedPos.x - (this._tileResolution << l + 1), nextSnappedPos.y - (this._tileResolution << l + 1));
+            const nextBase = tmpNextBase.setXY(nextSnappedPos.x - (this._tileResolution << l + 1), nextSnappedPos.y - (this._tileResolution << l + 1));
             this.updateAABB(this._seamMeshAABB, null, nextBase, scale, gridScale, aabb);
         }
         return outAABB;
@@ -778,12 +821,14 @@ const rotationValues = [
         const renderData = [];
         const mipLevels = this.calcMipLevels(context.camera, context.minMaxWorldPos, context.gridScale, context.viewDistance);
         context.camera.getWorldPosition(tmpV3);
-        const snappedPos = new Vector2();
-        const tileSize = new Vector2();
-        const base = new Vector2();
-        const offset = new Vector2();
-        const posX = tmpV3.x / context.gridScale;
-        const posY = tmpV3.z / context.gridScale;
+        const snappedPos = tmpSnappedPos;
+        const tileSize = tmpTileSize;
+        const base = tmpBase;
+        const offset = tmpOffset;
+        this._originX = context.gridOriginX ?? 0;
+        this._originZ = context.gridOriginZ ?? 0;
+        const posX = (tmpV3.x - this._originX) / context.gridScale;
+        const posY = (tmpV3.z - this._originZ) / context.gridScale;
         // draw cross
         snappedPos.setXY(Math.floor(posX), Math.floor(posY));
         if (!context.frustumCulling || this.visible(context, this._crossMeshAABB, context.camera, null, snappedPos, 1, context.gridScale, 0)) {
@@ -844,7 +889,7 @@ const rotationValues = [
                     // at a raised camera is tens of kilometres and outgrows any sentinel
                     // rectangle - dropping the outer tiles and opening a band of sky
                     // between the last one drawn and the horizon skirt.
-                    context.skirt || this.intervalsOverlap(offset.x * context.gridScale, (offset.x + tileSize.x) * context.gridScale, context.minMaxWorldPos.x, context.minMaxWorldPos.z) && this.intervalsOverlap(offset.y * context.gridScale, (offset.y + tileSize.y) * context.gridScale, context.minMaxWorldPos.y, context.minMaxWorldPos.w)) {
+                    context.skirt || this.intervalsOverlap(offset.x * context.gridScale + this._originX, (offset.x + tileSize.x) * context.gridScale + this._originX, context.minMaxWorldPos.x, context.minMaxWorldPos.z) && this.intervalsOverlap(offset.y * context.gridScale + this._originZ, (offset.y + tileSize.y) * context.gridScale + this._originZ, context.minMaxWorldPos.y, context.minMaxWorldPos.w)) {
                         if (!context.frustumCulling || this.visible(context, this._tileMeshBBox, context.camera, null, offset, scale, context.gridScale, l)) {
                             this.addInstance(tilePrimitives, rotationValues[0], offset.x, offset.y, scale, l);
                         }
@@ -857,18 +902,17 @@ const rotationValues = [
             }
             if (l !== mipLevels - 1) {
                 const nextScale = scale * 2;
-                const nextSnappedPos = new Vector2(Math.floor(posX / nextScale) * nextScale, Math.floor(posY / nextScale) * nextScale);
+                const nextSnappedPos = tmpNextSnappedPos.setXY(Math.floor(posX / nextScale) * nextScale, Math.floor(posY / nextScale) * nextScale);
                 // draw trim
-                const tileCentre = new Vector2(snappedPos.x + scale * 0.5, snappedPos.y + scale * 0.5);
-                const d = new Vector2(posX - nextSnappedPos.x, posY - nextSnappedPos.y);
+                const tileCentre = tmpTileCentre.setXY(snappedPos.x + scale * 0.5, snappedPos.y + scale * 0.5);
                 let r = 0;
-                r |= d.x >= scale ? 0 : 2;
-                r |= d.y >= scale ? 0 : 1;
+                r |= posX - nextSnappedPos.x >= scale ? 0 : 2;
+                r |= posY - nextSnappedPos.y >= scale ? 0 : 1;
                 if (!context.frustumCulling || this.visible(context, this._trimMeshAABB, context.camera, rotationValues[r], tileCentre, scale, context.gridScale, l)) {
                     this.addInstance(trimPrimitives, rotationValues[r], tileCentre.x, tileCentre.y, scale, l);
                 }
                 // draw seam
-                const nextBase = new Vector2(nextSnappedPos.x - (this._tileResolution << l + 1), nextSnappedPos.y - (this._tileResolution << l + 1));
+                const nextBase = tmpNextBase.setXY(nextSnappedPos.x - (this._tileResolution << l + 1), nextSnappedPos.y - (this._tileResolution << l + 1));
                 if (!context.frustumCulling || this.visible(context, this._seamMeshAABB, context.camera, null, nextBase, scale, context.gridScale, l)) {
                     this.addInstance(seamPrimitives, rotationValues[0], nextBase.x, nextBase.y, scale, l);
                 }
@@ -907,6 +951,77 @@ const rotationValues = [
         }
         return renderData;
     }
+    /**
+   * Keeps the instances of a set returned by {@link Clipmap.gather} that `context.camera` can
+   * see, and uploads them in place of the gathered ones.
+   *
+   * For passes that render the same clipmap from several cameras - a shadow map culls each
+   * cascade or cube face with its own - gather once without frustum culling, then call this
+   * before each draw. The source set is left untouched, so it can be culled again for the next
+   * camera; the returned set is only valid until the next call.
+   *
+   * Non-instanced meshes (the cross and the skirt) are always kept.
+   *
+   * @param renderData - A set returned by gather() for this clipmap in the current frame
+   * @param context - Gather context whose camera is the one to cull with
+   * @returns The culled set
+   */ cullInstances(renderData, context) {
+        this._originX = context.gridOriginX ?? 0;
+        this._originZ = context.gridOriginZ ?? 0;
+        const result = [];
+        for (const info of renderData){
+            const meshAABB = this.getInstancedMeshAABB(info.primitive);
+            if (!meshAABB) {
+                result.push(info);
+                continue;
+            }
+            let scratch = this._cullScratch.get(info.primitive);
+            if (!scratch) {
+                scratch = {
+                    instanceDatas: new Float32Array(info.instanceDatas.length),
+                    mipLevels: new Float32Array(info.mipLevels.length)
+                };
+                this._cullScratch.set(info.primitive, scratch);
+            }
+            let numInstances = 0;
+            let maxMiplevel = 0;
+            for(let i = 0; i < info.numInstances; i++){
+                const rotation = info.instanceDatas[i * 4 + 0];
+                const scale = info.instanceDatas[i * 4 + 1];
+                const level = info.mipLevels[i];
+                tmpOffset.setXY(info.instanceDatas[i * 4 + 2], info.instanceDatas[i * 4 + 3]);
+                if (this.visible(context, meshAABB, context.camera, rotation, tmpOffset, scale, context.gridScale, level)) {
+                    scratch.instanceDatas.set(info.instanceDatas.subarray(i * 4, i * 4 + 4), numInstances * 4);
+                    scratch.mipLevels[numInstances] = level;
+                    maxMiplevel = Math.max(maxMiplevel, level);
+                    numInstances++;
+                }
+            }
+            if (numInstances > 0) {
+                info.primitive.getVertexBuffer('texCoord0').bufferSubData(0, scratch.instanceDatas, 0, numInstances * 4);
+                result.push({
+                    primitive: info.primitive,
+                    numInstances,
+                    instanceDatas: scratch.instanceDatas,
+                    mipLevels: scratch.mipLevels,
+                    maxMiplevel
+                });
+            }
+        }
+        return result;
+    }
+    /** Local bounds of the instanced mesh behind a primitive, null for the non-instanced ones */ getInstancedMeshAABB(primitive) {
+        if (primitive === this._tileMesh || primitive === this._tileMeshLines) {
+            return this._tileMeshBBox;
+        } else if (primitive === this._fillerMesh || primitive === this._fillerMeshLines) {
+            return this._fillerMeshAABB;
+        } else if (primitive === this._trimMesh || primitive === this._trimMeshLines) {
+            return this._trimMeshAABB;
+        } else if (primitive === this._seamMesh || primitive === this._seamMeshLines) {
+            return this._seamMeshAABB;
+        }
+        return null;
+    }
     /** Disposes the clipmap and release all meshes */ onDispose() {
         super.onDispose();
         this._crossMesh.dispose();