Add demo for tile texture overlays (#528)

* Add initial texture skinning

* Updates

* Small fixes

* before compile functino

* Add support for image bitmap loader

* Add texture overlay test demo

* file rename

* small fixes

* Uniform fixes

* Update demo

* Remove cache

* Load textures

* slope update

* remove unused lines

* Limit the data that can be downloaded at once with a priority queue

* Update textures result

* Unset zoom point when tiles change

* Move material application to demo page

* Clean up material handling

* Reorganize foldrs

* update

* Stable loading

* Re-add parse tile adjustments

example/fadingTiles.js

@@ -5,10 +5,10 @@ import {
 	OrthographicCamera,
 	Group,
 } from 'three';
-import { FadeTilesRenderer, } from './src/FadeTilesRenderer.js';
+import { FadeTilesRenderer, } from './src/plugins/fade/FadeTilesRenderer.js';
 import { EnvironmentControls } from '../src/index.js';
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
-import { CameraTransitionManager } from './src/CameraTransitionManager.js';
+import { CameraTransitionManager } from './src/camera/CameraTransitionManager.js';
 
 let controls, scene, renderer;
 let groundTiles, skyTiles, tilesParent, transition;

example/googleMapsExample.js

@@ -16,7 +16,7 @@ import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import { estimateBytesUsed } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
-import { CameraTransitionManager } from './src/CameraTransitionManager.js';
+import { CameraTransitionManager } from './src/camera/CameraTransitionManager.js';
 
 let controls, scene, renderer, tiles, transition;
 let statsContainer, stats;

example/landformSite.js

@@ -4,14 +4,16 @@ import {
 } from '..';
 import {
 	Scene,
-	DirectionalLight,
-	AmbientLight,
 	WebGLRenderer,
 	PerspectiveCamera,
 	Group,
+	TextureLoader,
+	MeshBasicMaterial,
 } from 'three';
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
-import { JPLLandformSiteSceneLoader } from './src/JPLLandformSceneLoader.js';
+import { JPLLandformSiteSceneLoader } from './src/jpl/JPLLandformSceneLoader.js';
+import { TextureOverlayTilesRendererMixin } from './src/plugins/overlays/TextureOverlayTilesRenderer.js';
+import { TextureOverlayMaterialMixin } from './src/plugins/overlays/TextureOverlayMaterial.js';
 
 const URLS = [
 
@@ -51,6 +53,7 @@ let camera, controls, scene, renderer;
 const params = {
 
 	errorTarget: 12,
+	slopeLayer: false,
 
 };
 
@@ -89,17 +92,69 @@ function init() {
 	let downloadQueue = null;
 	let parseQueue = null;
 	let lruCache = null;
+	const layerFunction = async tileUrl => {
+
+		const url = tileUrl.replace( '/tilesets/', '/textures/SMG/' ).replace( /\.[0-9a-z]+$/i, '.png' );
+
+		return new TextureLoader()
+			.loadAsync( url )
+			.then( tex => {
+
+				tex.flipY = false;
+				return tex;
+
+			} );
+
+	};
+
 	URLS.forEach( async url => {
 
 		const scene = await new JPLLandformSiteSceneLoader().load( url );
 		const tokens = url.split( /[\\/]/g );
 		tokens.pop();
 
+		const TextureOverlayTilesRenderer = TextureOverlayTilesRendererMixin( TilesRenderer );
+		const TextureOverlayMaterial = TextureOverlayMaterialMixin( MeshBasicMaterial );
 		scene.tilesets.forEach( info => {
 
 			const url = [ ...tokens, `${ info.id }_tileset.json` ].join( '/' );
-			const tiles = new TilesRenderer( url );
+			const tiles = new TextureOverlayTilesRenderer( url );
+
+			// ensure all materials support overlay textures
+			tiles.addEventListener( 'load-model', ( { tile, scene } )=> {
+
+				scene.traverse( c => {
+
+					if ( c.material ) {
+
+						const newMaterial = new TextureOverlayMaterial();
+						newMaterial.copy( c.material );
+						newMaterial.textures = Object.values( tiles.getTexturesForTile( tile ) );
+						c.material = newMaterial;
+
+					}
+
+				} );
+
+			} );
+
+			// assign the texture layers
+			tiles.addEventListener( 'layer-textures-change', ( { tile, scene } ) => {
 
+				scene.traverse( c => {
+
+					if ( c.material ) {
+
+						c.material.textures = Object.values( tiles.getTexturesForTile( tile ) );
+						c.material.needsUpdate = true;
+
+					}
+
+				} );
+
+			} );
+
+			// assign a common cache and data
 			lruCache = lruCache || tiles.lruCache;
 			parseQueue = parseQueue || tiles.parseQueue;
 			downloadQueue = downloadQueue || tiles.downloadQueue;
@@ -109,6 +164,7 @@ function init() {
 			tiles.parseQueue = parseQueue;
 			tiles.setCamera( camera );
 
+			// update the scene
 			const frame = scene.frames.find( f => f.id === info.frame_id );
 			frame.sceneMatrix.decompose( tiles.group.position, tiles.group.quaternion, tiles.group.scale );
 			tilesParent.add( tiles.group );
@@ -123,6 +179,19 @@ function init() {
 
 	const gui = new GUI();
 	gui.add( params, 'errorTarget', 0, 100 );
+	gui.add( params, 'slopeLayer' ).onChange( v => {
+
+		if ( v ) {
+
+			tileSets.forEach( t => t.registerLayer( 'slopeLayer', layerFunction ) );
+
+		} else {
+
+			tileSets.forEach( t => t.unregisterLayer( 'slopeLayer' ) );
+
+		}
+
+	} );
 	gui.open();
 
 }

example/src/FadeTilesRenderer.js → example/src/plugins/fade/FadeTilesRenderer.js

@@ -1,5 +1,5 @@
 import { Group, Matrix4, Vector3, Quaternion } from 'three';
-import { TilesRenderer } from '../../src/index.js';
+import { TilesRenderer } from '../../../../src/index.js';
 import { FadeManager } from './FadeManager.js';
 
 const _fromPos = new Vector3();

example/src/plugins/overlays/TextureOverlayMaterial.js

@@ -0,0 +1,59 @@
+export const TextureOverlayMaterialMixin = base => class extends base {
+
+	constructor( ...args ) {
+
+		super( ...args );
+		this.textures = [];
+
+	}
+
+	onBeforeCompile( shader ) {
+
+		const textures = this.textures;
+		const material = this;
+
+		shader.uniforms.textures = {
+			get value() {
+
+				return material.textures;
+
+			},
+		};
+
+		// WebGL does not seem to like empty texture arrays
+		if ( textures.length !== 0 ) {
+
+			shader.fragmentShader = shader.fragmentShader
+				.replace( /void main/, m => /* glsl */`
+					uniform sampler2D textures[ ${ textures.length } ];
+					${ m }
+
+				` )
+				.replace( /#include <color_fragment>/, m => /* glsl */`
+
+					${ m }
+
+					vec4 col;
+					#pragma unroll_loop_start
+					for ( int i = 0; i < ${ textures.length }; i ++ ) {
+
+						col = texture( textures[ i ], vMapUv );
+						col = vec4( 0, 0, 1, col.r );
+						diffuseColor = mix( diffuseColor, vec4( 0.35, 0.65, 1, 1 ), col.a );
+
+					}
+					#pragma unroll_loop_end
+
+				` );
+
+		}
+
+	}
+
+	customProgramCacheKey() {
+
+		return this.textures.length + this.onBeforeCompile.toString();
+
+	}
+
+};