samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js loader - 3d tiles + clouds</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			body {
				background-color: #000;
				color: #eee;
			}

			a {
				color: #b3e5fc;
				text-decoration: underline;
				pointer-events: all;
			}

			#credits {
				pointer-events: none;
				position: absolute;
				left: 10px;
				bottom: 5px;
			}

			img {
				height: 25px;
				margin-right: 0px;
			}
		</style>
	</head>

	<body>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
			<a href="https://github.com/NASA-AMMOS/3DTilesRendererJS" target="_blank" rel="noopener">3d-tiles-renderer</a> +
			<a href="https://github.com/takram-design-engineering/three-geospatial" target="_blank" rel="noopener">three-clouds</a><br/>
			<a href="https://developers.google.com/maps/documentation/tile/3d-tiles" target="_blank" rel="noopener">Google Photorealistic Tiles</a> token courtesy of <a href="https://ion.cesium.com/" target="_blank" rel="noopener">Cesium Ion</a>.<br/>
			<label>time of day: <input id="hour" type="range" min="0" max="24" value="0" step="0.01" style="pointer-events: all; vertical-align: middle;"></label>
		</div>

		<div id="credits">
			<img src="./textures/google_on_non_white_hdpi.png" />
			<a href="https://ion.cesium.com/" target="_blank" rel="noopener"><img src="./textures/cesiumion.png" /></a>
		</div>

		<!-- "three/examples/" import map entry required by 3d-tiles-renderer -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/",
					"three/examples/": "./",
					"3d-tiles-renderer": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.24/build/index.js",
					"3d-tiles-renderer/core/plugins": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.24/build/index.core-plugins.js",
					"3d-tiles-renderer/three/plugins": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.24/build/index.three-plugins.js",
					"postprocessing": "https://cdn.jsdelivr.net/npm/postprocessing@6.39.0/build/index.js",
					"@takram/three-clouds": "https://cdn.jsdelivr.net/npm/@takram/three-clouds@0.7.3/build/index.js",
					"@takram/three-atmosphere": "https://cdn.jsdelivr.net/npm/@takram/three-atmosphere@0.17.1/build/index.js",
					"@takram/three-geospatial": "https://cdn.jsdelivr.net/npm/@takram/three-geospatial@0.7.1/build/index.js",
					"@takram/three-geospatial/shaders": "https://cdn.jsdelivr.net/npm/@takram/three-geospatial@0.7.1/build/shaders.js",
					"@takram/three-geospatial-effects": "https://cdn.jsdelivr.net/npm/@takram/three-geospatial-effects@0.6.1/build/index.js",
					"@takram/three-atmosphere/shaders/bruneton": "https://cdn.jsdelivr.net/npm/@takram/three-atmosphere@0.17.1/build/shaders/bruneton.js"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';
			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
			import { toCreasedNormals } from 'three/addons/utils/BufferGeometryUtils.js';
			import { TilesRenderer, GlobeControls, CAMERA_FRAME } from '3d-tiles-renderer';
			import { CesiumIonAuthPlugin } from '3d-tiles-renderer/core/plugins';
			import { GLTFExtensionsPlugin, TilesFadePlugin, UpdateOnChangePlugin } from '3d-tiles-renderer/three/plugins';

			import { EffectMaterial, EffectPass, NormalPass, SMAAEffect } from 'postprocessing';
			import {
				CloudsEffect,
				CLOUD_SHAPE_TEXTURE_SIZE,
				CLOUD_SHAPE_DETAIL_TEXTURE_SIZE,
				DEFAULT_LOCAL_WEATHER_URL,
				DEFAULT_SHAPE_URL,
				DEFAULT_SHAPE_DETAIL_URL,
				DEFAULT_TURBULENCE_URL
			} from '@takram/three-clouds';
			import { AerialPerspectiveEffect, PrecomputedTexturesGenerator, getSunDirectionECEF } from '@takram/three-atmosphere';
			import { STBNLoader, DEFAULT_STBN_URL } from '@takram/three-geospatial';
			import { DitheringEffect, LensFlareEffect } from '@takram/three-geospatial-effects';

			// Ion key provided by Cesium for use on threejs.org
			// A personal Cesium Ion key can be used for development.
			const ION_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiMTFiZTRmZS1mMWIxLTQ5YzYtYjA4Zi0xYTE0MjFmYzQ5OGYiLCJpZCI6MjY3NzgzLCJpYXQiOjE3MzY0NzQxMDh9.ppGPgpse1lq7QeNyljX7THUyK5w1x_4HksSHSlhe5sY';

			let camera, scene, renderer;
			let tiles, controls;
			let clouds, aerialPerspective;
			let _prevTime = 0, _deltaTime = 0;

			init();

			async function init() {

				// camera
				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 1e6 );

				// scene
				scene = new THREE.Scene();

				// renderer
				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.toneMapping = THREE.AgXToneMapping;
				renderer.toneMappingExposure = 10;
				document.body.appendChild( renderer.domElement );

				// loader
				const dracoLoader = new DRACOLoader();
				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
				dracoLoader.setDecoderConfig( { type: 'js' } );

				const DEG2RAD = Math.PI / 180;

				// tiles
				class TileCreasedNormalsPlugin {

					processTileModel( scene ) {

						scene.traverse( ( mesh ) => {

							if ( mesh.geometry ) {

								mesh.geometry = toCreasedNormals( mesh.geometry, 30 * DEG2RAD );

							}

						} );

					}

				}

				tiles = new TilesRenderer();
				tiles.registerPlugin( new CesiumIonAuthPlugin( { apiToken: ION_KEY, assetId: '2275207', autoRefreshToken: true } ) );
				tiles.registerPlugin( new GLTFExtensionsPlugin( { dracoLoader } ) );
				tiles.registerPlugin( new TileCreasedNormalsPlugin() );
				tiles.registerPlugin( new TilesFadePlugin() );
				tiles.registerPlugin( new UpdateOnChangePlugin() );
				tiles.setCamera( camera );
				tiles.setResolutionFromRenderer( camera, renderer );

				scene.add( tiles.group );

				// position camera above Tokyo
				tiles.ellipsoid.getObjectFrame(
					35.6812 * DEG2RAD, 139.80 * DEG2RAD, 500,
					- 90 * DEG2RAD, - 10 * DEG2RAD, 0,
					camera.matrix, CAMERA_FRAME
				);
				camera.matrix.decompose( camera.position, camera.quaternion, camera.scale );

				// controls
				controls = new GlobeControls( scene, camera, renderer.domElement );
				controls.setEllipsoid( tiles.ellipsoid, tiles.group );
				controls.enableDamping = true;

				// Workaround: adjustHeight causes camera drift as tiles load.
				// Disable until first user interaction.
				controls.adjustHeight = false;

				function enableAdjustHeight() {

					controls.adjustHeight = true;
					renderer.domElement.removeEventListener( 'pointerdown', enableAdjustHeight );
					renderer.domElement.removeEventListener( 'wheel', enableAdjustHeight );

				}

				renderer.domElement.addEventListener( 'pointerdown', enableAdjustHeight );
				renderer.domElement.addEventListener( 'wheel', enableAdjustHeight );

				// sun direction
				const sunDirection = new THREE.Vector3();
				const params = { hourUTC: 0 }; // 0:00 UTC = 9:00 AM Tokyo

				function updateSunDirection() {

					const ms = params.hourUTC * 3600000;
					const date = new Date( Date.UTC( 2024, 2, 1 ) + ms );
					getSunDirectionECEF( date, sunDirection );
					aerialPerspective.sunDirection.copy( sunDirection );
					clouds.sunDirection.copy( sunDirection );

				}

				// aerial perspective (sky + atmosphere + deferred lighting)
				aerialPerspective = new AerialPerspectiveEffect( camera );
				aerialPerspective.sky = true;
				aerialPerspective.sunLight = true;
				aerialPerspective.skyLight = true;

				const normalPass = new NormalPass( scene, camera );
				aerialPerspective.normalBuffer = normalPass.texture;

				// clouds
				clouds = new CloudsEffect( camera );
				clouds.coverage = 0.3;
				clouds.localWeatherVelocity.set( 0.001, 0 );
				clouds.shadow.farScale = 0.25;
				clouds.shadow.maxFar = 1e5;
				clouds.shadow.cascadeCount = 2;
				clouds.shadow.mapSize.set( 512, 512 );
				clouds.shadow.splitMode = 'practical';
				clouds.shadow.splitLambda = 0.71;

				// sync cloud shadows to atmosphere
				clouds.events.addEventListener( 'change', ( event ) => {

					if ( event.property === 'atmosphereOverlay' ) aerialPerspective.overlay = clouds.atmosphereOverlay;
					if ( event.property === 'atmosphereShadow' ) aerialPerspective.shadow = clouds.atmosphereShadow;
					if ( event.property === 'atmosphereShadowLength' ) aerialPerspective.shadowLength = clouds.atmosphereShadowLength;

				} );

				// adapter: bridges pmndrs postprocessing passes to renderer.setEffects()

				class EffectPassAdapter {

					constructor( pass ) {

						this.pass = pass;
						this.needsSwap = pass.needsSwap !== false;
						this.enabled = true;
						this._initialized = false;

					}

					render( renderer, writeBuffer, readBuffer ) {

						if ( ! this._initialized ) {

							this.pass.initialize( renderer, false, THREE.HalfFloatType );
							this.pass.setSize( readBuffer.width, readBuffer.height );

							if ( readBuffer.depthTexture && this.pass.setDepthTexture ) {

								this.pass.setDepthTexture( readBuffer.depthTexture );

							}

							this._initialized = true;

						}

						if ( this.pass.fullscreenMaterial instanceof EffectMaterial ) {

							this.pass.fullscreenMaterial.adoptCameraSettings( camera );

						}

						this.pass.render( renderer, readBuffer, writeBuffer, _deltaTime );

					}

					setSize( width, height ) {

						if ( this._initialized ) this.pass.setSize( width, height );

					}

				}

				// postprocessing
				renderer.setEffects( [
					new EffectPassAdapter( normalPass ),
					new EffectPassAdapter( new EffectPass( camera, clouds, aerialPerspective ) ),
					new EffectPassAdapter( new EffectPass( camera, new LensFlareEffect() ) ),
					new EffectPassAdapter( new EffectPass( camera, new SMAAEffect() ) ),
					new EffectPassAdapter( new EffectPass( camera, new DitheringEffect() ) ),
				] );

				// generate precomputed atmosphere textures on GPU
				const texturesGenerator = new PrecomputedTexturesGenerator( renderer );
				const textures = await texturesGenerator.update();
				Object.assign( aerialPerspective, textures );
				Object.assign( clouds, textures );

				// load cloud textures
				const textureLoader = new THREE.TextureLoader();

				function loadCloudTexture( url, property ) {

					textureLoader.load( url, ( texture ) => {

						texture.minFilter = THREE.LinearMipMapLinearFilter;
						texture.magFilter = THREE.LinearFilter;
						texture.wrapS = THREE.RepeatWrapping;
						texture.wrapT = THREE.RepeatWrapping;
						texture.colorSpace = THREE.NoColorSpace;
						texture.needsUpdate = true;
						clouds[ property ] = texture;

					} );

				}

				loadCloudTexture( DEFAULT_LOCAL_WEATHER_URL, 'localWeatherTexture' );
				loadCloudTexture( DEFAULT_TURBULENCE_URL, 'turbulenceTexture' );

				function loadData3DTexture( url, size, property ) {

					fetch( url ).then( res => res.arrayBuffer() ).then( buffer => {

						const data = new Uint8Array( buffer );
						const texture = new THREE.Data3DTexture( data, size, size, size );
						texture.format = THREE.RedFormat;
						texture.minFilter = THREE.LinearFilter;
						texture.magFilter = THREE.LinearFilter;
						texture.wrapS = THREE.RepeatWrapping;
						texture.wrapT = THREE.RepeatWrapping;
						texture.wrapR = THREE.RepeatWrapping;
						texture.colorSpace = THREE.NoColorSpace;
						texture.needsUpdate = true;
						clouds[ property ] = texture;

					} );

				}

				loadData3DTexture( DEFAULT_SHAPE_URL, CLOUD_SHAPE_TEXTURE_SIZE, 'shapeTexture' );
				loadData3DTexture( DEFAULT_SHAPE_DETAIL_URL, CLOUD_SHAPE_DETAIL_TEXTURE_SIZE, 'shapeDetailTexture' );

				new STBNLoader().load( DEFAULT_STBN_URL, ( texture ) => {

					clouds.stbnTexture = texture;
					aerialPerspective.stbnTexture = texture;

				} );

				// initial sun position
				updateSunDirection();

				document.getElementById( 'hour' ).addEventListener( 'input', ( e ) => {

					params.hourUTC = parseFloat( e.target.value );
					updateSunDirection();

				} );

				// start rendering
				renderer.setAnimationLoop( animate );

				window.addEventListener( 'resize', onWindowResize );
				onWindowResize();

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

				tiles.setResolutionFromRenderer( camera, renderer );

			}

			function animate( time ) {

				_deltaTime = ( time - _prevTime ) / 1000;
				_prevTime = time;

				controls.update();
				tiles.update();

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>