@hello-terrain/three 0.0.0-alpha.4 → 0.0.0-alpha.6

package/dist/index.mjs

@@ -1,7 +1,8 @@
 import { BufferGeometry, BufferAttribute, Vector3 as Vector3$1 } from 'three';
-import { MeshStandardNodeMaterial, InstancedMesh, StorageBufferAttribute, Vector3 } from 'three/webgpu';
-import { Fn, remap, float, vec3, dot, int, vertexIndex, uv, instanceIndex, pow, positionLocal, select, storage, uniform } from 'three/tsl';
-import { task, param, graph } from '@hello-terrain/work';
+import { MeshStandardNodeMaterial, InstancedMesh, InstancedBufferAttribute, StorageBufferAttribute, Vector3 } from 'three/webgpu';
+import { param, task, graph } from '@hello-terrain/work';
+import { uniform, Fn, float, globalId, int, vec2, uint, workgroupBarrier, If, instanceIndex, min, max, pow, vec3, storage, packHalf2x16, remap, dot, vertexIndex, uv, select, positionLocal, unpackHalf2x16, normalLocal, varyingProperty, mx_noise_float, Loop, mix } from 'three/tsl';
+import { Fn as Fn$1 } from 'three/src/nodes/TSL.js';
 
 class TerrainGeometry extends BufferGeometry {
   constructor(innerSegments = 14, extendUV = false) {
@@ -61,17 +62,19 @@ class TerrainGeometry extends BufferGeometry {
    *  | / | \ | / | \ |
    *  o---o---o---o---o
    *
-   * INNER GRID (consistent diagonal, no rotational symmetry):
-   *        o---o---o
-   *        | \ | \ |
-   *        o---o---o
-   *        | \ | \ |
-   *        o---o---o
+   * INNER GRID (alternating diagonals — checkerboard pattern):
+   *        o---o---o---o---o
+   *        | \ | / | \ | / |
+   *        o---o---o---o---o
+   *        | / | \ | / | \ |
+   *        o---o---o---o---o
+   *        | \ | / | \ | / |
+   *        o---o---o---o---o
    *
    * Where o = vertex
    * Each square cell is split into 2 triangles.
    * - Skirt cells (outer ring): diagonal flip based on quadrant for corner correctness
-   * - Inner cells: consistent diagonal direction (all triangles "point" the same way)
+   * - Inner cells: alternating diagonal via (x+y)%2 to reduce interpolation artifacts
    *
    * Vertex layout (for innerSegments = 2):
    *
@@ -117,7 +120,7 @@ class TerrainGeometry extends BufferGeometry {
           const topHalf = y < mid;
           useDefaultDiagonal = leftHalf && topHalf || !leftHalf && !topHalf;
         } else {
-          useDefaultDiagonal = true;
+          useDefaultDiagonal = (x + y) % 2 === 0;
         }
         if (useDefaultDiagonal) {
           indices.push(a, d, b);
@@ -217,7 +220,7 @@ class TerrainGeometry extends BufferGeometry {
 
 const defaultTerrainMeshParams = {
   innerTileSegments: 14,
-  maxNodes: 2048,
+  maxNodes: 1024,
   material: new MeshStandardNodeMaterial()
 };
 class TerrainMesh extends InstancedMesh {
@@ -228,6 +231,7 @@ class TerrainMesh extends InstancedMesh {
     const { innerTileSegments, maxNodes, material } = mergedParams;
     const geometry = new TerrainGeometry(innerTileSegments, true);
     super(geometry, material, maxNodes);
+    this.frustumCulled = false;
     this._innerTileSegments = innerTileSegments;
     this._maxNodes = maxNodes;
   }
@@ -244,72 +248,197 @@ class TerrainMesh extends InstancedMesh {
     return this._maxNodes;
   }
   set maxNodes(maxNodes) {
+    if (!Number.isInteger(maxNodes) || maxNodes < 1) {
+      throw new Error(`Invalid maxNodes: ${maxNodes}. Must be a positive integer.`);
+    }
+    if (maxNodes === this._maxNodes) return;
+    const oldMax = this._maxNodes;
+    const nextMatrix = new Float32Array(maxNodes * 16);
+    const oldMatrixArray = this.instanceMatrix.array;
+    nextMatrix.set(oldMatrixArray.subarray(0, Math.min(oldMatrixArray.length, nextMatrix.length)));
+    this.instanceMatrix = new InstancedBufferAttribute(nextMatrix, 16);
+    if (this.instanceColor) {
+      const itemSize = this.instanceColor.itemSize;
+      const nextColor = new Float32Array(maxNodes * itemSize);
+      const oldColorArray = this.instanceColor.array;
+      nextColor.set(oldColorArray.subarray(0, Math.min(oldColorArray.length, nextColor.length)));
+      this.instanceColor = new InstancedBufferAttribute(nextColor, itemSize);
+    }
     this._maxNodes = maxNodes;
+    this.count = Math.min(this.count, maxNodes);
+    this.instanceMatrix.needsUpdate = true;
+    if (this.instanceColor) this.instanceColor.needsUpdate = true;
+    if (maxNodes < oldMax && this.count >= maxNodes) {
+      this.count = maxNodes;
+    }
   }
 }
 
-const textureSpaceToVectorSpace = Fn(([value]) => {
-  return remap(value, float(0), float(1), float(-1), float(1));
-});
-const vectorSpaceToTextureSpace = Fn(([value]) => {
-  return remap(value, float(-1), float(1), float(0), float(1));
-});
-const blendAngleCorrectedNormals = Fn(([n1, n2]) => {
-  const t = vec3(n1.x, n1.y, n1.z.add(1));
-  const u = vec3(n2.x.negate(), n2.y.negate(), n2.z);
-  const r = t.mul(dot(t, u)).sub(u.mul(t.z)).normalize();
-  return r;
-});
-const deriveNormalZ = Fn(([normalXY]) => {
-  const xy = normalXY.toVar();
-  const z = xy.x.mul(xy.x).add(xy.y.mul(xy.y)).oneMinus().max(0).sqrt();
-  return vec3(xy.x, xy.y, z);
-});
+const WORKGROUP_X = 16;
+const WORKGROUP_Y = 16;
+function compileComputePipeline(stages, width, bindings) {
+  const workgroupSize = [WORKGROUP_X, WORKGROUP_Y, 1];
+  const dispatchX = Math.ceil(width / WORKGROUP_X);
+  const dispatchY = Math.ceil(width / WORKGROUP_Y);
+  const uInstanceCount = uniform(0, "uint");
+  const computeShader = Fn(() => {
+    const fWidth = float(width);
+    const activeIndex = globalId.z;
+    const nodeIndex = int(activeIndex).toVar();
+    const iWidth = int(width);
+    const ix = int(globalId.x);
+    const iy = int(globalId.y);
+    const texelSize = vec2(1, 1).div(fWidth);
+    const localCoordinates = vec2(globalId.x, globalId.y);
+    const localUVCoords = localCoordinates.div(fWidth);
+    const verticesPerNode = iWidth.mul(iWidth);
+    const globalIndex = int(nodeIndex).mul(verticesPerNode).add(iy.mul(iWidth).add(ix));
+    const inBounds = ix.lessThan(iWidth).and(iy.lessThan(iWidth)).and(uint(activeIndex).lessThan(uInstanceCount)).toVar();
+    for (let i = 0; i < stages.length; i++) {
+      if (i > 0) {
+        workgroupBarrier();
+      }
+      If(inBounds, () => {
+        stages[i](nodeIndex, globalIndex, localUVCoords, localCoordinates, texelSize);
+      });
+    }
+  })().computeKernel(workgroupSize);
+  function execute(renderer, instanceCount) {
+    uInstanceCount.value = instanceCount;
+    renderer.compute(computeShader, [dispatchX, dispatchY, instanceCount]);
+  }
+  return { execute };
+}
 
-const isSkirtVertex = Fn(([segments]) => {
-  const segmentsNode = typeof segments === "number" ? int(segments) : segments;
-  const vIndex = int(vertexIndex);
-  const segmentEdges = int(segmentsNode.add(3));
-  const vx = vIndex.mod(segmentEdges);
-  const vy = vIndex.div(segmentEdges);
-  const last = segmentEdges.sub(int(1));
-  return vx.equal(int(0)).or(vx.equal(last)).or(vy.equal(int(0))).or(vy.equal(last));
-});
-const isSkirtUV = Fn(([segments]) => {
-  const segmentsNode = typeof segments === "number" ? int(segments) : segments;
-  const ux = uv().x;
-  const uy = uv().y;
-  const segmentCount = segmentsNode.add(2);
-  const segmentStep = float(1).div(segmentCount);
-  const innerX = ux.greaterThan(segmentStep).and(ux.lessThan(segmentStep.oneMinus()));
-  const innerY = uy.greaterThan(segmentStep).and(uy.lessThan(segmentStep.oneMinus()));
-  return innerX.and(innerY).not();
+const createElevation = (tile, uniforms, elevationFn) => {
+  return function perVertexElevation(nodeIndex, localCoordinates) {
+    const ix = int(localCoordinates.x);
+    const iy = int(localCoordinates.y);
+    const edgeVertexCount = uniforms.uInnerTileSegments.toVar().add(int(3));
+    const tileUV = localCoordinates.toFloat().div(edgeVertexCount.toFloat());
+    const rootUV = tile.rootUVCompute(nodeIndex, ix, iy);
+    const worldPosition = tile.tileVertexWorldPositionCompute(nodeIndex, ix, iy).setName("worldPositionWithSkirt");
+    const rootSize = uniforms.uRootSize.toVar();
+    return elevationFn({
+      worldPosition,
+      rootSize,
+      rootUV,
+      tileOriginVec2: tile.tileOriginVec2(nodeIndex),
+      tileSize: tile.tileSize(nodeIndex),
+      tileLevel: tile.tileLevel(nodeIndex),
+      nodeIndex: int(nodeIndex),
+      tileUV
+    });
+  };
+};
+const readElevationFieldAtPositionLocal = (elevationFieldBuffer, edgeVertexCount, positionLocal) => Fn(() => {
+  const nodeIndex = int(instanceIndex);
+  const intEdge = int(edgeVertexCount);
+  const innerSegments = int(edgeVertexCount).sub(3);
+  const fInnerSegments = float(innerSegments);
+  const last = intEdge.sub(int(1));
+  const u = positionLocal.x.add(float(0.5));
+  const v = positionLocal.z.add(float(0.5));
+  const x = u.mul(fInnerSegments).round().toInt().add(int(1));
+  const y = v.mul(fInnerSegments).round().toInt().add(int(1));
+  const xClamped = min(max(x, int(0)), last);
+  const yClamped = min(max(y, int(0)), last);
+  const verticesPerNode = intEdge.mul(intEdge);
+  const perNodeVertexIndex = yClamped.mul(intEdge).add(xClamped);
+  const globalVertexIndex = nodeIndex.mul(verticesPerNode).add(perNodeVertexIndex);
+  return elevationFieldBuffer.element(globalVertexIndex);
 });
 
-function createTileWorldPosition(leafStorage, terrainUniforms) {
-  return Fn(() => {
-    const skirtVertex = isSkirtVertex(terrainUniforms.uInnerTileSegments);
-    const nodeIndex = int(instanceIndex);
+function createTileCompute(leafStorage, uniforms) {
+  const tileLevel = Fn(([nodeIndex]) => {
+    const nodeOffset = nodeIndex.mul(int(4));
+    return leafStorage.node.element(nodeOffset).toInt();
+  });
+  const tileOriginVec2 = Fn(([nodeIndex]) => {
     const nodeOffset = nodeIndex.mul(int(4));
-    const nodeLevel = leafStorage.node.element(nodeOffset).toInt();
     const nodeX = leafStorage.node.element(nodeOffset.add(int(1))).toFloat();
     const nodeY = leafStorage.node.element(nodeOffset.add(int(2))).toFloat();
-    const rootSize = terrainUniforms.uRootSize.toVar();
-    const rootOrigin = terrainUniforms.uRootOrigin.toVar();
+    return vec2(nodeX, nodeY);
+  });
+  const tileSize = Fn(([nodeIndex]) => {
+    const rootSize = uniforms.uRootSize.toVar();
+    const level = tileLevel(nodeIndex);
+    return float(rootSize).div(pow(float(2), level.toFloat()));
+  });
+  const rootUVCompute = Fn(([nodeIndex, ix, iy]) => {
+    const nodeVec2 = tileOriginVec2(nodeIndex);
+    const nodeX = nodeVec2.x;
+    const nodeY = nodeVec2.y;
+    const rootSize = uniforms.uRootSize.toVar();
+    const rootOrigin = uniforms.uRootOrigin.toVar();
+    const size = tileSize(nodeIndex);
     const half = float(0.5);
-    const size = rootSize.div(pow(float(2), nodeLevel.toFloat()));
-    const halfRoot = rootSize.mul(half);
-    const centerX = rootOrigin.x.add(nodeX.add(half).mul(size)).sub(halfRoot);
-    const centerZ = rootOrigin.z.add(nodeY.add(half).mul(size)).sub(halfRoot);
-    const clampedX = positionLocal.x.max(half.negate()).min(half);
-    const clampedZ = positionLocal.z.max(half.negate()).min(half);
-    const worldX = centerX.add(clampedX.mul(size));
-    const worldZ = centerZ.add(clampedZ.mul(size));
-    const baseY = rootOrigin.y;
-    const skirtY = baseY.sub(terrainUniforms.uSkirtScale.toVar());
-    const worldY = select(skirtVertex, skirtY, baseY);
-    return vec3(worldX, worldY, worldZ);
-  })();
+    const halfRoot = float(rootSize).mul(half);
+    const fInnerSegments = uniforms.uInnerTileSegments.toVar().toFloat();
+    const texelSpacing = size.div(fInnerSegments);
+    const absX = nodeX.mul(fInnerSegments).add(int(ix).toFloat().sub(float(1)));
+    const absY = nodeY.mul(fInnerSegments).add(int(iy).toFloat().sub(float(1)));
+    const worldX = rootOrigin.x.add(absX.mul(texelSpacing)).sub(halfRoot);
+    const worldZ = rootOrigin.z.add(absY.mul(texelSpacing)).sub(halfRoot);
+    const centeredX = worldX.sub(rootOrigin.x);
+    const centeredZ = worldZ.sub(rootOrigin.z);
+    return vec2(
+      centeredX.div(rootSize).add(half),
+      centeredZ.div(rootSize).mul(float(-1)).add(half)
+    );
+  });
+  const tileVertexWorldPositionCompute = Fn(
+    ([nodeIndex, ix, iy]) => {
+      const rootOrigin = uniforms.uRootOrigin.toVar();
+      const nodeVec2 = tileOriginVec2(nodeIndex);
+      const nodeX = nodeVec2.x;
+      const nodeY = nodeVec2.y;
+      const rootSize = uniforms.uRootSize.toVar();
+      const size = tileSize(nodeIndex);
+      const half = float(0.5);
+      const halfRoot = float(rootSize).mul(half);
+      const fInnerSegments = uniforms.uInnerTileSegments.toVar().toFloat();
+      const texelSpacing = size.div(fInnerSegments);
+      const absX = nodeX.mul(fInnerSegments).add(int(ix).toFloat().sub(float(1)));
+      const absY = nodeY.mul(fInnerSegments).add(int(iy).toFloat().sub(float(1)));
+      const worldX = rootOrigin.x.add(absX.mul(texelSpacing)).sub(halfRoot);
+      const worldZ = rootOrigin.z.add(absY.mul(texelSpacing)).sub(halfRoot);
+      return vec3(worldX, rootOrigin.y, worldZ);
+    }
+  );
+  return {
+    tileLevel,
+    tileOriginVec2,
+    tileSize,
+    rootUVCompute,
+    tileVertexWorldPositionCompute
+  };
+}
+
+const rootSize = param(256).displayName("rootSize");
+const origin = param({
+  x: 0,
+  y: 0,
+  z: 0
+}).displayName("origin");
+const innerTileSegments = param(13).displayName("innerTileSegments");
+const skirtScale = param(100).displayName("skirtScale");
+const elevationScale = param(1).displayName("elevationScale");
+const maxNodes = param(1024).displayName("maxNodes");
+const maxLevel = param(16).displayName("maxLevel");
+const quadtreeUpdate = param({
+  cameraOrigin: { x: 0, y: 0, z: 0 },
+  mode: "distance",
+  distanceFactor: 1.5
+}).displayName("quadtreeUpdate");
+const surface = param(null).displayName("surface");
+const elevationFn = param(() => float(0));
+
+function createLeafStorage(maxNodes) {
+  const data = new Int32Array(maxNodes * 4);
+  const attribute = new StorageBufferAttribute(data, 4);
+  const node = storage(attribute, "i32", 1).toReadOnly().setName("leafStorage");
+  return { data, attribute, node };
 }
 
 const Dir = {
@@ -325,8 +454,8 @@ function allocLeafSet(capacity) {
     count: 0,
     space: new Uint8Array(capacity),
     level: new Uint8Array(capacity),
-    x: new Uint32Array(capacity),
-    y: new Uint32Array(capacity)
+    x: new Int32Array(capacity),
+    y: new Int32Array(capacity)
   };
 }
 function resetLeafSet(leaves) {
@@ -352,8 +481,8 @@ function createNodeStore(maxNodes, spaceCount) {
     gen: new Uint16Array(maxNodes),
     space: new Uint8Array(maxNodes),
     level: new Uint8Array(maxNodes),
-    x: new Uint32Array(maxNodes),
-    y: new Uint32Array(maxNodes),
+    x: new Int32Array(maxNodes),
+    y: new Int32Array(maxNodes),
     firstChild: new Uint32Array(maxNodes),
     flags: new Uint8Array(maxNodes),
     roots: new Uint32Array(spaceCount)
@@ -374,8 +503,8 @@ function allocNode(store, tile) {
   store.gen[id] = store.currentGen;
   store.space[id] = tile.space;
   store.level[id] = tile.level;
-  store.x[id] = tile.x >>> 0;
-  store.y[id] = tile.y >>> 0;
+  store.x[id] = tile.x;
+  store.y[id] = tile.y;
   store.firstChild[id] = U32_EMPTY;
   store.flags[id] = 0;
   return id;
@@ -490,6 +619,10 @@ function buildLeafIndex(leaves, out) {
 
 function createState(cfg, surface) {
   const store = createNodeStore(cfg.maxNodes, surface.spaceCount);
+  const scratchRootTiles = [];
+  for (let i = 0; i < surface.maxRootCount; i++) {
+    scratchRootTiles.push({ space: 0, level: 0, x: 0, y: 0 });
+  }
   return {
     cfg,
     store,
@@ -497,28 +630,42 @@ function createState(cfg, surface) {
     leafNodeIds: new Uint32Array(cfg.maxNodes),
     leafIndex: createSpatialIndex(cfg.maxNodes),
     stack: new Uint32Array(cfg.maxNodes),
+    rootNodeIds: new Uint32Array(surface.maxRootCount),
+    rootCount: 0,
     splitQueue: new Uint32Array(cfg.maxNodes),
     splitStamp: new Uint16Array(cfg.maxNodes),
     splitGen: 1,
     scratchTile: { space: 0, level: 0, x: 0, y: 0 },
     scratchNeighbor: { space: 0, level: 0, x: 0, y: 0 },
     scratchBounds: { cx: 0, cy: 0, cz: 0, r: 0 },
+    scratchRootTiles,
     spaceCount: surface.spaceCount
   };
 }
-function beginUpdate(state, surface) {
+function beginUpdate(state, surface, params) {
   if (surface.spaceCount !== state.spaceCount) {
     throw new Error(
       `Surface spaceCount changed (${state.spaceCount} -> ${surface.spaceCount}). Create a new quadtree state.`
     );
   }
+  if (surface.maxRootCount !== state.rootNodeIds.length) {
+    throw new Error(
+      `Surface maxRootCount changed (${state.rootNodeIds.length} -> ${surface.maxRootCount}). Create a new quadtree state.`
+    );
+  }
   beginFrame(state.store);
-  for (let s = 0; s < surface.spaceCount; s++) {
-    const rootId = allocNode(state.store, { space: s, level: 0, x: 0, y: 0 });
+  state.rootCount = 0;
+  const rootCount = surface.rootTiles(params.cameraOrigin, state.scratchRootTiles);
+  if (rootCount < 0 || rootCount > surface.maxRootCount) {
+    throw new Error(`Surface returned invalid root count (${rootCount}).`);
+  }
+  for (let i = 0; i < rootCount; i++) {
+    const rootId = allocNode(state.store, state.scratchRootTiles[i]);
     if (rootId === U32_EMPTY) {
       throw new Error("Failed to allocate root node (maxNodes too small).");
     }
-    state.store.roots[s] = rootId;
+    state.rootNodeIds[i] = rootId;
+    state.rootCount = i + 1;
   }
 }
 
@@ -553,8 +700,8 @@ function refineLeaves(state, surface, params, outLeaves) {
   const store = state.store;
   const stack = state.stack;
   let sp = 0;
-  for (let s = 0; s < surface.spaceCount; s++) {
-    stack[sp++] = store.roots[s];
+  for (let i = 0; i < state.rootCount; i++) {
+    stack[sp++] = state.rootNodeIds[i];
   }
   while (sp > 0) {
     const nodeId = stack[--sp];
@@ -667,7 +814,7 @@ function balance2to1(state, surface, params, leaves) {
 }
 
 function update(state, surface, params, outLeaves) {
-  beginUpdate(state, surface);
+  beginUpdate(state, surface, params);
   const leaves = refineLeaves(state, surface, params, outLeaves);
   return balance2to1(state, surface, params, leaves);
 }
@@ -771,6 +918,7 @@ function createFlatSurface(cfg) {
   const maxHeight = cfg.maxHeight ?? 0;
   const surface = {
     spaceCount: 1,
+    maxRootCount: 1,
     neighborSameLevel(tile, dir, out) {
       const level = tile.level;
       const x = tile.x;
@@ -796,8 +944,8 @@ function createFlatSurface(cfg) {
       if (nx > maxCoord || ny > maxCoord) return false;
       out.space = 0;
       out.level = level;
-      out.x = nx >>> 0;
-      out.y = ny >>> 0;
+      out.x = nx;
+      out.y = ny;
       return true;
     },
     tileBounds(tile, cameraOrigin, out) {
@@ -813,14 +961,87 @@ function createFlatSurface(cfg) {
       out.cy = centerY - cameraOrigin.y;
       out.cz = centerZ - cameraOrigin.z;
       out.r = 0.7071067811865476 * size + maxHeight;
+    },
+    rootTiles(_cameraOrigin, out) {
+      const root = out[0];
+      root.space = 0;
+      root.level = 0;
+      root.x = 0;
+      root.y = 0;
+      return 1;
     }
   };
   return surface;
 }
 
+function createInfiniteFlatSurface(cfg) {
+  const halfRoot = 0.5 * cfg.rootSize;
+  const maxHeight = cfg.maxHeight ?? 0;
+  const rootGridRadius = Math.max(0, Math.floor(cfg.rootGridRadius ?? 1));
+  const rootWidth = rootGridRadius * 2 + 1;
+  return {
+    spaceCount: 1,
+    maxRootCount: rootWidth * rootWidth,
+    neighborSameLevel(tile, dir, out) {
+      let nx = tile.x;
+      let ny = tile.y;
+      switch (dir) {
+        case Dir.LEFT:
+          nx = tile.x - 1;
+          break;
+        case Dir.RIGHT:
+          nx = tile.x + 1;
+          break;
+        case Dir.TOP:
+          ny = tile.y - 1;
+          break;
+        case Dir.BOTTOM:
+          ny = tile.y + 1;
+          break;
+      }
+      out.space = tile.space;
+      out.level = tile.level;
+      out.x = nx;
+      out.y = ny;
+      return true;
+    },
+    tileBounds(tile, cameraOrigin, out) {
+      const level = tile.level;
+      const scale = 1 / (1 << level);
+      const size = cfg.rootSize * scale;
+      const minX = cfg.origin.x + (tile.x * size - halfRoot);
+      const minZ = cfg.origin.z + (tile.y * size - halfRoot);
+      const centerX = minX + 0.5 * size;
+      const centerY = cfg.origin.y;
+      const centerZ = minZ + 0.5 * size;
+      out.cx = centerX - cameraOrigin.x;
+      out.cy = centerY - cameraOrigin.y;
+      out.cz = centerZ - cameraOrigin.z;
+      out.r = 0.7071067811865476 * size + maxHeight;
+    },
+    rootTiles(cameraOrigin, out) {
+      const camRootX = Math.floor((cameraOrigin.x - cfg.origin.x + halfRoot) / cfg.rootSize);
+      const camRootY = Math.floor((cameraOrigin.z - cfg.origin.z + halfRoot) / cfg.rootSize);
+      let index = 0;
+      for (let dy = -rootGridRadius; dy <= rootGridRadius; dy++) {
+        for (let dx = -rootGridRadius; dx <= rootGridRadius; dx++) {
+          const root = out[index];
+          root.space = 0;
+          root.level = 0;
+          root.x = camRootX + dx;
+          root.y = camRootY + dy;
+          index++;
+        }
+      }
+      return index;
+    }
+  };
+}
+
 function createCubeSphereSurface(_cfg) {
   return {
     spaceCount: 6,
+    maxRootCount: 6,
     neighborSameLevel(_tile, _dir, _out) {
       return false;
     },
@@ -829,41 +1050,38 @@ function createCubeSphereSurface(_cfg) {
       out.cy = 0;
       out.cz = 0;
       out.r = Number.MAX_VALUE;
+    },
+    rootTiles(_cameraOrigin, out) {
+      for (let s = 0; s < 6; s++) {
+        const root = out[s];
+        root.space = s;
+        root.level = 0;
+        root.x = 0;
+        root.y = 0;
+      }
+      return 6;
     }
   };
 }
 
-const instanceIdTask = task(() => crypto.randomUUID()).displayName("terrainInstanceIdTask").cache("once");
-
-const rootSize = param(256).displayName("rootSize");
-const origin = param({ x: 0, y: 0, z: 0 }).displayName(
-  "origin"
-);
-const innerTileSegments = param(14).displayName("innerTileSegments");
-const skirtScale = param(100).displayName("skirtScale");
-const heightmapScale = param(1).displayName("heightmapScale");
-const maxNodes = param(1028).displayName("maxNodes");
-const maxLevel = param(16).displayName("maxLevel");
-const quadtreeUpdate = param({
-  cameraOrigin: { x: 0, y: 0, z: 0 },
-  mode: "distance",
-  distanceFactor: 1.5
-}).displayName("quadtreeUpdate");
-
-const quadtreeConfigTask = task((get, work) => {
+const surfaceTask = task((get, work) => {
+  const customSurface = get(surface);
   const rootSizeVal = get(rootSize);
   const originVal = get(origin);
+  return work(() => {
+    if (customSurface) return customSurface;
+    return createFlatSurface({ rootSize: rootSizeVal, origin: originVal });
+  });
+}).displayName("surfaceTask");
+const quadtreeConfigTask = task((get, work) => {
+  const surfaceVal = get(surfaceTask);
   const maxNodesVal = get(maxNodes);
   const maxLevelVal = get(maxLevel);
   return work(() => {
-    const surface = createFlatSurface({
-      rootSize: rootSizeVal,
-      origin: originVal
-    });
-    const state = createState({ maxNodes: maxNodesVal, maxLevel: maxLevelVal }, surface);
+    const state = createState({ maxNodes: maxNodesVal, maxLevel: maxLevelVal }, surfaceVal);
     return {
       state,
-      surface
+      surface: surfaceVal
     };
   });
 }).displayName("quadtreeConfigTask");
@@ -883,12 +1101,7 @@ const quadtreeUpdateTask = task((get, work) => {
 }).displayName("quadtreeUpdateTask");
 const leafStorageTask = task((get, work) => {
   const maxNodesVal = get(maxNodes);
-  return work(() => {
-    const data = new Int32Array(maxNodesVal * 4);
-    const attribute = new StorageBufferAttribute(data, 4);
-    const node = storage(attribute, "i32", 1).toReadOnly();
-    return { data, attribute, node };
-  });
+  return work(() => createLeafStorage(maxNodesVal));
 }).displayName("leafStorageTask");
 const leafGpuBufferTask = task((get, work) => {
   const leafSet = get(quadtreeUpdateTask);
@@ -914,6 +1127,23 @@ const leafGpuBufferTask = task((get, work) => {
   });
 }).displayName("leafGpuBufferTask");
 
+function createElevationFunction(callback) {
+  const tslFunction = (args) => {
+    const params = {
+      worldPosition: args.worldPosition,
+      rootSize: args.rootSize,
+      rootUV: args.rootUV,
+      tileUV: args.tileUV,
+      tileLevel: args.tileLevel,
+      tileSize: args.tileSize,
+      tileOriginVec2: args.tileOriginVec2,
+      nodeIndex: args.nodeIndex
+    };
+    return callback(params);
+  };
+  return Fn$1(tslFunction);
+}
+
 function createTerrainUniforms(params) {
   const sanitizedId = params.instanceId?.replace(/-/g, "_");
   const suffix = sanitizedId ? `_${sanitizedId}` : "";
@@ -925,16 +1155,18 @@ function createTerrainUniforms(params) {
     `uInnerTileSegments${suffix}`
   );
   const uSkirtScale = uniform(float(params.skirtScale)).setName(`uSkirtScale${suffix}`);
-  const uHeightmapScale = uniform(float(params.heightmapScale)).setName(`uHeightmapScale${suffix}`);
+  const uElevationScale = uniform(float(params.elevationScale)).setName(`uElevationScale${suffix}`);
   return {
     uRootOrigin,
     uRootSize,
     uInnerTileSegments,
     uSkirtScale,
-    uHeightmapScale
+    uElevationScale
   };
 }
 
+const instanceIdTask = task(() => crypto.randomUUID()).displayName("instanceIdTask").cache("once");
+
 const scratchVector3 = new Vector3$1();
 const createUniformsTask = task((get, work) => {
   const uniformParams = {
@@ -942,18 +1174,18 @@ const createUniformsTask = task((get, work) => {
     rootSize: get(rootSize),
     innerTileSegments: get(innerTileSegments),
     skirtScale: get(skirtScale),
-    heightmapScale: get(heightmapScale),
+    elevationScale: get(elevationScale),
     instanceId: get(instanceIdTask)
   };
   return work(() => createTerrainUniforms(uniformParams));
-}).displayName("createTerrainUniformsTask").cache("once");
+}).displayName("createUniformsTask").cache("once");
 const updateUniformsTask = task((get, work) => {
   const terrainUniformsContext = get(createUniformsTask);
   const rootSizeVal = get(rootSize);
   const rootOrigin = get(origin);
   const innerTileSegmentsVal = get(innerTileSegments);
   const skirtScaleVal = get(skirtScale);
-  const heightmapScaleVal = get(heightmapScale);
+  const elevationScaleVal = get(elevationScale);
   return work(() => {
     terrainUniformsContext.uRootSize.value = rootSizeVal;
     terrainUniformsContext.uRootOrigin.value = scratchVector3.set(
@@ -963,29 +1195,311 @@ const updateUniformsTask = task((get, work) => {
     );
     terrainUniformsContext.uInnerTileSegments.value = innerTileSegmentsVal;
     terrainUniformsContext.uSkirtScale.value = skirtScaleVal;
-    terrainUniformsContext.uHeightmapScale.value = heightmapScaleVal;
+    terrainUniformsContext.uElevationScale.value = elevationScaleVal;
     return terrainUniformsContext;
   });
-}).displayName("updateTerrainUniformsTask");
+}).displayName("updateUniformsTask");
+
+const createElevationFieldContextTask = task((get, work) => {
+  const edgeVertexCount = get(innerTileSegments) + 3;
+  const verticesPerNode = edgeVertexCount * edgeVertexCount;
+  const totalElements = get(maxNodes) * verticesPerNode;
+  return work(() => {
+    const data = new Float32Array(totalElements);
+    const attribute = new StorageBufferAttribute(data, 1);
+    const node = storage(attribute, "float", totalElements);
+    return {
+      data,
+      attribute,
+      node
+    };
+  });
+}).displayName("createElevationFieldContextTask");
+const tileNodesTask = task((get, work) => {
+  const leafStorage = get(leafStorageTask);
+  const uniforms = get(createUniformsTask);
+  return work(() => {
+    return createTileCompute(leafStorage, uniforms);
+  });
+}).displayName("tileNodesTask");
+const elevationFieldStageTask = task((get, work) => {
+  const tile = get(tileNodesTask);
+  const uniforms = get(createUniformsTask);
+  const elevationFieldContext = get(createElevationFieldContextTask);
+  const userElevationFn = get(elevationFn);
+  return work(() => {
+    const heightFn = createElevationFunction(userElevationFn);
+    const heightWriteFn = createElevation(tile, uniforms, heightFn);
+    return [
+      (nodeIndex, globalVertexIndex, _uv, localCoordinates) => {
+        const height = heightWriteFn(nodeIndex, localCoordinates);
+        elevationFieldContext.node.element(globalVertexIndex).assign(height);
+      }
+    ];
+  });
+}).displayName("elevationFieldStageTask");
+
+const createNormalFieldContextTask = task((get, work) => {
+  const edgeVertexCount = get(innerTileSegments) + 3;
+  const verticesPerNode = edgeVertexCount * edgeVertexCount;
+  const totalElements = get(maxNodes) * verticesPerNode;
+  return work(() => {
+    const data = new Uint32Array(totalElements);
+    const attribute = new StorageBufferAttribute(data, 1);
+    const node = storage(attribute, "uint", totalElements);
+    return {
+      data,
+      attribute,
+      node
+    };
+  });
+}).displayName("createNormalFieldContextTask");
+function createNormalFromElevationField(elevationFieldNode, edgeVertexCount) {
+  return Fn(
+    ([nodeIndex, tileSize, ix, iy, elevationScale]) => {
+      const iEdge = int(edgeVertexCount);
+      const verticesPerNode = iEdge.mul(iEdge);
+      const baseOffset = int(nodeIndex).mul(verticesPerNode);
+      const xLeft = int(ix).sub(int(1));
+      const xRight = int(ix).add(int(1));
+      const yUp = int(iy).sub(int(1));
+      const yDown = int(iy).add(int(1));
+      const hLeft = elevationFieldNode.element(baseOffset.add(int(iy).mul(iEdge).add(xLeft))).mul(elevationScale);
+      const hRight = elevationFieldNode.element(baseOffset.add(int(iy).mul(iEdge).add(xRight))).mul(elevationScale);
+      const hUp = elevationFieldNode.element(baseOffset.add(yUp.mul(iEdge).add(int(ix)))).mul(elevationScale);
+      const hDown = elevationFieldNode.element(baseOffset.add(yDown.mul(iEdge).add(int(ix)))).mul(elevationScale);
+      const innerSegments = float(iEdge).sub(float(3));
+      const stepWorld = tileSize.div(innerSegments);
+      const inv2Step = float(0.5).div(stepWorld);
+      const dhdx = float(hRight).sub(float(hLeft)).mul(inv2Step);
+      const dhdz = float(hDown).sub(float(hUp)).mul(inv2Step);
+      const normal = vec3(dhdx.negate(), float(1), dhdz.negate()).normalize();
+      return vec2(normal.x, normal.z);
+    }
+  );
+}
+const normalFieldStageTask = task((get, work) => {
+  const upstream = get(elevationFieldStageTask);
+  const elevationFieldContext = get(createElevationFieldContextTask);
+  const normalFieldContext = get(createNormalFieldContextTask);
+  const tileEdgeVertexCount = get(innerTileSegments) + 3;
+  const tile = get(tileNodesTask);
+  const uniforms = get(createUniformsTask);
+  return work(() => {
+    const computeNormal = createNormalFromElevationField(
+      elevationFieldContext.node,
+      tileEdgeVertexCount
+    );
+    return [
+      ...upstream,
+      (nodeIndex, globalVertexIndex, _uv, localCoordinates) => {
+        const ix = int(localCoordinates.x);
+        const iy = int(localCoordinates.y);
+        const tileSize = tile.tileSize(nodeIndex);
+        const normalXZ = computeNormal(
+          nodeIndex,
+          tileSize,
+          ix,
+          iy,
+          uniforms.uElevationScale
+        );
+        normalFieldContext.node.element(globalVertexIndex).assign(packHalf2x16(normalXZ));
+      }
+    ];
+  });
+}).displayName("normalFieldStageTask");
+
+const compileComputeTask = task((get, work) => {
+  const pipeline = get(normalFieldStageTask);
+  const edgeVertexCount = get(innerTileSegments) + 3;
+  return work(() => compileComputePipeline(pipeline, edgeVertexCount));
+}).displayName("compileComputeTask");
+const executeComputeTask = task((get, work, { resources }) => {
+  const { execute } = get(compileComputeTask);
+  const leafState = get(leafGpuBufferTask);
+  return work(
+    () => resources?.renderer ? execute(resources.renderer, leafState.count) : () => {
+    }
+  );
+}).displayName("executeComputeTask").lane("gpu");
+function createComputePipelineTasks(leafStageTask) {
+  const compile = task((get, work) => {
+    const pipeline = get(leafStageTask);
+    const edgeVertexCount = get(innerTileSegments) + 3;
+    return work(() => compileComputePipeline(pipeline, edgeVertexCount));
+  }).displayName("compileComputeTask");
+  const execute = task((get, work, { resources }) => {
+    const { execute: run } = get(compile);
+    const leafState = get(leafGpuBufferTask);
+    return work(() => resources?.renderer ? run(resources.renderer, leafState.count) : () => {
+    });
+  }).displayName("executeComputeTask").lane("gpu");
+  return { compile, execute };
+}
+
+const textureSpaceToVectorSpace = Fn(([value]) => {
+  return remap(value, float(0), float(1), float(-1), float(1));
+});
+const vectorSpaceToTextureSpace = Fn(([value]) => {
+  return remap(value, float(-1), float(1), float(0), float(1));
+});
+const blendAngleCorrectedNormals = Fn(([n1, n2]) => {
+  const t = vec3(n1.x, n1.y, n1.z.add(1));
+  const u = vec3(n2.x.negate(), n2.y.negate(), n2.z);
+  const r = t.mul(dot(t, u)).sub(u.mul(t.z)).normalize();
+  return r;
+});
+const deriveNormalZ = Fn(([normalXY]) => {
+  const xy = normalXY.toVar();
+  const z = xy.x.mul(xy.x).add(xy.y.mul(xy.y)).oneMinus().max(0).sqrt();
+  return vec3(xy.x, xy.y, z);
+});
+
+const isSkirtVertex = Fn(([segments]) => {
+  const segmentsNode = typeof segments === "number" ? int(segments) : segments;
+  const vIndex = int(vertexIndex);
+  const segmentEdges = int(segmentsNode.add(3));
+  const vx = vIndex.mod(segmentEdges);
+  const vy = vIndex.div(segmentEdges);
+  const last = segmentEdges.sub(int(1));
+  return vx.equal(int(0)).or(vx.equal(last)).or(vy.equal(int(0))).or(vy.equal(last));
+});
+const isSkirtUV = Fn(([segments]) => {
+  const segmentsNode = typeof segments === "number" ? int(segments) : segments;
+  const ux = uv().x;
+  const uy = uv().y;
+  const segmentCount = segmentsNode.add(2);
+  const segmentStep = float(1).div(segmentCount);
+  const innerX = ux.greaterThan(segmentStep).and(ux.lessThan(segmentStep.oneMinus()));
+  const innerY = uy.greaterThan(segmentStep).and(uy.lessThan(segmentStep.oneMinus()));
+  return innerX.and(innerY).not();
+});
+
+function createTileBaseWorldPosition(leafStorage, terrainUniforms) {
+  return Fn(() => {
+    const nodeIndex = int(instanceIndex);
+    const nodeOffset = nodeIndex.mul(int(4));
+    const nodeLevel = leafStorage.node.element(nodeOffset).toInt();
+    const nodeX = leafStorage.node.element(nodeOffset.add(int(1))).toFloat();
+    const nodeY = leafStorage.node.element(nodeOffset.add(int(2))).toFloat();
+    const rootSize = terrainUniforms.uRootSize.toVar();
+    const rootOrigin = terrainUniforms.uRootOrigin.toVar();
+    const half = float(0.5);
+    const size = rootSize.div(pow(float(2), nodeLevel.toFloat()));
+    const halfRoot = rootSize.mul(half);
+    const centerX = rootOrigin.x.add(nodeX.add(half).mul(size)).sub(halfRoot);
+    const centerZ = rootOrigin.z.add(nodeY.add(half).mul(size)).sub(halfRoot);
+    const clampedX = positionLocal.x.max(half.negate()).min(half);
+    const clampedZ = positionLocal.z.max(half.negate()).min(half);
+    const worldX = centerX.add(clampedX.mul(size));
+    const worldZ = centerZ.add(clampedZ.mul(size));
+    return vec3(worldX, rootOrigin.y, worldZ);
+  });
+}
+function createTileElevation(terrainUniforms, elevationFieldBufferNode) {
+  if (!elevationFieldBufferNode) return float(0);
+  const edgeVertexCount = terrainUniforms.uInnerTileSegments.add(3);
+  return readElevationFieldAtPositionLocal(
+    elevationFieldBufferNode,
+    edgeVertexCount,
+    positionLocal
+  )().mul(
+    terrainUniforms.uElevationScale
+  );
+}
+function createNormalAssignment(terrainUniforms, normalFieldBufferNode) {
+  if (!normalFieldBufferNode) return;
+  const nodeIndex = int(instanceIndex);
+  const intEdge = int(terrainUniforms.uInnerTileSegments.add(3));
+  const verticesPerNode = intEdge.mul(intEdge);
+  const globalVertexIndex = nodeIndex.mul(verticesPerNode).add(int(vertexIndex));
+  const packed = normalFieldBufferNode.element(globalVertexIndex);
+  const normalXZ = unpackHalf2x16(packed);
+  const reconstructed = deriveNormalZ(normalXZ);
+  normalLocal.assign(vec3(reconstructed.x, reconstructed.z, reconstructed.y));
+}
+function createTileWorldPosition(leafStorage, terrainUniforms, elevationFieldBufferNode, normalFieldBufferNode) {
+  const baseWorldPosition = createTileBaseWorldPosition(leafStorage, terrainUniforms);
+  return Fn(() => {
+    const base = baseWorldPosition();
+    const yElevation = createTileElevation(terrainUniforms, elevationFieldBufferNode);
+    const skirtVertex = isSkirtVertex(terrainUniforms.uInnerTileSegments);
+    const skirtY = base.y.add(yElevation).sub(terrainUniforms.uSkirtScale.toVar());
+    const worldY = select(skirtVertex, skirtY, base.y.add(yElevation));
+    createNormalAssignment(terrainUniforms, normalFieldBufferNode);
+    return vec3(base.x, worldY, base.z);
+  })();
+}
 
 const positionNodeTask = task((get, work) => {
   const leafStorage = get(leafStorageTask);
   const terrainUniforms = get(createUniformsTask);
-  return work(() => createTileWorldPosition(leafStorage, terrainUniforms));
-}).displayName("terrainVertextPositionNodeTask");
+  const elevationFieldContext = get(createElevationFieldContextTask);
+  const normalFieldContext = get(createNormalFieldContextTask);
+  return work(
+    () => createTileWorldPosition(
+      leafStorage,
+      terrainUniforms,
+      elevationFieldContext.node,
+      normalFieldContext.node
+    )
+  );
+}).displayName("positionNodeTask");
 
 function terrainGraph() {
-  return graph().add(instanceIdTask).add(quadtreeConfigTask).add(quadtreeUpdateTask).add(leafStorageTask).add(leafGpuBufferTask).add(createUniformsTask).add(updateUniformsTask).add(positionNodeTask);
+  return graph().add(instanceIdTask).add(quadtreeConfigTask).add(quadtreeUpdateTask).add(leafStorageTask).add(surfaceTask).add(leafGpuBufferTask).add(createUniformsTask).add(updateUniformsTask).add(positionNodeTask).add(createElevationFieldContextTask).add(tileNodesTask).add(createNormalFieldContextTask).add(elevationFieldStageTask).add(normalFieldStageTask).add(compileComputeTask).add(executeComputeTask);
 }
 const terrainTasks = {
   instanceId: instanceIdTask,
   quadtreeConfig: quadtreeConfigTask,
   quadtreeUpdate: quadtreeUpdateTask,
   leafStorage: leafStorageTask,
+  surface: surfaceTask,
   leafGpuBuffer: leafGpuBufferTask,
   createUniforms: createUniformsTask,
   updateUniforms: updateUniformsTask,
-  positionNode: positionNodeTask
+  positionNode: positionNodeTask,
+  createElevationFieldContext: createElevationFieldContextTask,
+  createTileNodes: tileNodesTask,
+  createNormalFieldContext: createNormalFieldContextTask,
+  elevationFieldStage: elevationFieldStageTask,
+  normalFieldStage: normalFieldStageTask,
+  compileCompute: compileComputeTask,
+  executeCompute: executeComputeTask
 };
 
-export { Dir, TerrainGeometry, TerrainMesh, U32_EMPTY, allocLeafSet, allocSeamTable, beginUpdate, blendAngleCorrectedNormals, buildLeafIndex, buildSeams2to1, createCubeSphereSurface, createFlatSurface, createSpatialIndex, createState, createTerrainUniforms, createTileWorldPosition, createUniformsTask, deriveNormalZ, heightmapScale, innerTileSegments, instanceIdTask, isSkirtUV, isSkirtVertex, leafGpuBufferTask, leafStorageTask, maxLevel, maxNodes, origin, positionNodeTask, quadtreeConfigTask, quadtreeUpdate, quadtreeUpdateTask, resetLeafSet, resetSeamTable, rootSize, skirtScale, terrainGraph, terrainTasks, textureSpaceToVectorSpace, update, updateUniformsTask, vectorSpaceToTextureSpace };
+const vGlobalVertexIndex = /* @__PURE__ */ varyingProperty("int", "vGlobalVertexIndex");
+const vElevation = /* @__PURE__ */ varyingProperty("f32", "vElevation");
+
+const cellCenter = Fn(({ cell }) => {
+  return cell.add(mx_noise_float(cell.mul(Math.PI)));
+});
+const voronoiCells = Fn((params) => {
+  const scale = float(params.scale);
+  const facet = float(params.facet);
+  const seed = float(params.seed);
+  const pos = params.uv.mul(scale).add(seed);
+  const midCell = pos.round().toVar();
+  const minCell = midCell.toVar();
+  const minDist = float(1).toVar();
+  const cell = vec3(0, 0, 0).toVar();
+  const dist = float().toVar();
+  const i = float(0).toVar();
+  Loop(27, () => {
+    const ix = i.mod(3).sub(1);
+    const iy = i.div(3).floor().mod(3).sub(1);
+    const iz = i.div(9).floor().sub(1);
+    cell.assign(midCell.add(vec3(ix, iy, iz)));
+    dist.assign(pos.distance(cellCenter({ cell })).add(mx_noise_float(pos).div(5)));
+    If(dist.lessThan(minDist), () => {
+      minDist.assign(dist);
+      minCell.assign(cell);
+    });
+    i.addAssign(1);
+  });
+  const n = mx_noise_float(minCell.mul(Math.PI)).toVar();
+  const k = mix(minDist, n.add(1).div(2), facet);
+  return k;
+});
+
+export { Dir, TerrainGeometry, TerrainMesh, U32_EMPTY, allocLeafSet, allocSeamTable, beginUpdate, blendAngleCorrectedNormals, buildLeafIndex, buildSeams2to1, compileComputeTask, createComputePipelineTasks, createCubeSphereSurface, createElevationFieldContextTask, createFlatSurface, createInfiniteFlatSurface, createNormalFieldContextTask, createSpatialIndex, createState, createTerrainUniforms, createUniformsTask, deriveNormalZ, elevationFieldStageTask, elevationFn, elevationScale, executeComputeTask, innerTileSegments, instanceIdTask, isSkirtUV, isSkirtVertex, leafGpuBufferTask, leafStorageTask, maxLevel, maxNodes, normalFieldStageTask, origin, positionNodeTask, quadtreeConfigTask, quadtreeUpdate, quadtreeUpdateTask, resetLeafSet, resetSeamTable, rootSize, skirtScale, surface, surfaceTask, terrainGraph, terrainTasks, textureSpaceToVectorSpace, tileNodesTask, update, updateUniformsTask, vElevation, vGlobalVertexIndex, vectorSpaceToTextureSpace, voronoiCells };