super-three 0.169.1 → 0.170.0

package/src/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -57,19 +57,8 @@ const wgslTypeLib = {
 	bvec4: 'vec4<bool>',
 
 	mat2: 'mat2x2<f32>',
-	imat2: 'mat2x2<i32>',
-	umat2: 'mat2x2<u32>',
-	bmat2: 'mat2x2<bool>',
-
 	mat3: 'mat3x3<f32>',
-	imat3: 'mat3x3<i32>',
-	umat3: 'mat3x3<u32>',
-	bmat3: 'mat3x3<bool>',
-
-	mat4: 'mat4x4<f32>',
-	imat4: 'mat4x4<i32>',
-	umat4: 'mat4x4<u32>',
-	bmat4: 'mat4x4<bool>'
+	mat4: 'mat4x4<f32>'
 };
 
 const wgslPolyfill = {
@@ -82,7 +71,7 @@ const wgslPolyfill = {
 	equals_bvec2: new CodeNode( 'fn tsl_equals_bvec2( a : vec2f, b : vec2f ) -> vec2<bool> { return vec2<bool>( a.x == b.x, a.y == b.y ); }' ),
 	equals_bvec3: new CodeNode( 'fn tsl_equals_bvec3( a : vec3f, b : vec3f ) -> vec3<bool> { return vec3<bool>( a.x == b.x, a.y == b.y, a.z == b.z ); }' ),
 	equals_bvec4: new CodeNode( 'fn tsl_equals_bvec4( a : vec4f, b : vec4f ) -> vec4<bool> { return vec4<bool>( a.x == b.x, a.y == b.y, a.z == b.z, a.w == b.w ); }' ),
-	repeatWrapping: new CodeNode( `
+	repeatWrapping: new CodeNode( /* wgsl */`
 fn tsl_repeatWrapping( uv : vec2<f32>, dimension : vec2<u32> ) -> vec2<u32> {
 
 	let uvScaled = vec2<u32>( uv * vec2<f32>( dimension ) );
@@ -91,7 +80,7 @@ fn tsl_repeatWrapping( uv : vec2<f32>, dimension : vec2<u32> ) -> vec2<u32> {
 
 }
 ` ),
-	biquadraticTexture: new CodeNode( `
+	biquadraticTexture: new CodeNode( /* wgsl */`
 fn tsl_biquadraticTexture( map : texture_2d<f32>, coord : vec2f, level : i32 ) -> vec4f {
 
 	let iRes = vec2i( textureDimensions( map, level ) );
@@ -152,7 +141,7 @@ if ( /Windows/g.test( navigator.userAgent ) ) {
 
 let diagnostics = '';
 
-if ( /Firefox/g.test( navigator.userAgent ) !== true ) {
+if ( /Firefox|Deno/g.test( navigator.userAgent ) !== true ) {
 
 	diagnostics += 'diagnostic( off, derivative_uniformity );\n';
 
@@ -386,7 +375,7 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 				return name;
 
-			} else if ( type === 'buffer' || type === 'storageBuffer' ) {
+			} else if ( type === 'buffer' || type === 'storageBuffer' || type === 'indirectStorageBuffer' ) {
 
 				return `NodeBuffer_${ node.id }.${name}`;
 
@@ -525,9 +514,10 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 				}
 
-			} else if ( type === 'buffer' || type === 'storageBuffer' ) {
+			} else if ( type === 'buffer' || type === 'storageBuffer' || type === 'indirectStorageBuffer' ) {
+
+				const bufferClass = type === 'buffer' ? NodeUniformBuffer : NodeStorageBuffer;
 
-				const bufferClass = type === 'storageBuffer' ? NodeStorageBuffer : NodeUniformBuffer;
 				const buffer = new bufferClass( node, group );
 				buffer.setVisibility( gpuShaderStageLib[ shaderStage ] );
 
@@ -1067,13 +1057,13 @@ ${ flowData.code }
 
 				bindingSnippets.push( `@binding( ${ uniformIndexes.binding ++ } ) @group( ${ uniformIndexes.group } ) var ${ uniform.name } : ${ textureType };` );
 
-			} else if ( uniform.type === 'buffer' || uniform.type === 'storageBuffer' ) {
+			} else if ( uniform.type === 'buffer' || uniform.type === 'storageBuffer' || uniform.type === 'indirectStorageBuffer' ) {
 
 				const bufferNode = uniform.node;
 				const bufferType = this.getType( bufferNode.bufferType );
 				const bufferCount = bufferNode.bufferCount;
 
-				const bufferCountSnippet = bufferCount > 0 ? ', ' + bufferCount : '';
+				const bufferCountSnippet = bufferCount > 0 && uniform.type === 'buffer' ? ', ' + bufferCount : '';
 				const bufferTypeSnippet = bufferNode.isAtomic ? `atomic<${bufferType}>` : `${bufferType}`;
 				const bufferSnippet = `\t${ uniform.name } : array< ${ bufferTypeSnippet }${ bufferCountSnippet } >\n`;
 				const bufferAccessMode = bufferNode.isStorageBufferNode ? `storage, ${ this.getStorageAccess( bufferNode ) }` : 'uniform';

package/src/renderers/webgpu/nodes/WGSLNodeFunction.js

@@ -97,13 +97,21 @@ const parse = ( source ) => {
 
 			let resolvedType = type;
 
-			if ( resolvedType.startsWith( 'texture' ) ) {
+			if ( resolvedType.startsWith( 'ptr' ) ) {
 
-				resolvedType = type.split( '<' )[ 0 ];
+				resolvedType = 'pointer';
 
-			}
+			} else {
+
+				if ( resolvedType.startsWith( 'texture' ) ) {
+
+					resolvedType = type.split( '<' )[ 0 ];
 
-			resolvedType = wgslTypeLib[ resolvedType ] || resolvedType;
+				}
+
+				resolvedType = wgslTypeLib[ resolvedType ];
+
+			}
 
 			inputs.push( new NodeFunctionInput( resolvedType, name ) );
 

package/src/renderers/webgpu/utils/WebGPUPipelineUtils.js

@@ -127,15 +127,6 @@ class WebGPUPipelineUtils {
 			vertex: Object.assign( {}, vertexModule, { buffers: vertexBuffers } ),
 			fragment: Object.assign( {}, fragmentModule, { targets } ),
 			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: sampleCount,
 				alphaToCoverageEnabled: material.alphaToCoverage && sampleCount > 1
@@ -145,6 +136,35 @@ class WebGPUPipelineUtils {
 			} )
 		};
 
+
+		const depthStencil = {};
+		const renderDepth = renderObject.context.depth;
+		const renderStencil = renderObject.context.stencil;
+
+		if ( renderDepth === true || renderStencil === true ) {
+
+			if ( renderDepth === true ) {
+
+				depthStencil.format = depthStencilFormat;
+				depthStencil.depthWriteEnabled = material.depthWrite;
+				depthStencil.depthCompare = depthCompare;
+
+			}
+
+			if ( renderStencil === true ) {
+
+				depthStencil.stencilFront = stencilFront;
+				depthStencil.stencilBack = {}; // three.js does not provide an API to configure the back function (gl.stencilFuncSeparate() was never used)
+				depthStencil.stencilReadMask = material.stencilFuncMask;
+				depthStencil.stencilWriteMask = material.stencilWriteMask;
+
+			}
+
+			pipelineDescriptor.depthStencil = depthStencil;
+
+		}
+
+
 		if ( promises === null ) {
 
 			pipelineData.pipeline = device.createRenderPipeline( pipelineDescriptor );

package/src/renderers/webgpu/utils/WebGPUTextureUtils.js

@@ -65,9 +65,17 @@ class WebGPUTextureUtils {
 			magFilter: this._convertFilterMode( texture.magFilter ),
 			minFilter: this._convertFilterMode( texture.minFilter ),
 			mipmapFilter: this._convertFilterMode( texture.minFilter ),
-			maxAnisotropy: texture.anisotropy
+			maxAnisotropy: 1
 		};
 
+		// anisotropy can only be used when all filter modes are set to linear.
+
+		if ( samplerDescriptorGPU.magFilter === GPUFilterMode.Linear && samplerDescriptorGPU.minFilter === GPUFilterMode.Linear && samplerDescriptorGPU.mipmapFilter === GPUFilterMode.Linear ) {
+
+			samplerDescriptorGPU.maxAnisotropy = texture.anisotropy;
+
+		}
+
 		if ( texture.isDepthTexture && texture.compareFunction !== null ) {
 
 			samplerDescriptorGPU.compare = _compareToWebGPU[ texture.compareFunction ];
@@ -119,6 +127,20 @@ class WebGPUTextureUtils {
 
 		const { width, height, depth, levels } = options;
 
+		if ( texture.isFramebufferTexture ) {
+
+			if ( options.renderTarget ) {
+
+				options.format = this.backend.utils.getCurrentColorFormat( options.renderTarget );
+
+			} else {
+
+				options.format = this.backend.utils.getPreferredCanvasFormat();
+
+			}
+
+		}
+
 		const dimension = this._getDimension( texture );
 		const format = texture.internalFormat || options.format || getFormat( texture, backend.device );
 
@@ -850,11 +872,7 @@ export function getFormat( texture, device = null ) {
 
 	let formatGPU;
 
-	if ( texture.isFramebufferTexture === true && texture.type === UnsignedByteType ) {
-
-		formatGPU = GPUTextureFormat.BGRA8Unorm;
-
-	} else if ( texture.isCompressedTexture === true || texture.isCompressedArrayTexture === true ) {
+	if ( texture.isCompressedTexture === true || texture.isCompressedArrayTexture === true ) {
 
 		switch ( format ) {
 

package/src/renderers/webgpu/utils/WebGPUUtils.js

@@ -44,7 +44,6 @@ class WebGPUUtils {
 
 			format = this.getTextureFormatGPU( renderContext.textures[ 0 ] );
 
-
 		} else {
 
 			format = this.getPreferredCanvasFormat(); // default context format

package/src/renderers/webxr/WebXRManager.js

@@ -55,18 +55,14 @@ class WebXRManager extends EventDispatcher {
 		//
 
 		const cameraL = new PerspectiveCamera();
-		cameraL.layers.enable( 1 );
 		cameraL.viewport = new Vector4();
 
 		const cameraR = new PerspectiveCamera();
-		cameraR.layers.enable( 2 );
 		cameraR.viewport = new Vector4();
 
 		const cameras = [ cameraL, cameraR ];
 
 		const cameraXR = new ArrayCamera();
-		cameraXR.layers.enable( 1 );
-		cameraXR.layers.enable( 2 );
 
 		let _currentDepthNear = null;
 		let _currentDepthFar = null;
@@ -632,6 +628,10 @@ class WebXRManager extends EventDispatcher {
 
 			}
 
+			cameraL.layers.mask = camera.layers.mask | 0b010;
+			cameraR.layers.mask = camera.layers.mask | 0b100;
+			cameraXR.layers.mask = cameraL.layers.mask | cameraR.layers.mask;
+
 			const cameras = cameraXR.cameras;
 			var object = poseTarget || camera;
 			const parent = object.parent;

package/examples/jsm/cameras/CinematicCamera.js

@@ -1,208 +0,0 @@
-import {
-	Mesh,
-	OrthographicCamera,
-	PerspectiveCamera,
-	PlaneGeometry,
-	Scene,
-	ShaderMaterial,
-	UniformsUtils,
-	WebGLRenderTarget
-} from 'three';
-
-import { BokehShader, BokehDepthShader } from '../shaders/BokehShader2.js';
-
-class CinematicCamera extends PerspectiveCamera {
-
-	constructor( fov, aspect, near, far ) {
-
-		super( fov, aspect, near, far );
-
-		this.type = 'CinematicCamera';
-
-		this.postprocessing = { enabled: true };
-		this.shaderSettings = {
-			rings: 3,
-			samples: 4
-		};
-
-		const depthShader = BokehDepthShader;
-
-		this.materialDepth = new ShaderMaterial( {
-			uniforms: depthShader.uniforms,
-			vertexShader: depthShader.vertexShader,
-			fragmentShader: depthShader.fragmentShader
-		} );
-
-		this.materialDepth.uniforms[ 'mNear' ].value = near;
-		this.materialDepth.uniforms[ 'mFar' ].value = far;
-
-		// In case of cinematicCamera, having a default lens set is important
-		this.setLens();
-
-		this.initPostProcessing();
-
-	}
-
-	// providing fnumber and coc(Circle of Confusion) as extra arguments
-	// In case of cinematicCamera, having a default lens set is important
-	// if fnumber and coc are not provided, cinematicCamera tries to act as a basic PerspectiveCamera
-	setLens( focalLength = 35, filmGauge = 35, fNumber = 8, coc = 0.019 ) {
-
-		this.filmGauge = filmGauge;
-
-		this.setFocalLength( focalLength );
-
-		this.fNumber = fNumber;
-		this.coc = coc;
-
-		// fNumber is focalLength by aperture
-		this.aperture = focalLength / this.fNumber;
-
-		// hyperFocal is required to calculate depthOfField when a lens tries to focus at a distance with given fNumber and focalLength
-		this.hyperFocal = ( focalLength * focalLength ) / ( this.aperture * this.coc );
-
-	}
-
-	linearize( depth ) {
-
-		const zfar = this.far;
-		const znear = this.near;
-		return - zfar * znear / ( depth * ( zfar - znear ) - zfar );
-
-	}
-
-	smoothstep( near, far, depth ) {
-
-		const x = this.saturate( ( depth - near ) / ( far - near ) );
-		return x * x * ( 3 - 2 * x );
-
-	}
-
-	saturate( x ) {
-
-		return Math.max( 0, Math.min( 1, x ) );
-
-	}
-
-	// function for focusing at a distance from the camera
-	focusAt( focusDistance = 20 ) {
-
-		const focalLength = this.getFocalLength();
-
-		// distance from the camera (normal to frustrum) to focus on
-		this.focus = focusDistance;
-
-		// the nearest point from the camera which is in focus (unused)
-		this.nearPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal + ( this.focus - focalLength ) );
-
-		// the farthest point from the camera which is in focus (unused)
-		this.farPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal - ( this.focus - focalLength ) );
-
-		// the gap or width of the space in which is everything is in focus (unused)
-		this.depthOfField = this.farPoint - this.nearPoint;
-
-		// Considering minimum distance of focus for a standard lens (unused)
-		if ( this.depthOfField < 0 ) this.depthOfField = 0;
-
-		this.sdistance = this.smoothstep( this.near, this.far, this.focus );
-
-		this.ldistance = this.linearize( 1 -	this.sdistance );
-
-		this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = this.ldistance;
-
-	}
-
-	initPostProcessing() {
-
-		if ( this.postprocessing.enabled ) {
-
-			this.postprocessing.scene = new Scene();
-
-			this.postprocessing.camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,	window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
-
-			this.postprocessing.scene.add( this.postprocessing.camera );
-
-			this.postprocessing.rtTextureDepth = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
-			this.postprocessing.rtTextureColor = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
-
-			const bokeh_shader = BokehShader;
-
-			this.postprocessing.bokeh_uniforms = UniformsUtils.clone( bokeh_shader.uniforms );
-
-			this.postprocessing.bokeh_uniforms[ 'tColor' ].value = this.postprocessing.rtTextureColor.texture;
-			this.postprocessing.bokeh_uniforms[ 'tDepth' ].value = this.postprocessing.rtTextureDepth.texture;
-
-			this.postprocessing.bokeh_uniforms[ 'manualdof' ].value = 0;
-			this.postprocessing.bokeh_uniforms[ 'shaderFocus' ].value = 0;
-
-			this.postprocessing.bokeh_uniforms[ 'fstop' ].value = 2.8;
-
-			this.postprocessing.bokeh_uniforms[ 'showFocus' ].value = 1;
-
-			this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = 0.1;
-
-			//console.log( this.postprocessing.bokeh_uniforms[ "focalDepth" ].value );
-
-			this.postprocessing.bokeh_uniforms[ 'znear' ].value = this.near;
-			this.postprocessing.bokeh_uniforms[ 'zfar' ].value = this.near;
-
-
-			this.postprocessing.bokeh_uniforms[ 'textureWidth' ].value = window.innerWidth;
-
-			this.postprocessing.bokeh_uniforms[ 'textureHeight' ].value = window.innerHeight;
-
-			this.postprocessing.materialBokeh = new ShaderMaterial( {
-				uniforms: this.postprocessing.bokeh_uniforms,
-				vertexShader: bokeh_shader.vertexShader,
-				fragmentShader: bokeh_shader.fragmentShader,
-				defines: {
-					RINGS: this.shaderSettings.rings,
-					SAMPLES: this.shaderSettings.samples,
-					DEPTH_PACKING: 1
-				}
-			} );
-
-			this.postprocessing.quad = new Mesh( new PlaneGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );
-			this.postprocessing.quad.position.z = - 500;
-			this.postprocessing.scene.add( this.postprocessing.quad );
-
-		}
-
-	}
-
-	renderCinematic( scene, renderer ) {
-
-		if ( this.postprocessing.enabled ) {
-
-			const currentRenderTarget = renderer.getRenderTarget();
-
-			renderer.clear();
-
-			// Render scene into texture
-
-			scene.overrideMaterial = null;
-			renderer.setRenderTarget( this.postprocessing.rtTextureColor );
-			renderer.clear();
-			renderer.render( scene, this );
-
-			// Render depth into texture
-
-			scene.overrideMaterial = this.materialDepth;
-			renderer.setRenderTarget( this.postprocessing.rtTextureDepth );
-			renderer.clear();
-			renderer.render( scene, this );
-
-			// Render bokeh composite
-
-			renderer.setRenderTarget( null );
-			renderer.render( this.postprocessing.scene, this.postprocessing.camera );
-
-			renderer.setRenderTarget( currentRenderTarget );
-
-		}
-
-	}
-
-}
-
-export { CinematicCamera };