@galacean/engine-rhi-webgl 0.9.0-beta.80

package/dist/module.js

@@ -0,0 +1,1921 @@
+import { Vector2, Vector4, Color } from '@galacean/engine-math';
+import { GLCapabilityType, Logger, TextureWrapMode, TextureFormat, RenderBufferDepthFormat, TextureFilterMode, TextureDepthCompareFunction, Texture, TextureCube, CameraClearFlags, ColorWriteMask, SystemInfo, Platform, Engine } from '@galacean/engine-core';
+
+/**
+ * Smoothing plug-in.
+ * */ var GLCompressedTextureInternalFormat;
+(function(GLCompressedTextureInternalFormat) {
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat[// astc
+    "RGBA_ASTC_4X4_KHR"] = 0x93b0] = "RGBA_ASTC_4X4_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_5X4_KHR"] = 0x93b1] = "RGBA_ASTC_5X4_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_5X5_KHR"] = 0x93b2] = "RGBA_ASTC_5X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_6X5_KHR"] = 0x93b3] = "RGBA_ASTC_6X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_6X6_KHR"] = 0x93b4] = "RGBA_ASTC_6X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_8X5_KHR"] = 0x93b5] = "RGBA_ASTC_8X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_8X6_KHR"] = 0x93b6] = "RGBA_ASTC_8X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_8X8_KHR"] = 0x93b7] = "RGBA_ASTC_8X8_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_10X5_KHR"] = 0x93b8] = "RGBA_ASTC_10X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_10X6_KHR"] = 0x93b9] = "RGBA_ASTC_10X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_10X8_KHR"] = 0x93ba] = "RGBA_ASTC_10X8_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_10X10_KHR"] = 0x93bb] = "RGBA_ASTC_10X10_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_12X10_KHR"] = 0x93bc] = "RGBA_ASTC_12X10_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_ASTC_12X12_KHR"] = 0x93bd] = "RGBA_ASTC_12X12_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_4X4_KHR"] = 0x93d0] = "SRGB8_ALPHA8_ASTC_4X4_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_5X4_KHR"] = 0x93d1] = "SRGB8_ALPHA8_ASTC_5X4_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_5X5_KHR"] = 0x93d2] = "SRGB8_ALPHA8_ASTC_5X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_6X5_KHR"] = 0x93d3] = "SRGB8_ALPHA8_ASTC_6X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_6X6_KHR"] = 0x93d4] = "SRGB8_ALPHA8_ASTC_6X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_8X5_KHR"] = 0x93d5] = "SRGB8_ALPHA8_ASTC_8X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_8X6_KHR"] = 0x93d6] = "SRGB8_ALPHA8_ASTC_8X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_8X8_KHR"] = 0x93d7] = "SRGB8_ALPHA8_ASTC_8X8_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_10X5_KHR"] = 0x93d8] = "SRGB8_ALPHA8_ASTC_10X5_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_10X6_KHR"] = 0x93d9] = "SRGB8_ALPHA8_ASTC_10X6_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_10X8_KHR"] = 0x93da] = "SRGB8_ALPHA8_ASTC_10X8_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_10X10_KHR"] = 0x93db] = "SRGB8_ALPHA8_ASTC_10X10_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_12X10_KHR"] = 0x93dc] = "SRGB8_ALPHA8_ASTC_12X10_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ASTC_12X12_KHR"] = 0x93dd] = "SRGB8_ALPHA8_ASTC_12X12_KHR";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat[// etc1
+    "RGB_ETC1_WEBGL"] = 0x8d64] = "RGB_ETC1_WEBGL";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat[// etc2
+    "R11_EAC"] = 0x9270] = "R11_EAC";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SIGNED_R11_EAC"] = 0x9271] = "SIGNED_R11_EAC";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RG11_EAC"] = 0x9272] = "RG11_EAC";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SIGNED_RG11_EAC"] = 0x9273] = "SIGNED_RG11_EAC";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB8_ETC2"] = 0x9274] = "RGB8_ETC2";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ETC2"] = 0x9275] = "SRGB8_ETC2";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB8_PUNCHTHROUGH_ALPHA1_ETC2"] = 0x9276] = "RGB8_PUNCHTHROUGH_ALPHA1_ETC2";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_PUNCHTHROUGH_ALPHA1_ETC2"] = 0x9277] = "SRGB8_PUNCHTHROUGH_ALPHA1_ETC2";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA8_ETC2_EAC"] = 0x9278] = "RGBA8_ETC2_EAC";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["SRGB8_ALPHA8_ETC2_EAC"] = 0x9279] = "SRGB8_ALPHA8_ETC2_EAC";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat[// pvrtc
+    "RGB_PVRTC_4BPPV1_IMG"] = 0x8c00] = "RGB_PVRTC_4BPPV1_IMG";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGB_PVRTC_2BPPV1_IMG"] = 0x8c01] = "RGB_PVRTC_2BPPV1_IMG";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_PVRTC_4BPPV1_IMG"] = 0x8c02] = "RGBA_PVRTC_4BPPV1_IMG";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_PVRTC_2BPPV1_IMG"] = 0x8c03] = "RGBA_PVRTC_2BPPV1_IMG";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat[// s3tc
+    "RGB_S3TC_DXT1_EXT"] = 0x83f0] = "RGB_S3TC_DXT1_EXT";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_S3TC_DXT1_EXT"] = 0x83f1] = "RGBA_S3TC_DXT1_EXT";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_S3TC_DXT3_EXT"] = 0x83f2] = "RGBA_S3TC_DXT3_EXT";
+    GLCompressedTextureInternalFormat[GLCompressedTextureInternalFormat["RGBA_S3TC_DXT5_EXT"] = 0x83f3] = "RGBA_S3TC_DXT5_EXT";
+})(GLCompressedTextureInternalFormat || (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 _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+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() {
+    function WebCanvas(webCanvas) {
+        this._scale = new Vector2();
+        var width = webCanvas.width;
+        var height = webCanvas.height;
+        this._webCanvas = webCanvas;
+        this._width = width;
+        this._height = height;
+    }
+    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)) {
+            this.width = webCanvas.clientWidth * pixelRatio;
+            this.height = webCanvas.clientHeight * pixelRatio;
+        }
+    };
+    /**
+   * 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;
+    };
+    _createClass(WebCanvas, [
+        {
+            key: "width",
+            get: /**
+   * @inheritdoc
+   */ function get() {
+                return this._width;
+            },
+            set: function set(value) {
+                if (this._width !== value) {
+                    this._webCanvas.width = value;
+                    this._width = value;
+                }
+            }
+        },
+        {
+            key: "height",
+            get: /**
+   * @inheritdoc
+   */ function get() {
+                return this._height;
+            },
+            set: function set(value) {
+                if (this._height !== value) {
+                    this._webCanvas.height = value;
+                    this._height = value;
+                }
+            }
+        },
+        {
+            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;
+}();
+
+function setPrototypeOf(o, p) {
+  setPrototypeOf = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return setPrototypeOf(o, p);
+}
+
+function _setPrototypeOf(o, p) {
+  return setPrototypeOf(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) _setPrototypeOf(subClass, superClass);
+}
+
+function extends_() {
+  extends_ = Object.assign || function (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);
+}
+
+function _extends() {
+  return extends_.apply(this, arguments);
+}
+
+/**
+ * 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;
+        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);
+        }
+        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, astc = GLCapabilityType.astc, astc_webkit = GLCapabilityType.astc_webkit, 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, 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;
+        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(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(astc, !!(requireExtension(astc) || requireExtension(astc_webkit)));
+        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)));
+    };
+    /**
+   * 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;
+        var isWebGL2 = this.rhi.isWebGL2;
+        if (!isWebGL2) {
+            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(textureFilterAnisotropic, {
+            TEXTURE_MAX_ANISOTROPY_EXT: "TEXTURE_MAX_ANISOTROPY_EXT"
+        });
+    };
+    _createClass(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: "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._useVao = 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;
+        // @ts-ignore
+        var useVao = this._useVao && primitive._enableVAO;
+        if (useVao) {
+            // @ts-ignore
+            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);
+        }
+        // @ts-ignore
+        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 _nativeBuffer = _indexBufferBinding.buffer._nativeBuffer;
+                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _nativeBuffer);
+                    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 _nativeBuffer1 = _indexBufferBinding.buffer._nativeBuffer;
+                        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _nativeBuffer1);
+                        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._useVao && this._clearVAO();
+    };
+    /**
+   * Bind buffer and attribute.
+   */ _proto._bindBufferAndAttrib = function _bindBufferAndAttrib(shaderProgram) {
+        var gl = this._gl;
+        var primitive = this._primitive;
+        // @ts-ignore
+        var vertexBufferBindings = primitive._vertexBufferBindings;
+        this._attribLocArray.length = 0;
+        var attributeLocation = shaderProgram.attributeLocation;
+        // @ts-ignore
+        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._nativeBuffer;
+                // 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._glElementInfo;
+                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);
+        // @ts-ignore
+        var _indexBufferBinding = this._primitive._indexBufferBinding;
+        if (_indexBufferBinding) {
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _indexBufferBinding.buffer._nativeBuffer);
+        }
+        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() {
+        // @todo (1x1).generateMipmap() will flash back in uc.
+        if (this._texture.width !== 1 || this._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, _isDepthTexture = _this__texture._isDepthTexture;
+        this._bind();
+        if (isWebGL2 && !(baseFormat === gl.LUMINANCE_ALPHA || baseFormat === gl.ALPHA)) {
+            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;
+        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.readPixels(x, y, width, height, baseFormat, dataType, out);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    };
+    _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 && (!GLTexture._isPowerOf2(width) || !GLTexture._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;
+        }
+    };
+    _proto._getReadFrameBuffer = function _getReadFrameBuffer() {
+        var frameBuffer = this._rhi._readFrameBuffer;
+        if (!frameBuffer) {
+            this._rhi._readFrameBuffer = frameBuffer = this._gl.createFramebuffer();
+        }
+        return frameBuffer;
+    };
+    /** @internal */ GLTexture._isPowerOf2 = function _isPowerOf2(v) {
+        return (v & v - 1) === 0;
+    };
+    /**
+   * Get more texture info from TextureFormat.
+   * @internal
+   */ GLTexture._getFormatDetail = function _getFormatDetail(format, gl, isWebGL2) {
+        switch(format){
+            case TextureFormat.R8G8B8:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGB8 : gl.RGB,
+                    baseFormat: gl.RGB,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false
+                };
+            case TextureFormat.R8G8B8A8:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGBA8 : gl.RGBA,
+                    baseFormat: gl.RGBA,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false
+                };
+            case TextureFormat.R4G4B4A4:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGBA4 : gl.RGBA,
+                    baseFormat: gl.RGBA,
+                    dataType: gl.UNSIGNED_SHORT_4_4_4_4,
+                    isCompressed: false
+                };
+            case TextureFormat.R5G5B5A1:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGB5_A1 : gl.RGBA,
+                    baseFormat: gl.RGBA,
+                    dataType: gl.UNSIGNED_SHORT_5_5_5_1,
+                    isCompressed: false
+                };
+            case TextureFormat.R5G6B5:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGB565 : gl.RGB,
+                    baseFormat: gl.RGB,
+                    dataType: gl.UNSIGNED_SHORT_5_6_5,
+                    isCompressed: false
+                };
+            case TextureFormat.Alpha8:
+                return {
+                    internalFormat: gl.ALPHA,
+                    baseFormat: gl.ALPHA,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false
+                };
+            case TextureFormat.LuminanceAlpha:
+                return {
+                    internalFormat: gl.LUMINANCE_ALPHA,
+                    baseFormat: gl.LUMINANCE_ALPHA,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false
+                };
+            case TextureFormat.R16G16B16A16:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGBA16F : gl.RGBA,
+                    baseFormat: gl.RGBA,
+                    dataType: gl.HALF_FLOAT,
+                    isCompressed: false
+                };
+            case TextureFormat.R32G32B32A32:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGBA32F : gl.RGBA,
+                    baseFormat: gl.RGBA,
+                    dataType: gl.FLOAT,
+                    isCompressed: false
+                };
+            case TextureFormat.DXT1:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGB_S3TC_DXT1_EXT,
+                    isCompressed: true
+                };
+            case TextureFormat.DXT5:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGBA_S3TC_DXT5_EXT,
+                    isCompressed: true
+                };
+            case TextureFormat.ETC1_RGB:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGB_ETC1_WEBGL,
+                    isCompressed: true
+                };
+            case TextureFormat.ETC2_RGB:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGB8_ETC2,
+                    isCompressed: true
+                };
+            case TextureFormat.ETC2_RGBA5:
+                return {
+                    internalFormat: GLCompressedTextureInternalFormat.RGB8_PUNCHTHROUGH_ALPHA1_ETC2,
+                    isCompressed: true
+                };
+            case TextureFormat.ETC2_RGBA8:
+                return {
+                    internalFormat: 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: 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
+                };
+            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);
+        }
+    };
+    /**
+   * In WebGL 1, internalformat must be the same as baseFormat when call texImage2D.
+   * @internal
+   */ GLTexture._getRenderBufferDepthFormatDetail = function _getRenderBufferDepthFormatDetail(format, gl, isWebGL2) {
+        switch(format){
+            case RenderBufferDepthFormat.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 RenderBufferDepthFormat.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 RenderBufferDepthFormat.Stencil:
+                return {
+                    internalFormat: gl.STENCIL_INDEX8,
+                    baseFormat: gl.STENCIL_ATTACHMENT,
+                    dataType: gl.UNSIGNED_BYTE,
+                    isCompressed: false,
+                    attachment: gl.STENCIL_ATTACHMENT
+                };
+            case RenderBufferDepthFormat.Depth16:
+                return {
+                    internalFormat: gl.DEPTH_COMPONENT16,
+                    baseFormat: gl.DEPTH_COMPONENT,
+                    dataType: gl.UNSIGNED_SHORT,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_ATTACHMENT
+                };
+            case RenderBufferDepthFormat.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 RenderBufferDepthFormat.Depth24:
+                return {
+                    internalFormat: gl.DEPTH_COMPONENT24,
+                    baseFormat: gl.DEPTH_COMPONENT,
+                    dataType: gl.UNSIGNED_INT,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_ATTACHMENT
+                };
+            case RenderBufferDepthFormat.Depth32:
+                return {
+                    internalFormat: gl.DEPTH_COMPONENT32F,
+                    baseFormat: gl.DEPTH_COMPONENT,
+                    dataType: gl.FLOAT,
+                    isCompressed: false,
+                    attachment: gl.DEPTH_ATTACHMENT
+                };
+            case RenderBufferDepthFormat.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);
+        }
+    };
+    /**
+   * Check whether the corresponding texture format is supported.
+   * @internal
+   */ GLTexture._supportTextureFormat = function _supportTextureFormat(format, rhi) {
+        switch(format){
+            case TextureFormat.R16G16B16A16:
+                if (!rhi.canIUse(GLCapabilityType.textureHalfFloat)) {
+                    return false;
+                }
+                break;
+            case TextureFormat.R32G32B32A32:
+                if (!rhi.canIUse(GLCapabilityType.textureFloat)) {
+                    return false;
+                }
+                break;
+            case TextureFormat.Depth16:
+            case TextureFormat.Depth24Stencil8:
+            case TextureFormat.Depth:
+            case TextureFormat.DepthStencil:
+                if (!rhi.canIUse(GLCapabilityType.depthTexture)) {
+                    return false;
+                }
+                break;
+            case TextureFormat.Depth24:
+            case TextureFormat.Depth32:
+            case TextureFormat.Depth32Stencil8:
+                return rhi.isWebGL2;
+        }
+        return true;
+    };
+    /**
+   * @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;
+        }
+        return isSupported;
+    };
+    /**
+   * @internal
+   */ GLTexture._supportRenderBufferDepthFormat = function _supportRenderBufferDepthFormat(format, rhi) {
+        if (!rhi.isWebGL2) {
+            switch(format){
+                case RenderBufferDepthFormat.Depth24:
+                case RenderBufferDepthFormat.Depth32:
+                case RenderBufferDepthFormat.Depth32Stencil8:
+                    return false;
+            }
+        }
+        return true;
+    };
+    _createClass(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._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 format = _colorTextures[i]._format;
+            if (!GLTexture._supportRenderBufferColorFormat(format, rhi)) {
+                throw new Error("TextureFormat is not supported:" + TextureFormat[format] + " 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 faceIndex - Cube texture face
+   * @param mipLevel - Set mip level the data want to write
+   */ _proto.setRenderTargetInfo = function setRenderTargetInfo(faceIndex, mipLevel) {
+        var _this = this, gl = _this._gl, target = _this._target;
+        var depthTexture = target.depthTexture;
+        var colorTexture = target.getColorTexture(0);
+        var mipChanged = mipLevel !== this._curMipLevel;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
+        if (colorTexture) {
+            var isCube = _instanceof(colorTexture, TextureCube);
+            if (mipChanged || isCube) {
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, isCube ? gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex : gl.TEXTURE_2D, // @ts-ignore
+                colorTexture._platformTexture._glTexture, mipLevel);
+            }
+        }
+        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;
+        // revert current activated render target
+        this._activeRenderTarget();
+    };
+    /**
+   * 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;
+    };
+    /**
+   * Activate this RenderTarget.
+   * @internal
+   * @remarks
+   * If MSAA is turned on, MSAA FBO is activated, and then this._blitRenderTarget() is performed to exchange FBO.
+   * If MSAA is not turned on, activate the main FBO.
+   */ _proto._activeRenderTarget = function _activeRenderTarget() {
+        var gl = this._gl;
+        if (this._MSAAFrameBuffer) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this._MSAAFrameBuffer);
+        } else {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
+        }
+    };
+    _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 isWebGL2 = this._isWebGL2;
+        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:
+                throw new Error("The format of the attachment is not supported or if depth and stencil attachments are not the same renderbuffer");
+        }
+        if (isWebGL2 && e === 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;
+        /** @ts-ignore */ var format = texture2D.format, _mipmap = texture2D._mipmap, width = texture2D.width, height = texture2D.height;
+        var isWebGL2 = _this._isWebGL2;
+        /** @ts-ignore */ if (!GLTexture._supportTextureFormat(format, rhi)) {
+            throw new Error("Texture format is not supported:" + TextureFormat[format]);
+        }
+        if (_mipmap && !isWebGL2 && (!GLTexture._isPowerOf2(width) || !GLTexture._isPowerOf2(height))) {
+            Logger.warn("non-power-2 texture is not supported for mipmap in WebGL1,and has automatically downgraded to non-mipmap");
+            /** @ts-ignore */ texture2D._mipmap = false;
+            /** @ts-ignore */ texture2D._mipmapCount = texture2D._getMipmapCount();
+        }
+        _this._formatDetail = GLTexture._getFormatDetail(format, _this._gl, isWebGL2);
+        _this._formatDetail.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 isWebGL2 = this._isWebGL2;
+        var _this__formatDetail = this._formatDetail, internalFormat = _this__formatDetail.internalFormat, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType, isCompressed = _this__formatDetail.isCompressed;
+        var mipWidth = Math.max(1, this._texture.width >> mipLevel);
+        var mipHeight = Math.max(1, this._texture.height >> mipLevel);
+        width = width || mipWidth - x;
+        height = height || mipHeight - y;
+        this._bind();
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
+        if (isCompressed) {
+            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 {
+            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, 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(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;
+        var format = texture2DArray.format, width = texture2DArray.width, height = texture2DArray.height, length = texture2DArray.length, mipmapCount = texture2DArray.mipmapCount;
+        if (!_this._isWebGL2) {
+            throw new Error("Texture2D Array is not supported in WebGL1.0");
+        }
+        /** @ts-ignore */ if (!GLTexture._supportTextureFormat(format, rhi)) {
+            throw new Error("Texture format is not supported:" + TextureFormat[format]);
+        }
+        _this._bind();
+        _this._formatDetail = GLTexture._getFormatDetail(format, _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 _this__formatDetail = this._formatDetail, internalFormat = _this__formatDetail.internalFormat, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType, isCompressed = _this__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);
+        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);
+        gl.texSubImage3D(this._target, mipLevel, x, y, elementIndex, imageSource.width, imageSource.height, 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.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);
+    };
+    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
+        ];
+        /** @ts-ignore */ var format = textureCube.format, _mipmap = textureCube._mipmap, size = textureCube.width;
+        var isWebGL2 = _this._isWebGL2;
+        /** @ts-ignore */ if (!GLTexture._supportTextureFormat(format, rhi)) {
+            throw new Error("Texture format is not supported:" + TextureFormat[format]);
+        }
+        if (_mipmap && !isWebGL2 && !GLTexture._isPowerOf2(size)) {
+            Logger.warn("non-power-2 texture is not supported for mipmap in WebGL1,and has automatically downgraded to non-mipmap");
+            /** @ts-ignore */ textureCube._mipmap = false;
+            /** @ts-ignore */ textureCube._mipmapCount = textureCube._getMipmapCount();
+        }
+        _this._formatDetail = GLTexture._getFormatDetail(format, _this._gl, isWebGL2);
+        _this._formatDetail.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 _this__formatDetail = this._formatDetail, internalFormat = _this__formatDetail.internalFormat, baseFormat = _this__formatDetail.baseFormat, dataType = _this__formatDetail.dataType, isCompressed = _this__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);
+        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);
+
+var WebGLMode;
+(function(WebGLMode) {
+    WebGLMode[WebGLMode[/** Auto, use WebGL2.0 if support, or will fallback to WebGL1.0. */ "Auto"] = 0] = "Auto";
+    WebGLMode[WebGLMode[/** WebGL2.0. */ "WebGL2"] = 1] = "WebGL2";
+    WebGLMode[WebGLMode[/** WebGL1.0, */ "WebGL1"] = 2] = "WebGL1";
+})(WebGLMode || (WebGLMode = {}));
+/**
+ * WebGL renderer, including WebGL1.0 and WebGL2.0.
+ */ var WebGLRenderer = /*#__PURE__*/ function() {
+    function WebGLRenderer(initializeOptions) {
+        if (initializeOptions === void 0) initializeOptions = {};
+        /** @internal */ this._enableGlobalDepthBias = false;
+        this._activeTextures = new Array(32);
+        // cache value
+        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,
+            alpha: false,
+            stencil: true,
+            _forceFlush: 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;
+    }
+    var _proto = WebGLRenderer.prototype;
+    _proto.init = function init(canvas) {
+        var options = this._options;
+        var webCanvas = this._webCanvas = canvas._webCanvas;
+        var webGLMode = options.webGLMode;
+        var gl;
+        if (webGLMode == 0 || webGLMode == 1) {
+            gl = webCanvas.getContext("webgl2", options);
+            if (!gl && (typeof OffscreenCanvas === "undefined" || !_instanceof(webCanvas, OffscreenCanvas))) {
+                gl = webCanvas.getContext("experimental-webgl2", options);
+            }
+            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", options);
+                if (!gl && (typeof OffscreenCanvas === "undefined" || !_instanceof(webCanvas, OffscreenCanvas))) {
+                    gl = webCanvas.getContext("experimental-webgl", options);
+                }
+                this._isWebGL2 = false;
+            }
+        }
+        if (!gl) {
+            throw new Error("Get GL Context FAILED.");
+        }
+        this._gl = 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.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.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) {
+            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) {
+            //@ts-ignore
+            primitive._draw(shaderProgram, subPrimitive);
+        } else {
+            Logger.error("draw primitive failed.");
+        }
+    };
+    _proto.activeRenderTarget = function activeRenderTarget(renderTarget, viewport, mipLevel) {
+        var gl = this._gl;
+        if (renderTarget) {
+            var /** @ts-ignore */ _renderTarget__platformRenderTarget;
+            (_renderTarget__platformRenderTarget = renderTarget._platformRenderTarget) == null ? void 0 : _renderTarget__platformRenderTarget._activeRenderTarget();
+            var width = renderTarget.width >> mipLevel;
+            var height = renderTarget.height >> mipLevel;
+            this.viewport(0, 0, width, height);
+            this.scissor(0, 0, width, height);
+        } else {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            var drawingBufferWidth = gl.drawingBufferWidth, drawingBufferHeight = gl.drawingBufferHeight;
+            var width1 = drawingBufferWidth * viewport.z;
+            var height1 = drawingBufferHeight * viewport.w;
+            var x = viewport.x * drawingBufferWidth;
+            var y = drawingBufferHeight - viewport.y * drawingBufferHeight - height1;
+            this.viewport(x, y, width1, height1);
+            this.scissor(x, y, width1, height1);
+        }
+    };
+    _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.destroy = function destroy() {};
+    _createClass(WebGLRenderer, [
+        {
+            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 WebGLRenderer;
+}();
+
+/**
+ * WebGL platform engine,support includes WebGL1.0 and WebGL2.0.
+ */ var WebGLEngine = /*#__PURE__*/ function(Engine) {
+    _inherits(WebGLEngine, Engine);
+    function WebGLEngine(canvas, webGLRendererOptions) {
+        var webCanvas = new WebCanvas(typeof canvas === "string" ? document.getElementById(canvas) : canvas);
+        var hardwareRenderer = new WebGLRenderer(webGLRendererOptions);
+        return Engine.call(this, webCanvas, hardwareRenderer);
+    }
+    _createClass(WebGLEngine, [
+        {
+            key: "canvas",
+            get: /**
+   * Web canvas.
+   */ function get() {
+                return this._canvas;
+            }
+        }
+    ]);
+    return WebGLEngine;
+}(Engine);
+
+export { GLCompressedTextureInternalFormat, WebCanvas, WebGLEngine, WebGLMode, WebGLRenderer };
+//# sourceMappingURL=module.js.map