@galacean/engine-rhi-webgl 1.6.8 → 1.6.10

package/dist/module.js

@@ -0,0 +1,2223 @@
+import { Canvas, Scene, Engine, BufferUsage, BufferBindFlag, SetDataOptions, GLCapabilityType, Logger, TextureUtils, TextureUsage, TextureWrapMode, TextureFormat, TextureFilterMode, TextureDepthCompareFunction, Texture, TextureCube, CameraClearFlags, ColorWriteMask, SystemInfo, Platform } from '@galacean/engine-core';
+import { Vector2, MathUtil, Vector4, Color } from '@galacean/engine-math';
+
+/**
+ * Smoothing plug-in.
+ * */ 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";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_5X5_KHR"] = 37810] = "RGBA_ASTC_5X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_6X5_KHR"] = 37811] = "RGBA_ASTC_6X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_6X6_KHR"] = 37812] = "RGBA_ASTC_6X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_8X5_KHR"] = 37813] = "RGBA_ASTC_8X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_8X6_KHR"] = 37814] = "RGBA_ASTC_8X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_8X8_KHR"] = 37815] = "RGBA_ASTC_8X8_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_10X5_KHR"] = 37816] = "RGBA_ASTC_10X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_10X6_KHR"] = 37817] = "RGBA_ASTC_10X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_10X8_KHR"] = 37818] = "RGBA_ASTC_10X8_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_10X10_KHR"] = 37819] = "RGBA_ASTC_10X10_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_12X10_KHR"] = 37820] = "RGBA_ASTC_12X10_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_12X12_KHR"] = 37821] = "RGBA_ASTC_12X12_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_4X4_KHR"] = 37840] = "SRGB8_ALPHA8_ASTC_4X4_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_5X4_KHR"] = 37841] = "SRGB8_ALPHA8_ASTC_5X4_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_5X5_KHR"] = 37842] = "SRGB8_ALPHA8_ASTC_5X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_6X5_KHR"] = 37843] = "SRGB8_ALPHA8_ASTC_6X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_6X6_KHR"] = 37844] = "SRGB8_ALPHA8_ASTC_6X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_8X5_KHR"] = 37845] = "SRGB8_ALPHA8_ASTC_8X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_8X6_KHR"] = 37846] = "SRGB8_ALPHA8_ASTC_8X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_8X8_KHR"] = 37847] = "SRGB8_ALPHA8_ASTC_8X8_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_10X5_KHR"] = 37848] = "SRGB8_ALPHA8_ASTC_10X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_10X6_KHR"] = 37849] = "SRGB8_ALPHA8_ASTC_10X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_10X8_KHR"] = 37850] = "SRGB8_ALPHA8_ASTC_10X8_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_10X10_KHR"] = 37851] = "SRGB8_ALPHA8_ASTC_10X10_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_12X10_KHR"] = 37852] = "SRGB8_ALPHA8_ASTC_12X10_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_12X12_KHR"] = 37853] = "SRGB8_ALPHA8_ASTC_12X12_KHR";
+    // etc1
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB_ETC1_WEBGL"] = 36196] = "RGB_ETC1_WEBGL";
+    // etc2
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["R11_EAC"] = 37488] = "R11_EAC";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SIGNED_R11_EAC"] = 37489] = "SIGNED_R11_EAC";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RG11_EAC"] = 37490] = "RG11_EAC";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SIGNED_RG11_EAC"] = 37491] = "SIGNED_RG11_EAC";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB8_ETC2"] = 37492] = "RGB8_ETC2";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ETC2"] = 37493] = "SRGB8_ETC2";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB8_PUNCHTHROUGH_ALPHA1_ETC2"] = 37494] = "RGB8_PUNCHTHROUGH_ALPHA1_ETC2";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_PUNCHTHROUGH_ALPHA1_ETC2"] = 37495] = "SRGB8_PUNCHTHROUGH_ALPHA1_ETC2";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA8_ETC2_EAC"] = 37496] = "RGBA8_ETC2_EAC";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ETC2_EAC"] = 37497] = "SRGB8_ALPHA8_ETC2_EAC";
+    // pvrtc
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB_PVRTC_4BPPV1_IMG"] = 35840] = "RGB_PVRTC_4BPPV1_IMG";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB_PVRTC_2BPPV1_IMG"] = 35841] = "RGB_PVRTC_2BPPV1_IMG";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_PVRTC_4BPPV1_IMG"] = 35842] = "RGBA_PVRTC_4BPPV1_IMG";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_PVRTC_2BPPV1_IMG"] = 35843] = "RGBA_PVRTC_2BPPV1_IMG";
+    // s3tc
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB_S3TC_DXT1_EXT"] = 33776] = "RGB_S3TC_DXT1_EXT";
+    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";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB_BPTC_SIGNED_FLOAT_EXT"] = 36494] = "RGB_BPTC_SIGNED_FLOAT_EXT";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB_BPTC_UNSIGNED_FLOAT_EXT"] = 36495] = "RGB_BPTC_UNSIGNED_FLOAT_EXT";
+    return GLCompressedTextureInternalFormat;
+}({});
+
+function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+
+        if ("value" in descriptor) descriptor.writable = true;
+
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+
+    return Constructor;
+}
+
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+
+        return o;
+    };
+
+    return _set_prototype_of(o, p);
+}
+
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } });
+
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+
+function _instanceof(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else return left instanceof right;
+}
+
+/**
+ * The canvas used on the web, which can support HTMLCanvasElement and OffscreenCanvas.
+ */ var WebCanvas = /*#__PURE__*/ function(Canvas) {
+    _inherits(WebCanvas, Canvas);
+    function WebCanvas(webCanvas) {
+        var _this;
+        _this = Canvas.call(this) || this, _this._scale = new Vector2();
+        var width = webCanvas.width;
+        var height = webCanvas.height;
+        _this._webCanvas = webCanvas;
+        _this.width = width;
+        _this.height = height;
+        return _this;
+    }
+    var _proto = WebCanvas.prototype;
+    /**
+   * Resize the rendering size according to the clientWidth and clientHeight of the canvas.
+   * @param pixelRatio - Pixel ratio
+   */ _proto.resizeByClientSize = function resizeByClientSize(pixelRatio) {
+        if (pixelRatio === void 0) pixelRatio = window.devicePixelRatio;
+        var webCanvas = this._webCanvas;
+        if (typeof OffscreenCanvas === "undefined" || !_instanceof(webCanvas, OffscreenCanvas)) {
+            var exportWidth = webCanvas.clientWidth * pixelRatio;
+            var exportHeight = webCanvas.clientHeight * pixelRatio;
+            this.width = exportWidth;
+            this.height = exportHeight;
+        }
+    };
+    /**
+   * Set scale.
+   * @param x - Scale along the X axis
+   * @param y - Scale along the Y axis
+   */ _proto.setScale = function setScale(x, y) {
+        this._scale.set(x, y);
+        this.scale = this._scale;
+    };
+    _proto._onWidthChanged = function _onWidthChanged(value) {
+        this._webCanvas.width = value;
+    };
+    _proto._onHeightChange = function _onHeightChange(value) {
+        this._webCanvas.height = value;
+    };
+    _create_class(WebCanvas, [
+        {
+            key: "scale",
+            get: /**
+   * The scale of canvas, the value is visible width/height divide the render width/height.
+   * @remarks Need to re-assign after modification to ensure that the modification takes effect.
+   */ function get() {
+                var webCanvas = this._webCanvas;
+                if (typeof OffscreenCanvas === "undefined" || !_instanceof(webCanvas, OffscreenCanvas)) {
+                    this._scale.set(webCanvas.clientWidth * devicePixelRatio / webCanvas.width, webCanvas.clientHeight * devicePixelRatio / webCanvas.height);
+                }
+                return this._scale;
+            },
+            set: function set(value) {
+                var webCanvas = this._webCanvas;
+                if (typeof OffscreenCanvas === "undefined" || !_instanceof(webCanvas, OffscreenCanvas)) {
+                    webCanvas.style.transformOrigin = "left top";
+                    webCanvas.style.transform = "scale(" + value.x + ", " + value.y + ")";
+                }
+            }
+        }
+    ]);
+    return WebCanvas;
+}(Canvas);
+
+/**
+ * WebGL platform engine,support includes WebGL1.0 and WebGL2.0.
+ */ var WebGLEngine = /*#__PURE__*/ function(Engine) {
+    _inherits(WebGLEngine, Engine);
+    function WebGLEngine() {
+        return Engine.apply(this, arguments) || this;
+    }
+    /**
+   * Create a WebGL engine.
+   * @param configuration - WebGL engine configuration
+   * @returns A promise that will resolve when the engine is created
+   */ WebGLEngine.create = function create(configuration) {
+        var canvas = configuration.canvas;
+        var webCanvas = new WebCanvas(typeof canvas === "string" ? document.getElementById(canvas) : canvas);
+        var webGLGraphicDevice = new WebGLGraphicDevice(configuration.graphicDeviceOptions);
+        var engine = new WebGLEngine(webCanvas, webGLGraphicDevice, configuration);
+        // @ts-ignore
+        var promise = engine._initialize(configuration);
+        return promise.then(function() {
+            engine.sceneManager.addScene(new Scene(engine, "DefaultScene"));
+            return engine;
+        });
+    };
+    _create_class(WebGLEngine, [
+        {
+            key: "canvas",
+            get: /**
+   * Web canvas.
+   */ function get() {
+                // @ts-ignore
+                return this._canvas;
+            }
+        }
+    ]);
+    return WebGLEngine;
+}(Engine);
+
+function _extends() {
+    _extends = Object.assign || function assign(target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i];
+            for (var key in source) if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
+        }
+
+        return target;
+    };
+
+    return _extends.apply(this, arguments);
+}
+
+var GLBuffer = /*#__PURE__*/ function() {
+    function GLBuffer(rhi, type, byteLength, bufferUsage, data) {
+        if (bufferUsage === void 0) bufferUsage = BufferUsage.Static;
+        var gl = rhi.gl;
+        var glBuffer = gl.createBuffer();
+        var glBufferUsage = this._getGLBufferUsage(gl, bufferUsage);
+        var glBindTarget = type === BufferBindFlag.VertexBuffer ? gl.ARRAY_BUFFER : gl.ELEMENT_ARRAY_BUFFER;
+        this._gl = gl;
+        this._glBuffer = glBuffer;
+        this._glBufferUsage = glBufferUsage;
+        this._glBindTarget = glBindTarget;
+        this._isWebGL2 = rhi.isWebGL2;
+        this.bind();
+        if (data) {
+            gl.bufferData(glBindTarget, data, glBufferUsage);
+        } else {
+            gl.bufferData(glBindTarget, byteLength, glBufferUsage);
+        }
+        gl.bindBuffer(glBindTarget, null);
+    }
+    var _proto = GLBuffer.prototype;
+    _proto.bind = function bind() {
+        this._gl.bindBuffer(this._glBindTarget, this._glBuffer);
+    };
+    _proto.setData = function setData(byteLength, data, bufferByteOffset, dataOffset, dataLength, options) {
+        var gl = this._gl;
+        var glBindTarget = this._glBindTarget;
+        this.bind();
+        if (options === SetDataOptions.Discard) {
+            gl.bufferData(glBindTarget, byteLength, this._glBufferUsage);
+        }
+        // TypeArray is BYTES_PER_ELEMENT, unTypeArray is 1
+        var byteSize = data.BYTES_PER_ELEMENT || 1;
+        var dataByteLength = dataLength ? byteSize * dataLength : data.byteLength;
+        if (dataOffset !== 0 || dataByteLength < data.byteLength) {
+            var isArrayBufferView = data.byteOffset !== undefined;
+            if (this._isWebGL2 && isArrayBufferView) {
+                gl.bufferSubData(glBindTarget, bufferByteOffset, data, dataOffset, dataByteLength / byteSize);
+            } else {
+                var subData = new Uint8Array(isArrayBufferView ? data.buffer : data, dataOffset * byteSize, dataByteLength);
+                gl.bufferSubData(glBindTarget, bufferByteOffset, subData);
+            }
+        } else {
+            gl.bufferSubData(glBindTarget, bufferByteOffset, data);
+        }
+        gl.bindBuffer(glBindTarget, null);
+    };
+    _proto.getData = function getData(data, bufferByteOffset, dataOffset, dataLength) {
+        if (this._isWebGL2) {
+            var gl = this._gl;
+            this.bind();
+            gl.getBufferSubData(this._glBindTarget, bufferByteOffset, data, dataOffset, dataLength);
+        } else {
+            throw "Buffer is write-only on WebGL1.0 platforms.";
+        }
+    };
+    _proto.destroy = function destroy() {
+        this._gl.deleteBuffer(this._glBuffer);
+        this._gl = null;
+        this._glBuffer = null;
+    };
+    _proto._getGLBufferUsage = function _getGLBufferUsage(gl, bufferUsage) {
+        switch(bufferUsage){
+            case BufferUsage.Static:
+                return gl.STATIC_DRAW;
+            case BufferUsage.Dynamic:
+                return gl.DYNAMIC_DRAW;
+            case BufferUsage.Stream:
+                return gl.STREAM_DRAW;
+        }
+    };
+    return GLBuffer;
+}();
+
+/**
+ * GL capability.
+ */ var GLCapability = /*#__PURE__*/ function() {
+    function GLCapability(rhi) {
+        this._rhi = rhi;
+        this.capabilityList = new Map();
+        this._init();
+        this._compatibleAllInterface();
+    }
+    var _proto = GLCapability.prototype;
+    /**
+   * Check device capabilities.
+   */ _proto.canIUse = function canIUse(capabilityType) {
+        return this.capabilityList.get(capabilityType);
+    };
+    /**
+   * Check if can use some compressed texture format.
+   */ _proto.canIUseCompressedTextureInternalFormat = function canIUseCompressedTextureInternalFormat(internalType) {
+        var // astc
+        RGBA_ASTC_4X4_KHR = GLCompressedTextureInternalFormat.RGBA_ASTC_4X4_KHR, RGBA_ASTC_12X12_KHR = GLCompressedTextureInternalFormat.RGBA_ASTC_12X12_KHR, SRGB8_ALPHA8_ASTC_4X4_KHR = GLCompressedTextureInternalFormat.SRGB8_ALPHA8_ASTC_4X4_KHR, SRGB8_ALPHA8_ASTC_12X12_KHR = GLCompressedTextureInternalFormat.SRGB8_ALPHA8_ASTC_12X12_KHR, // etc1
+        RGB_ETC1_WEBGL = GLCompressedTextureInternalFormat.RGB_ETC1_WEBGL, // etc
+        R11_EAC = GLCompressedTextureInternalFormat.R11_EAC, SRGB8_ALPHA8_ETC2_EAC = GLCompressedTextureInternalFormat.SRGB8_ALPHA8_ETC2_EAC, // pvrtc
+        RGB_PVRTC_4BPPV1_IMG = GLCompressedTextureInternalFormat.RGB_PVRTC_4BPPV1_IMG, RGBA_PVRTC_2BPPV1_IMG = GLCompressedTextureInternalFormat.RGBA_PVRTC_2BPPV1_IMG, // s3tc
+        RGB_S3TC_DXT1_EXT = GLCompressedTextureInternalFormat.RGB_S3TC_DXT1_EXT, RGBA_S3TC_DXT5_EXT = GLCompressedTextureInternalFormat.RGBA_S3TC_DXT5_EXT, // bptc
+        RGBA_BPTC_UNORM_EXT = GLCompressedTextureInternalFormat.RGBA_BPTC_UNORM_EXT, RGB_BPTC_UNSIGNED_FLOAT_EXT = GLCompressedTextureInternalFormat.RGB_BPTC_UNSIGNED_FLOAT_EXT;
+        if (internalType >= RGBA_ASTC_4X4_KHR && RGBA_ASTC_12X12_KHR <= RGBA_ASTC_12X12_KHR || internalType >= SRGB8_ALPHA8_ASTC_4X4_KHR && internalType <= SRGB8_ALPHA8_ASTC_12X12_KHR) {
+            return this.canIUse(GLCapabilityType.astc);
+        } else if (internalType === RGB_ETC1_WEBGL) {
+            return this.canIUse(GLCapabilityType.etc1);
+        } else if (internalType >= R11_EAC && internalType <= SRGB8_ALPHA8_ETC2_EAC) {
+            return this.canIUse(GLCapabilityType.etc);
+        } else if (internalType >= RGB_PVRTC_4BPPV1_IMG && internalType <= RGBA_PVRTC_2BPPV1_IMG) {
+            return this.canIUse(GLCapabilityType.pvrtc);
+        } else if (internalType >= RGB_S3TC_DXT1_EXT && internalType <= RGBA_S3TC_DXT5_EXT) {
+            return this.canIUse(GLCapabilityType.s3tc);
+        } else if (internalType >= RGBA_BPTC_UNORM_EXT && internalType <= RGB_BPTC_UNSIGNED_FLOAT_EXT) {
+            return this.canIUse(GLCapabilityType.bptc);
+        }
+        return false;
+    };
+    /**
+   *  Init capabilities.
+   */ _proto._init = function _init() {
+        var cap = this.capabilityList;
+        var isWebGL2 = this.rhi.isWebGL2;
+        var requireExtension = this.rhi.requireExtension.bind(this.rhi);
+        var shaderVertexID = GLCapabilityType.shaderVertexID, standardDerivatives = GLCapabilityType.standardDerivatives, shaderTextureLod = GLCapabilityType.shaderTextureLod, elementIndexUint = GLCapabilityType.elementIndexUint, depthTexture = GLCapabilityType.depthTexture, vertexArrayObject = GLCapabilityType.vertexArrayObject, instancedArrays = GLCapabilityType.instancedArrays, multipleSample = GLCapabilityType.multipleSample, drawBuffers = GLCapabilityType.drawBuffers, blendMinMax = GLCapabilityType.blendMinMax, astc = GLCapabilityType.astc, astc_webkit = GLCapabilityType.astc_webkit, astc_hdr = GLCapabilityType.astc_hdr, etc = GLCapabilityType.etc, etc_webkit = GLCapabilityType.etc_webkit, etc1 = GLCapabilityType.etc1, etc1_webkit = GLCapabilityType.etc1_webkit, pvrtc = GLCapabilityType.pvrtc, pvrtc_webkit = GLCapabilityType.pvrtc_webkit, s3tc = GLCapabilityType.s3tc, s3tc_webkit = GLCapabilityType.s3tc_webkit, bptc = GLCapabilityType.bptc, s3tc_srgb = GLCapabilityType.s3tc_srgb, textureFloat = GLCapabilityType.textureFloat, textureHalfFloat = GLCapabilityType.textureHalfFloat, textureFloatLinear = GLCapabilityType.textureFloatLinear, textureHalfFloatLinear = GLCapabilityType.textureHalfFloatLinear, WEBGL_colorBufferFloat = GLCapabilityType.WEBGL_colorBufferFloat, colorBufferFloat = GLCapabilityType.colorBufferFloat, colorBufferHalfFloat = GLCapabilityType.colorBufferHalfFloat, textureFilterAnisotropic = GLCapabilityType.textureFilterAnisotropic, fragDepth = GLCapabilityType.fragDepth, sRGB = GLCapabilityType.sRGB;
+        cap.set(shaderVertexID, isWebGL2);
+        cap.set(standardDerivatives, isWebGL2 || !!requireExtension(standardDerivatives));
+        cap.set(shaderTextureLod, isWebGL2 || !!requireExtension(shaderTextureLod));
+        cap.set(elementIndexUint, isWebGL2 || !!requireExtension(elementIndexUint));
+        cap.set(depthTexture, isWebGL2 || !!requireExtension(depthTexture));
+        cap.set(vertexArrayObject, isWebGL2 || !!requireExtension(vertexArrayObject));
+        cap.set(instancedArrays, isWebGL2 || !!requireExtension(instancedArrays));
+        cap.set(multipleSample, isWebGL2);
+        cap.set(drawBuffers, isWebGL2 || !!requireExtension(drawBuffers));
+        cap.set(blendMinMax, isWebGL2 || !!requireExtension(blendMinMax));
+        cap.set(textureFloat, isWebGL2 || !!requireExtension(textureFloat));
+        cap.set(textureHalfFloat, isWebGL2 || !!requireExtension(textureHalfFloat));
+        cap.set(textureFloatLinear, !!requireExtension(textureFloatLinear));
+        cap.set(textureHalfFloatLinear, isWebGL2 || !!requireExtension(textureHalfFloatLinear));
+        cap.set(colorBufferFloat, isWebGL2 && !!requireExtension(colorBufferFloat) || !!requireExtension(WEBGL_colorBufferFloat));
+        cap.set(colorBufferHalfFloat, isWebGL2 && !!requireExtension(colorBufferFloat) || !!requireExtension(colorBufferHalfFloat));
+        cap.set(textureFilterAnisotropic, !!requireExtension(textureFilterAnisotropic));
+        cap.set(fragDepth, isWebGL2 || !!requireExtension(fragDepth));
+        cap.set(etc, !!(requireExtension(etc) || requireExtension(etc_webkit)));
+        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));
+        var astcExtension = requireExtension(astc) || requireExtension(astc_webkit);
+        cap.set(astc, !!astcExtension);
+        cap.set(astc_hdr, !!(astcExtension == null ? void 0 : astcExtension.getSupportedProfiles().includes("hdr")));
+        cap.set(sRGB, isWebGL2 || !!requireExtension(sRGB));
+    };
+    /**
+   * If there are extensions that can supplement this ability, smooth out the difference.
+   * @example
+   * compatible(GLCapabilityType.depthTexture,{
+   *    UNSIGNED_INT_24_8: "UNSIGNED_INT_24_8_WEBGL"
+   * })
+   * gl.UNSIGNED_INT_24_8 = ext.UNSIGNED_INT_24_8_WEBGL
+   */ _proto._compatibleInterface = function _compatibleInterface(capabilityType, flatItem) {
+        var rhi = this.rhi;
+        var gl = rhi.gl;
+        var ext = null;
+        if (ext = rhi.requireExtension(capabilityType)) {
+            for(var glKey in flatItem){
+                var extensionKey = flatItem[glKey];
+                var extensionVal = ext[extensionKey];
+                // Mini game hack the native function,use “.bind” to smooth out if is “Funcion”.
+                if (extensionVal == null ? void 0 : extensionVal.bind) {
+                    gl[glKey] = extensionVal.bind(ext);
+                } else {
+                    gl[glKey] = extensionVal;
+                }
+            }
+        }
+    };
+    _proto._compatibleAllInterface = function _compatibleAllInterface() {
+        var depthTexture = GLCapabilityType.depthTexture, vertexArrayObject = GLCapabilityType.vertexArrayObject, instancedArrays = GLCapabilityType.instancedArrays, drawBuffers = GLCapabilityType.drawBuffers, textureFilterAnisotropic = GLCapabilityType.textureFilterAnisotropic, textureHalfFloat = GLCapabilityType.textureHalfFloat, colorBufferHalfFloat = GLCapabilityType.colorBufferHalfFloat, WEBGL_colorBufferFloat = GLCapabilityType.WEBGL_colorBufferFloat, blendMinMax = GLCapabilityType.blendMinMax, sRGB = GLCapabilityType.sRGB;
+        var isWebGL2 = this.rhi.isWebGL2;
+        if (!isWebGL2) {
+            this._compatibleInterface(blendMinMax, {
+                MIN: "MIN_EXT",
+                MAX: "MAX_EXT"
+            });
+            this._compatibleInterface(depthTexture, {
+                UNSIGNED_INT_24_8: "UNSIGNED_INT_24_8_WEBGL"
+            });
+            this._compatibleInterface(vertexArrayObject, {
+                createVertexArray: "createVertexArrayOES",
+                deleteVertexArray: "deleteVertexArrayOES",
+                isVertexArray: "isVertexArrayOES",
+                bindVertexArray: "bindVertexArrayOES"
+            });
+            this._compatibleInterface(instancedArrays, {
+                drawArraysInstanced: "drawArraysInstancedANGLE",
+                drawElementsInstanced: "drawElementsInstancedANGLE",
+                vertexAttribDivisor: "vertexAttribDivisorANGLE"
+            });
+            this._compatibleInterface(drawBuffers, {
+                MAX_DRAW_BUFFERS: "MAX_DRAW_BUFFERS_WEBGL"
+            });
+            var items = {};
+            if (this.canIUse(GLCapabilityType.drawBuffers)) {
+                var maxDrawBuffers = this.maxDrawBuffers;
+                for(var i = 0; i < maxDrawBuffers; i++){
+                    i != 0 && (items["COLOR_ATTACHMENT" + i] = "COLOR_ATTACHMENT" + i + "_WEBGL");
+                    items["DRAW_BUFFER" + i] = "DRAW_BUFFER" + i + "_WEBGL";
+                }
+                this._compatibleInterface(drawBuffers, _extends({
+                    drawBuffers: "drawBuffersWEBGL"
+                }, items));
+            }
+            this._compatibleInterface(textureHalfFloat, {
+                HALF_FLOAT: "HALF_FLOAT_OES"
+            });
+            this._compatibleInterface(colorBufferHalfFloat, {
+                RGBA16F: "RBGA16F_EXT"
+            });
+            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"
+        });
+    };
+    _create_class(GLCapability, [
+        {
+            key: "maxTextureSize",
+            get: function get() {
+                return this.rhi.renderStates.getParameter(this.rhi.gl.MAX_TEXTURE_SIZE);
+            }
+        },
+        {
+            key: "canUseFloatTextureBlendShape",
+            get: function get() {
+                return this.canIUse(GLCapabilityType.shaderVertexID) && this.canIUse(GLCapabilityType.textureFloat) && this.rhi.renderStates.getParameter(this.rhi.gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) > 0;
+            }
+        },
+        {
+            key: "canIUseMoreJoints",
+            get: /**
+   * Whether can use more joints.
+   */ function get() {
+                return this.canIUse(GLCapabilityType.textureFloat) && this.rhi.renderStates.getParameter(this.rhi.gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) > 0;
+            }
+        },
+        {
+            key: "maxDrawBuffers",
+            get: function get() {
+                if (!this._maxDrawBuffers) {
+                    if (this.canIUse(GLCapabilityType.drawBuffers)) {
+                        this._maxDrawBuffers = this._rhi.gl.getParameter(this._rhi.gl.MAX_DRAW_BUFFERS);
+                    } else {
+                        this._maxDrawBuffers = 1;
+                    }
+                }
+                return this._maxDrawBuffers;
+            }
+        },
+        {
+            key: "maxAnisoLevel",
+            get: /**
+   * Max anisoLevel.
+   */ function get() {
+                if (!this._maxAnisoLevel) {
+                    var ext = this._rhi.requireExtension(GLCapabilityType.textureFilterAnisotropic);
+                    this._maxAnisoLevel = ext ? this._rhi.gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT) : 1;
+                }
+                return this._maxAnisoLevel;
+            }
+        },
+        {
+            key: "maxAntiAliasing",
+            get: /**
+   * Max MSAA count.
+   */ function get() {
+                if (!this._maxAntiAliasing) {
+                    var gl = this._rhi.gl;
+                    var canMSAA = this.canIUse(GLCapabilityType.multipleSample);
+                    this._maxAntiAliasing = canMSAA ? gl.getParameter(gl.MAX_SAMPLES) : 1;
+                }
+                return this._maxAntiAliasing;
+            }
+        },
+        {
+            key: "isFragmentHighPrecision",
+            get: function get() {
+                var gl = this._rhi.gl;
+                return gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT).precision !== 0;
+            }
+        },
+        {
+            key: "rhi",
+            get: function get() {
+                return this._rhi;
+            }
+        }
+    ]);
+    return GLCapability;
+}();
+
+/**
+ * GLContext extension.
+ */ var GLExtensions = /*#__PURE__*/ function() {
+    function GLExtensions(rhi) {
+        this.rhi = rhi;
+        this._requireResult = {};
+    }
+    var _proto = GLExtensions.prototype;
+    /**
+   * Require an extension.
+   */ _proto.requireExtension = function requireExtension(ext) {
+        if (this._requireResult[ext] !== undefined) {
+            return this._requireResult[ext];
+        }
+        this._requireResult[ext] = this.rhi.gl.getExtension(ext);
+        return this._requireResult[ext];
+    };
+    return GLExtensions;
+}();
+
+/**
+ * Improvement of VAO:
+ * 1) WebGL2.0 must support VAO, almost all devices support vao extensions in webgl1.0, we can use PollyFill,only keep VAO mode.
+ */ /**
+ * @internal
+ * GL platform primitive.
+ */ var GLPrimitive = /*#__PURE__*/ function() {
+    function GLPrimitive(rhi, primitive) {
+        this._attribLocArray = [];
+        this._vaoMap = new Map();
+        this._primitive = primitive;
+        this._canUseInstancedArrays = rhi.canIUse(GLCapabilityType.instancedArrays);
+        this._isSupportVAO = rhi.canIUse(GLCapabilityType.vertexArrayObject);
+        this._gl = rhi.gl;
+    }
+    var _proto = GLPrimitive.prototype;
+    /**
+   * Draw the primitive.
+   */ _proto.draw = function draw(shaderProgram, subMesh) {
+        var gl = this._gl;
+        var primitive = this._primitive;
+        var useVao = this._isSupportVAO && primitive.enableVAO;
+        if (useVao) {
+            if (primitive._bufferStructChanged) {
+                this._clearVAO();
+            }
+            if (!this._vaoMap.has(shaderProgram.id)) {
+                this._registerVAO(shaderProgram);
+            }
+            var vao = this._vaoMap.get(shaderProgram.id);
+            gl.bindVertexArray(vao);
+        } else {
+            this._bindBufferAndAttrib(shaderProgram);
+        }
+        var indexBufferBinding = primitive.indexBufferBinding, instanceCount = primitive.instanceCount, _glIndexType = primitive._glIndexType, _glIndexByteCount = primitive._glIndexByteCount;
+        var topology = subMesh.topology, start = subMesh.start, count = subMesh.count;
+        if (!instanceCount) {
+            if (indexBufferBinding) {
+                if (useVao) {
+                    gl.drawElements(topology, count, _glIndexType, start * _glIndexByteCount);
+                } else {
+                    var _glBuffer = indexBufferBinding.buffer._platformBuffer._glBuffer;
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _glBuffer);
+                    gl.drawElements(topology, count, _glIndexType, start * _glIndexByteCount);
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+                }
+            } else {
+                gl.drawArrays(topology, start, count);
+            }
+        } else {
+            if (this._canUseInstancedArrays) {
+                if (indexBufferBinding) {
+                    if (useVao) {
+                        gl.drawElementsInstanced(topology, count, _glIndexType, start * _glIndexByteCount, instanceCount);
+                    } else {
+                        var _glBuffer1 = indexBufferBinding.buffer._platformBuffer._glBuffer;
+                        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _glBuffer1);
+                        gl.drawElementsInstanced(topology, count, _glIndexType, start * _glIndexByteCount, instanceCount);
+                        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+                    }
+                } else {
+                    gl.drawArraysInstanced(topology, start, count, instanceCount);
+                }
+            } else {
+                Logger.error("ANGLE_instanced_arrays extension is not supported");
+            }
+        }
+        // Unbind
+        if (useVao) {
+            gl.bindVertexArray(null);
+        } else {
+            this._disableAttrib();
+        }
+    };
+    _proto.destroy = function destroy() {
+        this._isSupportVAO && this._clearVAO();
+    };
+    /**
+   * Bind buffer and attribute.
+   */ _proto._bindBufferAndAttrib = function _bindBufferAndAttrib(shaderProgram) {
+        var gl = this._gl;
+        var primitive = this._primitive;
+        var vertexBufferBindings = primitive.vertexBufferBindings;
+        this._attribLocArray.length = 0;
+        var attributeLocation = shaderProgram.attributeLocation;
+        var attributes = primitive._vertexElementMap;
+        var vbo;
+        var lastBoundVbo;
+        for(var name in attributeLocation){
+            var loc = attributeLocation[name];
+            if (loc === -1) continue;
+            var element = attributes[name];
+            if (element) {
+                var _vertexBufferBindings_element_bindingIndex = vertexBufferBindings[element.bindingIndex], buffer = _vertexBufferBindings_element_bindingIndex.buffer, stride = _vertexBufferBindings_element_bindingIndex.stride;
+                vbo = buffer._platformBuffer._glBuffer;
+                // prevent binding the vbo which already bound at the last loop, e.g. a buffer with multiple attributes.
+                if (lastBoundVbo !== vbo) {
+                    lastBoundVbo = vbo;
+                    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+                }
+                gl.enableVertexAttribArray(loc);
+                var elementInfo = element._formatMetaInfo;
+                gl.vertexAttribPointer(loc, elementInfo.size, elementInfo.type, elementInfo.normalized, stride, element.offset);
+                if (this._canUseInstancedArrays) {
+                    gl.vertexAttribDivisor(loc, element.instanceStepRate);
+                }
+                this._attribLocArray.push(loc);
+            } else {
+                Logger.warn("vertex attribute not found: " + name);
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    };
+    _proto._disableAttrib = function _disableAttrib() {
+        var gl = this._gl;
+        for(var i = 0, l = this._attribLocArray.length; i < l; i++){
+            gl.disableVertexAttribArray(this._attribLocArray[i]);
+        }
+    };
+    _proto._registerVAO = function _registerVAO(shaderProgram) {
+        var gl = this._gl;
+        var vao = gl.createVertexArray();
+        /** register VAO */ gl.bindVertexArray(vao);
+        var indexBufferBinding = this._primitive.indexBufferBinding;
+        if (indexBufferBinding) {
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBufferBinding.buffer._platformBuffer._glBuffer);
+        }
+        this._bindBufferAndAttrib(shaderProgram);
+        /** unbind */ gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        this._disableAttrib();
+        this._vaoMap.set(shaderProgram.id, vao);
+    };
+    _proto._clearVAO = function _clearVAO() {
+        var gl = this._gl;
+        this._vaoMap.forEach(function(vao) {
+            gl.deleteVertexArray(vao);
+        });
+        this._vaoMap.clear();
+    };
+    return GLPrimitive;
+}();
+
+/**
+ * @private
+ */ var GLRenderStates = /*#__PURE__*/ function() {
+    function GLRenderStates(gl) {
+        this._parameters = {};
+        this._gl = gl;
+        this._parameters = {}; // current gl state parameters
+        /** cache */ this._parameters[gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS] = gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
+        this._parameters[gl.MAX_VERTEX_UNIFORM_VECTORS] = gl.getParameter(gl.MAX_VERTEX_UNIFORM_VECTORS);
+        this._parameters[gl.MAX_VERTEX_ATTRIBS] = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);
+        this._parameters[gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS] = gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS);
+        this._parameters[gl.MAX_TEXTURE_SIZE] = gl.getParameter(gl.MAX_TEXTURE_SIZE);
+        // init blend state same as BlendState default value.
+        gl.blendFuncSeparate(gl.ONE, gl.ZERO, gl.ONE, gl.ZERO);
+        gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+        gl.colorMask(true, true, true, true);
+        gl.blendColor(0, 0, 0, 0);
+        gl.disable(gl.SAMPLE_ALPHA_TO_COVERAGE);
+        // init depth state same as DepthState default value.
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LESS);
+        gl.depthMask(true);
+        // init stencil state same as StencilState default value.
+        gl.disable(gl.STENCIL_TEST);
+        gl.stencilFuncSeparate(gl.FRONT, gl.ALWAYS, 0, 0xff);
+        gl.stencilFuncSeparate(gl.BACK, gl.ALWAYS, 0, 0xff);
+        gl.stencilOpSeparate(gl.FRONT, gl.KEEP, gl.KEEP, gl.KEEP);
+        gl.stencilOpSeparate(gl.BACK, gl.KEEP, gl.KEEP, gl.KEEP);
+        gl.stencilMask(0xff);
+        // init raster state same as RasterState default value.
+        gl.enable(gl.CULL_FACE);
+        gl.cullFace(gl.BACK);
+        gl.disable(gl.POLYGON_OFFSET_FILL);
+        gl.polygonOffset(0, 0);
+    }
+    var _proto = GLRenderStates.prototype;
+    /**
+   * Get a parameter.
+   */ _proto.getParameter = function getParameter(pname) {
+        return this._parameters[pname];
+    };
+    return GLRenderStates;
+}();
+
+/**
+ * Texture in WebGL platform.
+ */ var GLTexture = /*#__PURE__*/ function() {
+    function GLTexture(rhi, texture, target) {
+        this._texture = texture;
+        this._rhi = rhi;
+        this._gl = rhi.gl;
+        this._isWebGL2 = rhi.isWebGL2;
+        this._target = target;
+        this._glTexture = this._gl.createTexture();
+    }
+    var _proto = GLTexture.prototype;
+    /**
+   * Destroy texture.
+   */ _proto.destroy = function destroy() {
+        this._gl.deleteTexture(this._glTexture);
+        this._texture = null;
+        this._glTexture = null;
+        this._formatDetail = null;
+    };
+    /**
+   * @internal
+   */ _proto.setUseDepthCompareMode = function setUseDepthCompareMode(value) {
+        var gl = this._gl;
+        gl.texParameteri(this._target, gl.TEXTURE_COMPARE_MODE, value ? gl.COMPARE_REF_TO_TEXTURE : gl.NONE);
+    };
+    /**
+   * 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 (!TextureUtils.supportGenerateMipmaps(texture.format, mipmap, texture.isSRGBColorSpace, this._isWebGL2)) {
+            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 (texture.width !== 1 || texture.height !== 1) {
+            this._bind();
+            this._gl.generateMipmap(this._target);
+        }
+    };
+    _proto._bind = function _bind() {
+        this._rhi.bindTexture(this);
+    };
+    /**
+   * Pre-development mipmapping GPU memory.
+   */ _proto._init = function _init(isCube) {
+        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;
+        // @ts-ignore
+        var _this__texture = this._texture, mipmapCount = _this__texture.mipmapCount, width = _this__texture.width, height = _this__texture.height, usage = _this__texture.usage, _isDepthTexture = _this__texture._isDepthTexture;
+        this._bind();
+        if (isWebGL2 && !(baseFormat === gl.LUMINANCE_ALPHA || baseFormat === gl.ALPHA) && usage !== TextureUsage.Dynamic) {
+            gl.texStorage2D(this._target, mipmapCount, internalFormat, width, height);
+        } else {
+            if (!isCube) {
+                if (_isDepthTexture) {
+                    gl.texImage2D(this._target, 0, internalFormat, width, height, 0, baseFormat, dataType, null);
+                } else {
+                    for(var i = 0; i < mipmapCount; i++){
+                        var mipWidth = Math.max(1, width >> i);
+                        var mipHeight = Math.max(1, height >> i);
+                        gl.texImage2D(this._target, i, internalFormat, mipWidth, mipHeight, 0, baseFormat, dataType, null);
+                    }
+                }
+            } else {
+                for(var i1 = 0; i1 < mipmapCount; i1++){
+                    var size = Math.max(1, width >> i1);
+                    for(var faceIndex = 0; faceIndex < 6; faceIndex++){
+                        gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, i1, internalFormat, size, size, 0, baseFormat, dataType, null);
+                    }
+                }
+            }
+        }
+    };
+    /**
+   * Get the pixel color buffer according to the specified cube face and area.
+   * @param face - You can choose which cube face to read
+   * @param x - X coordinate of area start
+   * @param y - Y coordinate of area start
+   * @param width - Area width
+   * @param height - Area height
+   * @param out - Color buffer
+   * @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, readFormat = _this__formatDetail.readFormat, alignment = _this__formatDetail.alignment;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._getReadFrameBuffer());
+        if (mipLevel > 0 && !this._isWebGL2) {
+            mipLevel = 0;
+            Logger.error("mipLevel only take effect in WebGL2.0");
+        }
+        if (face != null) {
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + face, this._glTexture, mipLevel);
+        } else {
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._glTexture, mipLevel);
+        }
+        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 && !TextureUtils.supportSRGB(format)) {
+            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 && !TextureUtils.supportMipmaps(width, height, isWebGL2)) {
+            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 !== TextureWrapMode.Clamp && (!MathUtil.isPowerOf2(width) || !MathUtil.isPowerOf2(height))) {
+            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 = TextureWrapMode.Clamp;
+        }
+        switch(value){
+            case TextureWrapMode.Clamp:
+                gl.texParameteri(target, pname, gl.CLAMP_TO_EDGE);
+                break;
+            case TextureWrapMode.Repeat:
+                gl.texParameteri(target, pname, gl.REPEAT);
+                break;
+            case TextureWrapMode.Mirror:
+                gl.texParameteri(target, pname, gl.MIRRORED_REPEAT);
+                break;
+        }
+    };
+    /**
+   * Get more texture info from TextureFormat.
+   * @internal
+   */ GLTexture._getFormatDetail = function _getFormatDetail(format, isSRGBColorSpace, gl, isWebGL2) {
+        switch(format){
+            case TextureFormat.R8G8B8:
+                return {
+                    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,
+                    alignment: 1
+                };
+            case TextureFormat.R8G8B8A8:
+                return {
+                    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,
+                    alignment: 4
+                };
+            case TextureFormat.R4G4B4A4:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGBA4 : gl.RGBA,
+                    baseFormat: gl.RGBA,
+                    dataType: gl.UNSIGNED_SHORT_4_4_4_4,
+                    isCompressed: false,
+                    alignment: 2
+                };
+            case TextureFormat.R5G5B5A1:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGB5_A1 : gl.RGBA,
+                    baseFormat: gl.RGBA,
+                    dataType: gl.UNSIGNED_SHORT_5_5_5_1,
+                    isCompressed: false,
+                    alignment: 2
+                };
+            case TextureFormat.R5G6B5:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGB565 : gl.RGB,
+                    baseFormat: gl.RGB,
+                    dataType: gl.UNSIGNED_SHORT_5_6_5,
+                    isCompressed: false,
+                    alignment: 2
+                };
+            case TextureFormat.Alpha8:
+                return {
+                    internalFormat: gl.ALPHA,
+                    baseFormat: gl.ALPHA,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false,
+                    alignment: 1
+                };
+            case TextureFormat.LuminanceAlpha:
+                return {
+                    internalFormat: gl.LUMINANCE_ALPHA,
+                    baseFormat: gl.LUMINANCE_ALPHA,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false,
+                    alignment: 2
+                };
+            case TextureFormat.R16G16B16A16:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGBA16F : gl.RGBA,
+                    baseFormat: gl.RGBA,
+                    dataType: gl.HALF_FLOAT,
+                    isCompressed: false,
+                    alignment: 8
+                };
+            case TextureFormat.R32G32B32A32:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGBA32F : gl.RGBA,
+                    baseFormat: gl.RGBA,
+                    dataType: gl.FLOAT,
+                    isCompressed: false,
+                    alignment: 8
+                };
+            // Only WebGL2 support
+            case TextureFormat.R11G11B10_UFloat:
+                return {
+                    internalFormat: gl.R11F_G11F_B10F,
+                    baseFormat: gl.RGB,
+                    dataType: gl.FLOAT,
+                    isCompressed: false,
+                    alignment: 4
+                };
+            // Only WebGL2 support
+            case TextureFormat.R32G32B32A32_UInt:
+                return {
+                    internalFormat: gl.RGBA32UI,
+                    baseFormat: gl.RGBA_INTEGER,
+                    dataType: gl.UNSIGNED_INT,
+                    isCompressed: false,
+                    alignment: 8
+                };
+            // Only WebGL2 support
+            case TextureFormat.R8:
+                return {
+                    internalFormat: gl.R8,
+                    baseFormat: gl.RED,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false,
+                    alignment: 1
+                };
+            // Only WebGL2 support
+            case TextureFormat.R8G8:
+                return {
+                    internalFormat: gl.RG8,
+                    baseFormat: gl.RG,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false,
+                    alignment: 2
+                };
+            case TextureFormat.BC1:
+                return {
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB_S3TC_DXT1_EXT : GLCompressedTextureInternalFormat.RGB_S3TC_DXT1_EXT,
+                    isCompressed: true
+                };
+            case TextureFormat.BC3:
+                return {
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB_ALPHA_S3TC_DXT5_EXT : GLCompressedTextureInternalFormat.RGBA_S3TC_DXT5_EXT,
+                    isCompressed: true
+                };
+            case TextureFormat.BC7:
+                return {
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB_ALPHA_BPTC_UNORM_EXT : GLCompressedTextureInternalFormat.RGBA_BPTC_UNORM_EXT,
+                    isCompressed: true
+                };
+            case TextureFormat.BC6H:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGB_BPTC_UNSIGNED_FLOAT_EXT,
+                    isCompressed: true
+                };
+            case TextureFormat.ETC1_RGB:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGB_ETC1_WEBGL,
+                    isCompressed: true
+                };
+            case TextureFormat.ETC2_RGB:
+                return {
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB8_ETC2 : GLCompressedTextureInternalFormat.RGB8_ETC2,
+                    isCompressed: true
+                };
+            case TextureFormat.ETC2_RGBA5:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGB8_PUNCHTHROUGH_ALPHA1_ETC2,
+                    isCompressed: true
+                };
+            case TextureFormat.ETC2_RGBA8:
+                return {
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB8_ALPHA8_ETC2_EAC : GLCompressedTextureInternalFormat.RGBA8_ETC2_EAC,
+                    isCompressed: true
+                };
+            case TextureFormat.PVRTC_RGB2:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGB_PVRTC_2BPPV1_IMG,
+                    isCompressed: true
+                };
+            case TextureFormat.PVRTC_RGBA2:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGBA_PVRTC_2BPPV1_IMG,
+                    isCompressed: true
+                };
+            case TextureFormat.PVRTC_RGB4:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGB_PVRTC_4BPPV1_IMG,
+                    isCompressed: true
+                };
+            case TextureFormat.PVRTC_RGBA4:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGBA_PVRTC_4BPPV1_IMG,
+                    isCompressed: true
+                };
+            case TextureFormat.ASTC_4x4:
+                return {
+                    internalFormat: isSRGBColorSpace ? GLCompressedTextureInternalFormat.SRGB8_ALPHA8_ASTC_4X4_KHR : GLCompressedTextureInternalFormat.RGBA_ASTC_4X4_KHR,
+                    isCompressed: true
+                };
+            case TextureFormat.ASTC_5x5:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGBA_ASTC_5X5_KHR,
+                    isCompressed: true
+                };
+            case TextureFormat.ASTC_6x6:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGBA_ASTC_6X6_KHR,
+                    isCompressed: true
+                };
+            case TextureFormat.ASTC_8x8:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGBA_ASTC_8X8_KHR,
+                    isCompressed: true
+                };
+            case TextureFormat.ASTC_10x10:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGBA_ASTC_10X10_KHR,
+                    isCompressed: true
+                };
+            case TextureFormat.ASTC_12x12:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGBA_ASTC_12X12_KHR,
+                    isCompressed: true
+                };
+            case TextureFormat.Depth:
+                return {
+                    internalFormat: isWebGL2 ? gl.DEPTH_COMPONENT32F : gl.DEPTH_COMPONENT,
+                    baseFormat: gl.DEPTH_COMPONENT,
+                    dataType: isWebGL2 ? gl.FLOAT : gl.UNSIGNED_SHORT,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_ATTACHMENT
+                };
+            case TextureFormat.DepthStencil:
+                return {
+                    internalFormat: isWebGL2 ? gl.DEPTH32F_STENCIL8 : gl.DEPTH_STENCIL,
+                    baseFormat: gl.DEPTH_STENCIL,
+                    dataType: isWebGL2 ? gl.FLOAT_32_UNSIGNED_INT_24_8_REV : gl.UNSIGNED_INT_24_8,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_STENCIL_ATTACHMENT
+                };
+            case TextureFormat.Depth16:
+                return {
+                    internalFormat: isWebGL2 ? gl.DEPTH_COMPONENT16 : gl.DEPTH_COMPONENT,
+                    baseFormat: gl.DEPTH_COMPONENT,
+                    dataType: gl.UNSIGNED_SHORT,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_ATTACHMENT
+                };
+            case TextureFormat.Depth24Stencil8:
+                return {
+                    internalFormat: isWebGL2 ? gl.DEPTH24_STENCIL8 : gl.DEPTH_STENCIL,
+                    baseFormat: gl.DEPTH_STENCIL,
+                    dataType: gl.UNSIGNED_INT_24_8,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_STENCIL_ATTACHMENT
+                };
+            // Only WebGL2 support
+            case TextureFormat.Depth24:
+                return {
+                    internalFormat: gl.DEPTH_COMPONENT24,
+                    baseFormat: gl.DEPTH_COMPONENT,
+                    dataType: gl.UNSIGNED_INT,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_ATTACHMENT
+                };
+            // Only WebGL2 support
+            case TextureFormat.Depth32:
+                return {
+                    internalFormat: gl.DEPTH_COMPONENT32F,
+                    baseFormat: gl.DEPTH_COMPONENT,
+                    dataType: gl.FLOAT,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_ATTACHMENT
+                };
+            // Only WebGL2 support
+            case TextureFormat.Depth32Stencil8:
+                return {
+                    internalFormat: gl.DEPTH32F_STENCIL8,
+                    baseFormat: gl.DEPTH_STENCIL,
+                    dataType: gl.FLOAT_32_UNSIGNED_INT_24_8_REV,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_STENCIL_ATTACHMENT
+                };
+            default:
+                throw new Error("this TextureFormat is not supported in Galacean Engine: " + format);
+        }
+    };
+    /**
+   * In WebGL 1, internalformat must be the same as baseFormat when call texImage2D.
+   * @internal
+   */ GLTexture._getRenderBufferDepthFormatDetail = function _getRenderBufferDepthFormatDetail(format, gl, isWebGL2) {
+        switch(format){
+            case TextureFormat.Depth:
+                return {
+                    internalFormat: isWebGL2 ? gl.DEPTH_COMPONENT32F : gl.DEPTH_COMPONENT16,
+                    baseFormat: gl.DEPTH_COMPONENT,
+                    dataType: isWebGL2 ? gl.FLOAT : gl.UNSIGNED_SHORT,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_ATTACHMENT
+                };
+            case TextureFormat.DepthStencil:
+                return {
+                    internalFormat: isWebGL2 ? gl.DEPTH32F_STENCIL8 : gl.DEPTH_STENCIL,
+                    baseFormat: gl.DEPTH_STENCIL,
+                    dataType: isWebGL2 ? gl.FLOAT_32_UNSIGNED_INT_24_8_REV : gl.UNSIGNED_INT_24_8,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_STENCIL_ATTACHMENT
+                };
+            case TextureFormat.Stencil:
+                return {
+                    internalFormat: gl.STENCIL_INDEX8,
+                    baseFormat: gl.STENCIL_ATTACHMENT,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false,
+                    attachment: gl.STENCIL_ATTACHMENT
+                };
+            case TextureFormat.Depth16:
+                return {
+                    internalFormat: gl.DEPTH_COMPONENT16,
+                    baseFormat: gl.DEPTH_COMPONENT,
+                    dataType: gl.UNSIGNED_SHORT,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_ATTACHMENT
+                };
+            case TextureFormat.Depth24Stencil8:
+                return {
+                    internalFormat: isWebGL2 ? gl.DEPTH24_STENCIL8 : gl.DEPTH_STENCIL,
+                    baseFormat: gl.DEPTH_STENCIL,
+                    dataType: gl.UNSIGNED_INT_24_8,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_STENCIL_ATTACHMENT
+                };
+            case TextureFormat.Depth24:
+                return {
+                    internalFormat: gl.DEPTH_COMPONENT24,
+                    baseFormat: gl.DEPTH_COMPONENT,
+                    dataType: gl.UNSIGNED_INT,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_ATTACHMENT
+                };
+            case TextureFormat.Depth32:
+                return {
+                    internalFormat: gl.DEPTH_COMPONENT32F,
+                    baseFormat: gl.DEPTH_COMPONENT,
+                    dataType: gl.FLOAT,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_ATTACHMENT
+                };
+            case TextureFormat.Depth32Stencil8:
+                return {
+                    internalFormat: gl.DEPTH32F_STENCIL8,
+                    baseFormat: gl.DEPTH_STENCIL,
+                    dataType: gl.FLOAT_32_UNSIGNED_INT_24_8_REV,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_STENCIL_ATTACHMENT
+                };
+            default:
+                throw new Error("this TextureFormat is not supported in Galacean Engine: " + format);
+        }
+    };
+    /**
+   * @internal
+   */ GLTexture._supportRenderBufferColorFormat = function _supportRenderBufferColorFormat(format, rhi) {
+        var isSupported = true;
+        switch(format){
+            case TextureFormat.R16G16B16A16:
+                {
+                    if (!rhi.canIUse(GLCapabilityType.colorBufferHalfFloat) || !rhi.canIUse(GLCapabilityType.textureHalfFloat)) {
+                        isSupported = false;
+                    }
+                }
+                break;
+            case TextureFormat.R32G32B32A32:
+                {
+                    if (!rhi.canIUse(GLCapabilityType.colorBufferFloat) || !rhi.canIUse(GLCapabilityType.textureFloat)) {
+                        isSupported = false;
+                    }
+                }
+                break;
+            case TextureFormat.R11G11B10_UFloat:
+                {
+                    isSupported = rhi.isWebGL2;
+                }
+                break;
+        }
+        return isSupported;
+    };
+    /**
+   * @internal
+   */ GLTexture._supportRenderBufferDepthFormat = function _supportRenderBufferDepthFormat(format, rhi) {
+        if (!rhi.isWebGL2) {
+            switch(format){
+                case TextureFormat.Depth24:
+                case TextureFormat.Depth32:
+                case TextureFormat.Depth32Stencil8:
+                    return false;
+            }
+        }
+        return true;
+    };
+    _create_class(GLTexture, [
+        {
+            key: "wrapModeU",
+            set: /**
+   * Wrapping mode for texture coordinate S.
+   */ function set(value) {
+                this._bind();
+                this._setWrapMode(value, this._gl.TEXTURE_WRAP_S);
+            }
+        },
+        {
+            key: "wrapModeV",
+            set: /**
+   * Wrapping mode for texture coordinate T.
+   */ function set(value) {
+                this._bind();
+                this._setWrapMode(value, this._gl.TEXTURE_WRAP_T);
+            }
+        },
+        {
+            key: "filterMode",
+            set: /**
+   * Filter mode for texture.
+   */ function set(value) {
+                var gl = this._gl;
+                var target = this._target;
+                /** @ts-ignore */ var _mipmap = this._texture._mipmap;
+                this._bind();
+                switch(value){
+                    case TextureFilterMode.Point:
+                        gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+                        gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, _mipmap ? gl.NEAREST_MIPMAP_NEAREST : gl.NEAREST);
+                        break;
+                    case TextureFilterMode.Bilinear:
+                        gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                        gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, _mipmap ? gl.LINEAR_MIPMAP_NEAREST : gl.LINEAR);
+                        break;
+                    case TextureFilterMode.Trilinear:
+                        gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                        gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, _mipmap ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
+                        break;
+                }
+            }
+        },
+        {
+            key: "anisoLevel",
+            set: /**
+   * Anisotropic level for texture.
+   */ function set(value) {
+                var gl = this._gl;
+                this._bind();
+                gl.texParameterf(this._target, gl.TEXTURE_MAX_ANISOTROPY_EXT, value);
+            }
+        },
+        {
+            key: "depthCompareFunction",
+            set: function set(value) {
+                this._bind();
+                var gl = this._gl;
+                switch(value){
+                    case TextureDepthCompareFunction.Never:
+                        gl.texParameteri(this._target, gl.TEXTURE_COMPARE_FUNC, gl.NEVER);
+                        break;
+                    case TextureDepthCompareFunction.Less:
+                        gl.texParameteri(this._target, gl.TEXTURE_COMPARE_FUNC, gl.LESS);
+                        break;
+                    case TextureDepthCompareFunction.Equal:
+                        gl.texParameteri(this._target, gl.TEXTURE_COMPARE_FUNC, gl.EQUAL);
+                        break;
+                    case TextureDepthCompareFunction.LessEqual:
+                        gl.texParameteri(this._target, gl.TEXTURE_COMPARE_FUNC, gl.LEQUAL);
+                        break;
+                    case TextureDepthCompareFunction.Greater:
+                        gl.texParameteri(this._target, gl.TEXTURE_COMPARE_FUNC, gl.GREATER);
+                        break;
+                    case TextureDepthCompareFunction.NotEqual:
+                        gl.texParameteri(this._target, gl.TEXTURE_COMPARE_FUNC, gl.NOTEQUAL);
+                        break;
+                    case TextureDepthCompareFunction.GreaterEqual:
+                        gl.texParameteri(this._target, gl.TEXTURE_COMPARE_FUNC, gl.GEQUAL);
+                        break;
+                    case TextureDepthCompareFunction.Always:
+                        gl.texParameteri(this._target, gl.TEXTURE_COMPARE_FUNC, gl.ALWAYS);
+                        break;
+                }
+            }
+        }
+    ]);
+    return GLTexture;
+}();
+
+/**
+ * The render target in WebGL platform is used for off-screen rendering.
+ */ var GLRenderTarget = /*#__PURE__*/ function() {
+    function GLRenderTarget(rhi, target) {
+        this._MSAAColorRenderBuffers = [];
+        this._curMipLevel = 0;
+        this._curFaceIndex = undefined;
+        this._gl = rhi.gl;
+        this._isWebGL2 = rhi.isWebGL2;
+        this._target = target;
+        /** @ts-ignore */ var _colorTextures = target._colorTextures, _depth = target._depth, width = target.width, height = target.height;
+        var isDepthTexture = _instanceof(_depth, Texture);
+        /** todo
+     * MRT + Cube + [,MSAA]
+     * MRT + MSAA
+     */ for(var i = 0, n = _colorTextures.length; i < n; i++){
+            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:" + TextureFormat[format] + " in RenderTarget");
+            }
+            if (isSRGBColorSpace && format === 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:" + TextureFormat[_depth] + " in RenderTarget");
+        }
+        if (_colorTextures.length > 1 && !rhi.canIUse(GLCapabilityType.drawBuffers)) {
+            throw new Error("MRT is not supported");
+        }
+        if (_colorTextures.some(function(v) {
+            return v.width !== width || v.height !== height;
+        })) {
+            throw new Error("ColorTexture's size must as same as RenderTarget");
+        }
+        if (isDepthTexture && (_depth.width !== width || _depth.height !== height)) {
+            throw new Error("DepthTexture's size must as same as RenderTarget");
+        }
+        // todo: necessary to support MRT + Cube + [,MSAA] ?
+        if (_colorTextures.length > 1 && _colorTextures.some(function(v) {
+            return _instanceof(v, TextureCube);
+        })) {
+            throw new Error("MRT+Cube+[,MSAA] is not supported");
+        }
+        var maxAntiAliasing = rhi.capability.maxAntiAliasing;
+        if (target.antiAliasing > maxAntiAliasing) {
+            Logger.warn("MSAA antiAliasing exceeds the limit and is automatically downgraded to:" + maxAntiAliasing);
+            /** @ts-ignore */ target._antiAliasing = maxAntiAliasing;
+        }
+        this._frameBuffer = this._gl.createFramebuffer();
+        // bind main FBO
+        this._bindMainFBO();
+        // bind MSAA FBO
+        if (target.antiAliasing > 1) {
+            this._MSAAFrameBuffer = this._gl.createFramebuffer();
+            this._bindMSAAFBO();
+        }
+    }
+    var _proto = GLRenderTarget.prototype;
+    /**
+   * Set which face and mipLevel of the cube texture to render to.
+   * @param mipLevel - Set mip level the data want to write
+   * @param faceIndex - Cube texture face
+   */ _proto.activeRenderTarget = function activeRenderTarget(mipLevel, faceIndex) {
+        // @todo: support MRT
+        var _this = this, gl = _this._gl, target = _this._target;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
+        var mipChanged = mipLevel !== this._curMipLevel;
+        var faceChanged = faceIndex !== this._curFaceIndex;
+        var colorTexture = target.getColorTexture(0);
+        if (colorTexture) {
+            var isCube = _instanceof(colorTexture, TextureCube);
+            if (mipChanged || isCube && faceChanged) {
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, isCube ? gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex : gl.TEXTURE_2D, // @ts-ignore
+                colorTexture._platformTexture._glTexture, mipLevel);
+            }
+        }
+        var depthTexture = target.depthTexture;
+        if (depthTexture) {
+            var isCube1 = _instanceof(depthTexture, TextureCube);
+            if (mipChanged || isCube1) {
+                // @ts-ignore
+                var platformTexture = depthTexture._platformTexture;
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, platformTexture._formatDetail.attachment, isCube1 ? gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex : gl.TEXTURE_2D, platformTexture._glTexture, mipLevel);
+            }
+        } else {
+            if (mipChanged) {
+                // @ts-ignore
+                var internalFormat = GLTexture._getRenderBufferDepthFormatDetail(target._depth, gl, this._isWebGL2).internalFormat;
+                gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthRenderBuffer);
+                gl.renderbufferStorage(gl.RENDERBUFFER, internalFormat, target.width >> mipLevel, target.height >> mipLevel);
+            }
+        }
+        this._curMipLevel = mipLevel;
+        this._curFaceIndex = faceIndex;
+        if (this._MSAAFrameBuffer) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this._MSAAFrameBuffer);
+        }
+    };
+    /**
+   * Blit FBO.
+   */ _proto.blitRenderTarget = function blitRenderTarget() {
+        if (!this._MSAAFrameBuffer) return;
+        var gl = this._gl;
+        var mask = gl.COLOR_BUFFER_BIT | (this._target.depthTexture ? gl.DEPTH_BUFFER_BIT : 0);
+        var _this__target = this._target, colorTextureCount = _this__target.colorTextureCount, width = _this__target.width, height = _this__target.height;
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this._MSAAFrameBuffer);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this._frameBuffer);
+        for(var textureIndex = 0; textureIndex < colorTextureCount; textureIndex++){
+            var attachment = gl.COLOR_ATTACHMENT0 + textureIndex;
+            this._blitDrawBuffers[textureIndex] = attachment;
+            gl.readBuffer(attachment);
+            gl.drawBuffers(this._blitDrawBuffers);
+            gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, mask, gl.NEAREST);
+            this._blitDrawBuffers[textureIndex] = gl.NONE;
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    };
+    /**
+   * Destroy render target.
+   */ _proto.destroy = function destroy() {
+        var gl = this._gl;
+        this._frameBuffer && gl.deleteFramebuffer(this._frameBuffer);
+        this._depthRenderBuffer && gl.deleteRenderbuffer(this._depthRenderBuffer);
+        this._MSAAFrameBuffer && gl.deleteFramebuffer(this._MSAAFrameBuffer);
+        this._MSAADepthRenderBuffer && gl.deleteRenderbuffer(this._MSAADepthRenderBuffer);
+        for(var i = 0; i < this._MSAAColorRenderBuffers.length; i++){
+            gl.deleteRenderbuffer(this._MSAAColorRenderBuffers[i]);
+        }
+        this._frameBuffer = null;
+        this._depthRenderBuffer = null;
+        this._MSAAFrameBuffer = null;
+        this._MSAAColorRenderBuffers.length = 0;
+        this._MSAADepthRenderBuffer = null;
+    };
+    _proto._bindMainFBO = function _bindMainFBO() {
+        var gl = this._gl;
+        var isWebGL2 = this._isWebGL2;
+        /** @ts-ignore */ var _this__target = this._target, _depth = _this__target._depth, colorTextureCount = _this__target.colorTextureCount, width = _this__target.width, height = _this__target.height;
+        var drawBuffers = new Array(colorTextureCount);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
+        /** color render buffer */ for(var i = 0; i < colorTextureCount; i++){
+            var colorTexture = this._target.getColorTexture(i);
+            var attachment = gl.COLOR_ATTACHMENT0 + i;
+            drawBuffers[i] = attachment;
+            if (!_instanceof(colorTexture, TextureCube)) {
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, attachment, gl.TEXTURE_2D, /** @ts-ignore */ colorTexture._platformTexture._glTexture, 0);
+            }
+        }
+        if (colorTextureCount > 1) {
+            gl.drawBuffers(drawBuffers);
+        }
+        this._oriDrawBuffers = drawBuffers;
+        /** depth render buffer */ if (_depth !== null) {
+            if (_instanceof(_depth, Texture) && !_instanceof(_depth, TextureCube)) {
+                // @ts-ignore
+                var platformTexture = _depth._platformTexture;
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, platformTexture._formatDetail.attachment, gl.TEXTURE_2D, platformTexture._glTexture, 0);
+            } else if (this._target.antiAliasing <= 1) {
+                var _GLTexture__getRenderBufferDepthFormatDetail = GLTexture._getRenderBufferDepthFormatDetail(_depth, gl, isWebGL2), internalFormat = _GLTexture__getRenderBufferDepthFormatDetail.internalFormat, attachment1 = _GLTexture__getRenderBufferDepthFormatDetail.attachment;
+                var depthRenderBuffer = gl.createRenderbuffer();
+                this._depthRenderBuffer = depthRenderBuffer;
+                gl.bindRenderbuffer(gl.RENDERBUFFER, depthRenderBuffer);
+                gl.renderbufferStorage(gl.RENDERBUFFER, internalFormat, width, height);
+                gl.framebufferRenderbuffer(gl.FRAMEBUFFER, attachment1, gl.RENDERBUFFER, depthRenderBuffer);
+            }
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+    };
+    _proto._bindMSAAFBO = function _bindMSAAFBO() {
+        var gl = this._gl;
+        var isWebGL2 = this._isWebGL2;
+        var MSAADepthRenderBuffer = gl.createRenderbuffer();
+        /** @ts-ignore */ var _this__target = this._target, _depth = _this__target._depth, colorTextureCount = _this__target.colorTextureCount, antiAliasing = _this__target.antiAliasing, width = _this__target.width, height = _this__target.height;
+        this._blitDrawBuffers = new Array(colorTextureCount);
+        this._MSAADepthRenderBuffer = MSAADepthRenderBuffer;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._MSAAFrameBuffer);
+        // prepare MRT+MSAA color RBOs
+        for(var i = 0; i < colorTextureCount; i++){
+            var MSAAColorRenderBuffer = gl.createRenderbuffer();
+            this._MSAAColorRenderBuffers[i] = MSAAColorRenderBuffer;
+            this._blitDrawBuffers[i] = gl.NONE;
+            gl.bindRenderbuffer(gl.RENDERBUFFER, MSAAColorRenderBuffer);
+            gl.renderbufferStorageMultisample(gl.RENDERBUFFER, antiAliasing, /** @ts-ignore */ this._target.getColorTexture(i)._platformTexture._formatDetail.internalFormat, width, height);
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.RENDERBUFFER, MSAAColorRenderBuffer);
+        }
+        gl.drawBuffers(this._oriDrawBuffers);
+        // prepare MSAA depth RBO
+        if (_depth !== null) {
+            var _ref = _instanceof(_depth, Texture) ? /** @ts-ignore */ _depth._platformTexture._formatDetail : GLTexture._getRenderBufferDepthFormatDetail(_depth, gl, isWebGL2), internalFormat = _ref.internalFormat, attachment = _ref.attachment;
+            gl.bindRenderbuffer(gl.RENDERBUFFER, MSAADepthRenderBuffer);
+            gl.renderbufferStorageMultisample(gl.RENDERBUFFER, antiAliasing, internalFormat, width, height);
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, attachment, gl.RENDERBUFFER, MSAADepthRenderBuffer);
+        }
+        this._checkFrameBuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+    };
+    _proto._checkFrameBuffer = function _checkFrameBuffer() {
+        var gl = this._gl;
+        var e = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+        switch(e){
+            case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT:
+                throw new Error("The attachment types are mismatched or not all framebuffer attachment points are framebuffer attachment complete");
+            case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT:
+                throw new Error("There is no attachment");
+            case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS:
+                throw new Error(" Height and width of the attachment are not the same.");
+            case gl.FRAMEBUFFER_UNSUPPORTED:
+                // #5.14.3 Event Types in https://registry.khronos.org/webgl/specs/1.0.0/
+                if (!gl.isContextLost()) {
+                    throw new Error("The format of the attachment is not supported or if depth and stencil attachments are not the same renderbuffer");
+                }
+                break;
+            case gl.FRAMEBUFFER_INCOMPLETE_MULTISAMPLE:
+                throw new Error("The values of gl.RENDERBUFFER_SAMPLES are different among attached renderbuffers, or are non-zero if the attached images are a mix of renderbuffers and textures.");
+        }
+    };
+    return GLRenderTarget;
+}();
+
+/**
+ * Texture 2d in WebGL platform.
+ */ var GLTexture2D = /*#__PURE__*/ function(GLTexture1) {
+    _inherits(GLTexture2D, GLTexture1);
+    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;
+        _this._validate(texture2D, rhi);
+        var format = texture2D.format, isSRGBColorSpace = texture2D.isSRGBColorSpace;
+        var isWebGL2 = _this._isWebGL2;
+        _this._formatDetail = GLTexture._getFormatDetail(format, isSRGBColorSpace, _this._gl, isWebGL2);
+        _this._formatDetail.isCompressed && !isWebGL2 || _this._init(false);
+        return _this;
+    }
+    var _proto = GLTexture2D.prototype;
+    /**
+   * {@inheritDoc IPlatformTexture2D.setPixelBuffer}
+   */ _proto.setPixelBuffer = function setPixelBuffer(colorBuffer, mipLevel, x, y, width, height) {
+        if (mipLevel === void 0) mipLevel = 0;
+        var gl = this._gl;
+        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();
+        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);
+            } else {
+                gl.compressedTexImage2D(this._target, mipLevel, internalFormat, width, height, 0, colorBuffer);
+                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);
+        }
+    };
+    /**
+   * {@inheritDoc IPlatformTexture2D.setImageSource}
+   */ _proto.setImageSource = function setImageSource(imageSource, mipLevel, flipY, premultiplyAlpha, x, y) {
+        var gl = this._gl;
+        var _this__formatDetail = this._formatDetail, internalFormat = _this__formatDetail.internalFormat, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType;
+        this._bind();
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, +flipY);
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, +premultiplyAlpha);
+        if (this._texture.usage === TextureUsage.Dynamic) {
+            gl.texImage2D(this._target, mipLevel, internalFormat, baseFormat, dataType, imageSource);
+        } else {
+            gl.texSubImage2D(this._target, mipLevel, x || 0, y || 0, baseFormat, dataType, imageSource);
+        }
+    };
+    /**
+   * {@inheritDoc IPlatformTexture2D.getPixelBuffer }
+   */ _proto.getPixelBuffer = function getPixelBuffer(x, y, width, height, mipLevel, out) {
+        if (this._formatDetail.isCompressed) {
+            throw new Error("Unable to read compressed texture");
+        }
+        GLTexture1.prototype._getPixelBuffer.call(this, null, x, y, width, height, mipLevel, out);
+    };
+    return GLTexture2D;
+}(GLTexture);
+
+/**
+ * Texture 2D array in WebGL platform.
+ */ var GLTexture2DArray = /*#__PURE__*/ function(GLTexture1) {
+    _inherits(GLTexture2DArray, GLTexture1);
+    function GLTexture2DArray(rhi, texture2DArray) {
+        var _this;
+        _this = GLTexture1.call(this, rhi, texture2DArray, rhi.gl.TEXTURE_2D_ARRAY) || this;
+        _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, isSRGBColorSpace, _this._gl, true);
+        _this._gl.texStorage3D(_this._target, mipmapCount, _this._formatDetail.internalFormat, width, height, length);
+        return _this;
+    }
+    var _proto = GLTexture2DArray.prototype;
+    /**
+   * {@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 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 {
+            gl.texSubImage3D(target, mipLevel, x, y, offsetIndex, width, height, length, baseFormat, dataType, colorBuffer);
+        }
+    };
+    /**
+   * {@inheritDoc IPlatformTexture2DArray.setImageSource}
+   */ _proto.setImageSource = function setImageSource(elementIndex, imageSource, mipLevel, flipY, premultiplyAlpha, x, y) {
+        var gl = this._gl;
+        var _this__formatDetail = this._formatDetail, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType;
+        this._bind();
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, +flipY);
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, +premultiplyAlpha);
+        var _imageSource_width, _imageSource_height;
+        gl.texSubImage3D(this._target, mipLevel, x, y, elementIndex, (_imageSource_width = imageSource.width) != null ? _imageSource_width : imageSource.codedWidth, (_imageSource_height = imageSource.height) != null ? _imageSource_height : imageSource.codedHeight, 1, baseFormat, dataType, imageSource);
+    };
+    /**
+   * {@inheritDoc IPlatformTexture2DArray.getPixelBuffer}
+   */ _proto.getPixelBuffer = function getPixelBuffer(elementIndex, x, y, width, height, mipLevel, out) {
+        var _this = this, gl = _this._gl, formatDetail = _this._formatDetail;
+        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 && !TextureUtils.supportSRGB(format)) {
+            Logger.warn("Only support sRGB color space in RGB8 or RGBA8 or some compressed texture format");
+            // @ts-ignore
+            texture._isSRGBColorSpace = false;
+        }
+    };
+    return GLTexture2DArray;
+}(GLTexture);
+
+/**
+ * Cube texture in WebGL platform.
+ */ var GLTextureCube = /*#__PURE__*/ function(GLTexture1) {
+    _inherits(GLTextureCube, GLTexture1);
+    function GLTextureCube(rhi, textureCube) {
+        var _this;
+        _this = GLTexture1.call(this, rhi, textureCube, rhi.gl.TEXTURE_CUBE_MAP) || this, /** Backward compatible with WebGL1.0. */ _this._compressedFaceFilled = [
+            0,
+            0,
+            0,
+            0,
+            0,
+            0
+        ];
+        _this._validate(textureCube, rhi);
+        var format = textureCube.format, isSRGBColorSpace = textureCube.isSRGBColorSpace;
+        var isWebGL2 = _this._isWebGL2;
+        _this._formatDetail = GLTexture._getFormatDetail(format, isSRGBColorSpace, _this._gl, isWebGL2);
+        _this._formatDetail.isCompressed && !isWebGL2 || _this._init(true);
+        return _this;
+    }
+    var _proto = GLTextureCube.prototype;
+    /**
+   * {@inheritDoc IPlatformTextureCube.setPixelBuffer}
+   */ _proto.setPixelBuffer = function setPixelBuffer(face, colorBuffer, mipLevel, x, y, width, height) {
+        var gl = this._gl;
+        var isWebGL2 = this._isWebGL2;
+        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) {
+                gl.compressedTexSubImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + face, mipLevel, x, y, width, height, internalFormat, colorBuffer);
+            } else {
+                gl.compressedTexImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + face, mipLevel, internalFormat, width, height, 0, colorBuffer);
+                this._compressedFaceFilled[face] |= mipBit;
+            }
+        } else {
+            gl.texSubImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + face, mipLevel, x, y, width, height, baseFormat, dataType, colorBuffer);
+        }
+    };
+    /**
+   * {@inheritDoc IPlatformTextureCube.setImageSource}
+   */ _proto.setImageSource = function setImageSource(face, imageSource, mipLevel, flipY, premultiplyAlpha, x, y) {
+        var gl = this._gl;
+        var _this__formatDetail = this._formatDetail, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType;
+        this._bind();
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, +flipY);
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, +premultiplyAlpha);
+        gl.texSubImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + face, mipLevel, x || 0, y || 0, baseFormat, dataType, imageSource);
+    };
+    /**
+   * {@inheritDoc IPlatformTextureCube.getPixelBuffer}
+   */ _proto.getPixelBuffer = function getPixelBuffer(face, x, y, width, height, mipLevel, out) {
+        if (this._formatDetail.isCompressed) {
+            throw new Error("Unable to read compressed texture");
+        }
+        GLTexture1.prototype._getPixelBuffer.call(this, face, x, y, width, height, mipLevel, out);
+    };
+    return GLTextureCube;
+}(GLTexture);
+
+/**
+ * WebGL mode.
+ */ var WebGLMode = /*#__PURE__*/ function(WebGLMode) {
+    /** Auto, use WebGL2.0 if support, or will fallback to WebGL1.0. */ WebGLMode[WebGLMode["Auto"] = 0] = "Auto";
+    /** WebGL2.0. */ WebGLMode[WebGLMode["WebGL2"] = 1] = "WebGL2";
+    /** WebGL1.0, */ WebGLMode[WebGLMode["WebGL1"] = 2] = "WebGL1";
+    return WebGLMode;
+}({});
+/**
+ * WebGL graphic device, including WebGL1.0 and WebGL2.0.
+ */ var WebGLGraphicDevice = /*#__PURE__*/ function() {
+    function WebGLGraphicDevice(initializeOptions) {
+        if (initializeOptions === void 0) initializeOptions = {};
+        /** @internal */ this._readFrameBuffer = null;
+        /** @internal */ this._mainFrameBuffer = null;
+        /** @internal */ this._mainFrameWidth = 0;
+        /** @internal */ this._mainFrameHeight = 0;
+        /** @internal */ this._enableGlobalDepthBias = false;
+        this._activeTextures = new Array(32);
+        this._lastViewport = new Vector4(null, null, null, null);
+        this._lastScissor = new Vector4(null, null, null, null);
+        this._lastClearColor = new Color(null, null, null, null);
+        this._scissorEnable = false;
+        var options = _extends({
+            webGLMode: 0,
+            _forceFlush: false,
+            _maxAllowSkinUniformVectorCount: 256,
+            alpha: true,
+            depth: true,
+            stencil: true,
+            failIfMajorPerformanceCaveat: false,
+            powerPreference: "default",
+            premultipliedAlpha: true,
+            preserveDrawingBuffer: false,
+            desynchronized: false,
+            xrCompatible: false
+        }, initializeOptions);
+        if (SystemInfo.platform === Platform.IPhone || SystemInfo.platform === Platform.IPad) {
+            var version = SystemInfo.operatingSystem.match(/(\d+).?(\d+)?.?(\d+)?/);
+            if (version) {
+                var majorVersion = parseInt(version[1]);
+                var minorVersion = parseInt(version[2]);
+                if (majorVersion === 15 && minorVersion >= 0 && minorVersion <= 4) {
+                    options._forceFlush = true;
+                }
+            }
+        }
+        this._options = options;
+        // Force disable stencil, antialias and depth, we configure them in internal render target
+        this._webGLOptions = {
+            antialias: false,
+            depth: false,
+            stencil: false,
+            alpha: options.alpha,
+            failIfMajorPerformanceCaveat: options.failIfMajorPerformanceCaveat,
+            powerPreference: options.powerPreference,
+            premultipliedAlpha: options.premultipliedAlpha,
+            preserveDrawingBuffer: options.preserveDrawingBuffer,
+            desynchronized: options.desynchronized,
+            xrCompatible: options.xrCompatible
+        };
+        this._onWebGLContextLost = this._onWebGLContextLost.bind(this);
+        this._onWebGLContextRestored = this._onWebGLContextRestored.bind(this);
+    }
+    var _proto = WebGLGraphicDevice.prototype;
+    _proto.init = function init(canvas, onDeviceLost, onDeviceRestored) {
+        var webCanvas = canvas._webCanvas;
+        var webGLMode = this._options.webGLMode;
+        this._onDeviceLost = onDeviceLost;
+        this._onDeviceRestored = onDeviceRestored;
+        webCanvas.addEventListener("webglcontextlost", this._onWebGLContextLost, false);
+        webCanvas.addEventListener("webglcontextrestored", this._onWebGLContextRestored, false);
+        webCanvas.addEventListener("webglcontextcreationerror", this._onContextCreationError, false);
+        this._webCanvas = webCanvas;
+        var webGLOptions = this._webGLOptions;
+        var gl;
+        if (webGLMode == 0 || webGLMode == 1) {
+            gl = webCanvas.getContext("webgl2", webGLOptions);
+            if (!gl && (typeof OffscreenCanvas === "undefined" || !_instanceof(webCanvas, OffscreenCanvas))) {
+                gl = webCanvas.getContext("experimental-webgl2", webGLOptions);
+            }
+            this._isWebGL2 = true;
+            // Prevent weird browsers to lie (such as safari!)ƒ
+            if (gl && !gl.deleteQuery) {
+                this._isWebGL2 = false;
+            }
+        }
+        if (!gl) {
+            if (webGLMode == 0 || webGLMode == 2) {
+                gl = webCanvas.getContext("webgl", webGLOptions);
+                if (!gl && (typeof OffscreenCanvas === "undefined" || !_instanceof(webCanvas, OffscreenCanvas))) {
+                    gl = webCanvas.getContext("experimental-webgl", webGLOptions);
+                }
+                this._isWebGL2 = false;
+            }
+        }
+        if (!gl) {
+            throw new Error("Get GL Context FAILED.");
+        }
+        this._gl = gl;
+        this._initGLState(gl);
+    };
+    _proto.createPlatformPrimitive = function createPlatformPrimitive(primitive) {
+        return new GLPrimitive(this, primitive);
+    };
+    _proto.createPlatformTexture2D = function createPlatformTexture2D(texture2D) {
+        return new GLTexture2D(this, texture2D);
+    };
+    _proto.createPlatformTexture2DArray = function createPlatformTexture2DArray(texture2D) {
+        return new GLTexture2DArray(this, texture2D);
+    };
+    _proto.createPlatformTextureCube = function createPlatformTextureCube(textureCube) {
+        return new GLTextureCube(this, textureCube);
+    };
+    _proto.createPlatformRenderTarget = function createPlatformRenderTarget(target) {
+        return new GLRenderTarget(this, target);
+    };
+    _proto.createPlatformBuffer = function createPlatformBuffer(type, byteLength, bufferUsage, data) {
+        if (bufferUsage === void 0) bufferUsage = BufferUsage.Static;
+        return new GLBuffer(this, type, byteLength, bufferUsage, data);
+    };
+    _proto.requireExtension = function requireExtension(ext) {
+        return this._extensions.requireExtension(ext);
+    };
+    _proto.canIUse = function canIUse(capabilityType) {
+        return this.capability.canIUse(capabilityType);
+    };
+    _proto.canIUseCompressedTextureInternalFormat = function canIUseCompressedTextureInternalFormat(type) {
+        return this.capability.canIUseCompressedTextureInternalFormat(type);
+    };
+    _proto.viewport = function viewport(x, y, width, height) {
+        var _this = this, gl = _this._gl, lastViewport = _this._lastViewport;
+        if (x !== lastViewport.x || y !== lastViewport.y || width !== lastViewport.z || height !== lastViewport.w) {
+            gl.viewport(x, y, width, height);
+            lastViewport.set(x, y, width, height);
+        }
+    };
+    _proto.scissor = function scissor(x, y, width, height) {
+        var _this = this, gl = _this._gl, lastScissor = _this._lastScissor;
+        if (x !== lastScissor.x || y !== lastScissor.y || width !== lastScissor.z || height !== lastScissor.w) {
+            var _this1 = this, webCanvas = _this1._webCanvas;
+            if (x === 0 && y === 0 && width === webCanvas.width && height === webCanvas.height) {
+                if (this._scissorEnable) {
+                    gl.disable(gl.SCISSOR_TEST);
+                    this._scissorEnable = false;
+                }
+            } else {
+                if (!this._scissorEnable) {
+                    gl.enable(gl.SCISSOR_TEST);
+                    this._scissorEnable = true;
+                }
+                gl.scissor(x, y, width, height);
+            }
+            lastScissor.set(x, y, width, height);
+        }
+    };
+    _proto.colorMask = function colorMask(r, g, b, a) {
+        this._gl.colorMask(r, g, b, a);
+    };
+    _proto.clearRenderTarget = function clearRenderTarget(engine, clearFlags, clearColor) {
+        var gl = this._gl;
+        var _engine__lastRenderState = engine._lastRenderState, targetBlendState = _engine__lastRenderState.blendState.targetBlendState, depthState = _engine__lastRenderState.depthState, stencilState = _engine__lastRenderState.stencilState;
+        var clearFlag = 0;
+        if (clearFlags & CameraClearFlags.Color && clearColor) {
+            clearFlag |= gl.COLOR_BUFFER_BIT;
+            var lc = this._lastClearColor;
+            var r = clearColor.r, g = clearColor.g, b = clearColor.b, a = clearColor.a;
+            if (clearColor && (r !== lc.r || g !== lc.g || b !== lc.b || a !== lc.a)) {
+                gl.clearColor(r, g, b, a);
+                lc.set(r, g, b, a);
+            }
+            if (targetBlendState.colorWriteMask !== ColorWriteMask.All) {
+                gl.colorMask(true, true, true, true);
+                targetBlendState.colorWriteMask = ColorWriteMask.All;
+            }
+        }
+        if (clearFlags & CameraClearFlags.Depth) {
+            clearFlag |= gl.DEPTH_BUFFER_BIT;
+            if (depthState.writeEnabled !== true) {
+                gl.depthMask(true);
+                depthState.writeEnabled = true;
+            }
+        }
+        if (clearFlags & CameraClearFlags.Stencil) {
+            clearFlag |= gl.STENCIL_BUFFER_BIT;
+            if (stencilState.writeMask !== 0xff) {
+                gl.stencilMask(0xff);
+                stencilState.writeMask = 0xff;
+            }
+        }
+        gl.clear(clearFlag);
+    };
+    _proto.drawPrimitive = function drawPrimitive(primitive, subPrimitive, shaderProgram) {
+        // todo: VAO not support morph animation
+        if (primitive) {
+            primitive.draw(shaderProgram, subPrimitive);
+        } else {
+            Logger.error("draw primitive failed.");
+        }
+    };
+    _proto.getMainFrameBufferWidth = function getMainFrameBufferWidth() {
+        return this._mainFrameWidth || this._gl.drawingBufferWidth;
+    };
+    _proto.getMainFrameBufferHeight = function getMainFrameBufferHeight() {
+        return this._mainFrameHeight || this._gl.drawingBufferHeight;
+    };
+    _proto.activeRenderTarget = function activeRenderTarget(renderTarget, viewport, isFlipProjection, mipLevel, faceIndex) {
+        var bufferWidth, bufferHeight;
+        if (renderTarget) {
+            /** @ts-ignore */ renderTarget._isContentLost = false;
+            /** @ts-ignore */ var platformRenderTarget = renderTarget._platformRenderTarget;
+            platformRenderTarget.activeRenderTarget(mipLevel, faceIndex);
+            bufferWidth = renderTarget.width >> mipLevel;
+            bufferHeight = renderTarget.height >> mipLevel;
+        } else {
+            var gl = this._gl;
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this._mainFrameBuffer);
+            bufferWidth = this.getMainFrameBufferWidth();
+            bufferHeight = this.getMainFrameBufferHeight();
+        }
+        var width = bufferWidth * viewport.z;
+        var height = bufferHeight * viewport.w;
+        var x = viewport.x * bufferWidth;
+        var y = isFlipProjection ? viewport.y * bufferHeight : bufferHeight - viewport.y * bufferHeight - height;
+        this.viewport(x, y, width, height);
+        this.scissor(x, y, width, height);
+    };
+    _proto.blitInternalRTByBlitFrameBuffer = function blitInternalRTByBlitFrameBuffer(srcRT, destRT, clearFlags, viewport) {
+        if (!this._isWebGL2) {
+            Logger.warn("WebGL1.0 not support blit frame buffer.");
+            return;
+        }
+        var gl = this._gl;
+        // @ts-ignore
+        var srcFrameBuffer = srcRT ? srcRT._platformRenderTarget._frameBuffer : null;
+        // @ts-ignore
+        var destFrameBuffer = destRT ? destRT._platformRenderTarget._frameBuffer : null;
+        var bufferWidth = this.getMainFrameBufferWidth();
+        var bufferHeight = this.getMainFrameBufferHeight();
+        var srcWidth = srcRT ? srcRT.width : bufferWidth;
+        var srcHeight = srcRT ? srcRT.height : bufferHeight;
+        var blitWidth = destRT.width;
+        var blitHeight = destRT.height;
+        var needFlipY = !srcRT;
+        var needBlitColor = (clearFlags & CameraClearFlags.Color) === 0;
+        var needBlitDepth = (clearFlags & CameraClearFlags.Depth) === 0;
+        var needBlitStencil = (clearFlags & CameraClearFlags.Stencil) === 0;
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, srcFrameBuffer);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, destFrameBuffer);
+        var blitMask = needBlitColor ? gl.COLOR_BUFFER_BIT : 0;
+        if (needBlitDepth || needBlitStencil) {
+            // @ts-ignore
+            var depthFormat = destRT._depthFormat;
+            if (needBlitDepth) {
+                if (depthFormat === TextureFormat.Depth || depthFormat >= TextureFormat.DepthStencil && depthFormat <= TextureFormat.Depth32Stencil8) {
+                    blitMask |= gl.DEPTH_BUFFER_BIT;
+                } else {
+                    Logger.warn("Do not clear depth, or set depth format of target which is " + TextureFormat[depthFormat] + " now.");
+                }
+            }
+            if (needBlitStencil) {
+                if (depthFormat === TextureFormat.Stencil || depthFormat === TextureFormat.DepthStencil || depthFormat >= TextureFormat.Depth24Stencil8 || depthFormat >= TextureFormat.Depth32Stencil8) {
+                    blitMask |= gl.STENCIL_BUFFER_BIT;
+                } else {
+                    Logger.warn("Do not clear stencil, or set stencil format of target which is " + TextureFormat[depthFormat] + " now.");
+                }
+            }
+        }
+        var xStart = viewport.x * srcWidth;
+        var xEnd = xStart + blitWidth;
+        var yStart = needFlipY ? srcHeight - viewport.y * srcHeight : srcHeight - viewport.y * srcHeight - blitHeight;
+        var yEnd = needFlipY ? yStart - blitHeight : yStart + blitHeight;
+        gl.blitFramebuffer(xStart, yStart, xEnd, yEnd, 0, 0, blitWidth, blitHeight, blitMask, gl.NEAREST);
+    };
+    _proto.copyRenderTargetToSubTexture = function copyRenderTargetToSubTexture(srcRT, grabTexture, viewport) {
+        var gl = this._gl;
+        var bufferWidth = this.getMainFrameBufferWidth();
+        var bufferHeight = this.getMainFrameBufferHeight();
+        var srcWidth = srcRT ? srcRT.width : bufferWidth;
+        var srcHeight = srcRT ? srcRT.height : bufferHeight;
+        var copyWidth = grabTexture.width;
+        var copyHeight = grabTexture.height;
+        var flipY = !srcRT;
+        var xStart = viewport.x * srcWidth;
+        var yStart = flipY ? srcHeight - viewport.y * srcHeight - copyHeight : viewport.y * srcHeight;
+        var _srcRT__platformRenderTarget__frameBuffer;
+        // @ts-ignore
+        var frameBuffer = (_srcRT__platformRenderTarget__frameBuffer = srcRT == null ? void 0 : srcRT._platformRenderTarget._frameBuffer) != null ? _srcRT__platformRenderTarget__frameBuffer : this._mainFrameBuffer;
+        // @ts-ignore
+        gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
+        // @ts-ignore
+        var glTexture = grabTexture._platformTexture;
+        glTexture._bind();
+        gl.copyTexSubImage2D(glTexture._target, 0, 0, 0, xStart, yStart, copyWidth, copyHeight);
+    };
+    _proto.activeTexture = function activeTexture(textureID) {
+        if (this._activeTextureID !== textureID) {
+            this._gl.activeTexture(textureID);
+            this._activeTextureID = textureID;
+        }
+    };
+    _proto.bindTexture = function bindTexture(texture) {
+        var index = this._activeTextureID - this._gl.TEXTURE0;
+        if (this._activeTextures[index] !== texture) {
+            this._gl.bindTexture(texture._target, texture._glTexture);
+            this._activeTextures[index] = texture;
+        }
+    };
+    _proto.setGlobalDepthBias = function setGlobalDepthBias(bias, slopeBias) {
+        var gl = this._gl;
+        var enable = bias !== 0 || slopeBias !== 0;
+        if (enable) {
+            gl.enable(gl.POLYGON_OFFSET_FILL);
+            gl.polygonOffset(slopeBias, bias);
+        } else {
+            gl.disable(gl.POLYGON_OFFSET_FILL);
+        }
+        this._enableGlobalDepthBias = enable;
+    };
+    _proto.flush = function flush() {
+        this._gl.flush();
+    };
+    _proto.forceLoseDevice = function forceLoseDevice() {
+        var extension = this.requireExtension(GLCapabilityType.WEBGL_lose_context);
+        extension.loseContext();
+    };
+    _proto.forceRestoreDevice = function forceRestoreDevice() {
+        var extension = this.requireExtension(GLCapabilityType.WEBGL_lose_context);
+        extension.restoreContext();
+    };
+    /**
+   * @remarks
+   * WebGL context loss and restore can happen at any GPU execution point. refs to: https://www.khronos.org/webgl/wiki/HandlingContextLost
+   */ _proto.isContextLost = function isContextLost() {
+        return this.gl.isContextLost();
+    };
+    _proto.resetState = function resetState() {
+        this._readFrameBuffer = null;
+        this._enableGlobalDepthBias = false;
+        this._currentBindShaderProgram = null;
+        var activeTextures = this._activeTextures;
+        for(var i = 0, n = activeTextures.length; i < n; i++){
+            activeTextures[i] = null;
+        }
+        this._lastViewport.set(null, null, null, null);
+        this._lastScissor.set(null, null, null, null);
+        this._lastClearColor.set(null, null, null, null);
+        this._scissorEnable = false;
+        this._initGLState(this._gl);
+    };
+    _proto._initGLState = function _initGLState(gl) {
+        this._activeTextureID = gl.TEXTURE0;
+        this._renderStates = new GLRenderStates(gl);
+        this._extensions = new GLExtensions(this);
+        this._capability = new GLCapability(this);
+        // Make sure the active texture in gl context is on default, because gl context may be used in other webgl renderer.
+        gl.activeTexture(gl.TEXTURE0);
+        var debugRenderInfo = gl.getExtension("WEBGL_debug_renderer_info");
+        if (debugRenderInfo != null) {
+            this._renderer = gl.getParameter(debugRenderInfo.UNMASKED_RENDERER_WEBGL);
+        }
+    };
+    _proto.destroy = function destroy() {
+        var webCanvas = this._webCanvas;
+        webCanvas.removeEventListener("webglcontextcreationerror", this._onContextCreationError, false);
+        webCanvas.removeEventListener("webglcontextlost", this._onWebGLContextLost, false);
+        webCanvas.removeEventListener("webglcontextrestored", this._onWebGLContextRestored, false);
+    };
+    _proto._onContextCreationError = function _onContextCreationError(event) {
+        console.error("WebGLRenderer: WebGL context could not be created. Reason: ", event.statusMessage);
+    };
+    _proto._onWebGLContextLost = function _onWebGLContextLost(event) {
+        event.preventDefault();
+        this._onDeviceLost();
+    };
+    _proto._onWebGLContextRestored = function _onWebGLContextRestored(event) {
+        this._onDeviceRestored();
+    };
+    _create_class(WebGLGraphicDevice, [
+        {
+            key: "isWebGL2",
+            get: function get() {
+                return this._isWebGL2;
+            }
+        },
+        {
+            key: "renderer",
+            get: function get() {
+                return this._renderer;
+            }
+        },
+        {
+            key: "gl",
+            get: /**
+   * GL Context
+   * @member {WebGLRenderingContext}
+   */ function get() {
+                return this._gl;
+            }
+        },
+        {
+            key: "renderStates",
+            get: function get() {
+                return this._renderStates;
+            }
+        },
+        {
+            key: "capability",
+            get: function get() {
+                return this._capability;
+            }
+        },
+        {
+            key: "canIUseMoreJoints",
+            get: function get() {
+                return this.capability.canIUseMoreJoints;
+            }
+        }
+    ]);
+    return WebGLGraphicDevice;
+}();
+
+export { GLCompressedTextureInternalFormat, WebCanvas, WebGLEngine, WebGLGraphicDevice, WebGLMode };
+//# sourceMappingURL=module.js.map