2c:null 2d:["$","title",null,{"children":"Fractal Terrain Generation and 3D Visualization | Chuncheng | Observable"}] 32:T55c, ## Dual View Display ### Left: Canvas 2D View - Displays top-down view of terrain heightmap - Uses grayscale to represent elevation: black for lowlands, white for peaks - Ideal for observing overall terrain structure and fractal patterns ### Right: Regl 3D View - Shows three-dimensional terrain morphology - Uses natural colors: green for lowlands, brown for mountains, white for snowlines - Interactive controls: - **Mouse drag**: Rotate view - **Mouse wheel**: Zoom in/out - **Right-click drag**: Pan view - **Double-click**: Reset view ### User Guide 1. **Adjust Terrain Parameters**: ```javascript // N determines grid density (2^N + 1) // roughness controls terrain ruggedness (0.0-1.0) const terrain = safeTerrain(7, 0.45, 1); ``` 2. **Interactive Controls**: - Direct mouse interaction in the 3D view - Real-time comparison between 2D and 3D views 3. **Performance Tuning**: - Mesh simplification reduces rendering load - Automatic selection of optimal index buffer types ### Applications - Game terrain generation - Geographic information system visualization - Data terrain mapping - Fractal geometry research This implementation demonstrates how to combine mathematical algorithms, computer graphics principles, and modern web technologies to create both visually appealing and practical terrain visualization tools.33:T6ad,/** * 将高度图转换为地形mesh，格式与bunny模型相同 * @param {number[][]} heightmap - 二维高度图 * @param {Object} options - 配置选项 * @returns {Object} { positions: Array, cells: Array } */ function heightmapToTerrainMesh(heightmap, options = {}) { const size = heightmap.length; const { heightScale, gridScale = 1, center = true } = options; const positions = []; const cells = []; // 计算偏移量以便居中地形 const offsetX = center ? -(size * gridScale) / 2 : 0; const offsetZ = center ? -(size * gridScale) / 2 : 0; // 生成顶点 - 格式: [[x, y, z], [x, y, z], ...] for (let z = 0; z < size; z++) { // z对应y轴 for (let x = 0; x < size; x++) { // x对应x轴 const height = heightmap[z][x]; // 注意：heightmap是[行][列]，行对应z positions.push([ x * gridScale + offsetX, height * heightScale, z * gridScale + offsetZ ]); } } // 生成三角形面片 - 格式: [[i, j, k], [i, j, k], ...] for (let z = 0; z < size - 1; z++) { for (let x = 0; x < size - 1; x++) { const topLeft = z * size + x; const topRight = z * size + (x + 1); const bottomLeft = (z + 1) * size + x; const bottomRight = (z + 1) * size + (x + 1); // 两个三角形组成一个四边形 // 三角形1: 左上, 右上, 左下 cells.push(new Uint32Array([topLeft, topRight, bottomLeft])); // 三角形2: 左下, 右上, 右下 cells.push(new Uint32Array([bottomLeft, topRight, bottomRight])); } } return { positions, // 格式: [[x1, y1, z1], [x2, y2, z2], ...] cells // 格式: [[i1, i2, i3], [i4, i5, i6], ...] }; }34:Tbbf,/** * 使用菱形-方形算法生成分形高度图 * @param {number} N - 网格大小的指数，最终网格大小为 (2^N + 1) x (2^N + 1) * 例如 N=7 生成 129x129 的网格 * @param {number} roughness - 粗糙度因子 (0.0 - 1.0) * 值越小越平滑，值越大越尖锐 * @returns {number[][]} 高度图数组，值在0到1之间 */ function diamond_square(N, roughness) { const size = Math.pow(2, N) + 1; // 初始化高度图 const heightmap = Array.from({ length: size }, () => new Array(size).fill(0)); // 初始化四个角的高度 heightmap[0][0] = Math.random(); heightmap[0][size - 1] = Math.random(); heightmap[size - 1][0] = Math.random(); heightmap[size - 1][size - 1] = Math.random(); let step = size - 1; let scale = 1.0; while (step > 1) { const halfStep = Math.floor(step / 2); // --- 菱形步 (Diamond Step) --- for (let y = 0; y < size - 1; y += step) { for (let x = 0; x < size - 1; x += step) { // 计算正方形中心点平均值 const avg = (heightmap[y][x] + heightmap[y + step][x] + heightmap[y][x + step] + heightmap[y + step][x + step]) / 4.0; // 加上随机偏移 heightmap[y + halfStep][x + halfStep] = avg + (Math.random() * 2 - 1) * scale; } } // --- 方形步 (Square Step) --- for (let y = 0; y < size; y += halfStep) { // 如果是半步行，则x从0开始全步长；如果是全步行，则x从半步开始全步长 const startX = Math.floor(y / halfStep) % 2 === 1 ? 0 : halfStep; for (let x = startX; x < size; x += step) { let sumH = 0; let count = 0; // 获取菱形四个顶点，检查边界 if (y - halfStep >= 0) { sumH += heightmap[y - halfStep][x]; count++; } if (y + halfStep < size) { sumH += heightmap[y + halfStep][x]; count++; } if (x - halfStep >= 0) { sumH += heightmap[y][x - halfStep]; count++; } if (x + halfStep < size) { sumH += heightmap[y][x + halfStep]; count++; } const avg = count > 0 ? sumH / count : 0; heightmap[y][x] = avg + (Math.random() * 2 - 1) * scale; } } // 为下一次迭代减小步长和随机范围 step = halfStep; // 关键：粗糙度决定了随机范围衰减的快慢 scale *= roughness; } // 归一化高度图到 [0, 1] 之间 const minMax = heightmap.flat().reduce( (acc, val) => ({ min: Math.min(acc.min, val), max: Math.max(acc.max, val) }), { min: Infinity, max: -Infinity } ); const range = minMax.max - minMax.min; if (range > 0) { for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { heightmap[y][x] = (heightmap[y][x] - minMax.min) / range; } } } return heightmap; }35:T5fb,// 如果需要在HTML Canvas上渲染地形，可以添加以下辅助函数 function renderTerrainOnCanvas(canvasId, heightmap) { const canvas = document.getElementById(canvasId); if (!canvas) return; const ctx = canvas.getContext("2d"); const size = heightmap.length; // 设置Canvas大小 canvas.width = size; canvas.height = size; // 创建图像数据 const imageData = ctx.createImageData(size, size); const data = imageData.data; // 根据高度值设置像素颜色 for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { const index = (y * size + x) * 4; const height = heightmap[y][x]; // 根据高度选择颜色：低地为绿色，中等为棕色，高山为白色 let r, g, b; if (height < 0.3) { // 海洋/低地 r = 0; g = Math.floor(100 + height * 155); b = Math.floor(150 + height * 105); } else if (height < 0.6) { // 陆地 r = Math.floor(100 + (height - 0.3) * 100); g = Math.floor(80 + (height - 0.3) * 100); b = Math.floor(50 + (height - 0.3) * 50); } else { // 高山 r = Math.floor(200 + (height - 0.6) * 55); g = Math.floor(200 + (height - 0.6) * 55); b = Math.floor(200 + (height - 0.6) * 55); } data[index] = r; // 红色 data[index + 1] = g; // 绿色 data[index + 2] = b; // 蓝色 data[index + 3] = 255; // 透明度 } } // 绘制到Canvas ctx.putImageData(imageData, 0, 0); }36:[] 30:{"id":"fc54d4e8a26c1222","slug":"fractal-terrain-generation-and-3d-visualization","title":"Fractal Terrain Generation and 3D Visualization","thumbnail":"f4948012591d69da486d5128b45818f169d01195fa46643d7ef4111e9dc339f3","access_level":"public","create_time":"$D2026-01-27T12:28:28.317Z","update_time":"$D2026-01-27T13:52:03.001Z","view_time":null,"first_public_time":"$D2026-01-28T12:11:24.042Z","fork":{"id":"ab682d19bec9f569","slug":"regl","title":"Regl","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":562,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"},{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Fractal Terrain Generation and 3D Visualization","cells":[{"id":0,"value":"# Fractal Terrain Generation and 3D Visualization\n\n---\n\n## Code Description\n\nThis code implements a complete fractal terrain generation and 3D visualization system:\n\n### Core Features\n1. **Fractal Terrain Generation**: Uses the Diamond-Square Algorithm to create realistic natural terrain\n2. **3D Mesh Conversion**: Transforms 2D heightmaps into 3D meshes with vertex positions and triangle indices\n3. **WebGL Rendering**: Utilizes regl.js for efficient browser-based 3D rendering\n4. **Real-time Interaction**: Supports mouse rotation, zoom, and pan for exploring terrain\n\n### Technical Highlights\n- **Fractal Algorithm**: Control terrain ruggedness with the roughness parameter (0.0-1.0)\n- **Dual View Comparison**: Left Canvas 2D shows top-down grayscale heightmap, right regl 3D shows 3D terrain\n- **Adaptive Mesh**: Automatically handles different index types (Uint8/Uint16/Uint32) based on mesh size\n- **Performance Optimization**: Supports mesh simplification to avoid WebGL vertex limits","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"

The roughness is ${form.roughness}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":369,"value":"

\n ${canvas}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"viewof form = Inputs.form({\n N: Inputs.range([2, 15], { label: \"N\", step: 1, value: 7 }),\n roughness: Inputs.range([0, 1], { label: \"roughness\", step: 0.01 })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"canvas = DOM.canvas(600, 400)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"cancelAble = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"cancelAble","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"// Continuously updates\n{\n let job = regl.frame(() => {\n camera(function () {\n regl.clear({ color: [0, 0.1, 0.26, 1] });\n drawBunny();\n });\n });\n\n cancelAble.map((job) => job.cancel());\n\n while (cancelAble.length > 0) {\n cancelAble.pop();\n }\n\n cancelAble.push(job);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"camera = {\n form;\n return reglCamera(regl, {\n element: regl._gl.canvas,\n center: [127 / 2, -20, -20],\n theta: ((3.0 * Math.PI) / 4.0) * 1.2, // Rotate\n phi: (Math.PI / 6.0) * 1.1, // Notch\n distance: 127 * 2,\n damping: 0,\n noScroll: true,\n renderOnDirty: true\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"drawBunny = {\n return regl({\n frag: `\n precision mediump float;\n varying vec3 vnormal, vposition;\n void main () {\n gl_FragColor = vec4(vec3(vposition.y) / ${heightScale}, 1.0);\n // gl_FragColor = vec4(vnormal * 0.75 + 0.25, 1.0);\n }`,\n vert: `\n precision mediump float;\n uniform mat4 projection, view;\n attribute vec3 position, normal;\n varying vec3 vnormal;\n varying vec3 vposition;\n void main () {\n vnormal = normal;\n vposition = position;\n gl_Position = projection * view * vec4(position, 1.0);\n }`,\n attributes: {\n position: bunny.positions,\n normal: normals(bunny.cells, bunny.positions)\n },\n elements: bunny.cells\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"bunny1 = (await import(\"https://cdn.skypack.dev/bunny@1.0.1\")).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"normals = (await import(\"https://cdn.skypack.dev/angle-normals@1.0.0\")).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"regl = (await import(\"https://cdn.skypack.dev/regl@2\")).default({canvas})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"reglCamera = (await import(\"https://cdn.skypack.dev/regl-camera@2.1.1\")).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"terrian = {\n const { N, roughness } = form;\n const terrian = diamond_square(N, roughness);\n renderTerrainOnCanvas(\"terrianCanvas\", terrian);\n return terrian;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"bunny = heightmapToTerrainMesh(terrian, { heightScale })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"heightScale = size* 0.3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"size = Math.pow(2, form.N) - 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"