Terrain Generator (Beta)

100%

Terrain Generator (Beta)

✓ Published0🌍 Public

Last edited Oct 21, 2019

Created on Oct 21, 2019

A 3D terrain visualization maps elevation data from a CSV file onto a Three.js plane, using a custom vertex shader to displace geometry based on height values. The scene applies multiple procedural textures—ocean, sand, grass, rock, and snow—blended in the fragment shader according to elevation thresholds, while a semi-transparent blue box simulates water. D3 loads the CSV dataset, and THREEE.OrbitControls enables interactive camera rotation, zoom, and panning around the generated landscape.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Terrain Generator (Beta)

A 3D terrain visualization generates a textured landscape from elevation data, with a color-mapped surface that transitions between ocean, sand, grass, rock, and snow textures based on height. The scene includes a semi-transparent blue water plane and a checkerboard ground, with interactive orbiting and zooming controls. Three.js renders the WebGL scene, while D3 loads the CSV elevation data, and custom GLSL shaders displace vertices and blend textures procedurally.

Mmeperezcuello

94% match

Loading thumbnail…

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.

Mmeperezcuello

93% match

Loading thumbnail…

Terrain Generator (Beta)

An interactive WebGL terrain visualization maps grayscale heightmap data onto a 3D plane, displacing vertices via a custom Three.js `ShaderMaterial` and `vertexShader`. The fragment shader blends repeated textures (ocean, sand, grass, snow) using elevation-based `smoothstep` intervals, while D3 loads CSV height values. Users can orbit, zoom, and pan with `OrbitControls`, and the scene exports geometries through `GLTFExporter` or `OBJExporter`.

Mmeperezcuello

92% match

Loading thumbnail…

Terrain Generator (Beta)

This example renders a 3D terrain mesh from a heightmap image using Three.js and D3. It loads elevation data from a CSV or texture, applies a custom GLSL shader to displace vertices, and maps textures onto the surface based on height thresholds. The scene includes an animated water plane, orbit controls for navigation, and uses WebGL for rendering.

Mmeperezcuello

91% match

Loading thumbnail…

Terrain Generator (Beta)

This interactive 3D terrain visualization renders a mountainous landscape from CSV data using Three.js and a custom WebGL shader. The terrain generator constructs a heightmap from the data, applies textured materials based on elevation, and renders the result with orbit controls for rotation and zooming. The scene includes a semi-transparent water plane and uses D3 for data fetching.

CCurran Kelleher

91% match

Loading thumbnail…

Wow 3D Map

A 3D terrain map of a game world is rendered as an interactive, rotating surface. A heightmap drives vertex displacement, with multiple textures such as ocean, sand, grass, rock, and snow blended via a custom GLSL shader based on elevation. The visualization uses Three.js with WebGL rendering, OrbitControls for camera navigation, and D3 for CSV data loading. The scene includes a point light, a semi-transparent water plane, and a checkerboard ground, all presented at five times standard pixel density for clarity on high-DPI displays.

Mmeperezcuello

75% match

Loading thumbnail…

Wow 3D Map

A 3D terrain map of Azeroth renders mountains and valleys as an interactive WebGL scene using Three.js. The terrain elevation comes from a PNG heightmap texture, which is converted into a custom shader material that blends multiple textures based on height. D3 loads the heightmap data via CSV. Users can orbit, zoom, and pan the scene with Three.js OrbitControls, which also supports auto-rotation animation.

Mmeperezcuello

70% match

Loading thumbnail…

Wow 3D Map

An interactive 3D terrain map of the World of Warcraft game world, rendered with Three.js, shows player connection counts per zone as animated pie charts via sprites. The terrain is generated from a heightmap image processed through custom vertex and fragment shaders that apply textured layers. D3 handles data aggregation from a CSV of player sessions, with sprite textures drawn on canvas and updated to reflect counts by character class. OrbitControls enable camera navigation.

Mmeperezcuello

69% match