Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Terrain Generator (Beta)

Public visualization

Viewing a saved revision (read-only)

402c04826e0b4ca49dbf394f25b6c64f

Terrain Generator (Beta)

0 stars0🌍 Public
Mmeperezcuello
Last edited Oct 16, 2019
Created on Oct 16, 2019
Forked from Wow 3D Map

This interactive 3D terrain generator visualizes a heightmap as a textured, three-dimensional surface. The example uses Three.js with WebGL rendering to build a `PlaneGeometry` mesh, displacing vertices based on pixel data from a CSV or PNG image via `getImageData`. A custom fragment shader blends multiple textures—ocean, sand, grass, rock, and snow—across elevation bands, using `smoothstep` for gradual transitions. D3’s `csv` function loads the height data, while `OrbitControls` enables user rotation and zoom. The scene includes a checkerboard ground plane and displays the terrain with lighting from a Phong reflection model.

AI-generated description

A 3D scatter plot using Three.js and D3.

This variant uses the high pixel density Canvas technique described in Scaling HTML canvases for HiDPI screens.