Terrain Generator (Beta)

100%

Terrain Generator (Beta)

✓ Published5🌍 Public

Last edited Oct 21, 2019

Created on Oct 4, 2019

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`.

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)

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)

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

92% match

Loading thumbnail…

Terrain Generator (Beta)

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.

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

90% 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

74% 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

71% match

Loading thumbnail…

Untitled

This example shows an interactive terrain visualization built with React and D3.js, displaying a 3D surface rendered on an HTML canvas. The code uses `d3.forceSimulation` to position nodes in a network layout, while `d3.geoPath` generates geographic shapes from projected data. The data appears to be a dataset of geographic coordinates, with the visualization applying a custom projection and color encoding to represent elevation or another spatial attribute. The scene is rendered through a canvas element, with the React framework managing state and updates between user interactions and the underlying D3 rendering pipeline.

TTrustPaul

68% match