2e:null 2f:["$","title",null,{"children":"3D any map tile | Michael Bricknell | Observable"}] 34:T7d8,terrain = { //const colormap = await require("colormap.jpg"); //const heightmap = await require("heightmap.jpg"); const canvas = new OffscreenCanvas(512, 512); const ctx = canvas.getContext("2d"); const heights = await loadImageData(getBath(img[0], img[1], img[2])).then( (imageData) => { return imageData; } ); const colors = await loadImageData(getSat(img[0], img[1], img[2])).then( (imageData) => { return imageData; } ); const loader = new THREE.TextureLoader(); // Save the decoded height data to an ImageData object const heightData = heights; const colorData = colors; const decodedHeights = decodeHeightmap(heightData); const convertedheightData = new Float32Array(decodedHeights.data); //console.log(convertedheightData); // Convert the ImageData to a Blob // Create a data texture from the height data const heightTexture = new THREE.DataTexture( convertedheightData, heightData.width, heightData.height, THREE.RedFormat, THREE.FloatType ); heightTexture.wrapS = THREE.ClampToEdgeWrapping; heightTexture.wrapT = THREE.ClampToEdgeWrapping; heightTexture.repeat.set(1, 1); heightTexture.flipY = !heightTexture.flipY; const colorTexture = new THREE.DataTexture( colorData.data, colorData.width, colorData.height, THREE.RGBAFormat ); colorTexture.wrapS = THREE.ClampToEdgeWrapping; colorTexture.wrapT = THREE.ClampToEdgeWrapping; colorTexture.repeat.set(1, 1); colorTexture.flipY = !colorTexture.flipY; const material = new THREE.MeshPhongMaterial({ map: colorTexture, displacementMap: heightTexture, displacementScale: 0.0009 }); //console.log("Color texture:", colorTexture); //console.log("Height texture:", heightTexture); const geometry = new THREE.PlaneGeometry(100, 100, 511, 511); geometry.rotateX(-Math.PI / 2); const terrain = new THREE.Mesh(geometry, material); console.log("Terrain material:", terrain.material); return terrain; }35:Ta4d,function createExtrudedTerrainGeometry( width, depth, widthSegments, depthSegments, displacementData, displacementScale, extrusionHeight ) { const geometry = new THREE.PlaneGeometry( width, depth, widthSegments, depthSegments ); geometry.rotateX(-Math.PI / 2); // Apply the displacement map to the terrain for (let i = 0; i < geometry.vertices.length; i++) { const vertex = geometry.vertices[i]; const uv = geometry.faceVertexUvs[0][Math.floor(i / 6)][i % 6]; const heightValue = displacementData[ Math.floor(uv.y * depthSegments) * (widthSegments + 1) + Math.floor(uv.x * widthSegments) ].r; vertex.z += heightValue * displacementScale; } // Extrude the edges downward and create connecting faces const topVertices = geometry.vertices.slice(); const bottomVertices = topVertices.map((vertex) => { const newVertex = vertex.clone(); newVertex.z -= extrusionHeight; return newVertex; }); geometry.vertices = geometry.vertices.concat(bottomVertices); const totalVertices = geometry.vertices.length; for (let i = 0; i < depthSegments; i++) { for (let j = 0; j < widthSegments; j++) { const upperLeft = i * (widthSegments + 1) + j; const upperRight = upperLeft + 1; const lowerLeft = upperLeft + widthSegments + 1; const lowerRight = lowerLeft + 1; const offset = topVertices.length; if (i === 0) { geometry.faces.push( new THREE.Face3(upperLeft, upperLeft + offset, upperRight + offset) ); geometry.faces.push( new THREE.Face3(upperLeft, upperRight + offset, upperRight) ); } if (i === depthSegments - 1) { geometry.faces.push( new THREE.Face3(lowerLeft, lowerRight + offset, lowerLeft + offset) ); geometry.faces.push( new THREE.Face3(lowerLeft, lowerRight, lowerRight + offset) ); } if (j === 0) { geometry.faces.push( new THREE.Face3(upperLeft, lowerLeft + offset, upperLeft + offset) ); geometry.faces.push( new THREE.Face3(upperLeft, lowerLeft, lowerLeft + offset) ); } if (j === widthSegments - 1) { geometry.faces.push( new THREE.Face3(upperRight, upperRight + offset, lowerRight + offset) ); geometry.faces.push( new THREE.Face3(upperRight, lowerRight + offset, lowerRight) ); } } } // Update the normals for the new faces geometry.computeFaceNormals(); geometry.computeVertexNormals(); return geometry; }36:[] 32:{"id":"005a08b9b0da1435","slug":"3d-any-map-tile","title":"3D any map tile","thumbnail":"b2ad6b4b96c19ca70bddb37eaa21c6f45f2a4e137170345034a7a7aa7f89385d","access_level":"public","create_time":"$D2023-05-23T18:18:03.239Z","update_time":"$D2026-06-22T14:08:04.150Z","view_time":null,"first_public_time":"$D2025-04-09T13:09:03.676Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":768,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2f71d064e45acb0b","slug":"carto","title":"Carto","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"3D any map tile","cells":[{"id":242,"value":"# 3D any map tile","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":767,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"//img = [5, 6, 12]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"img = [6, 53, 27] //9/428/219","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"width = 765","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"height = document.body.clientHeight","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"demo = renderer.domElement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"html`${colormap}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"html`${heightmap}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"html`${oceanmap}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"function getSat(z, x, y) {\n return `https://api.maptiler.com/tiles/satellite-v2/${z}/${x}/${y}.jpg?key=3MnK8cjFYeRCExoIzTpo`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"function getBath(z, x, y) {\n return `https://api.maptiler.com/tiles/ocean-rgb/${z}/${x}/${y}.webp?key=NnFzE21CFaHwB7PNhdmc`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"colormap = `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"heightmap = `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"oceanmap = `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"function decodeHeightmap(imageData) {\n const { width, height, data } = imageData;\n const heights = new Float32Array(width * height);\n\n for (let i = 0, j = 0; i < data.length; i += 4, j++) {\n const R = data[i];\n const G = data[i + 1];\n const B = data[i + 2];\n const elevation = -10000 + (R * 256 * 256 + G * 256 + B) * 0.1;\n heights[j] = elevation;\n }\n\n return { data: heights, width: width, height: height };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"function getDem(z, x, y) {\n return `https://api.maptiler.com/tiles/terrain-rgb-v2/${z}/${x}/${y}.webp?key=NnFzE21CFaHwB7PNhdmc`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"// Continuously updates\n{\n while (true) {\n terrain.rotation.y += 0.0001;\n renderer.render(scene, camera);\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"async function loadImageData(url) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.crossOrigin = \"Anonymous\";\n img.src = url;\n img.onload = () => {\n const canvas = document.createElement(\"canvas\");\n canvas.width = img.width;\n canvas.height = img.height;\n const ctx = canvas.getContext(\"2d\");\n ctx.drawImage(img, 0, 0);\n const imageData = ctx.getImageData(0, 0, img.width, img.height);\n resolve(imageData);\n };\n img.onerror = () => {\n reject(new Error(\"Failed to load image\"));\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"base = {\n const baseHeight = 5; // Adjust the height of the base as needed\n const baseGeometry = new THREE.BoxGeometry(100, baseHeight, 100);\n const baseMaterial = new THREE.MeshPhongMaterial({ color: 0x8b0000 }); // Replace 0x8B0000 with your desired color\n const base = new THREE.Mesh(baseGeometry, baseMaterial);\n base.position.y = -baseHeight / 2; // Position the base below the terrain\n return base;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"scene = {\n const scene = new THREE.Scene();\n scene.add(ambientLight);\n scene.add(directionalLight);\n scene.background = new THREE.Color(0x001b42);\n scene.add(terrain);\n //scene.add(base);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"pointLight = {\n const pointLight = new THREE.PointLight(0xffffff, 1, 100);\n pointLight.position.set(10, 10, 10);\n return pointLight;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"ambientLight = {\n const ambientLight = new THREE.AmbientLight(0xffffff, 1);\n return ambientLight;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"directionalLight = {\n const directionalLight = new THREE.DirectionalLight(0xffffff, 1);\n directionalLight.position.set(1, 1, 1);\n return directionalLight;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(100, 50, -50);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n return renderer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"