galacean · GuoLei1990 · Apr 9, 2025 · Mar 18, 2025 · Mar 19, 2025 · Mar 19, 2025
diff --git a/e2e/case/animator-blendShape.ts b/e2e/case/animator-blendShape.ts
@@ -39,11 +39,10 @@
       rootEntity.addChild(defaultSceneRoot);
       const animator = defaultSceneRoot.getComponent(Animator);
       const skinMeshRenderer = defaultSceneRoot.getComponent(SkinnedMeshRenderer);
-
       skinMeshRenderer.blendShapeWeights[0] = 1.0;
       animator.play("TheWave");
-      updateForE2E(engine);
 
+      updateForE2E(engine);
       initScreenshot(engine, camera);
     });
 });
diff --git a/e2e/case/camera-opaque-texture.ts b/e2e/case/camera-opaque-texture.ts
@@ -95,7 +95,6 @@ const renderOpaqueFS = `
 
     void main() {
         vec4 baseColor = texture2D(camera_OpaqueTexture, v_uv);
-        baseColor = gammaToLinear(baseColor);
 
         gl_FragColor = baseColor;
 
@@ -105,7 +104,7 @@ const renderOpaqueFS = `
 
         #include <FogFragment>
 
-        gl_FragColor = linearToGamma(gl_FragColor);
+        gl_FragColor = outputSRGBCorrection(gl_FragColor);
     }`;
 
 Shader.create("RenderOpaqueTexture", renderOpaqueVS, renderOpaqueFS);
diff --git a/e2e/case/material-blinn-phong.ts b/e2e/case/material-blinn-phong.ts
@@ -44,7 +44,10 @@
       },
       {
         type: AssetType.Texture2D,
-        url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*H7nMRY2SuWcAAAAAAAAAAAAAARQnAQ"
+        url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*H7nMRY2SuWcAAAAAAAAAAAAAARQnAQ",
+        params: {
+          isSRGBColorSpace: false
+        }
       },
       {
         type: AssetType.GLTF,

diff --git a/e2e/case/material-shaderReplacement.ts b/e2e/case/material-shaderReplacement.ts
@@ -150,7 +150,7 @@ function initShader() {
 
   void main() {
     vec4 textureColor = texture2D(u_UVCheckTexture, v_uv);
-    gl_FragColor = textureColor;
+    gl_FragColor = outputSRGBCorrection(textureColor);
   }
   `;
 

diff --git a/e2e/case/particleRenderer-dream.ts b/e2e/case/particleRenderer-dream.ts
@@ -18,15 +18,13 @@
   ParticleRenderer,
   Texture2D,
   Vector3,
-  WebGLEngine,
-  WebGLMode
+  WebGLEngine
 } from "@galacean/engine";
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 // Create engine
 WebGLEngine.create({
-  canvas: "canvas",
-  graphicDeviceOptions: { webGLMode: WebGLMode.WebGL1 }
+  canvas: "canvas"
 }).then((engine) => {
   Logger.enable();
   engine.canvas.resizeByClientSize();

diff --git a/e2e/case/project-loader.ts b/e2e/case/project-loader.ts
@@ -4,7 +4,7 @@
  */
 import { Logger, WebGLEngine, AssetType, Camera } from "@galacean/engine";
 import { ShaderLab } from "@galacean/engine-shaderlab";
-import { registerIncludes } from "@galacean/engine-toolkit";
+import { registerIncludes } from "@galacean/engine-shader-shaderlab";
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 // Create ShaderLab
@@ -17,13 +17,13 @@
   engine.resourceManager
     .load({
       type: AssetType.Project,
-      url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*o15SSopTBh0AAAAAAAAAAAAADkp5AQ/project.json"
+      url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*CbucQ5pF7wEAAAAAAAAAAAAAekp5AQ/project.json"
     })
     .then(() => {
-      updateForE2E(engine);
-
       const cameraEntity = engine.sceneManager.activeScene.findEntityByName("Camera");
       const camera = cameraEntity.getComponent(Camera);
+
+      updateForE2E(engine);
       initScreenshot(engine, camera);
     });
 });
diff --git a/e2e/case/spriteMask-customStencil.ts b/e2e/case/spriteMask-customStencil.ts
@@ -44,7 +44,10 @@
       {
         // Mask texture
         url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*qyhFT5Un5AgAAAAAAAAAAAAAARQnAQ",
-        type: AssetType.Texture2D
+        type: AssetType.Texture2D,
+        params: {
+          isSRGBColorSpace: false
+        }
       }
     ])
     .then((textures: Texture2D[]) => {

diff --git a/e2e/case/texture-sRGB-KTX2.ts b/e2e/case/texture-sRGB-KTX2.ts
@@ -0,0 +1,46 @@
+/**
+ * @title sRGB + KTX2
+ * @category Texture
+ */
+import {
+  AssetType,
+  Camera,
+  MeshRenderer,
+  PrimitiveMesh,
+  Texture2D,
+  UnlitMaterial,
+  Vector3,
+  WebGLEngine
+} from "@galacean/engine";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
+  engine.canvas.resizeByClientSize(2);
+  const scene = engine.sceneManager.activeScene;
+  const rootEntity = scene.createRootEntity();
+
+  // camera
+  const cameraEntity = rootEntity.createChild("camera_node");
+  cameraEntity.transform.position = new Vector3(0, 0, 2);
+  const camera = cameraEntity.addComponent(Camera);
+
+  engine.resourceManager
+    .load<Texture2D>({
+      url: "https://mdn.alipayobjects.com/oasis_be/afts/img/A*XmHPTYGREAIAAAAAAAAAAAAAekp5AQ/original/original.ktx2",
+      type: AssetType.KTX2
+    })
+    .then((texture: Texture2D) => {
+      const material = new UnlitMaterial(engine);
+      material.baseTexture = texture;
+
+      engine.run();
+      const entity = rootEntity.createChild("mesh");
+      entity.transform.setRotation(0, 90, 0);
+      const meshRenderer = entity.addComponent(MeshRenderer);
+      meshRenderer.mesh = PrimitiveMesh.createSubdivisionSurfaceSphere(engine);
+      meshRenderer.setMaterial(material);
+
+      updateForE2E(engine);
+      initScreenshot(engine, camera);
+    });
+});
diff --git a/e2e/config.ts b/e2e/config.ts
@@ -136,6 +136,13 @@
       threshold: 0.2
     }
   },
+  Texture: {
+    sRGB: {
+      category: "Texture",
+      caseFileName: "texture-sRGB-KTX2",
+      threshold: 0.2
+    }
+  },
   Shadow: {
     basic: {
       category: "Shadow",

diff --git a/e2e/fixtures/originImage/Advance_multi-camera-no-clear.jpg b/e2e/fixtures/originImage/Advance_multi-camera-no-clear.jpg
diff --git a/e2e/fixtures/originImage/Advance_project-loader.jpg b/e2e/fixtures/originImage/Advance_project-loader.jpg
diff --git a/e2e/fixtures/originImage/Animator_animator-blendShape-quantization.jpg b/e2e/fixtures/originImage/Animator_animator-blendShape-quantization.jpg
diff --git a/e2e/fixtures/originImage/Animator_animator-blendShape.jpg b/e2e/fixtures/originImage/Animator_animator-blendShape.jpg
diff --git a/e2e/fixtures/originImage/Material_material-blendMode.jpg b/e2e/fixtures/originImage/Material_material-blendMode.jpg
diff --git a/e2e/fixtures/originImage/Texture_texture-sRGB-KTX2.jpg b/e2e/fixtures/originImage/Texture_texture-sRGB-KTX2.jpg
diff --git a/e2e/package.json b/e2e/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@galacean/engine-toolkit": "^1.3.9",
     "@galacean/engine-shaderlab": "workspace:*",
+    "@galacean/engine-shader-shaderlab": "workspace:*",
     "@galacean/engine": "workspace:*",
     "@galacean/engine-core": "workspace:*",
     "@galacean/engine-loader": "workspace:*",

diff --git a/packages/core/src/Background.ts b/packages/core/src/Background.ts
@@ -17,13 +17,6 @@
    */
   mode: BackgroundMode = BackgroundMode.SolidColor;
 
-  /**
-   * Background solid color.
-   * @defaultValue `new Color(0.25, 0.25, 0.25, 1.0)`
-   * @remarks When `mode` is `BackgroundMode.SolidColor`, the property will take effects.
-   */
-  solidColor: Color = new Color(0.25, 0.25, 0.25, 1.0);
-
   /**
    * Background sky.
    * @remarks When `mode` is `BackgroundMode.Sky`, the property will take effects.
@@ -38,8 +31,27 @@
   /** @internal */
   _material: Material;
 
+  /** @internal */
+  _linearSolidColor = new Color();
+
+  private _solidColor = new Color(0.25, 0.25, 0.25, 1.0);
   private _texture: Texture2D = null;
 
+  /**
+   * Background solid color.
+   * @defaultValue `new Color(0.25, 0.25, 0.25, 1.0)`
+   * @remarks When `mode` is `BackgroundMode.SolidColor`, the property will take effects.
+   */
+  get solidColor(): Color {
+    return this._solidColor;
+  }
+
+  set solidColor(value: Color) {
+    if (value !== this._solidColor) {
+      this._solidColor.copyFrom(value);
+    }
+  }
+
   /**
    * Background texture.
    * @remarks When `mode` is `BackgroundMode.Texture`, the property will take effects.
@@ -83,7 +95,6 @@
     this._mesh = null;
     this._material._addReferCount(-1);
     this._material = null;
-    this.solidColor = null;
     this.sky.destroy();
   }
 
@@ -94,6 +105,12 @@
   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/BasicResources.ts b/packages/core/src/BasicResources.ts
@@ -107,6 +107,7 @@ export class BasicResources {
   readonly blitMesh: ModelMesh;
   readonly flipYBlitMesh: ModelMesh;
   readonly blitMaterial: Material;
+  readonly blitScreenMaterial: Material;
 
   readonly whiteTexture2D: Texture2D;
   readonly whiteTextureCube: TextureCube;
@@ -141,31 +142,52 @@ export class BasicResources {
     blitMaterial.renderState.depthState.enabled = false;
     blitMaterial.renderState.depthState.writeEnabled = false;
 
+    const blitScreenMaterial = new Material(engine, Shader.find("blit-screen"));
+    blitScreenMaterial._addReferCount(1);
+    blitScreenMaterial.renderState.depthState.enabled = false;
+    blitScreenMaterial.renderState.depthState.writeEnabled = false;
+
+    this.blitMaterial = blitMaterial;
+    this.blitScreenMaterial = blitScreenMaterial;
+
     this.blitMesh = this._createBlitMesh(engine, vertices);
     this.flipYBlitMesh = this._createBlitMesh(engine, flipYVertices);
-    this.blitMaterial = blitMaterial;
 
     // Create white and magenta textures
     const whitePixel = new Uint8Array([255, 255, 255, 255]);
 
-    this.whiteTexture2D = this._create1x1Texture(engine, TextureType.Texture2D, TextureFormat.R8G8B8A8, whitePixel);
-    this.whiteTextureCube = this._create1x1Texture(engine, TextureType.TextureCube, TextureFormat.R8G8B8A8, whitePixel);
+    this.whiteTexture2D = this._create1x1Texture(
+      engine,
+      TextureType.Texture2D,
+      TextureFormat.R8G8B8A8,
+      whitePixel,
+      true
+    );
+    this.whiteTextureCube = this._create1x1Texture(
+      engine,
+      TextureType.TextureCube,
+      TextureFormat.R8G8B8A8,
+      whitePixel,
+      true
+    );
 
     const isWebGL2 = engine._hardwareRenderer.isWebGL2;
     if (isWebGL2) {
       this.whiteTexture2DArray = this._create1x1Texture(
         engine,
         TextureType.Texture2DArray,
         TextureFormat.R8G8B8A8,
-        whitePixel
+        whitePixel,
+        true
       );
 
       const whitePixel32 = new Uint32Array([255, 255, 255, 255]);
       this.uintWhiteTexture2D = this._create1x1Texture(
         engine,
         TextureType.Texture2D,
         TextureFormat.R32G32B32A32_UInt,
-        whitePixel32
+        whitePixel32,
+        false
       );
     }
 
@@ -212,23 +234,24 @@ export class BasicResources {
     engine: Engine,
     type: TextureType,
     format: TextureFormat,
-    pixel: Uint8Array | Uint32Array
+    pixel: Uint8Array | Uint32Array,
+    isSRGBColorSpace: boolean
   ): T {
     let texture: Texture;
 
     switch (type) {
       case TextureType.Texture2D:
-        const texture2D = new Texture2D(engine, 1, 1, format, false);
+        const texture2D = new Texture2D(engine, 1, 1, format, false, isSRGBColorSpace);
         texture2D.setPixelBuffer(pixel);
         texture = texture2D;
         break;
       case TextureType.Texture2DArray:
-        const texture2DArray = new Texture2DArray(engine, 1, 1, 1, format, false);
+        const texture2DArray = new Texture2DArray(engine, 1, 1, 1, format, false, isSRGBColorSpace);
         texture2DArray.setPixelBuffer(0, pixel);
         texture = texture2DArray;
         break;
       case TextureType.TextureCube:
-        const textureCube = new TextureCube(engine, 1, format, false);
+        const textureCube = new TextureCube(engine, 1, format, false, isSRGBColorSpace);
         for (let i = 0; i < 6; i++) {
           textureCube.setPixelBuffer(TextureCubeFace.PositiveX + i, pixel);
         }

diff --git a/packages/core/src/Camera.ts b/packages/core/src/Camera.ts
@@ -646,7 +646,7 @@ export class Camera extends Component {
 
     // union scene and camera macro.
     ShaderMacroCollection.unionCollection(
-      this.scene._globalShaderMacro,
+      this.scene.shaderData._macroCollection,
       this.shaderData._macroCollection,
       this._globalShaderMacro
     );