@galacean/engine-rhi-webgl 1.4.14 → 1.5.0-alpha.0

package/dist/main.js

@@ -7,9 +7,7 @@ var engineMath = require('@galacean/engine-math');
 
 /**
  * Smoothing plug-in.
- * */ /**
- * @deprecated
- */ var GLCompressedTextureInternalFormat = /*#__PURE__*/ function(GLCompressedTextureInternalFormat) {
+ * */ var GLCompressedTextureInternalFormat = /*#__PURE__*/ function(GLCompressedTextureInternalFormat) {
     // astc
     GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_4X4_KHR"] = 37808] = "RGBA_ASTC_4X4_KHR";
     GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_5X4_KHR"] = 37809] = "RGBA_ASTC_5X4_KHR";
@@ -62,6 +60,11 @@ var engineMath = require('@galacean/engine-math');
     GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_S3TC_DXT1_EXT"] = 33777] = "RGBA_S3TC_DXT1_EXT";
     GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_S3TC_DXT3_EXT"] = 33778] = "RGBA_S3TC_DXT3_EXT";
     GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_S3TC_DXT5_EXT"] = 33779] = "RGBA_S3TC_DXT5_EXT";
+    // s3tc sRGB
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB_S3TC_DXT1_EXT"] = 35916] = "SRGB_S3TC_DXT1_EXT";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB_ALPHA_S3TC_DXT1_EXT"] = 35917] = "SRGB_ALPHA_S3TC_DXT1_EXT";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB_ALPHA_S3TC_DXT3_EXT"] = 35918] = "SRGB_ALPHA_S3TC_DXT3_EXT";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB_ALPHA_S3TC_DXT5_EXT"] = 35919] = "SRGB_ALPHA_S3TC_DXT5_EXT";
     // bptc
     GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_BPTC_UNORM_EXT"] = 36492] = "RGBA_BPTC_UNORM_EXT";
     GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB_ALPHA_BPTC_UNORM_EXT"] = 36493] = "SRGB_ALPHA_BPTC_UNORM_EXT";
@@ -351,7 +354,7 @@ var GLBuffer = /*#__PURE__*/ function() {
         var cap = this.capabilityList;
         var isWebGL2 = this.rhi.isWebGL2;
         var requireExtension = this.rhi.requireExtension.bind(this.rhi);
-        var shaderVertexID = engineCore.GLCapabilityType.shaderVertexID, standardDerivatives = engineCore.GLCapabilityType.standardDerivatives, shaderTextureLod = engineCore.GLCapabilityType.shaderTextureLod, elementIndexUint = engineCore.GLCapabilityType.elementIndexUint, depthTexture = engineCore.GLCapabilityType.depthTexture, vertexArrayObject = engineCore.GLCapabilityType.vertexArrayObject, instancedArrays = engineCore.GLCapabilityType.instancedArrays, multipleSample = engineCore.GLCapabilityType.multipleSample, drawBuffers = engineCore.GLCapabilityType.drawBuffers, blendMinMax = engineCore.GLCapabilityType.blendMinMax, astc = engineCore.GLCapabilityType.astc, astc_webkit = engineCore.GLCapabilityType.astc_webkit, etc = engineCore.GLCapabilityType.etc, etc_webkit = engineCore.GLCapabilityType.etc_webkit, etc1 = engineCore.GLCapabilityType.etc1, etc1_webkit = engineCore.GLCapabilityType.etc1_webkit, pvrtc = engineCore.GLCapabilityType.pvrtc, pvrtc_webkit = engineCore.GLCapabilityType.pvrtc_webkit, s3tc = engineCore.GLCapabilityType.s3tc, s3tc_webkit = engineCore.GLCapabilityType.s3tc_webkit, bptc = engineCore.GLCapabilityType.bptc, textureFloat = engineCore.GLCapabilityType.textureFloat, textureHalfFloat = engineCore.GLCapabilityType.textureHalfFloat, textureFloatLinear = engineCore.GLCapabilityType.textureFloatLinear, textureHalfFloatLinear = engineCore.GLCapabilityType.textureHalfFloatLinear, WEBGL_colorBufferFloat = engineCore.GLCapabilityType.WEBGL_colorBufferFloat, colorBufferFloat = engineCore.GLCapabilityType.colorBufferFloat, colorBufferHalfFloat = engineCore.GLCapabilityType.colorBufferHalfFloat, textureFilterAnisotropic = engineCore.GLCapabilityType.textureFilterAnisotropic, fragDepth = engineCore.GLCapabilityType.fragDepth;
+        var shaderVertexID = engineCore.GLCapabilityType.shaderVertexID, standardDerivatives = engineCore.GLCapabilityType.standardDerivatives, shaderTextureLod = engineCore.GLCapabilityType.shaderTextureLod, elementIndexUint = engineCore.GLCapabilityType.elementIndexUint, depthTexture = engineCore.GLCapabilityType.depthTexture, vertexArrayObject = engineCore.GLCapabilityType.vertexArrayObject, instancedArrays = engineCore.GLCapabilityType.instancedArrays, multipleSample = engineCore.GLCapabilityType.multipleSample, drawBuffers = engineCore.GLCapabilityType.drawBuffers, blendMinMax = engineCore.GLCapabilityType.blendMinMax, astc = engineCore.GLCapabilityType.astc, astc_webkit = engineCore.GLCapabilityType.astc_webkit, etc = engineCore.GLCapabilityType.etc, etc_webkit = engineCore.GLCapabilityType.etc_webkit, etc1 = engineCore.GLCapabilityType.etc1, etc1_webkit = engineCore.GLCapabilityType.etc1_webkit, pvrtc = engineCore.GLCapabilityType.pvrtc, pvrtc_webkit = engineCore.GLCapabilityType.pvrtc_webkit, s3tc = engineCore.GLCapabilityType.s3tc, s3tc_webkit = engineCore.GLCapabilityType.s3tc_webkit, bptc = engineCore.GLCapabilityType.bptc, s3tc_srgb = engineCore.GLCapabilityType.s3tc_srgb, textureFloat = engineCore.GLCapabilityType.textureFloat, textureHalfFloat = engineCore.GLCapabilityType.textureHalfFloat, textureFloatLinear = engineCore.GLCapabilityType.textureFloatLinear, textureHalfFloatLinear = engineCore.GLCapabilityType.textureHalfFloatLinear, WEBGL_colorBufferFloat = engineCore.GLCapabilityType.WEBGL_colorBufferFloat, colorBufferFloat = engineCore.GLCapabilityType.colorBufferFloat, colorBufferHalfFloat = engineCore.GLCapabilityType.colorBufferHalfFloat, textureFilterAnisotropic = engineCore.GLCapabilityType.textureFilterAnisotropic, fragDepth = engineCore.GLCapabilityType.fragDepth, sRGB = engineCore.GLCapabilityType.sRGB;
         cap.set(shaderVertexID, isWebGL2);
         cap.set(standardDerivatives, isWebGL2 || !!requireExtension(standardDerivatives));
         cap.set(shaderTextureLod, isWebGL2 || !!requireExtension(shaderTextureLod));
@@ -375,7 +378,9 @@ var GLBuffer = /*#__PURE__*/ function() {
         cap.set(etc1, !!(requireExtension(etc1) || requireExtension(etc1_webkit)));
         cap.set(pvrtc, !!(requireExtension(pvrtc) || requireExtension(pvrtc_webkit)));
         cap.set(s3tc, !!(requireExtension(s3tc) || requireExtension(s3tc_webkit)));
+        cap.set(s3tc_srgb, !!requireExtension(s3tc_srgb));
         cap.set(bptc, !!requireExtension(bptc));
+        cap.set(sRGB, isWebGL2 || !!requireExtension(sRGB));
     };
     /**
    * If there are extensions that can supplement this ability, smooth out the difference.
@@ -402,7 +407,7 @@ var GLBuffer = /*#__PURE__*/ function() {
         }
     };
     _proto._compatibleAllInterface = function _compatibleAllInterface() {
-        var depthTexture = engineCore.GLCapabilityType.depthTexture, vertexArrayObject = engineCore.GLCapabilityType.vertexArrayObject, instancedArrays = engineCore.GLCapabilityType.instancedArrays, drawBuffers = engineCore.GLCapabilityType.drawBuffers, textureFilterAnisotropic = engineCore.GLCapabilityType.textureFilterAnisotropic, textureHalfFloat = engineCore.GLCapabilityType.textureHalfFloat, colorBufferHalfFloat = engineCore.GLCapabilityType.colorBufferHalfFloat, WEBGL_colorBufferFloat = engineCore.GLCapabilityType.WEBGL_colorBufferFloat, blendMinMax = engineCore.GLCapabilityType.blendMinMax;
+        var depthTexture = engineCore.GLCapabilityType.depthTexture, vertexArrayObject = engineCore.GLCapabilityType.vertexArrayObject, instancedArrays = engineCore.GLCapabilityType.instancedArrays, drawBuffers = engineCore.GLCapabilityType.drawBuffers, textureFilterAnisotropic = engineCore.GLCapabilityType.textureFilterAnisotropic, textureHalfFloat = engineCore.GLCapabilityType.textureHalfFloat, colorBufferHalfFloat = engineCore.GLCapabilityType.colorBufferHalfFloat, WEBGL_colorBufferFloat = engineCore.GLCapabilityType.WEBGL_colorBufferFloat, blendMinMax = engineCore.GLCapabilityType.blendMinMax, sRGB = engineCore.GLCapabilityType.sRGB;
         var isWebGL2 = this.rhi.isWebGL2;
         if (!isWebGL2) {
             this._compatibleInterface(blendMinMax, {
@@ -446,6 +451,10 @@ var GLBuffer = /*#__PURE__*/ function() {
             this._compatibleInterface(WEBGL_colorBufferFloat, {
                 RGBA32F: "RBGA32F_EXT"
             });
+            this._compatibleInterface(sRGB, {
+                SRGB8: "SRGB_EXT",
+                SRGB8_ALPHA8: "SRGB_ALPHA_EXT"
+            });
         }
         this._compatibleInterface(textureFilterAnisotropic, {
             TEXTURE_MAX_ANISOTROPY_EXT: "TEXTURE_MAX_ANISOTROPY_EXT"
@@ -756,8 +765,15 @@ var GLBuffer = /*#__PURE__*/ function() {
     /**
    * Generate multi-level textures based on the 0th level data.
    */ _proto.generateMipmaps = function generateMipmaps() {
+        var texture = this._texture;
+        //@ts-ignore
+        var mipmap = texture._mipmap;
+        if (!engineCore.TextureUtils.supportGenerateMipmaps(texture.format, mipmap, texture.isSRGBColorSpace, this._isWebGL2)) {
+            engineCore.Logger.warn("Auto-generating mipmaps for sRGB textures is only supported in [WebGL2 + R8G8B8A8], you must generate mipmaps manually.");
+            return;
+        }
         // @todo (1x1).generateMipmap() will flash back in uc.
-        if (this._texture.width !== 1 || this._texture.height !== 1) {
+        if (texture.width !== 1 || texture.height !== 1) {
             this._bind();
             this._gl.generateMipmap(this._target);
         }
@@ -808,7 +824,7 @@ var GLBuffer = /*#__PURE__*/ function() {
    * @param mipLevel - Set mip level the data want to get from
    */ _proto._getPixelBuffer = function _getPixelBuffer(face, x, y, width, height, mipLevel, out) {
         var gl = this._gl;
-        var _this__formatDetail = this._formatDetail, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType;
+        var _this__formatDetail = this._formatDetail, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType, readFormat = _this__formatDetail.readFormat, alignment = _this__formatDetail.alignment;
         gl.bindFramebuffer(gl.FRAMEBUFFER, this._getReadFrameBuffer());
         if (mipLevel > 0 && !this._isWebGL2) {
             mipLevel = 0;
@@ -819,15 +835,44 @@ var GLBuffer = /*#__PURE__*/ function() {
         } else {
             gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._glTexture, mipLevel);
         }
-        gl.readPixels(x, y, width, height, baseFormat, dataType, out);
+        gl.pixelStorei(gl.PACK_ALIGNMENT, alignment);
+        // Base format is different from read format in webgl1.0 with sRGB
+        gl.readPixels(x, y, width, height, readFormat != null ? readFormat : baseFormat, dataType, out);
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     };
+    _proto._getReadFrameBuffer = function _getReadFrameBuffer() {
+        var frameBuffer = this._rhi._readFrameBuffer;
+        if (!frameBuffer) {
+            this._rhi._readFrameBuffer = frameBuffer = this._gl.createFramebuffer();
+        }
+        return frameBuffer;
+    };
+    _proto._validate = function _validate(texture, rhi) {
+        var format = texture.format, width = texture.width, height = texture.height;
+        // Validate sRGB format
+        // @ts-ignore
+        var isSRGBColorSpace = texture._isSRGBColorSpace;
+        if (isSRGBColorSpace && !engineCore.TextureUtils.supportSRGB(format)) {
+            engineCore.Logger.warn("Only support sRGB color space in RGB8 or RGBA8 or some compressed texture format");
+            // @ts-ignore
+            texture._isSRGBColorSpace = false;
+        }
+        var isWebGL2 = rhi.isWebGL2;
+        // Validate mipmap
+        // @ts-ignore
+        var mipmap = texture._mipmap;
+        if (mipmap && !engineCore.TextureUtils.supportMipmaps(width, height, isWebGL2)) {
+            engineCore.Logger.warn("Non-power-2 texture is not supported for mipmap in WebGL1, and has automatically downgraded to non-mipmap");
+            /** @ts-ignore */ texture._mipmap = false;
+            /** @ts-ignore */ texture._mipmapCount = texture._getMipmapCount();
+        }
+    };
     _proto._setWrapMode = function _setWrapMode(value, pname) {
         var gl = this._gl;
         var isWebGL2 = this._isWebGL2;
         var target = this._target;
         var _this__texture = this._texture, width = _this__texture.width, height = _this__texture.height;
-        if (!isWebGL2 && value !== engineCore.TextureWrapMode.Clamp && (!GLTexture._isPowerOf2(width) || !GLTexture._isPowerOf2(height))) {
+        if (!isWebGL2 && value !== engineCore.TextureWrapMode.Clamp && (!engineMath.MathUtil.isPowerOf2(width) || !engineMath.MathUtil.isPowerOf2(height))) {
             engineCore.Logger.warn("non-power-2 texture is not supported for REPEAT or MIRRORED_REPEAT in WebGL1,and has automatically downgraded to CLAMP_TO_EDGE");
             value = engineCore.TextureWrapMode.Clamp;
         }
@@ -843,111 +888,134 @@ var GLBuffer = /*#__PURE__*/ function() {
                 break;
         }
     };
-    _proto._getReadFrameBuffer = function _getReadFrameBuffer() {
-        var frameBuffer = this._rhi._readFrameBuffer;
-        if (!frameBuffer) {
-            this._rhi._readFrameBuffer = frameBuffer = this._gl.createFramebuffer();
-        }
-        return frameBuffer;
-    };
-    /** @internal */ GLTexture._isPowerOf2 = function _isPowerOf2(v) {
-        return (v & v - 1) === 0;
-    };
     /**
    * Get more texture info from TextureFormat.
    * @internal
-   */ GLTexture._getFormatDetail = function _getFormatDetail(format, gl, isWebGL2) {
+   */ GLTexture._getFormatDetail = function _getFormatDetail(format, isSRGBColorSpace, gl, isWebGL2) {
         switch(format){
             case engineCore.TextureFormat.R8G8B8:
                 return {
-                    internalFormat: isWebGL2 ? gl.RGB8 : gl.RGB,
-                    baseFormat: gl.RGB,
+                    internalFormat: isSRGBColorSpace ? gl.SRGB8 : isWebGL2 ? gl.RGB8 : gl.RGB,
+                    baseFormat: isSRGBColorSpace ? isWebGL2 ? gl.RGB : gl.SRGB8 : gl.RGB,
+                    readFormat: gl.RGB,
                     dataType: gl.UNSIGNED_BYTE,
-                    isCompressed: false
+                    isCompressed: false,
+                    alignment: 1
                 };
             case engineCore.TextureFormat.R8G8B8A8:
                 return {
-                    internalFormat: isWebGL2 ? gl.RGBA8 : gl.RGBA,
-                    baseFormat: gl.RGBA,
+                    internalFormat: isSRGBColorSpace ? gl.SRGB8_ALPHA8 : isWebGL2 ? gl.RGBA8 : gl.RGBA,
+                    baseFormat: isSRGBColorSpace ? isWebGL2 ? gl.RGBA : gl.SRGB8_ALPHA8 : gl.RGBA,
+                    readFormat: gl.RGBA,
                     dataType: gl.UNSIGNED_BYTE,
-                    isCompressed: false
+                    isCompressed: false,
+                    alignment: 4
                 };
             case engineCore.TextureFormat.R4G4B4A4:
                 return {
                     internalFormat: isWebGL2 ? gl.RGBA4 : gl.RGBA,
                     baseFormat: gl.RGBA,
                     dataType: gl.UNSIGNED_SHORT_4_4_4_4,
-                    isCompressed: false
+                    isCompressed: false,
+                    alignment: 2
                 };
             case engineCore.TextureFormat.R5G5B5A1:
                 return {
                     internalFormat: isWebGL2 ? gl.RGB5_A1 : gl.RGBA,
                     baseFormat: gl.RGBA,
                     dataType: gl.UNSIGNED_SHORT_5_5_5_1,
-                    isCompressed: false
+                    isCompressed: false,
+                    alignment: 2
                 };
             case engineCore.TextureFormat.R5G6B5:
                 return {
                     internalFormat: isWebGL2 ? gl.RGB565 : gl.RGB,
                     baseFormat: gl.RGB,
                     dataType: gl.UNSIGNED_SHORT_5_6_5,
-                    isCompressed: false
+                    isCompressed: false,
+                    alignment: 2
                 };
             case engineCore.TextureFormat.Alpha8:
                 return {
                     internalFormat: gl.ALPHA,
                     baseFormat: gl.ALPHA,
                     dataType: gl.UNSIGNED_BYTE,
-                    isCompressed: false
+                    isCompressed: false,
+                    alignment: 1
                 };
             case engineCore.TextureFormat.LuminanceAlpha:
                 return {
                     internalFormat: gl.LUMINANCE_ALPHA,
                     baseFormat: gl.LUMINANCE_ALPHA,
                     dataType: gl.UNSIGNED_BYTE,
-                    isCompressed: false
-                };
-            case engineCore.TextureFormat.R11G11B10_UFloat:
-                return {
-                    internalFormat: isWebGL2 ? gl.R11F_G11F_B10F : gl.NONE,
-                    baseFormat: gl.RGB,
-                    dataType: gl.FLOAT,
-                    isCompressed: false
+                    isCompressed: false,
+                    alignment: 2
                 };
             case engineCore.TextureFormat.R16G16B16A16:
                 return {
                     internalFormat: isWebGL2 ? gl.RGBA16F : gl.RGBA,
                     baseFormat: gl.RGBA,
                     dataType: gl.HALF_FLOAT,
-                    isCompressed: false
+                    isCompressed: false,
+                    alignment: 8
                 };
             case engineCore.TextureFormat.R32G32B32A32:
                 return {
                     internalFormat: isWebGL2 ? gl.RGBA32F : gl.RGBA,
                     baseFormat: gl.RGBA,
                     dataType: gl.FLOAT,
-                    isCompressed: false
+                    isCompressed: false,
+                    alignment: 8
+                };
+            // Only WebGL2 support
+            case engineCore.TextureFormat.R11G11B10_UFloat:
+                return {
+                    internalFormat: gl.R11F_G11F_B10F,
+                    baseFormat: gl.RGB,
+                    dataType: gl.FLOAT,
+                    isCompressed: false,
+                    alignment: 4
                 };
+            // Only WebGL2 support
             case engineCore.TextureFormat.R32G32B32A32_UInt:
                 return {
-                    internalFormat: isWebGL2 ? gl.RGBA32UI : gl.NONE,
+                    internalFormat: gl.RGBA32UI,
                     baseFormat: gl.RGBA_INTEGER,
                     dataType: gl.UNSIGNED_INT,
-                    isCompressed: false
+                    isCompressed: false,
+                    alignment: 8
+                };
+            // Only WebGL2 support
+            case engineCore.TextureFormat.R8:
+                return {
+                    internalFormat: gl.R8,
+                    baseFormat: gl.RED,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false,
+                    alignment: 1
+                };
+            // Only WebGL2 support
+            case engineCore.TextureFormat.R8G8:
+                return {
+                    internalFormat: gl.RG8,
+                    baseFormat: gl.RG,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false,
+                    alignment: 2
                 };
             case engineCore.TextureFormat.BC1:
                 return {
-                    internalFormat: GLCompressedTextureInternalFormat.RGB_S3TC_DXT1_EXT,
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB_S3TC_DXT1_EXT : GLCompressedTextureInternalFormat.RGB_S3TC_DXT1_EXT,
                     isCompressed: true
                 };
             case engineCore.TextureFormat.BC3:
                 return {
-                    internalFormat: GLCompressedTextureInternalFormat.RGBA_S3TC_DXT5_EXT,
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB_ALPHA_S3TC_DXT5_EXT : GLCompressedTextureInternalFormat.RGBA_S3TC_DXT5_EXT,
                     isCompressed: true
                 };
             case engineCore.TextureFormat.BC7:
                 return {
-                    internalFormat: GLCompressedTextureInternalFormat.RGBA_BPTC_UNORM_EXT,
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB_ALPHA_BPTC_UNORM_EXT : GLCompressedTextureInternalFormat.RGBA_BPTC_UNORM_EXT,
                     isCompressed: true
                 };
             case engineCore.TextureFormat.ETC1_RGB:
@@ -957,7 +1025,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                 };
             case engineCore.TextureFormat.ETC2_RGB:
                 return {
-                    internalFormat: GLCompressedTextureInternalFormat.RGB8_ETC2,
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB8_ETC2 : GLCompressedTextureInternalFormat.RGB8_ETC2,
                     isCompressed: true
                 };
             case engineCore.TextureFormat.ETC2_RGBA5:
@@ -967,7 +1035,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                 };
             case engineCore.TextureFormat.ETC2_RGBA8:
                 return {
-                    internalFormat: GLCompressedTextureInternalFormat.RGBA8_ETC2_EAC,
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB8_ALPHA8_ETC2_EAC : GLCompressedTextureInternalFormat.RGBA8_ETC2_EAC,
                     isCompressed: true
                 };
             case engineCore.TextureFormat.PVRTC_RGB2:
@@ -992,7 +1060,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                 };
             case engineCore.TextureFormat.ASTC_4x4:
                 return {
-                    internalFormat: GLCompressedTextureInternalFormat.RGBA_ASTC_4X4_KHR,
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB8_ALPHA8_ASTC_4X4_KHR : GLCompressedTextureInternalFormat.RGBA_ASTC_4X4_KHR,
                     isCompressed: true
                 };
             case engineCore.TextureFormat.ASTC_5x5:
@@ -1052,6 +1120,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_STENCIL_ATTACHMENT
                 };
+            // Only WebGL2 support
             case engineCore.TextureFormat.Depth24:
                 return {
                     internalFormat: gl.DEPTH_COMPONENT24,
@@ -1060,6 +1129,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_ATTACHMENT
                 };
+            // Only WebGL2 support
             case engineCore.TextureFormat.Depth32:
                 return {
                     internalFormat: gl.DEPTH_COMPONENT32F,
@@ -1068,6 +1138,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_ATTACHMENT
                 };
+            // Only WebGL2 support
             case engineCore.TextureFormat.Depth32Stencil8:
                 return {
                     internalFormat: gl.DEPTH32F_STENCIL8,
@@ -1154,38 +1225,6 @@ var GLBuffer = /*#__PURE__*/ function() {
         }
     };
     /**
-   * Check whether the corresponding texture format is supported.
-   * @internal
-   */ GLTexture._supportTextureFormat = function _supportTextureFormat(format, rhi) {
-        switch(format){
-            case engineCore.TextureFormat.R16G16B16A16:
-                if (!rhi.canIUse(engineCore.GLCapabilityType.textureHalfFloat)) {
-                    return false;
-                }
-                break;
-            case engineCore.TextureFormat.R32G32B32A32:
-                if (!rhi.canIUse(engineCore.GLCapabilityType.textureFloat)) {
-                    return false;
-                }
-                break;
-            case engineCore.TextureFormat.Depth16:
-            case engineCore.TextureFormat.Depth24Stencil8:
-            case engineCore.TextureFormat.Depth:
-            case engineCore.TextureFormat.DepthStencil:
-                if (!rhi.canIUse(engineCore.GLCapabilityType.depthTexture)) {
-                    return false;
-                }
-                break;
-            case engineCore.TextureFormat.R11G11B10_UFloat:
-            case engineCore.TextureFormat.R32G32B32A32_UInt:
-            case engineCore.TextureFormat.Depth24:
-            case engineCore.TextureFormat.Depth32:
-            case engineCore.TextureFormat.Depth32Stencil8:
-                return rhi.isWebGL2;
-        }
-        return true;
-    };
-    /**
    * @internal
    */ GLTexture._supportRenderBufferColorFormat = function _supportRenderBufferColorFormat(format, rhi) {
         var isSupported = true;
@@ -1332,10 +1371,13 @@ var GLBuffer = /*#__PURE__*/ function() {
      * MRT + Cube + [,MSAA]
      * MRT + MSAA
      */ for(var i = 0, n = _colorTextures.length; i < n; i++){
-            var format = _colorTextures[i]._format;
+            var _colorTextures_i = _colorTextures[i], format = _colorTextures_i.format, isSRGBColorSpace = _colorTextures_i.isSRGBColorSpace;
             if (!GLTexture._supportRenderBufferColorFormat(format, rhi)) {
                 throw new Error("TextureFormat is not supported:" + engineCore.TextureFormat[format] + " in RenderTarget");
             }
+            if (isSRGBColorSpace && format === engineCore.TextureFormat.R8G8B8) {
+                throw new Error("If you want to use sRGB color space, only R8G8B8A8 format is supported in RenderTarget");
+            }
         }
         if (!isDepthTexture && !GLTexture._supportRenderBufferDepthFormat(_depth, rhi)) {
             throw new Error("TextureFormat is not supported:" + engineCore.TextureFormat[_depth] + " in RenderTarget");
@@ -1540,17 +1582,10 @@ var GLBuffer = /*#__PURE__*/ function() {
     function GLTexture2D(rhi, texture2D) {
         var _this;
         _this = GLTexture1.call(this, rhi, texture2D, rhi.gl.TEXTURE_2D) || this, /** Backward compatible with WebGL1.0. */ _this._compressedMipFilled = 0;
-        /** @ts-ignore */ var format = texture2D.format, _mipmap = texture2D._mipmap, width = texture2D.width, height = texture2D.height;
+        _this._validate(texture2D, rhi);
+        var format = texture2D.format, isSRGBColorSpace = texture2D.isSRGBColorSpace;
         var isWebGL2 = _this._isWebGL2;
-        /** @ts-ignore */ if (!GLTexture._supportTextureFormat(format, rhi)) {
-            throw new Error("Texture format is not supported:" + engineCore.TextureFormat[format]);
-        }
-        if (_mipmap && !isWebGL2 && (!GLTexture._isPowerOf2(width) || !GLTexture._isPowerOf2(height))) {
-            engineCore.Logger.warn("non-power-2 texture is not supported for mipmap in WebGL1,and has automatically downgraded to non-mipmap");
-            /** @ts-ignore */ texture2D._mipmap = false;
-            /** @ts-ignore */ texture2D._mipmapCount = texture2D._getMipmapCount();
-        }
-        _this._formatDetail = GLTexture._getFormatDetail(format, _this._gl, isWebGL2);
+        _this._formatDetail = GLTexture._getFormatDetail(format, isSRGBColorSpace, _this._gl, isWebGL2);
         _this._formatDetail.isCompressed && !isWebGL2 || _this._init(false);
         return _this;
     }
@@ -1560,16 +1595,15 @@ var GLBuffer = /*#__PURE__*/ function() {
    */ _proto.setPixelBuffer = function setPixelBuffer(colorBuffer, mipLevel, x, y, width, height) {
         if (mipLevel === void 0) mipLevel = 0;
         var gl = this._gl;
-        var isWebGL2 = this._isWebGL2;
-        var _this__formatDetail = this._formatDetail, internalFormat = _this__formatDetail.internalFormat, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType, isCompressed = _this__formatDetail.isCompressed;
+        var formatDetail = this._formatDetail;
         var mipWidth = Math.max(1, this._texture.width >> mipLevel);
         var mipHeight = Math.max(1, this._texture.height >> mipLevel);
         width = width || mipWidth - x;
         height = height || mipHeight - y;
         this._bind();
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
-        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
-        if (isCompressed) {
+        if (formatDetail.isCompressed) {
+            var isWebGL2 = this._isWebGL2;
+            var internalFormat = formatDetail.internalFormat;
             var mipBit = 1 << mipLevel;
             if (isWebGL2 || this._compressedMipFilled & mipBit) {
                 gl.compressedTexSubImage2D(this._target, mipLevel, x, y, width, height, internalFormat, colorBuffer);
@@ -1578,6 +1612,10 @@ var GLBuffer = /*#__PURE__*/ function() {
                 this._compressedMipFilled |= mipBit;
             }
         } else {
+            var baseFormat = formatDetail.baseFormat, dataType = formatDetail.dataType;
+            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
+            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
+            gl.pixelStorei(gl.UNPACK_ALIGNMENT, formatDetail.alignment);
             gl.texSubImage2D(this._target, mipLevel, x, y, width, height, baseFormat, dataType, colorBuffer);
         }
     };
@@ -1613,15 +1651,10 @@ var GLBuffer = /*#__PURE__*/ function() {
     function GLTexture2DArray(rhi, texture2DArray) {
         var _this;
         _this = GLTexture1.call(this, rhi, texture2DArray, rhi.gl.TEXTURE_2D_ARRAY) || this;
-        var format = texture2DArray.format, width = texture2DArray.width, height = texture2DArray.height, length = texture2DArray.length, mipmapCount = texture2DArray.mipmapCount;
-        if (!_this._isWebGL2) {
-            throw new Error("Texture2D Array is not supported in WebGL1.0");
-        }
-        /** @ts-ignore */ if (!GLTexture._supportTextureFormat(format, rhi)) {
-            throw new Error("Texture format is not supported:" + engineCore.TextureFormat[format]);
-        }
+        _this._validate(texture2DArray, rhi);
+        var format = texture2DArray.format, width = texture2DArray.width, height = texture2DArray.height, length = texture2DArray.length, mipmapCount = texture2DArray.mipmapCount, isSRGBColorSpace = texture2DArray.isSRGBColorSpace;
         _this._bind();
-        _this._formatDetail = GLTexture._getFormatDetail(format, _this._gl, true);
+        _this._formatDetail = GLTexture._getFormatDetail(format, isSRGBColorSpace, _this._gl, true);
         _this._gl.texStorage3D(_this._target, mipmapCount, _this._formatDetail.internalFormat, width, height, length);
         return _this;
     }
@@ -1630,13 +1663,15 @@ var GLBuffer = /*#__PURE__*/ function() {
    * {@inheritDoc IPlatformTexture2DArray.setPixelBuffer}
    */ _proto.setPixelBuffer = function setPixelBuffer(offsetIndex, colorBuffer, mipLevel, x, y, width, height, length) {
         var _this = this, target = _this._target, gl = _this._gl;
-        var _this__formatDetail = this._formatDetail, internalFormat = _this__formatDetail.internalFormat, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType, isCompressed = _this__formatDetail.isCompressed;
+        var formatDetail = this._formatDetail;
+        var internalFormat = formatDetail.internalFormat, baseFormat = formatDetail.baseFormat, dataType = formatDetail.dataType, isCompressed = formatDetail.isCompressed;
         width = width || Math.max(1, this._texture.width >> mipLevel) - x;
         height = height || Math.max(1, this._texture.height >> mipLevel) - y;
         length = length || this._texture.length;
         this._bind();
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
         gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
+        gl.pixelStorei(gl.UNPACK_ALIGNMENT, formatDetail.alignment);
         if (isCompressed) {
             gl.compressedTexSubImage3D(target, mipLevel, x, y, offsetIndex, width, height, length, internalFormat, colorBuffer);
         } else {
@@ -1661,11 +1696,23 @@ var GLBuffer = /*#__PURE__*/ function() {
         if (formatDetail.isCompressed) {
             throw new Error("Unable to read compressed texture");
         }
+        gl.pixelStorei(gl.PACK_ALIGNMENT, formatDetail.alignment);
         gl.bindFramebuffer(gl.FRAMEBUFFER, this._getReadFrameBuffer());
         gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, this._glTexture, mipLevel, elementIndex);
         gl.readPixels(x, y, width, height, formatDetail.baseFormat, formatDetail.dataType, out);
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     };
+    _proto._validate = function _validate(texture, rhi) {
+        var format = texture.format;
+        // Validate sRGB format
+        // @ts-ignore
+        var isSRGBColorSpace = texture._isSRGBColorSpace;
+        if (isSRGBColorSpace && !engineCore.TextureUtils.supportSRGB(format)) {
+            engineCore.Logger.warn("Only support sRGB color space in RGB8 or RGBA8 or some compressed texture format");
+            // @ts-ignore
+            texture._isSRGBColorSpace = false;
+        }
+    };
     return GLTexture2DArray;
 }(GLTexture);
 
@@ -1683,17 +1730,10 @@ var GLBuffer = /*#__PURE__*/ function() {
             0,
             0
         ];
-        /** @ts-ignore */ var format = textureCube.format, _mipmap = textureCube._mipmap, size = textureCube.width;
+        _this._validate(textureCube, rhi);
+        var format = textureCube.format, isSRGBColorSpace = textureCube.isSRGBColorSpace;
         var isWebGL2 = _this._isWebGL2;
-        /** @ts-ignore */ if (!GLTexture._supportTextureFormat(format, rhi)) {
-            throw new Error("Texture format is not supported:" + engineCore.TextureFormat[format]);
-        }
-        if (_mipmap && !isWebGL2 && !GLTexture._isPowerOf2(size)) {
-            engineCore.Logger.warn("non-power-2 texture is not supported for mipmap in WebGL1,and has automatically downgraded to non-mipmap");
-            /** @ts-ignore */ textureCube._mipmap = false;
-            /** @ts-ignore */ textureCube._mipmapCount = textureCube._getMipmapCount();
-        }
-        _this._formatDetail = GLTexture._getFormatDetail(format, _this._gl, isWebGL2);
+        _this._formatDetail = GLTexture._getFormatDetail(format, isSRGBColorSpace, _this._gl, isWebGL2);
         _this._formatDetail.isCompressed && !isWebGL2 || _this._init(true);
         return _this;
     }
@@ -1703,13 +1743,15 @@ var GLBuffer = /*#__PURE__*/ function() {
    */ _proto.setPixelBuffer = function setPixelBuffer(face, colorBuffer, mipLevel, x, y, width, height) {
         var gl = this._gl;
         var isWebGL2 = this._isWebGL2;
-        var _this__formatDetail = this._formatDetail, internalFormat = _this__formatDetail.internalFormat, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType, isCompressed = _this__formatDetail.isCompressed;
+        var formatDetail = this._formatDetail;
+        var internalFormat = formatDetail.internalFormat, baseFormat = formatDetail.baseFormat, dataType = formatDetail.dataType, isCompressed = formatDetail.isCompressed;
         var mipSize = Math.max(1, this._texture.width >> mipLevel);
         width = width || mipSize - x;
         height = height || mipSize - y;
         this._bind();
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
         gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
+        gl.pixelStorei(gl.UNPACK_ALIGNMENT, formatDetail.alignment);
         if (isCompressed) {
             var mipBit = 1 << mipLevel;
             if (isWebGL2 || this._compressedFaceFilled[face] & mipBit) {