3f:null 40:["$","title",null,{"children":"3D Tiles loader | Tom van Tilburg | Observable"}] 46:T1233,class Mapbox3DTileLayer { constructor(params) { if (!params) throw new Error('parameters missing for mapbox 3D tiles layer'); if (!params.id) throw new Error('id parameter missing for mapbox 3D tiles layer'); if (!params.url) throw new Error('url parameter missing for mapbox 3D tiles layer'); this.id = params.id, this.url = params.url; let styleParams = {}; if ('color' in params) styleParams.color = params.color; if ('opacity' in params) styleParams.opacity = params.opacity; if ('pointsize' in params) styleParams.pointsize = params.pointsize; this.loadStatus = 0; this.viewProjectionMatrix = null; this.type = 'custom'; this.renderingMode = '3d'; this.getCameraPosition = function() { if (!this.viewProjectionMatrix) return new THREE.Vector3(); let cam = new THREE.Camera(); let rootInverse = new THREE.Matrix4().getInverse(this.rootTransform); cam.projectionMatrix.elements = this.viewProjectionMatrix; cam.projectionMatrixInverse = new THREE.Matrix4().getInverse( cam.projectionMatrix );// add since three@0.103.0 let campos = new THREE.Vector3(0, 0, 0).unproject(cam).applyMatrix4(rootInverse); return campos; } this.onAdd = function(map, gl) { this.map = map; const fov = 45; const aspect = window.innerWidth/window.innerHeight; const near = 0.01; const far = 1000; this.camera = new THREE.PerspectiveCamera(fov, aspect, near, far); this.scene = new THREE.Scene(); this.rootTransform = transform2mapbox([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]); // identity matrix tranformed to mapbox scale lightsarray.forEach(light=>{ this.scene.add(light); }); this.tileset = new TileSet(); let self = this; this.tileset.load(this.url, styleParams).then(function(){ if (self.tileset.root.transform) { self.rootTransform = transform2mapbox(self.tileset.root.transform); } else { self.rootTransform = transform2mapbox([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]); // identity matrix tranformed to mapbox scale } if (self.tileset.root) { self.scene.add(self.tileset.root.totalContent); } self.loadStatus = 1; function refresh() { let frustum = new THREE.Frustum(); frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(self.camera.projectionMatrix, self.camera.matrixWorldInverse)); self.tileset.root.checkLoad(frustum, self.getCameraPosition()); }; map.on('dragend',refresh); map.on('moveend',refresh); map.on('load',refresh); map.on('mousemove',e=>{ //let [mouseX, mouseY] = d3.mouse(view.node()); let mouse_position = [e.point.x, e.point.y]; //Utils.checkIntersects(mouse_position,self.camera,self.tileset.root.totalContent); }) }); this.renderer = new THREE.WebGLRenderer({ canvas: map.getCanvas(), context: gl }); this.renderer.autoClear = false; /* WIP on ssao this.composer = new EffectComposer( this.renderer ); let width = window.innerWidth; let height = window.innerHeight; let ssaoPass = new SSAOPass( this.scene, this.camera); ssaoPass.kernelRadius = 16; ssaoPass.output = SSAOPass.OUTPUT.Default; window.ssaoPass = ssaoPass; this.composer.addPass( ssaoPass ); /* end of ssao*/ //this.skybox = Utils.loadSkybox(new URL('https://threejsfundamentals.org/threejs/resources/images/equirectangularmaps/tears_of_steel_bridge_2k.jpg').href); }, this.render = function(gl, viewProjectionMatrix) { this.viewProjectionMatrix = viewProjectionMatrix; let l = new THREE.Matrix4().fromArray(viewProjectionMatrix); this.renderer.state.reset(); // The root tile transform is applied to the camera while rendering // instead of to the root tile. This avoids precision errors. this.camera.projectionMatrix = l.multiply(this.rootTransform); /*RENDER SKYBOX */ /* WIP this.skybox.camera.rotation.copy(this.camera.rotation); this.skybox.camera.fov = this.camera.fov; this.skybox.camera.aspect = this.camera.aspect; this.skybox.camera.updateProjectionMatrix(); this.renderer.render(this.skybox.scene, this.skybox.camera); */ this.renderer.render(this.scene, this.camera); //this.composer.render(); //ssao if (this.loadStatus == 1) { // first render after root tile is loaded this.loadStatus = 2; let frustum = new THREE.Frustum(); frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(this.camera.projectionMatrix, this.camera.matrixWorldInverse)); if (this.tileset.root) { this.tileset.root.checkLoad(frustum, this.getCameraPosition()); } } } } }47:T59f,class PNTS extends TileLoader{ constructor(url) { super(url); this.points = new Float32Array(); this.rgba = null; this.rgb = null; } parseResponse(buffer) { super.parseResponse(buffer); if (this.featureTableJSON.POINTS_LENGTH && this.featureTableJSON.POSITION) { let len = this.featureTableJSON.POINTS_LENGTH; let pos = this.featureTableJSON.POSITION.byteOffset; this.points = new Float32Array(this.featureTableBinary.slice(pos, pos + len * Float32Array.BYTES_PER_ELEMENT * 3)); this.rtc_center = this.featureTableJSON.RTC_CENTER; if (this.featureTableJSON.RGBA) { pos = this.featureTableJSON.RGBA.byteOffset; let colorInts = new Uint8Array(this.featureTableBinary.slice(pos, pos + len * Uint8Array.BYTES_PER_ELEMENT * 4)); let rgba = new Float32Array(colorInts.length); for (let i=0; i { fetch(self.url) .then(response => { if (!response.ok) { throw new Error(`HTTP ${response.status} - ${response.statusText}`); } return response; }) .then(response => response.arrayBuffer()) .then(buffer => self.parseResponse(buffer)) .then(res => resolve(res)) .catch(error => { reject(error); }); }); } parseResponse(buffer) { let header = new Uint32Array(buffer.slice(0, 28)); let decoder = new TextDecoder(); let magic = decoder.decode(new Uint8Array(buffer.slice(0, 4))); if (magic != this.type) { throw new Error(`Invalid magic string, expected '${this.type}', got '${this.magic}'`); } this.version = header[1]; this.byteLength = header[2]; let featureTableJSONByteLength = header[3]; let featureTableBinaryByteLength = header[4]; let batchTableJsonByteLength = header[5]; let batchTableBinaryByteLength = header[6]; /* console.log('magic: ' + magic); console.log('version: ' + this.version); console.log('featureTableJSONByteLength: ' + featureTableJSONByteLength); console.log('featureTableBinaryByteLength: ' + featureTableBinaryByteLength); console.log('batchTableJsonByteLength: ' + batchTableJsonByteLength); console.log('batchTableBinaryByteLength: ' + batchTableBinaryByteLength); */ let pos = 28; // header length if (featureTableJSONByteLength > 0) { this.featureTableJSON = JSON.parse(decoder.decode(new Uint8Array(buffer.slice(pos, pos+featureTableJSONByteLength)))); pos += featureTableJSONByteLength; } else { this.featureTableJSON = {}; } this.featureTableBinary = buffer.slice(pos, pos+featureTableBinaryByteLength); pos += featureTableBinaryByteLength; if (batchTableJsonByteLength > 0) { this.batchTableJson = JSON.parse(decoder.decode(new Uint8Array(buffer.slice(pos, pos+batchTableJsonByteLength)))); pos += batchTableJsonByteLength; } else { this.batchTableJson = {}; } this.batchTableBinary = buffer.slice(pos, pos+batchTableBinaryByteLength); pos += batchTableBinaryByteLength; this.binaryData = buffer.slice(pos); return this; } }49:T28c1,TileSet = { class TileSet { constructor(){ this.url = null; this.version = null; this.gltfUpAxis = 'Z'; this.geometricError = null; this.root = null; } load(url, styleParams) { this.url = url; let resourcePath = THREE.LoaderUtils.extractUrlBase(url); let self = this; return new Promise((resolve, reject) => { fetch(self.url) .then(response => { if (!response.ok) { throw new Error(`HTTP ${response.status} - ${response.statusText}`); } return response; }) .then(response => response.json()) .then(json => { self.version = json.asset.version; self.geometricError = json.geometricError; self.refine = json.refine ? json.refine.toUpperCase() : 'ADD'; self.root = new ThreeDeeTile(json.root, resourcePath, styleParams, self.refine, true); }) .then(res => resolve()) .catch(error => { console.error(error); reject(error); }); }); } } class ThreeDeeTile { constructor(json, resourcePath, styleParams, parentRefine, isRoot) { this.loaded = false; this.styleParams = styleParams; this.resourcePath = resourcePath; this.totalContent = new THREE.Group(); // Three JS Object3D Group for this tile and all its children this.tileContent = new THREE.Group(); // Three JS Object3D Group for this tile's content this.childContent = new THREE.Group(); // Three JS Object3D Group for this tile's children this.totalContent.add(this.tileContent); this.totalContent.add(this.childContent); this.boundingVolume = json.boundingVolume; if (this.boundingVolume && this.boundingVolume.box) { let b = this.boundingVolume.box; let extent = [b[0] - b[3], b[1] - b[7], b[0] + b[3], b[1] + b[7]]; let sw = new THREE.Vector3(extent[0], extent[1], b[2] - b[11]); let ne = new THREE.Vector3(extent[2], extent[3], b[2] + b[11]); this.box = new THREE.Box3(sw, ne); if (DEBUG) { let geom = new THREE.BoxGeometry(b[3] * 2, b[7] * 2, b[11] * 2); let edges = new THREE.EdgesGeometry( geom ); let line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0x800000 } ) ); let trans = new THREE.Matrix4().makeTranslation(b[0], b[1], b[2]); line.applyMatrix4(trans); this.totalContent.add(line); } } else { this.extent = null; this.sw = null; this.ne = null; this.box = null; this.center = null; } this.refine = json.refine ? json.refine.toUpperCase() : parentRefine; this.geometricError = json.geometricError; this.transform = json.transform; if (this.transform && !isRoot) { // if not the root tile: apply the transform to the THREE js Group // the root tile transform is applied to the camera while rendering this.totalContent.applyMatrix4(new THREE.Matrix4().fromArray(this.transform)); } this.content = json.content; this.children = []; if (json.children) { for (let i=0; i loader.parse(d.glbData, self.resourcePath, function(gltf) { //Add the batchtable to the userData since gltLoader doesn't deal with it gltf.scene.children[0].userData = d.batchTableJson; var meshMaterial = new THREE.MeshNormalMaterial({color: 0x7777ff}); gltf.scene.traverse(child => { //child.material=meshMaterial; }); if (self.styleParams.color != null || self.styleParams.opacity != null) { let color = new THREE.Color(self.styleParams.color); gltf.scene.traverse(child => { if (child instanceof THREE.Mesh) { if (self.styleParams.color != null) child.material.color = color; if (self.styleParams.opacity != null) { child.material.opacity = self.styleParams.opacity; child.material.transparent = self.styleParams.opacity < 1.0 ? true : false; } } }); } let children = gltf.scene.children; /* for (let i=0; i { let geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.Float32BufferAttribute(d.points, 3)); let material = new THREE.PointsMaterial(); material.size = self.styleParams.pointsize != null ? self.styleParams.pointsize : 1.0; if (self.styleParams.color) { material.vertexColors = THREE.NoColors; material.color = new THREE.Color(self.styleParams.color); material.opacity = self.styleParams.opacity != null ? self.styleParams.opacity : 1.0; } else if (d.rgba) { geometry.setAttribute('color', new THREE.Float32BufferAttribute(d.rgba, 4)); material.vertexColors = THREE.VertexColors; } else if (d.rgb) { geometry.setAttribute('color', new THREE.Float32BufferAttribute(d.rgb, 3)); material.vertexColors = THREE.VertexColors; } self.tileContent.add(new THREE.Points( geometry, material )); if (d.rtc_center) { let c = d.rtc_center; self.tileContent.applyMatrix4(new THREE.Matrix4().makeTranslation(c[0], c[1], c[2])); } self.tileContent.add(new THREE.Points( geometry, material )); }); } else if (type == 'i3dm') { throw new Error('i3dm tiles not yet implemented'); } else if (type == 'cmpt') { throw new Error('cmpt tiles not yet implemented'); } else { throw new Error('invalid tile type: ' + type); } } } unload(includeChildren) { this.tileContent.visible = false; if (includeChildren) { this.childContent.visible = false; } else { this.childContent.visible = true; } // TODO: should we also free up memory? } checkLoad(frustum, cameraPosition) { // is this tile visible? if (!frustum.intersectsBox(this.box)) { this.unload(true); return; } let dist = this.box.distanceToPoint(cameraPosition); //console.log(`dist: ${dist}, geometricError: ${this.geometricError}`); // are we too far to render this tile? if (this.geometricError > 0.0 && dist > this.geometricError * 50.0) { this.unload(true); return; } // should we load this tile? if (this.refine == 'REPLACE' && dist < this.geometricError * 20.0) { this.unload(false); } else { this.load(); } // should we load its children? for (let i=0; i 0.25) { this.load(); this.children.forEach(child => { child.checkLoad(camera); }); }*/ } } return TileSet; }4a:[] 44:{"id":"f6ca37a20b48ff50","slug":"3d-tiles-loader","title":"3D Tiles loader","thumbnail":"f8be3038428f6035f1c7b855bea227a08ea941007941e637078169dcf88105e6","access_level":"public","create_time":"$D2020-02-19T12:47:26.292Z","update_time":"$D2020-02-26T13:40:10.342Z","view_time":null,"first_public_time":"$D2020-02-19T15:31:28.891Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b647bc22a67ec061","login":"tomvantilburg","name":"Tom van Tilburg","avatar_url":"https://avatars-next.observableusercontent.com/4313679a18b29c09b91353f3603285bcd54596364413fe36d682d5984c147b15","tier":"starter_2024","bio":"","following":false},"version":125,"publish_version":125,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a7a260a29251abf","login":"tomvantilburg","name":"Tom van Tilburg","avatar_url":"https://avatars-next.observableusercontent.com/4313679a18b29c09b91353f3603285bcd54596364413fe36d682d5984c147b15","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6a7a260a29251abf","login":"tomvantilburg","name":"Tom van Tilburg","avatar_url":"https://avatars-next.observableusercontent.com/4313679a18b29c09b91353f3603285bcd54596364413fe36d682d5984c147b15","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D Tiles loader","cells":[{"id":0,"value":"md`# 3D Tiles loader`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"map = {\n let container = html`

`;\n\n // Give the container dimensions.\n yield container;\n\n // Create the \\`map\\` object with the mapboxgl.Map constructor, referencing\n // the container div\n let glmap = new mapboxgl.Map({\n container,\n center: [4.91186778, 52.34159933],\n zoom: 14,\n style: \"mapbox://styles/mapbox/dark-v9\"\n });\n glmap.on('load',_=>{\n glmap.addLayer(tileslayer);\n });\n \n\n return glmap;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"tileslayer = new Mapbox3DTileLayer( { \n id: 'Geotop', \n url: 'https://saturnus.geodan.nl/maquette_nl/data/geotoptest/tileset.json',\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"WEBMERCATOR_EXTENT = 20037508.3427892;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"DEBUG = true;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"lightsarray = {\n const arr = [];\n let directionalLight1 = new THREE.DirectionalLight(0xffffff);\n\t\t\tdirectionalLight1.position.set(0, 100000, 0).normalize();\n let target = directionalLight1.target.position.set(100000000, 1000000000, 0).normalize();\n\t\t\tarr.push(directionalLight1);\n\n\t\t\tlet directionalLight2 = new THREE.DirectionalLight(0xffffff);\n\t\t\tdirectionalLight2.position.set(0, 70, 100).normalize();\n\t\t\t//arr.push(directionalLight2);\n \n arr.push(new THREE.DirectionalLightHelper( directionalLight1, 500));\n //arr.push(new THREE.DirectionalLightHelper( directionalLight2, 500)); \t\t\n \n\t\t\t//this.scene.background = new THREE.Color( 0xaaaaaa );\n\t\t\t//this.scene.add( new THREE.DirectionalLight() );\n\t\t\t//this.scene.add( new THREE.HemisphereLight() );\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"tileslayer.scene","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"transform2mapbox = function (matrix) {\n\tconst min = -WEBMERCATOR_EXTENT;\n\tconst max = WEBMERCATOR_EXTENT;\n\tconst scale = 1 / (2 * WEBMERCATOR_EXTENT);\n\t\n\tlet result = matrix.slice(); // copy array\n\tresult[12] = (matrix[12] - min) * scale; // x translation\n\tresult[13] = (matrix[13] - max) * -scale; // y translation\n\tresult[14] = matrix[14] * scale; // z translation\n\t\n\treturn new THREE.Matrix4().fromArray(result).scale(new THREE.Vector3(scale, -scale, scale));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"\nclass B3DM extends TileLoader {\n\tconstructor(url) {\n\t\tsuper(url);\n\t\tthis.glbData = null;\n\t}\n\tparseResponse(buffer) {\n\t\tsuper.parseResponse(buffer);\n\t\tthis.glbData = this.binaryData;\n\t\treturn this;\n\t}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"THREE = {\n const THREE = window.THREE = await require('three');\n await require('three/examples/js/controls/OrbitControls.js').catch(() => {});\n await require('three/examples/js/loaders/GLTFLoader.js').catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.7.0\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 45:"$44:body"