WebGPURenderer: Color4 (#27222)

* Color4

* cleanup

examples/jsm/renderers/common/Background.js

@@ -1,9 +1,9 @@
 import DataMap from './DataMap.js';
-import { Color, Mesh, SphereGeometry, BackSide } from 'three';
+import Color4 from './Color4.js';
+import { Mesh, SphereGeometry, BackSide } from 'three';
 import { context, normalWorld, backgroundBlurriness, backgroundIntensity, NodeMaterial, modelViewProjection } from '../../nodes/Nodes.js';
 
-let _clearAlpha;
-const _clearColor = new Color();
+const _clearColor = new Color4();
 
 class Background extends DataMap {
 
@@ -31,14 +31,15 @@ class Background extends DataMap {
 			// no background settings, use clear color configuration from the renderer
 
 			_clearColor.copyLinearToSRGB( renderer._clearColor );
-			_clearAlpha = renderer._clearAlpha;
+			_clearColor.a = renderer._clearColor.a;
 
 		} else if ( background.isColor === true ) {
 
 			// background is an opaque color
 
 			_clearColor.copyLinearToSRGB( background );
-			_clearAlpha = 1;
+			_clearColor.a = 1;
+
 			forceClear = true;
 
 		} else if ( background.isNode === true ) {
@@ -47,7 +48,6 @@ class Background extends DataMap {
 			const backgroundNode = background;
 
 			_clearColor.copy( renderer._clearColor );
-			_clearAlpha = renderer._clearAlpha;
 
 			let backgroundMesh = this.backgroundMesh;
 
@@ -105,14 +105,14 @@ class Background extends DataMap {
 
 		if ( renderer.autoClear === true || forceClear === true ) {
 
-			_clearColor.multiplyScalar( _clearAlpha );
+			_clearColor.multiplyScalar( _clearColor.a );
 
 			const clearColorValue = renderContext.clearColorValue;
 
 			clearColorValue.r = _clearColor.r;
 			clearColorValue.g = _clearColor.g;
 			clearColorValue.b = _clearColor.b;
-			clearColorValue.a = _clearAlpha;
+			clearColorValue.a = _clearColor.a;
 
 			renderContext.depthClearValue = renderer._clearDepth;
 			renderContext.stencilClearValue = renderer._clearStencil;

examples/jsm/renderers/common/Color4.js

@@ -0,0 +1,37 @@
+import { Color } from 'three';
+
+class Color4 extends Color {
+
+	constructor( r, g, b, a = 1 ) {
+
+		super( r, g, b );
+
+		this.a = a;
+
+	}
+
+	set( r, g, b, a = 1 ) {
+
+		this.a = a;
+
+		return super.set( r, g, b );
+
+	}
+
+	copy( color ) {
+
+		if ( color.a !== undefined ) this.a = color.a;
+
+		return super.copy( color );
+
+	}
+
+	clone() {
+
+		return new this.constructor( this.r, this.g, this.b, this.a );
+
+	}
+
+}
+
+export default Color4;

examples/jsm/renderers/common/Renderer.js

@@ -10,7 +10,8 @@ import RenderContexts from './RenderContexts.js';
 import Textures from './Textures.js';
 import Background from './Background.js';
 import Nodes from './nodes/Nodes.js';
-import { Scene, Frustum, Matrix4, Vector2, Vector3, Vector4, Color, DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoToneMapping } from 'three';
+import Color4 from './Color4.js';
+import { Scene, Frustum, Matrix4, Vector2, Vector3, Vector4, DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoToneMapping } from 'three';
 
 const _scene = new Scene();
 const _drawingBufferSize = new Vector2();
@@ -77,8 +78,7 @@ class Renderer {
 		this._opaqueSort = null;
 		this._transparentSort = null;
 
-		this._clearAlpha = 1;
-		this._clearColor = new Color( 0x000000 );
+		this._clearColor = new Color4( 0x000000 );
 		this._clearDepth = 1;
 		this._clearStencil = 0;
 
@@ -536,20 +536,19 @@ class Renderer {
 
 	setClearColor( color, alpha = 1 ) {
 
-		this._clearColor.set( color );
-		this._clearAlpha = alpha;
+		this._clearColor.set( color.r, color.g, color.b, alpha );
 
 	}
 
 	getClearAlpha() {
 
-		return this._clearAlpha;
+		return this._clearColor.a;
 
 	}
 
 	setClearAlpha( alpha ) {
 
-		this._clearAlpha = alpha;
+		this._clearColor.a = alpha;
 
 	}