Add dither fade example (#421)

* Add fade utils * Delete line * Updates * Updates to fade example * Cleanup * Add fade example * Add an example of dither fade tiles * Remove unused field * Update the fade tiles demo * Styles update * Last update * Fix the fade out logic when fade in has not happened * Ensure tiles outside the visible area are not visible / rendered on a frame * Add fast moving camera support * Fade improvements * Adjust fade positino * Update examples, fix fade
NASA-AMMOS · Dec 25, 2023 · c7ca699 · c7ca699
1 parent 7ea052a
commit c7ca699
Show file tree

Hide file tree

Showing 4 changed files with 699 additions and 0 deletions.
diff --git a/example/fadingTiles.html b/example/fadingTiles.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+		<meta charset="utf-8"/>
+
+		<title>Dither Fade Tiles</title>
+
+		<style>
+            * {
+                margin: 0;
+                padding: 0;
+            }
+
+            html {
+                overflow: hidden;
+				font-family: Arial, Helvetica, sans-serif;
+				user-select: none;
+            }
+
+			canvas {
+				image-rendering: pixelated;
+				outline: none;
+			}
+
+			#info {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+				padding: 5px;
+				pointer-events: none;
+				line-height: 1.5em;
+			}
+
+			#info, #info a {
+				color: #234;
+			}
+
+			#info a {
+				pointer-events: all;
+			}
+        </style>
+    </head>
+    <body>
+		<div id="info">
+			Demonstration of tiles use a dither fade to change, smoothing out the transition.
+		</div>
+        <script src="./fadingTiles.js"></script>
+    </body>
+</html>
diff --git a/example/fadingTiles.js b/example/fadingTiles.js
@@ -0,0 +1,143 @@
+import {
+	FadeTilesRenderer,
+} from './src/FadeTilesRenderer.js';
+import {
+	Scene,
+	DirectionalLight,
+	AmbientLight,
+	WebGLRenderer,
+	PerspectiveCamera,
+	Group,
+} from 'three';
+import { FlyOrbitControls } from './FlyOrbitControls.js';
+import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
+
+let camera, controls, scene, renderer;
+let groundTiles, skyTiles, tilesParent;
+
+const params = {
+
+	reinstantiateTiles,
+	useFade: true,
+	errorTarget: 12,
+	fadeDuration: 0.5,
+	renderScale: 1,
+	fadingGroundTiles: '0 tiles',
+
+};
+
+init();
+render();
+
+function init() {
+
+	scene = new Scene();
+
+	// primary camera view
+	renderer = new WebGLRenderer( { antialias: true } );
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.setClearColor( 0xd8cec0 );
+
+	document.body.appendChild( renderer.domElement );
+	renderer.domElement.tabIndex = 1;
+
+	camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
+	camera.position.set( 20, 10, 20 );
+
+	// controls
+	controls = new FlyOrbitControls( camera, renderer.domElement );
+	controls.screenSpacePanning = false;
+	controls.minDistance = 1;
+	controls.maxDistance = 2000;
+	controls.maxPolarAngle = Math.PI / 2;
+	controls.baseSpeed = 0.1;
+	controls.fastSpeed = 0.2;
+
+	// lights
+	const dirLight = new DirectionalLight( 0xffffff );
+	dirLight.position.set( 1, 2, 3 );
+	scene.add( dirLight );
+
+	const ambLight = new AmbientLight( 0xffffff, 0.2 );
+	scene.add( ambLight );
+
+	tilesParent = new Group();
+	tilesParent.rotation.set( Math.PI / 2, 0, 0 );
+	scene.add( tilesParent );
+
+	reinstantiateTiles();
+
+	onWindowResize();
+	window.addEventListener( 'resize', onWindowResize, false );
+
+	const gui = new GUI();
+	gui.add( params, 'useFade' );
+	gui.add( params, 'errorTarget', 0, 1000 );
+	gui.add( params, 'fadeDuration', 0, 5 );
+	gui.add( params, 'renderScale', 0.1, 1.0, 0.05 ).onChange( v => renderer.setPixelRatio( v * window.devicePixelRatio ) );
+
+	const textController = gui.add( params, 'fadingGroundTiles' ).listen().disable();
+	textController.domElement.style.opacity = 1.0;
+
+	gui.add( params, 'reinstantiateTiles' );
+
+	gui.open();
+
+}
+
+function reinstantiateTiles() {
+
+	if ( groundTiles ) {
+
+		groundTiles.dispose();
+		skyTiles.dispose();
+
+	}
+
+	groundTiles = new FadeTilesRenderer( 'https://raw.githubusercontent.com/NASA-AMMOS/3DTilesSampleData/master/msl-dingo-gap/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize_tileset.json' );
+	groundTiles.fetchOptions.mode = 'cors';
+	groundTiles.lruCache.minSize = 900;
+	groundTiles.lruCache.maxSize = 1300;
+	groundTiles.errorTarget = 12;
+
+	skyTiles = new FadeTilesRenderer( 'https://raw.githubusercontent.com/NASA-AMMOS/3DTilesSampleData/master/msl-dingo-gap/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_sky/0528_0260184_to_s64o256_sky_tileset.json' );
+	skyTiles.fetchOptions.mode = 'cors';
+	skyTiles.lruCache = groundTiles.lruCache;
+
+	tilesParent.add( groundTiles.group, skyTiles.group );
+
+}
+
+function onWindowResize() {
+
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+
+}
+
+function render() {
+
+	requestAnimationFrame( render );
+
+	camera.updateMatrixWorld();
+
+	groundTiles.errorTarget = params.errorTarget;
+
+	groundTiles.setCamera( camera );
+	groundTiles.setResolutionFromRenderer( camera, renderer );
+	groundTiles.update();
+
+	skyTiles.setCamera( camera );
+	skyTiles.setResolutionFromRenderer( camera, renderer );
+	skyTiles.update();
+
+	groundTiles.fadeDuration = params.useFade ? params.fadeDuration * 1000 : 0;
+	skyTiles.fadeDuration = params.useFade ? params.fadeDuration * 1000 : 0;
+
+	renderer.render( scene, camera );
+
+	params.fadingGroundTiles = groundTiles._fadeGroup.children.length + ' tiles';
+
+}