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

package/dist/main.js

@@ -59,347 +59,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.
  */ exports.SpriteMaskInteraction = void 0;
@@ -940,7 +599,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.
@@ -958,7 +624,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
@@ -2120,20 +1789,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();
+                            }
                         }
                     }
                 }
@@ -3506,7 +3183,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
 
@@ -3556,7 +3233,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
 
@@ -3594,7 +3271,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
 
@@ -3615,7 +3292,7 @@ var PBRShaderLib = {
 
 var ShadowCoord = "#define GLSLIFY 1\nuniform mat4 scene_ShadowMatrices[SCENE_SHADOW_CASCADED_COUNT+1];uniform vec4 scene_ShadowSplitSpheres[4];mediump int computeCascadeIndex(vec3 positionWS){vec3 fromCenter0=positionWS-scene_ShadowSplitSpheres[0].xyz;vec3 fromCenter1=positionWS-scene_ShadowSplitSpheres[1].xyz;vec3 fromCenter2=positionWS-scene_ShadowSplitSpheres[2].xyz;vec3 fromCenter3=positionWS-scene_ShadowSplitSpheres[3].xyz;mediump vec4 comparison=vec4(dot(fromCenter0,fromCenter0)<scene_ShadowSplitSpheres[0].w,dot(fromCenter1,fromCenter1)<scene_ShadowSplitSpheres[1].w,dot(fromCenter2,fromCenter2)<scene_ShadowSplitSpheres[2].w,dot(fromCenter3,fromCenter3)<scene_ShadowSplitSpheres[3].w);comparison.yzw=clamp(comparison.yzw-comparison.xyz,0.0,1.0);mediump vec4 indexCoefficient=vec4(4.0,3.0,2.0,1.0);mediump int index=4-int(dot(comparison,indexCoefficient));return index;}vec3 getShadowCoord(){\n#if SCENE_SHADOW_CASCADED_COUNT == 1\nmediump int cascadeIndex=0;\n#else\nmediump int cascadeIndex=computeCascadeIndex(v_pos);\n#endif\n#ifdef GRAPHICS_API_WEBGL2\nmat4 shadowMatrix=scene_ShadowMatrices[cascadeIndex];\n#else\nmat4 shadowMatrix;\n#if SCENE_SHADOW_CASCADED_COUNT == 4\nif(cascadeIndex==0){shadowMatrix=scene_ShadowMatrices[0];}else if(cascadeIndex==1){shadowMatrix=scene_ShadowMatrices[1];}else if(cascadeIndex==2){shadowMatrix=scene_ShadowMatrices[2];}else if(cascadeIndex==3){shadowMatrix=scene_ShadowMatrices[3];}else{shadowMatrix=scene_ShadowMatrices[4];}\n#endif\n#if SCENE_SHADOW_CASCADED_COUNT == 2\nif(cascadeIndex==0){shadowMatrix=scene_ShadowMatrices[0];}else if(cascadeIndex==1){shadowMatrix=scene_ShadowMatrices[1];}else{shadowMatrix=scene_ShadowMatrices[2];}\n#endif\n#if SCENE_SHADOW_CASCADED_COUNT == 1\nif(cascadeIndex==0){shadowMatrix=scene_ShadowMatrices[0];}else{shadowMatrix=scene_ShadowMatrices[1];}\n#endif\n#endif\nvec4 shadowCoord=shadowMatrix*vec4(v_pos,1.0);return shadowCoord.xyz;}"; // eslint-disable-line
 
-var ShadowFragmentDeclaration = "#define GLSLIFY 1\n#if defined(SCENE_SHADOW_TYPE) && defined(RENDERER_IS_RECEIVE_SHADOWS)\n#define SCENE_IS_CALCULATE_SHADOWS\n#endif\n#ifdef SCENE_IS_CALCULATE_SHADOWS\n#if SCENE_SHADOW_CASCADED_COUNT == 1\nvarying vec3 v_shadowCoord;\n#else\n#include <ShadowCoord>\n#endif\nuniform vec3 scene_ShadowInfo;uniform vec4 scene_ShadowMapSize;\n#ifdef GRAPHICS_API_WEBGL2\nuniform mediump sampler2DShadow scene_ShadowMap;\n#define SAMPLE_TEXTURE2D_SHADOW(textureName, coord3) textureLod(textureName, coord3 , 0.0)\n#define TEXTURE2D_SHADOW_PARAM(shadowMap) mediump sampler2DShadow shadowMap\n#else\nuniform sampler2D scene_ShadowMap;\n#ifdef ENGINE_NO_DEPTH_TEXTURE\nconst vec4 bitShift=vec4(1.0,1.0/256.0,1.0/(256.0*256.0),1.0/(256.0*256.0*256.0));float unpack(const in vec4 rgbaDepth){return dot(rgbaDepth,bitShift);}\n#define SAMPLE_TEXTURE2D_SHADOW(textureName, coord3) (unpack(texture2D(textureName, coord3.xy)) < coord3.z ? 0.0 : 1.0)\n#else\n#define SAMPLE_TEXTURE2D_SHADOW(textureName, coord3) (texture2D(textureName, coord3.xy).r < coord3.z ? 0.0 : 1.0)\n#endif\n#define TEXTURE2D_SHADOW_PARAM(shadowMap) mediump sampler2D shadowMap\n#endif\n#if SCENE_SHADOW_TYPE == 2\nfloat sampleShadowMapFiltered4(TEXTURE2D_SHADOW_PARAM(shadowMap),vec3 shadowCoord,vec4 shadowMapSize){float attenuation;vec4 attenuation4;vec2 offset=shadowMapSize.xy/2.0;vec3 shadowCoord0=shadowCoord+vec3(-offset,0.0);vec3 shadowCoord1=shadowCoord+vec3(offset.x,-offset.y,0.0);vec3 shadowCoord2=shadowCoord+vec3(-offset.x,offset.y,0.0);vec3 shadowCoord3=shadowCoord+vec3(offset,0.0);attenuation4.x=SAMPLE_TEXTURE2D_SHADOW(shadowMap,shadowCoord0);attenuation4.y=SAMPLE_TEXTURE2D_SHADOW(shadowMap,shadowCoord1);attenuation4.z=SAMPLE_TEXTURE2D_SHADOW(shadowMap,shadowCoord2);attenuation4.w=SAMPLE_TEXTURE2D_SHADOW(shadowMap,shadowCoord3);attenuation=dot(attenuation4,vec4(0.25));return attenuation;}\n#endif\n#if SCENE_SHADOW_TYPE == 3\n#include <shadow_sample_tent>\nfloat sampleShadowMapFiltered9(TEXTURE2D_SHADOW_PARAM(shadowMap),vec3 shadowCoord,vec4 shadowmapSize){float attenuation;float fetchesWeights[9];vec2 fetchesUV[9];sampleShadowComputeSamplesTent5x5(shadowmapSize,shadowCoord.xy,fetchesWeights,fetchesUV);attenuation=fetchesWeights[0]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[0].xy,shadowCoord.z));attenuation+=fetchesWeights[1]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[1].xy,shadowCoord.z));attenuation+=fetchesWeights[2]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[2].xy,shadowCoord.z));attenuation+=fetchesWeights[3]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[3].xy,shadowCoord.z));attenuation+=fetchesWeights[4]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[4].xy,shadowCoord.z));attenuation+=fetchesWeights[5]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[5].xy,shadowCoord.z));attenuation+=fetchesWeights[6]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[6].xy,shadowCoord.z));attenuation+=fetchesWeights[7]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[7].xy,shadowCoord.z));attenuation+=fetchesWeights[8]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[8].xy,shadowCoord.z));return attenuation;}\n#endif\nfloat sampleShadowMap(){\n#if SCENE_SHADOW_CASCADED_COUNT == 1\nvec3 shadowCoord=v_shadowCoord;\n#else\nvec3 shadowCoord=getShadowCoord();\n#endif\nfloat attenuation=1.0;if(shadowCoord.z>0.0&&shadowCoord.z<1.0){\n#if SCENE_SHADOW_TYPE == 1\nattenuation=SAMPLE_TEXTURE2D_SHADOW(scene_ShadowMap,shadowCoord);\n#endif\n#if SCENE_SHADOW_TYPE == 2\nattenuation=sampleShadowMapFiltered4(scene_ShadowMap,shadowCoord,scene_ShadowMapSize);\n#endif\n#if SCENE_SHADOW_TYPE == 3\nattenuation=sampleShadowMapFiltered9(scene_ShadowMap,shadowCoord,scene_ShadowMapSize);\n#endif\nattenuation=mix(1.0,attenuation,scene_ShadowInfo.x);}return attenuation;}\n#endif\n"; // eslint-disable-line
+var ShadowFragmentDeclaration = "#define GLSLIFY 1\n#if defined(SCENE_SHADOW_TYPE) && defined(RENDERER_IS_RECEIVE_SHADOWS)\n#define SCENE_IS_CALCULATE_SHADOWS\n#endif\n#ifdef SCENE_IS_CALCULATE_SHADOWS\n#if SCENE_SHADOW_CASCADED_COUNT == 1\nvarying vec3 v_shadowCoord;\n#else\n#include <ShadowCoord>\n#endif\nuniform vec4 scene_ShadowInfo;uniform vec4 scene_ShadowMapSize;\n#ifdef GRAPHICS_API_WEBGL2\nuniform mediump sampler2DShadow scene_ShadowMap;\n#define SAMPLE_TEXTURE2D_SHADOW(textureName, coord3) textureLod(textureName, coord3 , 0.0)\n#define TEXTURE2D_SHADOW_PARAM(shadowMap) mediump sampler2DShadow shadowMap\n#else\nuniform sampler2D scene_ShadowMap;\n#ifdef ENGINE_NO_DEPTH_TEXTURE\nconst vec4 bitShift=vec4(1.0,1.0/256.0,1.0/(256.0*256.0),1.0/(256.0*256.0*256.0));float unpack(const in vec4 rgbaDepth){return dot(rgbaDepth,bitShift);}\n#define SAMPLE_TEXTURE2D_SHADOW(textureName, coord3) (unpack(texture2D(textureName, coord3.xy)) < coord3.z ? 0.0 : 1.0)\n#else\n#define SAMPLE_TEXTURE2D_SHADOW(textureName, coord3) (texture2D(textureName, coord3.xy).r < coord3.z ? 0.0 : 1.0)\n#endif\n#define TEXTURE2D_SHADOW_PARAM(shadowMap) mediump sampler2D shadowMap\n#endif\n#if SCENE_SHADOW_TYPE == 2\nfloat sampleShadowMapFiltered4(TEXTURE2D_SHADOW_PARAM(shadowMap),vec3 shadowCoord,vec4 shadowMapSize){float attenuation;vec4 attenuation4;vec2 offset=shadowMapSize.xy/2.0;vec3 shadowCoord0=shadowCoord+vec3(-offset,0.0);vec3 shadowCoord1=shadowCoord+vec3(offset.x,-offset.y,0.0);vec3 shadowCoord2=shadowCoord+vec3(-offset.x,offset.y,0.0);vec3 shadowCoord3=shadowCoord+vec3(offset,0.0);attenuation4.x=SAMPLE_TEXTURE2D_SHADOW(shadowMap,shadowCoord0);attenuation4.y=SAMPLE_TEXTURE2D_SHADOW(shadowMap,shadowCoord1);attenuation4.z=SAMPLE_TEXTURE2D_SHADOW(shadowMap,shadowCoord2);attenuation4.w=SAMPLE_TEXTURE2D_SHADOW(shadowMap,shadowCoord3);attenuation=dot(attenuation4,vec4(0.25));return attenuation;}\n#endif\n#if SCENE_SHADOW_TYPE == 3\n#include <shadow_sample_tent>\nfloat sampleShadowMapFiltered9(TEXTURE2D_SHADOW_PARAM(shadowMap),vec3 shadowCoord,vec4 shadowmapSize){float attenuation;float fetchesWeights[9];vec2 fetchesUV[9];sampleShadowComputeSamplesTent5x5(shadowmapSize,shadowCoord.xy,fetchesWeights,fetchesUV);attenuation=fetchesWeights[0]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[0].xy,shadowCoord.z));attenuation+=fetchesWeights[1]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[1].xy,shadowCoord.z));attenuation+=fetchesWeights[2]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[2].xy,shadowCoord.z));attenuation+=fetchesWeights[3]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[3].xy,shadowCoord.z));attenuation+=fetchesWeights[4]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[4].xy,shadowCoord.z));attenuation+=fetchesWeights[5]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[5].xy,shadowCoord.z));attenuation+=fetchesWeights[6]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[6].xy,shadowCoord.z));attenuation+=fetchesWeights[7]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[7].xy,shadowCoord.z));attenuation+=fetchesWeights[8]*SAMPLE_TEXTURE2D_SHADOW(shadowMap,vec3(fetchesUV[8].xy,shadowCoord.z));return attenuation;}\n#endif\nfloat getShadowFade(vec3 positionWS){vec3 camToPixel=positionWS-camera_Position;float distanceCamToPixel2=dot(camToPixel,camToPixel);return saturate(distanceCamToPixel2*scene_ShadowInfo.z+scene_ShadowInfo.w);}float sampleShadowMap(){\n#if SCENE_SHADOW_CASCADED_COUNT == 1\nvec3 shadowCoord=v_shadowCoord;\n#else\nvec3 shadowCoord=getShadowCoord();\n#endif\nfloat attenuation=1.0;if(shadowCoord.z>0.0&&shadowCoord.z<1.0){\n#if SCENE_SHADOW_TYPE == 1\nattenuation=SAMPLE_TEXTURE2D_SHADOW(scene_ShadowMap,shadowCoord);\n#endif\n#if SCENE_SHADOW_TYPE == 2\nattenuation=sampleShadowMapFiltered4(scene_ShadowMap,shadowCoord,scene_ShadowMapSize);\n#endif\n#if SCENE_SHADOW_TYPE == 3\nattenuation=sampleShadowMapFiltered9(scene_ShadowMap,shadowCoord,scene_ShadowMapSize);\n#endif\nfloat shadowFade=getShadowFade(v_pos);attenuation=mix(1.0,mix(attenuation,1.0,shadowFade),scene_ShadowInfo.x);}return attenuation;}\n#endif\n"; // eslint-disable-line
 
 var shadow_sample_tent = "#define GLSLIFY 1\nfloat sampleShadowGetIRTriangleTexelArea(float triangleHeight){return triangleHeight-0.5;}void sampleShadowGetTexelAreasTent3x3(float offset,out vec4 computedArea,out vec4 computedAreaUncut){float a=offset+0.5;float offsetSquaredHalved=a*a*0.5;computedAreaUncut.x=computedArea.x=offsetSquaredHalved-offset;computedAreaUncut.w=computedArea.w=offsetSquaredHalved;computedAreaUncut.y=sampleShadowGetIRTriangleTexelArea(1.5-offset);float clampedOffsetLeft=min(offset,0.0);float areaOfSmallLeftTriangle=clampedOffsetLeft*clampedOffsetLeft;computedArea.y=computedAreaUncut.y-areaOfSmallLeftTriangle;computedAreaUncut.z=sampleShadowGetIRTriangleTexelArea(1.5+offset);float clampedOffsetRight=max(offset,0.0);float areaOfSmallRightTriangle=clampedOffsetRight*clampedOffsetRight;computedArea.z=computedAreaUncut.z-areaOfSmallRightTriangle;}void sampleShadowGetTexelWeightsTent5x5(float offset,out vec3 texelsWeightsA,out vec3 texelsWeightsB){vec4 areaFrom3texelTriangle;vec4 areaUncutFrom3texelTriangle;sampleShadowGetTexelAreasTent3x3(offset,areaFrom3texelTriangle,areaUncutFrom3texelTriangle);texelsWeightsA.x=0.16*(areaFrom3texelTriangle.x);texelsWeightsA.y=0.16*(areaUncutFrom3texelTriangle.y);texelsWeightsA.z=0.16*(areaFrom3texelTriangle.y+1.0);texelsWeightsB.x=0.16*(areaFrom3texelTriangle.z+1.0);texelsWeightsB.y=0.16*(areaUncutFrom3texelTriangle.z);texelsWeightsB.z=0.16*(areaFrom3texelTriangle.w);}void sampleShadowComputeSamplesTent5x5(vec4 shadowMapTextureTexelSize,vec2 coord,out float fetchesWeights[9],out vec2 fetchesUV[9]){vec2 tentCenterInTexelSpace=coord.xy*shadowMapTextureTexelSize.zw;vec2 centerOfFetchesInTexelSpace=floor(tentCenterInTexelSpace+0.5);vec2 offsetFromTentCenterToCenterOfFetches=tentCenterInTexelSpace-centerOfFetchesInTexelSpace;vec3 texelsWeightsUA,texelsWeightsUB;vec3 texelsWeightsVA,texelsWeightsVB;sampleShadowGetTexelWeightsTent5x5(offsetFromTentCenterToCenterOfFetches.x,texelsWeightsUA,texelsWeightsUB);sampleShadowGetTexelWeightsTent5x5(offsetFromTentCenterToCenterOfFetches.y,texelsWeightsVA,texelsWeightsVB);vec3 fetchesWeightsU=vec3(texelsWeightsUA.xz,texelsWeightsUB.y)+vec3(texelsWeightsUA.y,texelsWeightsUB.xz);vec3 fetchesWeightsV=vec3(texelsWeightsVA.xz,texelsWeightsVB.y)+vec3(texelsWeightsVA.y,texelsWeightsVB.xz);vec3 fetchesOffsetsU=vec3(texelsWeightsUA.y,texelsWeightsUB.xz)/fetchesWeightsU.xyz+vec3(-2.5,-0.5,1.5);vec3 fetchesOffsetsV=vec3(texelsWeightsVA.y,texelsWeightsVB.xz)/fetchesWeightsV.xyz+vec3(-2.5,-0.5,1.5);fetchesOffsetsU*=shadowMapTextureTexelSize.xxx;fetchesOffsetsV*=shadowMapTextureTexelSize.yyy;vec2 bilinearFetchOrigin=centerOfFetchesInTexelSpace*shadowMapTextureTexelSize.xy;fetchesUV[0]=bilinearFetchOrigin+vec2(fetchesOffsetsU.x,fetchesOffsetsV.x);fetchesUV[1]=bilinearFetchOrigin+vec2(fetchesOffsetsU.y,fetchesOffsetsV.x);fetchesUV[2]=bilinearFetchOrigin+vec2(fetchesOffsetsU.z,fetchesOffsetsV.x);fetchesUV[3]=bilinearFetchOrigin+vec2(fetchesOffsetsU.x,fetchesOffsetsV.y);fetchesUV[4]=bilinearFetchOrigin+vec2(fetchesOffsetsU.y,fetchesOffsetsV.y);fetchesUV[5]=bilinearFetchOrigin+vec2(fetchesOffsetsU.z,fetchesOffsetsV.y);fetchesUV[6]=bilinearFetchOrigin+vec2(fetchesOffsetsU.x,fetchesOffsetsV.z);fetchesUV[7]=bilinearFetchOrigin+vec2(fetchesOffsetsU.y,fetchesOffsetsV.z);fetchesUV[8]=bilinearFetchOrigin+vec2(fetchesOffsetsU.z,fetchesOffsetsV.z);fetchesWeights[0]=fetchesWeightsU.x*fetchesWeightsV.x;fetchesWeights[1]=fetchesWeightsU.y*fetchesWeightsV.x;fetchesWeights[2]=fetchesWeightsU.z*fetchesWeightsV.x;fetchesWeights[3]=fetchesWeightsU.x*fetchesWeightsV.y;fetchesWeights[4]=fetchesWeightsU.y*fetchesWeightsV.y;fetchesWeights[5]=fetchesWeightsU.z*fetchesWeightsV.y;fetchesWeights[6]=fetchesWeightsU.x*fetchesWeightsV.z;fetchesWeights[7]=fetchesWeightsU.y*fetchesWeightsV.z;fetchesWeights[8]=fetchesWeightsU.z*fetchesWeightsV.z;}"; // eslint-disable-line
 
@@ -3730,16 +3407,22 @@ var ShaderFactory = /*#__PURE__*/ function() {
         }
         ShaderLib[includeName] = includeSource;
     };
-    ShaderFactory.parseIncludes = function parseIncludes(src) {
+    ShaderFactory.unRegisterInclude = function unRegisterInclude(includeName) {
+        delete ShaderLib[includeName];
+    };
+    /**
+   * @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) {
                 Logger.error('Shader slice "' + match.trim() + '" not founded.');
                 return "";
             }
-            return ShaderFactory.parseIncludes(replace);
+            return ShaderFactory.parseIncludes(replace, regex);
         };
-        var regex = /^[ \t]*#include +<([\w\d.]+)>/gm;
         return src.replace(regex, replace);
     };
     /**
@@ -3850,16 +3533,6 @@ var ShaderFactory = /*#__PURE__*/ function() {
     return ShaderPart;
 }();
 
-/**
- * Shader data grouping.
- */ var ShaderDataGroup;
-(function(ShaderDataGroup) {
-    ShaderDataGroup[ShaderDataGroup[/** Scene group. */ "Scene"] = 0] = "Scene";
-    ShaderDataGroup[ShaderDataGroup[/** Camera group. */ "Camera"] = 1] = "Camera";
-    ShaderDataGroup[ShaderDataGroup[/** Renderer group. */ "Renderer"] = 2] = "Renderer";
-    ShaderDataGroup[ShaderDataGroup[/** material group. */ "Material"] = 3] = "Material";
-})(ShaderDataGroup || (ShaderDataGroup = {}));
-
 /**
  * Color Space.
  */ exports.ColorSpace = void 0;
@@ -4069,6 +3742,16 @@ var ShaderFactory = /*#__PURE__*/ function() {
     this.textureUniforms = [];
 };
 
+/**
+ * Shader data grouping.
+ */ var ShaderDataGroup;
+(function(ShaderDataGroup) {
+    ShaderDataGroup[ShaderDataGroup[/** Scene group. */ "Scene"] = 0] = "Scene";
+    ShaderDataGroup[ShaderDataGroup[/** Camera group. */ "Camera"] = 1] = "Camera";
+    ShaderDataGroup[ShaderDataGroup[/** Renderer group. */ "Renderer"] = 2] = "Renderer";
+    ShaderDataGroup[ShaderDataGroup[/** material group. */ "Material"] = 3] = "Material";
+})(ShaderDataGroup || (ShaderDataGroup = {}));
+
 /**
  * Shader program, corresponding to the GPU shader program.
  * @internal
@@ -4364,6 +4047,7 @@ var ShaderFactory = /*#__PURE__*/ function() {
                     break;
                 case gl.SAMPLER_2D:
                 case gl.SAMPLER_CUBE:
+                case gl.UNSIGNED_INT_SAMPLER_2D:
                 case gl.SAMPLER_2D_ARRAY:
                 case gl.SAMPLER_2D_SHADOW:
                     var defaultTexture;
@@ -4374,6 +4058,9 @@ var ShaderFactory = /*#__PURE__*/ function() {
                         case gl.SAMPLER_CUBE:
                             defaultTexture = _this._engine._magentaTextureCube;
                             break;
+                        case gl.UNSIGNED_INT_SAMPLER_2D:
+                            defaultTexture = _this._engine._uintMagentaTexture2D;
+                            break;
                         case gl.SAMPLER_2D_ARRAY:
                             defaultTexture = _this._engine._magentaTexture2DArray;
                             break;
@@ -5463,6 +5150,57 @@ var GraphicsResource = /*#__PURE__*/ function(ReferResource1) {
     return GraphicsResource;
 }(ReferResource);
 
+/**
+ * The filter mode of the texture.
+ */ exports.TextureFilterMode = void 0;
+(function(TextureFilterMode) {
+    TextureFilterMode[TextureFilterMode[/** Point filtering. */ "Point"] = 0] = "Point";
+    TextureFilterMode[TextureFilterMode[/** Bilinear filtering. */ "Bilinear"] = 1] = "Bilinear";
+    TextureFilterMode[TextureFilterMode[/** Trilinear filtering. */ "Trilinear"] = 2] = "Trilinear";
+})(exports.TextureFilterMode || (exports.TextureFilterMode = {}));
+
+/**
+ * Texture format enumeration.
+ */ exports.TextureFormat = void 0;
+(function(TextureFormat) {
+    TextureFormat[TextureFormat[/** RGB format, 8 bits per channel. */ "R8G8B8"] = 0] = "R8G8B8";
+    TextureFormat[TextureFormat[/** RGBA format, 8 bits per channel. */ "R8G8B8A8"] = 1] = "R8G8B8A8";
+    TextureFormat[TextureFormat[/** RGBA format, 4 bits per channel. */ "R4G4B4A4"] = 2] = "R4G4B4A4";
+    TextureFormat[TextureFormat[/** RGBA format, 5 bits in R channel, 5 bits in G channel, 5 bits in B channel, 1 bit in A channel. */ "R5G5B5A1"] = 3] = "R5G5B5A1";
+    TextureFormat[TextureFormat[/** RGB format, 5 bits in R channel, 6 bits in G channel, 5 bits in B channel. */ "R5G6B5"] = 4] = "R5G6B5";
+    TextureFormat[TextureFormat[/** Transparent format, 8 bits. */ "Alpha8"] = 5] = "Alpha8";
+    TextureFormat[TextureFormat[/** Luminance/alpha in RGB channel, alpha in A channel. */ "LuminanceAlpha"] = 6] = "LuminanceAlpha";
+    TextureFormat[TextureFormat[/** RGBA format, 16 bits per channel. */ "R16G16B16A16"] = 7] = "R16G16B16A16";
+    TextureFormat[TextureFormat[/** RGBA format, 32 bits per channel. */ "R32G32B32A32"] = 8] = "R32G32B32A32";
+    TextureFormat[TextureFormat[/** RGBA unsigned integer format, 32 bits per channel. */ "R32G32B32A32_UInt"] = 9] = "R32G32B32A32_UInt";
+    TextureFormat[TextureFormat[/** RGB compressed format, 4 bits per pixel. */ "BC1"] = 10] = "BC1";
+    TextureFormat[TextureFormat[/** RGBA compressed format, 8 bits per pixel. */ "BC3"] = 11] = "BC3";
+    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 4x4 pixel block. */ "BC7"] = 12] = "BC7";
+    TextureFormat[TextureFormat[/** RGB compressed format, 4 bits per pixel. */ "ETC1_RGB"] = 13] = "ETC1_RGB";
+    TextureFormat[TextureFormat[/** RGB compressed format, 4 bits per pixel. */ "ETC2_RGB"] = 14] = "ETC2_RGB";
+    TextureFormat[TextureFormat[/** RGBA compressed format, 5 bits per pixel, 4 bit in RGB, 1 bit in A. */ "ETC2_RGBA5"] = 15] = "ETC2_RGBA5";
+    TextureFormat[TextureFormat[/** RGB compressed format, 8 bits per pixel. */ "ETC2_RGBA8"] = 16] = "ETC2_RGBA8";
+    TextureFormat[TextureFormat[/** RGB compressed format, 2 bits per pixel. */ "PVRTC_RGB2"] = 17] = "PVRTC_RGB2";
+    TextureFormat[TextureFormat[/** RGBA compressed format, 2 bits per pixel. */ "PVRTC_RGBA2"] = 18] = "PVRTC_RGBA2";
+    TextureFormat[TextureFormat[/** RGB compressed format, 4 bits per pixel. */ "PVRTC_RGB4"] = 19] = "PVRTC_RGB4";
+    TextureFormat[TextureFormat[/** RGBA compressed format, 4 bits per pixel. */ "PVRTC_RGBA4"] = 20] = "PVRTC_RGBA4";
+    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 4x4 pixel block. */ "ASTC_4x4"] = 21] = "ASTC_4x4";
+    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 5x5 pixel block. */ "ASTC_5x5"] = 22] = "ASTC_5x5";
+    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 6x6 pixel block. */ "ASTC_6x6"] = 23] = "ASTC_6x6";
+    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 8x8 pixel block. */ "ASTC_8x8"] = 24] = "ASTC_8x8";
+    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 10x10 pixel block. */ "ASTC_10x10"] = 25] = "ASTC_10x10";
+    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 12x12 pixel block. */ "ASTC_12x12"] = 26] = "ASTC_12x12";
+    TextureFormat[TextureFormat[/** Automatic depth format, engine will automatically select the supported precision. */ "Depth"] = 27] = "Depth";
+    TextureFormat[TextureFormat[/** Automatic depth stencil format, engine will automatically select the supported precision. */ "DepthStencil"] = 28] = "DepthStencil";
+    TextureFormat[TextureFormat[/** 16-bit depth format. */ "Depth16"] = 29] = "Depth16";
+    TextureFormat[TextureFormat[/** 24-bit depth format. */ "Depth24"] = 30] = "Depth24";
+    TextureFormat[TextureFormat[/** 32-bit depth format. */ "Depth32"] = 31] = "Depth32";
+    TextureFormat[TextureFormat[/** 16-bit depth + 8-bit stencil format. */ "Depth24Stencil8"] = 32] = "Depth24Stencil8";
+    TextureFormat[TextureFormat[/** 32-bit depth + 8-bit stencil format. */ "Depth32Stencil8"] = 33] = "Depth32Stencil8";
+    TextureFormat[TextureFormat[/** @deprecated Use `TextureFormat.BC1` instead. */ "DXT1"] = 34] = "DXT1";
+    TextureFormat[TextureFormat[/** @deprecated Use `TextureFormat.BC3` instead. */ "DXT5"] = 35] = "DXT5";
+})(exports.TextureFormat || (exports.TextureFormat = {}));
+
 /**
  * The base class of texture, contains some common functions of texture-related classes.
  */ var Texture = /*#__PURE__*/ function(GraphicsResource1) {
@@ -5519,6 +5257,12 @@ var GraphicsResource = /*#__PURE__*/ function(ReferResource1) {
     _proto._getMipmapCount = function _getMipmapCount() {
         return this._mipmap ? Math.floor(Math.log2(Math.max(this._width, this._height))) + 1 : 1;
     };
+    _proto._isIntFormat = function _isIntFormat() {
+        if (exports.TextureFormat.R32G32B32A32_UInt === this._format) {
+            return true;
+        }
+        return false;
+    };
     _create_class(Texture, [
         {
             key: "format",
@@ -5595,6 +5339,11 @@ var GraphicsResource = /*#__PURE__*/ function(ReferResource1) {
             },
             set: function set(value) {
                 if (value === this._filterMode) return;
+                if (value !== exports.TextureFilterMode.Point && this._isIntFormat()) {
+                    value = exports.TextureFilterMode.Point;
+                    Logger.warn("Int or UInt format texture only support TextureFilterMode.Point");
+                    return;
+                }
                 this._filterMode = value;
                 this._platformTexture.filterMode = value;
             }
@@ -6721,7 +6470,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);
             }
         }
@@ -7898,56 +7647,6 @@ var /**
     TextureDepthCompareFunction[TextureDepthCompareFunction[/** always pass. */ "Always"] = 7] = "Always";
 })(exports.TextureDepthCompareFunction || (exports.TextureDepthCompareFunction = {}));
 
-/**
- * The filter mode of the texture.
- */ exports.TextureFilterMode = void 0;
-(function(TextureFilterMode) {
-    TextureFilterMode[TextureFilterMode[/** Point filtering. */ "Point"] = 0] = "Point";
-    TextureFilterMode[TextureFilterMode[/** Bilinear filtering. */ "Bilinear"] = 1] = "Bilinear";
-    TextureFilterMode[TextureFilterMode[/** Trilinear filtering. */ "Trilinear"] = 2] = "Trilinear";
-})(exports.TextureFilterMode || (exports.TextureFilterMode = {}));
-
-/**
- * Texture format enumeration.
- */ exports.TextureFormat = void 0;
-(function(TextureFormat) {
-    TextureFormat[TextureFormat[/** RGB format, 8 bits per channel. */ "R8G8B8"] = 0] = "R8G8B8";
-    TextureFormat[TextureFormat[/** RGBA format, 8 bits per channel. */ "R8G8B8A8"] = 1] = "R8G8B8A8";
-    TextureFormat[TextureFormat[/** RGBA format, 4 bits per channel. */ "R4G4B4A4"] = 2] = "R4G4B4A4";
-    TextureFormat[TextureFormat[/** RGBA format, 5 bits in R channel, 5 bits in G channel, 5 bits in B channel, 1 bit in A channel. */ "R5G5B5A1"] = 3] = "R5G5B5A1";
-    TextureFormat[TextureFormat[/** RGB format, 5 bits in R channel, 6 bits in G channel, 5 bits in B channel. */ "R5G6B5"] = 4] = "R5G6B5";
-    TextureFormat[TextureFormat[/** Transparent format, 8 bits. */ "Alpha8"] = 5] = "Alpha8";
-    TextureFormat[TextureFormat[/** Luminance/alpha in RGB channel, alpha in A channel. */ "LuminanceAlpha"] = 6] = "LuminanceAlpha";
-    TextureFormat[TextureFormat[/** RGBA format, 16 bits per channel. */ "R16G16B16A16"] = 7] = "R16G16B16A16";
-    TextureFormat[TextureFormat[/** RGBA format, 32 bits per channel. */ "R32G32B32A32"] = 8] = "R32G32B32A32";
-    TextureFormat[TextureFormat[/** RGB compressed format, 4 bits per pixel. */ "BC1"] = 9] = "BC1";
-    TextureFormat[TextureFormat[/** RGBA compressed format, 8 bits per pixel. */ "BC3"] = 10] = "BC3";
-    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 4x4 pixel block. */ "BC7"] = 11] = "BC7";
-    TextureFormat[TextureFormat[/** RGB compressed format, 4 bits per pixel. */ "ETC1_RGB"] = 12] = "ETC1_RGB";
-    TextureFormat[TextureFormat[/** RGB compressed format, 4 bits per pixel. */ "ETC2_RGB"] = 13] = "ETC2_RGB";
-    TextureFormat[TextureFormat[/** RGBA compressed format, 5 bits per pixel, 4 bit in RGB, 1 bit in A. */ "ETC2_RGBA5"] = 14] = "ETC2_RGBA5";
-    TextureFormat[TextureFormat[/** RGB compressed format, 8 bits per pixel. */ "ETC2_RGBA8"] = 15] = "ETC2_RGBA8";
-    TextureFormat[TextureFormat[/** RGB compressed format, 2 bits per pixel. */ "PVRTC_RGB2"] = 16] = "PVRTC_RGB2";
-    TextureFormat[TextureFormat[/** RGBA compressed format, 2 bits per pixel. */ "PVRTC_RGBA2"] = 17] = "PVRTC_RGBA2";
-    TextureFormat[TextureFormat[/** RGB compressed format, 4 bits per pixel. */ "PVRTC_RGB4"] = 18] = "PVRTC_RGB4";
-    TextureFormat[TextureFormat[/** RGBA compressed format, 4 bits per pixel. */ "PVRTC_RGBA4"] = 19] = "PVRTC_RGBA4";
-    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 4x4 pixel block. */ "ASTC_4x4"] = 20] = "ASTC_4x4";
-    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 5x5 pixel block. */ "ASTC_5x5"] = 21] = "ASTC_5x5";
-    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 6x6 pixel block. */ "ASTC_6x6"] = 22] = "ASTC_6x6";
-    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 8x8 pixel block. */ "ASTC_8x8"] = 23] = "ASTC_8x8";
-    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 10x10 pixel block. */ "ASTC_10x10"] = 24] = "ASTC_10x10";
-    TextureFormat[TextureFormat[/** RGB(A) compressed format, 128 bits per 12x12 pixel block. */ "ASTC_12x12"] = 25] = "ASTC_12x12";
-    TextureFormat[TextureFormat[/** Automatic depth format, engine will automatically select the supported precision. */ "Depth"] = 26] = "Depth";
-    TextureFormat[TextureFormat[/** Automatic depth stencil format, engine will automatically select the supported precision. */ "DepthStencil"] = 27] = "DepthStencil";
-    TextureFormat[TextureFormat[/** 16-bit depth format. */ "Depth16"] = 28] = "Depth16";
-    TextureFormat[TextureFormat[/** 24-bit depth format. */ "Depth24"] = 29] = "Depth24";
-    TextureFormat[TextureFormat[/** 32-bit depth format. */ "Depth32"] = 30] = "Depth32";
-    TextureFormat[TextureFormat[/** 16-bit depth + 8-bit stencil format. */ "Depth24Stencil8"] = 31] = "Depth24Stencil8";
-    TextureFormat[TextureFormat[/** 32-bit depth + 8-bit stencil format. */ "Depth32Stencil8"] = 32] = "Depth32Stencil8";
-    TextureFormat[TextureFormat[/** @deprecated Use `TextureFormat.BC1` instead. */ "DXT1"] = 33] = "DXT1";
-    TextureFormat[TextureFormat[/** @deprecated Use `TextureFormat.BC3` instead. */ "DXT5"] = 34] = "DXT5";
-})(exports.TextureFormat || (exports.TextureFormat = {}));
-
 /**
  * Texture usage.
  */ exports.TextureUsage = void 0;
@@ -8131,7 +7830,7 @@ var /**
         _this._mipmapCount = _this._getMipmapCount();
         _this._isDepthTexture = format == exports.TextureFormat.Depth || format == exports.TextureFormat.DepthStencil || format == exports.TextureFormat.Depth16 || format == exports.TextureFormat.Depth24 || format == exports.TextureFormat.Depth32 || format == exports.TextureFormat.Depth24Stencil8 || format == exports.TextureFormat.Depth32Stencil8;
         _this._platformTexture = engine._hardwareRenderer.createPlatformTexture2D(_assert_this_initialized(_this));
-        _this.filterMode = exports.TextureFilterMode.Bilinear;
+        _this.filterMode = _this._isIntFormat() ? exports.TextureFilterMode.Point : exports.TextureFilterMode.Bilinear;
         _this.wrapModeU = _this.wrapModeV = exports.TextureWrapMode.Repeat;
         return _this;
     }
@@ -9930,6 +9629,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);
@@ -9967,6 +9670,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
@@ -9988,6 +9692,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) {
@@ -10102,6 +9819,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
@@ -10231,6 +9966,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 = engineMath.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;
@@ -10291,6 +10110,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 engineMath.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 engineMath.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;
@@ -10692,7 +10640,7 @@ var PrimitiveType;
             var theta = thetaStart + u * thetaRange;
             var sinTheta = Math.sin(theta);
             var cosTheta = Math.cos(theta);
-            var curRadius = radius - y * radius;
+            var curRadius = radius - v * radius;
             var posX = curRadius * sinTheta;
             var posY = y * unitHeight - halfHeight;
             var posZ = curRadius * cosTheta;
@@ -10826,8 +10774,8 @@ var PrimitiveType;
             indices[indicesOffset++] = d;
             indices[indicesOffset++] = c;
         }
-        PrimitiveMesh._createCapsuleCap(radius, height, radialSegments, thetaRange, torsoVertexCount, 1, vertices, indices, indicesOffset);
-        PrimitiveMesh._createCapsuleCap(radius, height, radialSegments, -thetaRange, torsoVertexCount + capVertexCount, -1, vertices, indices, indicesOffset + 6 * capRectangleCount);
+        PrimitiveMesh._createCapsuleCap(radius, height, radialSegments, thetaStart, thetaRange, torsoVertexCount, 1, vertices, indices, indicesOffset);
+        PrimitiveMesh._createCapsuleCap(radius, height, radialSegments, thetaStart, -thetaRange, torsoVertexCount + capVertexCount, -1, vertices, indices, indicesOffset + 6 * capRectangleCount);
         if (!isRestoreMode) {
             var bounds = capsuleMesh.bounds;
             bounds.min.set(-radius, -radius - halfHeight, -radius);
@@ -10868,7 +10816,7 @@ var PrimitiveType;
         }
         return indices;
     };
-    PrimitiveMesh._createCapsuleCap = function _createCapsuleCap(radius, height, radialSegments, capAlphaRange, offset, posIndex, vertices, indices, indicesOffset) {
+    PrimitiveMesh._createCapsuleCap = function _createCapsuleCap(radius, height, radialSegments, thetaStart, thetaRange, offset, posIndex, vertices, indices, indicesOffset) {
         var radialCount = radialSegments + 1;
         var halfHeight = height * 0.5 * posIndex;
         var capVertexCount = radialCount * radialCount;
@@ -10881,12 +10829,12 @@ var PrimitiveType;
             var y = i * radialCountReciprocal | 0;
             var u = x * radialSegmentsReciprocal;
             var v = y * radialSegmentsReciprocal;
-            var alphaDelta = u * capAlphaRange;
-            var thetaDelta = v * Math.PI / 2;
-            var sinTheta = Math.sin(thetaDelta);
-            var posX = -radius * Math.cos(alphaDelta) * sinTheta;
-            var posY = radius * Math.cos(thetaDelta) * posIndex + halfHeight;
-            var posZ = radius * Math.sin(alphaDelta) * sinTheta;
+            var theta = thetaStart + u * thetaRange;
+            var alpha = v * Math.PI * 0.5;
+            var sinAlpha = Math.sin(alpha);
+            var posX = radius * Math.sin(theta) * sinAlpha;
+            var posY = radius * Math.cos(alpha) * posIndex + halfHeight;
+            var posZ = radius * Math.cos(theta) * sinAlpha;
             var index = (i + offset) * vertexFloatCount;
             // Position
             vertices[index++] = posX;
@@ -10920,29 +10868,91 @@ var PrimitiveType;
 (function() {
     PrimitiveMesh._tempVec30 = new engineMath.Vector3();
 })();
-
-/**
- * Mesh skin data, equal glTF skins define
- */ var Skin = /*#__PURE__*/ function(EngineObject1) {
-    _inherits(Skin, EngineObject1);
-    function Skin(name) {
-        var _this;
-        _this = EngineObject1.call(this, null) || this;
-        _this.name = name;
-        _this._bones = [];
-        _this.inverseBindMatrices = []; // inverse bind matrix array
-        _this.joints = []; // joints name array, element type: string
-        _this.skeleton = "none"; // root bone name
-        return _this;
-    }
-    return Skin;
-}(EngineObject);
-
-/**
- * SkinnedMeshRenderer.
- */ var SkinnedMeshRenderer = /*#__PURE__*/ function(MeshRenderer1) {
-    _inherits(SkinnedMeshRenderer, MeshRenderer1);
-    function SkinnedMeshRenderer(entity) {
+(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
+ */ var Skin = /*#__PURE__*/ function(EngineObject1) {
+    _inherits(Skin, EngineObject1);
+    function Skin(name) {
+        var _this;
+        _this = EngineObject1.call(this, null) || this;
+        _this.name = name;
+        _this._bones = [];
+        _this.inverseBindMatrices = []; // inverse bind matrix array
+        _this.joints = []; // joints name array, element type: string
+        _this.skeleton = "none"; // root bone name
+        return _this;
+    }
+    return Skin;
+}(EngineObject);
+
+/**
+ * SkinnedMeshRenderer.
+ */ var SkinnedMeshRenderer = /*#__PURE__*/ function(MeshRenderer1) {
+    _inherits(SkinnedMeshRenderer, MeshRenderer1);
+    function SkinnedMeshRenderer(entity) {
         var _this;
         _this = MeshRenderer1.call(this, entity) || this;
         _this._localBounds = new engineMath.BoundingBox();
@@ -11383,7 +11393,9 @@ var Basic2DBatcher = /*#__PURE__*/ function() {
         this._batchedQueue = null;
         var _this = this, meshes = _this._meshes, vertexBuffers = _this._vertexBuffers, indiceBuffers = _this._indiceBuffers;
         for(var i = 0, n = meshes.length; i < n; ++i){
-            meshes[i].destroy();
+            var mesh = meshes[i];
+            mesh._addReferCount(-1);
+            mesh.destroy();
         }
         this._meshes = null;
         for(var i1 = 0, n1 = vertexBuffers.length; i1 < n1; ++i1){
@@ -11406,7 +11418,7 @@ var Basic2DBatcher = /*#__PURE__*/ function() {
     _proto._createMesh = function _createMesh(engine, index) {
         var MAX_VERTEX_COUNT = Basic2DBatcher.MAX_VERTEX_COUNT;
         var mesh = new BufferMesh(engine, "BufferMesh" + index);
-        mesh.isGCIgnored = true;
+        mesh._addReferCount(1);
         var vertexElements = [];
         var vertexStride = this.createVertexElements(vertexElements);
         // vertices
@@ -11464,8 +11476,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, exports.SetDataOptions.Discard);
+        this._indiceBuffers[_flushId].setData(indices, 0, 0, indiceIndex, exports.SetDataOptions.Discard);
     };
     _proto._getSubMeshFromPool = function _getSubMeshFromPool(start, count) {
         var subMesh = this._subMeshPool.getFromPool();
@@ -12495,6 +12509,9 @@ var /**
 __decorate([
     assignmentClone
 ], SpriteMask.prototype, "influenceLayers", void 0);
+__decorate([
+    ignoreClone
+], SpriteMask.prototype, "_verticesData", void 0);
 __decorate([
     ignoreClone
 ], SpriteMask.prototype, "_sprite", void 0);
@@ -12778,8 +12795,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);
                     }
                 }
             }
@@ -12900,6 +12917,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;
@@ -12934,6 +12954,7 @@ var /**
         }
         if (top !== -1 && bottom !== -1) {
             ascent = baseline - top;
+            // Baseline belong to descent
             descent = bottom - baseline + 1;
             size = ascent + descent;
         }
@@ -13009,6 +13030,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";
 })();
@@ -13099,7 +13124,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, exports.TextureFormat.R8G8B8A8, false);
+        texture.filterMode = exports.TextureFilterMode.Bilinear;
         fontAtlas.texture = texture;
         fontAtlas.isGCIgnored = texture.isGCIgnored = true;
         this._fontAtlases.push(fontAtlas);
@@ -13337,7 +13363,7 @@ var /**
     /**
    * @internal
    */ _proto._render = function _render(context) {
-        if (this._text === "" || this.enableWrapping && this.width <= 0 || this.overflowMode === exports.OverflowMode.Truncate && this.height <= 0) {
+        if (this._isTextNoVisible()) {
             return;
         }
         if (this._isContainDirtyFlag(0x10)) {
@@ -13429,8 +13455,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;
@@ -13498,7 +13524,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);
@@ -13539,6 +13565,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 === exports.OverflowMode.Truncate && this.height <= 0;
+    };
     _create_class(TextRenderer, [
         {
             key: "color",
@@ -13741,6 +13770,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();
@@ -14762,6 +14801,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";
@@ -15147,6 +15187,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);
@@ -15350,6 +15391,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) : [];
@@ -15442,10 +15485,20 @@ var /** @internal */ PromiseState;
     };
     _proto._parseURL = function _parseURL(path) {
         var _path_split = path.split("?"), baseUrl = _path_split[0], searchStr = _path_split[1];
-        var searchParams = new URLSearchParams(searchStr);
-        var queryPath = searchParams.get("q");
-        searchParams.delete("q");
-        var assetBaseURL = searchParams.size > 0 ? baseUrl + "?" + searchParams.toString() : baseUrl;
+        var queryPath = undefined;
+        var assetBaseURL = baseUrl;
+        if (searchStr) {
+            var params = searchStr.split("&");
+            for(var i = 0; i < params.length; i++){
+                var param = params[i];
+                if (param.startsWith("q=")) {
+                    queryPath = decodeURIComponent(param.split("=")[1]);
+                    params.splice(i, 1);
+                    break;
+                }
+            }
+            assetBaseURL = params.length > 0 ? baseUrl + "?" + params.join("&") : baseUrl;
+        }
         return {
             assetBaseURL: assetBaseURL,
             queryPath: queryPath
@@ -15729,6 +15782,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",
@@ -15747,6 +15860,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();
 
 /**
@@ -15977,7 +16093,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 = [];
@@ -15985,17 +16101,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;
     /**
@@ -16047,35 +16157,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;
@@ -16090,12 +16173,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;
 }();
 
@@ -16398,7 +16499,9 @@ var Collision = function Collision() {
         };
         if (hitResult != undefined) {
             var result = this._nativePhysicsScene.raycast(ray, distance, onRaycast, function(idx, distance, position, normal) {
-                hitResult.entity = _this._scene.engine._physicalObjectsMap[idx]._collider.entity;
+                var hitShape = _this._scene.engine._physicalObjectsMap[idx];
+                hitResult.entity = hitShape._collider.entity;
+                hitResult.shape = hitShape;
                 hitResult.distance = distance;
                 hitResult.normal.copyFrom(normal);
                 hitResult.point.copyFrom(position);
@@ -16407,6 +16510,7 @@ var Collision = function Collision() {
                 return true;
             } else {
                 hitResult.entity = null;
+                hitResult.shape = null;
                 hitResult.distance = 0;
                 hitResult.point.set(0, 0, 0);
                 hitResult.normal.set(0, 0, 0);
@@ -17068,6 +17172,7 @@ exports.DynamicColliderConstraints = void 0;
     /** The distance from the ray's origin to the impact point. */ this.distance = 0;
     /** The impact point in world space where the ray hit the collider. */ this.point = new engineMath.Vector3();
     /** The normal of the surface the ray hit. */ this.normal = new engineMath.Vector3();
+    /** The shape of the collider that was hit. */ this.shape = null;
 };
 
 /**
@@ -18059,7 +18164,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 = exports.PointerButton.None;
@@ -18068,16 +18173,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;
     /**
@@ -18147,7 +18254,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 = exports.PointerPhase.Down;
                             pointer._firePointerDown(rayCastEntity);
@@ -18169,66 +18277,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) {
@@ -18311,6 +18367,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() {
@@ -18327,15 +18403,12 @@ __decorate([
  * Wheel Manager.
  * @internal
  */ var WheelManager = /*#__PURE__*/ function() {
-    function WheelManager(engine) {
+    function WheelManager(engine, target) {
         /** @internal */ this._delta = new engineMath.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;
     /**
@@ -18356,35 +18429,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;
@@ -18393,19 +18455,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;
         }
     }
@@ -18518,8 +18580,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();
@@ -18528,16 +18588,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",
@@ -18580,6 +18630,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;
@@ -18914,8 +18966,9 @@ var unlitVs = "#define GLSLIFY 1\n#include <common>\n#include <common_vert>\n#in
             }
             return;
         }
+        ++hierarchy;
         for(var k1 in cacheMap){
-            this._recursiveDestroy(++hierarchy, cacheMap[k1]);
+            this._recursiveDestroy(hierarchy, cacheMap[k1]);
         }
     };
     _proto._resizeCacheMapHierarchy = function _resizeCacheMapHierarchy(cacheMap, hierarchy, currentHierarchy, increaseHierarchy) {
@@ -19033,7 +19086,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();
@@ -19049,11 +19102,11 @@ ShaderPool.init();
         }
         var meshMagentaMaterial = new Material(_assert_this_initialized(_this), Shader.find("unlit"));
         meshMagentaMaterial.isGCIgnored = true;
-        meshMagentaMaterial.shaderData.setColor("material_BaseColor", new Color(1.0, 0.0, 1.01, 1.0));
+        meshMagentaMaterial.shaderData.setColor("material_BaseColor", new engineMath.Color(1.0, 0.0, 1.01, 1.0));
         _this._meshMagentaMaterial = meshMagentaMaterial;
         var particleMagentaMaterial = new Material(_assert_this_initialized(_this), Shader.find("particle-shader"));
         particleMagentaMaterial.isGCIgnored = true;
-        particleMagentaMaterial.shaderData.setColor("material_BaseColor", new Color(1.0, 0.0, 1.01, 1.0));
+        particleMagentaMaterial.shaderData.setColor("material_BaseColor", new engineMath.Color(1.0, 0.0, 1.01, 1.0));
         _this._particleMagentaMaterial = particleMagentaMaterial;
         var innerSettings = _this._settings;
         var colorSpace = configuration.colorSpace || exports.ColorSpace.Linear;
@@ -19327,6 +19380,26 @@ ShaderPool.init();
         this._magentaTexture2D = magentaTexture2D;
         this._magentaTextureCube = magentaTextureCube;
         if (hardwareRenderer.isWebGL2) {
+            var magentaPixel32 = new Uint32Array([
+                255,
+                0,
+                255,
+                255
+            ]);
+            var uintMagentaTexture2D = new Texture2D(this, 1, 1, exports.TextureFormat.R32G32B32A32_UInt, false);
+            uintMagentaTexture2D.setPixelBuffer(magentaPixel32);
+            uintMagentaTexture2D.isGCIgnored = true;
+            this.resourceManager.addContentRestorer(new /*#__PURE__*/ (function(ContentRestorer) {
+                _inherits(_class, ContentRestorer);
+                function _class() {
+                    return ContentRestorer.call(this, uintMagentaTexture2D);
+                }
+                var _proto = _class.prototype;
+                _proto.restoreContent = function restoreContent() {
+                    this.resource.setPixelBuffer(magentaPixel32);
+                };
+                return _class;
+            }(ContentRestorer))());
             var magentaTexture2DArray = new Texture2DArray(this, 1, 1, 1, exports.TextureFormat.R8G8B8A8, false);
             magentaTexture2DArray.setPixelBuffer(0, magentaPixel);
             magentaTexture2DArray.isGCIgnored = true;
@@ -19341,6 +19414,7 @@ ShaderPool.init();
                 };
                 return _class;
             }(ContentRestorer))());
+            this._uintMagentaTexture2D = uintMagentaTexture2D;
             this._magentaTexture2DArray = magentaTexture2DArray;
         }
     };
@@ -19573,8 +19647,8 @@ ShaderPool.init();
             set: function set(value) {
                 if (this._width !== value) {
                     this._width = value;
+                    this._onWidthChanged(value);
                     this._sizeUpdateFlagManager.dispatch();
-                    this._onSizeChanged(value, this._width);
                 }
             }
         },
@@ -19588,8 +19662,8 @@ ShaderPool.init();
             set: function set(value) {
                 if (this._height !== value) {
                     this._height = value;
+                    this._onHeightChange(value);
                     this._sizeUpdateFlagManager.dispatch();
-                    this._onSizeChanged(this._width, value);
                 }
             }
         }
@@ -20944,6 +21018,10 @@ __decorate([
         /** The splits of two cascade distribution. */ _this.shadowTwoCascadeSplits = 1.0 / 3.0;
         /** The splits of four cascade distribution. */ _this.shadowFourCascadeSplits = new engineMath.Vector3(1.0 / 15, 3.0 / 15.0, 7.0 / 15.0);
         /** Max Shadow distance. */ _this.shadowDistance = 50;
+        /**
+   * Last shadow fade distance in percentage, range [0,1].
+   * @remarks Value 0 is used for no shadow fade.
+   */ _this.shadowFadeBorder = 0.1;
         /* @internal */ _this._lightManager = new LightManager();
         /* @internal */ _this._componentsManager = new ComponentsManager();
         /** @internal */ _this._isActiveInEngine = false;
@@ -21568,47 +21646,66 @@ __decorate([
     DepthTextureMode[DepthTextureMode[/* Generate depth texture by pre-pass rendering. */ "PrePass"] = 1] = "PrePass";
 })(exports.DepthTextureMode || (exports.DepthTextureMode = {}));
 
-var passNum = 0;
 /**
- * RenderPass.
- */ var RenderPass = /*#__PURE__*/ function() {
-    function RenderPass(name, priority, renderTarget, replaceMaterial, mask) {
-        if (name === void 0) name = "RENDER_PASS" + passNum++;
-        if (priority === void 0) priority = 0;
-        if (renderTarget === void 0) renderTarget = null;
-        if (replaceMaterial === void 0) replaceMaterial = null;
-        if (mask === void 0) mask = null;
-        this.name = name;
-        this.enabled = true;
-        this.priority = priority;
-        this.renderTarget = renderTarget;
-        this.replaceMaterial = replaceMaterial;
-        this.mask = mask || exports.Layer.Everything;
-        this.renderOverride = false; // If renderOverride is set to true, you need to implement the render method
-    }
-    var _proto = RenderPass.prototype;
-    /**
-   * Rendering callback, will be executed if renderOverride is set to true.
-   * @param camera - Camera
-   * @param opaqueQueue - Opaque queue
-   * @param alphaTestQueue - Alpha test queue
-   * @param transparentQueue - Transparent queue
-   */ _proto.render = function render(camera, opaqueQueue, alphaTestQueue, transparentQueue) {};
+ * PipelinePass is a base class for all pipeline passes.
+ */ var PipelinePass = function PipelinePass(engine) {
+    this._engine = engine;
+};
+
+/**
+ * @internal
+ */ var PipelineUtils = /*#__PURE__*/ function() {
+    function PipelineUtils() {}
     /**
-   * Post rendering callback.
-   * @param camera - Camera
-   * @param opaqueQueue - Opaque queue
-   * @param alphaTestQueue - Alpha test queue
-   * @param transparentQueue - Transparent queue
-   */ _proto.preRender = function preRender(camera, opaqueQueue, alphaTestQueue, transparentQueue) {};
+   * Recreate texture if needed.
+   * @param engine - Engine
+   * @param currentTexture - Current texture
+   * @param width - Need texture width
+   * @param height - Need texture height
+   * @param format - Need texture format
+   * @param mipmap - Need texture mipmap
+   * @returns Texture
+   */ PipelineUtils.recreateTextureIfNeeded = function recreateTextureIfNeeded(engine, currentTexture, width, height, format, mipmap) {
+        if (currentTexture) {
+            if (currentTexture.width !== width || currentTexture.height !== height || currentTexture.format !== format || currentTexture.mipmapCount > 1 !== mipmap) {
+                currentTexture.destroy();
+                var texture = new Texture2D(engine, width, height, format, mipmap);
+                texture.isGCIgnored = true;
+                return texture;
+            } else {
+                return currentTexture;
+            }
+        } else {
+            var texture1 = new Texture2D(engine, width, height, format, mipmap);
+            texture1.isGCIgnored = true;
+            return texture1;
+        }
+    };
     /**
-   * Post rendering callback.
-   * @param camera - Camera
-   * @param opaqueQueue - Opaque queue
-   * @param alphaTestQueue - Alpha test queue
-   * @param transparentQueue - Transparent queue
-   */ _proto.postRender = function postRender(camera, opaqueQueue, alphaTestQueue, transparentQueue) {};
-    return RenderPass;
+   * Recreate render target if needed.
+   * @param engine - Engine
+   * @param currentRenderTarget - Current render target
+   * @param width - Need render target width
+   * @param height - Need render target height
+   * @param colorFormat - Need render target color format
+   * @param depthFormat - Need render target depth format
+   * @param mipmap - Need render target mipmap
+   * @returns Render target
+   */ PipelineUtils.recreateRenderTargetIfNeeded = function recreateRenderTargetIfNeeded(engine, currentRenderTarget, width, height, colorFormat, depthFormat, mipmap) {
+        var _currentRenderTarget, _currentRenderTarget1;
+        var currentColorTexture = (_currentRenderTarget = currentRenderTarget) == null ? void 0 : _currentRenderTarget.getColorTexture(0);
+        var currentDepthTexture = (_currentRenderTarget1 = currentRenderTarget) == null ? void 0 : _currentRenderTarget1.depthTexture;
+        var colorTexture = colorFormat ? PipelineUtils.recreateTextureIfNeeded(engine, currentColorTexture, width, height, colorFormat, mipmap) : null;
+        var depthTexture = depthFormat ? PipelineUtils.recreateTextureIfNeeded(engine, currentDepthTexture, width, height, depthFormat, mipmap) : null;
+        if (currentColorTexture !== colorTexture || currentDepthTexture !== depthTexture) {
+            var _currentRenderTarget2;
+            (_currentRenderTarget2 = currentRenderTarget) == null ? void 0 : _currentRenderTarget2.destroy();
+            currentRenderTarget = new RenderTarget(engine, width, height, colorTexture, depthTexture);
+            currentRenderTarget.isGCIgnored = true;
+        }
+        return currentRenderTarget;
+    };
+    return PipelineUtils;
 }();
 
 /**
@@ -21869,70 +21966,93 @@ 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;
+        } 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;
+        } else {
+            var distanceDiff = componentB._distanceForSort - componentA._distanceForSort;
+            if (distanceDiff === 0) {
+                return componentA.instanceId - componentB.instanceId;
+            } else {
+                return distanceDiff;
+            }
+        }
     };
     return RenderQueue;
 }();
 
+var passNum = 0;
 /**
- * @internal
- */ var PipelineUtils = /*#__PURE__*/ function() {
-    function PipelineUtils() {}
+ * RenderPass.
+ */ var RenderPass = /*#__PURE__*/ function() {
+    function RenderPass(name, priority, renderTarget, replaceMaterial, mask) {
+        if (name === void 0) name = "RENDER_PASS" + passNum++;
+        if (priority === void 0) priority = 0;
+        if (renderTarget === void 0) renderTarget = null;
+        if (replaceMaterial === void 0) replaceMaterial = null;
+        if (mask === void 0) mask = null;
+        this.name = name;
+        this.enabled = true;
+        this.priority = priority;
+        this.renderTarget = renderTarget;
+        this.replaceMaterial = replaceMaterial;
+        this.mask = mask || exports.Layer.Everything;
+        this.renderOverride = false; // If renderOverride is set to true, you need to implement the render method
+    }
+    var _proto = RenderPass.prototype;
     /**
-   * Recreate texture if needed.
-   * @param engine - Engine
-   * @param currentTexture - Current texture
-   * @param width - Need texture width
-   * @param height - Need texture height
-   * @param format - Need texture format
-   * @param mipmap - Need texture mipmap
-   * @returns Texture
-   */ PipelineUtils.recreateTextureIfNeeded = function recreateTextureIfNeeded(engine, currentTexture, width, height, format, mipmap) {
-        if (currentTexture) {
-            if (currentTexture.width !== width || currentTexture.height !== height || currentTexture.format !== format || currentTexture.mipmapCount > 1 !== mipmap) {
-                currentTexture.destroy();
-                var texture = new Texture2D(engine, width, height, format, mipmap);
-                texture.isGCIgnored = true;
-                return texture;
-            } else {
-                return currentTexture;
-            }
-        } else {
-            var texture1 = new Texture2D(engine, width, height, format, mipmap);
-            texture1.isGCIgnored = true;
-            return texture1;
-        }
-    };
+   * Rendering callback, will be executed if renderOverride is set to true.
+   * @param camera - Camera
+   * @param opaqueQueue - Opaque queue
+   * @param alphaTestQueue - Alpha test queue
+   * @param transparentQueue - Transparent queue
+   */ _proto.render = function render(camera, opaqueQueue, alphaTestQueue, transparentQueue) {};
     /**
-   * Recreate render target if needed.
-   * @param engine - Engine
-   * @param currentRenderTarget - Current render target
-   * @param width - Need render target width
-   * @param height - Need render target height
-   * @param colorFormat - Need render target color format
-   * @param depthFormat - Need render target depth format
-   * @param mipmap - Need render target mipmap
-   * @returns Render target
-   */ PipelineUtils.recreateRenderTargetIfNeeded = function recreateRenderTargetIfNeeded(engine, currentRenderTarget, width, height, colorFormat, depthFormat, mipmap) {
-        var _currentRenderTarget, _currentRenderTarget1;
-        var currentColorTexture = (_currentRenderTarget = currentRenderTarget) == null ? void 0 : _currentRenderTarget.getColorTexture(0);
-        var currentDepthTexture = (_currentRenderTarget1 = currentRenderTarget) == null ? void 0 : _currentRenderTarget1.depthTexture;
-        var colorTexture = colorFormat ? PipelineUtils.recreateTextureIfNeeded(engine, currentColorTexture, width, height, colorFormat, mipmap) : null;
-        var depthTexture = depthFormat ? PipelineUtils.recreateTextureIfNeeded(engine, currentDepthTexture, width, height, depthFormat, mipmap) : null;
-        if (currentColorTexture !== colorTexture || currentDepthTexture !== depthTexture) {
-            var _currentRenderTarget2;
-            (_currentRenderTarget2 = currentRenderTarget) == null ? void 0 : _currentRenderTarget2.destroy();
-            currentRenderTarget = new RenderTarget(engine, width, height, colorTexture, depthTexture);
-            currentRenderTarget.isGCIgnored = true;
-        }
-        return currentRenderTarget;
-    };
-    return PipelineUtils;
+   * Post rendering callback.
+   * @param camera - Camera
+   * @param opaqueQueue - Opaque queue
+   * @param alphaTestQueue - Alpha test queue
+   * @param transparentQueue - Transparent queue
+   */ _proto.preRender = function preRender(camera, opaqueQueue, alphaTestQueue, transparentQueue) {};
+    /**
+   * Post rendering callback.
+   * @param camera - Camera
+   * @param opaqueQueue - Opaque queue
+   * @param alphaTestQueue - Alpha test queue
+   * @param transparentQueue - Transparent queue
+   */ _proto.postRender = function postRender(camera, opaqueQueue, alphaTestQueue, transparentQueue) {};
+    return RenderPass;
 }();
 
 /**
@@ -22200,6 +22320,26 @@ var /**
         var offset = cascadeIndex * 16;
         Utils._floatMatrixMultiply(sliceMatrix, outShadowMatrices, offset, outShadowMatrices, offset);
     };
+    /**
+   * Extract scale and bias from a fade distance to achieve a linear fading of the fade distance.
+   */ ShadowUtils.getScaleAndBiasForLinearDistanceFade = function getScaleAndBiasForLinearDistanceFade(fadeDistance, border, outInfo) {
+        // (P^2-N^2)/(F^2-N^2)
+        // To avoid division from zero
+        // This values ensure that fade within cascade will be 0 and outside 1
+        if (border < 0.0001) {
+            var multiplier = 1000; // To avoid blending if difference is in fractions
+            outInfo.z = multiplier;
+            outInfo.w = -fadeDistance * multiplier;
+            return;
+        }
+        border = 1 - border;
+        border *= border;
+        // Fade with distance calculation is just a linear fade from 90% of fade distance to fade distance. 90% arbitrarily chosen but should work well enough.
+        var distanceFadeNear = border * fadeDistance;
+        var fadeRange = fadeDistance - distanceFadeNear;
+        outInfo.z = 1.0 / fadeRange;
+        outInfo.w = -distanceFadeNear / fadeRange;
+    };
     return ShadowUtils;
 }();
 (function() {
@@ -22444,12 +22584,6 @@ var /**
     ShadowUtils.atlasBorderSize = 4.0;
 })();
 
-/**
- * PipelinePass is a base class for all pipeline passes.
- */ var PipelinePass = function PipelinePass(engine) {
-    this._engine = engine;
-};
-
 /**
  * Cascade shadow caster pass.
  */ var CascadedShadowCasterPass = /*#__PURE__*/ function(PipelinePass1) {
@@ -22462,11 +22596,10 @@ var /**
         _this._shadowSliceData = new ShadowSliceData();
         _this._lightUp = new engineMath.Vector3();
         _this._lightSide = new engineMath.Vector3();
-        _this._existShadowMap = false;
         _this._splitBoundSpheres = new Float32Array(CascadedShadowCasterPass._maxCascades * 4);
         /** The end is project precision problem in shader. */ _this._shadowMatrices = new Float32Array((CascadedShadowCasterPass._maxCascades + 1) * 16);
-        // strength, null, lightIndex
-        _this._shadowInfos = new engineMath.Vector3();
+        // intensity, null, fadeScale, fadeBias
+        _this._shadowInfos = new engineMath.Vector4();
         _this._viewportOffsets = [
             new engineMath.Vector2(),
             new engineMath.Vector2(),
@@ -22482,14 +22615,12 @@ var /**
     /**
    * @internal
    */ _proto.onRender = function onRender(context) {
+        var light = this._camera.scene._lightManager._sunlight;
         this._updateShadowSettings();
-        this._existShadowMap = false;
-        this._renderDirectShadowMap(context);
-        if (this._existShadowMap) {
-            this._updateReceiversShaderData();
-        }
+        this._renderDirectShadowMap(context, light);
+        this._updateReceiversShaderData(light);
     };
-    _proto._renderDirectShadowMap = function _renderDirectShadowMap(context) {
+    _proto._renderDirectShadowMap = function _renderDirectShadowMap(context, light) {
         var _this = this, engine = _this._engine, camera = _this._camera, viewports = _this._viewportOffsets, shadowSliceData = _this._shadowSliceData, splitBoundSpheres = _this._splitBoundSpheres, shadowMatrices = _this._shadowMatrices;
         var _camera__renderPipeline__cullingResults = camera._renderPipeline._cullingResults, opaqueQueue = _camera__renderPipeline__cullingResults.opaqueQueue, alphaTestQueue = _camera__renderPipeline__cullingResults.alphaTestQueue, transparentQueue = _camera__renderPipeline__cullingResults.transparentQueue;
         var scene = camera.scene;
@@ -22503,91 +22634,87 @@ var /**
         var lightUp = this._lightUp;
         var lightSide = this._lightSide;
         var lightForward = shadowSliceData.virtualCamera.forward;
-        var light = scene._lightManager._sunlight;
-        if (light) {
-            var shadowFar = Math.min(camera.scene.shadowDistance, camera.farClipPlane);
-            this._getCascadesSplitDistance(shadowFar);
-            // Prepare render target
-            var _this__shadowMapSize = this._shadowMapSize, width = _this__shadowMapSize.z, height = _this__shadowMapSize.w;
-            var format = this._shadowMapFormat;
-            var renderTarget;
-            var shadowTexture;
-            if (this._supportDepthTexture) {
-                renderTarget = PipelineUtils.recreateRenderTargetIfNeeded(engine, this._renderTarget, width, height, null, format, false);
-                shadowTexture = renderTarget.depthTexture;
-            } else {
-                renderTarget = PipelineUtils.recreateRenderTargetIfNeeded(engine, this._renderTarget, width, height, format, null, false);
-                shadowTexture = renderTarget.getColorTexture(0);
-            }
-            shadowTexture.wrapModeU = shadowTexture.wrapModeV = exports.TextureWrapMode.Clamp;
-            if (engine._hardwareRenderer._isWebGL2) {
-                shadowTexture.depthCompareFunction = exports.TextureDepthCompareFunction.Less;
-            }
-            this._renderTarget = renderTarget;
-            this._depthTexture = shadowTexture;
-            // @todo: shouldn't set viewport and scissor in activeRenderTarget
-            rhi.activeRenderTarget(renderTarget, CascadedShadowCasterPass._viewport, 0);
-            if (this._supportDepthTexture) {
-                rhi.clearRenderTarget(engine, exports.CameraClearFlags.Depth, null);
-            } else {
-                rhi.clearRenderTarget(engine, exports.CameraClearFlags.All, CascadedShadowCasterPass._clearColor);
-            }
-            this._shadowInfos.x = light.shadowStrength;
-            this._shadowInfos.z = 0; // @todo: sun light index always 0
-            // prepare light and camera direction
-            engineMath.Matrix.rotationQuaternion(light.entity.transform.worldRotationQuaternion, lightWorld);
-            lightSide.set(lightWorldE[0], lightWorldE[1], lightWorldE[2]);
-            lightUp.set(lightWorldE[4], lightWorldE[5], lightWorldE[6]);
-            lightForward.set(-lightWorldE[8], -lightWorldE[9], -lightWorldE[10]);
-            var cameraForward = CascadedShadowCasterPass._tempVector;
-            cameraForward.copyFrom(camera.entity.transform.worldForward);
-            var shadowTileResolution = this._shadowTileResolution;
-            for(var j = 0; j < shadowCascades; j++){
-                ShadowUtils.getBoundSphereByFrustum(splitDistance[j], splitDistance[j + 1], camera, cameraForward, shadowSliceData);
-                ShadowUtils.getDirectionLightShadowCullPlanes(camera._frustum, splitDistance[j], camera.nearClipPlane, lightForward, shadowSliceData);
-                ShadowUtils.getDirectionalLightMatrices(lightUp, lightSide, lightForward, j, light.shadowNearPlane, shadowTileResolution, shadowSliceData, shadowMatrices);
-                if (shadowCascades > 1) {
-                    ShadowUtils.applySliceTransform(shadowTileResolution, width, height, j, this._viewportOffsets[j], shadowMatrices);
-                }
-                this._updateSingleShadowCasterShaderData(light, shadowSliceData, context);
-                // upload pre-cascade infos.
-                var center = boundSphere.center;
-                var radius = boundSphere.radius;
-                var offset = j * 4;
-                splitBoundSpheres[offset] = center.x;
-                splitBoundSpheres[offset + 1] = center.y;
-                splitBoundSpheres[offset + 2] = center.z;
-                splitBoundSpheres[offset + 3] = radius * radius;
-                opaqueQueue.clear();
-                alphaTestQueue.clear();
-                transparentQueue.clear();
-                var renderers = componentsManager._renderers;
-                var elements = renderers._elements;
-                for(var k = renderers.length - 1; k >= 0; --k){
-                    ShadowUtils.shadowCullFrustum(context, light, elements[k], shadowSliceData);
-                }
-                if (opaqueQueue.elements.length || alphaTestQueue.elements.length) {
-                    opaqueQueue.sort(RenderQueue._compareFromNearToFar);
-                    alphaTestQueue.sort(RenderQueue._compareFromNearToFar);
-                    var _viewports_j = viewports[j], x = _viewports_j.x, y = _viewports_j.y;
-                    rhi.setGlobalDepthBias(1.0, 1.0);
-                    rhi.viewport(x, y, shadowTileResolution, shadowTileResolution);
-                    // for no cascade is for the edge,for cascade is for the beyond maxCascade pixel can use (0,0,0) trick sample the shadowMap
-                    rhi.scissor(x + 1, y + 1, shadowTileResolution - 2, shadowTileResolution - 2);
-                    engine._renderCount++;
-                    opaqueQueue.render(camera, exports.Layer.Everything, exports.PipelineStage.ShadowCaster);
-                    alphaTestQueue.render(camera, exports.Layer.Everything, exports.PipelineStage.ShadowCaster);
-                    rhi.setGlobalDepthBias(0, 0);
-                }
-            }
-            this._existShadowMap = true;
-        }
-    };
-    _proto._updateReceiversShaderData = function _updateReceiversShaderData() {
-        var scene = this._camera.scene;
+        // Prepare render target
+        var _this__shadowMapSize = this._shadowMapSize, width = _this__shadowMapSize.z, height = _this__shadowMapSize.w;
+        var format = this._shadowMapFormat;
+        var renderTarget;
+        var shadowTexture;
+        if (this._supportDepthTexture) {
+            renderTarget = PipelineUtils.recreateRenderTargetIfNeeded(engine, this._renderTarget, width, height, null, format, false);
+            shadowTexture = renderTarget.depthTexture;
+        } else {
+            renderTarget = PipelineUtils.recreateRenderTargetIfNeeded(engine, this._renderTarget, width, height, format, null, false);
+            shadowTexture = renderTarget.getColorTexture(0);
+        }
+        shadowTexture.wrapModeU = shadowTexture.wrapModeV = exports.TextureWrapMode.Clamp;
+        if (engine._hardwareRenderer._isWebGL2) {
+            shadowTexture.depthCompareFunction = exports.TextureDepthCompareFunction.Less;
+        }
+        this._renderTarget = renderTarget;
+        this._depthTexture = shadowTexture;
+        // @todo: shouldn't set viewport and scissor in activeRenderTarget
+        rhi.activeRenderTarget(renderTarget, CascadedShadowCasterPass._viewport, 0);
+        if (this._supportDepthTexture) {
+            rhi.clearRenderTarget(engine, exports.CameraClearFlags.Depth, null);
+        } else {
+            rhi.clearRenderTarget(engine, exports.CameraClearFlags.All, CascadedShadowCasterPass._clearColor);
+        }
+        // prepare light and camera direction
+        engineMath.Matrix.rotationQuaternion(light.entity.transform.worldRotationQuaternion, lightWorld);
+        lightSide.set(lightWorldE[0], lightWorldE[1], lightWorldE[2]);
+        lightUp.set(lightWorldE[4], lightWorldE[5], lightWorldE[6]);
+        lightForward.set(-lightWorldE[8], -lightWorldE[9], -lightWorldE[10]);
+        var cameraForward = CascadedShadowCasterPass._tempVector;
+        cameraForward.copyFrom(camera.entity.transform.worldForward);
+        var shadowTileResolution = this._shadowTileResolution;
+        for(var j = 0; j < shadowCascades; j++){
+            ShadowUtils.getBoundSphereByFrustum(splitDistance[j], splitDistance[j + 1], camera, cameraForward, shadowSliceData);
+            ShadowUtils.getDirectionLightShadowCullPlanes(camera._frustum, splitDistance[j], camera.nearClipPlane, lightForward, shadowSliceData);
+            ShadowUtils.getDirectionalLightMatrices(lightUp, lightSide, lightForward, j, light.shadowNearPlane, shadowTileResolution, shadowSliceData, shadowMatrices);
+            if (shadowCascades > 1) {
+                ShadowUtils.applySliceTransform(shadowTileResolution, width, height, j, this._viewportOffsets[j], shadowMatrices);
+            }
+            this._updateSingleShadowCasterShaderData(light, shadowSliceData, context);
+            // upload pre-cascade infos.
+            var center = boundSphere.center;
+            var radius = boundSphere.radius;
+            var offset = j * 4;
+            splitBoundSpheres[offset] = center.x;
+            splitBoundSpheres[offset + 1] = center.y;
+            splitBoundSpheres[offset + 2] = center.z;
+            splitBoundSpheres[offset + 3] = radius * radius;
+            opaqueQueue.clear();
+            alphaTestQueue.clear();
+            transparentQueue.clear();
+            var renderers = componentsManager._renderers;
+            var elements = renderers._elements;
+            for(var k = renderers.length - 1; k >= 0; --k){
+                ShadowUtils.shadowCullFrustum(context, light, elements[k], shadowSliceData);
+            }
+            if (opaqueQueue.elements.length || alphaTestQueue.elements.length) {
+                opaqueQueue.sort(RenderQueue._compareFromNearToFar);
+                alphaTestQueue.sort(RenderQueue._compareFromNearToFar);
+                var _viewports_j = viewports[j], x = _viewports_j.x, y = _viewports_j.y;
+                rhi.setGlobalDepthBias(1.0, 1.0);
+                rhi.viewport(x, y, shadowTileResolution, shadowTileResolution);
+                // for no cascade is for the edge,for cascade is for the beyond maxCascade pixel can use (0,0,0) trick sample the shadowMap
+                rhi.scissor(x + 1, y + 1, shadowTileResolution - 2, shadowTileResolution - 2);
+                engine._renderCount++;
+                opaqueQueue.render(camera, exports.Layer.Everything, exports.PipelineStage.ShadowCaster);
+                alphaTestQueue.render(camera, exports.Layer.Everything, exports.PipelineStage.ShadowCaster);
+                rhi.setGlobalDepthBias(0, 0);
+            }
+        }
+    };
+    _proto._updateReceiversShaderData = function _updateReceiversShaderData(light) {
+        var camera = this._camera;
+        var scene = camera.scene;
         var splitBoundSpheres = this._splitBoundSpheres;
         var shadowMatrices = this._shadowMatrices;
         var shadowCascades = scene.shadowCascades;
+        var shadowFar = Math.min(scene.shadowDistance, camera.farClipPlane);
+        ShadowUtils.getScaleAndBiasForLinearDistanceFade(Math.pow(shadowFar, 2), scene.shadowFadeBorder, this._shadowInfos);
+        this._shadowInfos.x = light.shadowStrength;
         // set zero matrix to project the index out of max cascade
         if (shadowCascades > 1) {
             for(var i = shadowCascades * 4, n = splitBoundSpheres.length; i < n; i++){
@@ -22600,7 +22727,7 @@ var /**
         }
         var shaderData = scene.shaderData;
         shaderData.setFloatArray(CascadedShadowCasterPass._shadowMatricesProperty, this._shadowMatrices);
-        shaderData.setVector3(CascadedShadowCasterPass._shadowInfosProperty, this._shadowInfos);
+        shaderData.setVector4(CascadedShadowCasterPass._shadowInfosProperty, this._shadowInfos);
         shaderData.setTexture(CascadedShadowCasterPass._shadowMapsProperty, this._depthTexture);
         shaderData.setFloatArray(CascadedShadowCasterPass._shadowSplitSpheresProperty, this._splitBoundSpheres);
         shaderData.setVector4(CascadedShadowCasterPass._shadowMapSize, this._shadowMapSize);
@@ -22636,10 +22763,13 @@ var /**
         return Math.sqrt(radius * radius / denominator);
     };
     _proto._updateShadowSettings = function _updateShadowSettings() {
-        var scene = this._camera.scene;
+        var camera = this._camera;
+        var scene = camera.scene;
         var shadowFormat = ShadowUtils.shadowDepthFormat(scene.shadowResolution, this._supportDepthTexture);
         var shadowResolution = ShadowUtils.shadowResolution(scene.shadowResolution);
         var shadowCascades = scene.shadowCascades;
+        var shadowFar = Math.min(scene.shadowDistance, camera.farClipPlane);
+        this._getCascadesSplitDistance(shadowFar);
         if (shadowFormat !== this._shadowMapFormat || shadowResolution !== this._shadowMapResolution || shadowCascades !== this._shadowCascadeMode) {
             this._shadowMapFormat = shadowFormat;
             this._shadowMapResolution = shadowResolution;
@@ -23087,14 +23217,14 @@ exports.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 engineMath.Vector4();
@@ -23106,7 +23236,7 @@ exports.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();
@@ -23118,16 +23248,22 @@ exports.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.
@@ -23257,10 +23393,9 @@ exports.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.
@@ -23309,13 +23444,16 @@ exports.Camera = (_Camera = /*#__PURE__*/ function(Component1) {
         //@ts-ignore
         this._viewport._onValueChanged = null;
         this.engine.canvas._sizeUpdateFlagManager.removeListener(this._onPixelViewportChanged);
+        //@ts-ignore
+        this._viewport._onValueChanged = null;
+        this.engine.canvas._sizeUpdateFlagManager.removeListener(this._onPixelViewportChanged);
         this._entity = null;
         this._globalShaderMacro = null;
         this._frustum = null;
         this._renderPipeline = null;
         this._virtualCamera = null;
         this._shaderData = null;
-        this._frustumViewChangeFlag = null;
+        this._frustumChangeFlag = null;
         this._transform = null;
         this._isViewMatrixDirty = null;
         this._isInvViewProjDirty = null;
@@ -23337,11 +23475,16 @@ exports.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.
@@ -23384,7 +23527,7 @@ exports.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, [
         {
@@ -23404,7 +23547,7 @@ exports.Camera = (_Camera = /*#__PURE__*/ function(Component1) {
             },
             set: function set(value) {
                 this._nearClipPlane = value;
-                this._projMatChange();
+                this._projectionMatrixChange();
             }
         },
         {
@@ -23416,7 +23559,7 @@ exports.Camera = (_Camera = /*#__PURE__*/ function(Component1) {
             },
             set: function set(value) {
                 this._farClipPlane = value;
-                this._projMatChange();
+                this._projectionMatrixChange();
             }
         },
         {
@@ -23428,7 +23571,7 @@ exports.Camera = (_Camera = /*#__PURE__*/ function(Component1) {
             },
             set: function set(value) {
                 this._fieldOfView = value;
-                this._projMatChange();
+                this._projectionMatrixChange();
             }
         },
         {
@@ -23443,7 +23586,7 @@ exports.Camera = (_Camera = /*#__PURE__*/ function(Component1) {
             },
             set: function set(value) {
                 this._customAspectRatio = value;
-                this._projMatChange();
+                this._projectionMatrixChange();
             }
         },
         {
@@ -23495,7 +23638,12 @@ exports.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");
+                }
             }
         },
         {
@@ -23507,7 +23655,7 @@ exports.Camera = (_Camera = /*#__PURE__*/ function(Component1) {
             },
             set: function set(value) {
                 this._orthographicSize = value;
-                this._projMatChange();
+                this._projectionMatrixChange();
             }
         },
         {
@@ -23516,22 +23664,31 @@ exports.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;
-                    engineMath.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;
+                engineMath.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;
@@ -23545,13 +23702,10 @@ exports.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();
             }
         },
         {
@@ -23612,7 +23766,7 @@ __decorate([
 ], exports.Camera.prototype, "_cameraIndex", void 0);
 __decorate([
     ignoreClone
-], exports.Camera.prototype, "_frustumViewChangeFlag", void 0);
+], exports.Camera.prototype, "_frustumChangeFlag", void 0);
 __decorate([
     ignoreClone
 ], exports.Camera.prototype, "_transform", void 0);
@@ -23799,6 +23953,7 @@ var MultiExecutor = /*#__PURE__*/ function() {
    * @param obj - class object
    */ Loader.registerClass = function registerClass(className, classDefine) {
         this._engineObjects[className] = classDefine;
+        this._classNameMap.set(classDefine, className);
     };
     /**
    * Get the class object by class name.
@@ -23807,11 +23962,21 @@ var MultiExecutor = /*#__PURE__*/ function() {
    */ Loader.getClass = function getClass(className) {
         return this._engineObjects[className];
     };
+    /**
+   * Get the class name by class object.
+   * @param obj - class object
+   * @returns class name
+   */ Loader.getClassName = function getClassName(obj) {
+        return this._classNameMap.get(obj);
+    };
     return Loader;
 }();
 (function() {
     Loader._engineObjects = {};
 })();
+(function() {
+    Loader._classNameMap = new Map();
+})();
 
 /**
  * Alpha blend mode.
@@ -25245,6 +25410,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;
@@ -25272,11 +25438,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();
@@ -26833,26 +27001,31 @@ exports.AnimatorLayerBlendingMode = void 0;
         }
     };
     _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++;
@@ -27463,9 +27636,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;
     /**
@@ -27539,6 +27714,11 @@ __decorate([
             index2 !== -1 && this._onStateExitScripts.splice(index2, 1);
         }
     };
+    /**
+   * @internal
+   */ _proto._onClipChanged = function _onClipChanged() {
+        this._updateFlagManager.dispatch();
+    };
     _create_class(AnimatorState, [
         {
             key: "transitions",
@@ -27556,8 +27736,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 && clip._updateFlagManager.addListener(this._onClipChanged);
             }
         },
         {
@@ -28264,6 +28453,7 @@ __decorate([
     ParticleRandomSubSeeds[ParticleRandomSubSeeds["RotationOverLifetime"] = 0x40eb95e4] = "RotationOverLifetime";
     ParticleRandomSubSeeds[ParticleRandomSubSeeds["TextureSheetAnimation"] = 0xbc524e5] = "TextureSheetAnimation";
     ParticleRandomSubSeeds[ParticleRandomSubSeeds["Shape"] = 0xaf502044] = "Shape";
+    ParticleRandomSubSeeds[ParticleRandomSubSeeds["GravityModifier"] = 0xa47b8c4d] = "GravityModifier";
 })(ParticleRandomSubSeeds || (ParticleRandomSubSeeds = {}));
 
 /**
@@ -28977,6 +29167,7 @@ var MainModule = /*#__PURE__*/ function() {
         /** @internal */ this._startColorRand = new engineMath.Rand(0, ParticleRandomSubSeeds.StartColor);
         /** @internal */ this._startSizeRand = new engineMath.Rand(0, ParticleRandomSubSeeds.StartSize);
         /** @internal */ this._startRotationRand = new engineMath.Rand(0, ParticleRandomSubSeeds.StartRotation);
+        this._gravityModifierRand = new engineMath.Rand(0, ParticleRandomSubSeeds.GravityModifier);
         this._gravity = new engineMath.Vector3();
         this._generator = generator;
     }
@@ -29037,7 +29228,7 @@ var MainModule = /*#__PURE__*/ function() {
                 break;
         }
         var particleGravity = this._gravity;
-        var gravityModifierValue = this.gravityModifier.evaluate(undefined, undefined);
+        var gravityModifierValue = this.gravityModifier.evaluate(undefined, this._gravityModifierRand.random());
         engineMath.Vector3.scale(renderer.scene.physics.gravity, gravityModifierValue, particleGravity);
         shaderData.setVector3(MainModule._gravity, particleGravity);
         shaderData.setInt(MainModule._simulationSpace, this.simulationSpace);
@@ -29156,6 +29347,9 @@ __decorate([
 __decorate([
     ignoreClone
 ], MainModule.prototype, "_startRotationRand", void 0);
+__decorate([
+    ignoreClone
+], MainModule.prototype, "_gravityModifierRand", void 0);
 __decorate([
     ignoreClone
 ], MainModule.prototype, "_generator", void 0);
@@ -29826,7 +30020,8 @@ __decorate([
             var transform = this._renderer.entity.transform;
             var shape = this.emission.shape;
             for(var i = 0; i < count; i++){
-                if (shape) {
+                var _shape;
+                if ((_shape = shape) == null ? void 0 : _shape.enabled) {
                     shape._generatePositionAndDirection(this.emission._shapeRand, time, position, direction);
                     var positionScale = this.main._getPositionScale();
                     position.multiply(positionScale);
@@ -30406,7 +30601,7 @@ __decorate([
  * Base class for all particle shapes.
  */ var BaseShape = /*#__PURE__*/ function() {
     function BaseShape() {
-        /** Specifies whether the ShapeModule is enabled or disabled. */ this.enable = true;
+        /** Specifies whether the ShapeModule is enabled or disabled. */ this.enabled = true;
         /** Randomizes the starting direction of particles. */ this.randomDirectionAmount = 0;
     }
     var _proto = BaseShape.prototype;
@@ -30470,14 +30665,14 @@ __decorate([
 
 /**
  * The emission shape.
- */ var ParticleShapeType;
+ */ exports.ParticleShapeType = void 0;
 (function(ParticleShapeType) {
     ParticleShapeType[ParticleShapeType[/** Emit from the volume of a box. */ "Box"] = 0] = "Box";
     ParticleShapeType[ParticleShapeType[/** Emit from a circle. */ "Circle"] = 1] = "Circle";
     ParticleShapeType[ParticleShapeType[/** Emit from the base of a cone. */ "Cone"] = 2] = "Cone";
     ParticleShapeType[ParticleShapeType[/** Emit from a half-sphere. */ "Hemisphere"] = 3] = "Hemisphere";
     ParticleShapeType[ParticleShapeType[/** Emit from a sphere. */ "Sphere"] = 4] = "Sphere";
-})(ParticleShapeType || (ParticleShapeType = {}));
+})(exports.ParticleShapeType || (exports.ParticleShapeType = {}));
 
 /**
  * Particle shape that emits particles from a box.
@@ -30485,9 +30680,9 @@ __decorate([
     _inherits(BoxShape, BaseShape1);
     function BoxShape() {
         var _this;
-        _this = BaseShape1.call(this) || this;
+        _this = BaseShape1.apply(this, arguments) || this;
+        _this.shapeType = exports.ParticleShapeType.Box;
         /** The size of the box. */ _this.size = new engineMath.Vector3(1, 1, 1);
-        _this.shapeType = ParticleShapeType.Box;
         return _this;
     }
     var _proto = BoxShape.prototype;
@@ -30524,12 +30719,12 @@ __decorate([
     _inherits(CircleShape, BaseShape1);
     function CircleShape() {
         var _this;
-        _this = BaseShape1.call(this) || this;
+        _this = BaseShape1.apply(this, arguments) || this;
+        _this.shapeType = exports.ParticleShapeType.Circle;
         /** Radius of the shape to emit particles from. */ _this.radius = 1.0;
         /** Angle of the circle arc to emit particles from. */ _this.arc = 360.0;
         /** The mode to generate particles around the arc. */ _this.arcMode = exports.ParticleShapeArcMode.Random;
         /** The speed of complete 360 degree rotation. */ _this.arcSpeed = 1.0;
-        _this.shapeType = ParticleShapeType.Circle;
         return _this;
     }
     var _proto = CircleShape.prototype;
@@ -30565,12 +30760,12 @@ __decorate([
     _inherits(ConeShape, BaseShape1);
     function ConeShape() {
         var _this;
-        _this = BaseShape1.call(this) || this;
+        _this = BaseShape1.apply(this, arguments) || this;
+        _this.shapeType = exports.ParticleShapeType.Cone;
         /** Angle of the cone to emit particles from. */ _this.angle = 25.0;
         /** Radius of the shape to emit particles from. */ _this.radius = 1.0;
         /** Length of the cone to emit particles from. */ _this.length = 5.0;
         /** Cone emitter type. */ _this.emitType = /** Emit particles from the base of the cone. */ 0;
-        _this.shapeType = ParticleShapeType.Cone;
         return _this;
     }
     var _proto = ConeShape.prototype;
@@ -30630,9 +30825,9 @@ exports.ConeEmitType = void 0;
     _inherits(HemisphereShape, BaseShape1);
     function HemisphereShape() {
         var _this;
-        _this = BaseShape1.call(this) || this;
+        _this = BaseShape1.apply(this, arguments) || this;
+        _this.shapeType = exports.ParticleShapeType.Hemisphere;
         /** Radius of the shape to emit particles from. */ _this.radius = 1.0;
-        _this.shapeType = ParticleShapeType.Hemisphere;
         return _this;
     }
     var _proto = HemisphereShape.prototype;
@@ -30655,9 +30850,9 @@ exports.ConeEmitType = void 0;
     _inherits(SphereShape, BaseShape1);
     function SphereShape() {
         var _this;
-        _this = BaseShape1.call(this) || this;
+        _this = BaseShape1.apply(this, arguments) || this;
+        _this.shapeType = exports.ParticleShapeType.Sphere;
         /** Radius of the shape to emit particles from. */ _this.radius = 1.0;
-        _this.shapeType = ParticleShapeType.Sphere;
         return _this;
     }
     var _proto = SphereShape.prototype;