WebGPURenderer: Added more constants.

examples/jsm/renderers/webgpu/WebGPURenderPipelines.js

@@ -1,4 +1,4 @@
-import { GPUPrimitiveTopology, GPUIndexFormat } from './constants.js';
+import { GPUPrimitiveTopology, GPUIndexFormat, GPUTextureFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat } from './constants.js';
 import { FrontSide, BackSide, DoubleSide } from '../../../../build/three.module.js';
 
 class WebGPURenderPipelines {
@@ -56,11 +56,11 @@ class WebGPURenderPipelines {
 
 			if ( moduleVertex === undefined ) {
 
-				const byteCodeVertex = glslang.compileGLSL( shader.vertexShader, "vertex" );
+				const byteCodeVertex = glslang.compileGLSL( shader.vertexShader, 'vertex' );
 
 				moduleVertex = {
 					module: device.createShaderModule( { code: byteCodeVertex } ),
-					entryPoint: "main"
+					entryPoint: 'main'
 				};
 
 				this.shaderModules.vertex.set( shader, moduleVertex );
@@ -71,11 +71,11 @@ class WebGPURenderPipelines {
 
 			if ( moduleFragment === undefined ) {
 
-				const byteCodeFragment = glslang.compileGLSL( shader.fragmentShader, "fragment" );
+				const byteCodeFragment = glslang.compileGLSL( shader.fragmentShader, 'fragment' );
 
 				moduleFragment = {
 					module: device.createShaderModule( { code: byteCodeFragment } ),
-					entryPoint: "main"
+					entryPoint: 'main'
 				};
 
 				this.shaderModules.fragment.set( shader, moduleFragment );
@@ -133,11 +133,11 @@ class WebGPURenderPipelines {
 				fragmentStage: moduleFragment,
 				primitiveTopology: primitiveTopology,
 				rasterizationState: rasterizationState,
-				colorStates: [ { format: 'bgra8unorm' } ],
+				colorStates: [ { format: GPUTextureFormat.BRGA8Unorm } ],
 				depthStencilState: {
 					depthWriteEnabled: material.depthWrite,
-					depthCompare: "less",
-					format: 'depth24plus-stencil8',
+					depthCompare: GPUCompareFunction.Less,
+					format: GPUTextureFormat.Depth24PlusStencil8,
 				},
 				vertexState: {
 					indexFormat: indexFormat,
@@ -192,18 +192,18 @@ class WebGPURenderPipelines {
 		switch ( material.side ) {
 
 			case FrontSide:
-				descriptor.frontFace = 'ccw';
-				descriptor.cullMode = 'back';
+				descriptor.frontFace = GPUFrontFace.CCW;
+				descriptor.cullMode = GPUCullMode.Back;
 				break;
 
 			case BackSide:
-				descriptor.frontFace = 'cw';
-				descriptor.cullMode = 'back';
+				descriptor.frontFace = GPUFrontFace.CW;
+				descriptor.cullMode = GPUCullMode.Back;
 				break;
 
 			case DoubleSide:
-				descriptor.frontFace = 'ccw';
-				descriptor.cullMode = 'none';
+				descriptor.frontFace = GPUFrontFace.CCW;
+				descriptor.cullMode = GPUCullMode.None;
 				break;
 
 			default:
@@ -222,24 +222,24 @@ class WebGPURenderPipelines {
 
 		if ( array instanceof Float32Array ) {
 
-			if ( attribute.itemSize === 1 ) return 'float';
-			if ( attribute.itemSize === 2 ) return 'float2';
-			if ( attribute.itemSize === 3 ) return 'float3';
-			if ( attribute.itemSize === 4 ) return 'float4';
+			if ( attribute.itemSize === 1 ) return GPUVertexFormat.Float;
+			if ( attribute.itemSize === 2 ) return GPUVertexFormat.Float2;
+			if ( attribute.itemSize === 3 ) return GPUVertexFormat.Float3;
+			if ( attribute.itemSize === 4 ) return GPUVertexFormat.Float4;
 
 		} else if ( array instanceof Uint32Array ) {
 
-			if ( attribute.itemSize === 1 ) return 'uint';
-			if ( attribute.itemSize === 2 ) return 'uint2';
-			if ( attribute.itemSize === 3 ) return 'uint3';
-			if ( attribute.itemSize === 4 ) return 'uint4';
+			if ( attribute.itemSize === 1 ) return GPUVertexFormat.Uint;
+			if ( attribute.itemSize === 2 ) return GPUVertexFormat.Uint2;
+			if ( attribute.itemSize === 3 ) return GPUVertexFormat.Uint3;
+			if ( attribute.itemSize === 4 ) return GPUVertexFormat.Uint4;
 
 		} else if ( array instanceof Int32Array ) {
 
-			if ( attribute.itemSize === 1 ) return 'int';
-			if ( attribute.itemSize === 2 ) return 'int2';
-			if ( attribute.itemSize === 3 ) return 'int3';
-			if ( attribute.itemSize === 4 ) return 'int4';
+			if ( attribute.itemSize === 1 ) return GPUVertexFormat.Int;
+			if ( attribute.itemSize === 2 ) return GPUVertexFormat.Int2;
+			if ( attribute.itemSize === 3 ) return GPUVertexFormat.Int3;
+			if ( attribute.itemSize === 4 ) return GPUVertexFormat.Int4;
 
 		}
 

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -1,4 +1,4 @@
-import { GPUIndexFormat } from './constants.js';
+import { GPUIndexFormat, GPUTextureFormat, GPUStoreOp, GPULoadOp } from './constants.js';
 import WebGPUObjects from './WebGPUObjects.js';
 import WebGPUAttributes from './WebGPUAttributes.js';
 import WebGPUGeometries from './WebGPUGeometries.js';
@@ -91,7 +91,7 @@ class WebGPURenderer {
 
 		const colorAttachment = this._renderPassDescriptor.colorAttachments[ 0 ];
 		colorAttachment.attachment = this._swapChain.getCurrentTexture().createView();
-		colorAttachment.loadValue = 'load';
+		colorAttachment.loadValue = GPULoadOp.Load;
 
 		const depthStencilAttachment = this._renderPassDescriptor.depthStencilAttachment;
 		depthStencilAttachment.attachment = this._depthBuffer.createView();
@@ -527,7 +527,7 @@ class WebGPURenderer {
 					height: this._height * this._pixelRatio,
 					depth: 1
 				},
-				format: 'depth24plus-stencil8',
+				format: GPUTextureFormat.Depth24PlusStencil8,
 				usage: GPUTextureUsage.OUTPUT_ATTACHMENT
 			} );
 
@@ -561,7 +561,7 @@ async function initWebGPU( scope ) {
 
 	const swapChain = context.configureSwapChain( {
 		device: device,
-		format: 'bgra8unorm'
+		format: GPUTextureFormat.BRGA8Unorm
 	} );
 
 	scope._adapter = adapter;
@@ -588,9 +588,9 @@ async function initWebGPU( scope ) {
 		 depthStencilAttachment: {
 			attachment: null,
 			depthLoadValue: 1,
-			depthStoreOp: 'store',
+			depthStoreOp: GPUStoreOp.Store,
 			stencilLoadValue: 0,
-			stencilStoreOp: 'store'
+			stencilStoreOp: GPUStoreOp.Store
 		}
 	};
 

examples/jsm/renderers/webgpu/constants.js

@@ -6,7 +6,161 @@ export const GPUPrimitiveTopology = {
 	TriangleStrip: 'triangle-strip',
 };
 
+export const GPUCompareFunction = {
+	Never: 'never',
+	Less: 'less',
+	Equal: 'equal',
+	LessEqual: 'less-equal',
+	Greater: 'greater',
+	NotEqual: 'not-equal',
+	GreaterEqual: 'greater-equal',
+	Always: 'always'
+};
+
+export const GPUStoreOp = {
+	Store: 'store',
+	Clear: 'clear'
+};
+
+export const GPULoadOp = {
+	Load: 'load'
+};
+
+export const GPUFrontFace = {
+	CCW: 'ccw',
+	CW: 'cw'
+};
+
+export const GPUCullMode = {
+	None: 'none',
+	Front: 'front',
+	Back: 'back'
+};
+
 export const GPUIndexFormat = {
 	Uint16: 'uint16',
 	Uint32: 'uint32'
 };
+
+export const GPUVertexFormat = {
+	Uchar2: 'uchar2',
+	Uchar4: 'uchar4',
+	Char2: 'char2',
+	Char4: 'char4',
+	Uchar2Norm: "uchar2norm",
+	Uchar4Norm: "uchar4norm",
+	Char2Norm: "char2norm",
+	Char4Norm: "char4norm",
+	Ushort2: 'ushort2',
+	Ushort4: 'ushort4',
+	Short2: 'short2',
+	Short4: 'short4',
+	Ushort2Norm: "ushort2norm",
+	Ushort4Norm: "ushort4norm",
+	Short2Norm: "short2norm",
+	Short4Norm: "short4norm",
+	Half2: 'half2',
+	Half4: 'half4',
+	Float: 'float',
+	Float2: 'float2',
+	Float3: 'float3',
+	Float4: 'float4',
+	Uint: 'uint',
+	Uint2: 'uint2',
+	Uint3: 'uint3',
+	Uint4: 'uint4',
+	Int: 'int',
+	Int2: 'int2',
+	Int3: 'int3',
+	Int4: 'int4',
+};
+
+export const GPUTextureFormat = {
+
+	// 8-bit formats
+
+	R8Unorm: 'r8unorm',
+	R8Snorm: 'r8snorm',
+	R8Uint: 'r8uint',
+	R8Sint: 'r8sint',
+
+	// 16-bit formats
+
+	R16Uint: 'r16uint',
+	R16Sint: 'r16sint',
+	R16Float: 'r16float',
+	RG8Unorm: 'rg8unorm',
+	RG8Snorm: 'rg8snorm',
+	RG8Uint: 'rg8uint',
+	RG8Sint: 'rg8sint',
+
+	// 32-bit formats
+
+	R32Uint: 'r32uint',
+	R32Sint: 'r32sint',
+	R32Float: 'r32float',
+	RG16Uint: 'rg16uint',
+	RG16Sint: 'rg16sint',
+	RG16Float: 'rg16float',
+	RGBA8Unorm: 'rgba8unorm',
+	RGBA8UnormSRGB: 'rgba8unorm-srgb',
+	RGBA8Snorm: 'rgba8snorm',
+	RGBA8Uint: 'rgba8uint',
+	RGBA8Sint: 'rgba8sint',
+	BRGA8Unorm: 'bgra8unorm',
+	BRGA8UnormSRGB: 'bgra8unorm-srgb',
+	// Packed 32-bit formats
+	RGB9E5UFloat: 'rgb9e5ufloat',
+	RGB10A2Unorm: 'rgb10a2unorm',
+	RG11B10uFloat: 'rgb10a2unorm',
+
+	// 64-bit formats
+
+	RG32Uint: 'rg32uint',
+	RG32Sint: 'rg32sint',
+	RG32Float: 'rg32float',
+	RGBA16Uint: 'rgba16uint',
+	RGBA16Sint: 'rgba16sint',
+	RGBA16Float: 'rgba16float',
+
+	// 128-bit formats
+
+	RGBA32Uint: 'rgba32uint',
+	RGBA32Sint: 'rgba32sint',
+	RGBA32Float: 'rgba32float',
+
+	// Depth and stencil formats
+
+	Stencil8: 'stencil8',
+	Depth16Unorm: 'depth16unorm',
+	Depth24Plus: 'depth24plus',
+	Depth24PlusStencil8: 'depth24plus-stencil8',
+	Depth32Float: 'depth32float',
+
+	// BC compressed formats usable if 'texture-compression-bc' is both
+	// supported by the device/user agent and enabled in requestDevice.
+
+	BC1RGBAUnorm: 'bc1-rgba-unorm',
+	BC1RGBAUnormSRGB: 'bc1-rgba-unorm-srgb',
+	BC2RGBAUnorm: 'bc2-rgba-unorm',
+	BC2RGBAUnormSRGB: 'bc2-rgba-unorm-srgb',
+	BC3RGBAUnorm: 'bc3-rgba-unorm',
+	BC3RGBAUnormSRGB: 'bc3-rgba-unorm-srgb',
+	BC4RUnorm: 'bc4-r-unorm',
+	BC4RSNorm: 'bc4-r-snorm',
+	BC5RGUnorm: 'bc5-rg-unorm',
+	BC5RGSnorm: 'bc5-rg-snorm',
+	BC6HRGBUfloat: 'bc6h-rgb-ufloat',
+	BC6HRGBFloat: 'bc6h-rgb-float',
+	BC7RGBAUnorm: 'bc7-rgba-unorm',
+	BC7RGBAUnormSRGB: 'bc7-rgba-srgb',
+
+	// 'depth24unorm-stencil8' extension
+
+	Depth24UnormStencil8: 'depth24unorm-stencil8',
+
+	// 'depth32float-stencil8' extension
+
+	Depth32FloatStencil8: 'depth32float-stencil8',
+
+};