StorageTexture: Adds support for other formats. (mrdoob#26842)

* TimeNode: Define `frameId` as integer

* Renderer: Set `info` as public

* StorageTexture: Adds support for other formats.

* Update example to `temporal blur`

* fix device in getFormat()

Author: sunag

examples/jsm/nodes/utils/TimerNode.js

@@ -89,6 +89,6 @@ export default TimerNode;
 export const timerLocal = ( timeScale, value = 0 ) => nodeObject( new TimerNode( TimerNode.LOCAL, timeScale, value ) );
 export const timerGlobal = ( timeScale, value = 0 ) => nodeObject( new TimerNode( TimerNode.GLOBAL, timeScale, value ) );
 export const timerDelta = ( timeScale, value = 0 ) => nodeObject( new TimerNode( TimerNode.DELTA, timeScale, value ) );
-export const frameId = nodeImmutable( TimerNode, TimerNode.FRAME );
+export const frameId = nodeImmutable( TimerNode, TimerNode.FRAME ).uint();
 
 addNodeClass( TimerNode );

examples/jsm/renderers/common/Renderer.js

@@ -46,6 +46,8 @@ class Renderer {
 		this.depth = true;
 		this.stencil = true;
 
+		this.info = new Info();
+
 		// internals
 
 		this._pixelRatio = 1;
@@ -56,7 +58,6 @@ class Renderer {
 		this._scissor = new Vector4( 0, 0, this._width, this._height );
 		this._scissorTest = false;
 
-		this._info = null;
 		this._properties = null;
 		this._attributes = null;
 		this._geometries = null;
@@ -131,15 +132,14 @@ class Renderer {
 
 			}
 
-			this._info = new Info();
 			this._nodes = new Nodes( this, backend );
 			this._attributes = new Attributes( backend );
 			this._background = new Background( this, this._nodes );
-			this._geometries = new Geometries( this._attributes, this._info );
-			this._textures = new Textures( backend, this._info );
+			this._geometries = new Geometries( this._attributes, this.info );
+			this._textures = new Textures( backend, this.info );
 			this._pipelines = new Pipelines( backend, this._nodes );
-			this._bindings = new Bindings( backend, this._nodes, this._textures, this._attributes, this._pipelines, this._info );
-			this._objects = new RenderObjects( this, this._nodes, this._geometries, this._pipelines, this._bindings, this._info );
+			this._bindings = new Bindings( backend, this._nodes, this._textures, this._attributes, this._pipelines, this.info );
+			this._objects = new RenderObjects( this, this._nodes, this._geometries, this._pipelines, this._bindings, this.info );
 			this._renderLists = new RenderLists();
 			this._renderContexts = new RenderContexts();
 
@@ -214,9 +214,9 @@ class Renderer {
 
 		if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 
-		if ( this._info.autoReset === true ) this._info.reset();
+		if ( this.info.autoReset === true ) this.info.reset();
 
-		this._info.render.frame ++;
+		this.info.render.frame ++;
 
 		//
 
@@ -612,12 +612,13 @@ class Renderer {
 
 	dispose() {
 
+		this.info.dispose();
+
 		this._objects.dispose();
 		this._properties.dispose();
 		this._pipelines.dispose();
 		this._nodes.dispose();
 		this._bindings.dispose();
-		this._info.dispose();
 		this._renderLists.dispose();
 		this._renderContexts.dispose();
 		this._textures.dispose();
@@ -921,7 +922,7 @@ class Renderer {
 
 		//
 
-		this.backend.draw( renderObject, this._info );
+		this.backend.draw( renderObject, this.info );
 
 	}
 

examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -11,6 +11,8 @@ import { getVectorLength, getStrideLength } from '../../common/BufferUtils.js';
 
 import { NodeBuilder, CodeNode, NodeMaterial } from '../../../nodes/Nodes.js';
 
+import { getFormat } from '../utils/WebGPUTextureUtils.js';
+
 import WGSLNodeParser from './WGSLNodeParser.js';
 
 const gpuShaderStageLib = {
@@ -659,8 +661,9 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 				} else if ( uniform.node.isStoreTextureNode === true ) {
 
-					// @TODO: Add support for other formats
-					textureType = 'texture_storage_2d<rgba8unorm, write>';
+					const format = getFormat( texture );
+
+					textureType = 'texture_storage_2d<' + format + ', write>';
 
 				} else {