WebGPURenderer: Request all supported features. (#25875)

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -1,4 +1,4 @@
-import { GPUIndexFormat, GPUTextureFormat } from './constants.js';
+import { GPUIndexFormat, GPUTextureFormat, GPUFeatureName } from './constants.js';
 import WebGPUAnimation from './WebGPUAnimation.js';
 import WebGPURenderObjects from './WebGPURenderObjects.js';
 import WebGPUAttributes from './WebGPUAttributes.js';
@@ -167,7 +167,6 @@ class WebGPURenderer {
 
 		}
 
-		this._parameters.requiredFeatures = ( parameters.requiredFeatures === undefined ) ? [] : parameters.requiredFeatures;
 		this._parameters.requiredLimits = ( parameters.requiredLimits === undefined ) ? {} : parameters.requiredLimits;
 
 		// backwards compatibility
@@ -200,8 +199,36 @@ class WebGPURenderer {
 
 		}
 
+		// feature support
+
+		const features = [
+			GPUFeatureName.DepthClipControl,
+			GPUFeatureName.Depth32FloatStencil8,
+			GPUFeatureName.TextureCompressionBC,
+			GPUFeatureName.TextureCompressionETC2,
+			GPUFeatureName.TextureCompressionASTC,
+			GPUFeatureName.TimestampQuery,
+			GPUFeatureName.IndirectFirstInstance,
+			GPUFeatureName.ShaderF16,
+			GPUFeatureName.RG11B10UFloat,
+			GPUFeatureName.BGRA8UNormStorage,
+			GPUFeatureName.Float32Filterable
+		];
+
+		const supportedFeatures = [];
+
+		for ( const name of features ) {
+
+			if ( adapter.features.has( name ) ) {
+
+				supportedFeatures.push( name );
+
+			}
+
+		}
+
 		const deviceDescriptor = {
-			requiredFeatures: parameters.requiredFeatures,
+			requiredFeatures: supportedFeatures,
 			requiredLimits: parameters.requiredLimits
 		};
 
@@ -254,7 +281,7 @@ class WebGPURenderer {
 
 		const nodeFrame = this._nodes.nodeFrame;
 
-		let previousRenderId = nodeFrame.renderId;
+		const previousRenderId = nodeFrame.renderId;
 		nodeFrame.renderId ++;
 
 		if ( this._animation.isAnimating === false ) nodeFrame.update();

examples/jsm/renderers/webgpu/constants.js

@@ -299,6 +299,20 @@ export const GPUInputStepMode = {
 	Instance: 'instance'
 };
 
+export const GPUFeatureName = {
+	DepthClipControl: 'depth-clip-control',
+	Depth32FloatStencil8: 'depth32float-stencil8',
+	TextureCompressionBC: 'texture-compression-bc',
+	TextureCompressionETC2: 'texture-compression-etc2',
+	TextureCompressionASTC: 'texture-compression-astc',
+	TimestampQuery: 'timestamp-query',
+	IndirectFirstInstance: 'indirect-first-instance',
+	ShaderF16: 'shader-f16',
+	RG11B10UFloat: 'rg11b10ufloat-renderable',
+	BGRA8UNormStorage: 'bgra8unorm-storage',
+	Float32Filterable: 'float32-filterable'
+};
+
 export const GPUChunkSize = 16; // size of a chunk in bytes (STD140 layout)
 
 // @TODO: Move to src/constants.js

examples/webgpu_sandbox.html

@@ -57,7 +57,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { requiredFeatures: [ 'texture-compression-bc', 'texture-compression-astc' ] } );
+				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_sprites.html

@@ -107,7 +107,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { requiredFeatures: [ 'texture-compression-bc' ] } );
+				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );