rebase

examples/webgpu_multiple_canvases.html

@@ -40,9 +40,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -51,14 +51,10 @@
 
 			import * as THREE from 'three';
 
-			import { MeshPhongNodeMaterial } from 'three/nodes';
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import CanvasRenderTarget from 'three/addons/renderers/common/CanvasRenderTarget.js';
-
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			let camera, renderer;
@@ -111,7 +107,7 @@
 
 			function makeCanvasRenderTarget( container ) {
 
-				const canvasRenderTarget = new CanvasRenderTarget( { antialias: Math.random() < 0.5 ? true : false } );
+				const canvasRenderTarget = new THREE.CanvasRenderTarget( { antialias: Math.random() < 0.5 ? true : false } );
 
 				canvasRenderTarget.outputColorSpace = colorSpaces[ Math.floor( Math.random() * colorSpaces.length ) ];
 
@@ -178,7 +174,7 @@
 
 				}
 
-				renderer = new WebGPURenderer();
+				renderer = new THREE.WebGPURenderer();
 				renderer.setAnimationLoop( render );
 
 				stats = new Stats();
@@ -198,12 +194,12 @@
 				);
 
 				materials.push(
-					new MeshPhongNodeMaterial( { color: 0x00ee00 } ),
-					new MeshPhongNodeMaterial( { color: 0xee0000 } ),
-					new MeshPhongNodeMaterial( { color: 0xeeee00 } ),
-					new MeshPhongNodeMaterial( { color: 0x00eeee } ),
-					new MeshPhongNodeMaterial( { color: 0xee00ee } ),
-					new MeshPhongNodeMaterial( { color: 0x0000ee } ),
+					new THREE.MeshPhongNodeMaterial( { color: 0x00ee00 } ),
+					new THREE.MeshPhongNodeMaterial( { color: 0xee0000 } ),
+					new THREE.MeshPhongNodeMaterial( { color: 0xeeee00 } ),
+					new THREE.MeshPhongNodeMaterial( { color: 0x00eeee } ),
+					new THREE.MeshPhongNodeMaterial( { color: 0xee00ee } ),
+					new THREE.MeshPhongNodeMaterial( { color: 0x0000ee } ),
 				);
 
 			}

src/Three.WebGPU.js

@@ -161,6 +161,7 @@ export * from './constants.js';
 export * from './Three.Legacy.js';
 
 export { default as WebGPURenderer } from './renderers/webgpu/WebGPURenderer.js';
+export { default as CanvasRenderTarget } from './renderers/common/CanvasRenderTarget.js';
 export { default as QuadMesh } from './renderers/common/QuadMesh.js';
 export { default as PMREMGenerator } from './renderers/common/extras/PMREMGenerator.js';
 export { default as PostProcessing } from './renderers/common/PostProcessing.js';

src/renderers/common/Backend.js

@@ -1,8 +1,6 @@
 let color4 = null;
 
 import Color4 from './Color4.js';
-import { Vector2 } from '../../math/Vector2.js';
-import { Vector4 } from '../../math/Vector4.js';
 import { createCanvasElement } from '../../utils.js';
 import { REVISION } from '../../constants.js';
 

src/renderers/common/CanvasRenderTarget.js

@@ -1,4 +1,7 @@
-import { EventDispatcher, Vector4, REVISION, createCanvasElement, SRGBColorSpace } from 'three';
+import { createCanvasElement } from '../../utils.js';
+import { REVISION, SRGBColorSpace } from '../../constants';
+import { EventDispatcher } from '../../core/EventDispatcher';
+import { Vector4 } from '../../math/Vector4.js';
 
 class CanvasRenderTarget extends EventDispatcher {
 

src/renderers/common/Renderer.js

@@ -25,7 +25,7 @@ import { Vector2 } from '../../math/Vector2.js';
 import { Vector3 } from '../../math/Vector3.js';
 import { Vector4 } from '../../math/Vector4.js';
 import { RenderTarget } from '../../core/RenderTarget.js';
-import { DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoColorSpace, NoToneMapping, LinearFilter, LinearSRGBColorSpace, HalfFloatType, RGBAFormat } from '../../constants.js';
+import { DoubleSide, BackSide, FrontSide, NoColorSpace, NoToneMapping, LinearFilter, LinearSRGBColorSpace, HalfFloatType, RGBAFormat } from '../../constants.js';
 
 const _scene = new Scene();
 const _drawingBufferSize = new Vector2();
@@ -927,7 +927,7 @@ class Renderer {
 
 		}
 
-		const renderTarget = this._renderTarget.isCanvasRenderTarget !== true ? this._renderTarget : this._getFrameBufferTarget();
+		const renderTarget = this._renderTarget.isCanvasRenderTarget === true ? this._getFrameBufferTarget() : this._renderTarget;
 
 		let renderTargetData = null;
 
@@ -941,7 +941,7 @@ class Renderer {
 
 		this.backend.clear( color, depth, stencil, renderTargetData, renderTarget );
 
-		if ( renderTarget !== null && this._renderTarget === null ) {
+		if ( renderTarget !== null && this._renderTarget.isCanvasRenderTarget === true ) {
 
 			// If a color space transform or tone mapping is required,
 			// the clear operation clears the intermediate renderTarget texture, but does not update the screen canvas.

src/renderers/webgpu/WebGPUBackend.js

@@ -119,7 +119,7 @@ class WebGPUBackend extends Backend {
 		canvasRenderTargetData.contextGPU = context;
 		canvasRenderTargetData.ready = true;
 
-	};
+	}
 
 	get coordinateSystem() {
 
@@ -147,7 +147,9 @@ class WebGPUBackend extends Backend {
 
 		if ( ! canvasRenderTargetData.ready ) this._configureContext( canvasRenderTarget );
 
-		let { contextGPU, descriptor } = canvasRenderTargetData;
+		const contextGPU = canvasRenderTargetData.contextGPU;
+
+		let descriptor = canvasRenderTargetData.descriptor;
 
 		if ( canvasRenderTarget.version !== canvasRenderTargetData.version ) {
 
@@ -997,7 +999,7 @@ class WebGPUBackend extends Backend {
 
 		const renderContext = renderObject.context;
 
-		const sampleCount = renderContext.sampleCount;
+		const sampleCount = utils.getSampleCount( renderContext.sampleCount );
 		const colorSpace = renderContext.colorSpace;
 		const colorFormat = utils.getCurrentColorFormat( renderContext );
 		const depthStencilFormat = utils.getCurrentDepthStencilFormat( renderContext );
@@ -1062,7 +1064,7 @@ class WebGPUBackend extends Backend {
 			material.stencilFail, material.stencilZFail, material.stencilZPass,
 			material.stencilFuncMask, material.stencilWriteMask,
 			material.side,
-			renderContext.sampleCount,
+			utils.getSampleCount( renderContext.sampleCount ),
 			renderContext.colorSpace, utils.getCurrentColorFormat( renderContext ), utils.getCurrentDepthStencilFormat( renderContext ),
 			utils.getPrimitiveTopology( object, material ),
 			renderObject.clippingContextVersion

src/renderers/webgpu/utils/WebGPUPipelineUtils.js

@@ -25,7 +25,7 @@ class WebGPUPipelineUtils {
 
 	_getSampleCount( renderObjectContext ) {
 
-		return this.backend.utils.getSampleCountRenderContext( renderObjectContext );
+		return this.backend.utils.getSampleCount( renderObjectContext.sampleCount );
 
 	}
 
@@ -120,7 +120,7 @@ class WebGPUPipelineUtils {
 		const depthCompare = this._getDepthCompare( material );
 		const depthStencilFormat = utils.getCurrentDepthStencilFormat( context );
 
-		const sampleCount = context.sampleCount;
+		const sampleCount = this._getSampleCount( context );
 
 		const pipelineDescriptor = {
 			label: 'renderPipeline',
@@ -178,7 +178,7 @@ class WebGPUPipelineUtils {
 
 		const depthStencilFormat = utils.getCurrentDepthStencilFormat( renderContext );
 		const colorFormat = utils.getCurrentColorFormat( renderContext );
-		const sampleCount = renderContext.sampleCount;
+		const sampleCount =  this._getSampleCount( renderContext );
 
 		const descriptor = {
 			label: 'renderBundleEncoder',

src/renderers/webgpu/utils/WebGPUTextureUtils.js

@@ -5,7 +5,7 @@ import {
 import WebGPUTexturePassUtils from './WebGPUTexturePassUtils.js';
 
 import {
-	ByteType, ShortType, CubeTexture, Texture, Vector2,
+	ByteType, ShortType,
 	NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter,
 	RepeatWrapping, MirroredRepeatWrapping,
 	RGB_ETC2_Format, RGBA_ETC2_EAC_Format,
@@ -16,7 +16,7 @@ import {
 	CubeReflectionMapping, CubeRefractionMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping
 } from '../../../constants.js';
 import { CubeTexture } from '../../../textures/CubeTexture.js';
-import { DepthTexture } from '../../../textures/DepthTexture.js';
+import { Vector2 } from '../../../math/Vector2.js';
 import { Texture } from '../../../textures/Texture.js';
 
 const _compareToWebGPU = {

src/renderers/webgpu/utils/WebGPUUtils.js

@@ -64,6 +64,27 @@ class WebGPUUtils {
 
 	}
 
+	getSampleCount( sampleCount ) {
+
+		let count = 1;
+
+		if ( sampleCount > 1 ) {
+
+			// WebGPU only supports power-of-two sample counts and 2 is not a valid value
+			count = Math.pow( 2, Math.floor( Math.log2( sampleCount ) ) );
+
+			if ( count === 2 ) {
+
+				count = 4;
+
+			}
+
+		}
+
+		return count;
+
+	}
+
 }
 
 export default WebGPUUtils;