super-three 0.158.0 → 0.160.0

package/examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -7,7 +7,7 @@ import { GPUFeatureName, GPUTextureFormat, GPULoadOp, GPUStoreOp, GPUIndexFormat
 import WGSLNodeBuilder from './nodes/WGSLNodeBuilder.js';
 import Backend from '../common/Backend.js';
 
-import { DepthTexture, DepthFormat, DepthStencilFormat, UnsignedInt248Type, UnsignedIntType, WebGPUCoordinateSystem } from 'three';
+import { DepthFormat, WebGPUCoordinateSystem } from 'three';
 
 import WebGPUUtils from './utils/WebGPUUtils.js';
 import WebGPUAttributeUtils from './utils/WebGPUAttributeUtils.js';
@@ -56,9 +56,6 @@ class WebGPUBackend extends Backend {
 		this.context = null;
 		this.colorBuffer = null;
 
-		this.defaultDepthTexture = new DepthTexture();
-		this.defaultDepthTexture.name = 'depthBuffer';
-
 		this.utils = new WebGPUUtils( this );
 		this.attributeUtils = new WebGPUAttributeUtils( this );
 		this.bindingUtils = new WebGPUBindingUtils( this );
@@ -117,6 +114,13 @@ class WebGPUBackend extends Backend {
 		this.device = device;
 		this.context = context;
 
+		this.context.configure( {
+			device: this.device,
+			format: GPUTextureFormat.BGRA8Unorm,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
+			alphaMode: 'premultiplied'
+		} );
+
 		this.updateSize();
 
 	}
@@ -218,7 +222,6 @@ class WebGPUBackend extends Backend {
 					resolveTarget,
 					loadOp: GPULoadOp.Load,
 					storeOp: GPUStoreOp.Store
-
 				} );
 
 			}
@@ -247,7 +250,7 @@ class WebGPUBackend extends Backend {
 
 			}
 
-			depthStencilAttachment.view = this._getDepthBufferGPU( renderContext ).createView();
+			depthStencilAttachment.view = this.textureUtils.getDepthBuffer( renderContext.depth, renderContext.stencil ).createView();
 
 		}
 
@@ -492,75 +495,166 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	clear( renderContext, color, depth, stencil ) {
+	clear( color, depth, stencil, renderTargetData = null ) {
 
 		const device = this.device;
-		const renderContextData = this.get( renderContext );
+		const renderer = this.renderer;
 
-		const { descriptor } = renderContextData;
+		const colorAttachments = [];
 
-		depth = depth && renderContext.depth;
-		stencil = stencil && renderContext.stencil;
+		let depthStencilAttachment;
+		let clearValue;
 
-		const colorAttachment = descriptor.colorAttachments[ 0 ];
-		const depthStencilAttachment = descriptor.depthStencilAttachment;
+		let supportsDepth;
+		let supportsStencil;
 
-		const antialias = this.parameters.antialias;
+		if ( color ) {
 
-		// @TODO: Include render target in clear operation.
-		if ( antialias === true ) {
+			const clearColor = this.getClearColor();
 
-			colorAttachment.view = this.colorBuffer.createView();
-			colorAttachment.resolveTarget = this.context.getCurrentTexture().createView();
+			clearValue = { r: clearColor.r, g: clearColor.g, b: clearColor.b, a: clearColor.a };
 
-		} else {
+		}
 
-			colorAttachment.view = this.context.getCurrentTexture().createView();
-			colorAttachment.resolveTarget = undefined;
+		if ( renderTargetData === null ) {
 
-		}
+			supportsDepth = renderer.depth;
+			supportsStencil = renderer.stencil;
 
-		descriptor.depthStencilAttachment.view = this._getDepthBufferGPU( renderContext ).createView();
+			depth = depth && supportsDepth;
+			stencil = stencil && supportsStencil;
 
-		if ( color ) {
+			if ( color ) {
 
-			colorAttachment.loadOp = GPULoadOp.Clear;
-			colorAttachment.clearValue = renderContext.clearColorValue;
+				const antialias = this.parameters.antialias;
 
-		} else {
+				const colorAttachment = {};
 
-			colorAttachment.loadOp = GPULoadOp.Load;
+				if ( antialias === true ) {
 
-		}
+					colorAttachment.view = this.colorBuffer.createView();
+					colorAttachment.resolveTarget = this.context.getCurrentTexture().createView();
+		
+				} else {
+		
+					colorAttachment.view = this.context.getCurrentTexture().createView();
+		
+				}
+
+				colorAttachment.clearValue = clearValue;
+				colorAttachment.loadOp = GPULoadOp.Clear;
+				colorAttachment.storeOp = GPUStoreOp.Store;
 
-		if ( depth ) {
+				colorAttachments.push( colorAttachment );
 
-			depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
-			depthStencilAttachment.depthClearValue = renderContext.clearDepthValue;
+			}
+
+			if ( depth || stencil ) {
+
+				depthStencilAttachment = {
+					view: this.textureUtils.getDepthBuffer( renderer.depth, renderer.stencil ).createView()
+				};
+
+			}
 
 		} else {
 
-			depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+			supportsDepth = renderTargetData.depth;
+			supportsStencil = renderTargetData.stencil;
+
+			depth = depth && supportsDepth;
+			stencil = stencil && supportsStencil;
+
+			if ( color ) {
+
+				for ( const texture of renderTargetData.textures ) {
+
+					const textureData = this.get( texture );
+					const textureView = textureData.texture.createView();
+
+					let view, resolveTarget;
+
+					if ( textureData.msaaTexture !== undefined ) {
+
+						view = textureData.msaaTexture.createView();
+						resolveTarget = textureView;
+
+					} else {
+
+						view = textureView;
+						resolveTarget = undefined;
+
+					}
+
+					colorAttachments.push( {
+						view,
+						resolveTarget,
+						clearValue,
+						loadOp: GPULoadOp.Clear,
+						storeOp: GPUStoreOp.Store
+					} );
+
+				}
+
+			}
+
+			if ( depth || stencil ) {
+
+				const depthTextureData = this.get( renderTargetData.depthTexture );
+
+				depthStencilAttachment = {
+					view: depthTextureData.texture.createView()
+				};
+
+			}
 
 		}
 
-		if ( stencil ) {
+		//
 
-			depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
-			depthStencilAttachment.stencilClearValue = renderContext.clearStencilValue;
+		if ( depthStencilAttachment !== undefined ) {
 
-		} else {
+			if ( depth ) {
+
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
+				depthStencilAttachment.depthClearValue = renderer.getClearDepth();
+				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+
+			} else {
+
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+
+			}
+
+			//
 
-			depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+			if ( stencil ) {
+
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
+				depthStencilAttachment.stencilClearValue = renderer.getClearStencil();
+				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+
+			} else {
+
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+
+			}
 
 		}
 
-		renderContextData.encoder = device.createCommandEncoder( {} );
-		renderContextData.currentPass = renderContextData.encoder.beginRenderPass( descriptor );
+		//
 
-		renderContextData.currentPass.end();
+		const encoder = device.createCommandEncoder( {} );
+		const currentPass = encoder.beginRenderPass( {
+			colorAttachments,
+			depthStencilAttachment
+		} );
+
+		currentPass.end();
 
-		device.queue.submit( [ renderContextData.encoder.finish() ] );
+		device.queue.submit( [ encoder.finish() ] );
 
 	}
 
@@ -731,9 +825,9 @@ class WebGPUBackend extends Backend {
 
 	// cache key
 
-	needsUpdate( renderObject ) {
+	needsRenderUpdate( renderObject ) {
 
-		const renderObjectGPU = this.get( renderObject );
+		const data = this.get( renderObject );
 
 		const { object, material } = renderObject;
 
@@ -747,15 +841,35 @@ class WebGPUBackend extends Backend {
 
 		let needsUpdate = false;
 
-		if ( renderObjectGPU.sampleCount !== sampleCount || renderObjectGPU.colorSpace !== colorSpace ||
-			renderObjectGPU.colorFormat !== colorFormat || renderObjectGPU.depthStencilFormat !== depthStencilFormat ||
-            renderObjectGPU.primitiveTopology !== primitiveTopology ) {
-
-			renderObjectGPU.sampleCount = sampleCount;
-			renderObjectGPU.colorSpace = colorSpace;
-			renderObjectGPU.colorFormat = colorFormat;
-			renderObjectGPU.depthStencilFormat = depthStencilFormat;
-			renderObjectGPU.primitiveTopology = primitiveTopology;
+		if ( data.material !== material || data.materialVersion !== material.version ||
+			data.transparent !== material.transparent || data.blending !== material.blending || data.premultipliedAlpha !== material.premultipliedAlpha ||
+			data.blendSrc !== material.blendSrc || data.blendDst !== material.blendDst || data.blendEquation !== material.blendEquation ||
+			data.blendSrcAlpha !== material.blendSrcAlpha || data.blendDstAlpha !== material.blendDstAlpha || data.blendEquationAlpha !== material.blendEquationAlpha ||
+			data.colorWrite !== material.colorWrite || data.depthWrite !== material.depthWrite || data.depthTest !== material.depthTest || data.depthFunc !== material.depthFunc ||
+			data.stencilWrite !== material.stencilWrite || data.stencilFunc !== material.stencilFunc ||
+			data.stencilFail !== material.stencilFail || data.stencilZFail !== material.stencilZFail || data.stencilZPass !== material.stencilZPass ||
+			data.stencilFuncMask !== material.stencilFuncMask || data.stencilWriteMask !== material.stencilWriteMask ||
+			data.side !== material.side || data.alphaToCoverage !== material.alphaToCoverage ||
+			data.sampleCount !== sampleCount || data.colorSpace !== colorSpace ||
+			data.colorFormat !== colorFormat || data.depthStencilFormat !== depthStencilFormat ||
+			data.primitiveTopology !== primitiveTopology 
+		) {
+
+			data.material = material; data.materialVersion = material.version;
+			data.transparent = material.transparent; data.blending = material.blending; data.premultipliedAlpha = material.premultipliedAlpha;
+			data.blendSrc = material.blendSrc; data.blendDst = material.blendDst; data.blendEquation = material.blendEquation;
+			data.blendSrcAlpha = material.blendSrcAlpha; data.blendDstAlpha = material.blendDstAlpha; data.blendEquationAlpha = material.blendEquationAlpha;
+			data.colorWrite = material.colorWrite;
+			data.depthWrite = material.depthWrite; data.depthTest = material.depthTest; data.depthFunc = material.depthFunc;
+			data.stencilWrite = material.stencilWrite; data.stencilFunc = material.stencilFunc;
+			data.stencilFail = material.stencilFail; data.stencilZFail = material.stencilZFail; data.stencilZPass = material.stencilZPass;
+			data.stencilFuncMask = material.stencilFuncMask; data.stencilWriteMask = material.stencilWriteMask;
+			data.side = material.side; data.alphaToCoverage = material.alphaToCoverage;
+			data.sampleCount = sampleCount;
+			data.colorSpace = colorSpace;
+			data.colorFormat = colorFormat;
+			data.depthStencilFormat = depthStencilFormat;
+			data.primitiveTopology = primitiveTopology;
 
 			needsUpdate = true;
 
@@ -765,7 +879,7 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	getCacheKey( renderObject ) {
+	getRenderCacheKey( renderObject ) {
 
 		const { object, material } = renderObject;
 
@@ -773,6 +887,15 @@ class WebGPUBackend extends Backend {
 		const renderContext = renderObject.context;
 
 		return [
+			material.transparent, material.blending, material.premultipliedAlpha,
+			material.blendSrc, material.blendDst, material.blendEquation,
+			material.blendSrcAlpha, material.blendDstAlpha, material.blendEquationAlpha,
+			material.colorWrite,
+			material.depthWrite, material.depthTest, material.depthFunc,
+			material.stencilWrite, material.stencilFunc,
+			material.stencilFail, material.stencilZFail, material.stencilZPass,
+			material.stencilFuncMask, material.stencilWriteMask,
+			material.side,
 			utils.getSampleCount( renderContext ),
 			utils.getCurrentColorSpace( renderContext ), utils.getCurrentColorFormat( renderContext ), utils.getCurrentDepthStencilFormat( renderContext ),
 			utils.getPrimitiveTopology( object, material )
@@ -927,13 +1050,18 @@ class WebGPUBackend extends Backend {
 
 	updateSize() {
 
-		this._configureContext();
-		this._setupColorBuffer();
-
+		this.colorBuffer = this.textureUtils.getColorBuffer();
+	
 	}
 
 	// utils public
 
+	getMaxAnisotropy() {
+
+		return 16;
+
+	}
+
 	hasFeature( name ) {
 
 		const adapter = this.adapter || _staticAdapter;
@@ -968,7 +1096,7 @@ class WebGPUBackend extends Backend {
 
 		} else if ( texture.isDepthTexture ) {
 
-			sourceGPU = this._getDepthBufferGPU( renderContext );
+			sourceGPU = this.textureUtils.getDepthBuffer( renderContext.depth, renderContext.stencil );
 
 		}
 
@@ -1001,85 +1129,6 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	// utils
-
-	_getDepthBufferGPU( renderContext ) {
-
-		const { width, height } = this.getDrawingBufferSize();
-
-		const depthTexture = this.defaultDepthTexture;
-		const depthTextureGPU = this.get( depthTexture ).texture;
-
-		let format, type;
-
-		if ( renderContext.stencil ) {
-
-			format = DepthStencilFormat;
-			type = UnsignedInt248Type;
-
-		} else if ( renderContext.depth ) {
-
-			format = DepthFormat;
-			type = UnsignedIntType;
-
-		}
-
-		if ( depthTextureGPU !== undefined ) {
-
-			if ( depthTexture.image.width === width && depthTexture.image.height === height && depthTexture.format === format && depthTexture.type === type ) {
-
-				return depthTextureGPU;
-
-			}
-
-			this.textureUtils.destroyTexture( depthTexture );
-
-		}
-
-		depthTexture.name = 'depthBuffer';
-		depthTexture.format = format;
-		depthTexture.type = type;
-		depthTexture.image.width = width;
-		depthTexture.image.height = height;
-
-		this.textureUtils.createTexture( depthTexture, { sampleCount: this.parameters.sampleCount, width, height } );
-
-		return this.get( depthTexture ).texture;
-
-	}
-
-	_configureContext() {
-
-		this.context.configure( {
-			device: this.device,
-			format: GPUTextureFormat.BGRA8Unorm,
-			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
-			alphaMode: 'premultiplied'
-		} );
-
-	}
-
-	_setupColorBuffer() {
-
-		if ( this.colorBuffer ) this.colorBuffer.destroy();
-
-		const { width, height } = this.getDrawingBufferSize();
-		//const format = navigator.gpu.getPreferredCanvasFormat(); // @TODO: Move to WebGPUUtils
-
-		this.colorBuffer = this.device.createTexture( {
-			label: 'colorBuffer',
-			size: {
-				width: width,
-				height: height,
-				depthOrArrayLayers: 1
-			},
-			sampleCount: this.parameters.sampleCount,
-			format: GPUTextureFormat.BGRA8Unorm,
-			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
-		} );
-
-	}
-
 }
 
 export default WebGPUBackend;

package/examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -37,7 +37,7 @@ class WebGPURenderer extends Renderer {
 		const backend = new BackendClass( parameters );
 
 		//super( new Proxy( backend, debugHandler ) );
-		super( backend );
+		super( backend, parameters );
 
 		this.isWebGPURenderer = true;