Terrain from geology
Tectonic uplift, drainage and GPU erosion shape seven landforms, from alpine ranges to fjords. Or load real elevation from GeoTIFF files, raw heightmaps and images.
Version 2.0 · Rust, WebAssembly and WebGPU
Living 3D landscapes, in a few lines of code.
Give VistaWASM a canvas and it builds a world: mountains carved by erosion, forests that sway in the wind, rivers, oceans, clouds and weather. One npm package, a typed API, and nothing else to download.
npm install @vista-wasm/vista-wasm
Free and open source. Runs in browsers with WebGPU, such as current Chrome and Edge.
- 19climate-driven biomes
- 8modelled tree species
- 7landform presets
- 13weather presets
- 15exportable maps
- 0assets to download
What you get
A whole world, not just a heightmap
Every system is on by default and looks right out of the box. Each one can be tuned, switched off, or replaced with your own.
Forests that feel alive
Nineteen biomes place eight grown tree species by climate, slope and water, with grass, rock and scree. Trees sway in layered wind and cast shadows.
Water that flows
An ocean to the horizon with simulated waves and surf, and rivers, lakes and waterfalls routed from rain and snowmelt, carved into the land.
Sky and weather
A physically based sky, volumetric clouds from fair cumulus to storms, cirrus and mid-level layers, time of day, rain, snow, fog and lightning.
Paint, import, export
Paint height, biomes, water and vegetation, import them as images, and export fifteen maps, every tree and a round-trip bundle.
A small, typed API
An async loader, validated options with clear errors, events, and TypeScript declarations for everything. Written in Rust, drawn with WebGPU.
Rendered in the browser
Real time, not a pre-render
Every picture below comes straight from VistaWASM running in a browser tab. Try it yourself: the demo generates a new world from any seed.
Quick start
From canvas to world in one file
Install the package, give it a canvas, and generate. The package ships pre-built, so you need no Rust and no build tools.
- Loads its WebAssembly for you, once per page
- Validates every option, with errors that say how to fix them
- Works with any bundler, framework or none at all
- Hands you the terrain's data for games and physics
main.ts
import { attachFlyCameraControls, createVistaEngine } from "@vista-wasm/vista-wasm";
const canvas = document.querySelector("canvas")!;
const engine = await createVistaEngine(canvas, {
render: {
width: canvas.clientWidth,
height: canvas.clientHeight,
devicePixelRatio: window.devicePixelRatio
}
});
await engine.generateFractal({
seed: 12345,
size: 1024,
horizontalScaleMetres: 12,
verticalScale: 1,
landform: "continental",
noise: { kind: "ridged", octaves: 7, gain: 0.5, lacunarity: 2 }
});
// Fly with the mouse and WASD, then make it rain.
attachFlyCameraControls(engine, canvas, {
initialPosition: [0, 420, 1400],
initialYawDegrees: 180,
initialPitchDegrees: -14
});
engine.setWeather({ enabled: true, state: "rain" });
engine.start();Fits your stack
Bring your own engine
Draw your characters and effects over a VistaWASM world, or take its terrain into the scene you already have.
three.js
three.js objects over the landscape with one shared camera, or VistaWASM terrain as a three.js mesh.
Babylon.js
Babylon.js meshes over the landscape, with hills that hide them, or the terrain in your Babylon.js scene.
React, Vue and Svelte
Complete components that create, resize and dispose of the engine the right way.
The API
Every function, method, event and error code on one page, with links to each option's range.
Like what you see? Give it a star.
VistaWASM is built in the open. A star takes one click, helps other developers find the project, and tells us to keep going.
Questions
Before you start
Which browsers does it run in?
Any browser with WebGPU in a secure context (HTTPS, or localhost while developing), such as current Chrome and Edge. There is no WebGL fallback.
Call detectVistaWasmSupport() first to show your own fallback, or export the terrain and draw it with three.js or Babylon.js on WebGL.
Do I need Rust or a build step?
No. The npm package ships the compiled WebAssembly, its JavaScript glue and TypeScript declarations. Serve .wasm files as application/wasm and you are done.
How big is it?
A minimal app is about 570 KB gzipped, or 460 KB with Brotli, the WebAssembly included. That one download draws everything: textures and trees are generated on the GPU at start-up, so there are no assets to fetch.
Can I use my own trees, textures and placement?
Yes. Replace any tree species' model, any texture layer, or procedural placement with your own trees. Paint biomes, water and vegetation density, or import them as images.
What does the licence mean for my project?
VistaWASM is free and open source under the GNU AGPL, version 3. If you distribute an application that includes it, or offer one to people over a network, you must make that application's complete source code available to them under the same licence.