super-three 0.136.0 → 0.136.1

package/examples/jsm/postprocessing/GlitchPass.js

@@ -2,7 +2,8 @@ import {
 	DataTexture,
 	FloatType,
 	MathUtils,
-	RGBFormat,
+	RedFormat,
+	LuminanceFormat,
 	ShaderMaterial,
 	UniformsUtils
 } from 'three';
@@ -39,6 +40,8 @@ class GlitchPass extends Pass {
 
 	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
 
+		if ( renderer.capabilities.isWebGL2 === false ) this.uniforms[ 'tDisp' ].value.format = LuminanceFormat;
+
 		this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
 		this.uniforms[ 'seed' ].value = Math.random();//default seeding
 		this.uniforms[ 'byp' ].value = 0;
@@ -94,19 +97,17 @@ class GlitchPass extends Pass {
 
 	generateHeightmap( dt_size ) {
 
-		const data_arr = new Float32Array( dt_size * dt_size * 3 );
+		const data_arr = new Float32Array( dt_size * dt_size );
 		const length = dt_size * dt_size;
 
 		for ( let i = 0; i < length; i ++ ) {
 
 			const val = MathUtils.randFloat( 0, 1 );
-			data_arr[ i * 3 + 0 ] = val;
-			data_arr[ i * 3 + 1 ] = val;
-			data_arr[ i * 3 + 2 ] = val;
+			data_arr[ i ] = val;
 
 		}
 
-		const texture = new DataTexture( data_arr, dt_size, dt_size, RGBFormat, FloatType );
+		const texture = new DataTexture( data_arr, dt_size, dt_size, RedFormat, FloatType );
 		texture.needsUpdate = true;
 		return texture;
 

package/examples/jsm/postprocessing/SMAAPass.js

@@ -1,8 +1,6 @@
 import {
 	LinearFilter,
 	NearestFilter,
-	RGBAFormat,
-	RGBFormat,
 	ShaderMaterial,
 	Texture,
 	UniformsUtils,
@@ -22,18 +20,12 @@ class SMAAPass extends Pass {
 		// render targets
 
 		this.edgesRT = new WebGLRenderTarget( width, height, {
-			depthBuffer: false,
-			generateMipmaps: false,
-			minFilter: LinearFilter,
-			format: RGBFormat
+			depthBuffer: false
 		} );
 		this.edgesRT.texture.name = 'SMAAPass.edges';
 
 		this.weightsRT = new WebGLRenderTarget( width, height, {
-			depthBuffer: false,
-			generateMipmaps: false,
-			minFilter: LinearFilter,
-			format: RGBAFormat
+			depthBuffer: false
 		} );
 		this.weightsRT.texture.name = 'SMAAPass.weights';
 
@@ -52,7 +44,6 @@ class SMAAPass extends Pass {
 		this.areaTexture = new Texture();
 		this.areaTexture.name = 'SMAAPass.area';
 		this.areaTexture.image = areaTextureImage;
-		this.areaTexture.format = RGBFormat;
 		this.areaTexture.minFilter = LinearFilter;
 		this.areaTexture.generateMipmaps = false;
 		this.areaTexture.flipY = false;

package/examples/jsm/postprocessing/SSAOPass.js

@@ -7,16 +7,17 @@ import {
 	DstAlphaFactor,
 	DstColorFactor,
 	FloatType,
-	LinearFilter,
 	MathUtils,
 	MeshNormalMaterial,
 	NearestFilter,
 	NoBlending,
-	RGBAFormat,
+	RedFormat,
+	LuminanceFormat,
+	DepthStencilFormat,
+	UnsignedInt248Type,
 	RepeatWrapping,
 	ShaderMaterial,
 	UniformsUtils,
-	UnsignedShortType,
 	Vector3,
 	WebGLRenderTarget,
 	ZeroFactor
@@ -61,30 +62,22 @@ class SSAOPass extends Pass {
 		// beauty render target
 
 		const depthTexture = new DepthTexture();
-		depthTexture.type = UnsignedShortType;
+		depthTexture.format = DepthStencilFormat;
+		depthTexture.type = UnsignedInt248Type;
 
-		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, {
-			minFilter: LinearFilter,
-			magFilter: LinearFilter,
-			format: RGBAFormat
-		} );
+		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height );
 
 		// normal render target with depth buffer
 
 		this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
 			magFilter: NearestFilter,
-			format: RGBAFormat,
 			depthTexture: depthTexture
 		} );
 
 		// ssao render target
 
-		this.ssaoRenderTarget = new WebGLRenderTarget( this.width, this.height, {
-			minFilter: LinearFilter,
-			magFilter: LinearFilter,
-			format: RGBAFormat
-		} );
+		this.ssaoRenderTarget = new WebGLRenderTarget( this.width, this.height );
 
 		this.blurRenderTarget = this.ssaoRenderTarget.clone();
 
@@ -191,6 +184,8 @@ class SSAOPass extends Pass {
 
 	render( renderer, writeBuffer /*, readBuffer, deltaTime, maskActive */ ) {
 
+		if ( renderer.capabilities.isWebGL2 === false ) this.noiseTexture.format = LuminanceFormat;
+
 		// render beauty
 
 		renderer.setRenderTarget( this.beautyRenderTarget );
@@ -391,26 +386,19 @@ class SSAOPass extends Pass {
 		const simplex = new SimplexNoise();
 
 		const size = width * height;
-		const data = new Float32Array( size * 4 );
+		const data = new Float32Array( size );
 
 		for ( let i = 0; i < size; i ++ ) {
 
-			const stride = i * 4;
-
 			const x = ( Math.random() * 2 ) - 1;
 			const y = ( Math.random() * 2 ) - 1;
 			const z = 0;
 
-			const noise = simplex.noise3d( x, y, z );
-
-			data[ stride ] = noise;
-			data[ stride + 1 ] = noise;
-			data[ stride + 2 ] = noise;
-			data[ stride + 3 ] = 1;
+			data[ i ] = simplex.noise3d( x, y, z );
 
 		}
 
-		this.noiseTexture = new DataTexture( data, width, height, RGBAFormat, FloatType );
+		this.noiseTexture = new DataTexture( data, width, height, RedFormat, FloatType );
 		this.noiseTexture.wrapS = RepeatWrapping;
 		this.noiseTexture.wrapT = RepeatWrapping;
 		this.noiseTexture.needsUpdate = true;

package/examples/jsm/postprocessing/SavePass.js

@@ -1,6 +1,4 @@
 import {
-	LinearFilter,
-	RGBFormat,
 	ShaderMaterial,
 	UniformsUtils,
 	WebGLRenderTarget
@@ -34,7 +32,7 @@ class SavePass extends Pass {
 
 		if ( this.renderTarget === undefined ) {
 
-			this.renderTarget = new WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBFormat } );
+			this.renderTarget = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
 			this.renderTarget.texture.name = 'SavePass.rt';
 
 		}

package/examples/jsm/renderers/nodes/Nodes.js

@@ -55,6 +55,7 @@ import NormalMapNode from './display/NormalMapNode.js';
 // math
 import MathNode from './math/MathNode.js';
 import OperatorNode from './math/OperatorNode.js';
+import CondNode from './math/CondNode.js';
 
 // lights
 import LightContextNode from './lights/LightContextNode.js';
@@ -143,6 +144,7 @@ export {
 	// math
 	MathNode,
 	OperatorNode,
+	CondNode,
 
 	// lights
 	LightContextNode,

package/examples/jsm/renderers/nodes/ShaderNode.js

@@ -69,6 +69,8 @@ const NodeHandler = {
 
 };
 
+const nodeObjects = new WeakMap();
+
 const ShaderNodeObject = ( obj ) => {
 
 	const type = typeof obj;
@@ -81,16 +83,17 @@ const ShaderNodeObject = ( obj ) => {
 
 		if ( obj.isNode === true ) {
 
-			const node = obj;
-
-			if ( node.isProxyNode !== true ) {
+			let nodeObject = nodeObjects.get( obj );
 
-				node.isProxyNode = true;
+			if ( nodeObject === undefined ) {
 
-				return new Proxy( node, NodeHandler );
+				nodeObject = new Proxy( obj, NodeHandler );
+				nodeObjects.set( obj, nodeObject );
 
 			}
 
+			return nodeObject;
+
 		}
 
 	}
@@ -183,27 +186,33 @@ export const uniform = new ShaderNode( ( inputNode ) => {
 
 } );
 
+export const nodeObject = ( val ) => {
+
+	return ShaderNodeObject( val );
+
+};
+
 export const float = ( val ) => {
 
-	return ShaderNodeObject( new FloatNode( val ).setConst( true ) );
+	return nodeObject( new FloatNode( val ).setConst( true ) );
 
 };
 
 export const color = ( ...params ) => {
 
-	return ShaderNodeObject( new ColorNode( new Color( ...params ) ).setConst( true ) );
+	return nodeObject( new ColorNode( new Color( ...params ) ).setConst( true ) );
 
 };
 
 export const join = ( ...params ) => {
 
-	return ShaderNodeObject( new JoinNode( ShaderNodeArray( params ) ) );
+	return nodeObject( new JoinNode( ShaderNodeArray( params ) ) );
 
 };
 
 export const cond = ( ...params ) => {
 
-	return ShaderNodeObject( new CondNode( ...ShaderNodeArray( params ) ) );
+	return nodeObject( new CondNode( ...ShaderNodeArray( params ) ) );
 
 };
 
@@ -211,7 +220,7 @@ export const vec2 = ( ...params ) => {
 
 	if ( params[ 0 ]?.isNode === true ) {
 
-		return ShaderNodeObject( new ConvertNode( params[ 0 ], 'vec2' ) );
+		return nodeObject( new ConvertNode( params[ 0 ], 'vec2' ) );
 
 	} else {
 
@@ -223,7 +232,7 @@ export const vec2 = ( ...params ) => {
 
 		}
 
-		return ShaderNodeObject( new Vector2Node( new Vector2( ...params ) ).setConst( true ) );
+		return nodeObject( new Vector2Node( new Vector2( ...params ) ).setConst( true ) );
 
 	}
 
@@ -233,7 +242,7 @@ export const vec3 = ( ...params ) => {
 
 	if ( params[ 0 ]?.isNode === true ) {
 
-		return ShaderNodeObject( new ConvertNode( params[ 0 ], 'vec3' ) );
+		return nodeObject( new ConvertNode( params[ 0 ], 'vec3' ) );
 
 	} else {
 
@@ -245,7 +254,7 @@ export const vec3 = ( ...params ) => {
 
 		}
 
-		return ShaderNodeObject( new Vector3Node( new Vector3( ...params ) ).setConst( true ) );
+		return nodeObject( new Vector3Node( new Vector3( ...params ) ).setConst( true ) );
 
 	}
 
@@ -255,7 +264,7 @@ export const vec4 = ( ...params ) => {
 
 	if ( params[ 0 ]?.isNode === true ) {
 
-		return ShaderNodeObject( new ConvertNode( params[ 0 ], 'vec4' ) );
+		return nodeObject( new ConvertNode( params[ 0 ], 'vec4' ) );
 
 	} else {
 
@@ -267,7 +276,7 @@ export const vec4 = ( ...params ) => {
 
 		}
 
-		return ShaderNodeObject( new Vector4Node( new Vector4( ...params ) ).setConst( true ) );
+		return nodeObject( new Vector4Node( new Vector4( ...params ) ).setConst( true ) );
 
 	}
 
@@ -277,7 +286,7 @@ export const addTo = ( varNode, ...params ) => {
 
 	varNode.node = add( varNode.node, ...ShaderNodeArray( params ) );
 
-	return ShaderNodeObject( varNode );
+	return nodeObject( varNode );
 
 };
 
@@ -318,29 +327,47 @@ export const alphaTest = new PropertyNode( 'AlphaTest', 'float' );
 export const specularColor = new PropertyNode( 'SpecularColor', 'color' );
 
 export const abs = ShaderNodeProxy( MathNode, 'abs' );
-export const negate = ShaderNodeProxy( MathNode, 'negate' );
-export const floor = ShaderNodeProxy( MathNode, 'floor' );
-export const mod = ShaderNodeProxy( MathNode, 'mod' );
+export const acos = ShaderNodeProxy( MathNode, 'acos' );
+export const asin = ShaderNodeProxy( MathNode, 'asin' );
+export const atan = ShaderNodeProxy( MathNode, 'atan' );
+export const ceil = ShaderNodeProxy( MathNode, 'ceil' );
+export const clamp = ShaderNodeProxy( MathNode, 'clamp' );
+export const cos = ShaderNodeProxy( MathNode, 'cos' );
 export const cross = ShaderNodeProxy( MathNode, 'cross' );
+export const degrees = ShaderNodeProxy( MathNode, 'degrees' );
+export const dFdx = ShaderNodeProxy( MathNode, 'dFdx' );
+export const dFdy = ShaderNodeProxy( MathNode, 'dFdy' );
+export const distance = ShaderNodeProxy( MathNode, 'distance' );
+export const dot = ShaderNodeProxy( MathNode, 'dot' );
+export const exp = ShaderNodeProxy( MathNode, 'exp' );
+export const exp2 = ShaderNodeProxy( MathNode, 'exp2' );
+export const faceforward = ShaderNodeProxy( MathNode, 'faceforward' );
+export const floor = ShaderNodeProxy( MathNode, 'floor' );
 export const fract = ShaderNodeProxy( MathNode, 'fract' );
-export const round = ShaderNodeProxy( MathNode, 'round' );
+export const invert = ShaderNodeProxy( MathNode, 'invert' );
+export const inversesqrt = ShaderNodeProxy( MathNode, 'inversesqrt' );
+export const length = ShaderNodeProxy( MathNode, 'length' );
+export const log = ShaderNodeProxy( MathNode, 'log' );
+export const log2 = ShaderNodeProxy( MathNode, 'log2' );
 export const max = ShaderNodeProxy( MathNode, 'max' );
 export const min = ShaderNodeProxy( MathNode, 'min' );
-export const sin = ShaderNodeProxy( MathNode, 'sin' );
-export const cos = ShaderNodeProxy( MathNode, 'cos' );
-export const dot = ShaderNodeProxy( MathNode, 'dot' );
+export const mix = ShaderNodeProxy( MathNode, 'mix' );
+export const mod = ShaderNodeProxy( MathNode, 'mod' );
+export const negate = ShaderNodeProxy( MathNode, 'negate' );
 export const normalize = ShaderNodeProxy( MathNode, 'normalize' );
-export const sqrt = ShaderNodeProxy( MathNode, 'sqrt' );
-export const inversesqrt = ShaderNodeProxy( MathNode, 'inversesqrt' );
-export const sign = ShaderNodeProxy( MathNode, 'sign' );
-export const dFdx = ShaderNodeProxy( MathNode, 'dFdx' );
-export const dFdy = ShaderNodeProxy( MathNode, 'dFdy' );
 export const pow = ShaderNodeProxy( MathNode, 'pow' );
 export const pow2 = ShaderNodeProxy( MathNode, 'pow', 2 );
 export const pow3 = ShaderNodeProxy( MathNode, 'pow', 3 );
 export const pow4 = ShaderNodeProxy( MathNode, 'pow', 4 );
-export const exp = ShaderNodeProxy( MathNode, 'exp' );
-export const exp2 = ShaderNodeProxy( MathNode, 'exp2' );
-export const mix = ShaderNodeProxy( MathNode, 'mix' );
+export const radians = ShaderNodeProxy( MathNode, 'radians' );
+export const reflect = ShaderNodeProxy( MathNode, 'reflect' );
+export const refract = ShaderNodeProxy( MathNode, 'refract' );
+export const round = ShaderNodeProxy( MathNode, 'round' );
 export const saturate = ShaderNodeProxy( MathNode, 'saturate' );
+export const sign = ShaderNodeProxy( MathNode, 'sign' );
+export const sin = ShaderNodeProxy( MathNode, 'sin' );
+export const smoothstep = ShaderNodeProxy( MathNode, 'smoothstep' );
+export const sqrt = ShaderNodeProxy( MathNode, 'sqrt' );
+export const step = ShaderNodeProxy( MathNode, 'step' );
+export const tan = ShaderNodeProxy( MathNode, 'tan' );
 export const transformDirection = ShaderNodeProxy( MathNode, 'transformDirection' );

package/examples/jsm/renderers/nodes/display/ColorSpaceNode.js

@@ -1,7 +1,7 @@
 import TempNode from '../core/Node.js';
 import { ShaderNode,
 	vec3,
-	pow, mul, add, sub, mix, join,
+	pow, mul, sub, mix, join,
 	lessThanEqual } from '../ShaderNode.js';
 
 import { LinearEncoding, sRGBEncoding } from 'three';
@@ -12,22 +12,6 @@ export const LinearToLinear = new ShaderNode( ( inputs ) => {
 
 } );
 
-export const sRGBToLinear = new ShaderNode( ( inputs ) => {
-
-	const { value } = inputs;
-
-	const rgb = value.rgb;
-
-	const a = pow( add( mul( rgb, 0.9478672986 ), vec3( 0.0521327014 ) ), vec3( 2.4 ) );
-	const b = mul( rgb, 0.0773993808 );
-	const factor = vec3( lessThanEqual( rgb, vec3( 0.04045 ) ) );
-
-	const rgbResult = mix( a, b, factor );
-
-	return join( rgbResult.r, rgbResult.g, rgbResult.b, value.a );
-
-} );
-
 export const LinearTosRGB = new ShaderNode( ( inputs ) => {
 
 	const { value } = inputs;
@@ -46,28 +30,12 @@ export const LinearTosRGB = new ShaderNode( ( inputs ) => {
 
 const EncodingLib = {
 	LinearToLinear,
-	sRGBToLinear,
 	LinearTosRGB
 };
 
-function getEncodingComponents( encoding ) {
-
-	switch ( encoding ) {
-
-		case LinearEncoding:
-			return [ 'Linear' ];
-		case sRGBEncoding:
-			return [ 'sRGB' ];
-
-	}
-
-}
-
 class ColorSpaceNode extends TempNode {
 
 	static LINEAR_TO_LINEAR = 'LinearToLinear';
-
-	static SRGB_TO_LINEAR = 'sRGBToLinear';
 	static LINEAR_TO_SRGB = 'LinearTosRGB';
 
 	constructor( method, node ) {
@@ -77,27 +45,24 @@ class ColorSpaceNode extends TempNode {
 		this.method = method;
 
 		this.node = node;
-		this.factor = null;
 
 	}
 
 	fromEncoding( encoding ) {
 
-		const components = getEncodingComponents( encoding );
+		let method = null;
 
-		this.method = 'LinearTo' + components[ 0 ];
-		this.factor = components[ 1 ];
+		if ( encoding === LinearEncoding ) {
 
-		return this;
+			method = 'Linear';
 
-	}
+		} else if ( encoding === sRGBEncoding ) {
 
-	fromDecoding( encoding ) {
+			method = 'sRGB';
 
-		const components = getEncodingComponents( encoding );
+		}
 
-		this.method = components[ 0 ] + 'ToLinear';
-		this.factor = components[ 1 ];
+		this.method = 'LinearTo' + method;
 
 		return this;
 
@@ -113,11 +78,9 @@ class ColorSpaceNode extends TempNode {
 		if ( method !== ColorSpaceNode.LINEAR_TO_LINEAR ) {
 
 			const encodingFunctionNode = EncodingLib[ method ];
-			const factor = this.factor;
 
 			return encodingFunctionNode( {
-				value: node,
-				factor
+				value: node
 			} ).build( builder, type );
 
 		} else {

package/examples/jsm/renderers/nodes/inputs/TextureNode.js

@@ -1,7 +1,6 @@
 import InputNode from '../core/InputNode.js';
 import ExpressionNode from '../core/ExpressionNode.js';
 import UVNode from '../accessors/UVNode.js';
-import ColorSpaceNode from '../display/ColorSpaceNode.js';
 
 class TextureNode extends InputNode {
 
@@ -41,9 +40,9 @@ class TextureNode extends InputNode {
 
 			const nodeData = builder.getDataFromNode( this );
 
-			let colorSpace = nodeData.colorSpace;
+			let snippet = nodeData.snippet;
 
-			if ( colorSpace === undefined ) {
+			if ( snippet === undefined ) {
 
 				const uvSnippet = this.uv.build( builder, 'vec2' );
 				const bias = this.bias;
@@ -56,17 +55,13 @@ class TextureNode extends InputNode {
 
 				}
 
-				const textureCallSnippet = builder.getTexture( textureProperty, uvSnippet, biasSnippet );
+				snippet = builder.getTexture( textureProperty, uvSnippet, biasSnippet );
 
-				colorSpace = new ColorSpaceNode();
-				colorSpace.node = new ExpressionNode( textureCallSnippet, 'vec4' );
-				colorSpace.fromDecoding( builder.getTextureEncodingFromMap( texture ) );
-
-				nodeData.colorSpace = colorSpace;
+				nodeData.snippet = snippet;
 
 			}
 
-			return colorSpace.build( builder, output );
+			return builder.format( snippet, 'vec4', output );
 
 		}
 

package/examples/jsm/renderers/nodes/math/MathNode.js

@@ -33,7 +33,8 @@ class MathNode extends TempNode {
 	static INVERT = 'invert';
 	static DFDX = 'dFdx';
 	static DFDY = 'dFdy';
-	static SATURATE = 'saturate'
+	static SATURATE = 'saturate';
+	static ROUND = 'round';
 
 	// 2 inputs
 

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

@@ -17,7 +17,7 @@ class WebGPUObjects {
 
 		if ( geometry.isBufferGeometry !== true ) {
 
-			throw 'THREE.WebGPURenderer: This renderer only supports THREE.BufferGeometry for geometries.';
+			throw new Error( 'THREE.WebGPURenderer: This renderer only supports THREE.BufferGeometry for geometries.' );
 
 		}
 

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

@@ -92,7 +92,6 @@ class WebGPURenderer {
 		this._adapter = null;
 		this._device = null;
 		this._context = null;
-		this._swapChain = null;
 		this._colorBuffer = null;
 		this._depthBuffer = null;
 
@@ -166,15 +165,14 @@ class WebGPURenderer {
 
 		const context = ( parameters.context !== undefined ) ? parameters.context : this.domElement.getContext( 'webgpu' );
 
-		const swapChain = context.configure( {
+		context.configure( {
 			device: device,
-			format: GPUTextureFormat.BGRA8Unorm // this is the only valid swap chain format right now (r121)
+			format: GPUTextureFormat.BGRA8Unorm // this is the only valid context format right now (r121)
 		} );
 
 		this._adapter = adapter;
 		this._device = device;
 		this._context = context;
-		this._swapChain = swapChain;
 
 		this._info = new WebGPUInfo();
 		this._properties = new WebGPUProperties();
@@ -489,7 +487,7 @@ class WebGPURenderer {
 
 		} else {
 
-			format = GPUTextureFormat.BGRA8Unorm; // default swap chain format
+			format = GPUTextureFormat.BGRA8Unorm; // default context format
 
 		}
 

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

@@ -1,6 +1,6 @@
 import { GPUTextureFormat, GPUAddressMode, GPUFilterMode, GPUTextureDimension } from './constants.js';
 import { CubeTexture, Texture, NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearFilter, RepeatWrapping, MirroredRepeatWrapping,
-	RGBFormat, RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, sRGBEncoding
+	RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, sRGBEncoding
 } from 'three';
 import WebGPUTextureUtils from './WebGPUTextureUtils.js';
 
@@ -564,7 +564,6 @@ class WebGPUTextures {
 				formatGPU = ( encoding === sRGBEncoding ) ? GPUTextureFormat.BC3RGBAUnormSRGB : GPUTextureFormat.BC3RGBAUnorm;
 				break;
 
-			case RGBFormat:
 			case RGBAFormat:
 
 				switch ( type ) {

package/examples/jsm/renderers/webgpu/nodes/WebGPUNodeBuilder.js

@@ -25,7 +25,7 @@ import ColorSpaceNode from '../../nodes/display/ColorSpaceNode.js';
 import LightContextNode from '../../nodes/lights/LightContextNode.js';
 import OperatorNode from '../../nodes/math/OperatorNode.js';
 import WGSLNodeParser from '../../nodes/parsers/WGSLNodeParser.js';
-import { vec4 } from '../../nodes/ShaderNode.js';
+import { vec4, join, nodeObject } from '../../nodes/ShaderNode.js';
 import { getRoughness } from '../../nodes/functions/PhysicalMaterialFunctions.js';
 
 const wgslTypeLib = {
@@ -150,7 +150,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			colorNode = this.addFlow( 'fragment', new VarNode( colorNode, 'Color', 'vec4' ) );
 
-			this.addFlow( 'fragment', new VarNode( colorNode, 'DiffuseColor', 'vec4' ) );
+			const diffuseColorNode = this.addFlow( 'fragment', new VarNode( colorNode, 'DiffuseColor', 'vec4' ) );
 
 			// OPACITY
 
@@ -254,7 +254,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			// LIGHT
 
-			let outputNode = colorNode;
+			let outputNode = diffuseColorNode;
 
 			if ( lightNode && lightNode.isNode ) {
 
@@ -266,11 +266,17 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			// RESULT
 
+			const outputNodeObj = nodeObject( outputNode );
+
+			outputNode = join( outputNodeObj.x, outputNodeObj.y, outputNodeObj.z, nodeObject( diffuseColorNode ).w );
+
+			//
+
 			const outputEncoding = this.renderer.outputEncoding;
 
 			if ( outputEncoding !== LinearEncoding ) {
 
-				outputNode = new ColorSpaceNode( ColorSpaceNode.LINEAR_TO_LINEAR, vec4( outputNode ) );
+				outputNode = new ColorSpaceNode( ColorSpaceNode.LINEAR_TO_LINEAR, outputNode );
 				outputNode.fromEncoding( outputEncoding );
 
 			}