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

package/dist/module.js

@@ -1,5 +1,5 @@
+import { Canvas, Scene, Engine, BufferUsage, BufferBindFlag, SetDataOptions, GLCapabilityType, Logger, TextureUsage, TextureWrapMode, TextureFormat, TextureFilterMode, TextureDepthCompareFunction, Texture, TextureCube, CameraClearFlags, ColorWriteMask, SystemInfo, Platform } from '@galacean/engine-core';
 import { Vector2, Vector4, Color } from '@galacean/engine-math';
-import { Scene, Engine, BufferUsage, BufferBindFlag, SetDataOptions, GLCapabilityType, Logger, TextureUsage, TextureWrapMode, TextureFormat, RenderBufferDepthFormat, TextureFilterMode, TextureDepthCompareFunction, Texture, TextureCube, CameraClearFlags, ColorWriteMask, SystemInfo, Platform } from '@galacean/engine-core';
 
 /**
  * Smoothing plug-in.
@@ -82,6 +82,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);
@@ -90,14 +110,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 Vector2();
+        var _this;
+        _this = Canvas1.call(this) || this;
+        _this._scale = new 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;
     /**
@@ -107,8 +131,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;
         }
     };
     /**
@@ -119,35 +145,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: /**
@@ -170,27 +174,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);
-}
+}(Canvas);
 
 /**
  * WebGL platform engine,support includes WebGL1.0 and WebGL2.0.
@@ -362,7 +346,7 @@ var GLBuffer = /*#__PURE__*/ function() {
         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, bptc = GLCapabilityType.bptc, 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;
+        var shaderVertexID = GLCapabilityType.shaderVertexID, standardDerivatives = GLCapabilityType.standardDerivatives, shaderTextureLod = GLCapabilityType.shaderTextureLod, elementIndexUint = GLCapabilityType.elementIndexUint, depthTexture = GLCapabilityType.depthTexture, vertexArrayObject = GLCapabilityType.vertexArrayObject, instancedArrays = GLCapabilityType.instancedArrays, multipleSample = GLCapabilityType.multipleSample, drawBuffers = GLCapabilityType.drawBuffers, blendMinMax = GLCapabilityType.blendMinMax, astc = GLCapabilityType.astc, astc_webkit = GLCapabilityType.astc_webkit, etc = GLCapabilityType.etc, etc_webkit = GLCapabilityType.etc_webkit, etc1 = GLCapabilityType.etc1, etc1_webkit = GLCapabilityType.etc1_webkit, pvrtc = GLCapabilityType.pvrtc, pvrtc_webkit = GLCapabilityType.pvrtc_webkit, s3tc = GLCapabilityType.s3tc, s3tc_webkit = GLCapabilityType.s3tc_webkit, bptc = GLCapabilityType.bptc, textureFloat = GLCapabilityType.textureFloat, textureHalfFloat = GLCapabilityType.textureHalfFloat, textureFloatLinear = GLCapabilityType.textureFloatLinear, textureHalfFloatLinear = GLCapabilityType.textureHalfFloatLinear, WEBGL_colorBufferFloat = GLCapabilityType.WEBGL_colorBufferFloat, colorBufferFloat = GLCapabilityType.colorBufferFloat, colorBufferHalfFloat = GLCapabilityType.colorBufferHalfFloat, textureFilterAnisotropic = GLCapabilityType.textureFilterAnisotropic, fragDepth = GLCapabilityType.fragDepth;
         cap.set(shaderVertexID, isWebGL2);
         cap.set(standardDerivatives, isWebGL2 || !!requireExtension(standardDerivatives));
         cap.set(shaderTextureLod, isWebGL2 || !!requireExtension(shaderTextureLod));
@@ -372,6 +356,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));
@@ -379,6 +364,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)));
@@ -412,9 +398,13 @@ var GLBuffer = /*#__PURE__*/ function() {
         }
     };
     _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 depthTexture = GLCapabilityType.depthTexture, vertexArrayObject = GLCapabilityType.vertexArrayObject, instancedArrays = GLCapabilityType.instancedArrays, drawBuffers = GLCapabilityType.drawBuffers, textureFilterAnisotropic = GLCapabilityType.textureFilterAnisotropic, textureHalfFloat = GLCapabilityType.textureHalfFloat, colorBufferHalfFloat = GLCapabilityType.colorBufferHalfFloat, WEBGL_colorBufferFloat = GLCapabilityType.WEBGL_colorBufferFloat, blendMinMax = GLCapabilityType.blendMinMax;
         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"
             });
@@ -927,6 +917,13 @@ var GLBuffer = /*#__PURE__*/ function() {
                     dataType: gl.FLOAT,
                     isCompressed: false
                 };
+            case TextureFormat.R32G32B32A32_UInt:
+                return {
+                    internalFormat: isWebGL2 ? gl.RGBA32UI : gl.NONE,
+                    baseFormat: gl.RGBA_INTEGER,
+                    dataType: gl.UNSIGNED_INT,
+                    isCompressed: false
+                };
             case TextureFormat.BC1:
                 return {
                     internalFormat: GLCompressedTextureInternalFormat.RGB_S3TC_DXT1_EXT,
@@ -1077,7 +1074,7 @@ var GLBuffer = /*#__PURE__*/ function() {
    * @internal
    */ GLTexture._getRenderBufferDepthFormatDetail = function _getRenderBufferDepthFormatDetail(format, gl, isWebGL2) {
         switch(format){
-            case RenderBufferDepthFormat.Depth:
+            case TextureFormat.Depth:
                 return {
                     internalFormat: isWebGL2 ? gl.DEPTH_COMPONENT32F : gl.DEPTH_COMPONENT16,
                     baseFormat: gl.DEPTH_COMPONENT,
@@ -1085,7 +1082,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_ATTACHMENT
                 };
-            case RenderBufferDepthFormat.DepthStencil:
+            case TextureFormat.DepthStencil:
                 return {
                     internalFormat: isWebGL2 ? gl.DEPTH32F_STENCIL8 : gl.DEPTH_STENCIL,
                     baseFormat: gl.DEPTH_STENCIL,
@@ -1093,7 +1090,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_STENCIL_ATTACHMENT
                 };
-            case RenderBufferDepthFormat.Stencil:
+            case TextureFormat.Stencil:
                 return {
                     internalFormat: gl.STENCIL_INDEX8,
                     baseFormat: gl.STENCIL_ATTACHMENT,
@@ -1101,7 +1098,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.STENCIL_ATTACHMENT
                 };
-            case RenderBufferDepthFormat.Depth16:
+            case TextureFormat.Depth16:
                 return {
                     internalFormat: gl.DEPTH_COMPONENT16,
                     baseFormat: gl.DEPTH_COMPONENT,
@@ -1109,7 +1106,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_ATTACHMENT
                 };
-            case RenderBufferDepthFormat.Depth24Stencil8:
+            case TextureFormat.Depth24Stencil8:
                 return {
                     internalFormat: isWebGL2 ? gl.DEPTH24_STENCIL8 : gl.DEPTH_STENCIL,
                     baseFormat: gl.DEPTH_STENCIL,
@@ -1117,7 +1114,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_STENCIL_ATTACHMENT
                 };
-            case RenderBufferDepthFormat.Depth24:
+            case TextureFormat.Depth24:
                 return {
                     internalFormat: gl.DEPTH_COMPONENT24,
                     baseFormat: gl.DEPTH_COMPONENT,
@@ -1125,7 +1122,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_ATTACHMENT
                 };
-            case RenderBufferDepthFormat.Depth32:
+            case TextureFormat.Depth32:
                 return {
                     internalFormat: gl.DEPTH_COMPONENT32F,
                     baseFormat: gl.DEPTH_COMPONENT,
@@ -1133,7 +1130,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     isCompressed: false,
                     attachment: gl.DEPTH_ATTACHMENT
                 };
-            case RenderBufferDepthFormat.Depth32Stencil8:
+            case TextureFormat.Depth32Stencil8:
                 return {
                     internalFormat: gl.DEPTH32F_STENCIL8,
                     baseFormat: gl.DEPTH_STENCIL,
@@ -1168,6 +1165,7 @@ var GLBuffer = /*#__PURE__*/ function() {
                     return false;
                 }
                 break;
+            case TextureFormat.R32G32B32A32_UInt:
             case TextureFormat.Depth24:
             case TextureFormat.Depth32:
             case TextureFormat.Depth32Stencil8:
@@ -1202,9 +1200,9 @@ var GLBuffer = /*#__PURE__*/ function() {
    */ GLTexture._supportRenderBufferDepthFormat = function _supportRenderBufferDepthFormat(format, rhi) {
         if (!rhi.isWebGL2) {
             switch(format){
-                case RenderBufferDepthFormat.Depth24:
-                case RenderBufferDepthFormat.Depth32:
-                case RenderBufferDepthFormat.Depth32Stencil8:
+                case TextureFormat.Depth24:
+                case TextureFormat.Depth32:
+                case TextureFormat.Depth32Stencil8:
                     return false;
             }
         }
@@ -1307,6 +1305,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;
@@ -1358,21 +1357,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, 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, TextureCube);
             if (mipChanged || isCube1) {
@@ -1389,8 +1390,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.
@@ -1428,20 +1431,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;
@@ -1751,6 +1740,9 @@ var WebGLMode;
     function WebGLGraphicDevice(initializeOptions) {
         if (initializeOptions === void 0) initializeOptions = {};
         /** @internal */ this._readFrameBuffer = null;
+        /** @internal */ this._mainFrameBuffer = null;
+        /** @internal */ this._mainFrameWidth = 0;
+        /** @internal */ this._mainFrameHeight = 0;
         /** @internal */ this._enableGlobalDepthBias = false;
         this._activeTextures = new Array(32);
         this._lastViewport = new Vector4(null, null, null, null);
@@ -1913,23 +1905,30 @@ var WebGLMode;
             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);
     };