hello-terrain

Realtime web terrain engine, for vast virtual worlds. Built for three.js and react-three/fiber.

Features

• Performant variable LOD system for huge (earth-scale!) open worlds
• Elevation manipulation, terrain holes, texture painting, overlays, colors, and wetness
• TSL-based elevation and texture assignment nodes
• Composable compute stage plugins

Getting Started

1. Read the Introduction to understand the architecture and see how it's used.

2. Read the Installation instructions.

3. Review the Examples to get an idea of how to do things.

4. For support, join the Discord server.

React Example

If you're using @hello-terrain/react, the smallest setup is a WebGPU Canvas plus a Terrain render prop:

import { Terrain } from "@hello-terrain/react";
import { Canvas } from "@react-three/fiber";
import type { WebGPURendererParameters } from "three/src/renderers/webgpu/WebGPURenderer.js";
import { float } from "three/tsl";
import * as THREE from "three/webgpu";

const elevation = () => float(0);

export function App() {
  return (
    <Canvas
      gl={async (props) => {
        const renderer = new THREE.WebGPURenderer(
          props as WebGPURendererParameters,
        );
        await renderer.init();
        return renderer;
      }}
    >
      <Terrain rootSize={1024} maxLevel={6} elevation={elevation}>
        {({ positionNode }) => (
          <meshStandardNodeMaterial positionNode={positionNode} />
        )}
      </Terrain>
    </Canvas>
  );
}

See the React overview and the package readme at packages/react/README.md for the full API and runtime patterns.

Shoutouts

inspired by Terrain3D with a quad-tree twist.

This monorepo workspace was generated with create-krispya.