[pull] dev from mrdoob:dev

.github/workflows/ci.yml

@@ -64,7 +64,7 @@ jobs:
       - name: === E2E testing ===
         run: npm run test-e2e
       - name: Upload output screenshots
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
         if: always()
         with:
           name: Output screenshots-${{ matrix.os }}-${{ matrix.CI }}

.github/workflows/read-size.yml

@@ -61,7 +61,7 @@ jobs:
           # write the output in a json file to upload it as artifact
           node -pe "JSON.stringify({ filesize: $WEBGL_FILESIZE, gzip: $WEBGL_FILESIZE_GZIP, treeshaken: $WEBGL_TREESHAKEN, treeshakenGzip: $WEBGL_TREESHAKEN_GZIP, filesize2: $WEBGPU_FILESIZE, gzip2: $WEBGPU_FILESIZE_GZIP, treeshaken2: $WEBGPU_TREESHAKEN, treeshakenGzip2: $WEBGPU_TREESHAKEN_GZIP, filesize3: $WEBGPU_NODES_FILESIZE, gzip3: $WEBGPU_NODES_FILESIZE_GZIP, treeshaken3: $WEBGPU_NODES_TREESHAKEN, treeshakenGzip3: $WEBGPU_NODES_TREESHAKEN_GZIP, pr: $PR })" > sizes.json
       - name: Upload artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
         with:
           name: sizes
           path: sizes.json

examples/jsm/inspector/Inspector.js

@@ -2,6 +2,7 @@
 import { RendererInspector } from './RendererInspector.js';
 import { Profiler } from './ui/Profiler.js';
 import { Performance } from './tabs/Performance.js';
+import { Memory } from './tabs/Memory.js';
 import { Console } from './tabs/Console.js';
 import { Parameters } from './tabs/Parameters.js';
 import { Settings } from './tabs/Settings.js';
@@ -58,6 +59,9 @@ class Inspector extends RendererInspector {
 		const performance = new Performance();
 		profiler.addTab( performance );
 
+		const memory = new Memory();
+		profiler.addTab( memory );
+
 		const timeline = new Timeline();
 		profiler.addTab( timeline );
 
@@ -79,6 +83,7 @@ class Inspector extends RendererInspector {
 		this.canvasNodes = new Map();
 		this.profiler = profiler;
 		this.performance = performance;
+		this.memory = memory;
 		this.console = consoleTab;
 		this.parameters = parameters;
 		this.viewer = viewer;
@@ -460,12 +465,14 @@ class Inspector extends RendererInspector {
 			setText( 'fps-counter', this.fps.toFixed() );
 
 			this.performance.updateText( this, frame );
+			this.memory.updateText( this );
 
 		}
 
 		if ( this.displayCycle.graph.needsUpdate ) {
 
 			this.performance.updateGraph( this, frame );
+			this.memory.updateGraph( this );
 
 		}
 

examples/jsm/inspector/tabs/Memory.js

@@ -0,0 +1,121 @@
+import { Tab } from '../ui/Tab.js';
+import { List } from '../ui/List.js';
+import { Graph } from '../ui/Graph.js';
+import { Item } from '../ui/Item.js';
+import { createValueSpan, setText, formatBytes } from '../ui/utils.js';
+
+class Memory extends Tab {
+
+	constructor( options = {} ) {
+
+		super( 'Memory', options );
+
+		const memoryList = new List( 'Name', 'Count', 'Size' );
+		memoryList.setGridStyle( 'minmax(200px, 2fr) 60px 100px' );
+		memoryList.domElement.style.minWidth = '300px';
+
+		const scrollWrapper = document.createElement( 'div' );
+		scrollWrapper.className = 'list-scroll-wrapper';
+		scrollWrapper.appendChild( memoryList.domElement );
+		this.content.appendChild( scrollWrapper );
+
+		// graph
+
+		const graphContainer = document.createElement( 'div' );
+		graphContainer.className = 'graph-container';
+
+		const graph = new Graph();
+		graph.addLine( 'total', 'var( --color-yellow )' );
+		graphContainer.append( graph.domElement );
+
+		// stats
+
+		const graphStats = new Item( 'Graph Stats', '', '' );
+		memoryList.add( graphStats );
+
+		const graphItem = new Item( graphContainer );
+		graphItem.itemRow.childNodes[ 0 ].style.gridColumn = '1 / -1';
+		graphStats.add( graphItem );
+
+		// info
+
+		this.memoryStats = new Item( 'Renderer Info', '', createValueSpan() );
+		this.memoryStats.domElement.firstChild.classList.add( 'no-hover' );
+		memoryList.add( this.memoryStats );
+
+		this.attributes = new Item( 'Attributes', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.attributes );
+
+		this.geometries = new Item( 'Geometries', createValueSpan(), 'N/A' );
+		this.memoryStats.add( this.geometries );
+
+		this.indexAttributes = new Item( 'Index Attributes', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.indexAttributes );
+
+		this.indirectStorageAttributes = new Item( 'Indirect Storage Attributes', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.indirectStorageAttributes );
+
+		this.programs = new Item( 'Programs', createValueSpan(), 'N/A' );
+		this.memoryStats.add( this.programs );
+
+		this.renderTargets = new Item( 'Render Targets', createValueSpan(), 'N/A' );
+		this.memoryStats.add( this.renderTargets );
+
+		this.storageAttributes = new Item( 'Storage Attributes', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.storageAttributes );
+
+		this.textures = new Item( 'Textures', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.textures );
+
+		this.graph = graph;
+
+	}
+
+	updateGraph( inspector ) {
+
+		const renderer = inspector.getRenderer();
+		if ( ! renderer ) return;
+
+		const memory = renderer.info.memory;
+
+		this.graph.addPoint( 'total', memory.total );
+
+		if ( this.graph.limit === 0 ) this.graph.limit = 1;
+
+		this.graph.update();
+
+	}
+
+	updateText( inspector ) {
+
+		const renderer = inspector.getRenderer();
+		if ( ! renderer ) return;
+
+		const memory = renderer.info.memory;
+
+		setText( this.memoryStats.data[ 2 ], formatBytes( memory.total ) );
+
+		setText( this.attributes.data[ 1 ], memory.attributes.toString() );
+		setText( this.attributes.data[ 2 ], formatBytes( memory.attributesSize ) );
+		setText( this.geometries.data[ 1 ], memory.geometries.toString() );
+
+		setText( this.indexAttributes.data[ 1 ], memory.indexAttributes.toString() );
+		setText( this.indexAttributes.data[ 2 ], formatBytes( memory.indexAttributesSize ) );
+
+		setText( this.indirectStorageAttributes.data[ 1 ], memory.indirectStorageAttributes.toString() );
+		setText( this.indirectStorageAttributes.data[ 2 ], formatBytes( memory.indirectStorageAttributesSize ) );
+
+		setText( this.programs.data[ 1 ], memory.programs.toString() );
+
+		setText( this.renderTargets.data[ 1 ], memory.renderTargets.toString() );
+
+		setText( this.storageAttributes.data[ 1 ], memory.storageAttributes.toString() );
+		setText( this.storageAttributes.data[ 2 ], formatBytes( memory.storageAttributesSize ) );
+		setText( this.textures.data[ 1 ], memory.textures.toString() );
+		setText( this.textures.data[ 2 ], formatBytes( memory.texturesSize ) );
+
+	}
+
+}
+
+export { Memory };

examples/jsm/inspector/ui/utils.js

@@ -54,3 +54,16 @@ export function splitCamelCase( str ) {
 	return str.replace( /([a-z0-9])([A-Z])/g, '$1 $2' ).trim();
 
 }
+
+export function formatBytes( bytes, decimals = 2 ) {
+
+	if ( bytes === 0 ) return '0 Bytes';
+
+	const k = 1024;
+	const dm = decimals < 0 ? 0 : decimals;
+	const sizes = [ 'Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB' ];
+	const i = Math.floor( Math.log( bytes ) / Math.log( k ) );
+
+	return parseFloat( ( bytes / Math.pow( k, i ) ).toFixed( dm ) ) + ' ' + sizes[ i ];
+
+}

examples/webgpu_loader_gltf.html

@@ -132,6 +132,27 @@
 
 				if ( currentModel ) {
 
+					currentModel.traverse( ( model ) => {
+
+						if ( model.isMesh ) {
+
+							model.geometry.dispose();
+							model.material.dispose();
+
+							for ( const value of Object.values( model.material ) ) {
+
+								if ( value && value.isTexture ) {
+
+									value.dispose();
+
+								}
+
+							}
+
+						}
+
+					} );
+
 					scene.remove( currentModel );
 					currentModel = null;
 

package.json

@@ -96,7 +96,7 @@
     "@rollup/plugin-terser": "^0.4.0",
     "eslint": "^9.0.0",
     "eslint-config-mdcs": "^5.0.0",
-    "eslint-plugin-compat": "^6.0.0",
+    "eslint-plugin-compat": "^7.0.0",
     "eslint-plugin-html": "^8.1.3",
     "eslint-plugin-jsdoc": "^62.0.0",
     "globals": "^17.0.0",

src/renderers/common/Attributes.js

@@ -15,8 +15,9 @@ class Attributes extends DataMap {
 	 * Constructs a new attribute management component.
 	 *
 	 * @param {Backend} backend - The renderer's backend.
+	 * @param {Info} info - Renderer component for managing metrics and monitoring data.
 	 */
-	constructor( backend ) {
+	constructor( backend, info ) {
 
 		super();
 
@@ -27,6 +28,13 @@ class Attributes extends DataMap {
 		 */
 		this.backend = backend;
 
+		/**
+		 * Renderer component for managing metrics and monitoring data.
+		 *
+		 * @type {Info}
+		 */
+		this.info = info;
+
 	}
 
 	/**
@@ -43,6 +51,8 @@ class Attributes extends DataMap {
 
 			this.backend.destroyAttribute( attribute );
 
+			this.info.destroyAttribute( attribute );
+
 		}
 
 		return attributeData;
@@ -65,18 +75,22 @@ class Attributes extends DataMap {
 			if ( type === AttributeType.VERTEX ) {
 
 				this.backend.createAttribute( attribute );
+				this.info.createAttribute( attribute );
 
 			} else if ( type === AttributeType.INDEX ) {
 
 				this.backend.createIndexAttribute( attribute );
+				this.info.createIndexAttribute( attribute );
 
 			} else if ( type === AttributeType.STORAGE ) {
 
 				this.backend.createStorageAttribute( attribute );
+				this.info.createStorageAttribute( attribute );
 
 			} else if ( type === AttributeType.INDIRECT ) {
 
 				this.backend.createIndirectStorageAttribute( attribute );
+				this.info.createIndirectStorageAttribute( attribute );
 
 			}