galacean · GuoLei1990 · May 9, 2025 · Apr 29, 2025 · May 8, 2025 · May 9, 2025
diff --git a/packages/core/src/Background.ts b/packages/core/src/Background.ts
@@ -10,6 +10,9 @@ import { Texture2D } from "./texture";
  * Background of scene.
  */
 export class Background {
+  /** @internal */
+  static _premultiplySolidColor = new Color();
+
   /**
    * Background mode.
    * @defaultValue `BackgroundMode.SolidColor`
@@ -31,9 +34,6 @@ export class Background {
   /** @internal */
   _material: Material;
 
-  /** @internal */
-  _linearSolidColor = new Color();
-
   private _solidColor = new Color(0.25, 0.25, 0.25, 1.0);
   private _texture: Texture2D = null;
 
@@ -105,12 +105,6 @@ export class Background {
   constructor(private _engine: Engine) {
     this._initMesh(_engine);
     this._initMaterial(_engine);
-
-    this._solidColor.toLinear(this._linearSolidColor);
-    // @ts-ignore
-    this.solidColor._onValueChanged = () => {
-      this.solidColor.toLinear(this._linearSolidColor);
-    };
   }
 
   /**

diff --git a/packages/core/src/ComponentsDependencies.ts b/packages/core/src/ComponentsDependencies.ts
@@ -2,7 +2,6 @@ import { Component } from "./Component";
 import { Entity } from "./Entity";
 
 type ComponentConstructor = new (entity: Entity) => Component;
-
 /**
  * @internal
  * Used for component dependency registration.

diff --git a/packages/core/src/RenderPipeline/BasicRenderPipeline.ts b/packages/core/src/RenderPipeline/BasicRenderPipeline.ts
@@ -222,9 +222,13 @@ export class BasicRenderPipeline {
 
     context.setRenderTarget(colorTarget, colorViewport, mipLevel, cubeFace);
 
-    // If color target is null, hardware will not convert linear color space to sRGB
-    const color = colorTarget ? background._linearSolidColor : background.solidColor;
-    finalClearFlags !== CameraClearFlags.None && rhi.clearRenderTarget(engine, finalClearFlags, color);
+    // Clear color
+    const premultiplyColor = background.solidColor.toLinear(Background._premultiplySolidColor);
+
+    const alpha = premultiplyColor.a;
+    premultiplyColor.set(premultiplyColor.r * alpha, premultiplyColor.g * alpha, premultiplyColor.b * alpha, alpha);
+
+    finalClearFlags !== CameraClearFlags.None && rhi.clearRenderTarget(engine, finalClearFlags, premultiplyColor);
 
     if (internalColorTarget) {
       // Force clear internal color target depth and stencil buffer, because it already missed due to post process, HDR, sRGB covert, etc.

diff --git a/packages/core/src/postProcess/shaders/FXAA/FXAA3_11.glsl b/packages/core/src/postProcess/shaders/FXAA/FXAA3_11.glsl
@@ -7,6 +7,7 @@
 //  * Deleted the useless parameters in 'FxaaPixelShader' 
 //  * Webgl does not compile the double underline, so we remove the double underline for macros
 //  * Changed the 'FXAA_GREEN_AS_LUMA == 0' code-path to compute luminance since we don't precompute luminance into the alpha channel
+//  * Change the alpha value of the `ret` finally returned by the function from brightness to transparency when `FXAA_DISCARD == 1` code path
 //----------------------------------------------------------------------------------
 
 //----------------------------------------------------------------------------------
@@ -1018,14 +1019,11 @@ FxaaFloat4 FxaaPixelShader(
     if(!horzSpan) posM.x += pixelOffsetSubpix * lengthSign;
     if( horzSpan) posM.y += pixelOffsetSubpix * lengthSign;
 
-    FxaaFloat4 ret;
     #if (FXAA_DISCARD == 1)
-        ret = FxaaTexTop(tex, posM);
+        return FxaaTexTop(tex, posM);
     #else
-        ret = FxaaFloat4(FxaaTexTop(tex, posM).xyz, lumaM);
+        return FxaaTexTop(tex, posM);
     #endif
-
-    return ret;
 }
 /*==========================================================================*/
 #endif
diff --git a/packages/core/src/postProcess/shaders/FinalAntiAliasing.fs.glsl b/packages/core/src/postProcess/shaders/FinalAntiAliasing.fs.glsl
@@ -18,23 +18,23 @@ varying vec2 v_uv;
 uniform sampler2D renderer_BlitTexture;
 uniform vec4 renderer_texelSize;    // x: 1/width, y: 1/height, z: width, w: height
 
-vec3 applyFXAA(vec3 color, vec2 positionNDC, vec4 sourceSize, sampler2D blitTexture)
+vec4 applyFXAA(vec4 color, vec2 positionNDC, vec4 sourceSize, sampler2D blitTexture)
 {
     return FxaaPixelShader(
     positionNDC,
-    FxaaFloat4(color, 0),
+    color,
     blitTexture,
     sourceSize.xy,
     FXAA_SUBPIXEL_BLEND_AMOUNT,
     FXAA_RELATIVE_CONTRAST_THRESHOLD,
     FXAA_ABSOLUTE_CONTRAST_THRESHOLD
-    ).rgb;
+    );
 }
 
 void main(){
 	mediump vec4 color = texture2D(renderer_BlitTexture, v_uv);
 
-    color.rgb = applyFXAA(color.rgb, v_uv, renderer_texelSize, renderer_BlitTexture);
+    color = applyFXAA(color, v_uv, renderer_texelSize, renderer_BlitTexture);
 
     // We have convert the color to sRGB space in sRGB pass
     // So we need to convert it back to linear space when output to render target.

diff --git a/packages/core/src/postProcess/shaders/FinalSRGB.fs.glsl b/packages/core/src/postProcess/shaders/FinalSRGB.fs.glsl
@@ -5,5 +5,13 @@ uniform sampler2D renderer_BlitTexture;
 void main(){
 	mediump vec4 color = texture2DSRGB(renderer_BlitTexture, v_uv);
 
-    gl_FragColor = linearToSRGB(color);    
-}
+    // This is final output, maybe has alpha
+    // If we use premultiplied color to convert to sRGB. Since we ignored the background color, the greater the transparency, the greater the final composite color
+    // But the actual transparent canvas can be composited with any color of the browser background
+
+    // So we assume non-transparent SRGB conversion. Then use the Alpha value and the background canvas to do SRGB blending 
+    // Although it is non-linear blending, it is more scientific
+    color.rgb = color.rgb / color.a;
+    color = linearToSRGB(color);
+    gl_FragColor = vec4(color.rgb * color.a, color.a);
+}