| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737 | import { GPUPrimitiveTopology, GPUIndexFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat, GPUBlendFactor, GPUBlendOperation, BlendColorFactor, OneMinusBlendColorFactor, GPUColorWriteFlags, GPUStencilOperation, GPUInputStepMode } from './constants.js';import {	FrontSide, BackSide, DoubleSide,	NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth,	NeverStencilFunc, AlwaysStencilFunc, LessStencilFunc, LessEqualStencilFunc, EqualStencilFunc, GreaterEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc,	KeepStencilOp, ZeroStencilOp, ReplaceStencilOp, InvertStencilOp, IncrementStencilOp, DecrementStencilOp, IncrementWrapStencilOp, DecrementWrapStencilOp,	NoBlending, NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, CustomBlending,	AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation,	ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, SrcAlphaSaturateFactor} from 'three';class WebGPURenderPipeline {	constructor( device, renderer, sampleCount ) {		this.cacheKey = null;		this.shaderAttributes = null;		this.stageVertex = null;		this.stageFragment = null;		this.usedTimes = 0;		this._device = device;		this._renderer = renderer;		this._sampleCount = sampleCount;	}	init( cacheKey, stageVertex, stageFragment, object, nodeBuilder ) {		const material = object.material;		const geometry = object.geometry;		// determine shader attributes		const shaderAttributes = this._getShaderAttributes( nodeBuilder, geometry );		// vertex buffers		const vertexBuffers = [];		for ( const attribute of shaderAttributes ) {			const name = attribute.name;			const geometryAttribute = geometry.getAttribute( name );			const stepMode = ( geometryAttribute !== undefined && geometryAttribute.isInstancedBufferAttribute ) ? GPUInputStepMode.Instance : GPUInputStepMode.Vertex;			vertexBuffers.push( {				arrayStride: attribute.arrayStride,				attributes: [ { shaderLocation: attribute.slot, offset: 0, format: attribute.format } ],				stepMode: stepMode			} );		}		this.cacheKey = cacheKey;		this.shaderAttributes = shaderAttributes;		this.stageVertex = stageVertex;		this.stageFragment = stageFragment;		// blending		let alphaBlend = {};		let colorBlend = {};		if ( material.transparent === true && material.blending !== NoBlending ) {			alphaBlend = this._getAlphaBlend( material );			colorBlend = this._getColorBlend( material );		}		// stencil		let stencilFront = {};		if ( material.stencilWrite === true ) {			stencilFront = {				compare: this._getStencilCompare( material ),				failOp: this._getStencilOperation( material.stencilFail ),				depthFailOp: this._getStencilOperation( material.stencilZFail ),				passOp: this._getStencilOperation( material.stencilZPass )			};		}		//		const primitiveState = this._getPrimitiveState( object, material );		const colorWriteMask = this._getColorWriteMask( material );		const depthCompare = this._getDepthCompare( material );		const colorFormat = this._renderer.getCurrentColorFormat();		const depthStencilFormat = this._renderer.getCurrentDepthStencilFormat();		this.pipeline = this._device.createRenderPipeline( {			vertex: Object.assign( {}, stageVertex.stage, { buffers: vertexBuffers } ),			fragment: Object.assign( {}, stageFragment.stage, { targets: [ {				format: colorFormat,				blend: {					alpha: alphaBlend,					color: colorBlend				},				writeMask: colorWriteMask			} ] } ),			primitive: primitiveState,			depthStencil: {				format: depthStencilFormat,				depthWriteEnabled: material.depthWrite,				depthCompare: depthCompare,				stencilFront: stencilFront,				stencilBack: {}, // three.js does not provide an API to configure the back function (gl.stencilFuncSeparate() was never used)				stencilReadMask: material.stencilFuncMask,				stencilWriteMask: material.stencilWriteMask			},			multisample: {				count: this._sampleCount			}		} );	}	_getArrayStride( type, bytesPerElement ) {		// @TODO: This code is GLSL specific. We need to update when we switch to WGSL.		if ( type === 'float' || type === 'int' || type === 'uint' ) return bytesPerElement;		if ( type === 'vec2' || type === 'ivec2' || type === 'uvec2' ) return bytesPerElement * 2;		if ( type === 'vec3' || type === 'ivec3' || type === 'uvec3' ) return bytesPerElement * 3;		if ( type === 'vec4' || type === 'ivec4' || type === 'uvec4' ) return bytesPerElement * 4;		console.error( 'THREE.WebGPURenderer: Shader variable type not supported yet.', type );	}	_getAlphaBlend( material ) {		const blending = material.blending;		const premultipliedAlpha = material.premultipliedAlpha;		let alphaBlend = undefined;		switch ( blending ) {			case NormalBlending:				if ( premultipliedAlpha === false ) {					alphaBlend = {						srcFactor: GPUBlendFactor.One,						dstFactor: GPUBlendFactor.OneMinusSrcAlpha,						operation: GPUBlendOperation.Add					};				}				break;			case AdditiveBlending:				// no alphaBlend settings				break;			case SubtractiveBlending:				if ( premultipliedAlpha === true ) {					alphaBlend = {						srcFactor: GPUBlendFactor.OneMinusSrcColor,						dstFactor: GPUBlendFactor.OneMinusSrcAlpha,						operation: GPUBlendOperation.Add					};				}				break;			case MultiplyBlending:				if ( premultipliedAlpha === true ) {					alphaBlend = {						srcFactor: GPUBlendFactor.Zero,						dstFactor: GPUBlendFactor.SrcAlpha,						operation: GPUBlendOperation.Add					};				}				break;			case CustomBlending:				const blendSrcAlpha = material.blendSrcAlpha;				const blendDstAlpha = material.blendDstAlpha;				const blendEquationAlpha = material.blendEquationAlpha;				if ( blendSrcAlpha !== null && blendDstAlpha !== null && blendEquationAlpha !== null ) {					alphaBlend = {						srcFactor: this._getBlendFactor( blendSrcAlpha ),						dstFactor: this._getBlendFactor( blendDstAlpha ),						operation: this._getBlendOperation( blendEquationAlpha )					};				}				break;			default:				console.error( 'THREE.WebGPURenderer: Blending not supported.', blending );		}		return alphaBlend;	}	_getBlendFactor( blend ) {		let blendFactor;		switch ( blend ) {			case ZeroFactor:				blendFactor = GPUBlendFactor.Zero;				break;			case OneFactor:				blendFactor = GPUBlendFactor.One;				break;			case SrcColorFactor:				blendFactor = GPUBlendFactor.SrcColor;				break;			case OneMinusSrcColorFactor:				blendFactor = GPUBlendFactor.OneMinusSrcColor;				break;			case SrcAlphaFactor:				blendFactor = GPUBlendFactor.SrcAlpha;				break;			case OneMinusSrcAlphaFactor:				blendFactor = GPUBlendFactor.OneMinusSrcAlpha;				break;			case DstColorFactor:				blendFactor = GPUBlendFactor.DstColor;				break;			case OneMinusDstColorFactor:				blendFactor = GPUBlendFactor.OneMinusDstColor;				break;			case DstAlphaFactor:				blendFactor = GPUBlendFactor.DstAlpha;				break;			case OneMinusDstAlphaFactor:				blendFactor = GPUBlendFactor.OneMinusDstAlpha;				break;			case SrcAlphaSaturateFactor:				blendFactor = GPUBlendFactor.SrcAlphaSaturated;				break;			case BlendColorFactor:				blendFactor = GPUBlendFactor.BlendColor;				break;			case OneMinusBlendColorFactor:				blendFactor = GPUBlendFactor.OneMinusBlendColor;				break;			default:				console.error( 'THREE.WebGPURenderer: Blend factor not supported.', blend );		}		return blendFactor;	}	_getBlendOperation( blendEquation ) {		let blendOperation;		switch ( blendEquation ) {			case AddEquation:				blendOperation = GPUBlendOperation.Add;				break;			case SubtractEquation:				blendOperation = GPUBlendOperation.Subtract;				break;			case ReverseSubtractEquation:				blendOperation = GPUBlendOperation.ReverseSubtract;				break;			case MinEquation:				blendOperation = GPUBlendOperation.Min;				break;			case MaxEquation:				blendOperation = GPUBlendOperation.Max;				break;			default:				console.error( 'THREE.WebGPURenderer: Blend equation not supported.', blendEquation );		}		return blendOperation;	}	_getColorBlend( material ) {		const blending = material.blending;		const premultipliedAlpha = material.premultipliedAlpha;		const colorBlend = {			srcFactor: null,			dstFactor: null,			operation: null		};		switch ( blending ) {			case NormalBlending:				colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;				colorBlend.dstFactor = GPUBlendFactor.OneMinusSrcAlpha;				colorBlend.operation = GPUBlendOperation.Add;				break;			case AdditiveBlending:				colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;				colorBlend.operation = GPUBlendOperation.Add;				break;			case SubtractiveBlending:				colorBlend.srcFactor = GPUBlendFactor.Zero;				colorBlend.dstFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.Zero : GPUBlendFactor.OneMinusSrcColor;				colorBlend.operation = GPUBlendOperation.Add;				break;			case MultiplyBlending:				colorBlend.srcFactor = GPUBlendFactor.Zero;				colorBlend.dstFactor = GPUBlendFactor.SrcColor;				colorBlend.operation = GPUBlendOperation.Add;				break;			case CustomBlending:				colorBlend.srcFactor = this._getBlendFactor( material.blendSrc );				colorBlend.dstFactor = this._getBlendFactor( material.blendDst );				colorBlend.operation = this._getBlendOperation( material.blendEquation );				break;			default:				console.error( 'THREE.WebGPURenderer: Blending not supported.', blending );		}		return colorBlend;	}	_getColorWriteMask( material ) {		return ( material.colorWrite === true ) ? GPUColorWriteFlags.All : GPUColorWriteFlags.None;	}	_getDepthCompare( material ) {		let depthCompare;		if ( material.depthTest === false ) {			depthCompare = GPUCompareFunction.Always;		} else {			const depthFunc = material.depthFunc;			switch ( depthFunc ) {				case NeverDepth:					depthCompare = GPUCompareFunction.Never;					break;				case AlwaysDepth:					depthCompare = GPUCompareFunction.Always;					break;				case LessDepth:					depthCompare = GPUCompareFunction.Less;					break;				case LessEqualDepth:					depthCompare = GPUCompareFunction.LessEqual;					break;				case EqualDepth:					depthCompare = GPUCompareFunction.Equal;					break;				case GreaterEqualDepth:					depthCompare = GPUCompareFunction.GreaterEqual;					break;				case GreaterDepth:					depthCompare = GPUCompareFunction.Greater;					break;				case NotEqualDepth:					depthCompare = GPUCompareFunction.NotEqual;					break;				default:					console.error( 'THREE.WebGPURenderer: Invalid depth function.', depthFunc );			}		}		return depthCompare;	}	_getPrimitiveState( object, material ) {		const descriptor = {};		descriptor.topology = this._getPrimitiveTopology( object );		if ( object.isLine === true && object.isLineSegments !== true ) {			const geometry = object.geometry;			const count = ( geometry.index ) ? geometry.index.count : geometry.attributes.position.count;			descriptor.stripIndexFormat = ( count > 65535 ) ? GPUIndexFormat.Uint32 : GPUIndexFormat.Uint16; // define data type for primitive restart value		}		switch ( material.side ) {			case FrontSide:				descriptor.frontFace = GPUFrontFace.CCW;				descriptor.cullMode = GPUCullMode.Back;				break;			case BackSide:				descriptor.frontFace = GPUFrontFace.CW;				descriptor.cullMode = GPUCullMode.Back;				break;			case DoubleSide:				descriptor.frontFace = GPUFrontFace.CCW;				descriptor.cullMode = GPUCullMode.None;				break;			default:				console.error( 'THREE.WebGPURenderer: Unknown Material.side value.', material.side );				break;		}		return descriptor;	}	_getPrimitiveTopology( object ) {		if ( object.isMesh ) return GPUPrimitiveTopology.TriangleList;		else if ( object.isPoints ) return GPUPrimitiveTopology.PointList;		else if ( object.isLineSegments ) return GPUPrimitiveTopology.LineList;		else if ( object.isLine ) return GPUPrimitiveTopology.LineStrip;	}	_getStencilCompare( material ) {		let stencilCompare;		const stencilFunc = material.stencilFunc;		switch ( stencilFunc ) {			case NeverStencilFunc:				stencilCompare = GPUCompareFunction.Never;				break;			case AlwaysStencilFunc:				stencilCompare = GPUCompareFunction.Always;				break;			case LessStencilFunc:				stencilCompare = GPUCompareFunction.Less;				break;			case LessEqualStencilFunc:				stencilCompare = GPUCompareFunction.LessEqual;				break;			case EqualStencilFunc:				stencilCompare = GPUCompareFunction.Equal;				break;			case GreaterEqualStencilFunc:				stencilCompare = GPUCompareFunction.GreaterEqual;				break;			case GreaterStencilFunc:				stencilCompare = GPUCompareFunction.Greater;				break;			case NotEqualStencilFunc:				stencilCompare = GPUCompareFunction.NotEqual;				break;			default:				console.error( 'THREE.WebGPURenderer: Invalid stencil function.', stencilFunc );		}		return stencilCompare;	}	_getStencilOperation( op ) {		let stencilOperation;		switch ( op ) {			case KeepStencilOp:				stencilOperation = GPUStencilOperation.Keep;				break;			case ZeroStencilOp:				stencilOperation = GPUStencilOperation.Zero;				break;			case ReplaceStencilOp:				stencilOperation = GPUStencilOperation.Replace;				break;			case InvertStencilOp:				stencilOperation = GPUStencilOperation.Invert;				break;			case IncrementStencilOp:				stencilOperation = GPUStencilOperation.IncrementClamp;				break;			case DecrementStencilOp:				stencilOperation = GPUStencilOperation.DecrementClamp;				break;			case IncrementWrapStencilOp:				stencilOperation = GPUStencilOperation.IncrementWrap;				break;			case DecrementWrapStencilOp:				stencilOperation = GPUStencilOperation.DecrementWrap;				break;			default:				console.error( 'THREE.WebGPURenderer: Invalid stencil operation.', stencilOperation );		}		return stencilOperation;	}	_getVertexFormat( type, bytesPerElement ) {		// float		if ( type === 'float' ) return GPUVertexFormat.Float32;		if ( type === 'vec2' ) {			if ( bytesPerElement === 2 ) {				return GPUVertexFormat.Float16x2;			} else {				return GPUVertexFormat.Float32x2;			}		}		if ( type === 'vec3' ) return GPUVertexFormat.Float32x3;		if ( type === 'vec4' ) {			if ( bytesPerElement === 2 ) {				return GPUVertexFormat.Float16x4;			} else {				return GPUVertexFormat.Float32x4;			}		}		// int		if ( type === 'int' ) return GPUVertexFormat.Sint32;		if ( type === 'ivec2' ) {			if ( bytesPerElement === 1 ) {				return GPUVertexFormat.Sint8x2;			} else if ( bytesPerElement === 2 ) {				return GPUVertexFormat.Sint16x2;			} else {				return GPUVertexFormat.Sint32x2;			}		}		if ( type === 'ivec3' ) return GPUVertexFormat.Sint32x3;		if ( type === 'ivec4' ) {			if ( bytesPerElement === 1 ) {				return GPUVertexFormat.Sint8x4;			} else if ( bytesPerElement === 2 ) {				return GPUVertexFormat.Sint16x4;			} else {				return GPUVertexFormat.Sint32x4;			}		}		// uint		if ( type === 'uint' ) return GPUVertexFormat.Uint32;		if ( type === 'uvec2' ) {			if ( bytesPerElement === 1 ) {				return GPUVertexFormat.Uint8x2;			} else if ( bytesPerElement === 2 ) {				return GPUVertexFormat.Uint16x2;			} else {				return GPUVertexFormat.Uint32x2;			}		}		if ( type === 'uvec3' ) return GPUVertexFormat.Uint32x3;		if ( type === 'uvec4' ) {			if ( bytesPerElement === 1 ) {				return GPUVertexFormat.Uint8x4;			} else if ( bytesPerElement === 2 ) {				return GPUVertexFormat.Uint16x4;			} else {				return GPUVertexFormat.Uint32x4;			}		}		console.error( 'THREE.WebGPURenderer: Shader variable type not supported yet.', type );	}	_getShaderAttributes( nodeBuilder, geometry ) {		const nodeAttributes = nodeBuilder.attributes;		const attributes = [];		for ( let slot = 0; slot < nodeAttributes.length; slot++ ) {			const nodeAttribute = nodeAttributes[ slot ];			const name = nodeAttribute.name;			const type = nodeAttribute.type;			const geometryAttribute = geometry.getAttribute( name );			const bytesPerElement = ( geometryAttribute !== undefined ) ? geometryAttribute.array.BYTES_PER_ELEMENT : 4;			const arrayStride = this._getArrayStride( type, bytesPerElement );			const format = this._getVertexFormat( type, bytesPerElement );			attributes.push( {				name,				arrayStride,				format,				slot			} );		}		return attributes;	}}export default WebGPURenderPipeline;
 |