From f5f6ac7a041335b8225161969eba00cadc8e3123 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 25 Dec 2024 12:06:54 +0900 Subject: [PATCH 01/11] Rearrange functions --- src/plugins/three/fade/TilesFadePlugin.js | 107 +++++++++++----------- 1 file changed, 54 insertions(+), 53 deletions(-) diff --git a/src/plugins/three/fade/TilesFadePlugin.js b/src/plugins/three/fade/TilesFadePlugin.js index c18c0a131..fbcf5ddb4 100644 --- a/src/plugins/three/fade/TilesFadePlugin.js +++ b/src/plugins/three/fade/TilesFadePlugin.js @@ -49,19 +49,6 @@ function onTileVisibilityChange( tile, visible ) { } -function onLoadModel( scene, tile ) { - - this._fadeMaterialManager.prepareScene( scene ); - -} - -function onDisposeModel( scene, tile ) { - - this._fadeManager.deleteObject( tile ); - this._fadeMaterialManager.deleteScene( scene ); - -} - function onFadeComplete( tile, visible ) { // mark the fade as finished @@ -85,18 +72,6 @@ function onFadeComplete( tile, visible ) { } -function onAddCamera( camera ) { - - this._prevCameraTransforms.set( camera, new Matrix4() ); - -} - -function onDeleteCamera( camera ) { - - this._prevCameraTransforms.delete( camera ); - -} - function onUpdateBefore() { const fadeManager = this._fadeManager; @@ -287,45 +262,28 @@ export class TilesFadePlugin { init( tiles ) { - const fadeManager = this._fadeManager; - fadeManager.onFadeSetStart = () => { + // event callback initialization + this._onLoadModel = ( { scene } )=> { - tiles.dispatchEvent( { type: 'fade-start' } ); - tiles.dispatchEvent( { type: 'force-rerender' } ); + this._fadeMaterialManager.prepareScene( scene ); }; + this._onDisposeModel = ( { tile, scene } ) => { - fadeManager.onFadeSetComplete = () => { - - tiles.dispatchEvent( { type: 'fade-end' } ); - tiles.dispatchEvent( { type: 'force-rerender' } ); + this._fadeManager.deleteObject( tile ); + this._fadeMaterialManager.deleteScene( scene ); }; - - fadeManager.onFadeComplete = onFadeComplete.bind( this ); - - this.tiles = tiles; - this._fadeManager = fadeManager; - this._prevCameraTransforms = new Map(); - - tiles.cameras.forEach( camera => { + this._onAddCamera = ( { camera } ) => { this._prevCameraTransforms.set( camera, new Matrix4() ); - } ); - - tiles.forEachLoadedModel( ( scene, tile ) => { - - onLoadModel.call( this, scene, tile ); + }; + this._onDeleteCamera = ( { camera } )=> { - } ); + this._prevCameraTransforms.delete( camera ); - this._onLoadModel = e => onLoadModel.call( this, e.scene, e.tile ); - this._onDisposeModel = e => onDisposeModel.call( this, e.scene, e.tile ); - this._onAddCamera = e => onAddCamera.call( this, e.camera ); - this._onDeleteCamera = e => onDeleteCamera.call( this, e.camera ); - this._onUpdateBefore = () => onUpdateBefore.call( this ); - this._onUpdateAfter = () => onUpdateAfter.call( this ); + }; this._onTileVisibilityChange = ( { tile, visible } ) => { // ensure the tiles are marked as visible on visibility toggle since @@ -346,6 +304,16 @@ export class TilesFadePlugin { } ); }; + this._onUpdateBefore = () => { + + onUpdateBefore.call( this ); + + }; + this._onUpdateAfter = () => { + + onUpdateAfter.call( this ); + + } tiles.addEventListener( 'load-model', this._onLoadModel ); tiles.addEventListener( 'dispose-model', this._onDisposeModel ); @@ -355,6 +323,39 @@ export class TilesFadePlugin { tiles.addEventListener( 'update-after', this._onUpdateAfter ); tiles.addEventListener( 'tile-visibility-change', this._onTileVisibilityChange ); + const fadeManager = this._fadeManager; + fadeManager.onFadeSetStart = () => { + + tiles.dispatchEvent( { type: 'fade-start' } ); + tiles.dispatchEvent( { type: 'force-rerender' } ); + + }; + + fadeManager.onFadeSetComplete = () => { + + tiles.dispatchEvent( { type: 'fade-end' } ); + tiles.dispatchEvent( { type: 'force-rerender' } ); + + }; + + fadeManager.onFadeComplete = onFadeComplete.bind( this ); + + this.tiles = tiles; + this._fadeManager = fadeManager; + this._prevCameraTransforms = new Map(); + + tiles.cameras.forEach( camera => { + + this._prevCameraTransforms.set( camera, new Matrix4() ); + + } ); + + tiles.forEachLoadedModel( ( scene, tile ) => { + + this._onLoadModel( { scene } ); + + } ); + } initBatchedMesh() { From 800ce61b9f5fd4fc0cbe800ac9253cba398c9d7a Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 25 Dec 2024 12:17:09 +0900 Subject: [PATCH 02/11] clean up --- .../src/plugins/batched/BatchedTilesPlugin.js | 6 ++ src/plugins/three/fade/TilesFadePlugin.js | 100 ++++++++++-------- 2 files changed, 60 insertions(+), 46 deletions(-) diff --git a/example/src/plugins/batched/BatchedTilesPlugin.js b/example/src/plugins/batched/BatchedTilesPlugin.js index 4d4b9d6de..cc116638a 100644 --- a/example/src/plugins/batched/BatchedTilesPlugin.js +++ b/example/src/plugins/batched/BatchedTilesPlugin.js @@ -388,4 +388,10 @@ export class BatchedTilesPlugin { } + getTileBatchIds( tile ) { + + return this._tileToInstanceId.get( tile ); + + } + } diff --git a/src/plugins/three/fade/TilesFadePlugin.js b/src/plugins/three/fade/TilesFadePlugin.js index fbcf5ddb4..4bc3b720b 100644 --- a/src/plugins/three/fade/TilesFadePlugin.js +++ b/src/plugins/three/fade/TilesFadePlugin.js @@ -10,45 +10,6 @@ const _fromQuat = new Quaternion(); const _toQuat = new Quaternion(); const _scale = new Vector3(); -function onTileVisibilityChange( tile, visible ) { - - const fadeManager = this._fadeManager; - if ( fadeManager.isFadingOut( tile ) ) { - - this._fadingOutCount --; - - } - - if ( ! visible ) { - - this._fadingOutCount ++; - fadeManager.fadeOut( tile ); - - } else { - - // if this is a root renderable tile and this is the first time rendering in - // then pop it in - const isRootRenderableTile = tile.__depthFromRenderedParent === 1; - if ( isRootRenderableTile ) { - - if ( tile[ HAS_POPPED_IN ] || this.fadeRootTiles ) { - - this._fadeManager.fadeIn( tile ); - - } - - tile[ HAS_POPPED_IN ] = true; - - } else { - - this._fadeManager.fadeIn( tile ); - - } - - } - -} - function onFadeComplete( tile, visible ) { // mark the fade as finished @@ -265,33 +226,38 @@ export class TilesFadePlugin { // event callback initialization this._onLoadModel = ( { scene } )=> { + // initialize all the scene materials to fade this._fadeMaterialManager.prepareScene( scene ); }; this._onDisposeModel = ( { tile, scene } ) => { + // delete the fade info from the managers on disposal of model this._fadeManager.deleteObject( tile ); this._fadeMaterialManager.deleteScene( scene ); }; this._onAddCamera = ( { camera } ) => { + // track the camera transform this._prevCameraTransforms.set( camera, new Matrix4() ); }; this._onDeleteCamera = ( { camera } )=> { + // remove the camera transform this._prevCameraTransforms.delete( camera ); }; this._onTileVisibilityChange = ( { tile, visible } ) => { - // ensure the tiles are marked as visible on visibility toggle since - // it's possible we disable them when adjusting visibility based on frustum + // this function gets fired _after_ all set visible callbacks including the batched meshes + + // revert the scene and fade to the initial state when toggling const scene = tile.cached.scene; if ( scene ) { - scene.visible = true; // TODO + scene.visible = true; } @@ -313,7 +279,7 @@ export class TilesFadePlugin { onUpdateAfter.call( this ); - } + }; tiles.addEventListener( 'load-model', this._onLoadModel ); tiles.addEventListener( 'dispose-model', this._onDisposeModel ); @@ -323,6 +289,7 @@ export class TilesFadePlugin { tiles.addEventListener( 'update-after', this._onUpdateAfter ); tiles.addEventListener( 'tile-visibility-change', this._onTileVisibilityChange ); + // initialize fade manager const fadeManager = this._fadeManager; fadeManager.onFadeSetStart = () => { @@ -344,6 +311,7 @@ export class TilesFadePlugin { this._fadeManager = fadeManager; this._prevCameraTransforms = new Map(); + // initialize the state based on what's already present tiles.cameras.forEach( camera => { this._prevCameraTransforms.set( camera, new Matrix4() ); @@ -358,6 +326,7 @@ export class TilesFadePlugin { } + // initializes the batched mesh if it needs to be, dispose if it it's no longer needed initBatchedMesh() { const otherBatchedMesh = this.tiles.getPluginByName( 'BATCHED_MESH_PLUGIN' )?.batchedMesh; @@ -369,6 +338,7 @@ export class TilesFadePlugin { this.batchedMesh.dispose(); this.batchedMesh.removeFromParent(); + this.batchedMesh = null; otherBatchedMesh.removeEventListener( 'dispose', this._onBatchedMeshDispose ); }; @@ -394,10 +364,47 @@ export class TilesFadePlugin { } + // callback for fading to prevent tiles from being removed until the fade effect has completed setTileVisible( tile, visible ) { - const wasFading = this._fadeManager.isFading( tile ); - onTileVisibilityChange.call( this, tile, visible ); + const fadeManager = this._fadeManager; + + // track the fade state + const wasFading = fadeManager.isFading( tile ); + if ( fadeManager.isFadingOut( tile ) ) { + + this._fadingOutCount --; + + } + + // trigger any necessary fades + if ( ! visible ) { + + this._fadingOutCount ++; + fadeManager.fadeOut( tile ); + + } else { + + // if this is a root renderable tile and this is the first time rendering in + // then pop it in + const isRootRenderableTile = tile.__depthFromRenderedParent === 1; + if ( isRootRenderableTile ) { + + if ( tile[ HAS_POPPED_IN ] || this.fadeRootTiles ) { + + this._fadeManager.fadeIn( tile ); + + } + + tile[ HAS_POPPED_IN ] = true; + + } else { + + this._fadeManager.fadeIn( tile ); + + } + + } // if a tile was already fading then it's already marked as visible and in the scene if ( wasFading ) { @@ -451,6 +458,7 @@ export class TilesFadePlugin { } + // helper for iterating over the batch ids for a given tile forEachBatchIds( tile, cb ) { this.initBatchedMesh(); @@ -458,7 +466,7 @@ export class TilesFadePlugin { if ( this.batchedMesh ) { const batchedPlugin = this.tiles.getPluginByName( 'BATCHED_MESH_PLUGIN' ); - const instanceIds = batchedPlugin._tileToInstanceId.get( tile ); + const instanceIds = batchedPlugin.getTileBatchIds( tile ); if ( instanceIds ) { instanceIds.forEach( id => { From 18dc2a97ead427633f0780d24ab6d26dc6bd9665 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 25 Dec 2024 12:20:38 +0900 Subject: [PATCH 03/11] More cleanup --- src/plugins/three/fade/TilesFadePlugin.js | 46 +++++++++++------------ 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/src/plugins/three/fade/TilesFadePlugin.js b/src/plugins/three/fade/TilesFadePlugin.js index 4bc3b720b..9af4daadc 100644 --- a/src/plugins/three/fade/TilesFadePlugin.js +++ b/src/plugins/three/fade/TilesFadePlugin.js @@ -10,29 +10,6 @@ const _fromQuat = new Quaternion(); const _toQuat = new Quaternion(); const _scale = new Vector3(); -function onFadeComplete( tile, visible ) { - - // mark the fade as finished - this._fadeMaterialManager.setFade( tile.cached.scene, 0, 0 ); - - this.forEachBatchIds( tile, ( id, batchedMesh, plugin ) => { - - batchedMesh.setVisibleAt( id, false ); - plugin.batchedMesh.setVisibleAt( id, visible ); - - } ); - - if ( ! visible ) { - - // now that the tile is hidden we can run the built-in setTileVisible function for the tile - this.tiles.invokeOnePlugin( plugin => plugin !== this && plugin.setTileVisible && plugin.setTileVisible( tile, false ) ); - - this._fadingOutCount --; - - } - -} - function onUpdateBefore() { const fadeManager = this._fadeManager; @@ -305,7 +282,28 @@ export class TilesFadePlugin { }; - fadeManager.onFadeComplete = onFadeComplete.bind( this ); + fadeManager.onFadeComplete = ( tile, visible ) => { + + // mark the fade as finished and reset the fade parameters + this._fadeMaterialManager.setFade( tile.cached.scene, 0, 0 ); + + this.forEachBatchIds( tile, ( id, batchedMesh, plugin ) => { + + batchedMesh.setFadeAt( id, 0, 0 ); + batchedMesh.setVisibleAt( id, false ); + plugin.batchedMesh.setVisibleAt( id, visible ); + + } ); + + if ( ! visible ) { + + // now that the tile is hidden we can run the built-in setTileVisible function for the tile + tiles.invokeOnePlugin( plugin => plugin !== this && plugin.setTileVisible && plugin.setTileVisible( tile, false ) ); + this._fadingOutCount --; + + } + + }; this.tiles = tiles; this._fadeManager = fadeManager; From 13d2fb0330750e9666d3b1a7b9767e63c277ed13 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 25 Dec 2024 12:23:28 +0900 Subject: [PATCH 04/11] rearrangement --- src/plugins/three/fade/TilesFadePlugin.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/plugins/three/fade/TilesFadePlugin.js b/src/plugins/three/fade/TilesFadePlugin.js index 9af4daadc..eb3a70ddf 100644 --- a/src/plugins/three/fade/TilesFadePlugin.js +++ b/src/plugins/three/fade/TilesFadePlugin.js @@ -305,14 +305,11 @@ export class TilesFadePlugin { }; - this.tiles = tiles; - this._fadeManager = fadeManager; - this._prevCameraTransforms = new Map(); - // initialize the state based on what's already present + const prevCameraTransforms = new Map(); tiles.cameras.forEach( camera => { - this._prevCameraTransforms.set( camera, new Matrix4() ); + prevCameraTransforms.set( camera, new Matrix4() ); } ); @@ -322,6 +319,10 @@ export class TilesFadePlugin { } ); + this.tiles = tiles; + this._fadeManager = fadeManager; + this._prevCameraTransforms = prevCameraTransforms; + } // initializes the batched mesh if it needs to be, dispose if it it's no longer needed From 9829ad6275e4e7bc47eefff3b9f9acf6c2548202 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 25 Dec 2024 12:23:40 +0900 Subject: [PATCH 05/11] batch tiles plugin rename --- example/src/plugins/batched/BatchedTilesPlugin.js | 2 +- src/plugins/three/fade/TilesFadePlugin.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/example/src/plugins/batched/BatchedTilesPlugin.js b/example/src/plugins/batched/BatchedTilesPlugin.js index cc116638a..5e58bcf9f 100644 --- a/example/src/plugins/batched/BatchedTilesPlugin.js +++ b/example/src/plugins/batched/BatchedTilesPlugin.js @@ -30,7 +30,7 @@ export class BatchedTilesPlugin { ...options }; - this.name = 'BATCHED_MESH_PLUGIN'; + this.name = 'BATCHED_TILES_PLUGIN'; this.priority = - 1; // limit the amount of instances to the size of a 3d texture to avoid over flowing the diff --git a/src/plugins/three/fade/TilesFadePlugin.js b/src/plugins/three/fade/TilesFadePlugin.js index eb3a70ddf..105ae5b2f 100644 --- a/src/plugins/three/fade/TilesFadePlugin.js +++ b/src/plugins/three/fade/TilesFadePlugin.js @@ -143,7 +143,7 @@ function onUpdateAfter() { if ( this.batchedMesh ) { - const material = this.tiles.getPluginByName( 'BATCHED_MESH_PLUGIN' ).batchedMesh.material; + const material = this.tiles.getPluginByName( 'BATCHED_TILES_PLUGIN' ).batchedMesh.material; this.batchedMesh.material.map = material.map; this.batchedMesh.material.needsUpdate = true; @@ -328,7 +328,7 @@ export class TilesFadePlugin { // initializes the batched mesh if it needs to be, dispose if it it's no longer needed initBatchedMesh() { - const otherBatchedMesh = this.tiles.getPluginByName( 'BATCHED_MESH_PLUGIN' )?.batchedMesh; + const otherBatchedMesh = this.tiles.getPluginByName( 'BATCHED_TILES_PLUGIN' )?.batchedMesh; if ( otherBatchedMesh ) { if ( this.batchedMesh === null ) { @@ -464,7 +464,7 @@ export class TilesFadePlugin { if ( this.batchedMesh ) { - const batchedPlugin = this.tiles.getPluginByName( 'BATCHED_MESH_PLUGIN' ); + const batchedPlugin = this.tiles.getPluginByName( 'BATCHED_TILES_PLUGIN' ); const instanceIds = batchedPlugin.getTileBatchIds( tile ); if ( instanceIds ) { From c0afb0fd496c84b84d0633797f03ce69149d7062 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 25 Dec 2024 12:34:27 +0900 Subject: [PATCH 06/11] Updates --- src/plugins/three/fade/TilesFadePlugin.js | 43 ++++++++++++++--------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/src/plugins/three/fade/TilesFadePlugin.js b/src/plugins/three/fade/TilesFadePlugin.js index 105ae5b2f..08258886d 100644 --- a/src/plugins/three/fade/TilesFadePlugin.js +++ b/src/plugins/three/fade/TilesFadePlugin.js @@ -32,15 +32,14 @@ function onUpdateAfter() { const fadeMaterialManager = this._fadeMaterialManager; const displayActiveTiles = this._displayActiveTiles; const fadingBefore = this._fadingBefore; - const tiles = this.tiles; const prevCameraTransforms = this._prevCameraTransforms; - const lruCache = tiles.lruCache; - const cameras = tiles.cameras; + const { tiles, maximumFadeOutTiles, batchedMesh } = this; + const { lruCache, cameras } = tiles; - // reset state + // reset the active tiles flag tiles.displayActiveTiles = displayActiveTiles; - // update fades + // update fade step fadeManager.update(); // fire an event @@ -58,21 +57,18 @@ function onUpdateAfter() { tiles.visibleTiles.forEach( t => { - // TODO - const scene = t.cached.scene; - // if a tile is fading out then it may not be traversed and thus will not have // the frustum flag set correctly. - const isFadingOut = fadeManager.isFadingOut( t ); + const scene = t.cached.scene; if ( scene ) { - scene.visible = isFadingOut || t.__inFrustum; + scene.visible = t.__inFrustum; } this.forEachBatchIds( ( id, batchedMesh, plugin ) => { - batchedMesh.setVisibleAt( id, isFadingOut || t.__inFrustum ); + batchedMesh.setVisibleAt( id, t.__inFrustum ); plugin.batchedMesh.setVisibleAt( id, t.__inFrustum ); } ); @@ -81,7 +77,7 @@ function onUpdateAfter() { } - if ( this.maximumFadeOutTiles < this._fadingOutCount ) { + if ( maximumFadeOutTiles < this._fadingOutCount ) { // determine whether all the rendering cameras are moving // quickly so we can adjust how tiles fade accordingly @@ -124,12 +120,25 @@ function onUpdateAfter() { } ); + // update the fade state for each tile fadeManager.forEachObject( ( tile, { fadeIn, fadeOut } ) => { // prevent faded tiles from being unloaded + const scene = tile.cached.scene; + const isFadingOut = fadeManager.isFadingOut( tile ); lruCache.markUsed( tile ); - fadeMaterialManager.setFade( tile.cached.scene, fadeIn, fadeOut ); + if ( scene ) { + + fadeMaterialManager.setFade( scene, fadeIn, fadeOut ); + if ( isFadingOut ) { + + scene.visible = true; + + } + + } + // fade the tiles and toggle the visibility appropriately const isFading = fadeManager.isFading( tile ); this.forEachBatchIds( tile, ( id, batchedMesh, plugin ) => { @@ -141,11 +150,11 @@ function onUpdateAfter() { } ); - if ( this.batchedMesh ) { + // update the batched mesh fields + if ( batchedMesh ) { - const material = this.tiles.getPluginByName( 'BATCHED_TILES_PLUGIN' ).batchedMesh.material; - this.batchedMesh.material.map = material.map; - this.batchedMesh.material.needsUpdate = true; + const material = tiles.getPluginByName( 'BATCHED_TILES_PLUGIN' ).batchedMesh.material; + batchedMesh.material.map = material.map; } From 0ebcf5cfb6f445b0a3378540ca2c03892bf04494 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 25 Dec 2024 12:35:30 +0900 Subject: [PATCH 07/11] comment --- src/plugins/three/fade/FadeBatchedMesh.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/three/fade/FadeBatchedMesh.js b/src/plugins/three/fade/FadeBatchedMesh.js index b2f8e5b8c..4350355ae 100644 --- a/src/plugins/three/fade/FadeBatchedMesh.js +++ b/src/plugins/three/fade/FadeBatchedMesh.js @@ -2,6 +2,7 @@ import { PassThroughBatchedMesh } from './PassThroughBatchedMesh.js'; import { RGFormat, UnsignedByteType, DataTexture } from 'three'; import { wrapFadeMaterial } from './wrapFadeMaterial.js'; +// BatchedMesh instance that can fade materials export class FadeBatchedMesh extends PassThroughBatchedMesh { constructor( ...args ) { From cb80f32ef1dbd83f1ac80709a507aff35646fadd Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 25 Dec 2024 12:40:05 +0900 Subject: [PATCH 08/11] Add display for batched mesh instances --- example/googleMapsExample.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/example/googleMapsExample.js b/example/googleMapsExample.js index 44562ca91..833f86042 100644 --- a/example/googleMapsExample.js +++ b/example/googleMapsExample.js @@ -349,6 +349,28 @@ function updateHtml() { const programCount = renderer.info.programs.length; str += `Geometries: ${ memory.geometries } Textures: ${ memory.textures } Programs: ${ programCount } Draw Calls: ${ render.calls }`; + const batchPlugin = tiles.getPluginByName( 'BATCHED_TILES_PLUGIN' ); + const fadePlugin = tiles.getPluginByName( 'FADE_TILES_PLUGIN' ); + if ( batchPlugin ) { + + let tot = 0; + let totFade = 0; + batchPlugin.batchedMesh._instanceInfo.forEach( info => { + + if ( info.visible && info.active ) tot ++; + + } ); + + fadePlugin.batchedMesh._instanceInfo.forEach( info => { + + if ( info.visible && info.active ) totFade ++; + + } ); + + str += ', Batched: ' + tot + ', Fade Batched: ' + totFade; + + } + } if ( statsContainer.innerHTML !== str ) { From da8409158f0baac9be44b20ba65ddd1f3dfae0fb Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 25 Dec 2024 14:04:36 +0900 Subject: [PATCH 09/11] Fix frustum addition --- src/plugins/three/fade/FadeBatchedMesh.js | 6 +++++- src/plugins/three/fade/TilesFadePlugin.js | 12 ++++++------ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/plugins/three/fade/FadeBatchedMesh.js b/src/plugins/three/fade/FadeBatchedMesh.js index 4350355ae..1bbecee28 100644 --- a/src/plugins/three/fade/FadeBatchedMesh.js +++ b/src/plugins/three/fade/FadeBatchedMesh.js @@ -69,7 +69,11 @@ export class FadeBatchedMesh extends PassThroughBatchedMesh { // dispose the fade texture. Super cannot be used here due to proxy dispose() { - this.fadeTexture.dispose(); + if ( this.fadeTexture ) { + + this.fadeTexture.dispose(); + + } } diff --git a/src/plugins/three/fade/TilesFadePlugin.js b/src/plugins/three/fade/TilesFadePlugin.js index 08258886d..0ace48794 100644 --- a/src/plugins/three/fade/TilesFadePlugin.js +++ b/src/plugins/three/fade/TilesFadePlugin.js @@ -66,9 +66,10 @@ function onUpdateAfter() { } - this.forEachBatchIds( ( id, batchedMesh, plugin ) => { + const isFadingOut = fadeManager.isFadingOut( t ); + this.forEachBatchIds( t, ( id, batchedMesh, plugin ) => { - batchedMesh.setVisibleAt( id, t.__inFrustum ); + batchedMesh.setVisibleAt( id, isFadingOut && t.__inFrustum ); plugin.batchedMesh.setVisibleAt( id, t.__inFrustum ); } ); @@ -139,12 +140,11 @@ function onUpdateAfter() { } // fade the tiles and toggle the visibility appropriately - const isFading = fadeManager.isFading( tile ); this.forEachBatchIds( tile, ( id, batchedMesh, plugin ) => { batchedMesh.setFadeAt( id, fadeIn, fadeOut ); - batchedMesh.setVisibleAt( id, isFading ); - plugin.batchedMesh.setVisibleAt( id, ! isFading ); + batchedMesh.setVisibleAt( id, true ); + plugin.batchedMesh.setVisibleAt( id, false ); } ); @@ -250,7 +250,7 @@ export class TilesFadePlugin { this.forEachBatchIds( tile, ( id, batchedMesh, plugin ) => { batchedMesh.setFadeAt( id, 0, 0 ); - batchedMesh.setVisibleAt( id, true ); + batchedMesh.setVisibleAt( id, false ); plugin.batchedMesh.setVisibleAt( id, false ); } ); From f5ba40842ccb96529ca1c6ba88916c08dd781bad Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 25 Dec 2024 14:05:46 +0900 Subject: [PATCH 10/11] Small updates --- src/plugins/three/fade/TilesFadePlugin.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/plugins/three/fade/TilesFadePlugin.js b/src/plugins/three/fade/TilesFadePlugin.js index 0ace48794..05863bef7 100644 --- a/src/plugins/three/fade/TilesFadePlugin.js +++ b/src/plugins/three/fade/TilesFadePlugin.js @@ -66,10 +66,9 @@ function onUpdateAfter() { } - const isFadingOut = fadeManager.isFadingOut( t ); this.forEachBatchIds( t, ( id, batchedMesh, plugin ) => { - batchedMesh.setVisibleAt( id, isFadingOut && t.__inFrustum ); + batchedMesh.setVisibleAt( id, t.__inFrustum ); plugin.batchedMesh.setVisibleAt( id, t.__inFrustum ); } ); From 0530ce0676ef9918b44b43603f175929983be8e1 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Wed, 25 Dec 2024 14:11:54 +0900 Subject: [PATCH 11/11] Move batched tiles plugin --- example/googleMapsExample.js | 11 +++++------ src/plugins/README.md | 2 -- src/plugins/index.d.ts | 1 + src/plugins/index.js | 1 + .../three/batched/BatchedTilesPlugin.d.ts | 17 +++++++++++++++++ .../three}/batched/BatchedTilesPlugin.js | 0 .../three}/batched/ExpandingBatchedMesh.js | 0 .../three}/batched/ModelViewBatchedMesh.js | 0 .../plugins/three}/batched/utilities.js | 0 9 files changed, 24 insertions(+), 8 deletions(-) create mode 100644 src/plugins/three/batched/BatchedTilesPlugin.d.ts rename {example/src/plugins => src/plugins/three}/batched/BatchedTilesPlugin.js (100%) rename {example/src/plugins => src/plugins/three}/batched/ExpandingBatchedMesh.js (100%) rename {example/src/plugins => src/plugins/three}/batched/ModelViewBatchedMesh.js (100%) rename {example/src/plugins => src/plugins/three}/batched/utilities.js (100%) diff --git a/example/googleMapsExample.js b/example/googleMapsExample.js index 833f86042..7e66d55d7 100644 --- a/example/googleMapsExample.js +++ b/example/googleMapsExample.js @@ -13,6 +13,7 @@ import { TileCompressionPlugin, UnloadTilesPlugin, GLTFExtensionsPlugin, + BatchedTilesPlugin, } from '3d-tiles-renderer/plugins'; import { Scene, @@ -24,7 +25,6 @@ import { import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'; import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'; import Stats from 'three/examples/jsm/libs/stats.module.js'; -import { BatchedTilesPlugin } from './src/plugins/batched/BatchedTilesPlugin.js'; let controls, scene, renderer, tiles, transition; let statsContainer, stats; @@ -354,20 +354,19 @@ function updateHtml() { if ( batchPlugin ) { let tot = 0; - let totFade = 0; - batchPlugin.batchedMesh._instanceInfo.forEach( info => { + batchPlugin.batchedMesh?._instanceInfo.forEach( info => { if ( info.visible && info.active ) tot ++; } ); - fadePlugin.batchedMesh._instanceInfo.forEach( info => { + fadePlugin.batchedMesh?._instanceInfo.forEach( info => { - if ( info.visible && info.active ) totFade ++; + if ( info.visible && info.active ) tot ++; } ); - str += ', Batched: ' + tot + ', Fade Batched: ' + totFade; + str += ', Batched: ' + tot; } diff --git a/src/plugins/README.md b/src/plugins/README.md index 368334f05..b76dd1ecb 100644 --- a/src/plugins/README.md +++ b/src/plugins/README.md @@ -588,8 +588,6 @@ Available options are as follows: ## BatchedTilesPlugin -_available in the examples directory_ - Plugin that uses three.js' BatchedMesh to limit the number of draw calls required and improve performance. The BatchedMesh geometry and instance size are automatically resized and optimized as new geometry is added and removed. The max number of instances to generate is limited by the max size of a 3d texture. > [!WARNING] diff --git a/src/plugins/index.d.ts b/src/plugins/index.d.ts index fa4655004..4bffb1acb 100644 --- a/src/plugins/index.d.ts +++ b/src/plugins/index.d.ts @@ -7,6 +7,7 @@ export { GLTFExtensionsPlugin } from './three/GLTFExtensionsPlugin'; export { ReorientationPlugin } from './three/ReorientationPlugin'; export { UnloadTilesPlugin } from './three/UnloadTilesPlugin'; export { TilesFadePlugin } from './three/fade/TilesFadePlugin'; +export { BatchedTilesPlugin } from './three/batched/BatchedTilesPlugin'; export * from './three/DebugTilesPlugin'; // common plugins diff --git a/src/plugins/index.js b/src/plugins/index.js index 0093e67a9..653ed9840 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -7,6 +7,7 @@ export { GLTFExtensionsPlugin } from './three/GLTFExtensionsPlugin.js'; export { ReorientationPlugin } from './three/ReorientationPlugin.js'; export { UnloadTilesPlugin } from './three/UnloadTilesPlugin.js'; export { TilesFadePlugin } from './three/fade/TilesFadePlugin.js'; +export { BatchedTilesPlugin } from './three/batched/BatchedTilesPlugin.js'; export * from './three/DebugTilesPlugin.js'; // common plugins diff --git a/src/plugins/three/batched/BatchedTilesPlugin.d.ts b/src/plugins/three/batched/BatchedTilesPlugin.d.ts new file mode 100644 index 000000000..e41f170ac --- /dev/null +++ b/src/plugins/three/batched/BatchedTilesPlugin.d.ts @@ -0,0 +1,17 @@ +import { Material, WebGLRenderer } from 'three'; + +export class BatchedTilesPlugin { + + constructor( options : { + instanceCount: number, + vertexCount: number, + indexCount: number, + expandPercent: number, + maxInstanceCount: number, + discardOriginalContent: boolean, + + material: Material | null, + renderer: WebGLRenderer | null, + } ); + +} diff --git a/example/src/plugins/batched/BatchedTilesPlugin.js b/src/plugins/three/batched/BatchedTilesPlugin.js similarity index 100% rename from example/src/plugins/batched/BatchedTilesPlugin.js rename to src/plugins/three/batched/BatchedTilesPlugin.js diff --git a/example/src/plugins/batched/ExpandingBatchedMesh.js b/src/plugins/three/batched/ExpandingBatchedMesh.js similarity index 100% rename from example/src/plugins/batched/ExpandingBatchedMesh.js rename to src/plugins/three/batched/ExpandingBatchedMesh.js diff --git a/example/src/plugins/batched/ModelViewBatchedMesh.js b/src/plugins/three/batched/ModelViewBatchedMesh.js similarity index 100% rename from example/src/plugins/batched/ModelViewBatchedMesh.js rename to src/plugins/three/batched/ModelViewBatchedMesh.js diff --git a/example/src/plugins/batched/utilities.js b/src/plugins/three/batched/utilities.js similarity index 100% rename from example/src/plugins/batched/utilities.js rename to src/plugins/three/batched/utilities.js