|
|
@@ -1,13 +1,13 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
- <title>three.js loader - 3d tiles</title>
|
|
|
+ <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: #111;
|
|
|
+ background-color: #000;
|
|
|
color: #eee;
|
|
|
}
|
|
|
|
|
|
@@ -33,10 +33,11 @@
|
|
|
|
|
|
<body>
|
|
|
<div id="info">
|
|
|
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> 3d tiles - <a href="https://github.com/NASA-AMMOS/3DTilesRendererJS" target="_blank" rel="noopener">3d-tiles-renderer</a><br/>
|
|
|
- See <a href="https://github.com/NASA-AMMOS/3DTilesRendererJS" target="_blank" rel="noopener">main project repository</a> for more information and examples on loading 3d tiles
|
|
|
- <br/>
|
|
|
- and other tiled data formats. <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>.
|
|
|
+ <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">
|
|
|
@@ -44,13 +45,23 @@
|
|
|
<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.8/src/index.js",
|
|
|
- "3d-tiles-renderer/plugins": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.8/src/plugins/index.js"
|
|
|
+ "3d-tiles-renderer": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.23/build/index.js",
|
|
|
+ "3d-tiles-renderer/core/plugins": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.23/build/index.core-plugins.js",
|
|
|
+ "3d-tiles-renderer/three/plugins": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.23/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>
|
|
|
@@ -58,9 +69,25 @@
|
|
|
<script type="module">
|
|
|
|
|
|
import * as THREE from 'three';
|
|
|
- import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
|
|
|
- import { TilesRenderer, GlobeControls } from '3d-tiles-renderer';
|
|
|
- import { CesiumIonAuthPlugin, GLTFExtensionsPlugin, TilesFadePlugin, UpdateOnChangePlugin } from '3d-tiles-renderer/plugins';
|
|
|
+ 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.
|
|
|
@@ -68,49 +95,263 @@
|
|
|
|
|
|
let camera, scene, renderer;
|
|
|
let tiles, controls;
|
|
|
+ let clouds, aerialPerspective;
|
|
|
+ let _prevTime = 0, _deltaTime = 0;
|
|
|
|
|
|
init();
|
|
|
|
|
|
- function init() {
|
|
|
+ async function init() {
|
|
|
|
|
|
// camera
|
|
|
- camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100 );
|
|
|
- camera.position.set( - 1, 1, 1 ).normalize().multiplyScalar( 10 );
|
|
|
- camera.position.set( - 8000000, 10000000, - 14720000 );
|
|
|
- camera.lookAt( 0, 0, 0 );
|
|
|
+ camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 1e6 );
|
|
|
|
|
|
// scene
|
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
// renderer
|
|
|
- renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
|
|
|
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
- renderer.setAnimationLoop( animate );
|
|
|
+ renderer.toneMapping = THREE.AgXToneMapping;
|
|
|
+ renderer.toneMappingExposure = 10;
|
|
|
document.body.appendChild( renderer.domElement );
|
|
|
|
|
|
// loader
|
|
|
const dracoLoader = new DRACOLoader();
|
|
|
- dracoLoader.setDecoderPath( 'jsm/libs/draco/' );
|
|
|
+ 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 );
|
|
|
|
|
|
- // rotate the globe so the north pole is up
|
|
|
- tiles.group.rotation.x = - Math.PI / 2;
|
|
|
+ // 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, tiles );
|
|
|
+ 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();
|
|
|
|
|
|
@@ -127,7 +368,10 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
- function animate() {
|
|
|
+ function animate( time ) {
|
|
|
+
|
|
|
+ _deltaTime = ( time - _prevTime ) / 1000;
|
|
|
+ _prevTime = time;
|
|
|
|
|
|
controls.update();
|
|
|
tiles.update();
|
mrdoob
