31:T562,md`**Floorcasting** (or [heightmap](https://en.wikipedia.org/wiki/Heightmap) raycasting) is a [2.5D](https://en.wikipedia.org/wiki/2.5D) heightmap rendering algorithm, and a particular case of [raycasting](https://en.wikipedia.org/wiki/Ray_casting). It consists in generating the viewbox pixels by intersecting the corresponding rays coming from the observer with the heightmap. It can be done in different ways: * either by just sampling the heightmap (voxels), or by precisely interpolating the elevation between the grid vertices (an example of which can be found [here](https://js1k.com/2016-elemental/demo/2604)). * either by sampling the heightmap along the rays coming from the observer (thus generating pixels in columns), or by sampling transversaly across the prism of vision and enforce culling by keeping track of current highest point for each pixel column. It's been used in the [Voxel Space](https://en.wikipedia.org/wiki/Voxel_Space) engine which powered the **Comanche: Maximum Overkill** game in 1992. A great explanation can be found [here](https://github.com/s-macke/VoxelSpace). With the advance of computation power in modern computers, this technique is no longer used in games, but it has become [affordable for browsers](https://s-macke.github.io/VoxelSpace/VoxelSpace.html) and it's a very compact technique when code size is constrained (demoscene).`32:T1d01,locations = [ { id: "grossglockner", label: "Earth: Grossglockner, Carinthia/East Tyrol, Austria", source: "mapzen", coords: [13, 4383, 2877], start: { x: 480.53366858680477, y: 211.56005200137838, z: 80.54817516620786, θ: 20.298973163396973, φ: 0.09217622440170106 } }, { label: "Mars: Candidate Landing Site for 2020 Mission in Jezero Crater", source: "hirise", id: "ESP_045994_1985", range: [-2679.2, -2388.31], w500: 113, url: "ESP/ORB_045900_045999/ESP_045994_1985_ESP_046060_1985/DTEEC_045994_1985_046060_1985_U01", size: 1000, offset: { x: 130, y: 185 }, start: { x: 587.3935146219678, y: 260.7789501804898, z: 12.18961935596519, θ: -29.282751836603346, φ: -0.02850000000000005 } }, { label: "Mars: Unusual Depression Near Elysium Mons", source: "hirise", id: "PSP_005813_2150", range: [-4099.76, -3930.38], w500: 144, url: "PSP/ORB_005800_005899/PSP_005813_2150_PSP_005879_2150/DTEEC_005813_2150_005879_2150_A01", size: 1000, offset: { x: 300, y: 1100 }, start: { x: 581.1970623630365, y: 672.913433673224, z: 46.705444319780256, θ: -39.74440183660393, φ: -0.02185000000000084 } }, { label: "Mars: Clusters of Buttes and Mesas among Flows South of Western Cerberus Fossae", page: 8, size: 900, source: "hirise", id: "ESP_026040_1880", range: [-2749.57, -2640.98], w500: 120, url: "ESP/ORB_026000_026099/ESP_026040_1880_ESP_025684_1885/DTEED_026040_1880_025684_1885_U01", offset: { x: 200, y: 850 }, start: { x: 718.3495192110562, y: 373.3722542467526, z: 25.88628752328845, θ: -34.860576836603194, φ: 0.013499999999998593 } }, { label: "Mars: Martian Meanders and Scroll-Bars", page: 8, size: 800, source: "hirise", id: "ESP_020673_1750", range: [-2480.7, -2227.06], w500: 85, url: "ESP/ORB_020600_020699/ESP_020673_1750_ESP_020528_1750/DTEEC_020673_1750_020528_1750_A01", offset: { x: 110, y: 200 }, start: { x: 752.7485437411178, y: 665.2630198554128, z: 60.623197455760405, θ: -40.27975183660295, φ: 0.07154999999999899 } }, { label: "Mars: Channels South of the Base of Ascraeus Mons", size: 800, source: "hirise", id: "PSP_002486_1860", range: [6432.27, 6674.54], w500: 101, url: "PSP/ORB_002400_002499/PSP_002486_1860_PSP_001985_1860/DTEEC_002486_1860_001985_1860_U01", offset: { x: 210, y: 1000 }, start: { x: 426.16744765902945, y: 391.7335423604542, z: 33.02160926561662, θ: -36.55395183660314, φ: 0.05062499999999877 } }, { label: "Mars: Light-Toned Outcrops in Crater Wall in Mawrth Vallis", size: 1000, source: "hirise", id: "ESP_012873_2045", range: [-2662.07, -2262.93], w500: 111, url: "ESP/ORB_012800_012899/ESP_012873_2045_PSP_004052_2045/DTEEC_012873_2045_004052_2045_A01", offset: { x: 330, y: 1040 }, start: { x: 785.1025968753057, y: 764.9667056868877, z: 83.64645233112991, θ: -28.264876836603197, φ: 0.009999999999998531 } }, { label: "Mars: Zumba Crater: Fresh Crater with Impressive Ejecta/Ray Pattern", size: 650, source: "hirise", id: "PSP_002118_1510", range: [1707.34, 2347.44], w500: 80, url: "PSP/ORB_002100_002199/PSP_002118_1510_PSP_003608_1510/DTEEC_002118_1510_003608_1510_A01", offset: { x: 220, y: 1200 }, start: { x: 135.00147094581544, y: 490.32503527931794, z: 103.99227424637616, θ: -32.93205183660305, φ: 0.026099999999998763 } }, { label: "Mars: Layered Rock Outcrops in Southwest Candor Chasma", size: 1000, source: "hirise", id: "PSP_001918_1735", range: [782.07, 1300.01], w500: 149, url: "PSP/ORB_001900_001999/PSP_001918_1735_PSP_001984_1735/DTEEC_001918_1735_001984_1735_U01", offset: { x: 200, y: 400 }, start: { x: 422.81348579238846, y: 493.5832250356673, z: 65.58268020293603, θ: -35.619801836603344, φ: 0.0355499999999995 } }, { label: "Mars: Western Slope of Asimov Crater", size: 800, source: "hirise", id: "ESP_013611_1325", range: [-89.98, 976.09], w500: 89, url: "ESP/ORB_013600_013699/ESP_013611_1325_ESP_013110_1325/DTEEC_013611_1325_013110_1325_A01", offset: { x: 270, y: 1400 }, start: { x: 360.5779257362494, y: 270.0505003315045, z: 114.99460999277751, θ: -48.32332683660428, φ: 0.09349999999999636 } }, { label: "Mars: Intracrater Dune Changes", size: 1000, source: "hirise", id: "ESP_026609_1655", range: [433.31, 501.29], w500: 176, url: "ESP/ORB_026600_026699/ESP_026609_1655_ESP_026675_1655/DTEEC_026609_1655_026675_1655_U01", offset: { x: 220, y: 350 }, start: { x: 738.0661580055433, y: 51.719953692005376, z: 35.667913820282166, θ: -41.77127683660402, φ: 0.08329999999999821 } }, { label: "Mars: Becquerel Crater Dune and Yardang Interactions", size: 1000, source: "hirise", id: "ESP_034419_2015", range: [-3750.43, -3318.62], w500: 137, url: "ESP/ORB_034400_034499/ESP_034419_2015_ESP_033707_2015/DTEEC_034419_2015_033707_2015_A01", offset: { x: 300, y: 1000 }, start: { x: 676.1582783720646, y: 97.35047124783767, z: 111.36222730550891, θ: -35.21390183660569, φ: 0.09687500000000021 } }, { label: "Mars: Layered Deposits in Crater in Arabia Terra", size: 750, source: "hirise", id: "PSP_008520_2085", range: [-2821.92, -2293.22], w500: 90, url: "PSP/ORB_008500_008599/PSP_008520_2085_PSP_009232_2085/DTEEC_008520_2085_009232_2085_A01", offset: { x: 400, y: 2200 }, start: { x: 600.384784273509, y: 53.14243947801085, z: 93.02354690806281, θ: -29.19877683660563, φ: 0.013950000000000646 } }, { label: "Mars: Crater in Western Arabia Terra with Stair-Stepped Hills and Dark Dunes", size: 750, source: "hirise", id: "PSP_002047_1890", range: [-2574.89, -2258.81], w500: 113, url: "PSP/ORB_002000_002099/PSP_002047_1890_PSP_001902_1890/DTEEC_002047_1890_001902_1890_U01", offset: { x: 400, y: 2000 }, start: { x: 662.7511113126878, y: 22.191123431452603, z: 69.5117776098, θ: -35.46950183660557, φ: 0.07100000000000128 } }, { label: "Mars: Possible Glacier on Mesa Wall in Protonilus Mensae", size: 1000, source: "hirise", id: "ESP_019358_2225", range: [-2171.58, -520.51], w500: 132, url: "ESP/ORB_019300_019399/ESP_019358_2225_ESP_018857_2225/DTEEC_019358_2225_018857_2225_U01", offset: { x: 700, y: 1500 }, start: { x: 381.0061824730811, y: -178.32386693135592, z: 232.62974282335648, θ: -36.330326836605614, φ: 0.32405000000000034 } } /*{label: 'Moon: test', url: 'https://www.mapaplanet.org/explorer/images/lro_lola_gdr_dem_500.jpg', source: 'generic', start: {x: 0, y: 0, z: 50, θ: Math.PI/4, φ: 0}}*/ ]33:T7e3,viewof heightmap = { const { source, coords, vcrop, offset, size, w500, range, url } = location; const text = { mapzen: md`Earth data is fetched from [AWS](https://aws.amazon.com/fr/public-datasets/terrain) as tiles in [Terrarium PNG format](https://mapzen.com/documentation/terrain-tiles/formats/#terrarium). Credits to [Tom](https://beta.observablehq.com/@tmcw/isometric-real-world-terrarium-tiles) for the idea and the implementation. We import 4 tiles x 4 tiles to represent a wide area and yet keep a decent resolution. Different places have been selected for their dramatic scenery ([MapTiler](http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection) was very helpful), mainly U.S. because of the [3DEP](https://nationalmap.gov/elevation.html) 3-meter precision availability (sadly elevation and shading data seem to be unreliable at high altitudes, so Mount Everest and K2 do have some visible glitches).`, hirise: md`Martian data is fetched from the amazing [HiRISE DTM](https://www.uahirise.org/dtm) (Digital Terrain Model) dataset. Only low-res data is used ("extras" directories).` }[source]; // instanciate heightmap generator const gen = { mapzen: () => loadMapzenElevation(coords, vcrop), hirise: () => loadHiriseElevation(offset, size, w500, range, url), gsi: () => loadGsiElevation(coords, vcrop) }[source](); // prepare viewof elements const Nc = 256; const context = DOM.context2d(Nc, Nc, 1); const view = sideview(context.canvas, text); // setup workflow for view update const map256 = (val, [min, max]) => ((255 * (val - min)) / (max - min)) | 0; const f = (size || 1024) / Nc; const lev = (data, [i, j]) => data[(i * f) | 0][(j * f) | 0]; const grey = (value, range) => Array(3).fill(map256(value, range)); const mapper = ({ data, range }) => (i, j) => grey(lev(data, [i, j]), range); Async(gen) .map(hmap => (canvas(context, mapper(hmap)), hmap)) .last(data => view.dispatch({ ...data, location })); return view; }34:T469,viewof shadedmap = { const { heightmap: H, location } = heightmap_raw; const { coords, offset, size, url, source } = location; const N = H.data.length; const gen = { mapzen: () => loadMapzenNormal(location.coords), hirise: () => loadHiriseShading({ offset, size }, location.url), gsi: null }[location.source](); const text = { mapzen: md`Shading information is available as a normal map (encoded in a image) specifying the normal vector for each position in the heightmap.`, hirise: md`Hirise shading information is available directly as a greyscale bitmap image.` }[location.source]; // prepare viewof elements const Nc = 256; const context = DOM.context2d(Nc, Nc, 1); const view = sideview(context.canvas, text); const f = N / Nc; const lev = (data, [i, j]) => data[(i * f) | 0][(j * f) | 0]; const grey = value => Array(3).fill(value); const mapper = data => (i, j) => grey(lev(data, [i, j])); Async(gen) .map(cmap => (canvas(context, mapper(cmap)), cmap)) .last(cmap => view.dispatch({ ...heightmap_raw, colormap: { data: cmap } }) ); return view; }35:T410,viewof shadowedmap = { const Nc = 256; const { context, dispatch } = viewofCanvas(Nc, Nc); const shadowedmap = { ...shadedmap }; if (location.source == "mapzen") { const { heightmap, colormap, location } = shadedmap; const { data: H, ratio } = heightmap; const { data: S } = colormap; const N = H.length; const sun = sunElevation * (τ / 360); // sun elevation (in radians) const sp = Math.tan(sun) / ratio; const Sh = []; for (let i = 0; i < N; i++) { let max = 0; Sh[i] = []; for (let j = 0; j < N; j++) { // shadowing const h = H[i][j]; if (H[i][j] < max) Sh[i][j] = (S[i][j] * 0.3) | 0; else { Sh[i][j] = S[i][j]; max = h; } max -= sp; } } shadowedmap.colormap = { ...shadowedmap.colormap, data: Sh }; } dispatch(shadowedmap); const { data } = shadowedmap.colormap; const f = data.length / 256; return canvas(context, (i, j) => Array(3).fill(data[(i * f) | 0][(j * f) | 0]) ); }36:T89f,floorcast = ({ heightmap, colormap }, observer, params, image) => { const N = heightmap.length; const { x: x0, y: y0, z: z0, θ, φ, angleOfView } = observer; const defaults = { border: [30, 30, 30], cycle: false, ratio: 1 }; const { sampling, ratio, border, cycle } = { ...defaults, ...params }; const { width: W, height: H, data: D } = image; const [W2, H2] = [W / 2, H / 2]; const dp = W << 2; const indexes = new Array(W); for (let i = 0, index = D.length; i < W; indexes[i++] = index, index += 4); // index in bitmap const jcs = new Array(W).fill(0); // max drawn pixel height const bdr = new Array(W).fill(0); // border flag // Useful constants const aov = Math.tan(angleOfView / 2); const K0 = W2; const K1 = H2 + K0 * Math.tan(-φ); const K2 = (ratio / aov) * K0; const [cos, sin] = [Math.cos(θ), Math.sin(θ)]; const [csw, snw] = [aov * cos, aov * sin]; const [xs, ys] = [cos - snw, sin + csw]; const [csw2, snw2] = [csw / W2, snw / W2]; // 'Static' allocation of variables to avoid GC let x, y, dx, dy, col, jc, j, X, Y, rgb, index, K3, K4, ok; for (let { d, palette } of sampling) { x = x0 + d * xs; y = y0 + d * ys; dx = d * snw2; dy = -d * csw2; K3 = K2 / d; K4 = K1 - K3 * z0; for (let i = 0; i < W; i++, x += dx, y += dy) { jc = jcs[i]; if (jc < H) { ok = x >= 0 && y >= 0 && x < N && y < N; if (!ok && cycle) { x %= N; if (x < 0) x += N; y %= N; if (y < 0) y += N; ok = true; } X = x | 0; Y = y | 0; j = (K4 + (ok && heightmap[X][Y] * K3)) | 0; if (j > jc) { if (j > H) j = H; rgb = ok && (bdr[i] ? palette[colormap[X][Y]] : border); index = indexes[i]; do { index -= dp; if (ok) { //D.set(rgb, index); // slightly less performant D[index] = rgb[0]; // red D[index + 1] = rgb[1]; // green D[index + 2] = rgb[2]; // blue } } while (j > ++jc); jcs[i] = j; indexes[i] = index; } bdr[i] |= ok; } } } }37:T481,orbitalEvents = canvas => { const [rx, ry, rz] = [3e-3, 6e-3, 3e-4]; return Async.observe(update => { const change = ([dx, dy, dz]) => update({ dρ: Math.exp(dz * rz), dθ: -dx * rx, dφ: dy * ry }); const mc = new Hammer.Manager(canvas); mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 })); mc.add(new Hammer.Pinch({ threshold: 0 }).recognizeWith(mc.get("pan"))); let x, y, s; const pas = ({ srcEvent: e }) => ([x, y] = [e.layerX, e.layerY]); const translate = e => [-x + (x = e.layerX), -y + (y = e.layerY)]; const pam = ({ srcEvent: e }) => change([...translate(e), 0]); const pis = e => (s = e.scale); const pim = e => change([0, 0, Math.log(s / (s = e.scale))]); mc.on("panstart", pas); mc.on("panmove", pam); mc.on("pinchstart", pis); mc.on("pinchmove", pim); const wh = e => (change([0, 0, e.deltaY]), e.preventDefault()); canvas.addEventListener("wheel", wh); return () => { mc.off("panstart", pas); mc.off("panmove", pam); mc.off("pinchstart", pis); mc.off("pinchmove", pim); canvas.removeEventListener("wheel", wh); }; }); }38:T60a,orbitalRenderer = (data_, context) => { const canvas = context.canvas; const { width: W, height: H } = canvas; const orbitalEvents_ = orbitalEvents(canvas); //const orbitalEvents_ = Async.ticker(60, () => ({ dθ: τ / 800 })); const [data1_, data2_] = Async(data_).fork(); const origin = size => [size / 2, size / 2, 0]; const coords = size => [2.5 * size, τ / 20, τ / 6]; const position = size => ({ center: origin(size), ρθφ: coords(size) }); const size = ({ heightmap }) => heightmap.data.length; const setPosEvents_ = data2_.map(data => position(size(data))); const orbiter = Orbiter([0, τ / 5]); const coords_ = Async.merge([setPosEvents_, orbitalEvents_], orbiter); const params_ = Async({ angleOfView: τ / 12 }); const { image, reset } = imageWithBackground([W, H], Array(4).fill(255)); const sampler = orbitalSampler(); const combinator = ([{ heightmap, colormap }, coords, { angleOfView }]) => { reset(); const [center, ρθφ] = coords; const { data: hdata, ratio } = heightmap; const { data: cdata, palette } = colormap; const data = { heightmap: hdata, colormap: cdata }; const sampling = sampler(0.71 * hdata.length, ρθφ, palette); const observer = { ...sphericalToAbsolute(center, ρθφ), angleOfView }; observer.z *= 0.26 / ratio; floorcast(data, observer, { sampling, ratio }, image); return image; }; const putImage = image => context.putImageData(image, 0, 0); consume(Async.combine([data1_, coords_, params_], combinator), putImage); }39:T7c6,exploreEvents = (canvas, coords, speed) => Async.observe(update => { const d30 = τ / 12; const wh = e => { const delta = -e.deltaY / 15; coords.x += delta * Math.cos(coords.θ); coords.y += delta * Math.sin(coords.θ); coords.z = Math.max(0, coords.z + delta * Math.sin(coords.φ)); update(coords); e.preventDefault(); }; canvas.addEventListener("wheel", wh); const md = e => { const [x0, y0] = [e.layerX, e.layerY]; let [dx, dy] = [0, 0]; let moving, step; const mm = e => { [dx, dy] = [e.layerX - x0, e.layerY - y0]; e.preventDefault(); }; const mu = e => { moving = false; canvas.removeEventListener("mousemove", mm); canvas.removeEventListener("mouseup", mu); canvas.removeEventListener("mouseleave", mu); e.preventDefault(); }; if (e.button == 1) { step = () => { coords.θ -= dx / 5e3; coords.φ = Math.min(d30, Math.max(-d30, coords.φ - dy / 5e3)); update(coords); if (moving) requestAnimationFrame(step); }; } else { step = () => { coords.x += speed * Math.cos(coords.θ); coords.y += speed * Math.sin(coords.θ); coords.z = Math.max(0, coords.z + speed * Math.sin(coords.φ)); coords.θ -= dx / 4e4; coords.φ = Math.min(d30, Math.max(-d30, coords.φ - dy / 4e4)); update(coords); if (moving) requestAnimationFrame(step); }; } canvas.addEventListener("mousemove", mm); canvas.addEventListener("mouseup", mu); canvas.addEventListener("mouseleave", mu); moving = true; step(); e.preventDefault(); e.stopPropagation(); }; canvas.addEventListener("mousedown", md); update(coords); return () => { canvas.removeEventListener("wheel", wh); canvas.removeEventListener("mousedown", md); }; })3a:T42d,explorer = (heightmap, colormap, ratio, [W, H], start, options) => { const context = DOM.context2d(W, H, 1); const defaults = { speed: 1, fog: distanceFog, cycle: false }; const { speed, fog, cycle } = { ...defaults, ...options }; const aov = angleOfView * (τ / 360); const { shade, palette } = colormap; const background = colormap.background || [255, 255, 255]; const { image, reset } = imageWithBackground([W, H], [...background, 255]); const { nbDists: nb, pow } = samplingParameters; const smplParams = { range: minmax, nb, pow }; const sampling = distSample(smplParams, { palette, fog, color: background }); const border = [30, 30, 30]; const data = { heightmap, colormap: colormap.data }; const params = { sampling, ratio, border, cycle }; consume( exploreEvents(context.canvas, start, speed).map(coords => { const observer = { ...coords, z: coords.z / ratio, angleOfView: aov }; reset(); floorcast(data, observer, params, image); context.putImageData(image, 0, 0); }) ); return context.canvas; }3b:T476,md`This notebook has only a demonstration purpose, and some free access tools ([the Areo Browser](http://areobrowser.com) for Mars and [the HRSC data viewer](http://maps.planet.fu-berlin.de) for instance) will provide far better results using mainstream 3D technologies. However, it achieves the following goals: * Compact algorithms * No WebGL * No DTM data stored, all is fetched and processed on-demand * A somewhat realistic rendering (real or computed shading/shadowing) It was also an opportunity to experiment on some Observable topics: * [Generators and async generators](https://beta.observablehq.com/@mbostock/generator-cells-functions-and-objects) * [Showing progress](https://beta.observablehq.com/@mbostock/showing-progress) * [Animation loops](https://beta.observablehq.com/@mbostock/animation-loops) * [Continuous user interaction through mutables](https://beta.observablehq.com/@mbostock/d3-versor-dragging) * [GraphViz integration](https://beta.observablehq.com/@mbostock/graphviz) * [How to fetch an image and access pixel data](https://beta.observablehq.com/@ehouais/how-to-get-image-data-from-an-url-or-a-file)`3c:T56b,loadGsiElevation = async function*(coords, vcrop) { const [l, x, y] = coords; const S = 256; const N = 4 * S; const hunit = (19568 * // tile size (in meters) at zoom level 11 2 ** (11 - l)) / // zoomed/dezoomed to heightmap zoom level S; // nb of cells in tile length const vunit = 1 / 256; // Heights values are in 1/256th of meters // Initialise array const H = array(N, i => array(N, j => 0)); const range = Range( vcrop ? [vcrop[0] / vunit, vcrop[1] / vunit] : [+Infinity, -Infinity] ); // Load 4x4 tiles (each one being 256x256 pixels) into the 1024x1024 heightmap const elevation = { data: H, hunit, vunit }; const subSquares = []; // list of promises let left = 16; for (let I = 0; I < 4; I++) { for (let J = 0; J < 4; J++) { const [X, Y] = [I * S, (3 - J) * S]; subSquares.push( fetchTile({ z: l, x: x + I, y: y + J }).then(data => { for (let j = 0; j < 256; j++) for (let i = 0; i < 256; i++) { let h = data[j][i]; if (vcrop) h = range.constrain(h); else range.expand(h); H[X + i][Y + (S - (j + 1))] = h; } return --left; }) ); } } for await (const left of Async.merge(subSquares.map(p => Async(p)))) { yield { ...elevation, range: range.bounds(), pending: left != 0 }; } }3d:[] 2f:{"title":"Heightmap rendering using a floorcasting algorithm","cells":[{"id":0,"value":"md`# Heightmap rendering using a floorcasting algorithm`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4430,"value":"md`We could have used a [procedurally generated](https://beta.observablehq.com/@ehouais/heightmap-generation-using-spatial-subdivision-algorith) heightmap, but here we'll use real elevation data. All models are fetched and processed on-demand, no pre-processed data is stored anywhere.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4869,"value":"md`## Locations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4438,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4860,"value":"viewof location = {\n const defaultId = urlParam(\"location\")||\"ESP_045994_1985\";\n const selected = isSelected => (isSelected ? { selected: \"\" } : {});\n const attributes = id => ({ value: id, ...selected(id == defaultId) });\n const option = loc => domNode('option', attributes(loc.id), loc.label);\n const select = domNode('select', ...locations.map(option));\n const location = id => locations.find(loc => loc.id == id);\n const ids_ = Async.domEvents(select, 'input').map(e => e.target.value);\n return dispatcherNode(select, ids_.startWith(defaultId).map(location));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4866,"value":"md`## Elevation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4056,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3888,"value":"size = {\n const { data, units } = heightmap;\n const [hunit, vunit] = units;\n const size = floor((data.length * hunit) / 1000, 1);\n return md`This heightmap represents a ${size}km x ${size}km square.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10772,"value":"viewof heightmap_raw = {\n const { context, dispatch } = viewofCanvas(width / 2, width / 3);\n const { data, units, range, location } = heightmap;\n const [hunit, vunit] = units;\n const [min, max] = range;\n const array2D = ([W, H], cell) => array(W, i => array(H, j => cell(i, j)));\n const dims = array => [array.length, array[0].length];\n const hdata = array2D(dims(data), (i, j) => data[i][j] - min);\n const palette = Palette();\n const f = 256 / (max - min);\n const color = val => Array(3).fill((val * f) | 0);\n const cdata = hdata.map(row => row.map(val => palette.add(color(val))));\n const res = {\n heightmap: { data: hdata, hunit, ratio: vunit / hunit },\n colormap: { data: cdata, palette: palette.colors() },\n location\n };\n dispatch(res);\n orbitalRenderer(res, context);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11025,"value":"md`## Shading`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7629,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":4871,"value":"md`An arbitrary location-specific or default base color is chosen since we don't have any real-life color information corresponding to the elevation data (see why [here](https://www.uahirise.org/faq/#Colors) for Hirise data). At render time and for each sampled heightmap position, this color is blended with the shading to obtain the actual render RGB values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7754,"value":"baseColor = shadowedmap.location.color || [255, 210, 150]","pinned":false,"hidden":false,"mode":"ojs"},{"id":11054,"value":"viewof coloredmap = {\n const { context, dispatch } = viewofCanvas(width / 2, width / 3);\n const { colormap: cmap } = shadedmap;\n const palette = Palette();\n const color = val => baseColor.map(c => ((val * c) / 256) | 0);\n const data = cmap.data.map(row => row.map(val => palette.add(color(val))));\n const res = { ...shadedmap, colormap: { data, palette: palette.colors() } };\n orbitalRenderer(res, context);\n dispatch(res);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7666,"value":"md`AWS-hosted [normal tiles](https://mapzen.com/documentation/terrain-tiles/formats/#normal) allow choosing sun elevation (in degrees) to generate shading along with corresponding artificial shadowing and bring yet a bit more realism. Mars shading information is only available in greyscale PNG tiles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7559,"value":"viewof sunElevation = {\n const s = slider({\n min: 0,\n max: 90,\n step: 0.1,\n value: 30\n });\n s.input.disabled = !heightmap || heightmap.location.source != \"mapzen\";\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5664,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":7459,"value":"md`## Sampling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7466,"value":"md`The floorcasting algorithm samples the heightmap/colormap transversally for each pixel column of the viewport, and at a growing distance until the specified horizon distance is reached.\n\nThe distance distribution must be tuned to ensure good visual quality while keeping the number of samples compatible with the desired framerate.\n\nThis represents a maximum of ${tex`nb_{distances} \\times width_{viewport}`} samples. The actual number can be lower since the sampling for a pixel column stops when all its pixels have been set, which can happen before the horizon has been reached.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7500,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7491,"value":"md`The following floorcasting implementation is loosely derived from https://s-macke.github.io/VoxelSpace/VoxelSpace.html. It is no-WebGL, dependency-free js, follows a voxel/transverse variant of the algorithm, and is optimized to allow decent framerate.\n\nIt uses the given parameters to precompute and return a function that only needs the observer position to generate the rendered view.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8321,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":5634,"value":"md`## Global rendering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5637,"value":"md`We first floorcast a global perspective view of the heightmap, from a long distance and with a small angle of view.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8326,"value":"distSample = ({ range: [from, to], nb, pow }, { palette, fog, color }) => {\n const distSampling = r => from + (to - from) * r ** pow;\n const sample = [...Array(nb)].map((_, i) => distSampling(i / nb));\n const fogIntensity = d => d ** (1 / fog);\n const fogPalette = d => interpolatePalette(palette, color, fogIntensity(d));\n const samplePalette = fog ? r => fogPalette(r) : r => palette;\n return sample.map(d => ({ d, palette: samplePalette(d / to) }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8827,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":9133,"value":"orbitalSampler = () => {\n let cache = [0];\n const prms = (range, palette) => [{ range, nb: 800, pow: 1.2 }, { palette }];\n const rangeSample = (range, palette) => distSample(...prms(range, palette));\n const range = (ρ, radius) => [Math.max(0, ρ - radius), ρ + radius];\n const sample = (ρ, radius, palette) => rangeSample(range(ρ, radius), palette);\n const updater = (v, gen) => (cache = cache[0] == v ? cache : [v, gen()]);\n const cacheUpdater = (ρ, ...args) => updater(ρ, () => sample(ρ, ...args));\n return (radius, [ρ, θ, φ], palette) => cacheUpdater(ρ, radius, palette)[1];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8888,"value":"Orbiter = function([φmin, φmax] = [-τ / 4, τ / 4]) {\n let [xc, yc, zc] = [0, 0, 0];\n let [ρ, θ, φ] = [0, 0, 0];\n return event => {\n if (event.center) [xc, yc, zc] = event.center;\n if (event.dx) xc += event.dx;\n if (event.dy) yc += event.dy;\n if (event.dz) yc += event.dz;\n if (event.ρθφ) [ρ, θ, φ] = event.ρθφ;\n if (event.dρ) ρ *= event.dρ;\n if (event.dθ) θ += event.dθ;\n if (event.dφ) φ = Math.max(φmin, Math.min(φmax, φ + event.dφ));\n return [[xc, yc, zc], [ρ, θ, φ]];\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8986,"value":"sphericalToAbsolute = ([xc, yc, zc], [ρ, θ, φ]) => ({\n x: xc + ρ * Math.cos(θ),\n y: yc + ρ * Math.sin(θ),\n z: zc + ρ * Math.tan(φ),\n θ: θ + τ / 2,\n φ: -φ\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9018,"value":"imageWithBackground = ([width, height], bgColor) => {\n const image = new ImageData(width, height);\n const data = image.data;\n const background = fillArray(new Uint8ClampedArray(data.length), bgColor);\n const reset = () => data.set(background);\n return { image, reset };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8775,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":7314,"value":"md`Use the mouse/wheel to move/zoom`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10875,"value":"orbitalCanvas = (heightmap, [width, height]) => {\n const context = DOM.context2d(width, height, 1);\n orbitalRenderer(heightmap, context);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7852,"value":"viewof orbit = orbitalCanvas(coloredmap, [width, (width * (3 / 5)) | 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":7979,"value":"html`direct link to this rendering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4837,"value":"md`## Flight over rendering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7484,"value":"md`Now we want to allow a flight over the heightmap, as from an ultralight aircraft.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7284,"value":"md`### Sky & distance fog`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7281,"value":"md`To add some realism, we choose an arbitrary sky color, depending on location`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11132,"value":"skyColor = {\n const { location, colormap } = coloredmap;\n const sun = elevation => value => Math.floor((elevation / 90) ** 0.1 * value);\n const earthSky = elevation => [225, 240, 255].map(sun(elevation));\n const mars = location.source == \"hirise\";\n const color = mars ? [240, 240, 235] : earthSky(sunElevation);\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5431,"value":"md`The following parameter specifies how terrain progressively blends with the sky when distance increases, A.K.A. \"[distance fog](https://en.wikipedia.org/wiki/Distance_fog)\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5439,"value":"viewof distanceFog = slider({\n min: 0,\n max: 5,\n step: 0.01,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10460,"value":"{\n const [W, H] = [width, 100];\n const [rs, gs, bs] = skyColor;\n const mix = (a, b, f) => (a + f * (b - a)) | 0;\n const exp = distanceFog && 1 / distanceFog;\n const palette = coloredmap.colormap.palette;\n const nb = palette.length;\n return canvas([W, H], (i, j) => {\n const [r, g, b] = palette[(nb * (i / W)) | 0];\n const f = j < 50 && exp ? (j / 50) ** exp : 1;\n return [mix(r, rs, f), mix(g, gs, f), mix(b, bs, f), 255];\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7510,"value":"md`For each distance in the sampling distribution, a palette is precomputed using this parameter, then used at render time to get actual pixel colors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5474,"value":"md`### Rendering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8724,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":8344,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":7488,"value":"md`Use left-click/wheel to move, middle-click to rotate`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7906,"value":"{\n const { heightmap, colormap, location } = coloredmap;\n const { data: hdata, ratio } = heightmap;\n const shademap = { ...colormap, background: skyColor };\n const dims = [width, (width * 0.6) | 0];\n const params = { speed: 1.5 };\n return explorer(hdata, shademap, ratio, dims, location.start, params);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7503,"value":"md`Here are the distance sampling parameters used for this rendering:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6456,"value":"viewof angleOfView = slider({\n title: 'angle of view',\n min: 10,\n max: 170,\n step: 1,\n value: 90,\n format: v => `${v}°`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11214,"value":"viewof minmax = rangeSlider({\n min: 0,\n max: 1500,\n value: this ? this.value : [0, 1000],\n step: 10,\n title: 'distance sampling range'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6935,"value":"viewof samplingParameters = sliders({\n nbDists: {\n title: \"nb steps\",\n min: 100,\n max: 1000,\n step: 1,\n value: 600\n },\n pow: {\n title: \"power\",\n min: 0.1,\n max: 10,\n step: 0.01,\n value: 1.7\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5909,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4435,"value":"md`## About this notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4713,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2674,"value":"md`Further possible improvements:\n* altitude & heading (compass ?) indicators\n* leverage additional real-world terrain information: photographic textures\n* POI indication\n* get elevation data of the Moon\n* proposal for normative notebook graph representation\n* Adapt max distance to nb. iterations\n* Default animation\n* \"reset position\" button`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10957,"value":"md`## Mapzen utility functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10227,"value":"loadMapzen4x4Tiles = (type, [l, xo, yo]) => {\n // utilitary functions\n const blob = url => fetch(url).then(response => response.blob());\n const imageData = url => blob(url).then(blob => getImageData(blob));\n\n // setup request URLs\n const root = `https://elevation-tiles-prod.s3.amazonaws.com/${type}`;\n const url = (i, j) => `${root}/${l}/${xo + i}/${yo + j}.png`;\n // setup array of fetch promises\n const img = (i, j) => imageData(url(i, j)).then(img => [img, [i, j]]);\n const promises = array(4, i => array(4, j => img(i, j))).flat();\n\n return Async.fromPromises(promises);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3881,"value":"loadMapzenElevation = function(coords) {\n const [l, xo, yo] = coords;\n const S = 256;\n const N = 4 * S;\n const tileSize = l => 19568 * 2 ** (11 - l);\n const data = array(N, i => array(N, j => 0));\n const { expand, bounds } = Range([+Infinity, -Infinity]);\n const heightmap = { data, units: [tileSize(l) / S, 1 / 256] };\n const hRange = () => ({ ...heightmap, range: bounds() });\n const rgb2h = ([r, g, b]) => (r * 256 + g - 32768) * 256 + b;\n const abs = ([I, J], [i, j]) => [I * S + i, (4 - J) * S - 1 - j];\n const setHeight = ([i, j], h) => ((data[i][j] = h), expand(h));\n const absDecoder = (coords, rgb) => setHeight(coords, rgb2h(rgb));\n const decoder = orig => (coords, rgb) => absDecoder(abs(orig, coords), rgb);\n const img2h = ([img, orig]) => (decodeImage(img, decoder(orig)), hRange());\n return loadMapzen4x4Tiles('terrarium', coords).map(img2h);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4771,"value":"loadMapzenNormal = function(coords) {\n const S = 256;\n const N = 4 * S;\n const shade = array(N, i => new Uint8ClampedArray(N));\n const sun = sunElevation * (τ / 360); // sun elevation (in radians)\n const [cos, sin] = [2 * Math.cos(sun), 2 * Math.sin(sun)];\n const processImage = ([image, [I, J]]) => {\n const [I0, J0] = [I * S, (4 - J) * S - 1];\n decodeImage(image, ([i, j], [r, g, b]) => {\n const [I, J] = [I0 + i, J0 - j];\n shade[I][J] = -(g - 128) * cos + (b - 128) * sin;\n });\n return shade;\n };\n return loadMapzen4x4Tiles('normal', coords).map(processImage);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10961,"value":"md`## Hirise utility functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10358,"value":"loadHiriseImageData = async (path, type) => {\n const root = `https://hirise-pds.lpl.arizona.edu/PDS/EXTRAS/DTM`;\n const url = `${root}/${path}.${type}.jpg`;\n const blob = await corsFetch(url).then(response => response.blob());\n return await getImageData(blob);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4501,"value":"loadHiriseElevation = async function*({ x, y }, N, w500, [min, max], path) {\n const units = [500 / w500, (max - min) / 256];\n const H = array(N, i => array(N, j => 0));\n const imageData = await loadHiriseImageData(path, 'ab');\n const { data } = clipImage(imageData, [x, y], [N, N]);\n const range = Range();\n for (let i = 0; i < N; i++) {\n for (let j = 0; j < N; j++) {\n const h = data[(j * N + i) * 4];\n H[i][N - 1 - j] = h;\n range.expand(h);\n }\n }\n\n yield { data: H, units, range: range.bounds() };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7646,"value":"loadHiriseShading = async function*({ offset: { x, y }, size: N }, path) {\n const shadingData = await loadHiriseImageData(path, 'sa');\n const sd = shadingData.data;\n\n // Extract shading data from bitmap\n const S = new Array(N);\n const di = shadingData.width * 4;\n const dj = N - 1 + y;\n for (let i = 0; i < N; i++) {\n S[i] = new Uint8ClampedArray(N);\n let index = y * di + (i + x) * 4;\n for (let j = y; j < y + N; j++, index += di) {\n S[i][dj - j] = sd[index];\n }\n }\n\n yield S;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10973,"value":"md`## GSI utility functions (not used yet)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8503,"value":"import {fetchTile} from \"@sw1227/fetch-elevation-tile\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8502,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":11019,"value":"gsi = () => {\n const S = new Array(N);\n for (let i = 0; i < N; i++) S[i] = new Uint8ClampedArray(N);\n const sunElevation = 30 * (τ / 360); // sun elevation (in radians)\n const [ys, zs] = [-Math.cos(sunElevation), Math.sin(sunElevation)];\n const sp = -zs / ys;\n const shadow = 0.8;\n\n for (let x = 0; x < 256; x++) {\n let max = 0;\n for (let y = 0; y < 256; y++) {\n const h = H[x][y];\n\n // shading\n const [y1, y2] = [(y + 256 - 1) % 256, (y + 1) % 256];\n const [dy, dh] = [2, H[x][y1] - H[x][y2]];\n let s = Math.max(0, ys * dh + zs * 2) / Math.hypot(2, dh);\n\n // shadowing\n if (h >= max) max = h;\n else s *= 1 - shadow;\n max -= sp;\n\n S[x][y] = s;\n }\n }\n //localDispatch({ data: S, sunElevation });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4445,"value":"md`## Utility functions and dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6763,"value":"τ = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":9755,"value":"array = (size, mapper) => Array.from(Array(size), (_, i) => mapper(i))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3845,"value":"import {\n Range,\n corsFetch,\n decodeImage,\n viewofCanvas,\n floor,\n sliders,\n fillArray,\n interpolatePalette,\n canvas\n} from \"@ehouais/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11246,"value":"import { getImageData } from \"@ehouais/how-to-get-image-data-from-an-url-or-a-file\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10616,"value":"clipImage = (imageData, [x, y], [sx, sy]) => {\n const { width, height } = imageData;\n const context = DOM.context2d(width, height, 1);\n context.putImageData(imageData, 0, 0);\n return context.getImageData(x, y, sx, sy);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10992,"value":"sideview = (canvas, text) => {\n const view = html`

`;\n Object.assign(canvas.style, { float: 'left', 'margin-right': '20px' });\n view.append(canvas, text);\n view.dispatch = value => {\n view.value = value;\n view.dispatchEvent(new CustomEvent(\"input\"));\n };\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11211,"value":"import {rangeSlider} from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8360,"value":"Hammer = require(\"https://hammerjs.github.io/dist/hammer.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8979,"value":"import { Async } from \"71bde4d5b2990b69\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9860,"value":"urlParam = name => new URLSearchParams(html``.search).get(name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9864,"value":"domNode = (tagName, attributes, ...children) => {\n const node = DOM.element(tagName);\n const setAttribute = ([name, value]) => node.setAttribute(name, value);\n Object.entries(attributes).forEach(setAttribute);\n node.append(...children);\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9928,"value":"dispatcherNode = async function*(node, iterator) {\n const container = domNode('div', {}, node);\n yield container;\n for await (const value of iterator) {\n container.value = value;\n container.dispatchEvent(new Event(\"input\"));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10787,"value":"Palette = (q = 0) => {\n const palette = new Array()\n const lut = new Map()\n return {\n add: ([r, g, b]) => {\n r ^= q; g ^= q; b ^= q\n const id = '' + (0x1000000 + (b | (g << 8) | (r << 16))).toString(16).slice(1)\n if (lut.has(id)) return lut.get(id)\n const index = palette.length\n lut.set(id, index)\n palette.push([r|0, g|0, b|0])\n return index\n },\n colors: () => palette\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10857,"value":"consume = async (iterator, cb) => {\n const next = async () => {\n const { value, done } = await iterator.next();\n if (!done) {\n cb && cb(value);\n requestAnimationFrame(next);\n }\n };\n next();\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}