Add dispose function, add dispose support for offscreen shadows

example/customMaterial.js

@@ -18,7 +18,7 @@ import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 
 let camera, controls, scene, renderer, tiles, orthoCamera;
-let offsetParent, box, dirLight;
+let offsetParent, box, dirLight, statsContainer;
 let stats;
 
 const DEFAULT = 0;
@@ -29,6 +29,7 @@ const params = {
 
 	'material': DEFAULT,
 	'orthographic': false,
+	'rebuild': initTiles,
 
 };
 
@@ -179,6 +180,38 @@ function onLoadModel( scene ) {
 
 }
 
+function onDisposeModel( scene ) {
+
+	scene.traverse( c => {
+
+		if ( c.isMesh ) {
+
+			c.material.dispose();
+
+		}
+
+	} );
+
+}
+
+function initTiles() {
+
+	if ( tiles ) {
+
+		tiles.group.parent.remove( tiles.group );
+		tiles.dispose();
+
+	}
+
+	const url = window.location.hash.replace( /^#/, '' ) || '../data/tileset.json';
+	tiles = new TilesRenderer( url );
+	tiles.errorTarget = 2;
+	tiles.onLoadModel = onLoadModel;
+	tiles.onDisposeModel = onDisposeModel;
+	offsetParent.add( tiles.group );
+
+}
+
 function init() {
 
 	scene = new Scene();
@@ -229,13 +262,7 @@ function init() {
 	offsetParent = new Group();
 	scene.add( offsetParent );
 
-	// tiles
-	const url = window.location.hash.replace( /^#/, '' ) || '../data/tileset.json';
-	tiles = new TilesRenderer( url );
-	tiles.errorTarget = 2;
-	tiles.onLoadModel = onLoadModel;
-	offsetParent.add( tiles.group );
-
+	initTiles();
 
 	onWindowResize();
 	window.addEventListener( 'resize', onWindowResize, false );
@@ -250,6 +277,7 @@ function init() {
 			tiles.forEachLoadedModel( updateMaterial )
 
 		} );
+	gui.add( params, 'rebuild' );
 	gui.open();
 
 	// Stats
@@ -257,6 +285,18 @@ function init() {
 	stats.showPanel( 0 );
 	document.body.appendChild( stats.dom );
 
+	statsContainer = document.createElement( 'div' );
+	statsContainer.style.position = 'absolute';
+	statsContainer.style.top = 0;
+	statsContainer.style.left = 0;
+	statsContainer.style.color = 'white';
+	statsContainer.style.width = '100%';
+	statsContainer.style.textAlign = 'center';
+	statsContainer.style.padding = '5px';
+	statsContainer.style.pointerEvents = 'none';
+	statsContainer.style.lineHeight = '1.5em';
+	document.body.appendChild( statsContainer );
+
 }
 
 function onWindowResize() {
@@ -336,6 +376,11 @@ function render() {
 
 	updateOrthoCamera();
 
+	statsContainer.innerText =
+		`Geometries: ${ renderer.info.memory.geometries } ` +
+		`Textures: ${ renderer.info.memory.textures } ` +
+		`Programs: ${ renderer.info.programs.length } `;
+
 	renderer.render( scene, params.orthographic ? orthoCamera : camera );
 
 }

example/offscreenShadows.js

@@ -50,6 +50,20 @@ function onLoadModel( scene ) {
 
 }
 
+function onDisposeModel( scene ) {
+
+	scene.traverse( c => {
+
+		if ( c.isMesh ) {
+
+			c.material.dispose();
+
+		}
+
+	} );
+
+}
+
 function init() {
 
 	scene = new Scene();
@@ -104,6 +118,7 @@ function init() {
 	const url = window.location.hash.replace( /^#/, '' ) || '../data/tileset.json';
 	tiles = new TilesRenderer( url );
 	tiles.onLoadModel = onLoadModel;
+	tiles.onDisposeModel = onDisposeModel;
 	offsetParent.add( tiles.group );
 
 

src/base/TilesRendererBase.js

@@ -464,4 +464,15 @@ export class TilesRendererBase {
 
 	}
 
+	dispose() {
+
+		const lruCache = this.lruCache;
+		this.traverse( tile => {
+
+			lruCache.remove( tile );
+
+		} );
+
+	}
+
 }