Add support for Quantized Mesh (#1061)

* Add base loader

* Add classes

* Add plugin

* Update

* Updates

* Separate deep zoom plugin file

* Separate files

* Updates

* QMesh loader updates

* Fixes

* Fixes

* Add metadata

* Updates

* Fix index

* Fix value

* Fixes

* Updates

* Updates

* Skirt fixes

* Normals fix

* Fix skirts

* Adjustments

* Some performance improvements

* Comments

* Add smooth skirt normals

* Fixes

* Update docs

* Update the water mask

Author: gkjohnson

src/base/TilesRendererBase.js

@@ -627,8 +627,8 @@ export class TilesRendererBase {
 
 		}
 
-		// remove trailing slash and last path-segment from the URL
-		let basePath = url.replace( /\/[^/]*\/?$/, '' );
+		// remove the last file path path-segment from the URL including the trailing slash
+		let basePath = url.replace( /\/[^/]*$/, '' );
 		basePath = new URL( basePath, window.location.href ).toString();
 		this.preprocessNode( json.root, basePath, parent );
 

src/base/loaders/LoaderBase.js

@@ -7,10 +7,10 @@ export class LoaderBase {
 
 	}
 
-	load( url ) {
+	load( ...args ) {
 
 		console.warn( 'Loader: "load" function has been deprecated in favor of "loadAsync".' );
-		return this.loadAsync( url );
+		return this.loadAsync( ...args );
 
 	}
 

src/plugins/README.md

@@ -657,6 +657,34 @@ Available options are as follows:
 }
 ```
 
+## QuantizedMeshPlugin
+
+Plugin for adding support to load and display [quantized mesh](https://github.com/CesiumGS/quantized-mesh) tile sets.
+
+### .constructor
+
+```js
+constructor( options : Object )
+```
+
+Available options are as follows:
+
+```js
+{
+	// If true then the TilesRenderer error target is set to 2 so an expected amount of tile detail is rendered.
+	useRecommendedSettings: true,
+
+	// The length of the skirts to generate for each tile. No skirts are generated if set to 0.
+	skirtLength: 1000,
+
+	// If true then the normals on the edge of the tile are replicated on skirt vertices. Otherwise the skits have flat edges.
+	smoothSkirtNormals: true,
+
+	// Whether to generate the tiles as a solid form with bottom faces.
+	solid: false,
+}
+```
+
 ## LoadRegionPlugin
 
 Plugin to enhances the TilesRenderer by enabling selective loading of tiles based on regions or volumes up to a specified geometric error target. Regions take shapes in the local tile set coordinate frame:

src/plugins/base/loaders/QuantizedMeshLoaderBase.js

@@ -0,0 +1,261 @@
+import { LoaderBase } from '../../../base/loaders/LoaderBase.js';
+
+export function zigZagDecode( value ) {
+
+	return ( value >> 1 ) ^ ( - ( value & 1 ) );
+
+}
+
+export class QuantizedMeshLoaderBase extends LoaderBase {
+
+	constructor( ...args ) {
+
+		super( ...args );
+
+		this.fetchOptions.header = {
+			Accept: 'application/vnd.quantized-mesh,application/octet-stream;q=0.9',
+		};
+
+	}
+
+	loadAsync( ...args ) {
+
+		const { fetchOptions } = this;
+		fetchOptions.header = fetchOptions.header || {};
+		fetchOptions.header[ 'Accept' ] = 'application/vnd.quantized-mesh,application/octet-stream;q=0.9';
+		fetchOptions.header[ 'Accept' ] += ';extensions=octvertexnormals-watermask-metadata';
+
+		return super.loadAsync( ...args );
+
+	}
+
+	parse( buffer ) {
+
+		let pointer = 0;
+		const view = new DataView( buffer );
+		const readFloat64 = () => {
+
+			const result = view.getFloat64( pointer, true );
+			pointer += 8;
+			return result;
+
+		};
+
+		const readFloat32 = () => {
+
+			const result = view.getFloat32( pointer, true );
+			pointer += 4;
+			return result;
+
+		};
+
+		const readInt = () => {
+
+			const result = view.getUint32( pointer, true );
+			pointer += 4;
+			return result;
+
+		};
+
+		const readByte = () => {
+
+			const result = view.getUint8( pointer );
+			pointer += 1;
+			return result;
+
+		};
+
+		const readBuffer = ( count, type ) => {
+
+			const result = new type( buffer, pointer, count );
+			pointer += count * type.BYTES_PER_ELEMENT;
+			return result;
+
+		};
+
+		// extract header
+		const header = {
+			center: [ readFloat64(), readFloat64(), readFloat64() ],
+			minHeight: readFloat32(),
+			maxHeight: readFloat32(),
+			sphereCenter: [ readFloat64(), readFloat64(), readFloat64() ],
+			sphereRadius: readFloat64(),
+			horizonOcclusionPoint: [ readFloat64(), readFloat64(), readFloat64() ],
+		};
+
+		// extract vertex data
+		const vertexCount = readInt();
+		const uBuffer = readBuffer( vertexCount, Uint16Array );
+		const vBuffer = readBuffer( vertexCount, Uint16Array );
+		const hBuffer = readBuffer( vertexCount, Uint16Array );
+
+		const uResult = new Float32Array( vertexCount );
+		const vResult = new Float32Array( vertexCount );
+		const hResult = new Float32Array( vertexCount );
+
+		// decode vertex data
+		let u = 0;
+		let v = 0;
+		let h = 0;
+		const MAX_VALUE = 32767;
+		for ( let i = 0; i < vertexCount; ++ i ) {
+
+			u += zigZagDecode( uBuffer[ i ] );
+			v += zigZagDecode( vBuffer[ i ] );
+			h += zigZagDecode( hBuffer[ i ] );
+
+			uResult[ i ] = u / MAX_VALUE;
+			vResult[ i ] = v / MAX_VALUE;
+			hResult[ i ] = h / MAX_VALUE;
+
+		}
+
+		// align pointer for index data
+		const is32 = vertexCount > 65536;
+		const bufferType = is32 ? Uint32Array : Uint16Array;
+		if ( is32 ) {
+
+			pointer = Math.ceil( pointer / 4 ) * 4;
+
+		} else {
+
+			pointer = Math.ceil( pointer / 2 ) * 2;
+
+		}
+
+		// extract index data
+		const triangleCount = readInt();
+		const indices = readBuffer( triangleCount * 3, bufferType );
+
+		// decode the index data
+		let highest = 0;
+		for ( var i = 0; i < indices.length; ++ i ) {
+
+			const code = indices[ i ];
+			indices[ i ] = highest - code;
+			if ( code === 0 ) {
+
+				++ highest;
+
+			}
+
+		}
+
+		// sort functions for the edges since they are not pre-sorted
+		const vSort = ( a, b ) => vResult[ b ] - vResult[ a ];
+		const vSortReverse = ( a, b ) => - vSort( a, b );
+
+		const uSort = ( a, b ) => uResult[ a ] - uResult[ b ];
+		const uSortReverse = ( a, b ) => - uSort( a, b );
+
+		// get edge indices
+		const westVertexCount = readInt();
+		const westIndices = readBuffer( westVertexCount, bufferType );
+		westIndices.sort( vSort );
+
+		const southVertexCount = readInt();
+		const southIndices = readBuffer( southVertexCount, bufferType );
+		southIndices.sort( uSort );
+
+		const eastVertexCount = readInt();
+		const eastIndices = readBuffer( eastVertexCount, bufferType );
+		eastIndices.sort( vSortReverse );
+
+		const northVertexCount = readInt();
+		const northIndices = readBuffer( northVertexCount, bufferType );
+		northIndices.sort( uSortReverse );
+
+		const edgeIndices = {
+			westIndices,
+			southIndices,
+			eastIndices,
+			northIndices,
+		};
+
+		// parse extensions
+		const extensions = {};
+		while ( pointer < view.byteLength ) {
+
+			const extensionId = readByte();
+			const extensionLength = readInt();
+
+			if ( extensionId === 1 ) {
+
+				// oct encoded normals
+				const xy = readBuffer( vertexCount * 2, Uint8Array );
+				const normals = new Float32Array( vertexCount * 3 );
+
+				// https://github.com/CesiumGS/cesium/blob/baaabaa49058067c855ad050be73a9cdfe9b6ac7/packages/engine/Source/Core/AttributeCompression.js#L119-L140
+				for ( let i = 0; i < vertexCount; i ++ ) {
+
+					let x = ( xy[ 2 * i + 0 ] / 255 ) * 2 - 1;
+					let y = ( xy[ 2 * i + 1 ] / 255 ) * 2 - 1;
+					const z = 1.0 - ( Math.abs( x ) + Math.abs( y ) );
+
+					if ( z < 0.0 ) {
+
+						const oldVX = x;
+						x = ( 1.0 - Math.abs( y ) ) * signNotZero( oldVX );
+						y = ( 1.0 - Math.abs( oldVX ) ) * signNotZero( y );
+
+					}
+
+					const len = Math.sqrt( x * x + y * y + z * z );
+					normals[ 3 * i + 0 ] = x / len;
+					normals[ 3 * i + 1 ] = y / len;
+					normals[ 3 * i + 2 ] = z / len;
+
+				}
+
+				extensions[ 'octvertexnormals' ] = {
+					extensionId,
+					normals,
+				};
+
+			} else if ( extensionId === 2 ) {
+
+				// water mask
+				const size = extensionLength === 1 ? 1 : 256;
+				const mask = readBuffer( size * size, Uint8Array );
+				extensions[ 'watermask' ] = {
+					extensionId,
+					mask,
+					size,
+				};
+
+			} else if ( extensionId === 4 ) {
+
+				// metadata
+				const jsonLength = readInt();
+				const jsonBuffer = readBuffer( jsonLength, Uint8Array );
+				const json = new TextDecoder().decode( jsonBuffer );
+				extensions[ 'metadata' ] = {
+					extensionId,
+					json: JSON.parse( json ),
+				};
+
+			}
+
+		}
+
+		return {
+			header,
+			indices,
+			vertexData: {
+				u: uResult,
+				v: vResult,
+				height: hResult,
+			},
+			edgeIndices,
+			extensions,
+		};
+
+	}
+
+}
+
+function signNotZero( v ) {
+
+	return v < 0.0 ? - 1.0 : 1.0;
+
+}

src/plugins/index.d.ts

@@ -12,8 +12,8 @@ export * from './three/LoadRegionPlugin';
 export * from './three/DebugTilesPlugin';
 
 // other formats
-export * from './three/images/ImageFormatPlugin';
-export * from './three/images/EllipsoidProjectionTilesPlugin';
+export * from './three/images/DeepZoomImagePlugin';
+export * from './three/images/EPSGTilesPlugin';
 
 // common plugins
 export { ImplicitTilingPlugin } from './base/ImplicitTilingPlugin';

src/plugins/index.js

@@ -12,8 +12,8 @@ export * from './three/LoadRegionPlugin.js';
 export * from './three/DebugTilesPlugin.js';
 
 // other formats
-export * from './three/images/ImageFormatPlugin.js';
-export * from './three/images/EllipsoidProjectionTilesPlugin.js';
+export * from './three/images/DeepZoomImagePlugin.js';
+export * from './three/images/EPSGTilesPlugin.js';
 
 // common plugins
 export { ImplicitTilingPlugin } from './base/ImplicitTilingPlugin.js';

src/plugins/three/CesiumIonAuthPlugin.js

@@ -1,15 +1,18 @@
 import { GoogleCloudAuthPlugin } from './GoogleCloudAuthPlugin.js';
+import { TMSTilesPlugin } from './images/EPSGTilesPlugin.js';
+import { QuantizedMeshPlugin } from './QuantizedMeshPlugin.js';
 
 export class CesiumIonAuthPlugin {
 
-	constructor( { apiToken, assetId = null, autoRefreshToken = false } ) {
+	constructor( { apiToken, assetId = null, autoRefreshToken = false, useRecommendedSettings = true } ) {
 
 		this.name = 'CESIUM_ION_AUTH_PLUGIN';
 		this.priority = - Infinity;
 
 		this.apiToken = apiToken;
 		this.assetId = assetId;
 		this.autoRefreshToken = autoRefreshToken;
+		this.useRecommendedSettings = useRecommendedSettings;
 		this.tiles = null;
 		this.endpointURL = null;
 
@@ -153,10 +156,32 @@ export class CesiumIonAuthPlugin {
 						tiles.registerPlugin( new GoogleCloudAuthPlugin( {
 							apiToken: url.searchParams.get( 'key' ),
 							autoRefreshToken: this.autoRefreshToken,
+							useRecommendedSettings: this.useRecommendedSettings,
 						} ) );
 
 					} else {
 
+						// GLTF
+						// CZML
+						// KML
+						// GEOJSON
+						// TODO: Should we automatically add these? Or add a callback for defining them?
+						// How can a user add custom options in these cases?
+						if ( json.type === 'TERRAIN' ) {
+
+							tiles.registerPlugin( new QuantizedMeshPlugin( {
+								useRecommendedSettings: this.useRecommendedSettings,
+							} ) );
+
+						} else if ( json.type === 'IMAGERY' ) {
+
+							tiles.registerPlugin( new TMSTilesPlugin( {
+								useRecommendedSettings: this.useRecommendedSettings,
+								shape: 'ellipsoid',
+							} ) );
+
+						}
+
 						tiles.rootURL = json.url;
 						tiles.fetchOptions.headers = tiles.fetchOptions.headers || {};
 						tiles.fetchOptions.headers.Authorization = `Bearer ${ json.accessToken }`;