32:T8a6,| | Description | Cell | Time (ms) | |----|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|---------------| | 1. | The LAZ point cloud is parsed using [@loaders.gl/las](https://loaders.gl/docs/modules/las/api-reference/las-loader) | data | ${loadingMS} | | 2. | Delete duplicated points (deleted: ${data.attributes.POSITION.value.length-points.length*3}) | points | ${sortDataMS} | | 3. | X/Y coordinates of points are stored in a [spatial index (Flatbush)](https://github.com/mourner/flatbush) | index | ${indexingMS} | | 4. | A ${gridSize} * ${gridSize} grid is created. For each point in the grid, the spatial index is queried to find its closest neighbor. The elevation from that point is used in the final mesh. | terrain | ${terrainMS} | | 5. | a MARTINI mesh is created from the elevation grid | geometry | ${martiniMS} | | | | |${indexingMS+terrainMS}| | 3.a) | Sort the raw X/Y coordinates in a grid by the shape (${gridSize}, ${gridSize}, amount of datapoints) | grid | ${createGridMS} | | 4.a) | A ${gridSize} * ${gridSize} grid is created. The elevation is calculated as the mean of every point in each cell.| terrainMean | ${createTerrainMS} | | | | |${createGridMS+createTerrainMS}| | 3.b) | A ${gridSize} * ${gridSize} grid is created with a grid based algorithm (quiet similar to 3.a but faster). | terrainGridBased | ${gridBasedMS} | 33:T4f8,points = { // filter points --> delete same (x, y)-coordinates with different z-values const rawPoints = data.attributes.POSITION.value; const formattedPoints = []; //[[x1, y1, z1], ...] for (let i=0; i b[2] - a[2]); // Filter out duplicates based on x and y coordinates let maxZValues = {}; for (let point of formattedPoints) { // Create a string representation of the x and y coordinates let coordString = `${point[0]},${point[1]}`; // If the coordinates are not in the hash map or the current point has a greater z-value, update the hash map if (!maxZValues[coordString] || point[2] > maxZValues[coordString][2]) { maxZValues[coordString] = point; } } // Convert the hash map to an array const filteredData = Object.values(maxZValues); const endTime = new Date() mutable sortDataMS = endTime-startTime return filteredData } else { return formattedPoints } }34:T967,createTerrainMonteCarlo = (points) => { // create random indices --> sort points of indices let formattedPoints = []; //[[x1, y1, z1], ...] for (let i=0; i formattedPoints[ind]); const randomXSorted = randomPoints.sort((a, b) => { if (a[0] < b[0]) { return -1; } else if (a[0] > b[0]) { return 1; } else { return 0; } }); let finalGrid = new Float32Array(gridSize**2); let nextX = aequidistance[0]; const minX = bbox.minX; let nextY = aequidistance[1]; const minY = bbox.minY; let xRow = []; let counterX = 0; let counterY = 0; let yRow = []; randomXSorted.forEach((point, ind) => { if (point[0] < minX+nextX) { xRow.push(point) } else { xRow.sort((a, b) => { if (a[1] < b[1]) { return -1; } else if (a[1] > b[1]) { return 1; } else { return 0; } }) .forEach((pointS, y) => { if (pointS[1] < minY+nextY) { yRow.push(point[2]); } else { finalGrid[counterX*gridSize+y]=d3.mean(yRow) nextY += aequidistance[1]; yRow = []; } }); finalGrid[counterX*gridSize+counterY]=d3.mean(yRow.length ? [0]:yRow) counterX++; nextX += aequidistance[0]; yRow = []; } }) /* if (point[0] === prevX) { xRow.push(point) } else { xRow.sort((a, b) => { if (a[1] < b[1]) { return -1; } else if (a[1] > b[1]) { return 1; } else { return 0; } }) .forEach((sPoint, sInd) => finalGrid[ind-xRow.length+sInd] = sPoint[2]) prevX = point[0]; xRow = []; } }) for (let x=0; x { if (a[1] < b[1]) { return -1; } else if (a[1] > b[1]) { return 1; } else { return 0; } }) .forEach((point, y) => finalGrid[x*gridSize + y] = point[2]); } */ return finalGrid }35:T6e6,createGrid = (points) => { // create uniform grid const formattedPoints = []; //[[x1, y1, z1], ...] for (let i=0; i { if (a[0] < b[0]) { return -1; } else if (a[0] > b[0]) { return 1; } else { return 0; } }); // split this array into gridsize-length arrays with distance between first and last element of aequidistantFactorX const colArray = []; let tempArray = []; let xStart = bbox.minX; let counterCol = 1; for (let i=0; i= counterCol*aequidistance[0]) { colArray.push(tempArray); tempArray = []; counterCol += 1; } else tempArray.push(formattedPoints[i]) } // sort each x-column for y-coordinates colArray.forEach((col) => col.sort((a, b) => { if (a[1] < b[1]) { return -1; } else if (a[1] > b[1]) { return 1; } else { return 0; } })); // split each column into gridsize-length arrays with distance between first and last element of aequidistantFactorY const xColumns = []; let yStart = bbox.minY; let xColumn = [] let counterRow = 1; colArray.forEach((col) => { xColumn = []; tempArray = []; counterRow = 1; for (let i=0; i= counterRow*aequidistance[1]) { xColumn.push(tempArray); tempArray = []; counterRow += 1; } else tempArray.push(col[i]) } xColumns.push(xColumn); }) return xColumns //sorted array of shape (gridsize, gridsize, number of Points in each cell) }36:T42d,bbox = { let minX = data.attributes.POSITION.value[0]; let minY = data.attributes.POSITION.value[1]; let minZ = data.attributes.POSITION.value[2]; let maxX = data.attributes.POSITION.value[0]; let maxY = data.attributes.POSITION.value[1]; let maxZ = data.attributes.POSITION.value[2]; for (let i = 0; i < data.attributes.POSITION.value.length; i += 3) { if (data.attributes.POSITION.value[i] < minX) minX = data.attributes.POSITION.value[i]; if (data.attributes.POSITION.value[i + 1] < minY) minY = data.attributes.POSITION.value[i + 1]; if (data.attributes.POSITION.value[i + 2] < minZ) minZ = data.attributes.POSITION.value[i + 2]; if (data.attributes.POSITION.value[i] > maxX) maxX = data.attributes.POSITION.value[i]; if (data.attributes.POSITION.value[i + 1] > maxY) maxY = data.attributes.POSITION.value[i + 1]; if (data.attributes.POSITION.value[i + 2] > maxZ) maxZ = data.attributes.POSITION.value[i + 2]; } return { minX, minY, minZ, maxX, maxY, maxZ }; }37:T489,geometryGridBased = { const error = 0; const martini = new Martini(gridSize); const tile = martini.createTile(terrainGridBased); const mesh = tile.getMesh(error); const geometry = new THREE.BufferGeometry(); const vertices = new Float32Array((mesh.vertices.length / 2) * 3); const terrainExaggeration = 1; let index = 0; for (let i = 0; i < mesh.vertices.length / 2; i++) { let x = mesh.vertices[i * 2], y = mesh.vertices[i * 2 + 1]; vertices[index++] = x * aequidistance[0] + bbox.minX; vertices[index++] = y * aequidistance[1] + bbox.minY; vertices[index++] = terrainGridBased[x * gridSize + y] * terrainExaggeration; } geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3)); geometry.setIndex(new THREE.BufferAttribute(mesh.triangles, 1)); geometry.computeVertexNormals(); geometry.computeBoundingBox(); // calc uvs to correctly position texture let { min, max } = geometry.boundingBox; let offset = new THREE.Vector2(0 - min.x, 0 - min.y); let range = new THREE.Vector2(max.x - min.x, max.y - min.y); const position = geometry.attributes.position; return geometry; }38:T47a,geometryMean = { const error = 0; const martini = new Martini(gridSize); const tile = martini.createTile(terrainMean); const mesh = tile.getMesh(error); const geometry = new THREE.BufferGeometry(); const vertices = new Float32Array((mesh.vertices.length / 2) * 3); const terrainExaggeration = 1; let index = 0; for (let i = 0; i < mesh.vertices.length / 2; i++) { let x = mesh.vertices[i * 2], y = mesh.vertices[i * 2 + 1]; vertices[index++] = x * aequidistance[0] + bbox.minX; vertices[index++] = y * aequidistance[1] + bbox.minY; vertices[index++] = terrainMean[x * gridSize + y] * terrainExaggeration; } geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3)); geometry.setIndex(new THREE.BufferAttribute(mesh.triangles, 1)); geometry.computeVertexNormals(); geometry.computeBoundingBox(); // calc uvs to correctly position texture let { min, max } = geometry.boundingBox; let offset = new THREE.Vector2(0 - min.x, 0 - min.y); let range = new THREE.Vector2(max.x - min.x, max.y - min.y); const position = geometry.attributes.position; return geometry; }39:T71f,geometry = { const start = new Date(); const error = 0; const martini = new Martini(gridSize); const tile = martini.createTile(terrain); const mesh = tile.getMesh(error); const geometry = new THREE.BufferGeometry(); const vertices = new Float32Array((mesh.vertices.length / 2) * 3); const terrainExaggeration = 1; let index = 0; for (let i = 0; i < mesh.vertices.length / 2; i++) { let x = mesh.vertices[i * 2], y = mesh.vertices[i * 2 + 1]; vertices[index++] = x * aequidistance[0] + bbox.minX; vertices[index++] = y * aequidistance[1] + bbox.minY; vertices[index++] = terrain[x * gridSize + y] * terrainExaggeration; } geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3)); geometry.setIndex(new THREE.BufferAttribute(mesh.triangles, 1)); geometry.computeVertexNormals(); geometry.computeBoundingBox(); // calc uvs to correctly position texture let { min, max } = geometry.boundingBox; let offset = new THREE.Vector2(0 - min.x, 0 - min.y); let range = new THREE.Vector2(max.x - min.x, max.y - min.y); const position = geometry.attributes.position; const martiniEnd = new Date(); mutable martiniMS = martiniEnd - start; const uvs = []; for (let i = 0; i < position.count; i++) { const v3 = new THREE.Vector3().fromBufferAttribute(position, i); uvs.push((v3.x + offset.x) / range.x); uvs.push((v3.y + offset.y) / range.y); } geometry.setAttribute( "uv", new THREE.BufferAttribute(new Float32Array(uvs), 2) ); geometry.setAttribute( "uv2", new THREE.BufferAttribute(new Float32Array(uvs), 2) ); geometry.attributes.uv.needsUpdate = true; geometry.attributes.uv2.needsUpdate = true; const end = new Date(); console.log("Calculating UVs", end - martiniEnd); return geometry; }3a:T559,scene = { const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); // add geometry const material = new THREE.MeshNormalMaterial({ flatShading: true, side: THREE.DoubleSide }); const floormaterial1 = new THREE.MeshPhongMaterial({ color: 0x0000ff, opacity: 1, // wireframe: true, side: THREE.DoubleSide }); const floormaterial2 = new THREE.MeshPhongMaterial({ color: 0xffff00, opacity: 1, // wireframe: true, side: THREE.DoubleSide }); const meshSpatial = new THREE.Mesh(geometry, floormaterial2); meshSpatial.name = 'terrainSpatial'; //scene.add(meshSpatial); const meshMean = new THREE.Mesh(geometryMean, material); meshMean.name = 'terrainMean'; if (terrains.includes("loop sorting")) scene.add(meshMean); const meshGridBased = new THREE.Mesh(geometryGridBased, material); meshMean.name = 'terrainGridBased'; if (terrains.includes("grid based")) scene.add(meshGridBased); //const meshMonte = new THREE.Mesh(geometryMonteCarlo, material); //if (terrains.includes("Monte Carlo")) scene.add(meshMonte) const map = await loadTexture(textureWMSUrl); let threeMesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ map: map, side: THREE.DoubleSide }) ); if (terrains.includes("spatial indexing")) scene.add(threeMesh) return scene; }3b:[{"id":"3811343421f8327b0965124fbb55a99a6683d0dba1448f1b100a216d6a90b23a3afa4dd7be0278a70a5cd6986377aca90b8eeddd200615486464a951b8e4db1e","href":"https://static.observableusercontent.com/files/3811343421f8327b0965124fbb55a99a6683d0dba1448f1b100a216d6a90b23a3afa4dd7be0278a70a5cd6986377aca90b8eeddd200615486464a951b8e4db1e","name":"nrw_grid@3.csv","type":"text/csv","lastModified":1684867550180.156,"size":1147524},{"id":"c8a029e7192f2b48b600ced4f4eff633a8d63576ae372a93e9ef5367fb1e847e20c880cdc34816a76ca44bb975c60062eb0092660d4a351095d4865600f4e1ee","href":"https://static.observableusercontent.com/files/c8a029e7192f2b48b600ced4f4eff633a8d63576ae372a93e9ef5367fb1e847e20c880cdc34816a76ca44bb975c60062eb0092660d4a351095d4865600f4e1ee","name":"nrw_grid.csv","type":"text/csv","lastModified":1770197502581.501,"size":1185797}] 30:{"title":"Creating a 3D mesh from LIDAR point cloud data - performance comparison","cells":[{"id":0,"value":"# Creating a 3D mesh from LIDAR point cloud data - performance comparison","pinned":false,"hidden":false,"mode":"md"},{"id":721,"value":"viewof k = Inputs.range([7, 12], {\n label: \"LAZ interpolation (tile size)\",\n value: 8,\n step: 1,\n format: (v) => Math.pow(2, v)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1225,"value":"viewof textureSize = Inputs.range([7, 12], {\n label: \"Texture size\",\n value: 11,\n step: 1,\n format: (v) => Math.pow(2, v) + 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1294,"value":"viewof poi = Inputs.select(pois, {\n label: \"Select one\",\n value: pois[0],\n format: (r) => r.name\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"viewof terrains = Inputs.checkbox([\"spatial indexing\", \"loop sorting\", \"grid based\"], {label: \"terrain generation method\", value: [\"spatial indexing\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1633,"value":"viewof filterData = Inputs.checkbox(['sort data (2.)'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"renderer.domElement","pinned":false,"hidden":false,"mode":"ojs"},{"id":1148,"value":"## Overview","pinned":false,"hidden":false,"mode":"md"},{"id":1150,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1664,"value":"viewof nth = Inputs.range([1, data.attributes.POSITION.value.length/(3*gridSize**2)], {value: 2, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1236,"value":"md`LAZ Point cloud data and satellite imagery from [opengeodata.nrw.de](https://www.opengeodata.nrw.de/produkte/) \n*Datenlizenz Deutschland - Zero - Version 2.0*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"md`## Data & Methods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1337,"value":"grid = {\n const startTime = new Date();\n const grid = createGrid(data.attributes.POSITION.value)\n const endTime = new Date();\n mutable createGridMS = endTime-startTime;\n console.log(`create grid function (without spatial indexing) ${endTime-startTime} ms`)\n return grid\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1358,"value":"terrainMean = {\n const startTime = new Date();\n const terrain = createTerrain(grid);\n const endTime = new Date();\n mutable createTerrainMS = endTime-startTime;\n console.log(`create terrain function ${endTime-startTime} ms`)\n return terrain\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1575,"value":"terrainGridBased = {\n let startTime = new Date();\n const grid = gridBased(points)\n let endTime = new Date();\n mutable gridBasedMS = endTime-startTime;\n\n startTime = new Date();\n const terrain = createTerrain(grid);\n endTime = new Date();\n mutable createTerrainMS = endTime-startTime\n return terrain\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1523,"value":"gridBased = (points) => {\n const data = points;\n\n const startTime = new Date();\n // Create an empty grid\n let grid = new Array(gridSize);\n for (let i = 0; i < gridSize; i++) {\n grid[i] = new Array(gridSize);\n for (let j = 0; j < gridSize; j++) {\n grid[i][j] = [];\n }\n }\n \n // Find the min and max x and y values\n const maxX = bbox.maxX\n const maxY = bbox.maxY\n const minX = bbox.minX\n const minY = bbox.minY\n \n // Calculate the width and height of each cell\n let cellWidth = (maxX - minX) / (gridSize-1);\n let cellHeight = (maxY - minY) / (gridSize-1);\n \n // Sort the points into the grid\n for (let point of data) {\n let x = point[0];\n let y = point[1];\n let i = Math.floor((x - minX) / cellWidth);\n let j = Math.floor((y - minY) / cellHeight);\n grid[i][j].push(point);\n }\n return grid\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1421,"value":"terrainMonte = () => {\n const startTime = new Date();\n // const terrain = createTerrainMonteCarlo(data.attributes.POSITION.value);\n const endTime = new Date();\n mutable createMonteCarloTerrainMS = endTime-startTime;\n return terrain\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1343,"value":"createTerrain = (grid) => {\n // TODO: before applying average, filter for same (x,y)-coordinates --> just use the one with the greatest z-value\n // define each pixel in final grid as mean of z-values\n let finalGrid = new Float32Array(gridSize * gridSize);\n grid.forEach((col, x) => {\n let latestMean = 0;\n col.forEach((row, y) => {\n let mean = 0;\n if(row.length) {\n mean = latestMean = d3.mean(row.map((elem) => elem[2]));\n } else {\n mean = latestMean;\n }\n finalGrid[x*gridSize+y] = mean;\n });\n });\n return finalGrid\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1190,"value":"lazUrl = `https://www.opengeodata.nrw.de/produkte/geobasis/hm/bdom50_las/bdom50_las/${curTile.tile}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"textureWMSUrl = `https://www.wms.nrw.de/geobasis/wms_nw_dop?language=ger&width=${\n Math.pow(2, textureSize) + 1\n}&height=${Math.pow(2, textureSize) + 1}}&bbox=${bbox.minX},${bbox.minY},${\n bbox.maxX\n},${\n bbox.maxY\n}&crs=EPSG%3A25832&format=image%2Fpng&request=GetMap&service=WMS&transparent=true&version=1.3.0&layers=nw_dop_rgb`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"data = {\n let start = new Date();\n const data = await load(lazUrl, LASWorkerLoader);\n let end = new Date();\n mutable loadingMS = end - start;\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":509,"value":"tileSize = Math.pow(2, k)","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"gridSize = tileSize+1","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"height = 420","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"aequidistance = {\n const aequidistantFactorX = (bbox.maxX - bbox.minX) / tileSize;\n const aequidistantFactorY = (bbox.maxY - bbox.minY) / tileSize;\n return [aequidistantFactorX, aequidistantFactorY];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"center = ({ x: calcCenter(\"X\"), y: calcCenter(\"Y\"), z: calcCenter(\"Z\") })","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"function calcCenter(dim) {\n return (bbox[\"max\" + dim] - bbox[\"min\" + dim]) / 2 + bbox[\"min\" + dim];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"LASWorkerLoader = (\n await import(\"https://cdn.skypack.dev/@loaders.gl/las@3.3.3?min\")\n).LASWorkerLoader","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"load = (await import(\"https://cdn.skypack.dev/@loaders.gl/core@3.3.3?min\")).load","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"loadTexture = {\n const loader = new THREE.TextureLoader();\n return (url) => new Promise((resolve) => loader.load(url, resolve));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"mutable loadingMS = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"mutable indexingMS = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"mutable terrainMS = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"mutable martiniMS = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"mutable createGridMS = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"mutable createTerrainMS = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1431,"value":"mutable createMonteCarloTerrainMS = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1553,"value":"mutable sortDataMS = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1607,"value":"mutable gridBasedMS = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"curTile = getETRS89TileForPoint(poi.coordinates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"function getETRS89TileForPoint(coordinates) {\n // reproject point from WGS84 to ETRS89\n const [x, y] = proj4(\n \"+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs\",\n coordinates\n );\n //return [x, y];\n // find tile in grid that contains point\n const tile = nrw_grid_etrs89.find(\n (t) => x >= t.x && x < t.x + 1000 && y >= t.y && y < t.y + 1000\n );\n return tile;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1694,"value":"splitted_x = (await FileAttachment(\"nrw_grid.csv\").csv()).map(d => d.title.split(\"bdom50_\")[1].split(\"_\")[0].split(\"32\")[1]*1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1706,"value":"splitted_y = (await FileAttachment(\"nrw_grid.csv\").csv()).map(t => t.title.split(\"bdom50_\")[1].split(\"_\")[1].split(\"_\")[0] * 1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1244,"value":"nrw_grid_etrs89 = (await FileAttachment(\"nrw_grid.csv\").csv()).map((t) => ({\n x: +splitted_x,\n y: +splitted_y,\n tile: t.tile\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1290,"value":"pois = [\n {\n name: \"Eggeberg\",\n coordinates: [8.351943, 52.08824]\n },\n {\n name: \"Kölner Dom\",\n coordinates: [6.9579167, 50.9413232]\n },\n {\n name: \"Externsteine\",\n coordinates: [8.9214436, 51.8689634]\n },\n {\n name: \"Zeche Zollverein\",\n coordinates: [7.0413369, 51.4877427]\n },\n {\n name: \"Drachenfels\",\n coordinates: [7.2056338, 50.6679878]\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1110,"value":"md`## THREE.js & Flatbush`","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"index = {\n const start = new Date();\n const points = data.attributes.POSITION.value;\n const index = new Flatbush(points.length / 3);\n\n for (let i = 0; i < points.length; i += 3) {\n index.add(points[i], points[i + 1], points[i], points[i + 1]);\n }\n // perform the indexing\n index.finish();\n const end = new Date();\n mutable indexingMS = end - start;\n return index;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":789,"value":"terrain = {\n const start = new Date();\n const arr = new Float32Array(gridSize * gridSize);\n let ti = 0;\n for (let x = 0; x < gridSize; ++x) {\n for (let y = 0; y < gridSize; ++y) {\n const xPos = bbox.minX + aequidistance[0] * x;\n const yPos = bbox.minY + aequidistance[1] * y;\n const i = index.neighbors(xPos, yPos, 1)[0];\n arr[ti++] = data.attributes.POSITION.value[i * 3 + 2];\n }\n }\n const end = new Date();\n mutable terrainMS = end - start;\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1629,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1391,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"camera = {\n const camera = new THREE.PerspectiveCamera(\n 100,\n Math.min(width, 640) / height,\n 0.1,\n 100000\n );\n camera.up.set(0, 0, 1);\n\n camera.position.set(center.x, center.y, center.z + 10);\n\n return camera;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":549,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n\n controls.screenSpacePanning = true;\n\n controls.target.set(center.x, center.y, center.z);\n renderer.setSize(Math.min(width, 640), height);\n renderer.setPixelRatio(devicePixelRatio);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n renderer.render(scene, camera);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"proj4 = (await import(\"https://cdn.skypack.dev/proj4@2.9.0?min\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"Martini = require(\"@mapbox/martini@0.2.0/martini.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"Flatbush = (await import(\"https://unpkg.com/flatbush@4.1.0/index.js?module\"))\n .default","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"THREE = {\n const THREE = (window.THREE = await require(\"three@0.141\"));\n await require(\"three@0.141/examples/js/controls/OrbitControls.js\").catch(\n () => {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"ndarray = (await import('https://cdn.skypack.dev/ndarray@1.0.19?min')).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"interp2 = (await import('https://cdn.skypack.dev/ndarray-linear-interpolate@1.0.0?min')).d2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"\npageAnalytics = {\n await require(`https://www.googletagmanager.com/gtag/js?id=G-HX4H5SVSB8`).catch(() => {});\n \n const dataLayer = window.dataLayer = window.dataLayer || [];\n const location = html``;\n gtag('js', new Date());\n gtag('config', 'G-HX4H5SVSB8', {\n 'page_path': location.pathname,\n 'page_location' : location.href\n });\n function gtag() { dataLayer.push(arguments);}\n} ","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}