@galacean/engine-rhi-webgl 0.0.0-experimental-renderSort.4 → 0.0.0-experimental-stateMachine.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright © 2020-2023 Galacean authors
+Copyright (c) 2020 - present Ant Group
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.

package/dist/main.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var engineMath = require('@galacean/engine-math');
 var engineCore = require('@galacean/engine-core');
+var engineMath = require('@galacean/engine-math');
 
 /**
  * Smoothing plug-in.
@@ -86,6 +86,26 @@ function _create_class(Constructor, protoProps, staticProps) {
     return Constructor;
 }
 
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+
+        return o;
+    };
+
+    return _set_prototype_of(o, p);
+}
+
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } });
+
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+
 function _instanceof(left, right) {
     if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
         return !!right[Symbol.hasInstance](left);
@@ -94,14 +114,18 @@ function _instanceof(left, right) {
 
 /**
  * The canvas used on the web, which can support HTMLCanvasElement and OffscreenCanvas.
- */ var WebCanvas = /*#__PURE__*/ function() {
+ */ var WebCanvas = /*#__PURE__*/ function(Canvas1) {
+    _inherits(WebCanvas, Canvas1);
     function WebCanvas(webCanvas) {
-        this._scale = new engineMath.Vector2();
+        var _this;
+        _this = Canvas1.call(this) || this;
+        _this._scale = new engineMath.Vector2();
         var width = webCanvas.width;
         var height = webCanvas.height;
-        this._webCanvas = webCanvas;
-        this._width = width;
-        this._height = height;
+        _this._webCanvas = webCanvas;
+        _this.width = width;
+        _this.height = height;
+        return _this;
     }
     var _proto = WebCanvas.prototype;
     /**
@@ -111,8 +135,10 @@ function _instanceof(left, right) {
         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;
+            var exportWidth = webCanvas.clientWidth * pixelRatio;
+            var exportHeight = webCanvas.clientHeight * pixelRatio;
+            this.width = exportWidth;
+            this.height = exportHeight;
         }
     };
     /**
@@ -123,35 +149,13 @@ function _instanceof(left, right) {
         this._scale.set(x, y);
         this.scale = this._scale;
     };
+    _proto._onWidthChanged = function _onWidthChanged(value) {
+        this._webCanvas.width = value;
+    };
+    _proto._onHeightChange = function _onHeightChange(value) {
+        this._webCanvas.height = value;
+    };
     _create_class(WebCanvas, [
-        {
-            key: "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: /**
@@ -174,27 +178,7 @@ function _instanceof(left, right) {
         }
     ]);
     return WebCanvas;
-}();
-
-function _set_prototype_of(o, p) {
-    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
-        o.__proto__ = p;
-
-        return o;
-    };
-
-    return _set_prototype_of(o, p);
-}
-
-function _inherits(subClass, superClass) {
-    if (typeof superClass !== "function" && superClass !== null) {
-        throw new TypeError("Super expression must either be null or a function");
-    }
-
-    subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } });
-
-    if (superClass) _set_prototype_of(subClass, superClass);
-}
+}(engineCore.Canvas);
 
 /**
  * WebGL platform engine,support includes WebGL1.0 and WebGL2.0.
@@ -366,7 +350,7 @@ var GLBuffer = /*#__PURE__*/ function() {
         var cap = this.capabilityList;
         var isWebGL2 = this.rhi.isWebGL2;
         var requireExtension = this.rhi.requireExtension.bind(this.rhi);
-        var shaderVertexID = engineCore.GLCapabilityType.shaderVertexID, standardDerivatives = engineCore.GLCapabilityType.standardDerivatives, shaderTextureLod = engineCore.GLCapabilityType.shaderTextureLod, elementIndexUint = engineCore.GLCapabilityType.elementIndexUint, depthTexture = engineCore.GLCapabilityType.depthTexture, vertexArrayObject = engineCore.GLCapabilityType.vertexArrayObject, instancedArrays = engineCore.GLCapabilityType.instancedArrays, multipleSample = engineCore.GLCapabilityType.multipleSample, drawBuffers = engineCore.GLCapabilityType.drawBuffers, astc = engineCore.GLCapabilityType.astc, astc_webkit = engineCore.GLCapabilityType.astc_webkit, etc = engineCore.GLCapabilityType.etc, etc_webkit = engineCore.GLCapabilityType.etc_webkit, etc1 = engineCore.GLCapabilityType.etc1, etc1_webkit = engineCore.GLCapabilityType.etc1_webkit, pvrtc = engineCore.GLCapabilityType.pvrtc, pvrtc_webkit = engineCore.GLCapabilityType.pvrtc_webkit, s3tc = engineCore.GLCapabilityType.s3tc, s3tc_webkit = engineCore.GLCapabilityType.s3tc_webkit, bptc = engineCore.GLCapabilityType.bptc, textureFloat = engineCore.GLCapabilityType.textureFloat, textureHalfFloat = engineCore.GLCapabilityType.textureHalfFloat, textureFloatLinear = engineCore.GLCapabilityType.textureFloatLinear, textureHalfFloatLinear = engineCore.GLCapabilityType.textureHalfFloatLinear, WEBGL_colorBufferFloat = engineCore.GLCapabilityType.WEBGL_colorBufferFloat, colorBufferFloat = engineCore.GLCapabilityType.colorBufferFloat, colorBufferHalfFloat = engineCore.GLCapabilityType.colorBufferHalfFloat, textureFilterAnisotropic = engineCore.GLCapabilityType.textureFilterAnisotropic;
+        var shaderVertexID = engineCore.GLCapabilityType.shaderVertexID, standardDerivatives = engineCore.GLCapabilityType.standardDerivatives, shaderTextureLod = engineCore.GLCapabilityType.shaderTextureLod, elementIndexUint = engineCore.GLCapabilityType.elementIndexUint, depthTexture = engineCore.GLCapabilityType.depthTexture, vertexArrayObject = engineCore.GLCapabilityType.vertexArrayObject, instancedArrays = engineCore.GLCapabilityType.instancedArrays, multipleSample = engineCore.GLCapabilityType.multipleSample, drawBuffers = engineCore.GLCapabilityType.drawBuffers, blendMinMax = engineCore.GLCapabilityType.blendMinMax, astc = engineCore.GLCapabilityType.astc, astc_webkit = engineCore.GLCapabilityType.astc_webkit, etc = engineCore.GLCapabilityType.etc, etc_webkit = engineCore.GLCapabilityType.etc_webkit, etc1 = engineCore.GLCapabilityType.etc1, etc1_webkit = engineCore.GLCapabilityType.etc1_webkit, pvrtc = engineCore.GLCapabilityType.pvrtc, pvrtc_webkit = engineCore.GLCapabilityType.pvrtc_webkit, s3tc = engineCore.GLCapabilityType.s3tc, s3tc_webkit = engineCore.GLCapabilityType.s3tc_webkit, bptc = engineCore.GLCapabilityType.bptc, textureFloat = engineCore.GLCapabilityType.textureFloat, textureHalfFloat = engineCore.GLCapabilityType.textureHalfFloat, textureFloatLinear = engineCore.GLCapabilityType.textureFloatLinear, textureHalfFloatLinear = engineCore.GLCapabilityType.textureHalfFloatLinear, WEBGL_colorBufferFloat = engineCore.GLCapabilityType.WEBGL_colorBufferFloat, colorBufferFloat = engineCore.GLCapabilityType.colorBufferFloat, colorBufferHalfFloat = engineCore.GLCapabilityType.colorBufferHalfFloat, textureFilterAnisotropic = engineCore.GLCapabilityType.textureFilterAnisotropic, fragDepth = engineCore.GLCapabilityType.fragDepth;
         cap.set(shaderVertexID, isWebGL2);
         cap.set(standardDerivatives, isWebGL2 || !!requireExtension(standardDerivatives));
         cap.set(shaderTextureLod, isWebGL2 || !!requireExtension(shaderTextureLod));
@@ -376,6 +360,7 @@ var GLBuffer = /*#__PURE__*/ function() {
         cap.set(instancedArrays, isWebGL2 || !!requireExtension(instancedArrays));
         cap.set(multipleSample, isWebGL2);
         cap.set(drawBuffers, isWebGL2 || !!requireExtension(drawBuffers));
+        cap.set(blendMinMax, isWebGL2 || !!requireExtension(blendMinMax));
         cap.set(textureFloat, isWebGL2 || !!requireExtension(textureFloat));
         cap.set(textureHalfFloat, isWebGL2 || !!requireExtension(textureHalfFloat));
         cap.set(textureFloatLinear, !!requireExtension(textureFloatLinear));
@@ -383,6 +368,7 @@ var GLBuffer = /*#__PURE__*/ function() {
         cap.set(colorBufferFloat, isWebGL2 && !!requireExtension(colorBufferFloat) || !!requireExtension(WEBGL_colorBufferFloat));
         cap.set(colorBufferHalfFloat, isWebGL2 && !!requireExtension(colorBufferFloat) || !!requireExtension(colorBufferHalfFloat));
         cap.set(textureFilterAnisotropic, !!requireExtension(textureFilterAnisotropic));
+        cap.set(fragDepth, isWebGL2 || !!requireExtension(fragDepth));
         cap.set(astc, !!(requireExtension(astc) || requireExtension(astc_webkit)));
         cap.set(etc, !!(requireExtension(etc) || requireExtension(etc_webkit)));
         cap.set(etc1, !!(requireExtension(etc1) || requireExtension(etc1_webkit)));
@@ -416,9 +402,13 @@ var GLBuffer = /*#__PURE__*/ function() {
         }
     };
     _proto._compatibleAllInterface = function _compatibleAllInterface() {
-        var depthTexture = engineCore.GLCapabilityType.depthTexture, vertexArrayObject = engineCore.GLCapabilityType.vertexArrayObject, instancedArrays = engineCore.GLCapabilityType.instancedArrays, drawBuffers = engineCore.GLCapabilityType.drawBuffers, textureFilterAnisotropic = engineCore.GLCapabilityType.textureFilterAnisotropic, textureHalfFloat = engineCore.GLCapabilityType.textureHalfFloat, colorBufferHalfFloat = engineCore.GLCapabilityType.colorBufferHalfFloat, WEBGL_colorBufferFloat = engineCore.GLCapabilityType.WEBGL_colorBufferFloat;
+        var depthTexture = engineCore.GLCapabilityType.depthTexture, vertexArrayObject = engineCore.GLCapabilityType.vertexArrayObject, instancedArrays = engineCore.GLCapabilityType.instancedArrays, drawBuffers = engineCore.GLCapabilityType.drawBuffers, textureFilterAnisotropic = engineCore.GLCapabilityType.textureFilterAnisotropic, textureHalfFloat = engineCore.GLCapabilityType.textureHalfFloat, colorBufferHalfFloat = engineCore.GLCapabilityType.colorBufferHalfFloat, WEBGL_colorBufferFloat = engineCore.GLCapabilityType.WEBGL_colorBufferFloat, blendMinMax = engineCore.GLCapabilityType.blendMinMax;
         var isWebGL2 = this.rhi.isWebGL2;
         if (!isWebGL2) {
+            this._compatibleInterface(blendMinMax, {
+                MIN: "MIN_EXT",
+                MAX: "MAX_EXT"
+            });
             this._compatibleInterface(depthTexture, {
                 UNSIGNED_INT_24_8: "UNSIGNED_INT_24_8_WEBGL"
             });
@@ -931,6 +921,13 @@ var GLBuffer = /*#__PURE__*/ function() {
                     dataType: gl.FLOAT,
                     isCompressed: false
                 };
+            case engineCore.TextureFormat.R32G32B32A32_UInt:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGBA32UI : gl.NONE,
+                    baseFormat: gl.RGBA_INTEGER,
+                    dataType: gl.UNSIGNED_INT,
+                    isCompressed: false
+                };
             case engineCore.TextureFormat.BC1:
                 return {
                     internalFormat: exports.GLCompressedTextureInternalFormat.RGB_S3TC_DXT1_EXT,
@@ -1081,7 +1078,7 @@ var GLBuffer = /*#__PURE__*/ function() {
    * @internal
    */ GLTexture._getRenderBufferDepthFormatDetail = function _getRenderBufferDepthFormatDetail(format, gl, isWebGL2) {
         switch(format){
-            case engineCore.RenderBufferDepthFormat.Depth:
+            case engineCore.TextureFormat.Depth:
                 return {
                     internalFormat: isWebGL2 ? gl.DEPTH_COMPONENT32F : gl.DEPTH_COMPONENT16,
                     baseFormat: gl.DEPTH_COMPONENT,
@@ -1089,7 +1086,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_ATTACHMENT
                 };
-            case engineCore.RenderBufferDepthFormat.DepthStencil:
+            case engineCore.TextureFormat.DepthStencil:
                 return {
                     internalFormat: isWebGL2 ? gl.DEPTH32F_STENCIL8 : gl.DEPTH_STENCIL,
                     baseFormat: gl.DEPTH_STENCIL,
@@ -1097,7 +1094,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_STENCIL_ATTACHMENT
                 };
-            case engineCore.RenderBufferDepthFormat.Stencil:
+            case engineCore.TextureFormat.Stencil:
                 return {
                     internalFormat: gl.STENCIL_INDEX8,
                     baseFormat: gl.STENCIL_ATTACHMENT,
@@ -1105,7 +1102,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.STENCIL_ATTACHMENT
                 };
-            case engineCore.RenderBufferDepthFormat.Depth16:
+            case engineCore.TextureFormat.Depth16:
                 return {
                     internalFormat: gl.DEPTH_COMPONENT16,
                     baseFormat: gl.DEPTH_COMPONENT,
@@ -1113,7 +1110,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_ATTACHMENT
                 };
-            case engineCore.RenderBufferDepthFormat.Depth24Stencil8:
+            case engineCore.TextureFormat.Depth24Stencil8:
                 return {
                     internalFormat: isWebGL2 ? gl.DEPTH24_STENCIL8 : gl.DEPTH_STENCIL,
                     baseFormat: gl.DEPTH_STENCIL,
@@ -1121,7 +1118,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_STENCIL_ATTACHMENT
                 };
-            case engineCore.RenderBufferDepthFormat.Depth24:
+            case engineCore.TextureFormat.Depth24:
                 return {
                     internalFormat: gl.DEPTH_COMPONENT24,
                     baseFormat: gl.DEPTH_COMPONENT,
@@ -1129,7 +1126,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_ATTACHMENT
                 };
-            case engineCore.RenderBufferDepthFormat.Depth32:
+            case engineCore.TextureFormat.Depth32:
                 return {
                     internalFormat: gl.DEPTH_COMPONENT32F,
                     baseFormat: gl.DEPTH_COMPONENT,
@@ -1137,7 +1134,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_ATTACHMENT
                 };
-            case engineCore.RenderBufferDepthFormat.Depth32Stencil8:
+            case engineCore.TextureFormat.Depth32Stencil8:
                 return {
                     internalFormat: gl.DEPTH32F_STENCIL8,
                     baseFormat: gl.DEPTH_STENCIL,
@@ -1172,6 +1169,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     return false;
                 }
                 break;
+            case engineCore.TextureFormat.R32G32B32A32_UInt:
             case engineCore.TextureFormat.Depth24:
             case engineCore.TextureFormat.Depth32:
             case engineCore.TextureFormat.Depth32Stencil8:
@@ -1206,9 +1204,9 @@ var GLBuffer = /*#__PURE__*/ function() {
    */ GLTexture._supportRenderBufferDepthFormat = function _supportRenderBufferDepthFormat(format, rhi) {
         if (!rhi.isWebGL2) {
             switch(format){
-                case engineCore.RenderBufferDepthFormat.Depth24:
-                case engineCore.RenderBufferDepthFormat.Depth32:
-                case engineCore.RenderBufferDepthFormat.Depth32Stencil8:
+                case engineCore.TextureFormat.Depth24:
+                case engineCore.TextureFormat.Depth32:
+                case engineCore.TextureFormat.Depth32Stencil8:
                     return false;
             }
         }
@@ -1311,6 +1309,7 @@ var GLBuffer = /*#__PURE__*/ function() {
     function GLRenderTarget(rhi, target) {
         this._MSAAColorRenderBuffers = [];
         this._curMipLevel = 0;
+        this._curFaceIndex = undefined;
         this._gl = rhi.gl;
         this._isWebGL2 = rhi.isWebGL2;
         this._target = target;
@@ -1362,21 +1361,23 @@ var GLBuffer = /*#__PURE__*/ function() {
     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) {
+   * @param faceIndex - Cube texture face
+   */ _proto.activeRenderTarget = function activeRenderTarget(mipLevel, faceIndex) {
+        // @todo: support MRT
         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);
+        var mipChanged = mipLevel !== this._curMipLevel;
+        var faceChanged = faceIndex !== this._curFaceIndex;
+        var colorTexture = target.getColorTexture(0);
         if (colorTexture) {
             var isCube = _instanceof(colorTexture, engineCore.TextureCube);
-            if (mipChanged || isCube) {
+            if (mipChanged || isCube && faceChanged) {
                 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, isCube ? gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex : gl.TEXTURE_2D, // @ts-ignore
                 colorTexture._platformTexture._glTexture, mipLevel);
             }
         }
+        var depthTexture = target.depthTexture;
         if (depthTexture) {
             var isCube1 = _instanceof(depthTexture, engineCore.TextureCube);
             if (mipChanged || isCube1) {
@@ -1393,8 +1394,10 @@ var GLBuffer = /*#__PURE__*/ function() {
             }
         }
         this._curMipLevel = mipLevel;
-        // revert current activated render target
-        this._activeRenderTarget();
+        this._curFaceIndex = faceIndex;
+        if (this._MSAAFrameBuffer) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this._MSAAFrameBuffer);
+        }
     };
     /**
    * Blit FBO.
@@ -1432,20 +1435,6 @@ var GLBuffer = /*#__PURE__*/ function() {
         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;
@@ -1755,6 +1744,9 @@ exports.WebGLMode = void 0;
     function WebGLGraphicDevice(initializeOptions) {
         if (initializeOptions === void 0) initializeOptions = {};
         /** @internal */ this._readFrameBuffer = null;
+        /** @internal */ this._mainFrameBuffer = null;
+        /** @internal */ this._mainFrameWidth = 0;
+        /** @internal */ this._mainFrameHeight = 0;
         /** @internal */ this._enableGlobalDepthBias = false;
         this._activeTextures = new Array(32);
         this._lastViewport = new engineMath.Vector4(null, null, null, null);
@@ -1917,23 +1909,30 @@ exports.WebGLMode = void 0;
             engineCore.Logger.error("draw primitive failed.");
         }
     };
-    _proto.activeRenderTarget = function activeRenderTarget(renderTarget, viewport, mipLevel) {
-        var gl = this._gl;
+    _proto.getMainFrameBufferWidth = function getMainFrameBufferWidth() {
+        return this._mainFrameWidth || this._gl.drawingBufferWidth;
+    };
+    _proto.getMainFrameBufferHeight = function getMainFrameBufferHeight() {
+        return this._mainFrameHeight || this._gl.drawingBufferHeight;
+    };
+    _proto.activeRenderTarget = function activeRenderTarget(renderTarget, viewport, isFlipProjection, mipLevel, faceIndex) {
         var bufferWidth, bufferHeight;
         if (renderTarget) {
-            var /** @ts-ignore */ _renderTarget__platformRenderTarget;
-            (_renderTarget__platformRenderTarget = renderTarget._platformRenderTarget) == null ? void 0 : _renderTarget__platformRenderTarget._activeRenderTarget();
+            /** @ts-ignore */ renderTarget._isContentLost = false;
+            /** @ts-ignore */ var platformRenderTarget = renderTarget._platformRenderTarget;
+            platformRenderTarget.activeRenderTarget(mipLevel, faceIndex);
             bufferWidth = renderTarget.width >> mipLevel;
             bufferHeight = renderTarget.height >> mipLevel;
         } else {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-            bufferWidth = gl.drawingBufferWidth;
-            bufferHeight = gl.drawingBufferHeight;
+            var gl = this._gl;
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this._mainFrameBuffer);
+            bufferWidth = this.getMainFrameBufferWidth();
+            bufferHeight = this.getMainFrameBufferHeight();
         }
         var width = bufferWidth * viewport.z;
         var height = bufferHeight * viewport.w;
         var x = viewport.x * bufferWidth;
-        var y = bufferHeight - viewport.y * bufferHeight - height;
+        var y = isFlipProjection ? viewport.y * bufferHeight : bufferHeight - viewport.y * bufferHeight - height;
         this.viewport(x, y, width, height);
         this.scissor(x, y, width, height);
     };