实时预览

Zephyr3D 编辑器提供实时预览功能，用于在浏览器中运行当前项目，查看脚本逻辑与动画效果的实际运行状态。

预览功能说明

所有脚本逻辑（如 TypeScript 脚本中的游戏逻辑、交互逻辑等）
所有动画逻辑（包括关键帧动画、骨骼动画、顶点动画等）

仅在预览运行时才会执行并可见：

在编辑器静态状态下，这些逻辑不会被执行；
场景中的脚本行为、动画播放、交互响应等，都需要通过预览来验证。

换言之：要检查“实际运行效果”，必须通过实时预览。

预览前的项目设置

在启动预览之前，需要先配置项目的基本运行参数。
项目设置面板中主要包含以下选项：

1. Title（应用标题）

用途：设置运行时网页窗口的标题。
默认值：当前项目名称。
建议：
- 可填写产品名 / Demo 名称 / 内部版本标识，例如：Zephyr3D Terrain Demo。

2. Favicon（页面图标）

用途：设置浏览器标签页左侧显示的小图标。
是否必填：否（可选）。
说明：
- 若未配置，将使用浏览器默认图标或系统预设图标；
- 建议使用方形 PNG/ICO/SVG 图标资源。

3. Splash Screen（闪屏）

用途：设置应用启动时显示的闪屏画面（如 Logo、加载页）。
是否必填：否（可选）。
说明：
- 适合用于展示项目 Logo、版本信息或加载提示；
- 若不设置，则启动时可能直接进入场景或使用默认加载界面。

4. Startup Scene（启动场景）

用途：指定应用启动时首先加载并运行的场景。
与 Startup Script 的关系：与 Startup Script 二者必须至少填写其一。
说明：
- 当仅设置了启动场景而未设置启动脚本时，应用将在加载该场景后直接进入该场景；
- 通常适用于以场景为主导的静态/半静态 Demo、关卡展示等。

5. Startup Script（启动脚本）

用途：指定应用启动时首先执行的脚本入口。
与 Startup Scene 的关系：与 Startup Scene 二者必须至少填写其一。

Startup Script 与 Startup Scene 的优先级与执行顺序

当 Startup Script 和 Startup Scene 同时填写 时：
1. 应用启动后，首先执行 Startup Script；
2. Startup Script 对应脚本的 onCreated 与 onAttached 生命周期回调会先后被完整执行；
3. 仅当上述回调全部执行完毕后，才会去加载 Startup Scene；
4. 在 Startup Scene 加载完成后：
  - 绑定到 Startup Scene 的脚本（作为场景节点的绑定脚本）会按正常生命周期执行；
  - 你可以将场景内的行为逻辑拆分到这些绑定脚本中，与 Startup Script 配合使用。
当 只填写 Startup Script、不填写 Startup Scene 时：
- 引擎不会自动加载任何场景；
- 你可以在 Startup Script 内 手动加载场景，例如：
  - 按条件决定加载哪个场景；
  - 分步骤加载多个场景（主场景 + 叠加 UI 场景等）；
  - 实现更灵活的启动流程控制。

约束规则：
Startup Scene 和 Startup Script 必须至少配置一个；
若两者都配置，Startup Script 拥有更高优先级：其 onCreated / onAttached 完成之后才会加载 Startup Scene；
启动后与 Startup Scene 绑定的脚本可以作为场景逻辑脚本使用，也可完全依赖 Startup Script 中的手动场景加载与控制逻辑。

6. Target RHIs（目标渲染后端）

用途：指定运行时可选的渲染后端（RHI, Rendering Hardware Interface）。
可选项（多选）：
- WebGL
- WebGL2
- WebGPU
启动时的选择逻辑：
- 应用启动时，会在你勾选的选项中，按以下优先级顺序查找可用的渲染后端：
  1. WebGPU
  2. WebGL2
  3. WebGL
- 一旦在当前浏览器/设备环境中找到第一个可用且被勾选的后端，即使用该后端运行应用。
示例：
- 若勾选了 WebGL2 和 WebGPU：
  - 在支持 WebGPU 的浏览器上，将优先使用 WebGPU；
  - 在仅支持 WebGL2 的浏览器上，将退回使用 WebGL2。
- 若只勾选了 WebGL：
  - 即使环境支持更高级的 WebGPU / WebGL2，也只会使用 WebGL。

启动实时预览

完成项目设置后，可以通过工具栏中的 播放按钮（Play） 启动实时预览：

在编辑器工具栏中，找到并点击 Play 按钮；
编辑器会在新窗口或新浏览器标签页中打开运行页面；
在新打开的页面中：
- 项目会根据项目设置中的 Startup Scene / Startup Script 启动；
- 所有脚本逻辑开始执行；
- 所有关联动画进入实际运行状态；
- 你可以进行交互操作、观察运行表现、调试逻辑与动画效果。

提示：
若修改了脚本、动画或项目设置，需要重新点击 Play 按钮，以新的配置重新运行预览；
可以同时打开编辑器和预览页面，在编辑器中修改内容，随后重新启动预览验证效果。

以下视频演示中，我们在场景中添加了一个立方体并给他添加了一个自动播放的绕Y轴旋转的动画，然后保存为启动场景并进行预览：

实时预览 ​

预览功能说明 ​

预览前的项目设置 ​

1. Title（应用标题） ​

2. Favicon（页面图标） ​

3. Splash Screen（闪屏） ​

4. Startup Scene（启动场景） ​

5. Startup Script（启动脚本） ​

Startup Script 与 Startup Scene 的优先级与执行顺序 ​

6. Target RHIs（目标渲染后端） ​

启动实时预览 ​