@hello-terrain/three 0.0.0-alpha.5 → 0.0.0-alpha.7

package/dist/index.mjs

@@ -1,24 +1,32 @@
-import { BufferGeometry, BufferAttribute, Vector3 as Vector3$1 } from 'three';
-import { MeshStandardNodeMaterial, InstancedMesh, InstancedBufferAttribute, StorageBufferAttribute, Vector3 } from 'three/webgpu';
+import { BufferGeometry, BufferAttribute, RGBAFormat, ClampToEdgeWrapping, HalfFloatType, FloatType, LinearFilter, NearestFilter, Vector3 as Vector3$1 } from 'three';
+import { MeshStandardNodeMaterial, InstancedMesh, InstancedBufferAttribute, StorageTexture, StorageArrayTexture, 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 { uniform, Fn, float, globalId, int, vec2, uint, If, workgroupBarrier, textureStore, uvec3, vec4, ivec2, ivec3, textureLoad, instanceIndex, min, max, pow, vec3, storage, vertexIndex, uv, select, positionLocal, normalLocal, remap, dot, 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) {
     super();
     if (innerSegments < 1 || !Number.isFinite(innerSegments) || !Number.isInteger(innerSegments)) {
-      throw new Error(`Invalid innerSegments: ${innerSegments}. Must be a positive integer.`);
+      throw new Error(
+        `Invalid innerSegments: ${innerSegments}. Must be a positive integer.`
+      );
     }
     try {
       this.setIndex(this.generateIndices(innerSegments));
       this.setAttribute(
         "position",
-        new BufferAttribute(new Float32Array(this.generatePositions(innerSegments)), 3)
+        new BufferAttribute(
+          new Float32Array(this.generatePositions(innerSegments)),
+          3
+        )
       );
       this.setAttribute(
         "normal",
-        new BufferAttribute(new Float32Array(this.generateNormals(innerSegments)), 3)
+        new BufferAttribute(
+          new Float32Array(this.generateNormals(innerSegments)),
+          3
+        )
       );
       this.setAttribute(
         "uv",
@@ -54,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):
    *
@@ -110,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);
@@ -264,42 +274,330 @@ class TerrainMesh extends InstancedMesh {
   }
 }
 
+function getDeviceComputeLimits(renderer) {
+  const backend = renderer.backend;
+  const limits = backend?.device?.limits;
+  return {
+    maxWorkgroupSizeX: limits?.maxComputeWorkgroupSizeX ?? 256,
+    maxWorkgroupSizeY: limits?.maxComputeWorkgroupSizeY ?? 256,
+    maxWorkgroupInvocations: limits?.maxComputeWorkgroupInvocations ?? 256
+  };
+}
+
 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);
+function compileComputePipeline(stages, width, options) {
+  const bindings = options?.bindings;
+  const preferredWorkgroup = options?.workgroupSize ?? [
+    WORKGROUP_X,
+    WORKGROUP_Y
+  ];
+  const preferSingleKernelWhenPossible = options?.preferSingleKernelWhenPossible ?? true;
   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();
+  let singleKernel;
+  const stagedKernelCache = /* @__PURE__ */ new Map();
+  function canRunSingleKernel(widthValue, limits) {
+    return widthValue <= limits.maxWorkgroupSizeX && widthValue <= limits.maxWorkgroupSizeY && widthValue * widthValue <= limits.maxWorkgroupInvocations;
+  }
+  function clampWorkgroupToLimits(requested, limits) {
+    let x = Math.max(1, Math.floor(requested[0]));
+    let y = Math.max(1, Math.floor(requested[1]));
+    x = Math.min(x, limits.maxWorkgroupSizeX);
+    y = Math.min(y, limits.maxWorkgroupSizeY);
+    y = Math.min(
+      y,
+      Math.max(1, Math.floor(limits.maxWorkgroupInvocations / x))
+    );
+    x = Math.min(
+      x,
+      Math.max(1, Math.floor(limits.maxWorkgroupInvocations / y))
+    );
+    return [x, y];
+  }
+  function buildSingleKernel(workgroupSize) {
+    return Fn(() => {
+      bindings?.forEach((b) => b.toVar());
+      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
+          );
+        });
       }
-      If(inBounds, () => {
-        stages[i](nodeIndex, globalIndex, localUVCoords, localCoordinates, texelSize);
-      });
-    }
-  })().computeKernel(workgroupSize);
+    })().computeKernel(workgroupSize);
+  }
+  function buildStagedKernels(workgroupSize) {
+    return stages.map(
+      (stage) => Fn(() => {
+        bindings?.forEach((b) => b.toVar());
+        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();
+        If(inBounds, () => {
+          stage(
+            nodeIndex,
+            globalIndex,
+            localUVCoords,
+            localCoordinates,
+            texelSize
+          );
+        });
+      })().computeKernel(workgroupSize)
+    );
+  }
   function execute(renderer, instanceCount) {
+    const limits = getDeviceComputeLimits(renderer);
+    const canUseSingleKernel = preferSingleKernelWhenPossible && canRunSingleKernel(width, limits);
     uInstanceCount.value = instanceCount;
-    renderer.compute(computeShader, [dispatchX, dispatchY, instanceCount]);
+    if (canUseSingleKernel) {
+      if (!singleKernel) {
+        singleKernel = buildSingleKernel([width, width, 1]);
+      }
+      renderer.compute(singleKernel, [1, 1, instanceCount]);
+      return;
+    }
+    const [workgroupX, workgroupY] = clampWorkgroupToLimits(
+      preferredWorkgroup,
+      limits
+    );
+    const cacheKey = `${workgroupX}x${workgroupY}`;
+    let stagedKernels = stagedKernelCache.get(cacheKey);
+    if (!stagedKernels) {
+      stagedKernels = buildStagedKernels([workgroupX, workgroupY, 1]);
+      stagedKernelCache.set(cacheKey, stagedKernels);
+    }
+    const dispatchX = Math.ceil(width / workgroupX);
+    const dispatchY = Math.ceil(width / workgroupY);
+    for (const kernel of stagedKernels) {
+      renderer.compute(kernel, [dispatchX, dispatchY, instanceCount]);
+    }
   }
   return { execute };
 }
 
+function resolveType(format) {
+  return format === "rgba16float" ? HalfFloatType : FloatType;
+}
+function resolveFilter(mode) {
+  return mode === "linear" ? LinearFilter : NearestFilter;
+}
+function configureStorageTexture(texture, format, filter) {
+  texture.format = RGBAFormat;
+  texture.type = resolveType(format);
+  texture.magFilter = resolveFilter(filter);
+  texture.minFilter = resolveFilter(filter);
+  texture.wrapS = ClampToEdgeWrapping;
+  texture.wrapT = ClampToEdgeWrapping;
+  texture.generateMipmaps = false;
+  texture.needsUpdate = true;
+}
+function ArrayTextureBackend(edgeVertexCount, tileCount, options) {
+  let currentEdgeVertexCount = edgeVertexCount;
+  let currentTileCount = tileCount;
+  const texture = new StorageArrayTexture(
+    edgeVertexCount,
+    edgeVertexCount,
+    tileCount
+  );
+  configureStorageTexture(texture, options.format, options.filter);
+  return {
+    backendType: "array-texture",
+    get edgeVertexCount() {
+      return currentEdgeVertexCount;
+    },
+    get tileCount() {
+      return currentTileCount;
+    },
+    texture,
+    uv(ix, iy, _tileIndex) {
+      return vec2(ix.toFloat(), iy.toFloat());
+    },
+    texel(ix, iy, tileIndex) {
+      return ivec3(ix, iy, tileIndex);
+    },
+    resize(width, height, nextTileCount) {
+      currentEdgeVertexCount = width;
+      currentTileCount = nextTileCount;
+      texture.setSize(width, height, nextTileCount);
+      texture.needsUpdate = true;
+    }
+  };
+}
+function atlasCoord(tilesPerRow, edgeVertexCount, ix, iy, tileIndex) {
+  const tilesPerRowNode = int(tilesPerRow);
+  const edge = int(edgeVertexCount);
+  const tile = int(tileIndex);
+  const col = tile.mod(tilesPerRowNode);
+  const row = tile.div(tilesPerRowNode);
+  const atlasX = col.mul(edge).add(int(ix));
+  const atlasY = row.mul(edge).add(int(iy));
+  return { atlasX, atlasY };
+}
+function AtlasBackend(edgeVertexCount, tileCount, options) {
+  let currentEdgeVertexCount = edgeVertexCount;
+  let currentTileCount = tileCount;
+  let tilesPerRow = Math.max(1, Math.ceil(Math.sqrt(tileCount)));
+  const atlasSize = tilesPerRow * edgeVertexCount;
+  const texture = new StorageTexture(atlasSize, atlasSize);
+  configureStorageTexture(texture, options.format, options.filter);
+  return {
+    backendType: "atlas",
+    get edgeVertexCount() {
+      return currentEdgeVertexCount;
+    },
+    get tileCount() {
+      return currentTileCount;
+    },
+    texture,
+    uv(ix, iy, tileIndex) {
+      const { atlasX, atlasY } = atlasCoord(
+        tilesPerRow,
+        currentEdgeVertexCount,
+        ix,
+        iy,
+        tileIndex
+      );
+      const currentAtlasSize = float(tilesPerRow * currentEdgeVertexCount);
+      return vec2(
+        atlasX.toFloat().add(0.5).div(currentAtlasSize),
+        atlasY.toFloat().add(0.5).div(currentAtlasSize)
+      );
+    },
+    texel(ix, iy, tileIndex) {
+      const { atlasX, atlasY } = atlasCoord(
+        tilesPerRow,
+        currentEdgeVertexCount,
+        ix,
+        iy,
+        tileIndex
+      );
+      return ivec2(atlasX, atlasY);
+    },
+    resize(width, height, nextTileCount) {
+      currentEdgeVertexCount = width;
+      currentTileCount = nextTileCount;
+      tilesPerRow = Math.max(1, Math.ceil(Math.sqrt(nextTileCount)));
+      const nextAtlasSize = tilesPerRow * width;
+      const image = texture.image;
+      image.width = nextAtlasSize;
+      image.height = nextAtlasSize;
+      texture.needsUpdate = true;
+    }
+  };
+}
+function Texture3DBackend(edgeVertexCount, tileCount, options) {
+  let currentEdgeVertexCount = edgeVertexCount;
+  let currentTileCount = tileCount;
+  const texture = new StorageArrayTexture(
+    edgeVertexCount,
+    edgeVertexCount,
+    tileCount
+  );
+  configureStorageTexture(texture, options.format, options.filter);
+  return {
+    backendType: "texture-3d",
+    get edgeVertexCount() {
+      return currentEdgeVertexCount;
+    },
+    get tileCount() {
+      return currentTileCount;
+    },
+    texture,
+    uv(ix, iy, _tileIndex) {
+      return vec2(ix.toFloat(), iy.toFloat());
+    },
+    texel(ix, iy, tileIndex) {
+      return ivec3(ix, iy, tileIndex);
+    },
+    resize(width, height, nextTileCount) {
+      currentEdgeVertexCount = width;
+      currentTileCount = nextTileCount;
+      texture.setSize(width, height, nextTileCount);
+      texture.needsUpdate = true;
+    }
+  };
+}
+function tryGetDeviceLimits(renderer) {
+  const backend = renderer;
+  return backend.backend?.device?.limits ?? {};
+}
+function createTerrainFieldStorage(edgeVertexCount, tileCount, renderer, options = {}) {
+  const filter = options.filter ?? "nearest";
+  const format = options.format ?? "rgba16float";
+  const forcedBackend = options.backend;
+  if (forcedBackend === "atlas") {
+    return AtlasBackend(edgeVertexCount, tileCount, { filter, format });
+  }
+  if (forcedBackend === "texture-3d") {
+    return Texture3DBackend(edgeVertexCount, tileCount, { filter, format });
+  }
+  if (forcedBackend === "array-texture") {
+    return ArrayTextureBackend(edgeVertexCount, tileCount, { filter, format });
+  }
+  const DEFAULT_MAX_TEXTURE_ARRAY_LAYERS = 256;
+  const maxLayers = renderer ? tryGetDeviceLimits(renderer).maxTextureArrayLayers ?? DEFAULT_MAX_TEXTURE_ARRAY_LAYERS : DEFAULT_MAX_TEXTURE_ARRAY_LAYERS;
+  if (tileCount > maxLayers) {
+    return AtlasBackend(edgeVertexCount, tileCount, { filter, format });
+  }
+  return ArrayTextureBackend(edgeVertexCount, tileCount, { filter, format });
+}
+function storeTerrainField(storage, ix, iy, tileIndex, value) {
+  if (storage.backendType === "array-texture" || storage.backendType === "texture-3d") {
+    return textureStore(
+      storage.texture,
+      uvec3(int(ix), int(iy), int(tileIndex)),
+      value
+    );
+  }
+  return textureStore(storage.texture, storage.texel(ix, iy, tileIndex), value);
+}
+function loadTerrainField(storage, ix, iy, tileIndex) {
+  if (storage.backendType === "array-texture" || storage.backendType === "texture-3d") {
+    return textureLoad(storage.texture, ivec2(int(ix), int(iy)), int(0)).depth(
+      int(tileIndex)
+    );
+  }
+  return textureLoad(storage.texture, storage.texel(ix, iy, tileIndex), int(0));
+}
+function loadTerrainFieldElevation(storage, ix, iy, tileIndex) {
+  return loadTerrainField(storage, ix, iy, tileIndex).r;
+}
+function loadTerrainFieldNormal(storage, ix, iy, tileIndex) {
+  const sample = loadTerrainField(storage, ix, iy, tileIndex);
+  return vec2(sample.g, sample.b);
+}
+function packTerrainFieldSample(height, normalXZ, extra = float(0)) {
+  return vec4(height, normalXZ.x, normalXZ.y, extra);
+}
+
 const createElevation = (tile, uniforms, elevationFn) => {
   return function perVertexElevation(nodeIndex, localCoordinates) {
     const ix = int(localCoordinates.x);
@@ -321,7 +619,7 @@ const createElevation = (tile, uniforms, elevationFn) => {
     });
   };
 };
-const readElevationFieldAtPositionLocal = (elevationFieldBuffer, edgeVertexCount, positionLocal) => Fn(() => {
+const readElevationFieldAtPositionLocal = (terrainFieldStorage, edgeVertexCount, positionLocal) => Fn(() => {
   const nodeIndex = int(instanceIndex);
   const intEdge = int(edgeVertexCount);
   const innerSegments = int(edgeVertexCount).sub(3);
@@ -333,10 +631,12 @@ const readElevationFieldAtPositionLocal = (elevationFieldBuffer, edgeVertexCount
   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);
+  return loadTerrainFieldElevation(
+    terrainFieldStorage,
+    xClamped,
+    yClamped,
+    nodeIndex
+  );
 });
 
 function createTileCompute(leafStorage, uniforms) {
@@ -1229,21 +1529,19 @@ const elevationFieldStageTask = task((get, work) => {
   });
 }).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");
+const createTerrainFieldTextureTask = task(
+  (get, work, { resources }) => {
+    const edgeVertexCount = get(innerTileSegments) + 3;
+    const maxNodesValue = get(maxNodes);
+    return work(
+      () => createTerrainFieldStorage(
+        edgeVertexCount,
+        maxNodesValue,
+        resources?.renderer
+      )
+    );
+  }
+).displayName("createTerrainFieldTextureTask");
 function createNormalFromElevationField(elevationFieldNode, edgeVertexCount) {
   return Fn(
     ([nodeIndex, tileSize, ix, iy, elevationScale]) => {
@@ -1268,10 +1566,10 @@ function createNormalFromElevationField(elevationFieldNode, edgeVertexCount) {
     }
   );
 }
-const normalFieldStageTask = task((get, work) => {
+const terrainFieldStageTask = task((get, work) => {
   const upstream = get(elevationFieldStageTask);
   const elevationFieldContext = get(createElevationFieldContextTask);
-  const normalFieldContext = get(createNormalFieldContextTask);
+  const terrainFieldStorage = get(createTerrainFieldTextureTask);
   const tileEdgeVertexCount = get(innerTileSegments) + 3;
   const tile = get(tileNodesTask);
   const uniforms = get(createUniformsTask);
@@ -1286,6 +1584,7 @@ const normalFieldStageTask = task((get, work) => {
         const ix = int(localCoordinates.x);
         const iy = int(localCoordinates.y);
         const tileSize = tile.tileSize(nodeIndex);
+        const height = elevationFieldContext.node.element(globalVertexIndex);
         const normalXZ = computeNormal(
           nodeIndex,
           tileSize,
@@ -1293,58 +1592,60 @@ const normalFieldStageTask = task((get, work) => {
           iy,
           uniforms.uElevationScale
         );
-        normalFieldContext.node.element(globalVertexIndex).assign(packHalf2x16(normalXZ));
+        storeTerrainField(
+          terrainFieldStorage,
+          ix,
+          iy,
+          nodeIndex,
+          packTerrainFieldSample(height, normalXZ)
+        );
       }
     ];
   });
-}).displayName("normalFieldStageTask");
+}).displayName("terrainFieldStageTask");
 
 const compileComputeTask = task((get, work) => {
-  const pipeline = get(normalFieldStageTask);
+  const pipeline = get(terrainFieldStageTask);
   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) : () => {
-    }
+    () => compileComputePipeline(pipeline, edgeVertexCount, {
+      preferSingleKernelWhenPossible: false
+    })
   );
-}).displayName("executeComputeTask").lane("gpu");
+}).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));
+    return work(
+      () => compileComputePipeline(pipeline, edgeVertexCount, {
+        preferSingleKernelWhenPossible: false
+      })
+    );
   }).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");
+  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);
@@ -1386,37 +1687,40 @@ function createTileBaseWorldPosition(leafStorage, terrainUniforms) {
     return vec3(worldX, rootOrigin.y, worldZ);
   });
 }
-function createTileElevation(terrainUniforms, elevationFieldBufferNode) {
-  if (!elevationFieldBufferNode) return float(0);
+function createTileElevation(terrainUniforms, terrainFieldStorage) {
+  if (!terrainFieldStorage) return float(0);
   const edgeVertexCount = terrainUniforms.uInnerTileSegments.add(3);
   return readElevationFieldAtPositionLocal(
-    elevationFieldBufferNode,
+    terrainFieldStorage,
     edgeVertexCount,
     positionLocal
   )().mul(
     terrainUniforms.uElevationScale
   );
 }
-function createNormalAssignment(terrainUniforms, normalFieldBufferNode) {
-  if (!normalFieldBufferNode) return;
+function createNormalAssignment(terrainUniforms, terrainFieldStorage) {
+  if (!terrainFieldStorage) 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));
+  const edgeVertexCount = int(terrainUniforms.uInnerTileSegments.add(3));
+  const localVertexIndex = int(vertexIndex);
+  const ix = localVertexIndex.mod(edgeVertexCount);
+  const iy = localVertexIndex.div(edgeVertexCount);
+  const normalXZ = loadTerrainFieldNormal(terrainFieldStorage, ix, iy, nodeIndex);
+  const nx = normalXZ.x;
+  const nz = normalXZ.y;
+  const nySq = float(1).sub(nx.mul(nx)).sub(nz.mul(nz)).max(float(0));
+  const ny = nySq.sqrt();
+  normalLocal.assign(vec3(nx, ny, nz));
 }
-function createTileWorldPosition(leafStorage, terrainUniforms, elevationFieldBufferNode, normalFieldBufferNode) {
+function createTileWorldPosition(leafStorage, terrainUniforms, terrainFieldStorage) {
   const baseWorldPosition = createTileBaseWorldPosition(leafStorage, terrainUniforms);
   return Fn(() => {
     const base = baseWorldPosition();
-    const yElevation = createTileElevation(terrainUniforms, elevationFieldBufferNode);
+    const yElevation = createTileElevation(terrainUniforms, terrainFieldStorage);
     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);
+    createNormalAssignment(terrainUniforms, terrainFieldStorage);
     return vec3(base.x, worldY, base.z);
   })();
 }
@@ -1424,20 +1728,18 @@ function createTileWorldPosition(leafStorage, terrainUniforms, elevationFieldBuf
 const positionNodeTask = task((get, work) => {
   const leafStorage = get(leafStorageTask);
   const terrainUniforms = get(createUniformsTask);
-  const elevationFieldContext = get(createElevationFieldContextTask);
-  const normalFieldContext = get(createNormalFieldContextTask);
+  const terrainFieldStorage = get(createTerrainFieldTextureTask);
   return work(
     () => createTileWorldPosition(
       leafStorage,
       terrainUniforms,
-      elevationFieldContext.node,
-      normalFieldContext.node
+      terrainFieldStorage
     )
   );
 }).displayName("positionNodeTask");
 
 function terrainGraph() {
-  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);
+  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(createTerrainFieldTextureTask).add(elevationFieldStageTask).add(terrainFieldStageTask).add(compileComputeTask).add(executeComputeTask);
 }
 const terrainTasks = {
   instanceId: instanceIdTask,
@@ -1451,13 +1753,31 @@ const terrainTasks = {
   positionNode: positionNodeTask,
   createElevationFieldContext: createElevationFieldContextTask,
   createTileNodes: tileNodesTask,
-  createNormalFieldContext: createNormalFieldContextTask,
+  createTerrainFieldTexture: createTerrainFieldTextureTask,
   elevationFieldStage: elevationFieldStageTask,
-  normalFieldStage: normalFieldStageTask,
+  terrainFieldStage: terrainFieldStageTask,
   compileCompute: compileComputeTask,
   executeCompute: executeComputeTask
 };
 
+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 vGlobalVertexIndex = /* @__PURE__ */ varyingProperty("int", "vGlobalVertexIndex");
 const vElevation = /* @__PURE__ */ varyingProperty("f32", "vElevation");
 
@@ -1492,4 +1812,4 @@ const voronoiCells = Fn((params) => {
   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 };
+export { ArrayTextureBackend, AtlasBackend, Dir, TerrainGeometry, TerrainMesh, Texture3DBackend, U32_EMPTY, allocLeafSet, allocSeamTable, beginUpdate, blendAngleCorrectedNormals, buildLeafIndex, buildSeams2to1, compileComputeTask, createComputePipelineTasks, createCubeSphereSurface, createElevationFieldContextTask, createFlatSurface, createInfiniteFlatSurface, createSpatialIndex, createState, createTerrainFieldStorage, createTerrainFieldTextureTask, createTerrainUniforms, createUniformsTask, deriveNormalZ, elevationFieldStageTask, elevationFn, elevationScale, executeComputeTask, getDeviceComputeLimits, innerTileSegments, instanceIdTask, isSkirtUV, isSkirtVertex, leafGpuBufferTask, leafStorageTask, loadTerrainField, loadTerrainFieldElevation, loadTerrainFieldNormal, maxLevel, maxNodes, origin, packTerrainFieldSample, positionNodeTask, quadtreeConfigTask, quadtreeUpdate, quadtreeUpdateTask, resetLeafSet, resetSeamTable, rootSize, skirtScale, storeTerrainField, surface, surfaceTask, terrainFieldStageTask, terrainGraph, terrainTasks, textureSpaceToVectorSpace, tileNodesTask, update, updateUniformsTask, vElevation, vGlobalVertexIndex, vectorSpaceToTextureSpace, voronoiCells };