Merge branch 'main' into dev/1.6

2026-05-06 22:23:05 +08:00 · 2025-08-19 11:40:46 +08:00
parent a6af0d5f00 0a11d5b32b
commit f9f00cdec1
38 changed files with 1165 additions and 172 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 tmp
 .idea
 /node_modules
+/*/node_modules
 /packages/*/node_modules
 /packages/*/types
 /packages/*/doc
--- a/examples/index.html
+++ b/examples/index.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en" class="w-full h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Galacean Playground</title>
+    <link rel="icon" href="https://mdn.alipayobjects.com/huamei_dc3kgb/afts/img/A*yHe-TqU1TOkAAAAAAAAAAAAADuiaAQ/original" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              'galacean': {
+                50: '#f0f9ff',
+                100: '#e0f2fe',
+                500: '#0ea5e9',
+                600: '#0284c7',
+                700: '#0369a1',
+                900: '#0c4a6e'
+              }
+            },
+            fontFamily: {
+              'sans': ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif']
+            }
+          }
+        }
+      }
+    </script>
+    <style>
+      /* Custom styles */
+      .search-input {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236b7280'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' /%3e%3c/svg%3e");
+        background-position: 12px center;
+        background-repeat: no-repeat;
+        background-size: 16px 16px;
+      }
+
+      .item-list .hide {
+        height: 0 !important;
+        opacity: 0;
+        overflow: hidden;
+      }
+
+      .item-list a.active {
+        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
+      }
+
+      .item-list a.active .demo-item {
+        background: transparent !important;
+      }
+
+      .item-list a.active .demo-item span {
+        color: white !important;
+      }
+
+      .item-list a.active .demo-item .w-2 {
+        background-color: white !important;
+      }
+
+      .sidebar-gradient {
+        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+        border-right: 1px solid #e2e8f0;
+      }
+
+      .category-title {
+        background: linear-gradient(135deg, #64748b 0%, #475569 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      .demo-item {
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .demo-item:hover {
+        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .fullscreen-btn {
+        transition: all 0.2s ease;
+        filter: grayscale(1);
+      }
+
+      .fullscreen-btn:hover {
+        filter: grayscale(0);
+        transform: scale(1.1);
+      }
+    </style>
+  </head>
+  <body class="m-0 w-full h-full overflow-hidden font-sans text-slate-800 bg-white antialiased">
+    <div class="flex h-full">
+      <div class="sidebar-gradient w-80 flex flex-col shadow-xl">
+        <div class="px-6 py-6 border-b border-slate-200/60">
+          <div class="flex items-center justify-between mb-6">
+            <a class="flex items-center space-x-3 text-slate-900 hover:text-galacean-600 transition-colors duration-200"
+               href="https://galacean.antgroup.com/" target="Home">
+              <div class="w-8 h-8 rounded-lg bg-white flex items-center justify-center shadow-lg">
+                <img
+                  class="w-6 h-6"
+                  src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*ppQsSphM7uUAAAAAAAAAAAAADtKFAQ/original"
+                  alt="Galacean Logo"
+                />
+              </div>
+              <div>
+                <h1 class="text-lg font-semibold tracking-tight">Galacean</h1>
+                <p class="text-xs text-slate-500 font-medium">Playground</p>
+              </div>
+            </a>
+
+            <button
+              id="fullScreen"
+              class="fullscreen-btn w-9 h-9 rounded-lg bg-white border border-slate-200 flex items-center justify-center hover:bg-slate-50 hover:border-slate-300 shadow-sm"
+              title="Open in fullscreen"
+            >
+              <img
+                class="w-4 h-4"
+                src="https://mdn.alipayobjects.com/huamei_dmxymu/afts/img/A*lmbpRpr9QugAAAAAAAAAAAAADuuHAQ/original"
+                alt="Fullscreen"
+              />
+            </button>
+          </div>
+
+          <div class="relative">
+            <input
+              placeholder="Search examples..."
+              class="search-input w-full pl-10 pr-4 py-3 bg-white border border-slate-200 rounded-xl text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-galacean-500 focus:border-transparent shadow-sm transition-all duration-200"
+              id="searchBar"
+              autocorrect="off"
+              autocapitalize="off"
+              spellcheck="false"
+            />
+          </div>
+        </div>
+        <div class="item-list flex-1 overflow-y-auto px-4 py-4" id="itemList">
+        </div>
+      </div>
+
+      <div class="flex-1 bg-slate-50">
+        <iframe
+          id="iframe"
+          allowfullscreen
+          src=""
+          frameborder="0"
+          class="w-full h-full bg-white shadow-inner"
+        ></iframe>
+      </div>
+    </div>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
--- a/examples/index.js
+++ b/examples/index.js
@@ -0,0 +1,120 @@
+import demoList from "./dist/.demoList.json";
+const itemListDOM = document.getElementById("itemList");
+const searchBarDOM = document.getElementById("searchBar");
+const fullScreenDOM = document.getElementById("fullScreen");
+const iframe = document.getElementById("iframe");
+const items = []; // itemDOM,label
+
+Object.keys(demoList).forEach((group, groupIndex) => {
+  const demos = demoList[group];
+  const groupDOM = document.createElement("div");
+  const titleDOM = document.createElement("div");
+  const demosDOM = document.createElement("div");
+
+  // Create modern category title
+  titleDOM.innerHTML = `
+    <div class="flex items-center space-x-2 mb-3">
+      <div class="w-1 h-4 bg-gradient-to-b from-galacean-500 to-galacean-700 rounded-full"></div>
+      <h3 class="category-title text-sm font-semibold uppercase tracking-wider">${group}</h3>
+    </div>
+  `;
+
+  // Add spacing between groups
+  if (groupIndex > 0) {
+    groupDOM.classList.add("mt-6");
+  }
+
+  itemListDOM.appendChild(groupDOM);
+  groupDOM.appendChild(titleDOM);
+  groupDOM.appendChild(demosDOM);
+
+  // Style the demos container
+  demosDOM.classList.add("space-y-1", "mb-4");
+
+  demos.forEach((item) => {
+    const { label, src } = item;
+    const itemDOM = document.createElement("a");
+
+    itemDOM.innerHTML = `
+      <div class="flex items-center space-x-3 p-3 rounded-lg demo-item group">
+        <div class="w-2 h-2 rounded-full bg-slate-300 group-hover:bg-galacean-500 transition-colors duration-200"></div>
+        <span class="text-sm font-medium text-slate-700 group-hover:text-slate-900">${label}</span>
+      </div>
+    `;
+
+    itemDOM.title = `${src}`;
+    itemDOM.classList.add(
+      "block",
+      "cursor-pointer",
+      "transition-all",
+      "duration-200",
+      "overflow-hidden",
+      "no-underline",
+      "rounded-lg"
+    );
+
+    itemDOM.onclick = function () {
+      clickItem(itemDOM);
+    };
+    demosDOM.appendChild(itemDOM);
+
+    items.push({
+      itemDOM,
+      label,
+      src
+    });
+  });
+});
+
+searchBarDOM.oninput = () => {
+  updateFilter(searchBarDOM.value);
+};
+
+fullScreenDOM.onclick = () => {
+  const itemName = location.hash.split("#dist/")[1];
+
+  if (itemName) {
+    location.href = location.origin + `/dist/${itemName}.html`;
+  }
+};
+
+function updateFilter(value) {
+  const reg = new RegExp(value, "i");
+
+  items.forEach(({ itemDOM, label, src }) => {
+    reg.lastIndex = 0;
+    if (reg.test(label) || reg.test(src)) {
+      itemDOM.classList.remove("hide");
+    } else {
+      itemDOM.classList.add("hide");
+    }
+  });
+}
+
+function clickItem(itemDOM) {
+  window.location.hash = `#dist/${itemDOM.title}`;
+}
+
+function onHashChange() {
+  const hashPath = window.location.hash.split("#")[1];
+  if (!hashPath) {
+    clickItem(items[0].itemDOM);
+    return;
+  }
+
+  iframe.src = hashPath + ".html";
+
+  items.forEach(({ itemDOM }) => {
+    const itemPath = `dist/${itemDOM.title}`;
+    if (itemPath === hashPath) {
+      itemDOM.classList.add("active");
+    } else {
+      itemDOM.classList.remove("active");
+    }
+  });
+}
+
+window.onhashchange = onHashChange;
+
+// init
+onHashChange();
--- a/examples/package.json
+++ b/examples/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@galacean/engine-examples",
+  "version": "1.5.10",
+  "private": true,
+  "license": "MIT",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "types/index.d.ts",
+  "debug": "src/index.ts",
+  "scripts": {
+    "b:types": "tsc",
+    "dev": "vite serve . --config vite.config.js"
+  },
+  "dependencies": {
+    "@galacean/engine": "workspace:*",
+    "@galacean/engine-core": "workspace:*",
+    "@galacean/engine-design": "workspace:*",
+    "@galacean/engine-loader": "workspace:*",
+    "@galacean/engine-math": "workspace:*",
+    "@galacean/engine-physics-lite": "workspace:*",
+    "@galacean/engine-rhi-webgl": "workspace:*",
+    "@galacean/engine-shader-shaderlab": "workspace:*",
+    "@galacean/engine-shaderlab": "workspace:*",
+    "@galacean/engine-toolkit": "latest",
+    "@galacean/engine-ui": "workspace:*"
+  },
+  "devDependencies": {
+    "dat.gui": "^0.7.9",
+    "vite": "^4.4.4"
+  }
+}
--- a/examples/src/CSS-DOM.ts
+++ b/examples/src/CSS-DOM.ts
@@ -13,7 +13,7 @@ import {
  Script,
  Vector3,
  WebGLEngine,
-  WebGLMode,
+  WebGLMode
 } from "@galacean/engine";
 import { OrbitControl } from "@galacean/engine-toolkit";

@@ -22,7 +22,7 @@ async function main() {
  const htmlCanvas = document.getElementById("canvas") as HTMLCanvasElement;
  const engine = await WebGLEngine.create({
    canvas: htmlCanvas,
-    graphicDeviceOptions: { webGLMode: WebGLMode.Auto },
+    graphicDeviceOptions: { webGLMode: WebGLMode.Auto }
  });

  engine.canvas.resizeByClientSize();
@@ -47,10 +47,7 @@ async function main() {
  // Add dom element
  const dom = document.createElement("div");
  dom.innerHTML = "Hello world!!!";
-  dom.setAttribute(
-    "style",
-    "padding:10px;position:absolute;top:0;left:0;background:white;border-radius:5px"
-  );
+  dom.setAttribute("style", "padding:10px;position:absolute;top:0;left:0;background:white;border-radius:5px");
  document.body.appendChild(dom);

  // Add script
@@ -81,10 +78,7 @@ class LocationTrackingScript extends Script {

  onUpdate() {
    // Convert world coordinates to screen coordinates
-    this.camera.worldToScreenPoint(
-      this.entity.transform.position,
-      this.screenPoint
-    );
+    this.camera.worldToScreenPoint(this.entity.transform.position, this.screenPoint);
    const style = this.dom.style;
    style.left = `${this.screenPoint.x / this.widthRatio}px`;
    style.top = `${this.screenPoint.y / this.heightRatio}px`;
--- a/examples/src/buffer-mesh-independent.ts
+++ b/examples/src/buffer-mesh-independent.ts
@@ -19,7 +19,7 @@ import {
  VertexElement,
  VertexElementFormat,
  WebGLEngine,
-  Script,
+  Script
 } from "@galacean/engine";

 /**
@@ -101,11 +101,7 @@ async function main() {
 * @param size - Cube size
 * @returns Cube mesh
 */
-function createCustomMesh(
-  engine: Engine,
-  size: number,
-  randomColorScript: RandomColorScript
-): Mesh {
+function createCustomMesh(engine: Engine, size: number, randomColorScript: RandomColorScript): Mesh {
  const cubeMesh = new BufferMesh(engine, "CustomCubeMesh");

  // Create vertices position and normal data.
@@ -145,24 +141,9 @@ function createCustomMesh(
          20, 22, 23, 22, 20, 21]);

  // Create gpu vertex buffer and index buffer.
-  const posNorBuffer = new Buffer(
-    engine,
-    BufferBindFlag.VertexBuffer,
-    positionNormals,
-    BufferUsage.Static
-  );
-  const independentColorBuffer = new Buffer(
-    engine,
-    BufferBindFlag.VertexBuffer,
-    colorData,
-    BufferUsage.Dynamic
-  );
-  const indexBuffer = new Buffer(
-    engine,
-    BufferBindFlag.IndexBuffer,
-    indices,
-    BufferUsage.Static
-  );
+  const posNorBuffer = new Buffer(engine, BufferBindFlag.VertexBuffer, positionNormals, BufferUsage.Static);
+  const independentColorBuffer = new Buffer(engine, BufferBindFlag.VertexBuffer, colorData, BufferUsage.Dynamic);
+  const indexBuffer = new Buffer(engine, BufferBindFlag.IndexBuffer, indices, BufferUsage.Static);

  // Bind buffer.
  cubeMesh.setVertexBufferBinding(posNorBuffer, 24, 0);
@@ -173,7 +154,7 @@ function createCustomMesh(
  cubeMesh.setVertexElements([
    new VertexElement("POSITION", 0, VertexElementFormat.Vector3, 0),
    new VertexElement("NORMAL", 12, VertexElementFormat.Vector3, 0),
-    new VertexElement("COLOR_0", 0, VertexElementFormat.Vector3, 1),
+    new VertexElement("COLOR_0", 0, VertexElementFormat.Vector3, 1)
  ]);

  // Add one sub geometry.
--- a/examples/src/buffer-mesh-instance.ts
+++ b/examples/src/buffer-mesh-instance.ts
@@ -3,7 +3,7 @@
 * @category Mesh
 * @thumbnail https://mdn.alipayobjects.com/merchant_appfe/afts/img/A*jjZMTrp-vU8AAAAAAAAAAAAADiR2AQ/original
 */
-import { OrbitControl } from "@galacean/engine-toolkit-controls";
+import { OrbitControl } from "@galacean/engine-toolkit";
 import {
  Buffer,
  BufferBindFlag,
@@ -19,7 +19,7 @@ import {
  Vector3,
  VertexElement,
  VertexElementFormat,
-  WebGLEngine,
+  WebGLEngine
 } from "@galacean/engine";

 // Create engine
@@ -81,9 +81,7 @@ function createCustomMesh(engine: Engine, size: number): Mesh {
  // Create instance data.
  const instanceCount = 4000;
  const instanceStride = 6;
-  const instanceData: Float32Array = new Float32Array(
-    instanceCount * instanceStride
-  );
+  const instanceData: Float32Array = new Float32Array(instanceCount * instanceStride);
  for (let i = 0; i < instanceCount; i++) {
    const offset = i * instanceStride;
    // instance offset
@@ -113,24 +111,9 @@ function createCustomMesh(engine: Engine, size: number): Mesh {
          20, 22, 23, 22, 20, 21]);

  // Create gpu vertex buffer and index buffer.
-  const vertexBuffer = new Buffer(
-    engine,
-    BufferBindFlag.VertexBuffer,
-    vertices,
-    BufferUsage.Static
-  );
-  const instanceVertexBuffer = new Buffer(
-    engine,
-    BufferBindFlag.VertexBuffer,
-    instanceData,
-    BufferUsage.Static
-  );
-  const indexBuffer = new Buffer(
-    engine,
-    BufferBindFlag.IndexBuffer,
-    indices,
-    BufferUsage.Static
-  );
+  const vertexBuffer = new Buffer(engine, BufferBindFlag.VertexBuffer, vertices, BufferUsage.Static);
+  const instanceVertexBuffer = new Buffer(engine, BufferBindFlag.VertexBuffer, instanceData, BufferUsage.Static);
+  const indexBuffer = new Buffer(engine, BufferBindFlag.IndexBuffer, indices, BufferUsage.Static);

  // Bind buffer
  geometry.setVertexBufferBinding(vertexBuffer, 24, 0);
@@ -142,7 +125,7 @@ function createCustomMesh(engine: Engine, size: number): Mesh {
    new VertexElement("POSITION", 0, VertexElementFormat.Vector3, 0, 0), // Bind to VertexBuffer 0
    new VertexElement("NORMAL", 12, VertexElementFormat.Vector3, 0, 0), // Bind to VertexBuffer 0
    new VertexElement("INSTANCE_OFFSET", 0, VertexElementFormat.Vector3, 1, 1), // Bind instance offset to VertexBuffer 1, and enable instance by set instanceStepRate with 1
-    new VertexElement("INSTANCE_COLOR", 12, VertexElementFormat.Vector3, 1, 1), // Bind instance color to VertexBuffer 1, and enable instance by set instanceStepRate with 1
+    new VertexElement("INSTANCE_COLOR", 12, VertexElementFormat.Vector3, 1, 1) // Bind instance color to VertexBuffer 1, and enable instance by set instanceStepRate with 1
  ]);

  // Add one sub geometry.
--- a/examples/src/buffer-mesh-interleaved.ts
+++ b/examples/src/buffer-mesh-interleaved.ts
@@ -18,7 +18,7 @@ import {
  Vector3,
  VertexElement,
  VertexElementFormat,
-  WebGLEngine,
+  WebGLEngine
 } from "@galacean/engine";

 // Create engine and get root entity
@@ -93,18 +93,8 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
          20, 22, 23, 22, 20, 21]);

    // Create gpu vertex buffer and index buffer.
-    const vertexBuffer = new Buffer(
-      engine,
-      BufferBindFlag.VertexBuffer,
-      vertices,
-      BufferUsage.Static
-    );
-    const indexBuffer = new Buffer(
-      engine,
-      BufferBindFlag.IndexBuffer,
-      indices,
-      BufferUsage.Static
-    );
+    const vertexBuffer = new Buffer(engine, BufferBindFlag.VertexBuffer, vertices, BufferUsage.Static);
+    const indexBuffer = new Buffer(engine, BufferBindFlag.IndexBuffer, indices, BufferUsage.Static);

    // Bind buffer
    geometry.setVertexBufferBinding(vertexBuffer, 24);
@@ -113,7 +103,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
    // Add vertexElement
    geometry.setVertexElements([
      new VertexElement("POSITION", 0, VertexElementFormat.Vector3, 0),
-      new VertexElement("NORMAL", 12, VertexElementFormat.Vector3, 0),
+      new VertexElement("NORMAL", 12, VertexElementFormat.Vector3, 0)
    ]);

    // Add one sub geometry.
--- a/examples/src/device-restore.ts
+++ b/examples/src/device-restore.ts
@@ -3,14 +3,7 @@
 * @category Advance
 * @thumbnail https://mdn.alipayobjects.com/merchant_appfe/afts/img/A*U3AXS7Iq-AQAAAAAAAAAAAAADiR2AQ/original
 */
-import {
-  Animator,
-  Camera,
-  Color,
-  GLTFResource,
-  Vector3,
-  WebGLEngine,
-} from "@galacean/engine";
+import { Animator, Camera, Color, GLTFResource, Vector3, WebGLEngine } from "@galacean/engine";

 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
  engine.canvas.resizeByClientSize();
--- a/examples/src/gltf-loader.ts
+++ b/examples/src/gltf-loader.ts
@@ -30,7 +30,7 @@ import {
  Vector3,
  WebGLEngine
 } from "@galacean/engine";
-import { OrbitControl } from "@galacean/engine-toolkit-controls";
+import { OrbitControl } from "@galacean/engine-toolkit";
 import * as dat from "dat.gui";

 Logger.enable();
@@ -197,6 +197,7 @@ class Oasis {
    if (!this.state.addLights) {
      this.light1.enabled = this.light2.enabled = false;
    }
+    // @ts-ignore
    this.light1.intensity = this.light2.intensity = this.state.lightIntensity;
    this.lightEntity1.transform.setRotation(30, 0, 0);
    this.lightEntity2.transform.setRotation(-30, 180, 0);
@@ -250,6 +251,7 @@ class Oasis {
    lightFolder
      .add(this.state, "lightIntensity", 0, 2)
      .onChange((v) => {
+        // @ts-ignore
        this.light1.intensity = this.light2.intensity = v;
      })
      .name("直接光强度");
--- a/examples/src/screenshot.ts
+++ b/examples/src/screenshot.ts
@@ -4,7 +4,7 @@
 * @thumbnail https://mdn.alipayobjects.com/merchant_appfe/afts/img/A*0OXcQYHlwzQAAAAAAAAAAAAADiR2AQ/original
 */

-import { OrbitControl } from "@galacean/engine-toolkit-controls";
+import { OrbitControl } from "@galacean/engine-toolkit";
 import * as dat from "dat.gui";
 import {
  AmbientLight,
@@ -15,7 +15,7 @@ import {
  RenderTarget,
  Texture2D,
  Vector3,
-  WebGLEngine,
+  WebGLEngine
 } from "@galacean/engine";

 const gui = new dat.GUI();
@@ -34,9 +34,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {

  // add gltf model
  engine.resourceManager
-    .load<GLTFResource>(
-      "https://gw.alipayobjects.com/os/bmw-prod/5e3c1e4e-496e-45f8-8e05-f89f2bd5e4a4.glb"
-    )
+    .load<GLTFResource>("https://gw.alipayobjects.com/os/bmw-prod/5e3c1e4e-496e-45f8-8e05-f89f2bd5e4a4.glb")
    .then((asset) => {
      const { defaultSceneRoot } = asset;
      rootEntity.addChild(defaultSceneRoot);
@@ -48,7 +46,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
  engine.resourceManager
    .load<AmbientLight>({
      type: AssetType.Env,
-      url: "https://gw.alipayobjects.com/os/bmw-prod/89c54544-1184-45a1-b0f5-c0b17e5c3e68.bin",
+      url: "https://gw.alipayobjects.com/os/bmw-prod/89c54544-1184-45a1-b0f5-c0b17e5c3e68.bin"
    })
    .then((ambientLight) => {
      scene.ambientLight = ambientLight;
@@ -58,14 +56,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
  /** ---------------------------- Capture ---------------------------- */
  let screenshotCanvas: HTMLCanvasElement = null;
  let flipYCanvas: HTMLCanvasElement = null;
-  function screenshot(
-    camera: Camera,
-    width: number,
-    height: number,
-    flipY = false,
-    isPNG = true,
-    jpgQuality = 1
-  ) {
+  function screenshot(camera: Camera, width: number, height: number, flipY = false, isPNG = true, jpgQuality = 1) {
    if (!screenshotCanvas) {
      screenshotCanvas = document.createElement("canvas");
    }
@@ -81,14 +72,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
    const originalTarget = camera.renderTarget;
    const renderColorTexture = new Texture2D(engine, width, height);
    const renderTargetData = new Uint8Array(width * height * 4);
-    const renderTarget = new RenderTarget(
-      engine,
-      width,
-      height,
-      renderColorTexture,
-      undefined,
-      8
-    );
+    const renderTarget = new RenderTarget(engine, width, height, renderColorTexture, undefined, 8);

    // render to off-screen
    camera.renderTarget = renderTarget;
@@ -118,26 +102,23 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
      ctx2.drawImage(screenshotCanvas, 0, 0);
    }

-    // download
+    // open in new window
    canvas.toBlob(
      (blob) => {
        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement("a");

-        document.body.appendChild(a);
-        a.style.display = "none";
-        a.href = url;
-        a.download = "screenshot";
-
-        a.addEventListener("click", () => {
-          if (a.parentElement) {
-            a.parentElement.removeChild(a);
-          }
-        });
-
-        a.click();
-
-        window.URL.revokeObjectURL(url);
+        // Open image in new window
+        const newWindow = window.open(url);
+        if (newWindow) {
+          // Clean up the blob URL after some time
+          setTimeout(() => {
+            window.URL.revokeObjectURL(url);
+          }, 1000);
+        } else {
+          // Fallback: if popup is blocked, clean up immediately
+          window.URL.revokeObjectURL(url);
+          console.warn("Unable to open screenshot in new window. Please allow popups for this site.");
+        }

        // revert
        camera.renderTarget = originalTarget;
@@ -159,7 +140,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
      screenshot: () => {
        const { width, height, flipY, isPNG, jpgQuality } = config;
        screenshot(camera, width, height, flipY, isPNG, jpgQuality);
-      },
+      }
    };

    const configFolder = gui.addFolder("config");
--- a/examples/template/iframe.ejs
+++ b/examples/template/iframe.ejs
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= title %></title>
+    <style>
+      html,
+      body,
+      canvas {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        overflow: hidden;
+        background: black;
+        border: none;
+      }
+
+      .dg.main > ul {
+        overflow: initial;
+      }
+    </style>
+  </head>
+
+  <body>
+    <canvas id="canvas"></canvas>
+    <script type="module" src="<%= url %>"></script>
+    <script>
+      document.oncontextmenu = (e) => {
+        e.preventDefault();
+      };
+    </script>
+  </body>
+</html>
--- a/examples/vite.config.js
+++ b/examples/vite.config.js
@@ -0,0 +1,94 @@
+const path = require("path");
+const fs = require("fs-extra");
+const OUT_PATH = "dist";
+const templateStr = fs.readFileSync(path.join(__dirname, "template/iframe.ejs"), "utf8");
+
+// 替换 ejs 模版格式的字符串，如 <%= title %>: templateStr.replaceEJS("title","replaced title");
+String.prototype.replaceEJS = function (regStr, replaceStr) {
+  return this.replace(new RegExp(`<%=\\s*${regStr}\\s*%>`, "g"), replaceStr);
+};
+
+const out_p = path.join(__dirname, "./");
+console.log(out_p);
+
+const demoList = fs
+  .readdirSync(path.join(__dirname, "./src"))
+  .filter((name) => /.ts$/.test(name))
+  .map((name) => {
+    const content = fs.readFileSync(path.join(__dirname, "./src", name), "utf8");
+    const title = /@title\s+(.+)\b/.exec(content);
+    const category = /@category\s+(.+)\b/.exec(content);
+
+    if (!title || !category) {
+      throw new Error(`title and category must be set in playground[${name}]`);
+    }
+
+    return {
+      title: title[1],
+      category: category[1],
+      file: name.split(".ts")[0]
+    };
+  });
+
+demoList.forEach(({ title, file }) => {
+  const ejs = templateStr.replaceEJS("title", title).replaceEJS("url", `./${file}.ts`);
+
+  fs.outputFileSync(path.resolve(__dirname, OUT_PATH, file + ".ts"), `import "../src/${file}"`);
+  fs.outputFileSync(path.resolve(__dirname, OUT_PATH, file + ".html"), ejs);
+});
+
+// output demolist
+const demoSorted = {};
+demoList.forEach(({ title, category, file }) => {
+  if (!demoSorted[category]) {
+    demoSorted[category] = [];
+  }
+  demoSorted[category].push({
+    src: file,
+    label: title
+  });
+});
+
+fs.outputJSONSync(path.join(__dirname, OUT_PATH, ".demoList.json"), demoSorted);
+
+module.exports = {
+  server: {
+    open: true,
+    host: "0.0.0.0",
+    port: 3000
+  },
+  resolve: {
+    dedupe: ["@galacean/engine"]
+  },
+  optimizeDeps: {
+    exclude: [
+      "@galacean/engine",
+      "@galacean/engine-physics-physx",
+      "@galacean/engine-physics-lite",
+      "@galacean/engine-draco",
+      "@galacean/engine-lottie",
+      "@galacean/engine-spine",
+      "@galacean/engine-shaderlab",
+      "@galacean/engine-shader-shaderlab",
+      "@galacean/engine-ui",
+      "@galacean/engine-xr",
+      "@galacean/engine-xr-webxr",
+      "@galacean/tools-baker",
+      "@galacean/engine-toolkit",
+      "@galacean/engine-toolkit-auxiliary-lines",
+      "@galacean/engine-toolkit-controls",
+      "@galacean/engine-toolkit-framebuffer-picker",
+      "@galacean/engine-toolkit-gizmo",
+      "@galacean/engine-toolkit-lines",
+      "@galacean/engine-toolkit-outline",
+      "@galacean/engine-toolkit-planar-shadow-material",
+      "@galacean/engine-toolkit-skeleton-viewer",
+      "@galacean/engine-toolkit-grid-material",
+      "@galacean/engine-toolkit-navigation-gizmo",
+      "@galacean/engine-toolkit-geometry-sketch",
+      "@galacean/engine-toolkit-stats",
+      "@galacean/engine-toolkit-input-logger",
+      "@galacean/engine-toolkit-custom-material"
+    ]
+  }
+};
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
    "pretest": "vitest --version && playwright install --with-deps chromium",
    "test": "vitest",
    "coverage": "cross-env HEADLESS=true vitest --coverage",
+    "examples": "pnpm --filter @galacean/engine-examples dev",
    "build": "npm run b:module && npm run b:types",
    "lint": "eslint packages/*/src --ext .ts",
    "watch": "cross-env NODE_ENV=release BUILD_TYPE=MODULE rollup -cw -m inline",
--- a/packages/core/src/Camera.ts
+++ b/packages/core/src/Camera.ts
@@ -108,8 +108,10 @@ export class Camera extends Component {
  isAlphaOutputRequired = false;

  /** @internal */
+  @ignoreClone
  _cameraType: CameraType = CameraType.Normal;
  /** @internal */
+  @ignoreClone
  _globalShaderMacro: ShaderMacroCollection = new ShaderMacroCollection();
  /** @internal */
  @deepClone
@@ -118,7 +120,7 @@ export class Camera extends Component {
  @ignoreClone
  _renderPipeline: BasicRenderPipeline;
  /** @internal */
-  @ignoreClone
+  @deepClone
  _virtualCamera: VirtualCamera = new VirtualCamera();
  /** @internal */
  _replacementShader: Shader = null;
@@ -131,7 +133,6 @@ export class Camera extends Component {
  _cameraIndex: number = -1;

  private _priority: number = 0;
-  private _shaderData: ShaderData = new ShaderData(ShaderDataGroup.Camera);
  private _isCustomViewMatrix = false;
  private _isCustomProjectionMatrix = false;
  private _fieldOfView: number = 45;
@@ -139,13 +140,12 @@ export class Camera extends Component {
  private _isProjectionDirty = true;
  private _isInvProjMatDirty: boolean = true;
  private _customAspectRatio: number | undefined = undefined;
-  private _renderTarget: RenderTarget = null;
-  private _depthBufferParams: Vector4 = new Vector4();
  private _opaqueTextureEnabled: boolean = false;
  private _enableHDR = false;
  private _enablePostProcess = false;
  private _msaaSamples: MSAASamples;

+  private _renderTarget: RenderTarget = null;
  @ignoreClone
  private _updateFlagManager: UpdateFlagManager;
  @ignoreClone
@@ -155,6 +155,10 @@ export class Camera extends Component {
  @ignoreClone
  private _isInvViewProjDirty: BoolUpdateFlag;
  @deepClone
+  private _shaderData: ShaderData = new ShaderData(ShaderDataGroup.Camera);
+  @ignoreClone
+  private _depthBufferParams: Vector4 = new Vector4();
+  @deepClone
  private _viewport: Vector4 = new Vector4(0, 0, 1, 1);
  @deepClone
  private _pixelViewport: Rect = new Rect(0, 0, 0, 0);
@@ -820,6 +824,13 @@ export class Camera extends Component {
    this._updateFlagManager?.removeListener(onChange);
  }

+  /**
+   * @internal
+   */
+  _cloneTo(target: Camera, srcRoot: Entity, targetRoot: Entity): void {
+    this._renderTarget?._addReferCount(1);
+  }
+
  /**
   * @internal
   * @inheritdoc
@@ -830,6 +841,7 @@ export class Camera extends Component {
    this._isInvViewProjDirty.destroy();
    this._isViewMatrixDirty.destroy();
    this._addResourceReferCount(this.shaderData, -1);
+    this._renderTarget && this._addResourceReferCount(this._renderTarget, -1);

    //@ts-ignore
    this._viewport._onValueChanged = null;
--- a/packages/core/src/Scene.ts
+++ b/packages/core/src/Scene.ts
@@ -469,7 +469,7 @@ export class Scene extends EngineObject {

    if (sunlight) {
      lightManager._updateSunlightIndex(sunlight);
-      shaderData.setColor(LightManager._sunlightColorProperty, sunlight._lightColor);
+      shaderData.setColor(LightManager._sunlightColorProperty, sunlight.color);
      shaderData.setVector3(LightManager._sunlightDirectionProperty, sunlight.direction);
    } else {
      // @ts-ignore
--- a/packages/core/src/VirtualCamera.ts
+++ b/packages/core/src/VirtualCamera.ts
@@ -1,16 +1,22 @@
 import { Matrix, Vector3 } from "@galacean/engine-math";
+import { ignoreClone } from "./clone/CloneManager";

 /**
 * @internal
 */
 export class VirtualCamera {
-  position: Vector3 = new Vector3();
  isOrthographic: boolean = false;
-  viewMatrix: Matrix = new Matrix();
-  projectionMatrix: Matrix = new Matrix();
-  viewProjectionMatrix: Matrix = new Matrix();
  nearClipPlane: number = 0.1;
  farClipPlane: number = 100;
+  @ignoreClone
+  position: Vector3 = new Vector3();
+  @ignoreClone
+  viewMatrix: Matrix = new Matrix();
+  @ignoreClone
+  projectionMatrix: Matrix = new Matrix();
+  @ignoreClone
+  viewProjectionMatrix: Matrix = new Matrix();
  /** Only orth mode use. */
+  @ignoreClone
  forward: Vector3 = new Vector3();
 }
--- a/packages/core/src/animation/Animator.ts
+++ b/packages/core/src/animation/Animator.ts
@@ -43,8 +43,8 @@ export class Animator extends Component {
  /** @internal */
  _onUpdateIndex = -1;

+  @assignmentClone
  protected _animatorController: AnimatorController;
-
  @ignoreClone
  protected _controllerUpdateFlag: BoolUpdateFlag;
  @ignoreClone
@@ -73,10 +73,15 @@ export class Animator extends Component {
  }

  set animatorController(animatorController: AnimatorController) {
-    if (animatorController !== this._animatorController) {
-      this._reset();
+    const lastController = this._animatorController;
+    if (animatorController !== lastController) {
+      lastController && this._addResourceReferCount(lastController, -1);
      this._controllerUpdateFlag && this._controllerUpdateFlag.destroy();
-      this._controllerUpdateFlag = animatorController && animatorController._registerChangeFlag();
+      this._reset();
+      if (animatorController) {
+        this._addResourceReferCount(animatorController, 1);
+        this._controllerUpdateFlag = animatorController._registerChangeFlag();
+      }
      this._animatorController = animatorController;
    }
  }
@@ -325,6 +330,26 @@ export class Animator extends Component {
    }
  }

+  /**
+   * @internal
+   */
+  _cloneTo(target: Animator, srcRoot: Entity, targetRoot: Entity): void {
+    const animatorController = target._animatorController;
+    if (animatorController) {
+      target._addResourceReferCount(animatorController, 1);
+      target._controllerUpdateFlag = animatorController._registerChangeFlag();
+    }
+  }
+
+  protected override _onDestroy(): void {
+    super._onDestroy();
+    const controller = this._animatorController;
+    if (controller) {
+      this._addResourceReferCount(controller, -1);
+      this._controllerUpdateFlag?.destroy();
+    }
+  }
+
  private _crossFade(
    stateName: string,
    duration: number,
--- a/packages/core/src/audio/AudioSource.ts
+++ b/packages/core/src/audio/AudioSource.ts
@@ -1,4 +1,4 @@
-import { deepClone, ignoreClone } from "../clone/CloneManager";
+import { assignmentClone, ignoreClone } from "../clone/CloneManager";
 import { Component } from "../Component";
 import { Entity } from "../Entity";
 import { AudioClip } from "./AudioClip";
@@ -14,25 +14,25 @@ export class AudioSource extends Component {
  @ignoreClone
  private _isPlaying: boolean = false;

-  @ignoreClone
+  @assignmentClone
  private _clip: AudioClip;
-  @deepClone
+  @ignoreClone
  private _gainNode: GainNode;
  @ignoreClone
  private _sourceNode: AudioBufferSourceNode | null = null;

-  @deepClone
+  @ignoreClone
  private _pausedTime: number = -1;
  @ignoreClone
  private _playTime: number = -1;

-  @deepClone
+  @assignmentClone
  private _volume: number = 1;
-  @deepClone
+  @assignmentClone
  private _lastVolume: number = 1;
-  @deepClone
+  @assignmentClone
  private _playbackRate: number = 1;
-  @deepClone
+  @assignmentClone
  private _loop: boolean = false;

  /**
@@ -189,6 +189,14 @@ export class AudioSource extends Component {
    }
  }

+  /**
+   * @internal
+   */
+  _cloneTo(target: AudioSource, srcRoot: Entity, targetRoot: Entity): void {
+    target._clip?._addReferCount(1);
+    target._gainNode.gain.setValueAtTime(target._volume, AudioManager.getContext().currentTime);
+  }
+
  /**
   * @internal
   */
@@ -212,6 +220,7 @@ export class AudioSource extends Component {
    this.clip = null;
  }

+  @ignoreClone
  private _onPlayEnd(): void {
    this.stop();
  }
--- a/packages/core/src/lighting/DirectLight.ts
+++ b/packages/core/src/lighting/DirectLight.ts
@@ -1,4 +1,5 @@
 import { Vector3 } from "@galacean/engine-math";
+import { ignoreClone } from "../clone/CloneManager";
 import { ShaderData } from "../shader";
 import { ShaderProperty } from "../shader/ShaderProperty";
 import { Light } from "./Light";
@@ -26,6 +27,7 @@ export class DirectLight extends Light {
   */
  shadowNearPlaneOffset = 0.1;

+  @ignoreClone
  private _reverseDirection: Vector3 = new Vector3();

  /**
--- a/packages/core/src/lighting/Light.ts
+++ b/packages/core/src/lighting/Light.ts
@@ -1,7 +1,7 @@
 import { Color, MathUtil, Matrix } from "@galacean/engine-math";
 import { Component } from "../Component";
 import { Layer } from "../Layer";
-import { ignoreClone } from "../clone/CloneManager";
+import { deepClone, ignoreClone } from "../clone/CloneManager";
 import { ShadowType } from "../shadow";

 /**
@@ -30,12 +30,13 @@ export abstract class Light extends Component {
  /** @internal */
  @ignoreClone
  _lightIndex = -1;
-  /** @internal */
-  _lightColor = new Color();

  private _shadowStrength = 1.0;
+  @deepClone
  private _color = new Color(1, 1, 1, 1);
+  @ignoreClone
  private _viewMat: Matrix;
+  @ignoreClone
  private _inverseViewMat: Matrix;

  /** Shadow intensity, the larger the value, the clearer and darker the shadow, range [0,1]. */
--- a/packages/core/src/lighting/PointLight.ts
+++ b/packages/core/src/lighting/PointLight.ts
@@ -1,4 +1,4 @@
-import { Color, Vector3 } from "@galacean/engine-math";
+import { Vector3 } from "@galacean/engine-math";
 import { ShaderData } from "../shader";
 import { ShaderProperty } from "../shader/ShaderProperty";
 import { Light } from "./Light";
--- a/packages/core/src/lighting/SpotLight.ts
+++ b/packages/core/src/lighting/SpotLight.ts
@@ -2,6 +2,7 @@ import { Matrix, Vector3 } from "@galacean/engine-math";
 import { ShaderData } from "../shader";
 import { ShaderProperty } from "../shader/ShaderProperty";
 import { Light } from "./Light";
+import { ignoreClone } from "../clone/CloneManager";

 /**
 * Spot light.
@@ -35,8 +36,8 @@ export class SpotLight extends Light {
  /** Angle, in radians, from falloff begins to ends. */
  penumbra: number = Math.PI / 12;

+  @ignoreClone
  private _inverseDirection: Vector3 = new Vector3();
-  private _projectMatrix: Matrix = new Matrix();

  /**
   * Get light position.
--- a/packages/core/src/particle/modules/TextureSheetAnimationModule.ts
+++ b/packages/core/src/particle/modules/TextureSheetAnimationModule.ts
@@ -8,6 +8,7 @@ import { ParticleRandomSubSeeds } from "../enums/ParticleRandomSubSeeds";
 import { ParticleCompositeCurve } from "./ParticleCompositeCurve";
 import { CurveKey, ParticleCurve } from "./ParticleCurve";
 import { ParticleGeneratorModule } from "./ParticleGeneratorModule";
+import { ParticleGenerator } from "../ParticleGenerator";

 /**
 * Texture sheet animation module.
@@ -50,8 +51,13 @@ export class TextureSheetAnimationModule extends ParticleGeneratorModule {
  }

  set tiling(value: Vector2) {
-    this._tiling = value;
-    this._tillingInfo.set(1.0 / value.x, 1.0 / value.y, value.x * value.y);
+    value !== this._tiling && this._tiling.copyFrom(value);
+  }
+
+  constructor(generator: ParticleGenerator) {
+    super(generator);
+    // @ts-ignore
+    this._tiling._onValueChanged = this._onTilingChanged.bind(this);
  }

  /**
@@ -85,6 +91,12 @@ export class TextureSheetAnimationModule extends ParticleGeneratorModule {
  _resetRandomSeed(randomSeed: number): void {
    this._frameOverTimeRand.reset(randomSeed, ParticleRandomSubSeeds.TextureSheetAnimation);
  }
+
+  @ignoreClone
+  private _onTilingChanged(): void {
+    const tiling = this.tiling;
+    this._tillingInfo.set(1.0 / tiling.x, 1.0 / tiling.y, tiling.x * tiling.y);
+  }
 }

 /**
--- a/packages/core/src/shaderlib/particle/rotation_over_lifetime_module.glsl
+++ b/packages/core/src/shaderlib/particle/rotation_over_lifetime_module.glsl
@@ -23,9 +23,10 @@
 float computeParticleRotationFloat(in float rotation, in float age, in float normalizedAge) {
    #if defined(RENDERER_ROL_CONSTANT_MODE) || defined(RENDERER_ROL_CURVE_MODE)
        #ifdef RENDERER_ROL_CURVE_MODE
-            float lifeRotation = evaluateParticleCurveCumulative(renderer_ROLMaxCurveZ, normalizedAge);
+            float currentValue;
+            float lifeRotation = evaluateParticleCurveCumulative(renderer_ROLMaxCurveZ, normalizedAge, currentValue);
            #ifdef RENDERER_ROL_IS_RANDOM_TWO
-                lifeRotation = mix(evaluateParticleCurveCumulative(renderer_ROLMinCurveZ, normalizedAge), lifeRotation, a_Random0.w);
+                lifeRotation = mix(evaluateParticleCurveCumulative(renderer_ROLMinCurveZ, normalizedAge, currentValue), lifeRotation, a_Random0.w);
            #endif
            rotation += lifeRotation * a_ShapePositionStartLifeTime.w;
        #else
--- a/packages/loader/libs/basis_transcoder.js
+++ b/packages/loader/libs/basis_transcoder.js
--- a/packages/loader/libs/basis_transcoder.wasm
+++ b/packages/loader/libs/basis_transcoder.wasm
--- a/packages/loader/src/ktx2/transcoder/BinomialLLCTranscoder.ts
+++ b/packages/loader/src/ktx2/transcoder/BinomialLLCTranscoder.ts
@@ -1,6 +1,6 @@
 import { KTX2TargetFormat } from "../KTX2TargetFormat";
 import { AbstractTranscoder, TranscodeResult } from "./AbstractTranscoder";
-import { TranscodeWorkerCode, init, transcode, _init } from "./BinomialLLCWorkerCode";
+import { TranscodeWorkerCode, init, transcode } from "./BinomialLLCWorkerCode";

 /** @internal */
 export class BinomialLLCTranscoder extends AbstractTranscoder {
@@ -10,10 +10,10 @@ export class BinomialLLCTranscoder extends AbstractTranscoder {

  _initTranscodeWorkerPool() {
    return Promise.all([
-      fetch("https://mdn.alipayobjects.com/rms/afts/file/A*ImQSTZQiexkAAAAAQ1AAAAgAehQnAQ/basis_transcoder.js").then(
+      fetch("https://mdn.alipayobjects.com/rms/afts/file/A*J8IrSL8WE8EAAAAAQ6AAAAgAehQnAQ/basis_transcoder.js").then(
        (res) => res.text()
      ),
-      fetch("https://mdn.alipayobjects.com/rms/afts/file/A*DFX8RJ6Z0G0AAAAAXoAAAAgAehQnAQ/basis_transcoder.wasm").then(
+      fetch("https://mdn.alipayobjects.com/rms/afts/file/A*F3duSLqOP2sAAAAAXjAAAAgAehQnAQ/basis_transcoder.wasm").then(
        (res) => res.arrayBuffer()
      )
    ]).then(([jsCode, wasmBuffer]) => {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -156,6 +156,49 @@ importers:
        specifier: 3.1.6
        version: 3.1.6(sass@1.81.0)

+  examples:
+    dependencies:
+      '@galacean/engine':
+        specifier: workspace:*
+        version: link:../packages/galacean
+      '@galacean/engine-core':
+        specifier: workspace:*
+        version: link:../packages/core
+      '@galacean/engine-design':
+        specifier: workspace:*
+        version: link:../packages/design
+      '@galacean/engine-loader':
+        specifier: workspace:*
+        version: link:../packages/loader
+      '@galacean/engine-math':
+        specifier: workspace:*
+        version: link:../packages/math
+      '@galacean/engine-physics-lite':
+        specifier: workspace:*
+        version: link:../packages/physics-lite
+      '@galacean/engine-rhi-webgl':
+        specifier: workspace:*
+        version: link:../packages/rhi-webgl
+      '@galacean/engine-shader-shaderlab':
+        specifier: workspace:*
+        version: link:../packages/shader-shaderlab
+      '@galacean/engine-shaderlab':
+        specifier: workspace:*
+        version: link:../packages/shader-lab
+      '@galacean/engine-toolkit':
+        specifier: latest
+        version: 1.5.3(@galacean/engine-ui@packages+ui)(@galacean/engine@packages+galacean)
+      '@galacean/engine-ui':
+        specifier: workspace:*
+        version: link:../packages/ui
+    devDependencies:
+      dat.gui:
+        specifier: ^0.7.9
+        version: 0.7.9
+      vite:
+        specifier: ^4.4.4
+        version: 4.5.14(@types/node@18.19.64)(sass@1.81.0)
+
  packages/core:
    dependencies:
      '@galacean/engine-math':
@@ -479,6 +522,12 @@ packages:
    cpu: [ppc64]
    os: [aix]

+  '@esbuild/android-arm64@0.18.20':
+    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
  '@esbuild/android-arm64@0.21.5':
    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
    engines: {node: '>=12'}
@@ -491,54 +540,108 @@ packages:
    cpu: [arm]
    os: [android]

+  '@esbuild/android-arm@0.18.20':
+    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
  '@esbuild/android-arm@0.21.5':
    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
    engines: {node: '>=12'}
    cpu: [arm]
    os: [android]

+  '@esbuild/android-x64@0.18.20':
+    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
  '@esbuild/android-x64@0.21.5':
    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [android]

+  '@esbuild/darwin-arm64@0.18.20':
+    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
  '@esbuild/darwin-arm64@0.21.5':
    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [darwin]

+  '@esbuild/darwin-x64@0.18.20':
+    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
  '@esbuild/darwin-x64@0.21.5':
    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [darwin]

+  '@esbuild/freebsd-arm64@0.18.20':
+    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
  '@esbuild/freebsd-arm64@0.21.5':
    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [freebsd]

+  '@esbuild/freebsd-x64@0.18.20':
+    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
  '@esbuild/freebsd-x64@0.21.5':
    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [freebsd]

+  '@esbuild/linux-arm64@0.18.20':
+    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
  '@esbuild/linux-arm64@0.21.5':
    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [linux]

+  '@esbuild/linux-arm@0.18.20':
+    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
  '@esbuild/linux-arm@0.21.5':
    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
    engines: {node: '>=12'}
    cpu: [arm]
    os: [linux]

+  '@esbuild/linux-ia32@0.18.20':
+    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
  '@esbuild/linux-ia32@0.21.5':
    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
    engines: {node: '>=12'}
@@ -551,72 +654,144 @@ packages:
    cpu: [loong64]
    os: [linux]

+  '@esbuild/linux-loong64@0.18.20':
+    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
  '@esbuild/linux-loong64@0.21.5':
    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
    engines: {node: '>=12'}
    cpu: [loong64]
    os: [linux]

+  '@esbuild/linux-mips64el@0.18.20':
+    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
  '@esbuild/linux-mips64el@0.21.5':
    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
    engines: {node: '>=12'}
    cpu: [mips64el]
    os: [linux]

+  '@esbuild/linux-ppc64@0.18.20':
+    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
  '@esbuild/linux-ppc64@0.21.5':
    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
    engines: {node: '>=12'}
    cpu: [ppc64]
    os: [linux]

+  '@esbuild/linux-riscv64@0.18.20':
+    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
  '@esbuild/linux-riscv64@0.21.5':
    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
    engines: {node: '>=12'}
    cpu: [riscv64]
    os: [linux]

+  '@esbuild/linux-s390x@0.18.20':
+    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
  '@esbuild/linux-s390x@0.21.5':
    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
    engines: {node: '>=12'}
    cpu: [s390x]
    os: [linux]

+  '@esbuild/linux-x64@0.18.20':
+    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
  '@esbuild/linux-x64@0.21.5':
    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [linux]

+  '@esbuild/netbsd-x64@0.18.20':
+    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
  '@esbuild/netbsd-x64@0.21.5':
    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [netbsd]

+  '@esbuild/openbsd-x64@0.18.20':
+    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
  '@esbuild/openbsd-x64@0.21.5':
    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [openbsd]

+  '@esbuild/sunos-x64@0.18.20':
+    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
  '@esbuild/sunos-x64@0.21.5':
    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [sunos]

+  '@esbuild/win32-arm64@0.18.20':
+    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
  '@esbuild/win32-arm64@0.21.5':
    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [win32]

+  '@esbuild/win32-ia32@0.18.20':
+    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
  '@esbuild/win32-ia32@0.21.5':
    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
    engines: {node: '>=12'}
    cpu: [ia32]
    os: [win32]

+  '@esbuild/win32-x64@0.18.20':
+    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
  '@esbuild/win32-x64@0.21.5':
    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
    engines: {node: '>=12'}
@@ -649,46 +824,92 @@ packages:
    peerDependencies:
      '@galacean/engine': ^1.3.0-beta.6

+  '@galacean/engine-toolkit-auxiliary-lines@1.5.3':
+    resolution: {integrity: sha512-92PgvXoVHp+5gk9Eril5OFxCILBT+jBaRCvEKiMUntdlfZtPrMstpnHaibgeWgLHoHGmEUG5Uei7kujyY9XTqw==}
+    peerDependencies:
+      '@galacean/engine': ^1.5.0
+
  '@galacean/engine-toolkit-controls@1.3.9':
    resolution: {integrity: sha512-4vmOoo6++jZAAywiJNoSOEhxN1XJ+mEOO8RjOsBHMJi88copSarhI1UloDhh4Phybx0gyIMxfW+Pf+rURkFIEw==}
    peerDependencies:
      '@galacean/engine': ^1.3.0-beta.6

+  '@galacean/engine-toolkit-controls@1.5.3':
+    resolution: {integrity: sha512-SNTaCLF6rolBzSyKLwS+MUEZLpkksaQnYjhBvAnFpWUd9lR6llL8sdI5/DJZtaK6cyxiw+eA2MMCN75Cxn38OQ==}
+    peerDependencies:
+      '@galacean/engine': ^1.5.0
+
  '@galacean/engine-toolkit-custom-material@1.3.9':
    resolution: {integrity: sha512-+YJFcY8vJrzhgxJuABT5IehXWULIZhIrYqvqZaCVCYwOwONW+snHaJ668hQofdafVMQemJaoshsapuG6L/2Ifg==}
    peerDependencies:
      '@galacean/engine': ^1.3.0-beta.6

+  '@galacean/engine-toolkit-custom-material@1.5.3':
+    resolution: {integrity: sha512-Pw/No07qNlf/RNPP9G/8nTmE2t75ge0UmuFT7rcXYrhe3CoBpureN9rEwm1TnFkWbGcothV6cLN3U6wDD/hf8w==}
+    peerDependencies:
+      '@galacean/engine': ^1.5.0
+
  '@galacean/engine-toolkit-framebuffer-picker@1.3.9':
    resolution: {integrity: sha512-uncOV18yagh1oe9JboRnp6QmkHqyfC+xaLD40+sXc+M8xKPchM41E1ygy3mNQvkBRQfbUA6ZkqIGsne5V45tAg==}
    peerDependencies:
      '@galacean/engine': ^1.3.0-beta.6

+  '@galacean/engine-toolkit-framebuffer-picker@1.5.3':
+    resolution: {integrity: sha512-N4bp+c8Ess9FOnKHvml8OERspOffZTYI5UYQ9LP/0ftDTnYXqgPPQ5Hx55I/nQ6mgDgOqZW6d+wUeH1gZIH9jA==}
+    peerDependencies:
+      '@galacean/engine': ^1.5.0
+
  '@galacean/engine-toolkit-geometry-sketch@1.3.9':
    resolution: {integrity: sha512-2G4wjKT4ilFhqy2KED5wuoqiau/gCVgXFyBeHIUq633rzixSKsSVd56pxQItsD1WdifWRfp1o/XqordIGGkViA==}
    peerDependencies:
      '@galacean/engine': ^1.3.0-beta.6

+  '@galacean/engine-toolkit-geometry-sketch@1.5.3':
+    resolution: {integrity: sha512-I2yQr8FSlw82JdaLHqQ8hU8pJ9rgmc2IL75NOWPVarwDwJaJeDA3uSPWNInXlFrh1MlGK1FyCMSka/XtyVotlw==}
+    peerDependencies:
+      '@galacean/engine': ^1.5.0
+
  '@galacean/engine-toolkit-gizmo@1.3.9':
    resolution: {integrity: sha512-Qg5yVeZfUJZTOqrM/Kr1CUxVpZZ6v2xeqywT1xRxHCBLaoJnyNcYdM1NHLozhpmnv89Sxlb0XCQFVz2KqecrJQ==}
    peerDependencies:
      '@galacean/engine': ^1.3.0-beta.6

+  '@galacean/engine-toolkit-gizmo@1.5.3':
+    resolution: {integrity: sha512-TpgtUsfazVaOBbwYy1pKcZsEBK09IYvYA0lI7nSWinAqpxC0LTKsBwhU/icOd9jyowGbT2Dyi4oGYj+FeLYIfw==}
+    peerDependencies:
+      '@galacean/engine': ^1.5.0
+      '@galacean/engine-ui': ^1.5.0
+
  '@galacean/engine-toolkit-lines@1.3.9':
    resolution: {integrity: sha512-htXfz2a/4HouKI0wmd8HjTfq5PnMt21uIQD3X6D7kE11VmosRbq+YSB/LYoNLWvyHCG8AcjodIn4UL1Lgxt6bw==}
    peerDependencies:
      '@galacean/engine': ^1.3.0-beta.6

+  '@galacean/engine-toolkit-lines@1.5.3':
+    resolution: {integrity: sha512-Skx4KvxxUoJXhIBNdus5HSYnGfXgu8beNzgg9GBiFr7yiGFbFdmWGt/a9df5djP/E7MPGEdNS8gOlB8KpKg9nQ==}
+    peerDependencies:
+      '@galacean/engine': ^1.5.0
+
  '@galacean/engine-toolkit-navigation-gizmo@1.3.9':
    resolution: {integrity: sha512-v/iDh/qATqGYARCLwGuiZymuhDo7LvfStmDIJtZ94Cd2dh9fV0mT8kKVN1yvuW8X2/375Cc+d9OHRlYGz7hmRw==}
    peerDependencies:
      '@galacean/engine': ^1.3.0-beta.6

+  '@galacean/engine-toolkit-navigation-gizmo@1.5.3':
+    resolution: {integrity: sha512-zE7L00TzjQqE++npzzoj4g1DKlxro9IxRiZtlnwMV+xI5L63DsqT1ISHQf5ZwuctusRI9nGjdkAmKXeHK2hcig==}
+    peerDependencies:
+      '@galacean/engine': ^1.5.0
+
  '@galacean/engine-toolkit-outline@1.3.9':
    resolution: {integrity: sha512-WnyVZ7hRQPYdj0RzKC/yPrwGeXWJ3da1Ztonrofyv1F00CSTFyzXY1RapscJDQQtaOdRX5bV/5vkBBzBOYuKlA==}
    peerDependencies:
      '@galacean/engine': ^1.3.0-beta.6

+  '@galacean/engine-toolkit-outline@1.5.3':
+    resolution: {integrity: sha512-CoLdhb5HjKaDpCxCEoxrWbajbwGIGUARibXI9ZbSu578+9Y662622xgidiifxA3HuUoEq+/YI3SliXhfh20BEw==}
+    peerDependencies:
+      '@galacean/engine': ^1.5.0
+
  '@galacean/engine-toolkit-shader-lab@1.3.9':
    resolution: {integrity: sha512-XvXvVHdU9Ic69oF5tkgRIjAxsOq/7L7b6UCYMggDvoWV7RO3JXB8CbvfEDnG/qUztFBfIc10h69gXizcu2xJJg==}
    peerDependencies:
@@ -699,14 +920,27 @@ packages:
    peerDependencies:
      '@galacean/engine': ^1.3.0-beta.6

+  '@galacean/engine-toolkit-skeleton-viewer@1.5.3':
+    resolution: {integrity: sha512-mBqEjm4NmDIuzyleR7nt5QjXIBaChQU7do6/yCTz1D7a5YeCK3F+4BoFNPg3PwM1TXymK+LOwixZYD9V6/oILg==}
+    peerDependencies:
+      '@galacean/engine': ^1.5.0
+
  '@galacean/engine-toolkit-stats@1.3.9':
    resolution: {integrity: sha512-5EfsVwg1YzICLzJsek9U++jcqOUK6SCakwQmSVIEFvVxn5cLN9cphNorcmOPsju3crcrfP45aLjZEEPgoYcAqw==}
    peerDependencies:
      '@galacean/engine': ^1.3.0-beta.6

+  '@galacean/engine-toolkit-stats@1.5.3':
+    resolution: {integrity: sha512-bPGiFy4/zHcJitLHSUgd8xi0EP5ndqfwkR/HsYOvkYea5TD2MPYXI7DMlR8UopwhmHBd7TML0X7A1ppx74g9DA==}
+    peerDependencies:
+      '@galacean/engine': ^1.5.0
+
  '@galacean/engine-toolkit@1.3.9':
    resolution: {integrity: sha512-sxE7QfzH61O9Q1wtwnjIEjcg3n0ZZVz9B6CyqBLOWyWgWsZmefcjZLnnH4HIkvc5ZLNA+gMuJ1ekmwJgfkck+g==}

+  '@galacean/engine-toolkit@1.5.3':
+    resolution: {integrity: sha512-Koefdezvft7DG1IhHDW5BXUoUp2JCQl8WJrBa/tgXR5/T20jXntzV7Ryz3jN5v0HNoOT4IhmYBBwtaxpS6KUHg==}
+
  '@humanwhocodes/config-array@0.13.0':
    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
    engines: {node: '>=10.10.0'}
@@ -2022,6 +2256,11 @@ packages:
    engines: {node: '>=12'}
    hasBin: true

+  esbuild@0.18.20:
+    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
+    engines: {node: '>=12'}
+    hasBin: true
+
  esbuild@0.21.5:
    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
    engines: {node: '>=12'}
@@ -3242,6 +3481,11 @@ packages:
    engines: {node: '>=10.0.0'}
    hasBin: true

+  rollup@3.29.5:
+    resolution: {integrity: sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+
  rollup@4.27.2:
    resolution: {integrity: sha512-KreA+PzWmk2yaFmZVwe6GB2uBD86nXl86OsDkt1bJS9p3vqWuEQ6HnJJ+j/mZi/q0920P99/MVRlB4L3crpF5w==}
    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -3678,6 +3922,34 @@ packages:
      terser:
        optional: true

+  vite@4.5.14:
+    resolution: {integrity: sha512-+v57oAaoYNnO3hIu5Z/tJRZjq5aHM2zDve9YZ8HngVHbhk66RStobhb1sqPMIPEleV6cNKYK4eGrAbE9Ulbl2g==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
  vite@5.4.11:
    resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
    engines: {node: ^18.0.0 || >=20.0.0}
@@ -4096,75 +4368,141 @@ snapshots:
  '@esbuild/aix-ppc64@0.21.5':
    optional: true

+  '@esbuild/android-arm64@0.18.20':
+    optional: true
+
  '@esbuild/android-arm64@0.21.5':
    optional: true

  '@esbuild/android-arm@0.15.18':
    optional: true

+  '@esbuild/android-arm@0.18.20':
+    optional: true
+
  '@esbuild/android-arm@0.21.5':
    optional: true

+  '@esbuild/android-x64@0.18.20':
+    optional: true
+
  '@esbuild/android-x64@0.21.5':
    optional: true

+  '@esbuild/darwin-arm64@0.18.20':
+    optional: true
+
  '@esbuild/darwin-arm64@0.21.5':
    optional: true

+  '@esbuild/darwin-x64@0.18.20':
+    optional: true
+
  '@esbuild/darwin-x64@0.21.5':
    optional: true

+  '@esbuild/freebsd-arm64@0.18.20':
+    optional: true
+
  '@esbuild/freebsd-arm64@0.21.5':
    optional: true

+  '@esbuild/freebsd-x64@0.18.20':
+    optional: true
+
  '@esbuild/freebsd-x64@0.21.5':
    optional: true

+  '@esbuild/linux-arm64@0.18.20':
+    optional: true
+
  '@esbuild/linux-arm64@0.21.5':
    optional: true

+  '@esbuild/linux-arm@0.18.20':
+    optional: true
+
  '@esbuild/linux-arm@0.21.5':
    optional: true

+  '@esbuild/linux-ia32@0.18.20':
+    optional: true
+
  '@esbuild/linux-ia32@0.21.5':
    optional: true

  '@esbuild/linux-loong64@0.15.18':
    optional: true

+  '@esbuild/linux-loong64@0.18.20':
+    optional: true
+
  '@esbuild/linux-loong64@0.21.5':
    optional: true

+  '@esbuild/linux-mips64el@0.18.20':
+    optional: true
+
  '@esbuild/linux-mips64el@0.21.5':
    optional: true

+  '@esbuild/linux-ppc64@0.18.20':
+    optional: true
+
  '@esbuild/linux-ppc64@0.21.5':
    optional: true

+  '@esbuild/linux-riscv64@0.18.20':
+    optional: true
+
  '@esbuild/linux-riscv64@0.21.5':
    optional: true

+  '@esbuild/linux-s390x@0.18.20':
+    optional: true
+
  '@esbuild/linux-s390x@0.21.5':
    optional: true

+  '@esbuild/linux-x64@0.18.20':
+    optional: true
+
  '@esbuild/linux-x64@0.21.5':
    optional: true

+  '@esbuild/netbsd-x64@0.18.20':
+    optional: true
+
  '@esbuild/netbsd-x64@0.21.5':
    optional: true

+  '@esbuild/openbsd-x64@0.18.20':
+    optional: true
+
  '@esbuild/openbsd-x64@0.21.5':
    optional: true

+  '@esbuild/sunos-x64@0.18.20':
+    optional: true
+
  '@esbuild/sunos-x64@0.21.5':
    optional: true

+  '@esbuild/win32-arm64@0.18.20':
+    optional: true
+
  '@esbuild/win32-arm64@0.21.5':
    optional: true

+  '@esbuild/win32-ia32@0.18.20':
+    optional: true
+
  '@esbuild/win32-ia32@0.21.5':
    optional: true

+  '@esbuild/win32-x64@0.18.20':
+    optional: true
+
  '@esbuild/win32-x64@0.21.5':
    optional: true

@@ -4198,42 +4536,84 @@ snapshots:
      '@galacean/engine': link:packages/galacean
      '@galacean/engine-toolkit-custom-material': 1.3.9(@galacean/engine@packages+galacean)

+  '@galacean/engine-toolkit-auxiliary-lines@1.5.3(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine': link:packages/galacean
+      '@galacean/engine-toolkit-custom-material': 1.5.3(@galacean/engine@packages+galacean)
+
  '@galacean/engine-toolkit-controls@1.3.9(@galacean/engine@packages+galacean)':
    dependencies:
      '@galacean/engine': link:packages/galacean

+  '@galacean/engine-toolkit-controls@1.5.3(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine': link:packages/galacean
+
  '@galacean/engine-toolkit-custom-material@1.3.9(@galacean/engine@packages+galacean)':
    dependencies:
      '@galacean/engine': link:packages/galacean

+  '@galacean/engine-toolkit-custom-material@1.5.3(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine': link:packages/galacean
+
  '@galacean/engine-toolkit-framebuffer-picker@1.3.9(@galacean/engine@packages+galacean)':
    dependencies:
      '@galacean/engine': link:packages/galacean

+  '@galacean/engine-toolkit-framebuffer-picker@1.5.3(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine': link:packages/galacean
+
  '@galacean/engine-toolkit-geometry-sketch@1.3.9(@galacean/engine@packages+galacean)':
    dependencies:
      '@galacean/engine': link:packages/galacean

+  '@galacean/engine-toolkit-geometry-sketch@1.5.3(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine': link:packages/galacean
+
  '@galacean/engine-toolkit-gizmo@1.3.9(@galacean/engine@packages+galacean)':
    dependencies:
      '@galacean/engine': link:packages/galacean
      '@galacean/engine-toolkit-custom-material': 1.3.9(@galacean/engine@packages+galacean)
      '@galacean/engine-toolkit-framebuffer-picker': 1.3.9(@galacean/engine@packages+galacean)

+  '@galacean/engine-toolkit-gizmo@1.5.3(@galacean/engine-ui@packages+ui)(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine': link:packages/galacean
+      '@galacean/engine-toolkit-custom-material': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-framebuffer-picker': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-ui': link:packages/ui
+
  '@galacean/engine-toolkit-lines@1.3.9(@galacean/engine@packages+galacean)':
    dependencies:
      '@galacean/engine': link:packages/galacean

+  '@galacean/engine-toolkit-lines@1.5.3(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine': link:packages/galacean
+
  '@galacean/engine-toolkit-navigation-gizmo@1.3.9(@galacean/engine@packages+galacean)':
    dependencies:
      '@galacean/engine': link:packages/galacean
      '@galacean/engine-toolkit-controls': 1.3.9(@galacean/engine@packages+galacean)
      '@galacean/engine-toolkit-custom-material': 1.3.9(@galacean/engine@packages+galacean)

+  '@galacean/engine-toolkit-navigation-gizmo@1.5.3(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine': link:packages/galacean
+      '@galacean/engine-toolkit-controls': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-custom-material': 1.5.3(@galacean/engine@packages+galacean)
+
  '@galacean/engine-toolkit-outline@1.3.9(@galacean/engine@packages+galacean)':
    dependencies:
      '@galacean/engine': link:packages/galacean

+  '@galacean/engine-toolkit-outline@1.5.3(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine': link:packages/galacean
+
  '@galacean/engine-toolkit-shader-lab@1.3.9(@galacean/engine@packages+galacean)':
    dependencies:
      '@galacean/engine': link:packages/galacean
@@ -4242,10 +4622,18 @@ snapshots:
    dependencies:
      '@galacean/engine': link:packages/galacean

+  '@galacean/engine-toolkit-skeleton-viewer@1.5.3(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine': link:packages/galacean
+
  '@galacean/engine-toolkit-stats@1.3.9(@galacean/engine@packages+galacean)':
    dependencies:
      '@galacean/engine': link:packages/galacean

+  '@galacean/engine-toolkit-stats@1.5.3(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine': link:packages/galacean
+
  '@galacean/engine-toolkit@1.3.9(@galacean/engine@packages+galacean)':
    dependencies:
      '@galacean/engine-toolkit-auxiliary-lines': 1.3.9(@galacean/engine@packages+galacean)
@@ -4263,6 +4651,23 @@ snapshots:
    transitivePeerDependencies:
      - '@galacean/engine'

+  '@galacean/engine-toolkit@1.5.3(@galacean/engine-ui@packages+ui)(@galacean/engine@packages+galacean)':
+    dependencies:
+      '@galacean/engine-toolkit-auxiliary-lines': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-controls': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-custom-material': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-framebuffer-picker': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-geometry-sketch': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-gizmo': 1.5.3(@galacean/engine-ui@packages+ui)(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-lines': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-navigation-gizmo': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-outline': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-skeleton-viewer': 1.5.3(@galacean/engine@packages+galacean)
+      '@galacean/engine-toolkit-stats': 1.5.3(@galacean/engine@packages+galacean)
+    transitivePeerDependencies:
+      - '@galacean/engine'
+      - '@galacean/engine-ui'
+
  '@humanwhocodes/config-array@0.13.0':
    dependencies:
      '@humanwhocodes/object-schema': 2.0.3
@@ -5536,6 +5941,31 @@ snapshots:
      esbuild-windows-64: 0.15.18
      esbuild-windows-arm64: 0.15.18

+  esbuild@0.18.20:
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.20
+      '@esbuild/android-arm64': 0.18.20
+      '@esbuild/android-x64': 0.18.20
+      '@esbuild/darwin-arm64': 0.18.20
+      '@esbuild/darwin-x64': 0.18.20
+      '@esbuild/freebsd-arm64': 0.18.20
+      '@esbuild/freebsd-x64': 0.18.20
+      '@esbuild/linux-arm': 0.18.20
+      '@esbuild/linux-arm64': 0.18.20
+      '@esbuild/linux-ia32': 0.18.20
+      '@esbuild/linux-loong64': 0.18.20
+      '@esbuild/linux-mips64el': 0.18.20
+      '@esbuild/linux-ppc64': 0.18.20
+      '@esbuild/linux-riscv64': 0.18.20
+      '@esbuild/linux-s390x': 0.18.20
+      '@esbuild/linux-x64': 0.18.20
+      '@esbuild/netbsd-x64': 0.18.20
+      '@esbuild/openbsd-x64': 0.18.20
+      '@esbuild/sunos-x64': 0.18.20
+      '@esbuild/win32-arm64': 0.18.20
+      '@esbuild/win32-ia32': 0.18.20
+      '@esbuild/win32-x64': 0.18.20
+
  esbuild@0.21.5:
    optionalDependencies:
      '@esbuild/aix-ppc64': 0.21.5
@@ -6847,6 +7277,10 @@ snapshots:
    optionalDependencies:
      fsevents: 2.3.3

+  rollup@3.29.5:
+    optionalDependencies:
+      fsevents: 2.3.3
+
  rollup@4.27.2:
    dependencies:
      '@types/estree': 1.0.6
@@ -7269,6 +7703,16 @@ snapshots:
      fsevents: 2.3.3
      sass: 1.81.0

+  vite@4.5.14(@types/node@18.19.64)(sass@1.81.0):
+    dependencies:
+      esbuild: 0.18.20
+      postcss: 8.4.49
+      rollup: 3.29.5
+    optionalDependencies:
+      '@types/node': 18.19.64
+      fsevents: 2.3.3
+      sass: 1.81.0
+
  vite@5.4.11(@types/node@18.19.64)(sass@1.81.0):
    dependencies:
      esbuild: 0.21.5
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,4 +3,5 @@ packages:
  - 'packages/*'
  # all packages in subdirs of components/
  - 'tests'
+  - 'examples'
  - 'e2e'
--- a/scripts/editor-preload-config.js
+++ b/scripts/editor-preload-config.js
@@ -5,6 +5,11 @@ module.exports = {
      path: "packages/xr",
      browserPath: "dist/browser.min.js"
    },
+    {
+      name: "@galacean/engine-xr-webxr",
+      path: "packages/xr-webxr",
+      browserPath: "dist/browser.min.js"
+    },
    {
      name: "@galacean/engine-ui",
      path: "packages/ui",
--- a/tests/src/core/Animator.test.ts
+++ b/tests/src/core/Animator.test.ts
@@ -4,25 +4,25 @@ import {
  AnimationFloatCurve,
  Animator,
  AnimatorConditionMode,
+  AnimatorController,
  AnimatorControllerLayer,
  AnimatorLayerBlendingMode,
  AnimatorLayerMask,
  AnimatorStateMachine,
  AnimatorStateTransition,
  Camera,
+  Entity,
  Keyframe,
  Script,
-  Transform,
-  AnimatorController,
-  WrapMode,
  StateMachineScript,
-  Entity
+  Transform,
+  WrapMode
 } from "@galacean/engine-core";
 import "@galacean/engine-loader";
 import type { GLTFResource } from "@galacean/engine-loader";
 import { Quaternion } from "@galacean/engine-math";
 import { WebGLEngine } from "@galacean/engine-rhi-webgl";
-import { vi, describe, beforeAll, expect, it, afterAll, afterEach } from "vitest";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 import { glbResource } from "./model/fox";
 const canvasDOM = document.createElement("canvas");
 canvasDOM.width = 1024;
@@ -323,7 +323,7 @@ describe("Animator test", function () {
    animator.play("Walk");

    class TestScript extends Script {
-      event0(): void {}
+      event0(): void { }
    }

    const testScript = animator.entity.addComponent(TestScript);
@@ -765,8 +765,8 @@ describe("Animator test", function () {
    animator.animatorController = animatorController;

    class TestScript extends StateMachineScript {
-      onStateEnter(animator) {}
-      onStateExit(animator) {}
+      onStateEnter(animator) { }
+      onStateExit(animator) { }
    }

    const testScript = state1.addStateMachineScript(TestScript);
@@ -1014,4 +1014,8 @@ describe("Animator test", function () {
    animator.update(0.3);
    expect(animatorLayerData[0]?.srcPlayData.state.name).to.eq("state2");
  });
+
+  it("Clone", () => {
+    expect(animator.entity.clone().getComponent(Animator).animatorController).to.eq(animator.animatorController);
+  })
 });
--- a/tests/src/core/Camera.test.ts
+++ b/tests/src/core/Camera.test.ts
@@ -1,7 +1,7 @@
 import { Camera, CameraClearFlags, Entity, Layer, ReplacementFailureStrategy, Shader } from "@galacean/engine-core";
 import { Matrix, Ray, Vector2, Vector3, Vector4 } from "@galacean/engine-math";
 import { WebGLEngine } from "@galacean/engine-rhi-webgl";
-import { describe, beforeAll, expect, it } from "vitest";
+import { beforeAll, describe, expect, it } from "vitest";

 describe("camera test", function () {
  const canvasDOM = new OffscreenCanvas(256, 256);
@@ -360,6 +360,20 @@ describe("camera test", function () {
    );
  });

+  it("clone", () => {
+    camera.isOrthographic = true;
+    camera.nearClipPlane = 1;
+    camera.farClipPlane = 255;
+    const cloneCamera = camera.entity.clone().getComponent(Camera);
+    expect(cloneCamera.isOrthographic).to.eq(camera.isOrthographic)
+    expect(cloneCamera.nearClipPlane).to.eq(camera.nearClipPlane);
+    expect(cloneCamera.farClipPlane).to.eq(camera.farClipPlane);
+    expect(cloneCamera.renderTarget).to.eq(camera.renderTarget);
+    expect(cloneCamera.shaderData).to.not.eq(camera.shaderData);
+    // @ts-ignore
+    expect(cloneCamera._globalShaderMacro).to.not.eq(camera._globalShaderMacro);
+  })
+
  it("destroy test", () => {
    camera.destroy();
  });
--- a/tests/src/core/Light.test.ts
+++ b/tests/src/core/Light.test.ts
@@ -182,6 +182,41 @@ describe("Light test", function () {
    expect(expectDirection).to.deep.eq(reverseDirection);
  });

+  it("Light clone", async () => {
+    const engine = await WebGLEngine.create({ canvas: canvasDOM });
+    const rootEntity = engine.sceneManager.activeScene.createRootEntity();
+    const lightEntity = rootEntity.createChild("light");
+    const directLight = lightEntity.addComponent(DirectLight);
+    const pointLight = lightEntity.addComponent(PointLight);
+    const spotLight = lightEntity.addComponent(SpotLight);
+
+    const cloneLightEntity = lightEntity.clone();
+    const cloneDirectLight = cloneLightEntity.getComponent(DirectLight);
+    const clonePointLight = cloneLightEntity.getComponent(PointLight);
+    const cloneSpotLight = cloneLightEntity.getComponent(SpotLight);
+
+    directLight.color.set(1, 0, 0, 1);
+    pointLight.color.set(0, 1, 0, 1);
+    spotLight.color.set(0, 0, 1, 1);
+
+    expect(directLight.shadowNearPlaneOffset).to.eq(cloneDirectLight.shadowNearPlaneOffset);
+    expect(directLight.color).to.not.eq(cloneDirectLight.color);
+    expect(directLight.viewMatrix).to.not.eq(cloneDirectLight.viewMatrix);
+    expect(directLight.inverseViewMatrix).to.not.eq(cloneDirectLight.inverseViewMatrix);
+    expect(directLight.reverseDirection).to.not.eq(cloneDirectLight.reverseDirection);
+    expect(pointLight.distance).to.eq(clonePointLight.distance);
+    expect(pointLight.color).to.not.eq(clonePointLight.color);
+    expect(pointLight.viewMatrix).to.not.eq(clonePointLight.viewMatrix);
+    expect(pointLight.inverseViewMatrix).to.not.eq(clonePointLight.inverseViewMatrix);
+    expect(spotLight.distance).to.eq(cloneSpotLight.distance);
+    expect(spotLight.angle).to.eq(cloneSpotLight.angle);
+    expect(spotLight.penumbra).to.eq(cloneSpotLight.penumbra);
+    expect(spotLight.color).to.not.eq(cloneSpotLight.color);
+    expect(spotLight.viewMatrix).to.not.eq(cloneSpotLight.viewMatrix);
+    expect(spotLight.inverseViewMatrix).to.not.eq(cloneSpotLight.inverseViewMatrix);
+    expect(spotLight.reverseDirection).to.not.eq(cloneSpotLight.reverseDirection);
+  });
+
  it("light component disabled", function () {
    directLight.enabled = false;
    pointLight.enabled = false;
--- a/tests/src/core/audio/AudioSource.test.ts
+++ b/tests/src/core/audio/AudioSource.test.ts
@@ -61,4 +61,13 @@ describe("AudioSource", () => {
      expect(audioSource.isPlaying).to.be.false;
    }
  });
+
+  it("clone", () => {
+    const cloneAudioSource = audioSource.entity.clone().getComponent(AudioSource);
+    expect(cloneAudioSource.clip).to.be.equal(audioSource.clip);
+    expect(cloneAudioSource.volume).to.be.equal(audioSource.volume);
+    expect(cloneAudioSource.playbackRate).to.be.equal(audioSource.playbackRate);
+    expect(cloneAudioSource.loop).to.be.equal(audioSource.loop);
+    expect(cloneAudioSource.mute).to.be.equal(audioSource.mute);
+  });
 });
--- a/tests/src/core/particle/ParticleTextureSheetAnimation.test.ts
+++ b/tests/src/core/particle/ParticleTextureSheetAnimation.test.ts
@@ -0,0 +1,50 @@
+
+import { Camera, ParticleRenderer, Scene } from "@galacean/engine-core";
+import { Vector2 } from "@galacean/engine-math";
+import { WebGLEngine } from "@galacean/engine-rhi-webgl";
+import { beforeAll, describe, expect, it } from "vitest";
+
+describe("TextureSheetAnimation Test", () => {
+    let engine: WebGLEngine;
+    let scene: Scene;
+    let renderer: ParticleRenderer;
+
+    beforeAll(async function () {
+        engine = await WebGLEngine.create({
+            canvas: document.createElement("canvas")
+        });
+
+        scene = engine.sceneManager.activeScene;
+        const rootEntity = scene.createRootEntity("root");
+
+        const cameraEntity = rootEntity.createChild("Camera");
+        cameraEntity.addComponent(Camera);
+        cameraEntity.transform.setPosition(0, 0, 10);
+
+        renderer = scene.createRootEntity("Renderer").addComponent(ParticleRenderer);
+        engine.run();
+    });
+    it("Tiling", () => {
+        const textureSheetAnimation = renderer.generator.textureSheetAnimation;
+        textureSheetAnimation.tiling = new Vector2(2, 2);
+        expect(textureSheetAnimation.tiling).to.deep.include({ x: 2, y: 2 });
+        // @ts-ignore
+        expect(textureSheetAnimation._tillingInfo).to.deep.include({ x: 0.5, y: 0.5, z: 4 });
+
+        textureSheetAnimation.tiling.set(1, 1);
+        expect(textureSheetAnimation.tiling).to.deep.include({ x: 1, y: 1 });
+        // @ts-ignore
+        expect(textureSheetAnimation._tillingInfo).to.deep.include({ x: 1, y: 1, z: 1 });
+    });
+
+    it("Clone", () => {
+        const textureSheetAnimation = renderer.generator.textureSheetAnimation;
+        textureSheetAnimation.tiling = new Vector2(4, 4);
+        const cloneTextureSheetAnimation = renderer.entity.clone().getComponent(ParticleRenderer).generator.textureSheetAnimation;
+        expect(cloneTextureSheetAnimation.tiling).to.deep.include({ x: 4, y: 4 });
+        // @ts-ignore
+        expect(cloneTextureSheetAnimation.tiling._onValueChanged).to.not.equal(textureSheetAnimation.tiling._onValueChanged);
+        // @ts-ignore
+        expect(cloneTextureSheetAnimation._tillingInfo).to.deep.include({ x: 0.25, y: 0.25, z: 16 });
+    })
+}); 
--- a/tests/src/loader/GLTFLoader.test.ts
+++ b/tests/src/loader/GLTFLoader.test.ts
@@ -393,7 +393,7 @@ beforeAll(async function () {

 afterAll(() => {
  @registerGLTFParser(GLTFParserType.Schema)
-  class test extends GLTFSchemaParser {}
+  class test extends GLTFSchemaParser { }
 });

 describe("glTF Loader test", function () {
--- a/tests/src/loader/KTX2Loader.test.ts
+++ b/tests/src/loader/KTX2Loader.test.ts
@@ -1,7 +1,7 @@
-import { WebGLEngine } from "@galacean/engine-rhi-webgl";
+import { GLCapabilityType, Texture2D, TextureFormat } from "@galacean/engine-core";
 import { KTX2Loader } from "@galacean/engine-loader";
-import { Texture2D, TextureFormat, GLCapabilityType } from "@galacean/engine-core";
-import { describe, beforeAll, afterAll, expect, it } from "vitest";
+import { WebGLEngine } from "@galacean/engine-rhi-webgl";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";

 let engine: WebGLEngine;