Terrain Generator (Beta)
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 descriptionA 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.