Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Terrain Generator (Beta)

Public visualization

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.

Comments

Sign in to join the discussion.

MIT Licensed