WebGLBackend: Fix `clear()`. (#30485)

* WebGLBackend: Fix `clear()`.

* Fix typo.

src/renderers/common/Renderer.js

@@ -1917,7 +1917,17 @@ class Renderer {
 			renderContext.depth = renderTarget.depthBuffer;
 			renderContext.stencil = renderTarget.stencilBuffer;
 			// #30329
-			renderContext.clearColorValue = this._clearColor;
+			renderContext.clearColorValue = this.backend.getClearColor();
+
+			// premultiply alpha
+
+			if ( this.backend.isWebGLBackend === true || this.alpha === true ) {
+
+				renderContext.clearColorValue.r *= renderContext.clearColorValue.a;
+				renderContext.clearColorValue.g *= renderContext.clearColorValue.a;
+				renderContext.clearColorValue.b *= renderContext.clearColorValue.a;
+
+			}
 
 		}
 

src/renderers/webgl-fallback/WebGLBackend.js

@@ -717,7 +717,7 @@ class WebGLBackend extends Backend {
 	 */
 	clear( color, depth, stencil, descriptor = null, setFrameBuffer = true ) {
 
-		const { gl } = this;
+		const { gl, renderer } = this;
 
 		if ( descriptor === null ) {
 
@@ -764,6 +764,9 @@ class WebGLBackend extends Backend {
 
 			}
 
+			const clearDepth = renderer.getClearDepth();
+			const clearStencil = renderer.getClearStencil();
+
 			if ( depth ) this.state.setDepthMask( true );
 
 			if ( descriptor.textures === null ) {
@@ -787,15 +790,15 @@ class WebGLBackend extends Backend {
 
 				if ( depth && stencil ) {
 
-					gl.clearBufferfi( gl.DEPTH_STENCIL, 0, 1, 0 );
+					gl.clearBufferfi( gl.DEPTH_STENCIL, 0, clearDepth, clearStencil );
 
 				} else if ( depth ) {
 
-					gl.clearBufferfv( gl.DEPTH, 0, [ 1.0 ] );
+					gl.clearBufferfv( gl.DEPTH, 0, [ clearDepth ] );
 
 				} else if ( stencil ) {
 
-					gl.clearBufferiv( gl.STENCIL, 0, [ 0 ] );
+					gl.clearBufferiv( gl.STENCIL, 0, [ clearStencil ] );
 
 				}