@hello-terrain/react 0.0.0-alpha.10 → 0.0.0-alpha.11

package/dist/index.cjs

@@ -21,10 +21,13 @@ function useTerrainContext() {
 
 function createSyncTerrainRuntimeTask(runtime) {
   return work.task((get, work) => {
-    const query = get(three.terrainTasks.terrainQuery).query;
+    const queryContext = get(three.terrainTasks.terrainQuery);
+    const query = queryContext.query;
+    const sphereQuery = queryContext.sphereQuery;
     const raycast = get(three.terrainTasks.terrainRaycast);
     return work(() => {
       runtime.query = query;
+      runtime.sphereQuery = sphereQuery;
       runtime.raycast = raycast;
       return runtime;
     });
@@ -73,8 +76,9 @@ function useTerrainParams(graph, options) {
     innerTileSegments: nextInnerTileSegments,
     skirtScale: nextSkirtScale,
     elevationScale: nextElevationScale,
+    radius: nextRadius,
     elevation,
-    surface: nextSurface,
+    topology: nextTopology,
     terrainFieldFilter: nextTerrainFieldFilter
   } = options;
   react.useLayoutEffect(() => {
@@ -132,9 +136,16 @@ function useTerrainParams(graph, options) {
     resetOrSet(
       graph,
       ownedParamIds,
-      three.surface,
-      nextSurface,
-      () => nextSurface
+      three.radius,
+      nextRadius,
+      () => nextRadius
+    );
+    resetOrSet(
+      graph,
+      ownedParamIds,
+      three.topology,
+      nextTopology,
+      () => nextTopology
     );
     resetOrSet(
       graph,
@@ -161,8 +172,9 @@ function useTerrainParams(graph, options) {
     nextInnerTileSegments,
     nextSkirtScale,
     nextElevationScale,
+    nextRadius,
     elevation,
-    nextSurface,
+    nextTopology,
     nextTerrainFieldFilter
   ]);
 }
@@ -316,6 +328,7 @@ function useTerrain(options = {}) {
   const runtime = react.useMemo(
     () => ({
       query: null,
+      sphereQuery: null,
       raycast: null
     }),
     []
@@ -328,44 +341,27 @@ function useTerrain(options = {}) {
   const [terrainNodes, setTerrainNodes] = react.useState(terrainNodesRef.current);
   const readyRef = react.useRef(false);
   const [ready, setReady] = react.useState(false);
-  const emitTerrainNodes = react.useCallback(
-    (nextTerrainNodes) => {
-      if (!isMountedRef.current) return;
-      setTerrainNodes((prevTerrainNodes) => {
-        if (prevTerrainNodes.positionNode === nextTerrainNodes.positionNode) {
-          terrainNodesRef.current = prevTerrainNodes;
-          return prevTerrainNodes;
-        }
-        terrainNodesRef.current = nextTerrainNodes;
-        return nextTerrainNodes;
-      });
-    },
-    []
-  );
-  const getTerrainNodes = react.useCallback(
-    () => terrainNodesRef.current,
-    []
-  );
+  const emitTerrainNodes = react.useCallback((nextTerrainNodes) => {
+    if (!isMountedRef.current) return;
+    setTerrainNodes((prevTerrainNodes) => {
+      if (prevTerrainNodes.positionNode === nextTerrainNodes.positionNode) {
+        terrainNodesRef.current = prevTerrainNodes;
+        return prevTerrainNodes;
+      }
+      terrainNodesRef.current = nextTerrainNodes;
+      return nextTerrainNodes;
+    });
+  }, []);
+  const getTerrainNodes = react.useCallback(() => terrainNodesRef.current, []);
   const emitReady = react.useCallback((nextReady) => {
     if (!isMountedRef.current) return;
     readyRef.current = nextReady;
     setReady((prevReady) => prevReady === nextReady ? prevReady : nextReady);
   }, []);
-  const getReady = react.useCallback(
-    () => readyRef.current,
-    []
-  );
-  const syncTerrainRuntimeTask = react.useMemo(
-    () => createSyncTerrainRuntimeTask(runtime),
-    [runtime]
-  );
+  const getReady = react.useCallback(() => readyRef.current, []);
+  const syncTerrainRuntimeTask = react.useMemo(() => createSyncTerrainRuntimeTask(runtime), [runtime]);
   const syncTerrainNodesTask = react.useMemo(
-    () => createSyncTerrainNodesTask(
-      getTerrainNodes,
-      emitTerrainNodes,
-      getReady,
-      emitReady
-    ),
+    () => createSyncTerrainNodesTask(getTerrainNodes, emitTerrainNodes, getReady, emitReady),
     [emitReady, emitTerrainNodes, getReady, getTerrainNodes]
   );
   const graph = react.useMemo(() => {
@@ -377,19 +373,17 @@ function useTerrain(options = {}) {
     nextGraph.add(syncTerrainNodesTask);
     return nextGraph;
   }, [options.tasks, syncTerrainNodesTask, syncTerrainRuntimeTask]);
-  const runnerTargets = react.useMemo(
-    () => {
-      const userTasks = options.tasks ?? [];
-      return [
-        ...userTasks,
-        three.terrainTasks.executeCompute,
-        three.terrainTasks.terrainReadback,
-        syncTerrainRuntimeTask,
-        syncTerrainNodesTask
-      ];
-    },
-    [options.tasks, syncTerrainNodesTask, syncTerrainRuntimeTask]
-  );
+  const runnerTargets = react.useMemo(() => {
+    const userTasks = options.tasks ?? [];
+    return [
+      ...userTasks,
+      three.terrainTasks.executeCompute,
+      three.terrainTasks.terrainReadback,
+      three.terrainTasks.gpuSpatialIndexUpload,
+      syncTerrainRuntimeTask,
+      syncTerrainNodesTask
+    ];
+  }, [options.tasks, syncTerrainNodesTask, syncTerrainRuntimeTask]);
   const stopTerrainRunner = useTerrainRunner({
     graph,
     targets: runnerTargets,
@@ -423,31 +417,34 @@ function useTerrain(options = {}) {
     setReady(false);
   }, [graph, runtime]);
   useTerrainParams(graph, options);
+  const topology = options.topology ?? null;
   return react.useMemo(
     () => ({
       graph,
       tasks: three.terrainTasks,
       runtime,
       ready,
+      topology,
       ...terrainNodes
     }),
-    [graph, ready, runtime, terrainNodes]
+    [graph, ready, runtime, topology, terrainNodes]
   );
 }
 
-function useTerrainMesh(innerTileSegments, maxNodes) {
+function useTerrainMesh(innerTileSegments, maxNodes, flipWinding) {
   const [mesh] = react.useState(
     () => new three.TerrainMesh({
-      innerTileSegments: innerTileSegments ?? 13,
-      maxNodes: maxNodes ?? 1024
+      ...innerTileSegments !== void 0 ? { innerTileSegments } : {},
+      maxNodes: maxNodes ?? 1024,
+      flipWinding
     })
   );
-  react.useEffect(() => {
-    mesh.innerTileSegments = innerTileSegments ?? 13;
-  }, [mesh, innerTileSegments]);
   react.useEffect(() => {
     mesh.maxNodes = maxNodes ?? 1024;
   }, [mesh, maxNodes]);
+  react.useEffect(() => {
+    mesh.flipWinding = flipWinding;
+  }, [mesh, flipWinding]);
   react.useEffect(() => {
     return () => {
       mesh.geometry.dispose();
@@ -461,6 +458,13 @@ function syncTerrainMesh(mesh, terrain) {
     mesh.count = leaves.count;
     mesh.instanceMatrix.needsUpdate = true;
   }
+  const uniforms = terrain.graph.peek(three.terrainTasks.updateUniforms);
+  if (uniforms) {
+    const segments = uniforms.uInnerTileSegments.value;
+    if (typeof segments === "number") {
+      mesh.innerTileSegments = segments;
+    }
+  }
   const raycast = terrain.runtime.raycast;
   if (mesh.terrainRaycast !== raycast) {
     mesh.terrainRaycast = raycast;
@@ -481,25 +485,18 @@ function TerrainWithHandle({
   maxNodes,
   ...primitiveProps
 }) {
-  const mesh = useTerrainMesh(innerTileSegments, maxNodes);
+  const flipWinding = (terrain.topology?.projection ?? "flat") === "cubeSphere";
+  const mesh = useTerrainMesh(innerTileSegments, maxNodes, flipWinding);
   const { visible: primitiveVisible = true, ...restPrimitiveProps } = primitiveProps;
   fiber.useFrame(() => {
     syncTerrainMesh(mesh, terrain);
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(TerrainProvider, { value: terrain, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "primitive",
-    {
-      object: mesh,
-      visible: terrain.ready && primitiveVisible,
-      ...restPrimitiveProps,
-      children: terrain.ready ? attachTerrainMaterial(
-        children({
-          positionNode: terrain.positionNode
-        }),
-        terrain
-      ) : null
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(TerrainProvider, { value: terrain, children: /* @__PURE__ */ jsxRuntime.jsx("primitive", { object: mesh, visible: terrain.ready && primitiveVisible, ...restPrimitiveProps, children: terrain.ready ? attachTerrainMaterial(
+    children({
+      positionNode: terrain.positionNode
+    }),
+    terrain
+  ) : null }) });
 }
 function InternalTerrain(props) {
   const {
@@ -510,8 +507,9 @@ function InternalTerrain(props) {
     innerTileSegments,
     skirtScale,
     elevationScale,
+    radius,
     elevation,
-    surface,
+    topology,
     terrainFieldFilter,
     getCameraOrigin,
     cameraHysteresis,
@@ -526,8 +524,9 @@ function InternalTerrain(props) {
     innerTileSegments,
     skirtScale,
     elevationScale,
+    radius,
     elevation,
-    surface,
+    topology,
     terrainFieldFilter,
     getCameraOrigin,
     cameraHysteresis,
@@ -554,8 +553,9 @@ function Terrain({
   innerTileSegments,
   skirtScale,
   elevationScale,
+  radius,
   elevation,
-  surface,
+  topology,
   terrainFieldFilter,
   getCameraOrigin,
   cameraHysteresis,
@@ -584,8 +584,9 @@ function Terrain({
       innerTileSegments,
       skirtScale,
       elevationScale,
+      radius,
       elevation,
-      surface,
+      topology,
       terrainFieldFilter,
       getCameraOrigin,
       cameraHysteresis,

package/dist/index.d.cts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ElevationCallback, Surface, TerrainGraph, TerrainTasks, TerrainQuery, TerrainRaycast } from '@hello-terrain/three';
+import { ElevationCallback, Topology, TerrainGraph, TerrainTasks, TerrainQuery, TerrainSphereQuery, TerrainRaycast } from '@hello-terrain/three';
+export { TerrainQuery, TerrainRaycast, TerrainRaycastResult, TerrainSample, TerrainSphereQuery, TerrainSurfaceSample, TerrainSurfaceSampleBatch, TerrainTile } from '@hello-terrain/three';
 import { Task } from '@hello-terrain/work';
 import { ThreeElements, RootState } from '@react-three/fiber';
 import { ReactNode } from 'react';
-import { WebGPURenderer } from 'three/webgpu';
 import { ShaderCallNodeInternal } from 'three/src/nodes/TSL.js';
+import { WebGPURenderer } from 'three/webgpu';
 
 type TerrainVector3Like = {
     x: number;
@@ -19,6 +20,8 @@ interface TerrainNodes {
 }
 interface TerrainRuntime {
     query: TerrainQuery | null;
+    /** Cube-sphere query; `null` unless the topology uses the cubeSphere projection. */
+    sphereQuery: TerrainSphereQuery | null;
     raycast: TerrainRaycast | null;
 }
 interface TerrainHandle extends TerrainNodes {
@@ -26,6 +29,7 @@ interface TerrainHandle extends TerrainNodes {
     tasks: TerrainTasks;
     runtime: TerrainRuntime;
     ready: boolean;
+    topology?: Topology | null;
 }
 interface TerrainOptions {
     rootSize?: number;
@@ -35,8 +39,9 @@ interface TerrainOptions {
     innerTileSegments?: number;
     skirtScale?: number;
     elevationScale?: number;
+    radius?: number;
     elevation?: ElevationCallback;
-    surface?: Surface | null;
+    topology?: Topology | null;
     terrainFieldFilter?: "nearest" | "linear";
     getCameraOrigin?: (state: RootState) => TerrainVector3Like;
     cameraHysteresis?: number;
@@ -48,7 +53,7 @@ interface TerrainProps extends TerrainPrimitiveProps, TerrainOptions {
     children: (nodes: TerrainNodes) => ReactNode;
 }
 
-declare function Terrain({ terrain: providedTerrain, children, rootSize, origin, maxLevel, innerTileSegments, skirtScale, elevationScale, elevation, surface, terrainFieldFilter, getCameraOrigin, cameraHysteresis, tasks, maxNodes, ...primitiveProps }: TerrainProps): react_jsx_runtime.JSX.Element;
+declare function Terrain({ terrain: providedTerrain, children, rootSize, origin, maxLevel, innerTileSegments, skirtScale, elevationScale, radius, elevation, topology, terrainFieldFilter, getCameraOrigin, cameraHysteresis, tasks, maxNodes, ...primitiveProps }: TerrainProps): react_jsx_runtime.JSX.Element;
 
 interface TerrainProviderProps {
     value: TerrainHandle;

package/dist/index.d.mts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ElevationCallback, Surface, TerrainGraph, TerrainTasks, TerrainQuery, TerrainRaycast } from '@hello-terrain/three';
+import { ElevationCallback, Topology, TerrainGraph, TerrainTasks, TerrainQuery, TerrainSphereQuery, TerrainRaycast } from '@hello-terrain/three';
+export { TerrainQuery, TerrainRaycast, TerrainRaycastResult, TerrainSample, TerrainSphereQuery, TerrainSurfaceSample, TerrainSurfaceSampleBatch, TerrainTile } from '@hello-terrain/three';
 import { Task } from '@hello-terrain/work';
 import { ThreeElements, RootState } from '@react-three/fiber';
 import { ReactNode } from 'react';
-import { WebGPURenderer } from 'three/webgpu';
 import { ShaderCallNodeInternal } from 'three/src/nodes/TSL.js';
+import { WebGPURenderer } from 'three/webgpu';
 
 type TerrainVector3Like = {
     x: number;
@@ -19,6 +20,8 @@ interface TerrainNodes {
 }
 interface TerrainRuntime {
     query: TerrainQuery | null;
+    /** Cube-sphere query; `null` unless the topology uses the cubeSphere projection. */
+    sphereQuery: TerrainSphereQuery | null;
     raycast: TerrainRaycast | null;
 }
 interface TerrainHandle extends TerrainNodes {
@@ -26,6 +29,7 @@ interface TerrainHandle extends TerrainNodes {
     tasks: TerrainTasks;
     runtime: TerrainRuntime;
     ready: boolean;
+    topology?: Topology | null;
 }
 interface TerrainOptions {
     rootSize?: number;
@@ -35,8 +39,9 @@ interface TerrainOptions {
     innerTileSegments?: number;
     skirtScale?: number;
     elevationScale?: number;
+    radius?: number;
     elevation?: ElevationCallback;
-    surface?: Surface | null;
+    topology?: Topology | null;
     terrainFieldFilter?: "nearest" | "linear";
     getCameraOrigin?: (state: RootState) => TerrainVector3Like;
     cameraHysteresis?: number;
@@ -48,7 +53,7 @@ interface TerrainProps extends TerrainPrimitiveProps, TerrainOptions {
     children: (nodes: TerrainNodes) => ReactNode;
 }
 
-declare function Terrain({ terrain: providedTerrain, children, rootSize, origin, maxLevel, innerTileSegments, skirtScale, elevationScale, elevation, surface, terrainFieldFilter, getCameraOrigin, cameraHysteresis, tasks, maxNodes, ...primitiveProps }: TerrainProps): react_jsx_runtime.JSX.Element;
+declare function Terrain({ terrain: providedTerrain, children, rootSize, origin, maxLevel, innerTileSegments, skirtScale, elevationScale, radius, elevation, topology, terrainFieldFilter, getCameraOrigin, cameraHysteresis, tasks, maxNodes, ...primitiveProps }: TerrainProps): react_jsx_runtime.JSX.Element;
 
 interface TerrainProviderProps {
     value: TerrainHandle;

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ElevationCallback, Surface, TerrainGraph, TerrainTasks, TerrainQuery, TerrainRaycast } from '@hello-terrain/three';
+import { ElevationCallback, Topology, TerrainGraph, TerrainTasks, TerrainQuery, TerrainSphereQuery, TerrainRaycast } from '@hello-terrain/three';
+export { TerrainQuery, TerrainRaycast, TerrainRaycastResult, TerrainSample, TerrainSphereQuery, TerrainSurfaceSample, TerrainSurfaceSampleBatch, TerrainTile } from '@hello-terrain/three';
 import { Task } from '@hello-terrain/work';
 import { ThreeElements, RootState } from '@react-three/fiber';
 import { ReactNode } from 'react';
-import { WebGPURenderer } from 'three/webgpu';
 import { ShaderCallNodeInternal } from 'three/src/nodes/TSL.js';
+import { WebGPURenderer } from 'three/webgpu';
 
 type TerrainVector3Like = {
     x: number;
@@ -19,6 +20,8 @@ interface TerrainNodes {
 }
 interface TerrainRuntime {
     query: TerrainQuery | null;
+    /** Cube-sphere query; `null` unless the topology uses the cubeSphere projection. */
+    sphereQuery: TerrainSphereQuery | null;
     raycast: TerrainRaycast | null;
 }
 interface TerrainHandle extends TerrainNodes {
@@ -26,6 +29,7 @@ interface TerrainHandle extends TerrainNodes {
     tasks: TerrainTasks;
     runtime: TerrainRuntime;
     ready: boolean;
+    topology?: Topology | null;
 }
 interface TerrainOptions {
     rootSize?: number;
@@ -35,8 +39,9 @@ interface TerrainOptions {
     innerTileSegments?: number;
     skirtScale?: number;
     elevationScale?: number;
+    radius?: number;
     elevation?: ElevationCallback;
-    surface?: Surface | null;
+    topology?: Topology | null;
     terrainFieldFilter?: "nearest" | "linear";
     getCameraOrigin?: (state: RootState) => TerrainVector3Like;
     cameraHysteresis?: number;
@@ -48,7 +53,7 @@ interface TerrainProps extends TerrainPrimitiveProps, TerrainOptions {
     children: (nodes: TerrainNodes) => ReactNode;
 }
 
-declare function Terrain({ terrain: providedTerrain, children, rootSize, origin, maxLevel, innerTileSegments, skirtScale, elevationScale, elevation, surface, terrainFieldFilter, getCameraOrigin, cameraHysteresis, tasks, maxNodes, ...primitiveProps }: TerrainProps): react_jsx_runtime.JSX.Element;
+declare function Terrain({ terrain: providedTerrain, children, rootSize, origin, maxLevel, innerTileSegments, skirtScale, elevationScale, radius, elevation, topology, terrainFieldFilter, getCameraOrigin, cameraHysteresis, tasks, maxNodes, ...primitiveProps }: TerrainProps): react_jsx_runtime.JSX.Element;
 
 interface TerrainProviderProps {
     value: TerrainHandle;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { terrainTasks, elevationFn, rootSize, origin, maxLevel, maxNodes, innerTileSegments, skirtScale, elevationScale, surface, terrainFieldFilter, quadtreeUpdate, terrainGraph, TerrainMesh } from '@hello-terrain/three';
+import { terrainTasks, elevationFn, rootSize, origin, maxLevel, maxNodes, innerTileSegments, skirtScale, elevationScale, radius, topology, terrainFieldFilter, quadtreeUpdate, terrainGraph, TerrainMesh } from '@hello-terrain/three';
 import { useFrame } from '@react-three/fiber';
 import { createContext, useContext, useRef, useLayoutEffect, useCallback, useMemo, useState, useEffect, isValidElement, cloneElement } from 'react';
 import { task } from '@hello-terrain/work';
@@ -19,10 +19,13 @@ function useTerrainContext() {
 
 function createSyncTerrainRuntimeTask(runtime) {
   return task((get, work) => {
-    const query = get(terrainTasks.terrainQuery).query;
+    const queryContext = get(terrainTasks.terrainQuery);
+    const query = queryContext.query;
+    const sphereQuery = queryContext.sphereQuery;
     const raycast = get(terrainTasks.terrainRaycast);
     return work(() => {
       runtime.query = query;
+      runtime.sphereQuery = sphereQuery;
       runtime.raycast = raycast;
       return runtime;
     });
@@ -71,8 +74,9 @@ function useTerrainParams(graph, options) {
     innerTileSegments: nextInnerTileSegments,
     skirtScale: nextSkirtScale,
     elevationScale: nextElevationScale,
+    radius: nextRadius,
     elevation,
-    surface: nextSurface,
+    topology: nextTopology,
     terrainFieldFilter: nextTerrainFieldFilter
   } = options;
   useLayoutEffect(() => {
@@ -130,9 +134,16 @@ function useTerrainParams(graph, options) {
     resetOrSet(
       graph,
       ownedParamIds,
-      surface,
-      nextSurface,
-      () => nextSurface
+      radius,
+      nextRadius,
+      () => nextRadius
+    );
+    resetOrSet(
+      graph,
+      ownedParamIds,
+      topology,
+      nextTopology,
+      () => nextTopology
     );
     resetOrSet(
       graph,
@@ -159,8 +170,9 @@ function useTerrainParams(graph, options) {
     nextInnerTileSegments,
     nextSkirtScale,
     nextElevationScale,
+    nextRadius,
     elevation,
-    nextSurface,
+    nextTopology,
     nextTerrainFieldFilter
   ]);
 }
@@ -314,6 +326,7 @@ function useTerrain(options = {}) {
   const runtime = useMemo(
     () => ({
       query: null,
+      sphereQuery: null,
       raycast: null
     }),
     []
@@ -326,44 +339,27 @@ function useTerrain(options = {}) {
   const [terrainNodes, setTerrainNodes] = useState(terrainNodesRef.current);
   const readyRef = useRef(false);
   const [ready, setReady] = useState(false);
-  const emitTerrainNodes = useCallback(
-    (nextTerrainNodes) => {
-      if (!isMountedRef.current) return;
-      setTerrainNodes((prevTerrainNodes) => {
-        if (prevTerrainNodes.positionNode === nextTerrainNodes.positionNode) {
-          terrainNodesRef.current = prevTerrainNodes;
-          return prevTerrainNodes;
-        }
-        terrainNodesRef.current = nextTerrainNodes;
-        return nextTerrainNodes;
-      });
-    },
-    []
-  );
-  const getTerrainNodes = useCallback(
-    () => terrainNodesRef.current,
-    []
-  );
+  const emitTerrainNodes = useCallback((nextTerrainNodes) => {
+    if (!isMountedRef.current) return;
+    setTerrainNodes((prevTerrainNodes) => {
+      if (prevTerrainNodes.positionNode === nextTerrainNodes.positionNode) {
+        terrainNodesRef.current = prevTerrainNodes;
+        return prevTerrainNodes;
+      }
+      terrainNodesRef.current = nextTerrainNodes;
+      return nextTerrainNodes;
+    });
+  }, []);
+  const getTerrainNodes = useCallback(() => terrainNodesRef.current, []);
   const emitReady = useCallback((nextReady) => {
     if (!isMountedRef.current) return;
     readyRef.current = nextReady;
     setReady((prevReady) => prevReady === nextReady ? prevReady : nextReady);
   }, []);
-  const getReady = useCallback(
-    () => readyRef.current,
-    []
-  );
-  const syncTerrainRuntimeTask = useMemo(
-    () => createSyncTerrainRuntimeTask(runtime),
-    [runtime]
-  );
+  const getReady = useCallback(() => readyRef.current, []);
+  const syncTerrainRuntimeTask = useMemo(() => createSyncTerrainRuntimeTask(runtime), [runtime]);
   const syncTerrainNodesTask = useMemo(
-    () => createSyncTerrainNodesTask(
-      getTerrainNodes,
-      emitTerrainNodes,
-      getReady,
-      emitReady
-    ),
+    () => createSyncTerrainNodesTask(getTerrainNodes, emitTerrainNodes, getReady, emitReady),
     [emitReady, emitTerrainNodes, getReady, getTerrainNodes]
   );
   const graph = useMemo(() => {
@@ -375,19 +371,17 @@ function useTerrain(options = {}) {
     nextGraph.add(syncTerrainNodesTask);
     return nextGraph;
   }, [options.tasks, syncTerrainNodesTask, syncTerrainRuntimeTask]);
-  const runnerTargets = useMemo(
-    () => {
-      const userTasks = options.tasks ?? [];
-      return [
-        ...userTasks,
-        terrainTasks.executeCompute,
-        terrainTasks.terrainReadback,
-        syncTerrainRuntimeTask,
-        syncTerrainNodesTask
-      ];
-    },
-    [options.tasks, syncTerrainNodesTask, syncTerrainRuntimeTask]
-  );
+  const runnerTargets = useMemo(() => {
+    const userTasks = options.tasks ?? [];
+    return [
+      ...userTasks,
+      terrainTasks.executeCompute,
+      terrainTasks.terrainReadback,
+      terrainTasks.gpuSpatialIndexUpload,
+      syncTerrainRuntimeTask,
+      syncTerrainNodesTask
+    ];
+  }, [options.tasks, syncTerrainNodesTask, syncTerrainRuntimeTask]);
   const stopTerrainRunner = useTerrainRunner({
     graph,
     targets: runnerTargets,
@@ -421,31 +415,34 @@ function useTerrain(options = {}) {
     setReady(false);
   }, [graph, runtime]);
   useTerrainParams(graph, options);
+  const topology = options.topology ?? null;
   return useMemo(
     () => ({
       graph,
       tasks: terrainTasks,
       runtime,
       ready,
+      topology,
       ...terrainNodes
     }),
-    [graph, ready, runtime, terrainNodes]
+    [graph, ready, runtime, topology, terrainNodes]
   );
 }
 
-function useTerrainMesh(innerTileSegments, maxNodes) {
+function useTerrainMesh(innerTileSegments, maxNodes, flipWinding) {
   const [mesh] = useState(
     () => new TerrainMesh({
-      innerTileSegments: innerTileSegments ?? 13,
-      maxNodes: maxNodes ?? 1024
+      ...innerTileSegments !== void 0 ? { innerTileSegments } : {},
+      maxNodes: maxNodes ?? 1024,
+      flipWinding
     })
   );
-  useEffect(() => {
-    mesh.innerTileSegments = innerTileSegments ?? 13;
-  }, [mesh, innerTileSegments]);
   useEffect(() => {
     mesh.maxNodes = maxNodes ?? 1024;
   }, [mesh, maxNodes]);
+  useEffect(() => {
+    mesh.flipWinding = flipWinding;
+  }, [mesh, flipWinding]);
   useEffect(() => {
     return () => {
       mesh.geometry.dispose();
@@ -459,6 +456,13 @@ function syncTerrainMesh(mesh, terrain) {
     mesh.count = leaves.count;
     mesh.instanceMatrix.needsUpdate = true;
   }
+  const uniforms = terrain.graph.peek(terrainTasks.updateUniforms);
+  if (uniforms) {
+    const segments = uniforms.uInnerTileSegments.value;
+    if (typeof segments === "number") {
+      mesh.innerTileSegments = segments;
+    }
+  }
   const raycast = terrain.runtime.raycast;
   if (mesh.terrainRaycast !== raycast) {
     mesh.terrainRaycast = raycast;
@@ -479,25 +483,18 @@ function TerrainWithHandle({
   maxNodes,
   ...primitiveProps
 }) {
-  const mesh = useTerrainMesh(innerTileSegments, maxNodes);
+  const flipWinding = (terrain.topology?.projection ?? "flat") === "cubeSphere";
+  const mesh = useTerrainMesh(innerTileSegments, maxNodes, flipWinding);
   const { visible: primitiveVisible = true, ...restPrimitiveProps } = primitiveProps;
   useFrame(() => {
     syncTerrainMesh(mesh, terrain);
   });
-  return /* @__PURE__ */ jsx(TerrainProvider, { value: terrain, children: /* @__PURE__ */ jsx(
-    "primitive",
-    {
-      object: mesh,
-      visible: terrain.ready && primitiveVisible,
-      ...restPrimitiveProps,
-      children: terrain.ready ? attachTerrainMaterial(
-        children({
-          positionNode: terrain.positionNode
-        }),
-        terrain
-      ) : null
-    }
-  ) });
+  return /* @__PURE__ */ jsx(TerrainProvider, { value: terrain, children: /* @__PURE__ */ jsx("primitive", { object: mesh, visible: terrain.ready && primitiveVisible, ...restPrimitiveProps, children: terrain.ready ? attachTerrainMaterial(
+    children({
+      positionNode: terrain.positionNode
+    }),
+    terrain
+  ) : null }) });
 }
 function InternalTerrain(props) {
   const {
@@ -508,8 +505,9 @@ function InternalTerrain(props) {
     innerTileSegments,
     skirtScale,
     elevationScale,
+    radius,
     elevation,
-    surface,
+    topology,
     terrainFieldFilter,
     getCameraOrigin,
     cameraHysteresis,
@@ -524,8 +522,9 @@ function InternalTerrain(props) {
     innerTileSegments,
     skirtScale,
     elevationScale,
+    radius,
     elevation,
-    surface,
+    topology,
     terrainFieldFilter,
     getCameraOrigin,
     cameraHysteresis,
@@ -552,8 +551,9 @@ function Terrain({
   innerTileSegments,
   skirtScale,
   elevationScale,
+  radius,
   elevation,
-  surface,
+  topology,
   terrainFieldFilter,
   getCameraOrigin,
   cameraHysteresis,
@@ -582,8 +582,9 @@ function Terrain({
       innerTileSegments,
       skirtScale,
       elevationScale,
+      radius,
       elevation,
-      surface,
+      topology,
       terrainFieldFilter,
       getCameraOrigin,
       cameraHysteresis,

package/package.json

@@ -6,7 +6,7 @@
     "type": "git",
     "url": "https://github.com/kenjinp/hello-terrain.git"
   },
-  "version": "0.0.0-alpha.10",
+  "version": "0.0.0-alpha.11",
   "type": "module",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -22,8 +22,8 @@
     "dist"
   ],
   "dependencies": {
-    "@hello-terrain/three": "0.0.0-alpha.10",
-    "@hello-terrain/work": "0.3.0"
+    "@hello-terrain/work": "0.3.0",
+    "@hello-terrain/three": "0.0.0-alpha.11"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -34,9 +34,9 @@
     "jsdom": "^26.0.0",
     "unbuild": "^3.5.0",
     "vitest": "^4.0.17",
+    "@config/oxlint": "0.1.0",
     "@config/oxfmt": "0.1.0",
-    "@config/typescript": "0.1.0",
-    "@config/oxlint": "0.1.0"
+    "@config/typescript": "0.1.0"
   },
   "peerDependencies": {
     "@react-three/fiber": "^8.0.0 || ^9.0.0",
@@ -51,6 +51,7 @@
     "build": "unbuild",
     "release": "pnpm run build && pnpm publish --access=public",
     "test": "vitest",
+    "typecheck": "tsc -p tsconfig.json --noEmit --composite false",
     "lint": "oxlint -c node_modules/@config/oxlint/react.json",
     "format": "oxfmt -c node_modules/@config/oxfmt/base.json --write ."
   }