@galacean/engine-core 1.2.0-alpha.0 → 1.2.0-alpha.2

package/dist/module.js

@@ -1,4 +1,4 @@
-import { MathUtil as MathUtil$1, Vector2, BoundingBox, Rect, Vector4, Quaternion, Vector3, Matrix3x3, Matrix, Color as Color$1, Ray, Plane, BoundingSphere, FrustumFace, CollisionUtil, BoundingFrustum, Rand } from '@galacean/engine-math';
+import { MathUtil, Vector2, BoundingBox, Rect, Vector4, Quaternion, Vector3, Matrix3x3, Matrix, Color, Ray, Plane, BoundingSphere, FrustumFace, CollisionUtil, BoundingFrustum, Rand } from '@galacean/engine-math';
 
 /**
  * The platform (including operating system and hardware) is running on.
@@ -55,347 +55,6 @@ function _inherits(subClass, superClass) {
     if (superClass) _set_prototype_of(subClass, superClass);
 }
 
-/**
- * Common utility methods for math operations.
- */ var MathUtil = /*#__PURE__*/ function() {
-    function MathUtil() {}
-    /**
-   * Clamps the specified value.
-   * @param v - The specified value
-   * @param min - The min value
-   * @param max - The max value
-   * @returns The result of clamping a value between min and max
-   */ MathUtil.clamp = function clamp(v, min, max) {
-        return Math.max(min, Math.min(max, v));
-    };
-    /**
-   * Checks if a and b are almost equals.
-   * The absolute value of the difference between a and b is close to zero.
-   * @param a - The left value to compare
-   * @param b - The right value to compare
-   * @returns True if a almost equal to b, false otherwise
-   */ MathUtil.equals = function equals(a, b) {
-        return Math.abs(a - b) <= MathUtil.zeroTolerance;
-    };
-    /**
-   * Determines whether the specified v is pow2.
-   * @param v - The specified v
-   * @returns True if the specified v is pow2, false otherwise
-   */ MathUtil.isPowerOf2 = function isPowerOf2(v) {
-        return (v & v - 1) === 0;
-    };
-    /**
-   * Modify the specified r from radian to degree.
-   * @param r - The specified r
-   * @returns The degree value
-   */ MathUtil.radianToDegree = function radianToDegree(r) {
-        return r * MathUtil.radToDegreeFactor;
-    };
-    /**
-   * Modify the specified d from degree to radian.
-   * @param d - The specified d
-   * @returns The radian value
-   */ MathUtil.degreeToRadian = function degreeToRadian(d) {
-        return d * MathUtil.degreeToRadFactor;
-    };
-    return MathUtil;
-}();
-(function() {
-    /** The value for which all absolute numbers smaller than are considered equal to zero. */ MathUtil.zeroTolerance = 1e-6;
-})();
-(function() {
-    /** The conversion factor that radian to degree. */ MathUtil.radToDegreeFactor = 180 / Math.PI;
-})();
-(function() {
-    /** The conversion factor that degree to radian. */ MathUtil.degreeToRadFactor = Math.PI / 180;
-})();
-
-/**
- * Describes a color in the from of RGBA (in order: R, G, B, A).
- */ var Color = /*#__PURE__*/ function() {
-    function Color(r, g, b, a) {
-        if (r === void 0) r = 1;
-        if (g === void 0) g = 1;
-        if (b === void 0) b = 1;
-        if (a === void 0) a = 1;
-        /** @internal */ this._onValueChanged = null;
-        this._r = r;
-        this._g = g;
-        this._b = b;
-        this._a = a;
-    }
-    var _proto = Color.prototype;
-    /**
-   * Set the value of this color.
-   * @param r - The red component of the color
-   * @param g - The green component of the color
-   * @param b - The blue component of the color
-   * @param a - The alpha component of the color
-   * @returns This color.
-   */ _proto.set = function set(r, g, b, a) {
-        this._r = r;
-        this._g = g;
-        this._b = b;
-        this._a = a;
-        this._onValueChanged && this._onValueChanged();
-        return this;
-    };
-    /**
-   * Determines the sum of this color and the specified color.
-   * @param color - The specified color
-   * @returns The added color
-   */ _proto.add = function add(color) {
-        this._r += color._r;
-        this._g += color._g;
-        this._b += color._b;
-        this._a += color._a;
-        this._onValueChanged && this._onValueChanged();
-        return this;
-    };
-    /**
-   * Scale this color by the given value.
-   * @param s - The amount by which to scale the color
-   * @returns The scaled color
-   */ _proto.scale = function scale(s) {
-        this._r *= s;
-        this._g *= s;
-        this._b *= s;
-        this._a *= s;
-        this._onValueChanged && this._onValueChanged();
-        return this;
-    };
-    /**
-   * Creates a clone of this color.
-   * @returns A clone of this color
-   */ _proto.clone = function clone() {
-        var ret = new Color(this._r, this._g, this._b, this._a);
-        return ret;
-    };
-    /**
-   * Copy from color like object.
-   * @param source - Color like object.
-   * @returns This vector
-   */ _proto.copyFrom = function copyFrom(source) {
-        this._r = source.r;
-        this._g = source.g;
-        this._b = source.b;
-        this._a = source.a;
-        this._onValueChanged && this._onValueChanged();
-        return this;
-    };
-    /**
-   * Copy from array like object.
-   * @param source - Array like object
-   * @param offset - The start offset
-   * @returns This color
-   */ _proto.copyFromArray = function copyFromArray(source, offset) {
-        if (offset === void 0) offset = 0;
-        this._r = source[offset];
-        this._g = source[offset + 1];
-        this._b = source[offset + 2];
-        this._a = source[offset + 3];
-        this._onValueChanged && this._onValueChanged();
-        return this;
-    };
-    /**
-   * Copy the value of this color to an array.
-   * @param out - The color
-   * @param outOffset - The start offset
-   */ _proto.copyToArray = function copyToArray(out, outOffset) {
-        if (outOffset === void 0) outOffset = 0;
-        out[outOffset] = this._r;
-        out[outOffset + 1] = this._g;
-        out[outOffset + 2] = this._b;
-        out[outOffset + 3] = this._a;
-    };
-    /**
-   * Modify components (r, g, b) of this color from gamma space to linear space.
-   * @param out - The color in linear space
-   * @returns The color in linear space
-   */ _proto.toLinear = function toLinear(out) {
-        out._r = Color.gammaToLinearSpace(this._r);
-        out._g = Color.gammaToLinearSpace(this._g);
-        out._b = Color.gammaToLinearSpace(this._b);
-        this._onValueChanged && this._onValueChanged();
-        return out;
-    };
-    /**
-   * Modify components (r, g, b) of this color from linear space to gamma space.
-   * @param out - The color in gamma space
-   * @returns The color in gamma space
-   */ _proto.toGamma = function toGamma(out) {
-        out._r = Color.linearToGammaSpace(this._r);
-        out._g = Color.linearToGammaSpace(this._g);
-        out._b = Color.linearToGammaSpace(this._b);
-        this._onValueChanged && this._onValueChanged();
-        return out;
-    };
-    /**
-   * Gets the brightness.
-   * @returns The Hue-Saturation-Brightness (HSB) saturation for this
-   */ _proto.getBrightness = function getBrightness() {
-        var r = this.r;
-        var g = this.g;
-        var b = this.b;
-        var max = r;
-        var min = r;
-        if (g > max) max = g;
-        if (b > max) max = b;
-        if (g < min) min = g;
-        if (b < min) min = b;
-        return (max + min) / 2;
-    };
-    /**
-   * Serialize this color to a JSON representation.
-   * @return A JSON representation of this color
-   */ _proto.toJSON = function toJSON() {
-        return {
-            r: this._r,
-            g: this._g,
-            b: this._b,
-            a: this._a
-        };
-    };
-    /**
-   * Modify a value from the gamma space to the linear space.
-   * @param value - The value in gamma space
-   * @returns The value in linear space
-   */ Color.gammaToLinearSpace = function gammaToLinearSpace(value) {
-        // https://www.khronos.org/registry/OpenGL/extensions/EXT/EXT_framebuffer_sRGB.txt
-        // https://www.khronos.org/registry/OpenGL/extensions/EXT/EXT_texture_sRGB_decode.txt
-        if (value <= 0.0) return 0.0;
-        else if (value <= 0.04045) return value / 12.92;
-        else if (value < 1.0) return Math.pow((value + 0.055) / 1.055, 2.4);
-        else return Math.pow(value, 2.4);
-    };
-    /**
-   * Modify a value from the linear space to the gamma space.
-   * @param value - The value in linear space
-   * @returns The value in gamma space
-   */ Color.linearToGammaSpace = function linearToGammaSpace(value) {
-        // https://www.khronos.org/registry/OpenGL/extensions/EXT/EXT_framebuffer_sRGB.txt
-        // https://www.khronos.org/registry/OpenGL/extensions/EXT/EXT_texture_sRGB_decode.txt
-        if (value <= 0.0) return 0.0;
-        else if (value < 0.0031308) return 12.92 * value;
-        else if (value < 1.0) return 1.055 * Math.pow(value, 0.41666) - 0.055;
-        else return Math.pow(value, 0.41666);
-    };
-    /**
-   * Determines whether the specified colors are equals.
-   * @param left - The first color to compare
-   * @param right - The second color to compare
-   * @returns True if the specified colors are equals, false otherwise
-   */ Color.equals = function equals(left, right) {
-        return MathUtil.equals(left._r, right._r) && MathUtil.equals(left._g, right._g) && MathUtil.equals(left._b, right._b) && MathUtil.equals(left._a, right._a);
-    };
-    /**
-   * Determines the sum of two colors.
-   * @param left - The first color to add
-   * @param right - The second color to add
-   * @param out - The sum of two colors
-   * @returns The added color
-   */ Color.add = function add(left, right, out) {
-        out._r = left._r + right._r;
-        out._g = left._g + right._g;
-        out._b = left._b + right._b;
-        out._a = left._a + right._a;
-        out._onValueChanged && out._onValueChanged();
-        return out;
-    };
-    /**
-   * Determines the difference between two colors.
-   * @param left - The first color to subtract
-   * @param right - The second color to subtract
-   * @param out - The difference between two colors
-   */ Color.subtract = function subtract(left, right, out) {
-        out._r = left._r - right._r;
-        out._g = left._g - right._g;
-        out._b = left._b - right._b;
-        out._a = left._a - right._a;
-        out._onValueChanged && out._onValueChanged();
-    };
-    /**
-   * Scale a color by the given value.
-   * @param left - The color to scale
-   * @param s - The amount by which to scale the color
-   * @param out - The scaled color
-   * @returns The scaled color
-   */ Color.scale = function scale(left, s, out) {
-        out._r = left._r * s;
-        out._g = left._g * s;
-        out._b = left._b * s;
-        out._a = left._a * s;
-        out._onValueChanged && out._onValueChanged();
-        return out;
-    };
-    /**
-   * Performs a linear interpolation between two color.
-   * @param start - The first color
-   * @param end - The second color
-   * @param t - The blend amount where 0 returns start and 1 end
-   * @param out - The result of linear blending between two color
-   */ Color.lerp = function lerp(start, end, t, out) {
-        var _r = start._r, _g = start._g, _b = start._b, _a = start._a;
-        out._r = _r + (end._r - _r) * t;
-        out._g = _g + (end._g - _g) * t;
-        out._b = _b + (end._b - _b) * t;
-        out._a = _a + (end._a - _a) * t;
-        out._onValueChanged && out._onValueChanged();
-        return out;
-    };
-    _create_class(Color, [
-        {
-            key: "r",
-            get: /**
-   * The red component of the color, 0~1.
-   */ function get() {
-                return this._r;
-            },
-            set: function set(value) {
-                this._r = value;
-                this._onValueChanged && this._onValueChanged();
-            }
-        },
-        {
-            key: "g",
-            get: /**
-   * The green component of the color, 0~1.
-   */ function get() {
-                return this._g;
-            },
-            set: function set(value) {
-                this._g = value;
-                this._onValueChanged && this._onValueChanged();
-            }
-        },
-        {
-            key: "b",
-            get: /**
-   * The blue component of the color, 0~1.
-   */ function get() {
-                return this._b;
-            },
-            set: function set(value) {
-                this._b = value;
-                this._onValueChanged && this._onValueChanged();
-            }
-        },
-        {
-            key: "a",
-            get: /**
-   * The alpha component of the color, 0~1.
-   */ function get() {
-                return this._a;
-            },
-            set: function set(value) {
-                this._a = value;
-                this._onValueChanged && this._onValueChanged();
-            }
-        }
-    ]);
-    return Color;
-}();
-
 /**
  * Sprite mask interaction.
  */ var SpriteMaskInteraction;
@@ -936,7 +595,14 @@ var Utils = /*#__PURE__*/ function() {
    * @param url - The url to be judged.
    * @returns Whether the url is absolute url.
    */ Utils.isAbsoluteUrl = function isAbsoluteUrl(url) {
-        return /^(?:http|blob|data:|\/)/.test(url);
+        return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url);
+    };
+    /**
+   * Judge whether the url is base64 url.
+   * @param url - The url to be judged.
+   * @returns Whether the url is base64 url.
+   */ Utils.isBase64Url = function isBase64Url(url) {
+        return /^data:.*,.*$/i.test(url);
     };
     /**
    * Get the values of an object.
@@ -954,7 +620,10 @@ var Utils = /*#__PURE__*/ function() {
         if (Utils.isAbsoluteUrl(relativeUrl)) {
             return relativeUrl;
         }
-        return baseUrl.substring(0, baseUrl.lastIndexOf("/") + 1) + this._formatRelativePath(relativeUrl);
+        if (Utils.isBase64Url(relativeUrl)) {
+            return relativeUrl;
+        }
+        return relativeUrl ? baseUrl.replace(/\/+$/, "") + "/" + relativeUrl.replace(/^\/+/, "") : baseUrl;
     };
     /**
    * @internal
@@ -1400,9 +1069,9 @@ var rePropName$1 = RegExp(// Match anything that isn't a dot or bracket.
         var _this = this, region = _this._region;
         // @ts-ignore
         region._onValueChanged = null;
-        var x = MathUtil$1.clamp(region.x, 0, 1);
-        var y = MathUtil$1.clamp(region.y, 0, 1);
-        region.set(x, y, MathUtil$1.clamp(region.width, 0, 1 - x), MathUtil$1.clamp(region.height, 0, 1 - y));
+        var x = MathUtil.clamp(region.x, 0, 1);
+        var y = MathUtil.clamp(region.y, 0, 1);
+        region.set(x, y, MathUtil.clamp(region.width, 0, 1 - x), MathUtil.clamp(region.height, 0, 1 - y));
         this._dispatchSpriteChange(SpriteModifyFlags.region);
         if (this._customWidth === undefined || this._customHeight === undefined) {
             this._dispatchSpriteChange(SpriteModifyFlags.size);
@@ -1417,9 +1086,9 @@ var rePropName$1 = RegExp(// Match anything that isn't a dot or bracket.
         var _this = this, border = _this._border;
         // @ts-ignore
         border._onValueChanged = null;
-        var x = MathUtil$1.clamp(border.x, 0, 1);
-        var y = MathUtil$1.clamp(border.y, 0, 1);
-        border.set(x, y, MathUtil$1.clamp(border.z, 0, 1 - x), MathUtil$1.clamp(border.w, 0, 1 - y));
+        var x = MathUtil.clamp(border.x, 0, 1);
+        var y = MathUtil.clamp(border.y, 0, 1);
+        border.set(x, y, MathUtil.clamp(border.z, 0, 1 - x), MathUtil.clamp(border.w, 0, 1 - y));
         this._dispatchSpriteChange(SpriteModifyFlags.border);
         // @ts-ignore
         border._onValueChanged = this._onBorderChange;
@@ -1509,9 +1178,9 @@ var rePropName$1 = RegExp(// Match anything that isn't a dot or bracket.
                 return this._atlasRegion;
             },
             set: function set(value) {
-                var x = MathUtil$1.clamp(value.x, 0, 1);
-                var y = MathUtil$1.clamp(value.y, 0, 1);
-                this._atlasRegion.set(x, y, MathUtil$1.clamp(value.width, 0, 1 - x), MathUtil$1.clamp(value.height, 0, 1 - y));
+                var x = MathUtil.clamp(value.x, 0, 1);
+                var y = MathUtil.clamp(value.y, 0, 1);
+                this._atlasRegion.set(x, y, MathUtil.clamp(value.width, 0, 1 - x), MathUtil.clamp(value.height, 0, 1 - y));
                 this._dispatchSpriteChange(SpriteModifyFlags.atlasRegion);
                 if (this._customWidth === undefined || this._customHeight === undefined) {
                     this._dispatchSpriteChange(SpriteModifyFlags.size);
@@ -1526,9 +1195,9 @@ var rePropName$1 = RegExp(// Match anything that isn't a dot or bracket.
                 return this._atlasRegionOffset;
             },
             set: function set(value) {
-                var x = MathUtil$1.clamp(value.x, 0, 1);
-                var y = MathUtil$1.clamp(value.y, 0, 1);
-                this._atlasRegionOffset.set(x, y, MathUtil$1.clamp(value.z, 0, 1 - x), MathUtil$1.clamp(value.w, 0, 1 - y));
+                var x = MathUtil.clamp(value.x, 0, 1);
+                var y = MathUtil.clamp(value.y, 0, 1);
+                this._atlasRegionOffset.set(x, y, MathUtil.clamp(value.z, 0, 1 - x), MathUtil.clamp(value.w, 0, 1 - y));
                 this._dispatchSpriteChange(SpriteModifyFlags.atlasRegionOffset);
                 if (this._customWidth === undefined || this._customHeight === undefined) {
                     this._dispatchSpriteChange(SpriteModifyFlags.size);
@@ -2116,20 +1785,28 @@ var ActiveChangeFlag;
                     this._enabled = value;
                     if (this._entity._isActiveInScene) {
                         if (value) {
-                            this._phasedActiveInScene = true;
-                            this._onEnableInScene();
+                            if (!this._phasedActiveInScene) {
+                                this._phasedActiveInScene = true;
+                                this._onEnableInScene();
+                            }
                         } else {
-                            this._phasedActiveInScene = false;
-                            this._onDisableInScene();
+                            if (this._phasedActiveInScene) {
+                                this._phasedActiveInScene = false;
+                                this._onDisableInScene();
+                            }
                         }
                     }
                     if (this._entity.isActiveInHierarchy) {
                         if (value) {
-                            this._phasedActive = true;
-                            this._onEnable();
+                            if (!this._phasedActive) {
+                                this._phasedActive = true;
+                                this._onEnable();
+                            }
                         } else {
-                            this._phasedActive = false;
-                            this._onDisable();
+                            if (this._phasedActive) {
+                                this._phasedActive = false;
+                                this._onDisable();
+                            }
                         }
                     }
                 }
@@ -2442,7 +2119,7 @@ var DependentMode;
    * @param relativeToLocal = `true` - Relative to local space
    */ _proto.rotateByAxis = function rotateByAxis(axis, angle, relativeToLocal) {
         if (relativeToLocal === void 0) relativeToLocal = true;
-        var rad = angle * MathUtil$1.degreeToRadFactor;
+        var rad = angle * MathUtil.degreeToRadFactor;
         Quaternion.rotationAxisAngle(axis, rad, Transform._tempQuat0);
         this._rotateByQuat(Transform._tempQuat0, relativeToLocal);
     };
@@ -2454,7 +2131,7 @@ var DependentMode;
         var zAxis = Transform._tempVec30;
         Vector3.subtract(this.worldPosition, targetPosition, zAxis);
         var axisLen = zAxis.length();
-        if (axisLen <= MathUtil$1.zeroTolerance) {
+        if (axisLen <= MathUtil.zeroTolerance) {
             // The current position and the target position are almost the same.
             return;
         }
@@ -2466,7 +2143,7 @@ var DependentMode;
             xAxis.set(zAxis.z, 0, -zAxis.x);
         }
         axisLen = xAxis.length();
-        if (axisLen <= MathUtil$1.zeroTolerance) {
+        if (axisLen <= MathUtil.zeroTolerance) {
             // @todo:
             // 1.worldUp is（0,0,0）
             // 2.worldUp is parallel to zAxis
@@ -2673,7 +2350,7 @@ var DependentMode;
     };
     _proto._rotateXYZ = function _rotateXYZ(x, y, z, relativeToLocal) {
         if (relativeToLocal === void 0) relativeToLocal = true;
-        var radFactor = MathUtil$1.degreeToRadFactor;
+        var radFactor = MathUtil.degreeToRadFactor;
         var rotQuat = Transform._tempQuat0;
         Quaternion.rotationEuler(x * radFactor, y * radFactor, z * radFactor, rotQuat);
         this._rotateByQuat(rotQuat, relativeToLocal);
@@ -2700,7 +2377,7 @@ var DependentMode;
     };
     _proto._onWorldRotationChanged = function _onWorldRotationChanged() {
         var worldRotation = this._worldRotation;
-        Quaternion.rotationEuler(MathUtil$1.degreeToRadian(worldRotation.x), MathUtil$1.degreeToRadian(worldRotation.y), MathUtil$1.degreeToRadian(worldRotation.z), this._worldRotationQuaternion);
+        Quaternion.rotationEuler(MathUtil.degreeToRadian(worldRotation.x), MathUtil.degreeToRadian(worldRotation.y), MathUtil.degreeToRadian(worldRotation.z), this._worldRotationQuaternion);
         this._setDirtyFlagFalse(0x8);
     };
     _proto._onRotationQuaternionChanged = function _onRotationQuaternionChanged() {
@@ -2775,7 +2452,7 @@ var DependentMode;
                     //@ts-ignore
                     rotation._onValueChanged = null;
                     this._rotationQuaternion.toEuler(rotation);
-                    rotation.scale(MathUtil$1.radToDegreeFactor); // radians to degrees
+                    rotation.scale(MathUtil.radToDegreeFactor); // radians to degrees
                     //@ts-ignore
                     rotation._onValueChanged = this._onRotationChanged;
                     this._setDirtyFlagFalse(0x1);
@@ -2799,7 +2476,7 @@ var DependentMode;
                     //@ts-ignore
                     worldRotation._onValueChanged = null;
                     this.worldRotationQuaternion.toEuler(worldRotation);
-                    worldRotation.scale(MathUtil$1.radToDegreeFactor); // Radian to angle
+                    worldRotation.scale(MathUtil.radToDegreeFactor); // Radian to angle
                     //@ts-ignore
                     worldRotation._onValueChanged = this._onWorldRotationChanged;
                     this._setDirtyFlagFalse(0x8);
@@ -2821,7 +2498,7 @@ var DependentMode;
                 if (this._isContainDirtyFlag(0x2)) {
                     //@ts-ignore
                     rotationQuaternion._onValueChanged = null;
-                    Quaternion.rotationEuler(MathUtil$1.degreeToRadian(this._rotation.x), MathUtil$1.degreeToRadian(this._rotation.y), MathUtil$1.degreeToRadian(this._rotation.z), rotationQuaternion);
+                    Quaternion.rotationEuler(MathUtil.degreeToRadian(this._rotation.x), MathUtil.degreeToRadian(this._rotation.y), MathUtil.degreeToRadian(this._rotation.z), rotationQuaternion);
                     //@ts-ignore
                     rotationQuaternion._onValueChanged = this._onRotationQuaternionChanged;
                     this._setDirtyFlagFalse(0x2);
@@ -3502,7 +3179,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 
-var camera_declare = "#define GLSLIFY 1\nuniform vec3 camera_Position;"; // eslint-disable-line
+var camera_declare = "#define GLSLIFY 1\nuniform vec3 camera_Position;uniform vec3 camera_Forward;"; // eslint-disable-line
 
 var common = "#define GLSLIFY 1\n#define PI 3.14159265359\n#define RECIPROCAL_PI 0.31830988618\n#define EPSILON 1e-6\n#define LOG2 1.442695\n#define saturate( a ) clamp( a, 0.0, 1.0 )\nfloat pow2(float x){return x*x;}vec4 RGBMToLinear(vec4 value,float maxRange){return vec4(value.rgb*value.a*maxRange,1.0);}vec4 gammaToLinear(vec4 srgbIn){return vec4(pow(srgbIn.rgb,vec3(2.2)),srgbIn.a);}vec4 linearToGamma(vec4 linearIn){return vec4(pow(linearIn.rgb,vec3(1.0/2.2)),linearIn.a);}uniform vec4 camera_DepthBufferParams;float remapDepthBufferLinear01(float z){return 1.0/(camera_DepthBufferParams.x*z+camera_DepthBufferParams.y);}\n#ifdef GRAPHICS_API_WEBGL2\n#define INVERSE_MAT(mat) inverse(mat)\n#else\nmat2 inverseMat(mat2 m){return mat2(m[1][1],-m[0][1],-m[1][0],m[0][0])/(m[0][0]*m[1][1]-m[0][1]*m[1][0]);}mat3 inverseMat(mat3 m){float a00=m[0][0],a01=m[0][1],a02=m[0][2];float a10=m[1][0],a11=m[1][1],a12=m[1][2];float a20=m[2][0],a21=m[2][1],a22=m[2][2];float b01=a22*a11-a12*a21;float b11=-a22*a10+a12*a20;float b21=a21*a10-a11*a20;float det=a00*b01+a01*b11+a02*b21;return mat3(b01,(-a22*a01+a02*a21),(a12*a01-a02*a11),b11,(a22*a00-a02*a20),(-a12*a00+a02*a10),b21,(-a21*a00+a01*a20),(a11*a00-a01*a10))/det;}mat4 inverseMat(mat4 m){float a00=m[0][0],a01=m[0][1],a02=m[0][2],a03=m[0][3],a10=m[1][0],a11=m[1][1],a12=m[1][2],a13=m[1][3],a20=m[2][0],a21=m[2][1],a22=m[2][2],a23=m[2][3],a30=m[3][0],a31=m[3][1],a32=m[3][2],a33=m[3][3],b00=a00*a11-a01*a10,b01=a00*a12-a02*a10,b02=a00*a13-a03*a10,b03=a01*a12-a02*a11,b04=a01*a13-a03*a11,b05=a02*a13-a03*a12,b06=a20*a31-a21*a30,b07=a20*a32-a22*a30,b08=a20*a33-a23*a30,b09=a21*a32-a22*a31,b10=a21*a33-a23*a31,b11=a22*a33-a23*a32,det=b00*b11-b01*b10+b02*b09+b03*b08-b04*b07+b05*b06;return mat4(a11*b11-a12*b10+a13*b09,a02*b10-a01*b11-a03*b09,a31*b05-a32*b04+a33*b03,a22*b04-a21*b05-a23*b03,a12*b08-a10*b11-a13*b07,a00*b11-a02*b08+a03*b07,a32*b02-a30*b05-a33*b01,a20*b05-a22*b02+a23*b01,a10*b10-a11*b08+a13*b06,a01*b08-a00*b10-a03*b06,a30*b04-a31*b02+a33*b00,a21*b02-a20*b04-a23*b00,a11*b07-a10*b09-a12*b06,a00*b09-a01*b07+a02*b06,a31*b01-a30*b03-a32*b00,a20*b03-a21*b01+a22*b00)/det;}\n#define INVERSE_MAT(mat) inverseMat(mat)\n#endif\n"; // eslint-disable-line
 
@@ -3552,7 +3229,7 @@ var mobile_material_frag = "#define GLSLIFY 1\nuniform vec4 material_EmissiveCol
 
 var begin_mobile_frag = "#define GLSLIFY 1\nvec4 ambient=vec4(0.0);vec4 emission=material_EmissiveColor;vec4 diffuse=material_BaseColor;vec4 specular=material_SpecularColor;\n#ifdef MATERIAL_HAS_EMISSIVETEXTURE\nvec4 emissiveTextureColor=texture2D(material_EmissiveTexture,v_uv);\n#ifndef ENGINE_IS_COLORSPACE_GAMMA\nemissiveTextureColor=gammaToLinear(emissiveTextureColor);\n#endif\nemission*=emissiveTextureColor;\n#endif\n#ifdef MATERIAL_HAS_BASETEXTURE\nvec4 diffuseTextureColor=texture2D(material_BaseTexture,v_uv);\n#ifndef ENGINE_IS_COLORSPACE_GAMMA\ndiffuseTextureColor=gammaToLinear(diffuseTextureColor);\n#endif\ndiffuse*=diffuseTextureColor;\n#endif\n#ifdef RENDERER_ENABLE_VERTEXCOLOR\ndiffuse*=v_color;\n#endif\n#ifdef MATERIAL_HAS_SPECULAR_TEXTURE\nvec4 specularTextureColor=texture2D(material_SpecularTexture,v_uv);\n#ifndef ENGINE_IS_COLORSPACE_GAMMA\nspecularTextureColor=gammaToLinear(specularTextureColor);\n#endif\nspecular*=specularTextureColor;\n#endif\nambient=vec4(scene_EnvMapLight.diffuse*scene_EnvMapLight.diffuseIntensity,1.0)*diffuse;"; // eslint-disable-line
 
-var begin_viewdir_frag = "#define GLSLIFY 1\n#ifdef MATERIAL_NEED_WORLD_POS\nvec3 V=normalize(camera_Position-v_pos);\n#endif\n"; // eslint-disable-line
+var begin_viewdir_frag = "#define GLSLIFY 1\n#ifdef CAMERA_ORTHOGRAPHIC\nvec3 V=-camera_Forward;\n#else\n#ifdef MATERIAL_NEED_WORLD_POS\nvec3 V=normalize(camera_Position-v_pos);\n#endif\n#endif\n"; // eslint-disable-line
 
 var mobile_blinnphong_frag = "#define GLSLIFY 1\n#ifdef MATERIAL_HAS_NORMALTEXTURE\nmat3 tbn=getTBN(gl_FrontFacing);vec3 N=getNormalByNormalTexture(tbn,material_NormalTexture,material_NormalIntensity,v_uv,gl_FrontFacing);\n#else\nvec3 N=getNormal(gl_FrontFacing);\n#endif\nvec3 lightDiffuse=vec3(0.0,0.0,0.0);vec3 lightSpecular=vec3(0.0,0.0,0.0);float shadowAttenuation=1.0;\n#ifdef SCENE_DIRECT_LIGHT_COUNT\nshadowAttenuation=1.0;\n#ifdef SCENE_IS_CALCULATE_SHADOWS\nshadowAttenuation*=sampleShadowMap();\n#endif\nDirectLight directionalLight;for(int i=0;i<SCENE_DIRECT_LIGHT_COUNT;i++){if(!isRendererCulledByLight(renderer_Layer.xy,scene_DirectLightCullingMask[i])){directionalLight.color=scene_DirectLightColor[i];\n#ifdef SCENE_IS_CALCULATE_SHADOWS\nif(i==0){directionalLight.color*=shadowAttenuation;}\n#endif\ndirectionalLight.direction=scene_DirectLightDirection[i];float d=max(dot(N,-directionalLight.direction),0.0);lightDiffuse+=directionalLight.color*d;vec3 halfDir=normalize(V-directionalLight.direction);float s=pow(clamp(dot(N,halfDir),0.0,1.0),material_Shininess);lightSpecular+=directionalLight.color*s;}}\n#endif\n#ifdef SCENE_POINT_LIGHT_COUNT\nPointLight pointLight;for(int i=0;i<SCENE_POINT_LIGHT_COUNT;i++){if(!isRendererCulledByLight(renderer_Layer.xy,scene_PointLightCullingMask[i])){pointLight.color=scene_PointLightColor[i];pointLight.position=scene_PointLightPosition[i];pointLight.distance=scene_PointLightDistance[i];vec3 direction=v_pos-pointLight.position;float dist=length(direction);direction/=dist;float decay=clamp(1.0-pow(dist/pointLight.distance,4.0),0.0,1.0);float d=max(dot(N,-direction),0.0)*decay;lightDiffuse+=pointLight.color*d;vec3 halfDir=normalize(V-direction);float s=pow(clamp(dot(N,halfDir),0.0,1.0),material_Shininess)*decay;lightSpecular+=pointLight.color*s;}}\n#endif\n#ifdef SCENE_SPOT_LIGHT_COUNT\nSpotLight spotLight;for(int i=0;i<SCENE_SPOT_LIGHT_COUNT;i++){if(!isRendererCulledByLight(renderer_Layer.xy,scene_SpotLightCullingMask[i])){spotLight.color=scene_SpotLightColor[i];spotLight.position=scene_SpotLightPosition[i];spotLight.direction=scene_SpotLightDirection[i];spotLight.distance=scene_SpotLightDistance[i];spotLight.angleCos=scene_SpotLightAngleCos[i];spotLight.penumbraCos=scene_SpotLightPenumbraCos[i];vec3 direction=spotLight.position-v_pos;float lightDistance=length(direction);direction/=lightDistance;float angleCos=dot(direction,-spotLight.direction);float decay=clamp(1.0-pow(lightDistance/spotLight.distance,4.0),0.0,1.0);float spotEffect=smoothstep(spotLight.penumbraCos,spotLight.angleCos,angleCos);float decayTotal=decay*spotEffect;float d=max(dot(N,direction),0.0)*decayTotal;lightDiffuse+=spotLight.color*d;vec3 halfDir=normalize(V+direction);float s=pow(clamp(dot(N,halfDir),0.0,1.0),material_Shininess)*decayTotal;lightSpecular+=spotLight.color*s;}}\n#endif\ndiffuse*=vec4(lightDiffuse,1.0);specular*=vec4(lightSpecular,1.0);\n#ifdef MATERIAL_IS_ALPHA_CUTOFF\nif(diffuse.a<material_AlphaCutoff){discard;}\n#endif\n"; // eslint-disable-line
 
@@ -3590,7 +3267,7 @@ var noise_simplex_4D = "#define GLSLIFY 1\nvec4 grad4(float j,vec4 ip){const vec
 
 var pbr_frag_define = "#define GLSLIFY 1\n#define MIN_PERCEPTUAL_ROUGHNESS 0.045\n#define MIN_ROUGHNESS 0.002025\nuniform float material_AlphaCutoff;uniform vec4 material_BaseColor;uniform float material_Metal;uniform float material_Roughness;uniform float material_IOR;uniform vec3 material_PBRSpecularColor;uniform float material_Glossiness;uniform vec3 material_EmissiveColor;uniform float material_NormalIntensity;uniform float material_OcclusionIntensity;uniform float material_OcclusionTextureCoord;\n#ifdef MATERIAL_ENABLE_CLEAR_COAT\nuniform float material_ClearCoat;uniform float material_ClearCoatRoughness;\n#ifdef MATERIAL_HAS_CLEAR_COAT_TEXTURE\nuniform sampler2D material_ClearCoatTexture;\n#endif\n#ifdef MATERIAL_HAS_CLEAR_COAT_ROUGHNESS_TEXTURE\nuniform sampler2D material_ClearCoatRoughnessTexture;\n#endif\n#ifdef MATERIAL_HAS_CLEAR_COAT_NORMAL_TEXTURE\nuniform sampler2D material_ClearCoatNormalTexture;\n#endif\n#endif\n#ifdef MATERIAL_ENABLE_ANISOTROPY\nuniform vec3 material_AnisotropyInfo;\n#ifdef MATERIAL_HAS_ANISOTROPY_TEXTURE\nuniform sampler2D material_AnisotropyTexture;\n#endif\n#endif\n#ifdef MATERIAL_HAS_BASETEXTURE\nuniform sampler2D material_BaseTexture;\n#endif\n#ifdef MATERIAL_HAS_NORMALTEXTURE\nuniform sampler2D material_NormalTexture;\n#endif\n#ifdef MATERIAL_HAS_EMISSIVETEXTURE\nuniform sampler2D material_EmissiveTexture;\n#endif\n#ifdef MATERIAL_HAS_ROUGHNESS_METALLIC_TEXTURE\nuniform sampler2D material_RoughnessMetallicTexture;\n#endif\n#ifdef MATERIAL_HAS_SPECULAR_GLOSSINESS_TEXTURE\nuniform sampler2D material_SpecularGlossinessTexture;\n#endif\n#ifdef MATERIAL_HAS_OCCLUSION_TEXTURE\nuniform sampler2D material_OcclusionTexture;\n#endif\nstruct ReflectedLight{vec3 directDiffuse;vec3 directSpecular;vec3 indirectDiffuse;vec3 indirectSpecular;};struct Geometry{vec3 position;vec3 normal;vec3 viewDir;float dotNV;\n#ifdef MATERIAL_ENABLE_CLEAR_COAT\nvec3 clearCoatNormal;float clearCoatDotNV;\n#endif\n#ifdef MATERIAL_ENABLE_ANISOTROPY\nvec3 anisotropicT;vec3 anisotropicB;vec3 anisotropicN;float anisotropy;\n#endif\n};struct Material{vec3 diffuseColor;float roughness;vec3 specularColor;float opacity;float f0;\n#ifdef MATERIAL_ENABLE_CLEAR_COAT\nfloat clearCoat;float clearCoatRoughness;\n#endif\n};"; // eslint-disable-line
 
-var pbr_helper = "#define GLSLIFY 1\n#include <normal_get>\nfloat computeSpecularOcclusion(float ambientOcclusion,float roughness,float dotNV){return saturate(pow(dotNV+ambientOcclusion,exp2(-16.0*roughness-1.0))-1.0+ambientOcclusion);}float getAARoughnessFactor(vec3 normal){\n#ifdef HAS_DERIVATIVES\nvec3 dxy=max(abs(dFdx(normal)),abs(dFdy(normal)));return MIN_PERCEPTUAL_ROUGHNESS+max(max(dxy.x,dxy.y),dxy.z);\n#else\nreturn MIN_PERCEPTUAL_ROUGHNESS;\n#endif\n}\n#ifdef MATERIAL_ENABLE_ANISOTROPY\nvec3 getAnisotropicBentNormal(Geometry geometry,vec3 n,float roughness){vec3 anisotropyDirection=geometry.anisotropy>=0.0 ? geometry.anisotropicB : geometry.anisotropicT;vec3 anisotropicTangent=cross(anisotropyDirection,geometry.viewDir);vec3 anisotropicNormal=cross(anisotropicTangent,anisotropyDirection);vec3 bentNormal=normalize(mix(n,anisotropicNormal,abs(geometry.anisotropy)*saturate(5.0*roughness)));return bentNormal;}\n#endif\nvoid initGeometry(out Geometry geometry,bool isFrontFacing){geometry.position=v_pos;geometry.viewDir=normalize(camera_Position-v_pos);\n#if defined(MATERIAL_HAS_NORMALTEXTURE) || defined(MATERIAL_HAS_CLEAR_COAT_NORMAL_TEXTURE) || defined(MATERIAL_ENABLE_ANISOTROPY)\nmat3 tbn=getTBN(isFrontFacing);\n#endif\n#ifdef MATERIAL_HAS_NORMALTEXTURE\ngeometry.normal=getNormalByNormalTexture(tbn,material_NormalTexture,material_NormalIntensity,v_uv,isFrontFacing);\n#else\ngeometry.normal=getNormal(isFrontFacing);\n#endif\ngeometry.dotNV=saturate(dot(geometry.normal,geometry.viewDir));\n#ifdef MATERIAL_ENABLE_CLEAR_COAT\n#ifdef MATERIAL_HAS_CLEAR_COAT_NORMAL_TEXTURE\ngeometry.clearCoatNormal=getNormalByNormalTexture(tbn,material_ClearCoatNormalTexture,material_NormalIntensity,v_uv,isFrontFacing);\n#else\ngeometry.clearCoatNormal=getNormal(isFrontFacing);\n#endif\ngeometry.clearCoatDotNV=saturate(dot(geometry.clearCoatNormal,geometry.viewDir));\n#endif\n#ifdef MATERIAL_ENABLE_ANISOTROPY\nfloat anisotropy=material_AnisotropyInfo.z;vec3 anisotropicDirection=vec3(material_AnisotropyInfo.xy,0.0);\n#ifdef MATERIAL_HAS_ANISOTROPY_TEXTURE\nvec3 anisotropyTextureInfo=texture2D(material_AnisotropyTexture,v_uv).rgb;anisotropy*=anisotropyTextureInfo.b;anisotropicDirection.xy*=anisotropyTextureInfo.rg*2.0-1.0;\n#endif\ngeometry.anisotropy=anisotropy;geometry.anisotropicT=normalize(tbn*anisotropicDirection);geometry.anisotropicB=normalize(cross(geometry.normal,geometry.anisotropicT));\n#endif\n}void initMaterial(out Material material,inout Geometry geometry){vec4 baseColor=material_BaseColor;float metal=material_Metal;float roughness=material_Roughness;vec3 specularColor=material_PBRSpecularColor;float glossiness=material_Glossiness;float alphaCutoff=material_AlphaCutoff;float f0=pow2((material_IOR-1.0)/(material_IOR+1.0));material.f0=f0;\n#ifdef MATERIAL_HAS_BASETEXTURE\nvec4 baseTextureColor=texture2D(material_BaseTexture,v_uv);\n#ifndef ENGINE_IS_COLORSPACE_GAMMA\nbaseTextureColor=gammaToLinear(baseTextureColor);\n#endif\nbaseColor*=baseTextureColor;\n#endif\n#ifdef RENDERER_ENABLE_VERTEXCOLOR\nbaseColor*=v_color;\n#endif\n#ifdef MATERIAL_IS_ALPHA_CUTOFF\nif(baseColor.a<alphaCutoff){discard;}\n#endif\n#ifdef MATERIAL_HAS_ROUGHNESS_METALLIC_TEXTURE\nvec4 metalRoughMapColor=texture2D(material_RoughnessMetallicTexture,v_uv);roughness*=metalRoughMapColor.g;metal*=metalRoughMapColor.b;\n#endif\n#ifdef MATERIAL_HAS_SPECULAR_GLOSSINESS_TEXTURE\nvec4 specularGlossinessColor=texture2D(material_SpecularGlossinessTexture,v_uv);\n#ifndef ENGINE_IS_COLORSPACE_GAMMA\nspecularGlossinessColor=gammaToLinear(specularGlossinessColor);\n#endif\nspecularColor*=specularGlossinessColor.rgb;glossiness*=specularGlossinessColor.a;\n#endif\n#ifdef IS_METALLIC_WORKFLOW\nmaterial.diffuseColor=baseColor.rgb*(1.0-metal);material.specularColor=mix(vec3(f0),baseColor.rgb,metal);material.roughness=roughness;\n#else\nfloat specularStrength=max(max(specularColor.r,specularColor.g),specularColor.b);material.diffuseColor=baseColor.rgb*(1.0-specularStrength);material.specularColor=specularColor;material.roughness=1.0-glossiness;\n#endif\nmaterial.roughness=max(material.roughness,getAARoughnessFactor(geometry.normal));\n#ifdef MATERIAL_ENABLE_CLEAR_COAT\nmaterial.clearCoat=material_ClearCoat;material.clearCoatRoughness=material_ClearCoatRoughness;\n#ifdef MATERIAL_HAS_CLEAR_COAT_TEXTURE\nmaterial.clearCoat*=texture2D(material_ClearCoatTexture,v_uv).r;\n#endif\n#ifdef MATERIAL_HAS_CLEAR_COAT_ROUGHNESS_TEXTURE\nmaterial.clearCoatRoughness*=texture2D(material_ClearCoatRoughnessTexture,v_uv).g;\n#endif\nmaterial.clearCoat=saturate(material.clearCoat);material.clearCoatRoughness=max(material.clearCoatRoughness,getAARoughnessFactor(geometry.clearCoatNormal));\n#endif\n#ifdef MATERIAL_IS_TRANSPARENT\nmaterial.opacity=baseColor.a;\n#else\nmaterial.opacity=1.0;\n#endif\n#ifdef MATERIAL_ENABLE_ANISOTROPY\ngeometry.anisotropicN=getAnisotropicBentNormal(geometry,geometry.normal,material.roughness);\n#endif\n}\n#include <brdf>\n#include <direct_irradiance_frag_define>\n#include <ibl_frag_define>\n"; // eslint-disable-line
+var pbr_helper = "#define GLSLIFY 1\n#include <normal_get>\nfloat computeSpecularOcclusion(float ambientOcclusion,float roughness,float dotNV){return saturate(pow(dotNV+ambientOcclusion,exp2(-16.0*roughness-1.0))-1.0+ambientOcclusion);}float getAARoughnessFactor(vec3 normal){\n#ifdef HAS_DERIVATIVES\nvec3 dxy=max(abs(dFdx(normal)),abs(dFdy(normal)));return MIN_PERCEPTUAL_ROUGHNESS+max(max(dxy.x,dxy.y),dxy.z);\n#else\nreturn MIN_PERCEPTUAL_ROUGHNESS;\n#endif\n}\n#ifdef MATERIAL_ENABLE_ANISOTROPY\nvec3 getAnisotropicBentNormal(Geometry geometry,vec3 n,float roughness){vec3 anisotropyDirection=geometry.anisotropy>=0.0 ? geometry.anisotropicB : geometry.anisotropicT;vec3 anisotropicTangent=cross(anisotropyDirection,geometry.viewDir);vec3 anisotropicNormal=cross(anisotropicTangent,anisotropyDirection);vec3 bentNormal=normalize(mix(n,anisotropicNormal,abs(geometry.anisotropy)*saturate(5.0*roughness)));return bentNormal;}\n#endif\nvoid initGeometry(out Geometry geometry,bool isFrontFacing){geometry.position=v_pos;\n#ifdef CAMERA_ORTHOGRAPHIC\ngeometry.viewDir=-camera_Forward;\n#else\ngeometry.viewDir=normalize(camera_Position-v_pos);\n#endif\n#if defined(MATERIAL_HAS_NORMALTEXTURE) || defined(MATERIAL_HAS_CLEAR_COAT_NORMAL_TEXTURE) || defined(MATERIAL_ENABLE_ANISOTROPY)\nmat3 tbn=getTBN(isFrontFacing);\n#endif\n#ifdef MATERIAL_HAS_NORMALTEXTURE\ngeometry.normal=getNormalByNormalTexture(tbn,material_NormalTexture,material_NormalIntensity,v_uv,isFrontFacing);\n#else\ngeometry.normal=getNormal(isFrontFacing);\n#endif\ngeometry.dotNV=saturate(dot(geometry.normal,geometry.viewDir));\n#ifdef MATERIAL_ENABLE_CLEAR_COAT\n#ifdef MATERIAL_HAS_CLEAR_COAT_NORMAL_TEXTURE\ngeometry.clearCoatNormal=getNormalByNormalTexture(tbn,material_ClearCoatNormalTexture,material_NormalIntensity,v_uv,isFrontFacing);\n#else\ngeometry.clearCoatNormal=getNormal(isFrontFacing);\n#endif\ngeometry.clearCoatDotNV=saturate(dot(geometry.clearCoatNormal,geometry.viewDir));\n#endif\n#ifdef MATERIAL_ENABLE_ANISOTROPY\nfloat anisotropy=material_AnisotropyInfo.z;vec3 anisotropicDirection=vec3(material_AnisotropyInfo.xy,0.0);\n#ifdef MATERIAL_HAS_ANISOTROPY_TEXTURE\nvec3 anisotropyTextureInfo=texture2D(material_AnisotropyTexture,v_uv).rgb;anisotropy*=anisotropyTextureInfo.b;anisotropicDirection.xy*=anisotropyTextureInfo.rg*2.0-1.0;\n#endif\ngeometry.anisotropy=anisotropy;geometry.anisotropicT=normalize(tbn*anisotropicDirection);geometry.anisotropicB=normalize(cross(geometry.normal,geometry.anisotropicT));\n#endif\n}void initMaterial(out Material material,inout Geometry geometry){vec4 baseColor=material_BaseColor;float metal=material_Metal;float roughness=material_Roughness;vec3 specularColor=material_PBRSpecularColor;float glossiness=material_Glossiness;float alphaCutoff=material_AlphaCutoff;float f0=pow2((material_IOR-1.0)/(material_IOR+1.0));material.f0=f0;\n#ifdef MATERIAL_HAS_BASETEXTURE\nvec4 baseTextureColor=texture2D(material_BaseTexture,v_uv);\n#ifndef ENGINE_IS_COLORSPACE_GAMMA\nbaseTextureColor=gammaToLinear(baseTextureColor);\n#endif\nbaseColor*=baseTextureColor;\n#endif\n#ifdef RENDERER_ENABLE_VERTEXCOLOR\nbaseColor*=v_color;\n#endif\n#ifdef MATERIAL_IS_ALPHA_CUTOFF\nif(baseColor.a<alphaCutoff){discard;}\n#endif\n#ifdef MATERIAL_HAS_ROUGHNESS_METALLIC_TEXTURE\nvec4 metalRoughMapColor=texture2D(material_RoughnessMetallicTexture,v_uv);roughness*=metalRoughMapColor.g;metal*=metalRoughMapColor.b;\n#endif\n#ifdef MATERIAL_HAS_SPECULAR_GLOSSINESS_TEXTURE\nvec4 specularGlossinessColor=texture2D(material_SpecularGlossinessTexture,v_uv);\n#ifndef ENGINE_IS_COLORSPACE_GAMMA\nspecularGlossinessColor=gammaToLinear(specularGlossinessColor);\n#endif\nspecularColor*=specularGlossinessColor.rgb;glossiness*=specularGlossinessColor.a;\n#endif\n#ifdef IS_METALLIC_WORKFLOW\nmaterial.diffuseColor=baseColor.rgb*(1.0-metal);material.specularColor=mix(vec3(f0),baseColor.rgb,metal);material.roughness=roughness;\n#else\nfloat specularStrength=max(max(specularColor.r,specularColor.g),specularColor.b);material.diffuseColor=baseColor.rgb*(1.0-specularStrength);material.specularColor=specularColor;material.roughness=1.0-glossiness;\n#endif\nmaterial.roughness=max(material.roughness,getAARoughnessFactor(geometry.normal));\n#ifdef MATERIAL_ENABLE_CLEAR_COAT\nmaterial.clearCoat=material_ClearCoat;material.clearCoatRoughness=material_ClearCoatRoughness;\n#ifdef MATERIAL_HAS_CLEAR_COAT_TEXTURE\nmaterial.clearCoat*=texture2D(material_ClearCoatTexture,v_uv).r;\n#endif\n#ifdef MATERIAL_HAS_CLEAR_COAT_ROUGHNESS_TEXTURE\nmaterial.clearCoatRoughness*=texture2D(material_ClearCoatRoughnessTexture,v_uv).g;\n#endif\nmaterial.clearCoat=saturate(material.clearCoat);material.clearCoatRoughness=max(material.clearCoatRoughness,getAARoughnessFactor(geometry.clearCoatNormal));\n#endif\n#ifdef MATERIAL_IS_TRANSPARENT\nmaterial.opacity=baseColor.a;\n#else\nmaterial.opacity=1.0;\n#endif\n#ifdef MATERIAL_ENABLE_ANISOTROPY\ngeometry.anisotropicN=getAnisotropicBentNormal(geometry,geometry.normal,material.roughness);\n#endif\n}\n#include <brdf>\n#include <direct_irradiance_frag_define>\n#include <ibl_frag_define>\n"; // eslint-disable-line
 
 var brdf = "#define GLSLIFY 1\nfloat F_Schlick(float f0,float dotLH){return f0+0.96*(pow(1.0-dotLH,5.0));}vec3 F_Schlick(vec3 specularColor,float dotLH){float fresnel=exp2((-5.55473*dotLH-6.98316)*dotLH);return(1.0-specularColor)*fresnel+specularColor;}float G_GGX_SmithCorrelated(float alpha,float dotNL,float dotNV){float a2=pow2(alpha);float gv=dotNL*sqrt(a2+(1.0-a2)*pow2(dotNV));float gl=dotNV*sqrt(a2+(1.0-a2)*pow2(dotNL));return 0.5/max(gv+gl,EPSILON);}\n#ifdef MATERIAL_ENABLE_ANISOTROPY\nfloat G_GGX_SmithCorrelated_Anisotropic(float at,float ab,float ToV,float BoV,float ToL,float BoL,float NoV,float NoL){float lambdaV=NoL*length(vec3(at*ToV,ab*BoV,NoV));float lambdaL=NoV*length(vec3(at*ToL,ab*BoL,NoL));return 0.5/max(lambdaV+lambdaL,EPSILON);}\n#endif\nfloat D_GGX(float alpha,float dotNH){float a2=pow2(alpha);float denom=pow2(dotNH)*(a2-1.0)+1.0;return RECIPROCAL_PI*a2/pow2(denom);}\n#ifdef MATERIAL_ENABLE_ANISOTROPY\nfloat D_GGX_Anisotropic(float at,float ab,float ToH,float BoH,float NoH){float a2=at*ab;highp vec3 d=vec3(ab*ToH,at*BoH,a2*NoH);highp float d2=dot(d,d);float b2=a2/d2;return a2*b2*b2*RECIPROCAL_PI;}\n#endif\nvec3 isotropicLobe(vec3 specularColor,float alpha,float dotNV,float dotNL,float dotNH,float dotLH){vec3 F=F_Schlick(specularColor,dotLH);float D=D_GGX(alpha,dotNH);float G=G_GGX_SmithCorrelated(alpha,dotNL,dotNV);return F*(G*D);}\n#ifdef MATERIAL_ENABLE_ANISOTROPY\nvec3 anisotropicLobe(vec3 h,vec3 l,Geometry geometry,vec3 specularColor,float alpha,float dotNV,float dotNL,float dotNH,float dotLH){vec3 t=geometry.anisotropicT;vec3 b=geometry.anisotropicB;vec3 v=geometry.viewDir;float dotTV=dot(t,v);float dotBV=dot(b,v);float dotTL=dot(t,l);float dotBL=dot(b,l);float dotTH=dot(t,h);float dotBH=dot(b,h);float at=max(alpha*(1.0+geometry.anisotropy),MIN_ROUGHNESS);float ab=max(alpha*(1.0-geometry.anisotropy),MIN_ROUGHNESS);vec3 F=F_Schlick(specularColor,dotLH);float D=D_GGX_Anisotropic(at,ab,dotTH,dotBH,dotNH);float G=G_GGX_SmithCorrelated_Anisotropic(at,ab,dotTV,dotBV,dotTL,dotBL,dotNV,dotNL);return F*(G*D);}\n#endif\nvec3 BRDF_Specular_GGX(vec3 incidentDirection,Geometry geometry,vec3 normal,vec3 specularColor,float roughness){float alpha=pow2(roughness);vec3 halfDir=normalize(incidentDirection+geometry.viewDir);float dotNL=saturate(dot(normal,incidentDirection));float dotNV=saturate(dot(normal,geometry.viewDir));float dotNH=saturate(dot(normal,halfDir));float dotLH=saturate(dot(incidentDirection,halfDir));\n#ifdef MATERIAL_ENABLE_ANISOTROPY\nreturn anisotropicLobe(halfDir,incidentDirection,geometry,specularColor,alpha,dotNV,dotNL,dotNH,dotLH);\n#else\nreturn isotropicLobe(specularColor,alpha,dotNV,dotNL,dotNH,dotLH);\n#endif\n}vec3 BRDF_Diffuse_Lambert(vec3 diffuseColor){return RECIPROCAL_PI*diffuseColor;}"; // eslint-disable-line
 
@@ -3726,7 +3403,11 @@ var ShaderFactory = /*#__PURE__*/ function() {
         }
         ShaderLib[includeName] = includeSource;
     };
-    ShaderFactory.parseIncludes = function parseIncludes(src) {
+    /**
+   * @param regex The default regex is for engine's builtin glsl `#include` syntax,
+   * since `ShaderLab` use the same parsing function but different syntax for `#include` --- `/^[ \t]*#include +"([\w\d.]+)"/gm`
+   */ ShaderFactory.parseIncludes = function parseIncludes(src, regex) {
+        if (regex === void 0) regex = /^[ \t]*#include +<([\w\d.]+)>/gm;
         var replace = function replace(match, slice) {
             var replace = ShaderLib[slice];
             if (replace === undefined) {
@@ -3735,7 +3416,6 @@ var ShaderFactory = /*#__PURE__*/ function() {
             }
             return ShaderFactory.parseIncludes(replace);
         };
-        var regex = /^[ \t]*#include +<([\w\d.]+)>/gm;
         return src.replace(regex, replace);
     };
     /**
@@ -3890,7 +3570,7 @@ var ShaderFactory = /*#__PURE__*/ function() {
         if (value.r !== undefined) {
             if (cacheValue.x !== value.r || cacheValue.y !== value.g) {
                 if (this._colorSpace === ColorSpace.Linear) {
-                    this._gl.uniform2f(shaderUniform.location, Color$1.gammaToLinearSpace(value.r), Color$1.gammaToLinearSpace(value.g));
+                    this._gl.uniform2f(shaderUniform.location, Color.gammaToLinearSpace(value.r), Color.gammaToLinearSpace(value.g));
                 } else {
                     this._gl.uniform2f(shaderUniform.location, value.r, value.g);
                 }
@@ -3913,7 +3593,7 @@ var ShaderFactory = /*#__PURE__*/ function() {
         if (value.r !== undefined) {
             if (cacheValue.x !== value.r || cacheValue.y !== value.g || cacheValue.z !== value.b) {
                 if (this._colorSpace === ColorSpace.Linear) {
-                    this._gl.uniform3f(shaderUniform.location, Color$1.gammaToLinearSpace(value.r), Color$1.gammaToLinearSpace(value.g), Color$1.gammaToLinearSpace(value.b));
+                    this._gl.uniform3f(shaderUniform.location, Color.gammaToLinearSpace(value.r), Color.gammaToLinearSpace(value.g), Color.gammaToLinearSpace(value.b));
                 } else {
                     this._gl.uniform3f(shaderUniform.location, value.r, value.g, value.b);
                 }
@@ -3938,7 +3618,7 @@ var ShaderFactory = /*#__PURE__*/ function() {
         if (value.r !== undefined) {
             if (cacheValue.x !== value.r || cacheValue.y !== value.g || cacheValue.z !== value.b || cacheValue.w !== value.a) {
                 if (this._colorSpace === ColorSpace.Linear) {
-                    this._gl.uniform4f(shaderUniform.location, Color$1.gammaToLinearSpace(value.r), Color$1.gammaToLinearSpace(value.g), Color$1.gammaToLinearSpace(value.b), value.a);
+                    this._gl.uniform4f(shaderUniform.location, Color.gammaToLinearSpace(value.r), Color.gammaToLinearSpace(value.g), Color.gammaToLinearSpace(value.b), value.a);
                 } else {
                     this._gl.uniform4f(shaderUniform.location, value.r, value.g, value.b, value.a);
                 }
@@ -4589,7 +4269,7 @@ var ShaderFactory = /*#__PURE__*/ function() {
  */ var BlendState = /*#__PURE__*/ function() {
     function BlendState() {
         /** The blend state of the render target. */ this.targetBlendState = new RenderTargetBlendState();
-        /** Constant blend color. */ this.blendColor = new Color$1(0, 0, 0, 0);
+        /** Constant blend color. */ this.blendColor = new Color(0, 0, 0, 0);
         /** Whether to use (Alpha-to-Coverage) technology. */ this.alphaToCoverage = false;
     }
     var _proto = BlendState.prototype;
@@ -4683,7 +4363,7 @@ var ShaderFactory = /*#__PURE__*/ function() {
             }
             // apply blend color.
             var blendColor = this.blendColor;
-            if (!Color$1.equals(lastState.blendColor, blendColor)) {
+            if (!Color.equals(lastState.blendColor, blendColor)) {
                 gl.blendColor(blendColor.r, blendColor.g, blendColor.b, blendColor.a);
                 lastState.blendColor.copyFrom(blendColor);
             }
@@ -6717,7 +6397,7 @@ SlicedSpriteAssembler = __decorate([
             _this._byteLength = byteLength;
             _this._platformBuffer = engine._hardwareRenderer.createPlatformBuffer(type, byteLength, bufferUsage, data);
             if (readable) {
-                var buffer = (data.constructor === ArrayBuffer ? data : data.buffer).slice(0, byteLength);
+                var buffer = data.constructor === ArrayBuffer ? data.slice(0) : data.buffer.slice(data.byteOffset, data.byteOffset + byteLength);
                 _this._data = new Uint8Array(buffer);
             }
         }
@@ -9438,7 +9118,7 @@ var /**
     };
     _proto._readColorVertexData = function _readColorVertexData(attributeType) {
         return this._readVertexData(attributeType, function(dataReader, offset) {
-            return new Color$1(dataReader[offset], dataReader[offset + 1], dataReader[offset + 2], dataReader[offset + 3]);
+            return new Color(dataReader[offset], dataReader[offset + 1], dataReader[offset + 2], dataReader[offset + 3]);
         });
     };
     _proto._readVertexData = function _readVertexData(attributeType, onVertexParse) {
@@ -9926,6 +9606,10 @@ var VertexElementIndex;
                 var sphereInfo = primitiveInfo;
                 PrimitiveMesh._setSphereData(this.resource, sphereInfo.radius, sphereInfo.segments, sphereInfo.noLongerAccessible, true, sphereInfo.vertexBuffer);
                 break;
+            case 7:
+                var CCSphereInfo = primitiveInfo;
+                PrimitiveMesh._setSubdivisionSurfaceSphereData(this.resource, CCSphereInfo.radius, CCSphereInfo.step, CCSphereInfo.noLongerAccessible, true, CCSphereInfo.vertexBuffer);
+                break;
             case 1:
                 var cuboidInfo = primitiveInfo;
                 PrimitiveMesh._setCuboidData(this.resource, cuboidInfo.width, cuboidInfo.height, cuboidInfo.depth, cuboidInfo.noLongerAccessible, true, cuboidInfo.vertexBuffer);
@@ -9963,6 +9647,7 @@ var PrimitiveType;
     PrimitiveType[PrimitiveType["Torus"] = 4] = "Torus";
     PrimitiveType[PrimitiveType["Cone"] = 5] = "Cone";
     PrimitiveType[PrimitiveType["Capsule"] = 6] = "Capsule";
+    PrimitiveType[PrimitiveType["CCSphere"] = 7] = "CCSphere";
 })(PrimitiveType || (PrimitiveType = {}));
 /**
  * @internal
@@ -9984,6 +9669,19 @@ var PrimitiveType;
     }
     return SphereRestoreInfo;
 }(PrimitiveRestoreInfo);
+/**
+ * @internal
+ */ var SubdivisionSurfaceSphereRestoreInfo = /*#__PURE__*/ function(PrimitiveRestoreInfo) {
+    _inherits(SubdivisionSurfaceSphereRestoreInfo, PrimitiveRestoreInfo);
+    function SubdivisionSurfaceSphereRestoreInfo(radius, step, vertexBuffer, noLongerAccessible) {
+        var _this;
+        _this = PrimitiveRestoreInfo.call(this, 7, vertexBuffer, noLongerAccessible) || this;
+        _this.radius = radius;
+        _this.step = step;
+        return _this;
+    }
+    return SubdivisionSurfaceSphereRestoreInfo;
+}(PrimitiveRestoreInfo);
 /**
  * @internal
  */ var CuboidRestoreInfo = /*#__PURE__*/ function(PrimitiveRestoreInfo) {
@@ -10098,6 +9796,24 @@ var PrimitiveType;
         return sphereMesh;
     };
     /**
+   * Create a sphere mesh by implementing Catmull-Clark Surface Subdivision Algorithm.
+   * Max step is limited to 6.
+   * @param engine - Engine
+   * @param radius - Sphere radius
+   * @param step - Number of subdiv steps
+   * @param noLongerAccessible - No longer access the vertices of the mesh after creation
+   * @returns Sphere model mesh
+   */ PrimitiveMesh.createSubdivisionSurfaceSphere = function createSubdivisionSurfaceSphere(engine, radius, step, noLongerAccessible) {
+        if (radius === void 0) radius = 0.5;
+        if (step === void 0) step = 3;
+        if (noLongerAccessible === void 0) noLongerAccessible = true;
+        var sphereMesh = new ModelMesh(engine);
+        PrimitiveMesh._setSubdivisionSurfaceSphereData(sphereMesh, radius, step, noLongerAccessible, false);
+        var vertexBuffer = sphereMesh.vertexBufferBindings[0].buffer;
+        engine.resourceManager.addContentRestorer(new PrimitiveMeshRestorer(sphereMesh, new SubdivisionSurfaceSphereRestoreInfo(radius, step, vertexBuffer, noLongerAccessible)));
+        return sphereMesh;
+    };
+    /**
    * Create a cuboid mesh.
    * @param engine - Engine
    * @param width - Cuboid width
@@ -10227,6 +9943,90 @@ var PrimitiveType;
     };
     /**
    * @internal
+   */ PrimitiveMesh._setSubdivisionSurfaceSphereData = function _setSubdivisionSurfaceSphereData(sphereMesh, radius, step, noLongerAccessible, isRestoreMode, restoreVertexBuffer) {
+        // Max step is limited to 6. Because 7 step will generate a single mesh with over 98306 vertices
+        step = MathUtil.clamp(Math.floor(step), 1, 6);
+        var positions = new Float32Array(3 * (6 * Math.pow(4, step) + 2));
+        var cells = new Float32Array(24 * Math.pow(4, step));
+        PrimitiveMesh._subdiveCatmullClark(step, positions, cells);
+        var positionCount = positions.length / 3;
+        var cellsCount = cells.length / 4;
+        var poleOffset = positionCount + Math.pow(2, step + 1) - 1;
+        // 16 extra vertices for pole uv
+        // 2 vertices at each pole are idle
+        var vertexCount = poleOffset + 16;
+        var vertices = new Float32Array(vertexCount * 8);
+        var indices = PrimitiveMesh._generateIndices(sphereMesh.engine, positionCount, cellsCount * 6);
+        var seamCount = 0;
+        var seamVertices = {};
+        // Get normals, uvs, and scale to radius
+        for(var i = 0; i < positionCount; i++){
+            var offset = 3 * i;
+            var x = positions[offset];
+            var y = positions[offset + 1];
+            var z = positions[offset + 2];
+            var reciprocalLength = 1 / Math.sqrt(x * x + y * y + z * z);
+            x *= reciprocalLength;
+            y *= reciprocalLength;
+            z *= reciprocalLength;
+            offset = 8 * i;
+            vertices[offset] = x * radius;
+            vertices[offset + 1] = y * radius;
+            vertices[offset + 2] = z * radius;
+            vertices[offset + 3] = x;
+            vertices[offset + 4] = y;
+            vertices[offset + 5] = z;
+            vertices[offset + 6] = (Math.PI - Math.atan2(z, x)) / (2 * Math.PI);
+            vertices[offset + 7] = Math.acos(y) / Math.PI;
+            if (vertices[offset + 6] === 0) {
+                // Generate seam vertex
+                var seamOffset = 8 * (positionCount + seamCount++);
+                vertices.set(vertices.subarray(offset, offset + 8), seamOffset);
+                vertices[seamOffset + 6] = 1.0;
+                // Cache seam vertex
+                seamVertices[offset / 8] = seamOffset / 8;
+            }
+        }
+        // Get indices
+        var offset1 = 0;
+        this._spherePoleIdx = 0;
+        for(var i1 = 0; i1 < cellsCount; i1++){
+            var idx = 4 * i1;
+            var indexA = cells[idx];
+            var indexB = cells[idx + 1];
+            var indexC = cells[idx + 2];
+            var indexD = cells[idx + 3];
+            // Handle seam by replacing vertex index to seam vertex index if necessary
+            var floatIndexA = 8 * indexA;
+            var floatIndexB = 8 * indexB;
+            var floatIndexC = 8 * indexC;
+            var floatIndexD = 8 * indexD;
+            // If center Z is negative
+            if (vertices[floatIndexA + 2] + vertices[floatIndexB + 2] + vertices[floatIndexC + 2] < 0) {
+                vertices[floatIndexA + 6] === 0 && (indexA = seamVertices[indexA]);
+                vertices[floatIndexB + 6] === 0 && (indexB = seamVertices[indexB]);
+                vertices[floatIndexC + 6] === 0 && (indexC = seamVertices[indexC]);
+                vertices[floatIndexD + 6] === 0 && (indexD = seamVertices[indexD]);
+            }
+            indices[offset1] = indexA;
+            indices[offset1 + 1] = indexB;
+            indices[offset1 + 2] = indexC;
+            this._generateAndReplacePoleUV(indices, vertices, offset1, poleOffset);
+            indices[offset1 + 3] = indexA;
+            indices[offset1 + 4] = indexC;
+            indices[offset1 + 5] = indexD;
+            this._generateAndReplacePoleUV(indices, vertices, offset1 + 3, poleOffset);
+            offset1 += 6;
+        }
+        if (!isRestoreMode) {
+            var bounds = sphereMesh.bounds;
+            bounds.min.set(-radius, -radius, -radius);
+            bounds.max.set(radius, radius, radius);
+        }
+        PrimitiveMesh._initialize(sphereMesh, vertices, indices, noLongerAccessible, isRestoreMode, restoreVertexBuffer);
+    };
+    /**
+   * @internal
    */ PrimitiveMesh._setSphereData = function _setSphereData(sphereMesh, radius, segments, noLongerAccessible, isRestoreMode, restoreVertexBuffer) {
         segments = Math.max(2, Math.floor(segments));
         var count = segments + 1;
@@ -10287,6 +10087,135 @@ var PrimitiveType;
     };
     /**
    * @internal
+   */ PrimitiveMesh._subdiveCatmullClark = function _subdiveCatmullClark(step, positions, cells) {
+        var edges = new Map();
+        var faces = new Array();
+        positions.set(PrimitiveMesh._sphereSeedPositions);
+        cells.set(PrimitiveMesh._sphereSeedCells);
+        for(var i = 0; i < step; i++){
+            var cellCount = 6 * Math.pow(4, i);
+            var positionCount = 4 * cellCount + 2;
+            edges.clear();
+            faces.length = 0;
+            // Get cell face's facePoint
+            for(var j = 0; j < cellCount; j++){
+                var face = faces[j] = {
+                    facePoint: new Vector3(),
+                    adjacentEdges: new Array(4)
+                };
+                // Get cell's edgePoint
+                for(var k = 0; k < 4; k++){
+                    var offset = 3 * cells[4 * j + k];
+                    face.facePoint.x += 0.25 * positions[offset];
+                    face.facePoint.y += 0.25 * positions[offset + 1];
+                    face.facePoint.z += 0.25 * positions[offset + 2];
+                }
+                // Get cell edges
+                for(var k1 = 0; k1 < 4; k1++){
+                    var vertexIdxA = cells[4 * j + k1];
+                    var vertexIdxB = cells[4 * j + (k1 + 1) % 4];
+                    var edgeIdxKey = Math.min(vertexIdxA, vertexIdxB) * positionCount + Math.max(vertexIdxA, vertexIdxB);
+                    if (!edges.has(edgeIdxKey)) {
+                        var edge = {
+                            edgePoint: new Vector3(),
+                            edgePointIndex: undefined
+                        };
+                        var offsetA = 3 * vertexIdxA;
+                        var offsetB = 3 * vertexIdxB;
+                        edge.edgePoint.set(0.25 * (positions[offsetA] + positions[offsetB]), 0.25 * (positions[offsetA + 1] + positions[offsetB + 1]), 0.25 * (positions[offsetA + 2] + positions[offsetB + 2]));
+                        edges.set(edgeIdxKey, edge);
+                    }
+                    var edge1 = edges.get(edgeIdxKey);
+                    face.adjacentEdges[k1] = edge1;
+                    var edgePoint = edge1.edgePoint;
+                    var facePoint = face.facePoint;
+                    edgePoint.x += 0.25 * facePoint.x;
+                    edgePoint.y += 0.25 * facePoint.y;
+                    edgePoint.z += 0.25 * facePoint.z;
+                }
+            }
+            var prePointCount = cellCount + 2;
+            var edgePointOffset = prePointCount + cellCount;
+            var pointIdx = 0;
+            this._sphereEdgeIdx = 0;
+            var preCells = cells.slice(0, 4 * cellCount);
+            // Get New positions, which consists of updated positions of existing points, face points and edge points
+            for(var j1 = 0; j1 < cellCount; j1++){
+                // Add face point to new positions
+                var face1 = faces[j1];
+                face1.facePoint.copyToArray(positions, 3 * (prePointCount + j1));
+                // Get the face point index
+                var ic = prePointCount + j1;
+                var id = void 0, ib = void 0, temp = void 0;
+                //  ia -- id -- ia
+                //  |     |     |
+                //  ib -- ic -- ib
+                //  |     |     |
+                //  ia -- id -- ia
+                for(var k2 = 0; k2 < 4; k2++){
+                    // Get the updated existing point index
+                    var ia = preCells[pointIdx++];
+                    // ib and id share four edge points in one cell
+                    switch(k2){
+                        case 0:
+                            {
+                                var edgeB = face1.adjacentEdges[k2 % 4];
+                                var edgeD = face1.adjacentEdges[(k2 + 3) % 4];
+                                ib = this._calculateEdgeIndex(positions, edgeB, edgePointOffset);
+                                id = this._calculateEdgeIndex(positions, edgeD, edgePointOffset);
+                                temp = id;
+                                break;
+                            }
+                        case 1:
+                        case 2:
+                            {
+                                var edgeB1 = face1.adjacentEdges[k2 % 4];
+                                id = ib;
+                                ib = this._calculateEdgeIndex(positions, edgeB1, edgePointOffset);
+                                break;
+                            }
+                        case 3:
+                            {
+                                id = ib;
+                                ib = temp;
+                                break;
+                            }
+                    }
+                    var idx = 4 * (4 * j1 + k2);
+                    cells[idx] = ia;
+                    cells[idx + 1] = ib;
+                    cells[idx + 2] = ic;
+                    cells[idx + 3] = id;
+                }
+            }
+        }
+    };
+    /**
+   * Duplicate vertices at the poles and adjust their UV coordinates.
+   */ PrimitiveMesh._generateAndReplacePoleUV = function _generateAndReplacePoleUV(indices, vertices, idx, poleOffset) {
+        var v = vertices[8 * indices[idx] + 7];
+        if (v === 0 || v === 1) {
+            var offset = 8 * indices[idx];
+            var addedOffset = 8 * (poleOffset + this._spherePoleIdx);
+            vertices.set(vertices.subarray(offset, offset + 8), addedOffset);
+            vertices[addedOffset + 6] = 0.5 * (vertices[offset + 6] + vertices[8 * indices[idx + 1] + 6] + vertices[8 * indices[idx + 2] + 6] - 0.5);
+            indices[idx] = poleOffset + this._spherePoleIdx++;
+        }
+    };
+    /**
+   * Get edge point index for subdivision surface sphere.
+   */ PrimitiveMesh._calculateEdgeIndex = function _calculateEdgeIndex(positions, edge, offset) {
+        if (edge.edgePointIndex !== undefined) {
+            return edge.edgePointIndex;
+        } else {
+            edge.edgePoint.copyToArray(positions, 3 * (offset + PrimitiveMesh._sphereEdgeIdx));
+            var index = offset + PrimitiveMesh._sphereEdgeIdx++;
+            edge.edgePointIndex = index;
+            return index;
+        }
+    };
+    /**
+   * @internal
    */ PrimitiveMesh._setCuboidData = function _setCuboidData(cuboidMesh, width, height, depth, noLongerAccessible, isRestoreMode, restoreVertexBuffer) {
         var halfWidth = width / 2;
         var halfHeight = height / 2;
@@ -10916,6 +10845,68 @@ var PrimitiveType;
 (function() {
     PrimitiveMesh._tempVec30 = new Vector3();
 })();
+(function() {
+    PrimitiveMesh._sphereSeedPositions = new Float32Array([
+        -1,
+        1,
+        1,
+        -1,
+        -1,
+        1,
+        1,
+        -1,
+        1,
+        1,
+        1,
+        1,
+        1,
+        -1,
+        -1,
+        1,
+        1,
+        -1,
+        -1,
+        -1,
+        -1,
+        -1,
+        1,
+        -1
+    ]);
+})();
+(function() {
+    PrimitiveMesh._sphereSeedCells = new Float32Array([
+        0,
+        1,
+        2,
+        3,
+        3,
+        2,
+        4,
+        5,
+        5,
+        4,
+        6,
+        7,
+        7,
+        0,
+        3,
+        5,
+        7,
+        6,
+        1,
+        0,
+        6,
+        4,
+        2,
+        1
+    ]);
+})();
+(function() {
+    PrimitiveMesh._sphereEdgeIdx = 0;
+})();
+(function() {
+    PrimitiveMesh._spherePoleIdx = 0;
+})();
 
 /**
  * Mesh skin data, equal glTF skins define
@@ -11460,8 +11451,10 @@ var Basic2DBatcher = /*#__PURE__*/ function() {
         }
         mesh.addSubMesh(this._getSubMeshFromPool(vertexStartIndex, vertexCount));
         batchedQueue[curMeshIndex] = preElement;
-        this._vertexBuffers[_flushId].setData(vertices, 0, 0, vertexIndex);
-        this._indiceBuffers[_flushId].setData(indices, 0, 0, indiceIndex);
+        // Set data option use Discard, or will resulted in performance slowdown when open antialias and cross-rendering of 3D and 2D elements.
+        // Device: iphone X(16.7.2)、iphone 15 pro max(17.1.1)、iphone XR(17.1.2) etc.
+        this._vertexBuffers[_flushId].setData(vertices, 0, 0, vertexIndex, SetDataOptions.Discard);
+        this._indiceBuffers[_flushId].setData(indices, 0, 0, indiceIndex, SetDataOptions.Discard);
     };
     _proto._getSubMeshFromPool = function _getSubMeshFromPool(start, count) {
         var subMesh = this._subMeshPool.getFromPool();
@@ -11608,7 +11601,7 @@ var TiledSpriteAssembler = (_TiledSpriteAssembler = /*#__PURE__*/ function() {
             rVertCount = 3;
             rType = 0;
         } else {
-            if (fixedCW > MathUtil$1.zeroTolerance) {
+            if (fixedCW > MathUtil.zeroTolerance) {
                 rRepeatCount = (width - fixedLR) / fixedCW;
                 rRepeatCount = rRepeatCount % 1 >= threshold ? Math.ceil(rRepeatCount) : Math.floor(rRepeatCount);
                 rVertCount = 4 + rRepeatCount - 1;
@@ -11622,7 +11615,7 @@ var TiledSpriteAssembler = (_TiledSpriteAssembler = /*#__PURE__*/ function() {
             cVertCount = 3;
             cType = 0;
         } else {
-            if (fixedCH > MathUtil$1.zeroTolerance) {
+            if (fixedCH > MathUtil.zeroTolerance) {
                 cRepeatCount = (height - fixedTB) / fixedCH;
                 cRepeatCount = cRepeatCount % 1 >= threshold ? Math.ceil(cRepeatCount) : Math.floor(cRepeatCount);
                 cVertCount = 4 + cRepeatCount - 1;
@@ -11713,7 +11706,7 @@ var TiledSpriteAssembler = (_TiledSpriteAssembler = /*#__PURE__*/ function() {
             rVertCount = 3;
             rType = 0;
         } else {
-            if (fixedCW > MathUtil$1.zeroTolerance) {
+            if (fixedCW > MathUtil.zeroTolerance) {
                 rRepeatCount = (width - fixedLR) / fixedCW;
                 rVertCount = 4 + (rRepeatCount | 0);
                 rType = 2;
@@ -11726,7 +11719,7 @@ var TiledSpriteAssembler = (_TiledSpriteAssembler = /*#__PURE__*/ function() {
             cVertCount = 3;
             cType = 0;
         } else {
-            if (fixedCH > MathUtil$1.zeroTolerance) {
+            if (fixedCH > MathUtil.zeroTolerance) {
                 cRepeatCount = (height - fixedTB) / fixedCH;
                 cVertCount = 4 + (cRepeatCount | 0);
                 cType = 2;
@@ -11839,7 +11832,7 @@ var TiledType;
         _this = Renderer1.call(this, entity) || this;
         _this._tileMode = SpriteTileMode.Continuous;
         _this._tiledAdaptiveThreshold = 0.5;
-        _this._color = new Color$1(1, 1, 1, 1);
+        _this._color = new Color(1, 1, 1, 1);
         _this._sprite = null;
         _this._automaticWidth = 0;
         _this._automaticHeight = 0;
@@ -12039,7 +12032,7 @@ var TiledType;
             },
             set: function set(value) {
                 if (value !== this._tiledAdaptiveThreshold) {
-                    value = MathUtil$1.clamp(value, 0, 1);
+                    value = MathUtil.clamp(value, 0, 1);
                     this._tiledAdaptiveThreshold = value;
                     if (this.drawMode === SpriteDrawMode.Tiled) {
                         this._dirtyUpdateFlag |= 0x3;
@@ -12491,6 +12484,9 @@ var /**
 __decorate([
     assignmentClone
 ], SpriteMask.prototype, "influenceLayers", void 0);
+__decorate([
+    ignoreClone
+], SpriteMask.prototype, "_verticesData", void 0);
 __decorate([
     ignoreClone
 ], SpriteMask.prototype, "_sprite", void 0);
@@ -12774,8 +12770,8 @@ var /**
                     } else {
                         word += char;
                         wordWidth += charInfo.xAdvance;
-                        wordMaxAscent = lineMaxAscent = Math.max(wordMaxAscent, ascent);
-                        wordMaxDescent = lineMaxDescent = Math.max(wordMaxDescent, descent);
+                        wordMaxAscent = Math.max(wordMaxAscent, ascent);
+                        wordMaxDescent = Math.max(wordMaxDescent, descent);
                     }
                 }
             }
@@ -12896,6 +12892,9 @@ var /**
         var baseline = Math.ceil(context.measureText(TextUtils._measureBaseline).width);
         var height = baseline * TextUtils._heightMultiplier;
         baseline = TextUtils._baselineMultiplier * baseline | 0;
+        var _extendHeight = TextUtils._extendHeight;
+        height += _extendHeight;
+        baseline += _extendHeight * 0.5;
         canvas.width = width;
         canvas.height = height;
         context.font = fontString;
@@ -12930,6 +12929,7 @@ var /**
         }
         if (top !== -1 && bottom !== -1) {
             ascent = baseline - top;
+            // Baseline belong to descent
             descent = bottom - baseline + 1;
             size = ascent + descent;
         }
@@ -13005,6 +13005,10 @@ var /**
         "fangsong"
     ];
 })();
+(function() {
+    // _extendHeight used to extend the height of canvas, because in miniprogram performance is different from h5.
+    /** @internal */ TextUtils._extendHeight = 0;
+})();
 (function() {
     /** These characters are all tall to help calculate the height required for text. */ TextUtils._measureString = "|\xc9q\xc5";
 })();
@@ -13095,7 +13099,8 @@ var /**
     _proto._createFontAtlas = function _createFontAtlas() {
         var _this = this, engine = _this._engine;
         var fontAtlas = new FontAtlas(engine);
-        var texture = new Texture2D(engine, 256, 256);
+        var texture = new Texture2D(engine, 256, 256, TextureFormat.R8G8B8A8, false);
+        texture.filterMode = TextureFilterMode.Bilinear;
         fontAtlas.texture = texture;
         fontAtlas.isGCIgnored = texture.isGCIgnored = true;
         this._fontAtlases.push(fontAtlas);
@@ -13253,7 +13258,7 @@ var /**
         /** @internal */ _this._subFont = null;
         /** @internal */ _this._charRenderDatas = [];
         _this._dirtyFlag = 15;
-        _this._color = new Color$1(1, 1, 1, 1);
+        _this._color = new Color(1, 1, 1, 1);
         _this._text = "";
         _this._width = 0;
         _this._height = 0;
@@ -13333,7 +13338,7 @@ var /**
     /**
    * @internal
    */ _proto._render = function _render(context) {
-        if (this._text === "" || this.enableWrapping && this.width <= 0 || this.overflowMode === OverflowMode.Truncate && this.height <= 0) {
+        if (this._isTextNoVisible()) {
             return;
         }
         if (this._isContainDirtyFlag(0x10)) {
@@ -13425,8 +13430,8 @@ var /**
         }
     };
     _proto._updateLocalData = function _updateLocalData() {
-        var _this = this, color = _this.color, charRenderDatas = _this._charRenderDatas, charFont = _this._subFont;
         var _this__localBounds = this._localBounds, min = _this__localBounds.min, max = _this__localBounds.max;
+        var _this = this, color = _this.color, charRenderDatas = _this._charRenderDatas, charFont = _this._subFont;
         var textMetrics = this.enableWrapping ? TextUtils.measureTextWithWrap(this) : TextUtils.measureTextWithoutWrap(this);
         var height = textMetrics.height, lines = textMetrics.lines, lineWidths = textMetrics.lineWidths, lineHeight = textMetrics.lineHeight, lineMaxSizes = textMetrics.lineMaxSizes;
         var charRenderDataPool = TextRenderer._charRenderDataPool;
@@ -13494,7 +13499,7 @@ var /**
                             var left = startX * pixelsPerUnitReciprocal;
                             var right = (startX + w) * pixelsPerUnitReciprocal;
                             var top = (startY + ascent) * pixelsPerUnitReciprocal;
-                            var bottom = (startY - descent + 1) * pixelsPerUnitReciprocal;
+                            var bottom = (startY - descent) * pixelsPerUnitReciprocal;
                             localPositions.set(left, top, right, bottom);
                             i === firstLine && (maxY = Math.max(maxY, top));
                             minY = Math.min(minY, bottom);
@@ -13535,6 +13540,9 @@ var /**
         Renderer1.prototype._onTransformChanged.call(this, bit);
         this._setDirtyFlagTrue(0x4 | 0x8);
     };
+    _proto._isTextNoVisible = function _isTextNoVisible() {
+        return this._text === "" || this._fontSize === 0 || this.enableWrapping && this.width <= 0 || this.overflowMode === OverflowMode.Truncate && this.height <= 0;
+    };
     _create_class(TextRenderer, [
         {
             key: "color",
@@ -13737,6 +13745,16 @@ var /**
             get: /**
    * The bounding volume of the TextRenderer.
    */ function get() {
+                if (this._isTextNoVisible()) {
+                    if (this._isContainDirtyFlag(0x8)) {
+                        var localBounds = this._localBounds;
+                        localBounds.min.set(0, 0, 0);
+                        localBounds.max.set(0, 0, 0);
+                        this._updateBounds(this._bounds);
+                        this._setDirtyFlagFalse(0x8);
+                    }
+                    return this._bounds;
+                }
                 this._isContainDirtyFlag(0x1) && this._resetSubFont();
                 this._isContainDirtyFlag(0x2) && this._updateLocalData();
                 this._isContainDirtyFlag(0x4) && this._updatePosition();
@@ -14758,6 +14776,7 @@ var TextRenderData = /*#__PURE__*/ function(RenderData1) {
     AssetType[/** Cube Compress Texture. */ "KTXCube"] = "KTXCube";
     AssetType[/** KTX2 Compress Texture */ "KTX2"] = "KTX2";
     AssetType[/** Sprite. */ "Sprite"] = "Sprite";
+    AssetType[/** PrimitiveMesh. */ "PrimitiveMesh"] = "PrimitiveMesh";
     AssetType[/** Sprite Atlas. */ "SpriteAtlas"] = "SpriteAtlas";
     AssetType[/** Ambient light. */ "Env"] = "Environment";
     AssetType[/** Scene. */ "Scene"] = "Scene";
@@ -15143,6 +15162,7 @@ var /** @internal */ PromiseState;
         this./** The number of retries after failing to load assets. */ retryCount = 1;
         this./** Retry delay time after failed to load assets, in milliseconds. */ retryInterval = 0;
         this./** The default timeout period for loading assets, in milliseconds. */ timeout = Infinity;
+        this./** Base url for loading assets. */ baseUrl = null;
         this._loadingPromises = {};
         this._assetPool = Object.create(null);
         this._assetUrlPool = Object.create(null);
@@ -15346,6 +15366,8 @@ var /** @internal */ PromiseState;
         // Check url mapping
         var itemURL = item.url;
         var url = this._virtualPathMap[itemURL] ? this._virtualPathMap[itemURL] : itemURL;
+        // Not absolute and base url is set
+        if (!Utils.isAbsoluteUrl(url) && this.baseUrl) url = Utils.resolveAbsoluteUrl(this.baseUrl, url);
         // Parse url
         var _this__parseURL = this._parseURL(url), assetBaseURL = _this__parseURL.assetBaseURL, queryPath = _this__parseURL.queryPath;
         var paths = queryPath ? this._parseQueryPath(queryPath) : [];
@@ -15725,6 +15747,66 @@ var rePropName = RegExp(// Match anything that isn't a dot or bracket.
             }
         }
     };
+    /**
+   * @internal
+   */ SystemInfo._detectSIMDSupported = function _detectSIMDSupported() {
+        if (this._simdSupported === null) {
+            this._simdSupported = WebAssembly.validate(new Uint8Array([
+                0,
+                97,
+                115,
+                109,
+                1,
+                0,
+                0,
+                0,
+                1,
+                4,
+                1,
+                96,
+                0,
+                0,
+                3,
+                3,
+                2,
+                0,
+                0,
+                5,
+                3,
+                1,
+                0,
+                1,
+                12,
+                1,
+                0,
+                10,
+                22,
+                2,
+                12,
+                0,
+                65,
+                0,
+                65,
+                0,
+                65,
+                0,
+                252,
+                10,
+                0,
+                0,
+                11,
+                7,
+                0,
+                65,
+                0,
+                253,
+                15,
+                26,
+                11
+            ]));
+        }
+        return this._simdSupported;
+    };
     _create_class(SystemInfo, null, [
         {
             key: "devicePixelRatio",
@@ -15743,6 +15825,9 @@ var rePropName = RegExp(// Match anything that isn't a dot or bracket.
 (function() {
     /** The operating system is running on. */ SystemInfo.operatingSystem = "";
 })();
+(function() {
+    /** Whether the system support SIMD. */ SystemInfo._simdSupported = null;
+})();
 SystemInfo._initialize();
 
 /**
@@ -15973,7 +16058,7 @@ SystemInfo._initialize();
  * Keyboard Manager.
  * @internal
  */ var KeyboardManager = /*#__PURE__*/ function() {
-    function KeyboardManager(engine) {
+    function KeyboardManager(engine, target) {
         /** @internal */ this._curHeldDownKeyToIndexMap = [];
         /** @internal */ this._upKeyToFrameCountMap = [];
         /** @internal */ this._downKeyToFrameCountMap = [];
@@ -15981,17 +16066,11 @@ SystemInfo._initialize();
         /** @internal */ this._curFrameDownList = new DisorderedArray();
         /** @internal */ this._curFrameUpList = new DisorderedArray();
         this._nativeEvents = [];
-        this._hadListener = false;
-        // @ts-ignore
-        var htmlCanvas = engine._canvas._webCanvas;
         this._engine = engine;
-        this._htmlCanvas = htmlCanvas;
-        // Need to set tabIndex to make the canvas focus.
-        htmlCanvas.tabIndex = htmlCanvas.tabIndex;
+        this._onBlur = this._onBlur.bind(this);
         this._onKeyEvent = this._onKeyEvent.bind(this);
-        htmlCanvas.addEventListener("keydown", this._onKeyEvent);
-        htmlCanvas.addEventListener("keyup", this._onKeyEvent);
-        this._hadListener = true;
+        this._target = target;
+        this._addEventListener();
     }
     var _proto = KeyboardManager.prototype;
     /**
@@ -16043,35 +16122,8 @@ SystemInfo._initialize();
     };
     /**
    * @internal
-   */ _proto._onFocus = function _onFocus() {
-        if (!this._hadListener) {
-            this._htmlCanvas.addEventListener("keydown", this._onKeyEvent);
-            this._htmlCanvas.addEventListener("keyup", this._onKeyEvent);
-            this._hadListener = true;
-        }
-    };
-    /**
-   * @internal
-   */ _proto._onBlur = function _onBlur() {
-        if (this._hadListener) {
-            this._htmlCanvas.removeEventListener("keydown", this._onKeyEvent);
-            this._htmlCanvas.removeEventListener("keyup", this._onKeyEvent);
-            this._curHeldDownKeyToIndexMap.length = 0;
-            this._curFrameHeldDownList.length = 0;
-            this._curFrameDownList.length = 0;
-            this._curFrameUpList.length = 0;
-            this._nativeEvents.length = 0;
-            this._hadListener = false;
-        }
-    };
-    /**
-   * @internal
    */ _proto._destroy = function _destroy() {
-        if (this._hadListener) {
-            this._htmlCanvas.removeEventListener("keydown", this._onKeyEvent);
-            this._htmlCanvas.removeEventListener("keyup", this._onKeyEvent);
-            this._hadListener = false;
-        }
+        this._removeEventListener();
         this._curHeldDownKeyToIndexMap.length = 0;
         this._curHeldDownKeyToIndexMap = null;
         this._upKeyToFrameCountMap.length = 0;
@@ -16086,12 +16138,30 @@ SystemInfo._initialize();
         this._curFrameDownList = null;
         this._curFrameUpList.length = 0;
         this._curFrameUpList = null;
-        this._htmlCanvas = null;
         this._engine = null;
     };
+    _proto._onBlur = function _onBlur() {
+        this._curHeldDownKeyToIndexMap.length = 0;
+        this._curFrameHeldDownList.length = 0;
+        this._curFrameDownList.length = 0;
+        this._curFrameUpList.length = 0;
+        this._nativeEvents.length = 0;
+    };
     _proto._onKeyEvent = function _onKeyEvent(evt) {
         this._nativeEvents.push(evt);
     };
+    _proto._addEventListener = function _addEventListener() {
+        var _this = this, target = _this._target;
+        target.addEventListener("keydown", this._onKeyEvent);
+        target.addEventListener("keyup", this._onKeyEvent);
+        target.addEventListener("blur", this._onBlur);
+    };
+    _proto._removeEventListener = function _removeEventListener() {
+        var _this = this, target = _this._target;
+        target.removeEventListener("keydown", this._onKeyEvent);
+        target.removeEventListener("keyup", this._onKeyEvent);
+        target.removeEventListener("blur", this._onBlur);
+    };
     return KeyboardManager;
 }();
 
@@ -16533,7 +16603,7 @@ var Collision = function Collision() {
                 return this._fixedTimeStep;
             },
             set: function set(value) {
-                this._fixedTimeStep = Math.max(value, MathUtil$1.zeroTolerance);
+                this._fixedTimeStep = Math.max(value, MathUtil.zeroTolerance);
             }
         }
     ]);
@@ -18055,7 +18125,7 @@ __decorate([
  * Pointer Manager.
  * @internal
  */ var PointerManager = /*#__PURE__*/ function() {
-    function PointerManager(engine) {
+    function PointerManager(engine, target) {
         /** @internal */ this._pointers = [];
         /** @internal */ this._multiPointerEnabled = true;
         /** @internal */ this._buttons = PointerButton.None;
@@ -18064,16 +18134,18 @@ __decorate([
         /** @internal */ this._upList = new DisorderedArray();
         /** @internal */ this._downList = new DisorderedArray();
         this._nativeEvents = [];
-        this._hadListener = false;
-        // @ts-ignore
-        var htmlCanvas = engine._canvas._webCanvas;
+        if (_instanceof(target, Window)) {
+            throw "Do not set window as target because window cannot listen to pointer leave event.";
+        }
         this._engine = engine;
+        this._target = target;
         this._canvas = engine.canvas;
-        this._htmlCanvas = htmlCanvas;
-        this._onPointerEvent = this._onPointerEvent.bind(this);
-        this._onFocus();
+        // @ts-ignore
+        this._htmlCanvas = engine._canvas._webCanvas;
         // If there are no compatibility issues, navigator.maxTouchPoints should be used here
         this._pointerPool = new Array(11);
+        this._onPointerEvent = this._onPointerEvent.bind(this);
+        this._addEventListener();
     }
     var _proto = PointerManager.prototype;
     /**
@@ -18143,7 +18215,8 @@ __decorate([
             var length = events.length;
             if (length > 0) {
                 for(var i1 = 0; i1 < length; i1++){
-                    switch(events[i1].type){
+                    var event = events[i1];
+                    switch(event.type){
                         case "pointerdown":
                             pointer.phase = PointerPhase.Down;
                             pointer._firePointerDown(rayCastEntity);
@@ -18165,66 +18238,14 @@ __decorate([
     };
     /**
    * @internal
-   */ _proto._onFocus = function _onFocus() {
-        if (!this._hadListener) {
-            var _this = this, htmlCanvas = _this._htmlCanvas, onPointerEvent = _this._onPointerEvent;
-            htmlCanvas.addEventListener("pointerdown", onPointerEvent);
-            htmlCanvas.addEventListener("pointerup", onPointerEvent);
-            htmlCanvas.addEventListener("pointerleave", onPointerEvent);
-            htmlCanvas.addEventListener("pointermove", onPointerEvent);
-            htmlCanvas.addEventListener("pointercancel", onPointerEvent);
-            this._hadListener = true;
-        }
-    };
-    /**
-   * @internal
-   */ _proto._onBlur = function _onBlur() {
-        if (this._hadListener) {
-            var _this = this, htmlCanvas = _this._htmlCanvas, onPointerEvent = _this._onPointerEvent;
-            htmlCanvas.removeEventListener("pointerdown", onPointerEvent);
-            htmlCanvas.removeEventListener("pointerup", onPointerEvent);
-            htmlCanvas.removeEventListener("pointerleave", onPointerEvent);
-            htmlCanvas.removeEventListener("pointermove", onPointerEvent);
-            htmlCanvas.removeEventListener("pointercancel", onPointerEvent);
-            this._hadListener = false;
-            this._pointers.length = 0;
-            this._downList.length = 0;
-            this._upList.length = 0;
-        }
-    };
-    /**
-   * @internal
    */ _proto._destroy = function _destroy() {
-        // @ts-ignore
-        if (this._hadListener) {
-            var _this = this, htmlCanvas = _this._htmlCanvas, onPointerEvent = _this._onPointerEvent;
-            htmlCanvas.removeEventListener("pointerdown", onPointerEvent);
-            htmlCanvas.removeEventListener("pointerup", onPointerEvent);
-            htmlCanvas.removeEventListener("pointerleave", onPointerEvent);
-            htmlCanvas.removeEventListener("pointermove", onPointerEvent);
-            htmlCanvas.removeEventListener("pointercancel", onPointerEvent);
-            this._hadListener = false;
-        }
+        this._removeEventListener();
         this._pointerPool.length = 0;
-        this._pointerPool = null;
-        this._pointers.length = 0;
-        this._pointers = null;
-        this._downList.length = 0;
-        this._downList = null;
-        this._upList.length = 0;
-        this._upList = null;
         this._nativeEvents.length = 0;
-        this._nativeEvents = null;
-        this._upMap.length = 0;
-        this._upMap = null;
         this._downMap.length = 0;
-        this._downMap = null;
-        this._htmlCanvas = null;
-        this._canvas = null;
-        this._engine = null;
+        this._upMap.length = 0;
     };
     _proto._onPointerEvent = function _onPointerEvent(evt) {
-        evt.type === "pointerdown" && this._htmlCanvas.focus();
         this._nativeEvents.push(evt);
     };
     _proto._getPointerByID = function _getPointerByID(pointerId) {
@@ -18307,6 +18328,26 @@ __decorate([
         }
         return null;
     };
+    _proto._addEventListener = function _addEventListener() {
+        var _this = this, target = _this._target, onPointerEvent = _this._onPointerEvent;
+        target.addEventListener("pointerdown", onPointerEvent);
+        target.addEventListener("pointerup", onPointerEvent);
+        target.addEventListener("pointerleave", onPointerEvent);
+        target.addEventListener("pointermove", onPointerEvent);
+        target.addEventListener("pointercancel", onPointerEvent);
+    };
+    _proto._removeEventListener = function _removeEventListener() {
+        var _this = this, target = _this._target, onPointerEvent = _this._onPointerEvent;
+        target.removeEventListener("pointerdown", onPointerEvent);
+        target.removeEventListener("pointerup", onPointerEvent);
+        target.removeEventListener("pointerleave", onPointerEvent);
+        target.removeEventListener("pointermove", onPointerEvent);
+        target.removeEventListener("pointercancel", onPointerEvent);
+        this._nativeEvents.length = 0;
+        this._pointers.length = 0;
+        this._downList.length = 0;
+        this._upList.length = 0;
+    };
     return PointerManager;
 }();
 (function() {
@@ -18323,15 +18364,12 @@ __decorate([
  * Wheel Manager.
  * @internal
  */ var WheelManager = /*#__PURE__*/ function() {
-    function WheelManager(engine) {
+    function WheelManager(engine, target) {
         /** @internal */ this._delta = new Vector3();
         this._nativeEvents = [];
-        // @ts-ignore
-        var htmlCanvas = engine._canvas._webCanvas;
         this._onWheelEvent = this._onWheelEvent.bind(this);
-        htmlCanvas.addEventListener("wheel", this._onWheelEvent);
-        this._canvas = htmlCanvas;
-        this._hadListener = true;
+        this._target = target;
+        this._addEventListener();
     }
     var _proto = WheelManager.prototype;
     /**
@@ -18352,35 +18390,24 @@ __decorate([
     };
     /**
    * @internal
-   */ _proto._onFocus = function _onFocus() {
-        if (!this._hadListener) {
-            this._canvas.addEventListener("wheel", this._onWheelEvent);
-            this._hadListener = true;
-        }
+   */ _proto._addEventListener = function _addEventListener() {
+        this._target.addEventListener("wheel", this._onWheelEvent);
     };
     /**
    * @internal
-   */ _proto._onBlur = function _onBlur() {
-        if (this._hadListener) {
-            this._canvas.removeEventListener("wheel", this._onWheelEvent);
-            this._nativeEvents.length = 0;
-            this._delta.set(0, 0, 0);
-            this._hadListener = false;
-        }
+   */ _proto._removeEventListener = function _removeEventListener() {
+        this._target.removeEventListener("wheel", this._onWheelEvent);
+        this._nativeEvents.length = 0;
+        this._delta.set(0, 0, 0);
     };
     /**
    * @internal
    */ _proto._destroy = function _destroy() {
-        if (this._hadListener) {
-            this._canvas.removeEventListener("wheel", this._onWheelEvent);
-            this._hadListener = false;
-        }
+        this._removeEventListener();
         this._nativeEvents = null;
-        this._canvas = null;
         this._delta = null;
     };
     _proto._onWheelEvent = function _onWheelEvent(evt) {
-        evt.cancelable && evt.preventDefault();
         this._nativeEvents.push(evt);
     };
     return WheelManager;
@@ -18389,19 +18416,19 @@ __decorate([
 /**
  * InputManager manages device input such as mouse, touch, keyboard, etc.
  */ var InputManager = /*#__PURE__*/ function() {
-    function InputManager(engine) {
+    function InputManager(engine, inputOptions) {
         /** Sometimes the input module will not be initialized, such as off-screen rendering. */ this._initialized = false;
         this._engine = engine;
         // @ts-ignore
         var canvas = engine._canvas._webCanvas;
         if (typeof OffscreenCanvas === "undefined" || !_instanceof(canvas, OffscreenCanvas)) {
-            this._wheelManager = new WheelManager(engine);
-            this._pointerManager = new PointerManager(engine);
-            this._keyboardManager = new KeyboardManager(engine);
-            this._onBlur = this._onBlur.bind(this);
-            window.addEventListener("blur", this._onBlur);
-            this._onFocus = this._onFocus.bind(this);
-            window.addEventListener("focus", this._onFocus);
+            var _inputOptions, _inputOptions1, _inputOptions2;
+            var _inputOptions_wheelTarget;
+            this._wheelManager = new WheelManager(engine, (_inputOptions_wheelTarget = (_inputOptions = inputOptions) == null ? void 0 : _inputOptions.wheelTarget) != null ? _inputOptions_wheelTarget : canvas);
+            var _inputOptions_pointerTarget;
+            this._pointerManager = new PointerManager(engine, (_inputOptions_pointerTarget = (_inputOptions1 = inputOptions) == null ? void 0 : _inputOptions1.pointerTarget) != null ? _inputOptions_pointerTarget : canvas);
+            var _inputOptions_keyboardTarget;
+            this._keyboardManager = new KeyboardManager(engine, (_inputOptions_keyboardTarget = (_inputOptions2 = inputOptions) == null ? void 0 : _inputOptions2.keyboardTarget) != null ? _inputOptions_keyboardTarget : window);
             this._initialized = true;
         }
     }
@@ -18514,8 +18541,6 @@ __decorate([
    * @internal
    */ _proto._destroy = function _destroy() {
         if (this._initialized) {
-            window.removeEventListener("blur", this._onBlur);
-            window.removeEventListener("focus", this._onFocus);
             this._wheelManager._destroy();
             this._wheelManager = null;
             this._pointerManager._destroy();
@@ -18524,16 +18549,6 @@ __decorate([
             this._keyboardManager = null;
         }
     };
-    _proto._onBlur = function _onBlur() {
-        this._wheelManager._onBlur();
-        this._pointerManager._onBlur();
-        this._keyboardManager._onBlur();
-    };
-    _proto._onFocus = function _onFocus() {
-        this._wheelManager._onFocus();
-        this._pointerManager._onFocus();
-        this._keyboardManager._onFocus();
-    };
     _create_class(InputManager, [
         {
             key: "pointers",
@@ -18576,6 +18591,8 @@ __decorate([
         _this = ReferResource1.call(this, engine) || this;
         /** @internal */ _this._renderStates = [] // todo: later will as a part of shaderData when shader effect frame is OK, that is more powerful and flexible.
         ;
+        /** @internal */ _this._priority = 0 // todo: temporary resolution of submesh rendering order issue.
+        ;
         _this._shaderData = new ShaderData(ShaderDataGroup.Material);
         _this.shader = shader;
         return _this;
@@ -19029,7 +19046,7 @@ ShaderPool.init();
         _this._spriteMaskDefaultMaterial = _this._createSpriteMaskMaterial();
         _this._textDefaultFont = Font.createFromOS(_assert_this_initialized(_this), "Arial");
         _this._textDefaultFont.isGCIgnored = true;
-        _this.inputManager = new InputManager(_assert_this_initialized(_this));
+        _this.inputManager = new InputManager(_assert_this_initialized(_this), configuration.input);
         var xrDevice = configuration.xrDevice;
         if (xrDevice) {
             _this.xrManager = new XRManager();
@@ -19652,7 +19669,7 @@ ShaderPool.init();
         var e = viewProjMatrix.elements;
         e[12] = e[13] = e[14] = 0;
         // epsilon-infinity projection matrix http://terathon.com/gdc07_lengyel.pdf
-        var f = 1.0 / Math.tan(MathUtil$1.degreeToRadian(fieldOfView) / 2);
+        var f = 1.0 / Math.tan(MathUtil.degreeToRadian(fieldOfView) / 2);
         projectionMatrix.elements[0] = f / aspectRatio;
         projectionMatrix.elements[5] = f;
         // view-proj matrix
@@ -19733,7 +19750,7 @@ ShaderPool.init();
    * Background solid color.
    * @defaultValue `new Color(0.25, 0.25, 0.25, 1.0)`
    * @remarks When `mode` is `BackgroundMode.SolidColor`, the property will take effects.
-   */ solidColor = new Color$1(0.25, 0.25, 0.25, 1.0);
+   */ solidColor = new Color(0.25, 0.25, 0.25, 1.0);
         this.sky = new Sky();
         this./** @internal */ _textureFillMode = BackgroundTextureFillMode.AspectFitHeight;
         this._texture = null;
@@ -20094,7 +20111,7 @@ ShaderPool.init();
     function AmbientLight(engine) {
         var _this;
         _this = ReferResource1.call(this, engine) || this;
-        _this._diffuseSolidColor = new Color$1(0.212, 0.227, 0.259);
+        _this._diffuseSolidColor = new Color(0.212, 0.227, 0.259);
         _this._diffuseIntensity = 1.0;
         _this._specularIntensity = 1.0;
         _this._diffuseMode = DiffuseMode.SolidColor;
@@ -20391,8 +20408,8 @@ ShaderPool.init();
         /** Near plane value to use for shadow frustums. */ _this.shadowNearPlane = 0.1;
         /** Shadow intensity, the larger the value, the clearer and darker the shadow. */ _this.shadowStrength = 1.0;
         /** @internal */ _this._lightIndex = -1;
-        /** @internal */ _this._lightColor = new Color$1();
-        _this._color = new Color$1(1, 1, 1, 1);
+        /** @internal */ _this._lightColor = new Color();
+        _this._color = new Color(1, 1, 1, 1);
         return _this;
     }
     var _proto = Light.prototype;
@@ -20470,9 +20487,9 @@ __decorate([
         data.cullingMask[cullingMaskStart] = cullingMask & 65535;
         data.cullingMask[cullingMaskStart + 1] = cullingMask >>> 16 & 65535;
         if (this.engine.settings.colorSpace === ColorSpace.Linear) {
-            data.color[colorStart] = Color$1.gammaToLinearSpace(lightColor.r);
-            data.color[colorStart + 1] = Color$1.gammaToLinearSpace(lightColor.g);
-            data.color[colorStart + 2] = Color$1.gammaToLinearSpace(lightColor.b);
+            data.color[colorStart] = Color.gammaToLinearSpace(lightColor.r);
+            data.color[colorStart + 1] = Color.gammaToLinearSpace(lightColor.g);
+            data.color[colorStart + 2] = Color.gammaToLinearSpace(lightColor.b);
         } else {
             data.color[colorStart] = lightColor.r;
             data.color[colorStart + 1] = lightColor.g;
@@ -20562,9 +20579,9 @@ __decorate([
         data.cullingMask[cullingMaskStart] = cullingMask & 65535;
         data.cullingMask[cullingMaskStart + 1] = cullingMask >>> 16 & 65535;
         if (this.engine.settings.colorSpace === ColorSpace.Linear) {
-            data.color[colorStart] = Color$1.gammaToLinearSpace(lightColor.r);
-            data.color[colorStart + 1] = Color$1.gammaToLinearSpace(lightColor.g);
-            data.color[colorStart + 2] = Color$1.gammaToLinearSpace(lightColor.b);
+            data.color[colorStart] = Color.gammaToLinearSpace(lightColor.r);
+            data.color[colorStart + 1] = Color.gammaToLinearSpace(lightColor.g);
+            data.color[colorStart + 2] = Color.gammaToLinearSpace(lightColor.b);
         } else {
             data.color[colorStart] = lightColor.r;
             data.color[colorStart + 1] = lightColor.g;
@@ -20658,9 +20675,9 @@ __decorate([
         data.cullingMask[cullingMaskStart] = cullingMask & 65535;
         data.cullingMask[cullingMaskStart + 1] = cullingMask >>> 16 & 65535;
         if (this.engine.settings.colorSpace === ColorSpace.Linear) {
-            data.color[colorStart] = Color$1.gammaToLinearSpace(lightColor.r);
-            data.color[colorStart + 1] = Color$1.gammaToLinearSpace(lightColor.g);
-            data.color[colorStart + 2] = Color$1.gammaToLinearSpace(lightColor.b);
+            data.color[colorStart] = Color.gammaToLinearSpace(lightColor.r);
+            data.color[colorStart + 1] = Color.gammaToLinearSpace(lightColor.g);
+            data.color[colorStart + 2] = Color.gammaToLinearSpace(lightColor.b);
         } else {
             data.color[colorStart] = lightColor.r;
             data.color[colorStart + 1] = lightColor.g;
@@ -20949,7 +20966,7 @@ __decorate([
         _this._shaderData = new ShaderData(ShaderDataGroup.Scene);
         _this._shadowCascades = ShadowCascadesMode.NoCascades;
         _this._fogMode = FogMode.None;
-        _this._fogColor = new Color$1(0.5, 0.5, 0.5, 1.0);
+        _this._fogColor = new Color(0.5, 0.5, 0.5, 1.0);
         _this._fogStart = 0;
         _this._fogEnd = 300;
         _this._fogDensity = 0.01;
@@ -21865,12 +21882,48 @@ var passNum = 0;
     /**
    * @internal
    */ RenderQueue._compareFromNearToFar = function _compareFromNearToFar(a, b) {
-        return a.data.component.priority - b.data.component.priority || a.data.component._distanceForSort - b.data.component._distanceForSort;
+        var dataA = a.data;
+        var dataB = b.data;
+        var componentA = dataA.component;
+        var componentB = dataB.component;
+        var priorityOrder = componentA.priority - componentB.priority;
+        if (priorityOrder !== 0) {
+            return priorityOrder;
+        }
+        // make suer from the same renderer.
+        if (componentA.instanceId === componentB.instanceId) {
+            return dataA.material._priority - dataB.material._priority || componentA._distanceForSort - componentB._distanceForSort;
+        } else {
+            var distanceDiff = componentA._distanceForSort - componentB._distanceForSort;
+            if (distanceDiff === 0) {
+                return componentA.instanceId - componentB.instanceId;
+            } else {
+                return distanceDiff;
+            }
+        }
     };
     /**
    * @internal
    */ RenderQueue._compareFromFarToNear = function _compareFromFarToNear(a, b) {
-        return a.data.component.priority - b.data.component.priority || b.data.component._distanceForSort - a.data.component._distanceForSort;
+        var dataA = a.data;
+        var dataB = b.data;
+        var componentA = dataA.component;
+        var componentB = dataB.component;
+        var priorityOrder = componentA.priority - componentB.priority;
+        if (priorityOrder !== 0) {
+            return priorityOrder;
+        }
+        // make suer from the same renderer.
+        if (componentA.instanceId === componentB.instanceId) {
+            return dataA.material._priority - dataB.material._priority || componentB._distanceForSort - componentA._distanceForSort;
+        } else {
+            var distanceDiff = componentB._distanceForSort - componentA._distanceForSort;
+            if (distanceDiff === 0) {
+                return componentA.instanceId - componentB.instanceId;
+            } else {
+                return distanceDiff;
+            }
+        }
     };
     return RenderQueue;
 }();
@@ -22025,7 +22078,7 @@ var /**
         // https://lxjk.github.io/2017/04/15/Calculate-Minimal-Bounding-Sphere-of-Frustum.html
         var centerZ;
         var radius;
-        var k = Math.sqrt(1.0 + aspectRatio * aspectRatio) * Math.tan(MathUtil$1.degreeToRadian(fieldOfView) / 2.0);
+        var k = Math.sqrt(1.0 + aspectRatio * aspectRatio) * Math.tan(MathUtil.degreeToRadian(fieldOfView) / 2.0);
         var k2 = k * k;
         var farSNear = far - near;
         var farANear = far + near;
@@ -22607,7 +22660,7 @@ var /**
         var _this__camera = this._camera, nearClipPlane = _this__camera.nearClipPlane, aspectRatio = _this__camera.aspectRatio, fieldOfView = _this__camera.fieldOfView;
         cascadesSplitDistance[0] = nearClipPlane;
         var range = shadowFar - nearClipPlane;
-        var tFov = Math.tan(MathUtil$1.degreeToRadian(fieldOfView) * 0.5);
+        var tFov = Math.tan(MathUtil.degreeToRadian(fieldOfView) * 0.5);
         var denominator = 1.0 + tFov * tFov * (aspectRatio * aspectRatio + 1.0);
         switch(shadowCascades){
             case ShadowCascadesMode.NoCascades:
@@ -22710,7 +22763,7 @@ var /**
     CascadedShadowCasterPass._viewport = new Vector4(0, 0, 1, 1);
 })();
 (function() {
-    CascadedShadowCasterPass._clearColor = new Color$1(1, 1, 1, 1);
+    CascadedShadowCasterPass._clearColor = new Color(1, 1, 1, 1);
 })();
 (function() {
     CascadedShadowCasterPass._tempVector = new Vector3();
@@ -23083,14 +23136,14 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
         /** @internal */ _this._cameraIndex = -1;
         _this._priority = 0;
         _this._shaderData = new ShaderData(ShaderDataGroup.Camera);
-        _this._isProjMatSetting = false;
+        _this._isCustomViewMatrix = false;
+        _this._isCustomProjectionMatrix = false;
         _this._nearClipPlane = 0.1;
         _this._farClipPlane = 100;
         _this._fieldOfView = 45;
         _this._orthographicSize = 10;
         _this._isProjectionDirty = true;
         _this._isInvProjMatDirty = true;
-        _this._isFrustumProjectDirty = true;
         _this._customAspectRatio = undefined;
         _this._renderTarget = null;
         _this._depthBufferParams = new Vector4();
@@ -23102,7 +23155,7 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
         _this._transform = transform;
         _this._isViewMatrixDirty = transform.registerWorldChangeFlag();
         _this._isInvViewProjDirty = transform.registerWorldChangeFlag();
-        _this._frustumViewChangeFlag = transform.registerWorldChangeFlag();
+        _this._frustumChangeFlag = transform.registerWorldChangeFlag();
         _this._renderPipeline = new BasicRenderPipeline(_assert_this_initialized(_this));
         _this._addResourceReferCount(_this.shaderData, 1);
         _this._updatePixelViewport();
@@ -23114,16 +23167,22 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
     }
     var _proto = Camera1.prototype;
     /**
+   * Restore the view matrix to the world matrix of the entity.
+   */ _proto.resetViewMatrix = function resetViewMatrix() {
+        this._isCustomViewMatrix = false;
+        this._viewMatrixChange();
+    };
+    /**
    * Restore the automatic calculation of projection matrix through fieldOfView, nearClipPlane and farClipPlane.
    */ _proto.resetProjectionMatrix = function resetProjectionMatrix() {
-        this._isProjMatSetting = false;
-        this._projMatChange();
+        this._isCustomProjectionMatrix = false;
+        this._projectionMatrixChange();
     };
     /**
    * Restore the automatic calculation of the aspect ratio through the viewport aspect ratio.
    */ _proto.resetAspectRatio = function resetAspectRatio() {
         this._customAspectRatio = undefined;
-        this._projMatChange();
+        this._projectionMatrixChange();
     };
     /**
    * Transform a point from world space to viewport space.
@@ -23170,7 +23229,7 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
         // Use the intersection of the near clipping plane as the origin point.
         var origin = this._innerViewportToWorldPoint(point.x, point.y, 0.0, invViewProjMat, out.origin);
         // Use the intersection of the far clipping plane as the origin point.
-        var direction = this._innerViewportToWorldPoint(point.x, point.y, 1 - MathUtil$1.zeroTolerance, invViewProjMat, out.direction);
+        var direction = this._innerViewportToWorldPoint(point.x, point.y, 1 - MathUtil.zeroTolerance, invViewProjMat, out.direction);
         Vector3.subtract(direction, origin, direction);
         direction.normalize();
         return out;
@@ -23253,10 +23312,9 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
         context.replacementShader = this._replacementShader;
         context.replacementTag = this._replacementSubShaderTag;
         // compute cull frustum.
-        if (this.enableFrustumCulling && (this._frustumViewChangeFlag.flag || this._isFrustumProjectDirty)) {
+        if (this.enableFrustumCulling && this._frustumChangeFlag.flag) {
             this._frustum.calculateFromMatrix(virtualCamera.viewProjectionMatrix);
-            this._frustumViewChangeFlag.flag = false;
-            this._isFrustumProjectDirty = false;
+            this._frustumChangeFlag.flag = false;
         }
         this._updateShaderData();
         // union scene and camera macro.
@@ -23311,7 +23369,7 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
         this._renderPipeline = null;
         this._virtualCamera = null;
         this._shaderData = null;
-        this._frustumViewChangeFlag = null;
+        this._frustumChangeFlag = null;
         this._transform = null;
         this._isViewMatrixDirty = null;
         this._isInvViewProjDirty = null;
@@ -23333,11 +23391,16 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
         var viewport = this._viewport;
         this._pixelViewport.set(viewport.x * width, viewport.y * height, viewport.z * width, viewport.w * height);
     };
-    _proto._projMatChange = function _projMatChange() {
-        this._isFrustumProjectDirty = true;
+    _proto._viewMatrixChange = function _viewMatrixChange() {
+        this._isViewMatrixDirty.flag = true;
+        this._isInvViewProjDirty.flag = true;
+        this._frustumChangeFlag.flag = true;
+    };
+    _proto._projectionMatrixChange = function _projectionMatrixChange() {
         this._isProjectionDirty = true;
         this._isInvProjMatDirty = true;
         this._isInvViewProjDirty.flag = true;
+        this._frustumChangeFlag.flag = true;
     };
     _proto._innerViewportToWorldPoint = function _innerViewportToWorldPoint(x, y, z, invViewProjMat, out) {
         // Depth is a normalized value, 0 is nearPlane, 1 is farClipPlane.
@@ -23380,7 +23443,7 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
     _proto._onPixelViewportChanged = function _onPixelViewportChanged() {
         this._updatePixelViewport();
         var _this__customAspectRatio;
-        (_this__customAspectRatio = this._customAspectRatio) != null ? _this__customAspectRatio : this._projMatChange();
+        (_this__customAspectRatio = this._customAspectRatio) != null ? _this__customAspectRatio : this._projectionMatrixChange();
     };
     _create_class(Camera1, [
         {
@@ -23400,7 +23463,7 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
             },
             set: function set(value) {
                 this._nearClipPlane = value;
-                this._projMatChange();
+                this._projectionMatrixChange();
             }
         },
         {
@@ -23412,7 +23475,7 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
             },
             set: function set(value) {
                 this._farClipPlane = value;
-                this._projMatChange();
+                this._projectionMatrixChange();
             }
         },
         {
@@ -23424,7 +23487,7 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
             },
             set: function set(value) {
                 this._fieldOfView = value;
-                this._projMatChange();
+                this._projectionMatrixChange();
             }
         },
         {
@@ -23439,7 +23502,7 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
             },
             set: function set(value) {
                 this._customAspectRatio = value;
-                this._projMatChange();
+                this._projectionMatrixChange();
             }
         },
         {
@@ -23491,7 +23554,12 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
             },
             set: function set(value) {
                 this._virtualCamera.isOrthographic = value;
-                this._projMatChange();
+                this._projectionMatrixChange();
+                if (value) {
+                    this.shaderData.enableMacro("CAMERA_ORTHOGRAPHIC");
+                } else {
+                    this.shaderData.disableMacro("CAMERA_ORTHOGRAPHIC");
+                }
             }
         },
         {
@@ -23503,7 +23571,7 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
             },
             set: function set(value) {
                 this._orthographicSize = value;
-                this._projMatChange();
+                this._projectionMatrixChange();
             }
         },
         {
@@ -23512,28 +23580,37 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
    * View matrix.
    */ function get() {
                 var viewMatrix = this._virtualCamera.viewMatrix;
-                if (this._isViewMatrixDirty.flag) {
-                    this._isViewMatrixDirty.flag = false;
-                    // Ignore scale.
-                    var transform = this._transform;
-                    Matrix.rotationTranslation(transform.worldRotationQuaternion, transform.worldPosition, viewMatrix);
-                    viewMatrix.invert();
-                }
+                if (!this._isViewMatrixDirty.flag || this._isCustomViewMatrix) {
+                    return viewMatrix;
+                }
+                this._isViewMatrixDirty.flag = false;
+                // Ignore scale
+                var transform = this._transform;
+                Matrix.rotationTranslation(transform.worldRotationQuaternion, transform.worldPosition, viewMatrix);
+                viewMatrix.invert();
                 return viewMatrix;
+            },
+            set: function set(value) {
+                this._virtualCamera.viewMatrix.copyFrom(value);
+                this._isCustomViewMatrix = true;
+                this._viewMatrixChange();
             }
         },
         {
             key: "projectionMatrix",
-            get: function get() {
+            get: /**
+   * The projection matrix is ​​calculated by the relevant parameters of the camera by default.
+   * If it is manually set, the manual value will be maintained. Call resetProjectionMatrix() to restore it.
+   */ function get() {
                 var virtualCamera = this._virtualCamera;
                 var projectionMatrix = virtualCamera.projectionMatrix;
-                if (!this._isProjectionDirty || this._isProjMatSetting) {
+                if (!this._isProjectionDirty || this._isCustomProjectionMatrix) {
                     return projectionMatrix;
                 }
                 this._isProjectionDirty = false;
                 var aspectRatio = this.aspectRatio;
                 if (!virtualCamera.isOrthographic) {
-                    Matrix.perspective(MathUtil$1.degreeToRadian(this._fieldOfView), aspectRatio, this._nearClipPlane, this._farClipPlane, projectionMatrix);
+                    Matrix.perspective(MathUtil.degreeToRadian(this._fieldOfView), aspectRatio, this._nearClipPlane, this._farClipPlane, projectionMatrix);
                 } else {
                     var width = this._orthographicSize * aspectRatio;
                     var height = this._orthographicSize;
@@ -23541,13 +23618,10 @@ var Camera = (_Camera = /*#__PURE__*/ function(Component1) {
                 }
                 return projectionMatrix;
             },
-            set: /**
-   * The projection matrix is ​​calculated by the relevant parameters of the camera by default.
-   * If it is manually set, the manual value will be maintained. Call resetProjectionMatrix() to restore it.
-   */ function set(value) {
+            set: function set(value) {
                 this._virtualCamera.projectionMatrix.copyFrom(value);
-                this._isProjMatSetting = true;
-                this._projMatChange();
+                this._isCustomProjectionMatrix = true;
+                this._projectionMatrixChange();
             }
         },
         {
@@ -23608,7 +23682,7 @@ __decorate([
 ], Camera.prototype, "_cameraIndex", void 0);
 __decorate([
     ignoreClone
-], Camera.prototype, "_frustumViewChangeFlag", void 0);
+], Camera.prototype, "_frustumChangeFlag", void 0);
 __decorate([
     ignoreClone
 ], Camera.prototype, "_transform", void 0);
@@ -24084,9 +24158,9 @@ var BaseMaterial = /*#__PURE__*/ function(Material1) {
         var shaderData = _this.shaderData;
         shaderData.enableMacro("MATERIAL_NEED_WORLD_POS");
         shaderData.enableMacro("MATERIAL_NEED_TILING_OFFSET");
-        shaderData.setColor(BlinnPhongMaterial._baseColorProp, new Color$1(1, 1, 1, 1));
-        shaderData.setColor(BlinnPhongMaterial._specularColorProp, new Color$1(1, 1, 1, 1));
-        shaderData.setColor(BlinnPhongMaterial._emissiveColorProp, new Color$1(0, 0, 0, 1));
+        shaderData.setColor(BlinnPhongMaterial._baseColorProp, new Color(1, 1, 1, 1));
+        shaderData.setColor(BlinnPhongMaterial._specularColorProp, new Color(1, 1, 1, 1));
+        shaderData.setColor(BlinnPhongMaterial._emissiveColorProp, new Color(0, 0, 0, 1));
         shaderData.setVector4(BlinnPhongMaterial._tilingOffsetProp, new Vector4(1, 1, 0, 0));
         shaderData.setFloat(BlinnPhongMaterial._shininessProp, 16);
         shaderData.setFloat(BlinnPhongMaterial._normalIntensityProp, 1);
@@ -24278,8 +24352,8 @@ var BaseMaterial = /*#__PURE__*/ function(Material1) {
         var shaderData = _this.shaderData;
         shaderData.enableMacro("MATERIAL_NEED_WORLD_POS");
         shaderData.enableMacro("MATERIAL_NEED_TILING_OFFSET");
-        shaderData.setColor(PBRBaseMaterial._baseColorProp, new Color$1(1, 1, 1, 1));
-        shaderData.setColor(PBRBaseMaterial._emissiveColorProp, new Color$1(0, 0, 0, 1));
+        shaderData.setColor(PBRBaseMaterial._baseColorProp, new Color(1, 1, 1, 1));
+        shaderData.setColor(PBRBaseMaterial._emissiveColorProp, new Color(0, 0, 0, 1));
         shaderData.setVector4(PBRBaseMaterial._tilingOffsetProp, new Vector4(1, 1, 0, 0));
         shaderData.setFloat(PBRBaseMaterial._normalIntensityProp, 1);
         shaderData.setFloat(PBRBaseMaterial._occlusionTextureIntensityProp, 1);
@@ -24646,7 +24720,7 @@ var BaseMaterial = /*#__PURE__*/ function(Material1) {
                 if (this._anisotropyRotation !== value) {
                     this._anisotropyRotation = value;
                     var anisotropyInfo = this.shaderData.getVector3(PBRMaterial._anisotropyInfoProp);
-                    var rad = MathUtil$1.degreeToRadFactor * value;
+                    var rad = MathUtil.degreeToRadFactor * value;
                     anisotropyInfo.x = Math.cos(rad);
                     anisotropyInfo.y = Math.sin(rad);
                 }
@@ -24700,7 +24774,7 @@ var BaseMaterial = /*#__PURE__*/ function(Material1) {
     function PBRSpecularMaterial(engine) {
         var _this;
         _this = PBRBaseMaterial1.call(this, engine, Shader.find("pbr-specular")) || this;
-        _this.shaderData.setColor(PBRSpecularMaterial._specularColorProp, new Color$1(1, 1, 1, 1));
+        _this.shaderData.setColor(PBRSpecularMaterial._specularColorProp, new Color(1, 1, 1, 1));
         _this.shaderData.setFloat(PBRSpecularMaterial._glossinessProp, 1.0);
         return _this;
     }
@@ -24781,7 +24855,7 @@ var BaseMaterial = /*#__PURE__*/ function(Material1) {
         var shaderData = _this.shaderData;
         shaderData.enableMacro("MATERIAL_OMIT_NORMAL");
         shaderData.enableMacro("MATERIAL_NEED_TILING_OFFSET");
-        shaderData.setColor(UnlitMaterial._baseColorProp, new Color$1(1, 1, 1, 1));
+        shaderData.setColor(UnlitMaterial._baseColorProp, new Color(1, 1, 1, 1));
         shaderData.setVector4(UnlitMaterial._tilingOffsetProp, new Vector4(1, 1, 0, 0));
         return _this;
     }
@@ -25241,6 +25315,7 @@ AnimationCurveOwner.registerAssembler(SkinnedMeshRenderer, "blendShapeWeights",
         _this = EngineObject1.call(this, null) || this;
         _this.name = name;
         _this./** @internal */ _curveBindings = [];
+        _this./** @internal */ _updateFlagManager = new UpdateFlagManager();
         _this._length = 0;
         _this._events = [];
         return _this;
@@ -25268,11 +25343,13 @@ AnimationCurveOwner.registerAssembler(SkinnedMeshRenderer, "blendShapeWeights",
             while(--index >= 0 && eventTime < events[index].time);
             events.splice(index + 1, 0, newEvent);
         }
+        this._updateFlagManager.dispatch();
     };
     /**
    * Clears all events from the clip.
    */ _proto.clearEvents = function clearEvents() {
         this._events.length = 0;
+        this._updateFlagManager.dispatch();
     };
     _proto.addCurveBinding = function addCurveBinding(entityPath, componentType, propertyOrSetPropertyPathOrComponentIndex, curveOrSetPropertyPathOrGetPropertyPath, curveOrGetPropertyPath, curve) {
         var curveBinding = new AnimationClipCurveBinding();
@@ -25669,32 +25746,32 @@ var AnimationColorCurve = (_AnimationColorCurve = /*#__PURE__*/ function(Animati
     function AnimationColorCurve() {
         var _this;
         _this = AnimationCurve1.call(this) || this;
-        _this._evaluateData.value = new Color$1();
+        _this._evaluateData.value = new Color();
         return _this;
     }
     /**
    * @internal
    */ AnimationColorCurve._initializeOwner = function _initializeOwner(owner) {
-        owner.defaultValue = new Color$1();
-        owner.fixedPoseValue = new Color$1();
-        owner.baseEvaluateData.value = new Color$1();
-        owner.crossEvaluateData.value = new Color$1();
+        owner.defaultValue = new Color();
+        owner.fixedPoseValue = new Color();
+        owner.baseEvaluateData.value = new Color();
+        owner.crossEvaluateData.value = new Color();
     };
     /**
    * @internal
    */ AnimationColorCurve._initializeLayerOwner = function _initializeLayerOwner(owner) {
-        owner.finalValue = new Color$1();
+        owner.finalValue = new Color();
     };
     /**
    * @internal
    */ AnimationColorCurve._lerpValue = function _lerpValue(srcValue, destValue, weight, out) {
-        Color$1.lerp(srcValue, destValue, weight, out);
+        Color.lerp(srcValue, destValue, weight, out);
         return out;
     };
     /**
    * @internal
    */ AnimationColorCurve._subtractValue = function _subtractValue(src, base, out) {
-        Color$1.subtract(src, base, out);
+        Color.subtract(src, base, out);
         return out;
     };
     /**
@@ -25706,8 +25783,8 @@ var AnimationColorCurve = (_AnimationColorCurve = /*#__PURE__*/ function(Animati
     /**
    * @internal
    */ AnimationColorCurve._additiveValue = function _additiveValue(value, weight, out) {
-        Color$1.scale(value, weight, value);
-        Color$1.add(out, value, out);
+        Color.scale(value, weight, value);
+        Color.add(out, value, out);
         return out;
     };
     /**
@@ -26829,26 +26906,31 @@ var AnimatorLayerBlendingMode;
         }
     };
     _proto._saveAnimatorEventHandlers = function _saveAnimatorEventHandlers(state, animatorStateData) {
+        var _this = this;
         var eventHandlerPool = this._animationEventHandlerPool;
         var scripts = [];
-        this._entity.getComponents(Script, scripts);
-        var scriptCount = scripts.length;
         var eventHandlers = animatorStateData.eventHandlers;
-        var events = state.clip.events;
-        eventHandlers.length = 0;
-        for(var i = 0, n = events.length; i < n; i++){
-            var event = events[i];
-            var eventHandler = eventHandlerPool.getFromPool();
-            var funcName = event.functionName;
-            var handlers = eventHandler.handlers;
-            eventHandler.event = event;
-            handlers.length = 0;
-            for(var j = scriptCount - 1; j >= 0; j--){
-                var handler = scripts[j][funcName];
-                handler && handlers.push(handler);
+        var clipChangedListener = function() {
+            _this._entity.getComponents(Script, scripts);
+            var scriptCount = scripts.length;
+            var events = state.clip.events;
+            eventHandlers.length = 0;
+            for(var i = 0, n = events.length; i < n; i++){
+                var event = events[i];
+                var eventHandler = eventHandlerPool.getFromPool();
+                var funcName = event.functionName;
+                var handlers = eventHandler.handlers;
+                eventHandler.event = event;
+                handlers.length = 0;
+                for(var j = scriptCount - 1; j >= 0; j--){
+                    var handler = scripts[j][funcName];
+                    handler && handlers.push(handler);
+                }
+                eventHandlers.push(eventHandler);
             }
-            eventHandlers.push(eventHandler);
-        }
+        };
+        clipChangedListener();
+        state._updateFlagManager.addListener(clipChangedListener);
     };
     _proto._clearCrossData = function _clearCrossData(animatorLayerData) {
         animatorLayerData.crossCurveMark++;
@@ -27459,9 +27541,11 @@ __decorate([
         this./** @internal */ _onStateEnterScripts = [];
         this./** @internal */ _onStateUpdateScripts = [];
         this./** @internal */ _onStateExitScripts = [];
+        this./** @internal */ _updateFlagManager = new UpdateFlagManager();
         this._clipStartTime = 0;
         this._clipEndTime = 1;
         this._transitions = [];
+        this._onClipChanged = this._onClipChanged.bind(this);
     }
     var _proto = AnimatorState.prototype;
     /**
@@ -27535,6 +27619,11 @@ __decorate([
             index2 !== -1 && this._onStateExitScripts.splice(index2, 1);
         }
     };
+    /**
+   * @internal
+   */ _proto._onClipChanged = function _onClipChanged() {
+        this._updateFlagManager.dispatch();
+    };
     _create_class(AnimatorState, [
         {
             key: "transitions",
@@ -27552,8 +27641,17 @@ __decorate([
                 return this._clip;
             },
             set: function set(clip) {
+                var lastClip = this._clip;
+                if (lastClip === clip) {
+                    return;
+                }
+                if (lastClip) {
+                    lastClip._updateFlagManager.removeListener(this._onClipChanged);
+                }
                 this._clip = clip;
                 this._clipEndTime = Math.min(this._clipEndTime, 1);
+                this._onClipChanged();
+                clip._updateFlagManager.addListener(this._onClipChanged);
             }
         },
         {
@@ -27764,7 +27862,7 @@ var AnimatorConditionMode;
         var _this;
         _this = Material1.call(this, engine, Shader.find("skybox")) || this;
         _this._textureDecodeRGBM = false;
-        _this._tintColor = new Color$1(1, 1, 1, 1);
+        _this._tintColor = new Color(1, 1, 1, 1);
         _this.renderState.rasterState.cullMode = CullMode.Off;
         _this.renderState.depthState.compareFunction = CompareFunction.LessEqual;
         _this.shaderData.setFloat(SkyBoxMaterial._rotationProp, 0);
@@ -27877,8 +27975,8 @@ var SunMode;
         _this.sunSize = 0.04;
         _this.sunSizeConvergence = 5;
         _this.atmosphereThickness = 1.0;
-        _this.skyTint = new Color$1(0.5, 0.5, 0.5, 1.0);
-        _this.groundTint = new Color$1(0.369, 0.349, 0.341, 1.0);
+        _this.skyTint = new Color(0.5, 0.5, 0.5, 1.0);
+        _this.groundTint = new Color(0.369, 0.349, 0.341, 1.0);
         _this.exposure = 1.3;
         _this.renderState.rasterState.cullMode = CullMode.Off;
         _this.renderState.depthState.compareFunction = CompareFunction.LessEqual;
@@ -28358,9 +28456,9 @@ __decorate([
                 typeArray[offset] = key.time;
                 var color = key.color;
                 if (colorSpace === ColorSpace.Linear) {
-                    typeArray[offset + 1] = Color$1.gammaToLinearSpace(color.r);
-                    typeArray[offset + 2] = Color$1.gammaToLinearSpace(color.g);
-                    typeArray[offset + 3] = Color$1.gammaToLinearSpace(color.b);
+                    typeArray[offset + 1] = Color.gammaToLinearSpace(color.r);
+                    typeArray[offset + 2] = Color.gammaToLinearSpace(color.g);
+                    typeArray[offset + 3] = Color.gammaToLinearSpace(color.b);
                 } else {
                     typeArray[offset + 1] = color.r;
                     typeArray[offset + 2] = color.g;
@@ -28445,7 +28543,7 @@ __decorate([
  */ var GradientColorKey = /*#__PURE__*/ function() {
     function GradientColorKey(time, color) {
         /** @internal */ this._onValueChanged = null;
-        this._color = new Color$1();
+        this._color = new Color();
         this._time = time;
         color && this._color.copyFrom(color);
         // @ts-ignore
@@ -28522,11 +28620,11 @@ __decorate([
  */ var ParticleCompositeGradient = /*#__PURE__*/ function() {
     function ParticleCompositeGradient(constantOrGradient, constantMaxOrGradientMax) {
         /** The gradient mode. */ this.mode = ParticleGradientMode.Constant;
-        /* The min constant color used by the gradient if mode is set to `TwoConstants`. */ this.constantMin = new Color$1();
-        /* The max constant color used by the gradient if mode is set to `TwoConstants`. */ this.constantMax = new Color$1();
+        /* The min constant color used by the gradient if mode is set to `TwoConstants`. */ this.constantMin = new Color();
+        /* The max constant color used by the gradient if mode is set to `TwoConstants`. */ this.constantMax = new Color();
         /** The min gradient used by the gradient if mode is set to `Gradient`. */ this.gradientMin = new ParticleGradient();
         /** The max gradient used by the gradient if mode is set to `Gradient`. */ this.gradientMax = new ParticleGradient();
-        if (constantOrGradient.constructor === Color$1) {
+        if (constantOrGradient.constructor === Color) {
             if (constantMaxOrGradientMax) {
                 this.constantMin.copyFrom(constantOrGradient);
                 this.constantMax.copyFrom(constantMaxOrGradientMax);
@@ -28558,7 +28656,7 @@ __decorate([
                 out.copyFrom(this.constant);
                 break;
             case ParticleGradientMode.TwoConstants:
-                Color$1.lerp(this.constantMin, this.constantMax, lerpFactor, out);
+                Color.lerp(this.constantMin, this.constantMax, lerpFactor, out);
                 break;
         }
     };
@@ -28630,8 +28728,8 @@ __decorate([
         var _this;
         _this = ParticleGeneratorModule1.apply(this, arguments) || this;
         /** Color gradient over lifetime. */ _this.color = new ParticleCompositeGradient(new ParticleGradient([
-            new GradientColorKey(0.0, new Color$1(1, 1, 1)),
-            new GradientColorKey(1.0, new Color$1(1, 1, 1))
+            new GradientColorKey(0.0, new Color(1, 1, 1)),
+            new GradientColorKey(1.0, new Color(1, 1, 1))
         ], [
             new GradientAlphaKey(0, 1),
             new GradientAlphaKey(1, 1)
@@ -28961,7 +29059,7 @@ var MainModule = /*#__PURE__*/ function() {
         /** The initial rotation of particles around the y-axis when emitted. */ this.startRotationY = new ParticleCompositeCurve(0);
         /** The initial rotation of particles around the z-axis when emitted. */ this.startRotationZ = new ParticleCompositeCurve(0);
         /** Makes some particles spin in the opposite direction. */ this.flipRotation = 0;
-        /** The mode of start color */ this.startColor = new ParticleCompositeGradient(new Color$1(1, 1, 1, 1));
+        /** The mode of start color */ this.startColor = new ParticleCompositeGradient(new Color(1, 1, 1, 1));
         /** A scale that this Particle Generator applies to gravity, defined by Physics.gravity. */ this.gravityModifier = new ParticleCompositeCurve(0);
         /** This selects the space in which to simulate particles. It can be either world or local space. */ this.simulationSpace = ParticleSimulationSpace.Local;
         /** Override the default playback speed of the Particle Generator. */ this.simulationSpeed = 1.0;
@@ -29206,11 +29304,11 @@ __decorate([
                 isCurveMacro = RotationOverLifetimeModule._curveModeMacro;
             } else {
                 var constantMax = this._rotationMaxConstant;
-                constantMax.set(MathUtil$1.degreeToRadian(rotationX.constantMax), MathUtil$1.degreeToRadian(rotationY.constantMax), MathUtil$1.degreeToRadian(rotationZ.constantMax));
+                constantMax.set(MathUtil.degreeToRadian(rotationX.constantMax), MathUtil.degreeToRadian(rotationY.constantMax), MathUtil.degreeToRadian(rotationZ.constantMax));
                 shaderData.setVector3(RotationOverLifetimeModule._maxConstantProperty, constantMax);
                 if (separateAxes ? rotationX.mode === ParticleCurveMode.TwoConstants && rotationY.mode === ParticleCurveMode.TwoConstants && rotationZ.mode === ParticleCurveMode.TwoConstants : rotationZ.mode === ParticleCurveMode.TwoConstants) {
                     var constantMin = this._rotationMinConstant;
-                    constantMin.set(MathUtil$1.degreeToRadian(rotationX.constantMin), MathUtil$1.degreeToRadian(rotationY.constantMin), MathUtil$1.degreeToRadian(rotationZ.constantMin));
+                    constantMin.set(MathUtil.degreeToRadian(rotationX.constantMin), MathUtil.degreeToRadian(rotationY.constantMin), MathUtil.degreeToRadian(rotationZ.constantMin));
                     shaderData.setVector3(RotationOverLifetimeModule._minConstantProperty, constantMin);
                     isRandomTwoMacro = RotationOverLifetimeModule._isRandomTwoMacro;
                 }
@@ -30094,11 +30192,11 @@ __decorate([
         // Start rotation
         var startRotationRand = main._startRotationRand;
         if (main.startRotation3D) {
-            instanceVertices[offset + 15] = MathUtil$1.degreeToRadian(main.startRotationX.evaluate(undefined, startRotationRand.random()));
-            instanceVertices[offset + 16] = MathUtil$1.degreeToRadian(main.startRotationY.evaluate(undefined, startRotationRand.random()));
-            instanceVertices[offset + 17] = MathUtil$1.degreeToRadian(main.startRotationZ.evaluate(undefined, startRotationRand.random()));
+            instanceVertices[offset + 15] = MathUtil.degreeToRadian(main.startRotationX.evaluate(undefined, startRotationRand.random()));
+            instanceVertices[offset + 16] = MathUtil.degreeToRadian(main.startRotationY.evaluate(undefined, startRotationRand.random()));
+            instanceVertices[offset + 17] = MathUtil.degreeToRadian(main.startRotationZ.evaluate(undefined, startRotationRand.random()));
         } else {
-            instanceVertices[offset + 15] = MathUtil$1.degreeToRadian(main.startRotationZ.evaluate(undefined, startRotationRand.random()));
+            instanceVertices[offset + 15] = MathUtil.degreeToRadian(main.startRotationZ.evaluate(undefined, startRotationRand.random()));
         }
         // Start speed
         instanceVertices[offset + 18] = startSpeed;
@@ -30261,7 +30359,7 @@ __decorate([
     /** @internal */ ParticleGenerator._tempVector31 = new Vector3();
 })();
 (function() {
-    /** @internal */ ParticleGenerator._tempColor0 = new Color$1();
+    /** @internal */ ParticleGenerator._tempColor0 = new Color();
 })();
 (function() {
     /** @internal */ ParticleGenerator._tempParticleRenderers = new Array();
@@ -30341,7 +30439,7 @@ __decorate([
         var _this;
         _this = BaseMaterial1.call(this, engine, Shader.find("particle-shader")) || this;
         var shaderData = _this.shaderData;
-        shaderData.setColor(BaseMaterial._baseColorProp, new Color$1(1, 1, 1, 1));
+        shaderData.setColor(BaseMaterial._baseColorProp, new Color(1, 1, 1, 1));
         _this.isTransparent = true;
         return _this;
     }
@@ -30536,12 +30634,12 @@ __decorate([
         switch(this.arcMode){
             case ParticleShapeArcMode.Loop:
                 var normalizedEmitTime = emitTime * this.arcSpeed * (360 / this.arc) % 1;
-                var radian = MathUtil$1.degreeToRadian(this.arc * normalizedEmitTime);
+                var radian = MathUtil.degreeToRadian(this.arc * normalizedEmitTime);
                 positionPoint.set(Math.cos(radian), Math.sin(radian));
                 positionPoint.scale(rand.random());
                 break;
             case ParticleShapeArcMode.Random:
-                ShapeUtils.randomPointInsideUnitArcCircle(MathUtil$1.degreeToRadian(this.arc), positionPoint, rand);
+                ShapeUtils.randomPointInsideUnitArcCircle(MathUtil.degreeToRadian(this.arc), positionPoint, rand);
                 break;
         }
         position.set(positionPoint.x, positionPoint.y, 0);
@@ -30574,7 +30672,7 @@ __decorate([
    * @internal
    */ _proto._generatePositionAndDirection = function _generatePositionAndDirection(rand, emitTime, position, direction) {
         var unitPosition = ConeShape._tempVector20;
-        var radian = MathUtil$1.degreeToRadian(this.angle);
+        var radian = MathUtil.degreeToRadian(this.angle);
         var dirSinA = Math.sin(radian);
         var dirCosA = Math.cos(radian);
         switch(this.emitType){