31:T763,This notebook (erroneously?) implements the algorithm of Schott et al. from [Large-scale terrain authoring through interactive erosion simulation](https://dl.acm.org/doi/10.1145/3592787). What I've implemented here is strictly just the erosion component of the algorithm, without interactive design. To simulate erosion, it integrates a PDE for the height field, ${tex.block` \frac{\partial h}{\partial t} = u - s^n a^m + \nabla^2 h `} where ${tex`h`} is the height, ${tex`u`} is an uplift field (here just a hard-coded circular shape), ${tex`s`} is the steepest slope of the terrain, and ${tex`a`} is the total uphill drainage area flowing through a given pixel. The exponents ${tex`n`} and ${tex`m`} are taken as 1 and 2, respectively, since they claim that only the ratio matters and suggest ${tex`m / n = 1/2`}. ${tex`\nabla^2 h`} is a diffusion term that smooths out the terrain. I suspect I have a significant error somewhere in the details. One obnoxious feature I notice is that since drainage carves out terrain, it tends to create small depressions which cut off rivers. This has the odd effect of causing coherent drainage structures to flicker in and out of existence. It's also quite unstable, in general. I've added a couple subtle ad hoc fixes like slowly filling in basins to remedy this, but it remains moderately tricky to control. Because I had enough problems with it already, I kept my goals reasonable and implemented it in WebGL instead of WebGPU. C'est la vie. For comparison, check out [the WebGPU version by Dwivedi, Nagpal, and Zhu](https://gpu-gang.github.io/WebGPU-Erosion-Simulation/). It seems quite a bit better than my version, and I'm still trying to understand just why. I have a hunch it's somewhere in the details, perhaps related to use of the steepest gradient versus use of the gradient magnitude for the slope component of the erosion equation.32:T728,drawLoop = { restart; initialize; mutable dirty = true; let loop = regl.frame(() => { try { const simulate = true; //mutable frame < 4000 if (simulate && ~opts.indexOf("simulate")) { for (let step = 0; step < stepsPerFrame; step++) { for (let i = 0; i < iterationsPerFrame; i++) { iterate({ tile, erosion, uplift, ak: a[0], ak1: a[1], dt: i === iterationsPerFrame - 1 ? dt : 0 }); swap(a); } } mutable frame = mutable frame + 1; mutable dirty = true; } if (~opts.indexOf("3D")) { camera(({ dirty: cameraDirty, projectionView }) => { if (!cameraDirty && !mutable dirty) return; regl.clear({ color: [1, 1, 1, 1], depth: 1 }); camera.params.rotationCenter = camera.params.center; drawMesh({ src: a[0], meshBuffer, colorscale, range, dataRange, model, drawDrainage: !!~opts.indexOf("draw drainage"), drawContours: !!~opts.indexOf("draw contours"), count: mesh.length / 2 }); }); mutable dirty = false; } else { if (mutable dirty) { regl.clear({ color: [1, 1, 1, 1], depth: 1 }); drawTerrain({ src: a[0], colorscale, drawDrainage: !!~opts.indexOf("draw drainage"), drawContours: !!~opts.indexOf("draw contours"), range }); mutable dirty = false; } } } catch (e) { if (loop) loop.cancel(); loop = null; throw e; } }); invalidation.then(() => { loop.cancel(); loop = null; }); }33:T799,drawTerrain = regl({ vert: ` precision highp float; attribute vec2 xy; varying vec2 uv; uniform vec2 resolution; void main () { float ar = resolution.x / resolution.y; gl_Position = vec4(xy / vec2(ar, 1), 0, 1); uv = 0.5 + 0.5 * xy; }`, frag: ` #extension GL_OES_standard_derivatives : enable precision highp float; uniform sampler2D src, colorscale; varying vec2 uv; uniform vec2 range; uniform float power; uniform bool drawDrainage, drawContours; float grid (float parameter, float width, float feather) { float w1 = width - feather * 0.5; float d = length(vec2(dFdx(parameter), dFdy(parameter))); if (d == 0.0) return 0.0; float looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); return smoothstep(d * (w1 + feather), d * w1, looped); } void main () { vec2 f = texture2D(src, uv).xy; gl_FragColor = texture2D(colorscale, vec2(1.0 - clamp((f.x - range.x) / (range.y - range.x), 0.0, 1.0), 0.5)); if (drawContours) { const vec4 gridColor = vec4(0, 0, 0, 1); float g = 0.1 * grid(f.x / 40.0, 1.0, 1.0) + 0.2 * grid(f.x / 200.0, 1.0, 1.0); gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2, 0.1, 0.0), g); } if (drawDrainage) { float drainage = pow(f.y / 1000.0, 1.0); gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0, 0, 1.0), drainage * 0.4); } }`, attributes: { xy: [-1, -1, 1, -1, -1, 1, 1, 1] }, uniforms: { src: regl.prop("src"), range: regl.prop("range"), colorscale: regl.prop("colorscale.texture"), power: regl.prop("power"), resolution: ({ framebufferWidth, framebufferHeight }) => [ framebufferWidth, framebufferHeight ], drawDrainage: regl.prop("drawDrainage"), drawContours: regl.prop("drawContours") }, count: 4, depth: { enable: false }, primitive: "triangle strip" })34:T4de,mesh = { const w = tile.width; const h = tile.height; const vertices = []; for (let j = 0; j < h - 1; j++) { for (let i = 0; i < w - 1; i++) { if (false) { vertices.push([(i + 0.5) / w, (j + 0.5) / h]); vertices.push([(i + 1.5) / w, (j + 0.5) / h]); vertices.push([(i + 1.5) / w, (j + 1.5) / h]); vertices.push([(i + 0.5) / w, (j + 0.5) / h]); vertices.push([(i + 1.5) / w, (j + 1.5) / h]); vertices.push([(i + 0.5) / w, (j + 1.5) / h]); } else { vertices.push([(i + 0.5) / w, (j + 0.5) / h]); vertices.push([(i + 1.5) / w, (j + 0.5) / h]); vertices.push([(i + 1.0) / w, (j + 1.0) / h]); vertices.push([(i + 1.5) / w, (j + 0.5) / h]); vertices.push([(i + 1.5) / w, (j + 1.5) / h]); vertices.push([(i + 1.0) / w, (j + 1.0) / h]); vertices.push([(i + 1.5) / w, (j + 1.5) / h]); vertices.push([(i + 0.5) / w, (j + 1.5) / h]); vertices.push([(i + 1.0) / w, (j + 1.0) / h]); vertices.push([(i + 0.5) / w, (j + 1.5) / h]); vertices.push([(i + 0.5) / w, (j + 0.5) / h]); vertices.push([(i + 1.0) / w, (j + 1.0) / h]); } } } return new Float32Array(vertices.flat()); }35:Tc0e,drawMesh = regl({ vert: ` precision highp float; uniform mat4 uProjectionView, viewInv, model, view; attribute vec2 xy; uniform sampler2D src; uniform vec2 dataRange, textureRes; varying vec2 f; varying float lambert, occlusion; void main () { f = texture2D(src, xy.yx).xy; float z = f.x; vec2 n = xy + 2.5 * vec2(0, 1) / textureRes; vec2 s = xy + 2.5 * vec2(0, -1) / textureRes; vec2 e = xy + 2.5 * vec2(1, 0) / textureRes; vec2 w = xy + 2.5 * vec2(-1, 0) / textureRes; vec3 pn = (model * vec4(n, texture2D(src, n.yx).x, 1).xzyw).xyz; vec3 ps = (model * vec4(s, texture2D(src, s.yx).x, 1).xzyw).xyz; vec3 pe = (model * vec4(e, texture2D(src, e.yx).x, 1).xzyw).xyz; vec3 pw = (model * vec4(w, texture2D(src, w.yx).x, 1).xzyw).xyz; vec4 p = model * vec4(xy, texture2D(src, xy.yx).x, 1).xzyw; float dx = pe.x - pw.x; float dy = pn.z - ps.z; float lap = (pn.y - 2.0 * p.y + ps.y) / (dy * dy) + (pe.y - 2.0 * p.y + pw.y) / (dx * dx); occlusion = exp(-pow(max(0.0, lap * 0.007), 1.0)); vec3 normal = (viewInv * vec4(normalize(cross(pn - ps, pe - pw)), 0)).xyz; vec3 light = normalize(vec3(0, 1, 0)); lambert = max(0.0, dot(normal, light)); gl_Position = uProjectionView * p; }`, frag: ` #extension GL_OES_standard_derivatives : enable precision highp float; varying vec2 f; uniform vec2 range; uniform sampler2D colorscale; varying float lambert, occlusion; uniform bool drawDrainage, drawContours; float grid (float parameter, float width, float feather) { float w1 = width - feather * 0.5; float d = length(vec2(dFdx(parameter), dFdy(parameter))); if (d == 0.0) return 0.0; float looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); return smoothstep(d * (w1 + feather), d * w1, looped); } void main () { gl_FragColor = texture2D(colorscale, vec2(1.0 - clamp((f.x - range.x) / (range.y - range.x), 0.0, 1.0), 0.5)); gl_FragColor.rgb *= pow((0.5 + 0.5 * lambert) * occlusion, 0.454); if (drawContours) { const vec4 gridColor = vec4(0, 0, 0, 1); float g = 0.1 * grid(f.x / 40.0, 1.0, 1.0) + 0.2 * grid(f.x / 200.0, 1.0, 1.0); gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2, 0.1, 0.0), g); } if (drawDrainage) { float drainage = pow(max(0.0, f.y / 1000.0), 0.5); gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0, 0, 1.0), drainage * 0.4); } }`, attributes: { xy: regl.prop("meshBuffer") }, uniforms: { src: regl.prop("src"), range: regl.prop("range"), power: regl.prop("power"), model: regl.prop("model"), colorscale: regl.prop("colorscale.texture"), dataRange: regl.prop("dataRange"), textureRes: () => [tile.width, tile.height], viewInv: regl.context("viewInv"), view: regl.context("view"), drawDrainage: regl.prop("drawDrainage"), drawContours: regl.prop("drawContours") }, count: regl.prop("count") })36:Te82,iterate = { const V = (i, j) => [ [i - 1, j - 1], [i, j - 1], [i + 1, j - 1], [i - 1, j], [i + 1, j], [i - 1, j + 1], [i, j + 1], [i + 1, j + 1] ]; const slopeGLSL = ([i2, j2], [i1, j1]) => { const di = i2 - i1; const dj = j2 - j1; if (di === 0 && dj === 0) throw new Error("Invalid slope"); return `(f${i2}${j2}.x - f${i1}${j1}.x) * ${ 1 / (pixelSizeMeters * Math.hypot(di, dj)) }`; }; // prettier-ignore return regl({ vert: ` precision highp float; attribute vec2 xy; varying vec2 uv; void main () { gl_Position = vec4(xy, 0, 1); uv = 0.5 + 0.5 * xy; }`, frag: ` precision highp float; uniform sampler2D ak, colorscale; varying vec2 uv; uniform vec2 texelSize, resolution; uniform float dt, erosion, upliftStrength; float power(float x) { float x2 = x * x; return x2 * x2; } ${glslNoise.shader} ${upliftGLSL} void main () { // Sample pixels. Each pixel contains the tuple (height, drainage). // (2, 2) is the center pixel // // f04 f14 f24 f34 f44 // f03 f13 f23 f33 f43 // f02 f12 f22 f32 f42 // f01 f11 f21 f31 f41 // f00 f10 f20 f30 f40 // // Since WebGL 1 has very limited capabilities, I used significant code generation // and unrolled loops rather than implementing the control flow in GLSL. This makes // the implementation a bit harder to follow. The generated code may be more // straightforward to read. ${[0, 1, 2, 3, 4].map((i) => [0, 1, 2, 3, 4].map((j) => ` vec2 f${i}${j} = texture2D(ak, uv + vec2(${i - 2},${j - 2}) * texelSize).xy;` ).join("")).join("")} float drainage = 0.0; int basinCount = 0; ${V(2, 2).map(([i, j]) => ` if (f${i}${j}.x > f22.x) { basinCount += 1; float sji = power(${slopeGLSL([i, j], [2, 2])}); float sjk = 0.0; ${V(i, j).map(([ii, jj]) => ` if (f${ii}${jj}.x < f${i}${j}.x + 1.0) sjk += power(${slopeGLSL([i, j], [ii, jj])});` ).join("")} if (sjk > 1e-8) drainage += (sji / sjk) * f${i}${j}.y; }`).join("")} bool isInterior = gl_FragCoord.x > 1.0 && gl_FragCoord.y > 1.0 && gl_FragCoord.x < resolution.x - 1.0 && gl_FragCoord.y < resolution.y - 1.0; bool isBasin = basinCount >= 8; // Only propagate if not a basin float a = (!isBasin && isInterior) ? 1.0 + drainage : 1.0; // Adding a little deposit in basis helps out stability, but it's a also // a relatively visible effect as basins fill in. float deposit = isBasin ? 0.1 : 0.0; // f13 f23 f33 // f12 f22 f32 // f11 f21 f31 float laplacian = 0.25 * (f11.x + f31.x + f13.x + f33.x) + 0.5 * (f21.x + f12.x + f32.x + f23.x) + -3.0 * f22.x; // Compute the gradient (magnitude) for use as the slope term float gx = 0.25 * (f33.x + f31.x - f11.x - f13.x + 2.0 * (f32.x - f12.x)); float gy = 0.25 * (f13.x + f33.x - f11.x - f31.x + 2.0 * (f23.x - f21.x)); float s = length(vec2(gx, gy)); float u = uplift(uv, upliftStrength); const float m = 1.0; const float n = 2.0; float h = f22.x + dt * (u - erosion * pow(s, n) * pow(a, m) + laplacian - 1.0 * s); gl_FragColor = vec4(h + deposit, a, 0, 0); }`, attributes: { xy: [-4, -4, 4, -4, 0, 4] }, uniforms: { ak: regl.prop("ak"), dt: regl.prop("dt"), erosion: regl.prop("erosion"), upliftStrength: regl.prop("uplift"), texelSize: (ctx, { tile }) => [1 / tile.width, 1 / tile.height], resolution: ({ framebufferWidth, framebufferHeight }) => [ framebufferWidth, framebufferHeight ] }, depth: { enable: false }, framebuffer: regl.prop("ak1"), count: 3, primitive: "triangle" }); }37:T857,glslNoise = ({ shader: `// // Description : Array and textureless GLSL 2D simplex noise function. // Author : Ian McEwan, Ashima Arts. // Maintainer : ijm // Lastmod : 20110822 (ijm) // License : Copyright (C) 2011 Ashima Arts. All rights reserved. // Distributed under the MIT License. See LICENSE file. // https://github.com/ashima/webgl-noise // vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0 0.366025403784439, // 0.5*(sqrt(3.0)-1.0) -0.577350269189626, // -1.0 + 2.0 * C.x 0.024390243902439); // 1.0 / 41.0 // First corner vec2 i = floor(v + dot(v, C.yy) ); vec2 x0 = v - i + dot(i, C.xx); // Other corners vec2 i1; //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0 //i1.y = 1.0 - i1.x; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); // x0 = x0 - 0.0 + 0.0 * C.xx ; // x1 = x0 - i1 + 1.0 * C.xx ; // x2 = x0 - 1.0 + 2.0 * C.xx ; vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; // Permutations i = mod289(i); // Avoid truncation effects in permutation vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); m = m*m ; m = m*m ; // Gradients: 41 points uniformly over a line, mapped onto a diamond. // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287) vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; // Normalise gradients implicitly by scaling m // Approximation of: m *= inversesqrt( a0*a0 + h*h ); m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); // Compute final noise value at P vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); }` })38:[] 2f:{"title":"Hydraulic Erosion Simulation","cells":[{"id":0,"value":"# Hydraulic Erosion Simulation","pinned":false,"hidden":false,"mode":"md"},{"id":2359,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1885,"value":"viewof location = Inputs.select(\n [\n \"Grand Canyon, AZ, USA\",\n \"Mount Elbert, CO, USA\",\n \"Mount Rainier, WA, USA\",\n \"Mount Fuju, Japan\",\n \"Mount Everest\",\n \"Santa Cruz Mountains, CA, USA\",\n \"Mount Whitney, CA, USA\",\n \"Mount Washington, NH, USA\"\n ],\n { value: \"Mount Rainier, WA, USA\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof regl = reglCanvas(this, {\n width: width,\n height: width * 0.7,\n pixelRatio: 2,\n attributes: { antialias: false, stencil: false, alpha: false },\n extensions: [\n \"OES_texture_float\",\n \"OES_texture_float_linear\",\n \"OES_element_index_uint\",\n \"OES_standard_derivatives\",\n \"ANGLE_instanced_arrays\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1166,"value":"viewof restart = Inputs.button(\"Restart\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"viewof opts = Inputs.checkbox(\n [\"simulate\", \"3D\", \"draw drainage\", \"draw contours\"],\n {\n value: [\"simulate\", \"3D\", \"draw drainage\", \"draw contours\"]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"viewof iterationsPerFrame = Inputs.range([1, 150], {\n label: \"Drainage iterations per step\",\n step: 1,\n value: 5,\n transform: Math.log\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1916,"value":"viewof stepsPerFrame = Inputs.range([1, 20], {\n label: \"Steps per frame\",\n step: 1,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1753,"value":"viewof dt = Inputs.range([0.0001, 0.1], {\n transform: Math.log,\n value: 0.01,\n label: \"∆t\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1773,"value":"viewof erosion = Inputs.range([0.00001, 0.01], {\n transform: Math.log,\n value: 0.0001,\n label: \"Erosion\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"viewof range = interval([0, 9000], {\n value: dataRange,\n label: \"Color scale range (meters)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"viewof colorscale = ColorScaleSelector(regl, {\n value: \"Spectral\",\n label: \"Colorscale\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1904,"value":"viewof uplift = Inputs.range([0, 50], { label: \"Uplift strength\", value: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2404,"value":"viewof upliftGLSL = Editor({\n language: \"glsl\",\n value: `float uplift (vec2 uv, float strength) {\n float r = length(uv - 0.5) - 0.2;\n return strength * (\n\texp(-r * r * 70.0) * \n\t(1.0 + cos(uv.x * 5.8))\n + sqrt(max(0.0, 0.4 + 0.6 * snoise(uv * 5.0))) * 0.1\n + sqrt(max(0.0, 0.4 + 0.6 * snoise(uv * 20.0))) * 0.05\n );\n}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2430,"value":"viewof regl2 = reglCanvas(this, {\n width: 256,\n height: 256\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"## Rendering","pinned":false,"hidden":false,"mode":"md"},{"id":1172,"value":"initialize = {\n restart;\n mutable frame = 0;\n\n aTexture[0].subimage(initialData);\n aTexture[1].subimage(initialData);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"mutable frame = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"mutable dirty = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1945,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1977,"value":"meshBuffer = {\n const buffer = regl.buffer(mesh);\n invalidation.then(() => buffer.destroy());\n return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1970,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"## Computation","pinned":false,"hidden":false,"mode":"md"},{"id":1129,"value":"initialData = {\n const data = new Float32Array(tile.width * tile.height * 4);\n for (let i = 0; i < terrainData.length; i++) {\n data[i * 4] = -10000 + 0.1 * terrainData[i]; // elevation, meters\n data[i * 4 + 1] = 0; // drainage\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"aTexture = {\n const tex = [0, 1].map(() =>\n regl.texture({\n width: tile.width,\n height: tile.height,\n type: \"float32\",\n format: \"rgba\",\n min: \"linear\",\n mag: \"linear\",\n wrapS: \"clamp\",\n wrapT: \"clamp\",\n flipY: true,\n data: initialData\n })\n );\n invalidation.then(() => tex.forEach((t) => t.destroy()));\n return tex;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"a = {\n const tex = aTexture.map((color) => regl.framebuffer({ color }));\n invalidation.then(() => tex.forEach((t) => t.destroy()));\n return tex;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"swap = (array) => {\n const tmp = array[0];\n array[0] = array[1];\n array[1] = tmp;\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2101,"value":"model = {\n const m = mat4.create();\n const tmp = mat4.create();\n mat4.multiply(\n m,\n mat4.fromTranslation(tmp, [-0.5, -(dataRange[0] + dataRange[1]) / 2, -0.5]),\n m\n );\n mat4.multiply(m, mat4.fromScaling(tmp, [2, 2 / tileDimension, 2]), m);\n return m;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2425,"value":"## Uplift preview","pinned":false,"hidden":false,"mode":"md"},{"id":2441,"value":"drawUpliftPreview = {\n regl2.poll();\n drawUplift({ upliftGLSL });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2434,"value":"drawUplift = regl2({\n vert: `\n precision highp float;\n attribute vec2 xy;\n varying vec2 uv;\n void main () {\n gl_Position = vec4(xy, 0, 1);\n uv = 0.5 + 0.5 * xy;\n }`,\n frag: (_, { upliftGLSL }) => `\n precision highp float;\n varying vec2 uv;\n ${glslNoise.shader}\n ${upliftGLSL}\n void main () {\n gl_FragColor = vec4(vec3(uplift(uv, 1.0)), 1);\n }`,\n attributes: {\n xy: [-4, -4, 4, -4, 0, 4]\n },\n uniforms: {},\n count: 3,\n depth: { enable: false },\n primitive: \"triangle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":2397,"value":"import { Editor } from \"@cmudig/editor\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2098,"value":"import { mat4 } from \"@rreusser/gl-mat4\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1960,"value":"import { createReglCamera, createInteractions } from \"@rreusser/regl-tools\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"import { interval } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import { reglCanvas } from \"@rreusser/regl-canvas\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"import { ColorScaleSelector } from \"@rreusser/regl-colorscale-selector\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2517,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1962,"value":"camera = {\n const camera = createReglCamera(regl, {\n distance: 2.5,\n near: 0.01,\n far: 100,\n phi: 0.5,\n theta: 0.2,\n center: [0, 0, 0]\n });\n createInteractions(camera);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1964,"value":"updateCameraOnResize = {\n // Trigger a dependence of resizing on the page size and regl instance:\n width, regl;\n\n const aspectRatio = viewof regl.width / viewof regl.height;\n camera.resize(aspectRatio);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function readImageData(img) {\n const canvas = DOM.element(\"canvas\");\n canvas.width = img.width;\n canvas.height = img.height;\n const ctx = canvas.getContext(\"2d\");\n ctx.drawImage(img, 0, 0);\n return ctx.getImageData(0, 0, img.width, img.height).data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"function decodeTerrainData(imageData) {\n const len = imageData.length / 4;\n const out = new Uint32Array(len);\n for (let i = 0; i < len; i++) {\n out[i] =\n (imageData[4 * i] << 16) |\n (imageData[4 * i + 1] << 8) |\n imageData[4 * i + 2];\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"function getTerrainTile({ x, y, z }) {\n const ACCESS_TOKEN =\n \"pk.eyJ1IjoicnNyZXVzc2VyIiwiYSI6ImNtMjZmejNqczBmYzIya3B6ZjBzZnYwOGgifQ.CWSOe_wStIypz4_snROphQ\";\n const SKU = \"101pM5uZK0TZt\";\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.src = `https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/${z}/${x}/${y}.webp?sku=${SKU}&access_token=${ACCESS_TOKEN}`;\n img.crossOrigin = \"Anonymous\";\n img.onload = () => resolve(img);\n img.onerror = () => reject(\"Failed to load terrain tile\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"pixelSizeMeters = MAXEXTENT / (tileSize[0] - 2 * tilebuffer) / 2 ** xyz.z","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"tileSize = [tile.width, tile.height]","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"tilebuffer = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2095,"value":"tileDimension = MAXEXTENT / 2 ** xyz.z","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"MAXEXTENT = 20037508.342789244","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"terrainData = decodeTerrainData(readImageData(tile))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1895,"value":"dataRange = {\n let min = Infinity;\n let max = -Infinity;\n for (let i = 0; i < terrainData.length; i++) {\n const el = -10000.0 + 0.1 * terrainData[i];\n min = Math.min(min, el);\n max = Math.max(max, el);\n }\n return [min, max];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1887,"value":"xyz = ({\n \"Grand Canyon, AZ, USA\": { x: 381, y: 802, z: 11 },\n \"Mount Elbert, CO, USA\": { x: 418, y: 781, z: 11 },\n \"Mount Rainier, WA, USA\": { x: 331, y: 721, z: 11 },\n \"Mount Fuju, Japan\": { x: 1813, y: 808, z: 11 },\n \"Mount Everest\": { x: 379, y: 214, z: 9 },\n \"Santa Cruz Mountains, CA, USA\": { x: 328, y: 795, z: 11 },\n \"Mount Whitney, CA, USA\": { x: 702, y: 1600, z: 12 },\n \"Mount Washington, NH, USA\": { x: 618, y: 742, z: 11 }\n}[location])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"tile = getTerrainTile(xyz)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}