Galacean Engine

https://galacean.antgroup.com/engine/docs
Admin
Galacean Engine is a 3D engine offering comprehensive features for graphics, animation, physics, UI,...
Tokens:601,729
Snippets:1,357
Trust Score:9.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Importing Hair Example

Source: https://galacean.antgroup.com/engine/docs/graphics/material/builtinShaders/digitalHuman/hair

Instructions on how to import and use the hair example provided by Galacean to get started with hair rendering. This involves navigating the Galacean editor and downloading the hair template.

```APIDOC
1. Navigate to the editor homepage in the Galacean editor.
2. Select the **Templates** panel, navigate to the template interface, preview, and download the hair example to your **Project**.
```

--------------------------------

### Getting Started with Galacean XR

Source: https://galacean.antgroup.com/engine/docs/xr/overall

Provides guidance on quickly developing and debugging XR interactions without specialized knowledge, and resources for deeper understanding.

```APIDOC
Quick Start:

This section enables you to:

*   Quickly [develop XR interactions](https://galacean.antgroup.com/engine/docs/xr/quickStart/develop/) and [debug XR interactions](https://galacean.antgroup.com/engine/docs/xr/quickStart/debug/) without prior expertise.
*   For a deep dive into Galacean XR, refer to [XR Core Logic](https://galacean.antgroup.com/engine/docs/xr/system/manager/).
*   Understand project risks by reviewing [XR Compatibility](https://galacean.antgroup.com/engine/docs/xr/compatibility/).
```

--------------------------------

### Example File Structure for Split Examples

Source: https://galacean.antgroup.com/engine/docs/how-to-contribute

Illustrates how to split large examples into multiple files within the `examples` directory. By including an `index.ts` file, the system automatically detects and injects dependent files into the workspace during example page generation.

```ts
// examples/my-split-example/index.ts
// Import other files like asset lists or config files
// import assetList from './assetList.json';
// import guiConfig from './gui-config.ts';

// Main example logic here...
```

--------------------------------

### Import Skin Example

Source: https://galacean.antgroup.com/engine/docs/graphics/material/builtinShaders/digitalHuman/skin

Instructions on how to import and use the skin material example within the Galacean editor. This involves navigating to the editor's homepage, selecting the 'Templates' panel, and downloading the skin example project.

```APIDOC
Import Skin Example:

1. Navigate to the editor homepage in the Galacean editor.
2. Select the 'Templates' panel.
3. Preview and download the skin example to your 'Project'.
```

--------------------------------

### Install Galacean Engine

Source: https://galacean.antgroup.com/engine/docs/basics/overview

Demonstrates how to install the core Galacean Engine package using npm.

```bash
npm install --save @galacean/engine
```

--------------------------------

### Install Galacean Engine using NPM

Source: https://galacean.antgroup.com/engine/docs/basics/version

Demonstrates how to install the @galacean/engine package using NPM and import core components like WebGLEngine and Camera.

```bash
npm install --save @galacean/engine
```

```javascript
import { WebGLEngine, Camera } from "@galacean/engine";
```

--------------------------------

### Camera Component Scripting Example

Source: https://galacean.antgroup.com/engine/docs/graphics/camera/component

Demonstrates how to get a Camera component from an entity and set various rendering properties via script, such as enabling post-processing, HDR, and FXAA anti-aliasing.

```javascript
// 从挂载相机的节点上获取相机组件
const camera = entity.getComponent(Camera);
// 开启后处理
camera.enablePostProcess = true;
// 开启 HDR
camera.enableHDR = true;
// 开启 FXAA
camera.antiAliasing = AntiAliasing.FXAA;
// 保留 Alpha 通道
camera.isAlphaOutputRequired = true;
```

--------------------------------

### Installing Galacean Engine Lottie Package

Source: https://galacean.antgroup.com/engine/docs/graphics/2D/lottie

Provides the npm command to install the necessary Lottie package for the Galacean Engine, which is required when integrating Lottie animations into a project.

```bash
npm install @galacean/engine-lottie --save

```

--------------------------------

### Importing Eye Example in Galacean Editor

Source: https://galacean.antgroup.com/engine/docs/graphics/material/builtinShaders/digitalHuman/eye

Provides a step-by-step guide on how to import and utilize the built-in eye material example within the Galacean editor. This facilitates quick integration and experimentation with realistic eye rendering.

```APIDOC
Importing Eye Example:

1. Navigate to the editor homepage in the Galacean editor.
2. Select the 'Templates' panel.
3. Browse to the template interface, preview, and download the eye example to your project.
```

--------------------------------

### Implementing Animation Transitions in Galacean

Source: https://galacean.antgroup.com/engine/docs/animation/examples/crossFade

This example demonstrates how to implement animation transitions within the Galacean editor. It guides users through the process of transitioning from one animation to another, covering preparation, model import, animation controller creation, editing, and previewing.

```zh
## [0. 准备工作](https://galacean.antgroup.com/engine/docs/animation/examples/crossFade#0-%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C%E5%B7%A5)
在开始之前，我们需要有一个包含多个动画的模型。如果你没有模型，可以在点此下载 [模型](https://mdn.alipayobjects.com/oasis_be/afts/file/A*AN3aSZzEijkAAAAAAAAAAAAADkp5AQ/player.glb)。
在实际项目中强烈建议将FBX模型通过Blender等第三方工具转换为GLB/GLTF格式。Galacean目前仅支持解析GLB/GLTF模型。虽然可以直接将FBX拖入编辑器进行自动转换，但这种方式可能会导致转换后的模型动画数据过大，并可能出现还原问题。使用专业工具进行转换可以更好地控制转换质量和文件大小。
### [导入模型](https://galacean.antgroup.com/engine/docs/animation/examples/crossFade#%E5%AF%BC%E5%85%A5%E6%A8%A1%E5%9E%8B)
如果你不清楚如何导入模型，请参考：[导入模型](https://galacean.antgroup.com/engine/docs/animation/examples/playAnimation/#%E5%AF%BC%E5%85%A5%E6%A8%A1%E5%9E%8B)
## [1. 查看模型](https://galacean.antgroup.com/engine/docs/animation/examples/crossFade#1-%E6%9F%A5%E7%9C%8B%E6%A8%A1%E5%9E%8B)
点击模型资产上的展开按钮
可以看到模型中包含了三个 [动画片段](https://galacean.antgroup.com/engine/docs/animation/clip/) 资产, 以及一个 [动画控制器](https://galacean.antgroup.com/engine/docs/animation/animatorController/) 资产
## [2. 创建动画控制资产](https://galacean.antgroup.com/engine/docs/animation/examples/crossFade#2-%E5%88%9B%E5%BB%BA%E5%8A%A8%E7%94%BB%E6%8E%A7%E5%88%B6%E8%B5%84%E4%BA%A7)
想要控制模型的动画播放，需要编辑 `动画控制器` 的内容，而模型中的 `动画控制器` 是只读的，所以需要我们自己创建一个 `动画控制器` 。 如果你不知道如何创建 `动画控制器` ，请参考：[创建动画控制器](https://galacean.antgroup.com/engine/docs/animation/examples/playAnimation/#2-%E5%88%9B%E5%BB%BA%E5%8A%A8%E7%94%BB%E6%8E%A7%E5%88%B6%E8%B5%84%E4%BA%A7)
## [3. 编辑动画控制器](https://galacean.antgroup.com/engine/docs/animation/examples/crossFade#3-%E7%BC%96%E8%BE%91%E5%8A%A8%E7%94%BB%E6%8E%A7%E5%88%B6%E5%99%A8)
  1. 打开动画控制器编辑器，添加三个 `动画状态` ，分别绑定模型中的三个 `动画片段`


如果你不知道如何创建 `动画状态` 并绑定 `动画片段` ，请参考：[编辑动画控制器](https://galacean.antgroup.com/engine/docs/animation/examples/playAnimation/#3-%E7%BC%96%E8%BE%91%E5%8A%A8%E7%94%BB%E6%8E%A7%E5%88%B6%E5%99%A8)
  1. 创建 `动画过渡`（关于动画过渡的详细介绍请参考 [动画状态机](https://galacean.antgroup.com/engine/docs/animation/state-machine/#%E5%8A%A8%E7%94%BB%E8%BF%87%E6%B8%A1) 文档的动画过渡部分）：将 `idle` 动画连接到 `entry`，并点击连线将 `Duration` 改为 0，这样在这个动画控制器被应用时，角色就会播放 `idle` 动画。


  1. 以同样的方式将 `idle` 连接到 `walk`，将 `walk` 连接到 `run`， 将 `run` 连接到 `exit`, 这样角色就会在播完 `idle` 动画后，自动过渡到 `walk` 动画，再过渡到 `run` 动画，最后到 `exit` 退出，重新进入 `entry`，来循环播放这段动画。


## [4. 使用动画控制器并预览](https://galacean.antgroup.com/engine/docs/animation/examples/crossFade#4-%E4%BD%BF%E7%94%A8%E5%8A%A8%E7%94%BB%E6%8E%A7%E5%88%B6%E5%99%A8%E5%B9%B6%E9%A2%84%E8%A7%88)
绑定 `动画控制器`（如果你不知道如何绑定 `动画控制器` ，请参考：[使用动画控制器](https://galacean.antgroup.com/engine/docs/animation/examples/playAnimation/#4-%E4%BD%BF%E7%94%A8%E5%8A%A8%E7%94%BB%E6%8E%A7%E5%88%B6%E5%99%A8)文档）之后点击播放按钮，可以看到模型从 `idle` 过渡到 `walk`，再过渡到 `run`，最后退出，重新回到 `idle` 状态。
实际项目中，将 `run` 连接到 `idle` 可能是更好的选择，这样角色在播完 `run` 动画后，会过渡到 `idle` 动画，而不是直接重新播放，本示例仅是为了演示 `exit` 的效果。
```

--------------------------------

### Text Animation Example in Galacean Editor

Source: https://galacean.antgroup.com/engine/docs/animation/examples/text-animation

This example demonstrates how to create text animations within the Galacean editor. It guides users through preparing the scene by adding a text renderer component, creating an animation clip, and setting up the animation clip editor. The process involves selecting an entity, creating an animation clip asset, and configuring the animation state machine.

```zh
## [0. 准备工作](https://galacean.antgroup.com/engine/docs/animation/examples/text-animation#0-%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C)
在开始之前，我们需要在 `实体` 上添加一个 `文本渲染器` 组件。
## [1. 创建动画片段](https://galacean.antgroup.com/engine/docs/animation/examples/text-animation#1-%E5%88%9B%E5%BB%BA%E5%8A%A8%E7%94%BB%E7%89%87%E6%AE%B5)
添加好组件后， 我们需要创建一个 `动画片段`（关于动画片段的介绍，请参考 [动画片段](https://galacean.antgroup.com/engine/docs/animation/clip/) 文档）创建 `动画片段` 有两种方式：
  1. 右键点击 **[资产面板](https://galacean.antgroup.com/engine/docs/assets/interface/)** 中的空白处，选择 `Create` -> `Animation Clip`


  1. 点击添加资产按钮 `+`，选择 `Animation Clip`


## [2. 打开动画片段编辑器](https://galacean.antgroup.com/engine/docs/animation/examples/text-animation#2-%E6%89%93%E5%BC%80%E5%8A%A8%E7%94%BB%E7%89%87%E6%AE%B5%E7%BC%96%E8%BE%91%E5%99%A8)
  1. 双击刚刚创建的 `动画片段` 资产


  1. 选择 `实体`，根据提示，我们需要在 **[层级面板](https://galacean.antgroup.com/engine/docs/interface/hierarchy/)** 选择一个 `实体` 作为编辑动画的目标。


选择编辑器默认创建的 `实体`（你也可以点击层级面板的 `+` 按钮创建一个新的）
  1. 点击动画片段编辑器的 `Create` 按钮，编辑器会为你做好一些准备工作，本示例你可以先忽略对这些概念的理解。


上述的准备工作包含：
  1. 为你选择的 `实体` 创建一个 `动画控制组件` （[详细介绍](https://galacean.antgroup.com/engine/docs/animation/animator/)），以及创建一个 `动画控制器` （[详细介绍](https://galacean.antgroup.com/engine/docs/animation/examples/(/docs/animation/animatorController/)/)） 资产。
  2. `动画控制器` 内会包含一个 `动画状态`，并且 `动画状态` 会自动绑定你选择的 `动画片段`，并连接到 `entry` 节点上（关于 `entry` 节点的详细介绍请参考 [动画状态机](https://galacean.antgroup.com/engine/docs/animation/state-machine/) 文档）。
  3. `动画控制组件` 会自动绑定 `动画控制器`。


创建完成之后，你会打开动画片段编辑器，如图所示：
## [3. 设置测试文字并切换到2D视图](https://galacean.antgroup.com/engine/docs/animation/examples/text-animation#3-%E8%AE%BE%E7%BD%AE%E6%B5%8B%E8%AF%95%E6%96%87%E5%AD%97%E5%B9%B6%E5%88%87%E6%8D%A2%E5%88%B02d%E8%A7%86%E5%9B%BE)
  1. 在 `实体` 上的 `文本渲染器` 组件的 `文本` 属性中输入 `Hello World`，并设置 `字体大小` 为 `200`。你也可以按需设置其他属性，关于文字的更多信息，请参考 [文本渲染器](https://galacean.antgroup.com/engine/docs/graphics/2D/text/) 文档。


  1. 切换到 `2D` 视图
```

--------------------------------

### Initialize Engine with Lite Physics

Source: https://galacean.antgroup.com/engine/docs/physics/overall

Demonstrates how to initialize the Galacean engine using the Lite physics backend. This backend is optimized for simple interaction scenarios and has a smaller footprint.

```javascript
import {LitePhysics} from"@galacean/engine-physics-lite";
constengine=awaitWebGLEngine.create({
  canvas: htmlCanvas,
  physics:newLitePhysics(),
});
```

--------------------------------

### JavaScript Post-Processing Example

Source: https://galacean.antgroup.com/engine/docs/graphics/postProcess/postProcess

This JavaScript code snippet demonstrates how to interact with the post-processing system in the Galacean Engine. It shows how to get a post-processing component, set its properties, add or retrieve effects like BloomEffect, and adjust effect parameters such as intensity and threshold.

```javascript
// Get the post-processing component
const postProcessComponent = entity.getComponent(PostProcess);

// Set properties of the post-processing component
postProcessComponent.isGlobal = false;

// Get an existing post-processing effect
const bloomEffect = postProcessComponent.getEffect(BloomEffect);

// Alternatively, manually add a post-processing effect
const bloomEffect = postProcessComponent.addEffect(BloomEffect);

// Set properties of the post-processing effect
bloomEffect.intensity.value = 1;
bloomEffect.threshold.value = 0.5;
```

--------------------------------

### Flappy Bird Tutorial: Scene Setup

Source: https://galacean.antgroup.com/engine/docs/basics/quickStart/flappy-bird

This section guides through the process of building the game scene for Flappy Bird. It explains how to add background elements, the bird character with frame animations, pipes with scaling and tiling adjustments, and the ground with tiling and animation.

```zh
## [搭建场景](https://galacean.antgroup.com/engine/docs/basics/quickStart/flappy-bird#%E6%90%AD%E5%BB%BA%E5%9C%BA%E6%99%AF)
搭建 2D 场景就像玩拼图一样充满乐趣。首先，我们试着把游戏背景图从资源面板拖动场景中。不要怕拖的位置不准，只要拖到大概的位置，我们后面可以在 **[检查器面板](https://galacean.antgroup.com/engine/docs/interface/inspector/)** 中精细调整。
选中层级树面板中的 `Camera` 节点，可以预览场景在各种设备上渲染的样子。
> 如果你发现画面太大或太小，可以调整正交相机的 `Orthographic Size` 来实现缩放。
### [加上小鸟](https://galacean.antgroup.com/engine/docs/basics/quickStart/flappy-bird#%E5%8A%A0%E4%B8%8A%E5%B0%8F%E9%B8%9F)
同样，我们把小鸟的 Sprite（`bird3-spr.png`）也拖到场景中。小鸟“飞”的动画是通过序列帧实现的，详见[帧动画](https://galacean.antgroup.com/engine/docs/animation/sprite-sheet/)。
### [加上管道](https://galacean.antgroup.com/engine/docs/basics/quickStart/flappy-bird#%E5%8A%A0%E4%B8%8A%E7%AE%A1%E9%81%93)
随着游戏的进行，管道会在画面中重复出现，并且是上下成对出现。这里有个小技巧，可以把上面的管道的 `Scale` 值设成 `-1`，这样就优雅地实现了翻转。
在游戏过程中，产生管道的高度也是随机的，但是我们手上的资产高度却是固定的。不用急，只需要调整一下`精灵渲染模式`即可，这样可以让我们`无损`拉伸某些资产哦。
这里有个小技巧，将引用 `sprite` 资产的 `pivot` 属性设置为 `buttom` 就可以避免每次调整高度的时候重新锚定位置了。
考虑到管道会重复出现，我们在节点树中把一对管道设置成一个 `PipeMother` 的组，并把它放到 `Pipe` 节点下。这样，后面通过在 Pipe 上绑定脚本组件就可以获取 `PipeMother` 以实现管道的复用。
### [加上草地](https://galacean.antgroup.com/engine/docs/basics/quickStart/flappy-bird#%E5%8A%A0%E4%B8%8A%E8%8D%89%E5%9C%B0)
我们可以通过结合`精灵渲染模式`与 `动画片段编辑` 来实现草地来实现草地在地上平铺且能水平移动的效果。
步骤如下：
  1. 在节点树中创建一个节点，命名为 `ground`。
  2. 在 **[检查器面板](https://galacean.antgroup.com/engine/docs/interface/inspector/)** 中通过 `Add Component` 按钮添加 `Sprite Renderer` 组件，并且把 `SpriteRenderer DrawMode Info` 属性设置成 `Tiled`，并将宽度设置为 `8.14`
  3. 此时就得到了一个平铺完毕的地面，接下来我们可以通过创建动画片段来让它动起来！详见[动画片段编辑](https://galacean.antgroup.com/engine/docs/animation/clip/)。


### [添加遮罩](https://galacean.antgroup.com/engine/docs/basics/quickStart/flappy-bird#%E6%B7%BB%E5%8A%A0%E9%81%AE%E7%BD%A9)
添加完地面后发现，左右显示好像穿帮了！对于这种情况，只需要为精灵渲染器增加遮罩就好了，详见[精灵遮罩组件](https://galacean.antgroup.com/engine/docs/graphics/2D/spriteMask/)
### [加上 GUI](https://galacean.antgroup.com/engine/docs/basics/quickStart/flappy-bird#%E5%8A%A0%E4%B8%8A-gui)
GUI 包括分数显示和重新开始按钮。我们分数（ `0.png`） 和重新开始按钮（ `restart.png`） 两个精灵拖到场景中，并放到新建的 `GUI` 节点下。
至此，界面搭建完毕！观察一下左侧的节点树的完整结构，好的树结构对复杂场景管理来说很重要。
> 如果你在上述过程中需要处理精灵之间的遮盖关系，就像 CSS 里的 `z-index` 属性一样，你可以通过 `Sprite Renderer` 的 `priority` 属性来设置，值越大越后渲染，即越能遮住其他精灵。
### [增加物理反馈](https://galacean.antgroup.com/engine/docs/basics/quickStart/flappy-bird#%E5%A2%9E%E5%8A%A0%E7%89%A9%E7%90%86%E5%8F%8D%E9%A6%88)
在此项目中，我们需要为**小鸟在触碰到水管或地面** 和**鼠标在点击重开按钮** 时增加物理反馈，增加物理反馈只需要两步：
  * 添加碰撞体
  * 处理碰撞回调
```

--------------------------------

### Initialize WebGLEngine

Source: https://galacean.antgroup.com/engine/docs/core/engine

Demonstrates how to create a WebGLEngine instance for web environments, supporting WebGL1.0 and WebGL2.0. It outlines the necessary configuration parameters for canvas, color space, graphics device options, and loader configurations.

```javascript
const engine = await WebGLEngine.create({
  canvas: "canvas-id",
  colorSpace: { ... },
  graphicDeviceOptions: { ... },
  gltf: { ... },
  ktx2Loader: { ... }
});
```

--------------------------------

### Galacean Engine Basics: Overview

Source: https://galacean.antgroup.com/engine/docs/how-to-contribute

Provides an overview of the Galacean Engine, its purpose, and fundamental concepts. This section is ideal for new users to understand the engine's capabilities.

```APIDOC
Galacean Engine Overview:

Galacean is a high-performance, cross-platform 3D engine designed for creating interactive experiences. It emphasizes ease of use, flexibility, and efficient rendering.

Key Features:
- Core Engine: Manages scene graph, rendering pipeline, and asset management.
- Scene Management: Supports hierarchical scene structures with entities and components.
- Asset Pipeline: Efficient loading and management of various asset types (models, textures, animations).
- Rendering: Advanced rendering capabilities including PBR, post-processing, and shader support.
- Animation System: Robust animation playback, blending, and state machines.
- Physics Engine: Integrated physics simulation for realistic interactions.
- Scripting: Allows custom logic implementation using JavaScript/TypeScript.
- UI System: Tools for creating user interfaces within the 3D environment.
- XR Support: Capabilities for developing Virtual Reality and Augmented Reality experiences.
- Multi-platform Deployment: Export projects to various platforms like H5 and WeChat Mini Games.
```

--------------------------------

### Animation Blending in Galacean

Source: https://galacean.antgroup.com/engine/docs/animation/examples/blending

This example demonstrates how to achieve multi-layer animation blending within the Galacean editor. It guides users through adding animation layers, configuring animation states, adjusting layer weights, and modifying blending modes to achieve desired animation effects. It assumes basic familiarity with the animation editor.

```zh
## 动画混合
本示例展示了如何在 Galacean 编辑器中实现动画的多层混合。通过简单的步骤，你将学习如何让一个模型混合播放多个动画。 如果你是第一次使用动画编辑器，建议先阅读前面几篇文档：
[1.播放模型中的动画](https://galacean.antgroup.com/engine/docs/animation/examples/playAnimation/)
[2.动画复用](https://galacean.antgroup.com/engine/docs/animation/examples/reuseAnimation/)
[3.动画过渡](https://galacean.antgroup.com/engine/docs/animation/examples/crossFade/)

## [0. 准备工作](https://galacean.antgroup.com/engine/docs/animation/examples/blending#0-%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C)
  1. 在开始之前，我们需要有一个有动画的模型并且它需要包含一个适合混合的动画。如果你没有模型，可以在点此下载 [模型](https://mdn.alipayobjects.com/oasis_be/afts/file/A*N99IQYh_g5YAAAAAAAAAAAAADkp5AQ/player.glb)。 然后我们将其拖入到场景中。
  2. 我们要有一个已编辑好的 `动画控制器` 。请参考：[编辑动画控制器](https://galacean.antgroup.com/engine/docs/animation/examples/crossFade/#3-%E7%BC%96%E8%BE%91%E5%8A%A8%E7%94%BB%E6%8E%A7%E5%88%B6%E5%99%A8)。


## [1. 添加一个动画层](https://galacean.antgroup.com/engine/docs/animation/examples/blending#1-%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%8A%A8%E7%94%BB%E5%B1%82)
想要对动画进行混合播放，需要在动画控制器中添加一个 `动画层` 。当 `动画控制组件` 运行时，所有的 `动画层` 都会一起运行，多个 `动画层` 通过不同的权重来实现动画的混合。 关于 `动画层` 的详细介绍请参考 [动画层](https://galacean.antgroup.com/engine/docs/animation/layer/) 文档。
在 `Layers` 面板点击 `+` 添加一个 `动画层`
## [2. 编辑动画层](https://galacean.antgroup.com/engine/docs/animation/examples/blending#2-%E7%BC%96%E8%BE%91%E5%8A%A8%E7%94%BB%E5%B1%82)
添加一个 `动画状态`（如果你不知道如何添加，请参考：[播放模型中的动画](https://galacean.antgroup.com/engine/docs/animation/examples/playAnimation/)），绑定模型中的 **"shakeHead"** `动画片段`，并从 `entry` 连接到这个 `动画状态`，可以根据需要调整 `entry` 到这个 `动画状态`的过渡时间。
编辑之后为模型绑定此 `动画控制器` 。
## [3. 调整动画层权重](https://galacean.antgroup.com/engine/docs/animation/examples/blending#3-%E8%B0%83%E6%95%B4%E5%8A%A8%E7%94%BB%E5%B1%82%E6%9D%83%E9%87%8D)
新添加的 `动画层` 的默认混合模式是 `Override`，我们先预览下效果。
可以看到我们之前在 `Base` 动画层添加的 `动画状态` 都失效了，因为混合模式是 `Override`，它会覆盖掉它下面的所有 `动画层` ，我们可以调整 `Layer1` 的权重看看权重对其的影响。
可以看到随着权重减少 `Layer1` 对动画的影响越小，而 `Base` 对动画的影响越大。
## [4. 调整混合模式](https://galacean.antgroup.com/engine/docs/animation/examples/blending#4-%E8%B0%83%E6%95%B4%E6%B7%B7%E5%90%88%E6%A8%A1%E5%BC%8F)
在本示例中，我们不希望 `Layer1` 的权重影响到 `Base` 动画层，因此我们将 `Layer1` 的混合模式修改为 `Additive`。
这样 `Layer1` 的动画会叠加到 `Base` 动画层上，它的权重修改只影响自身，而不会影响 `Base` 层的动画。 为了更好的观察 `Additve` 的效果，我们删掉 `Base` 层 `run` 到 `exit` 的过渡。
[](https://github.com/galacean/engine/tree/main/docs/zh/animation/examples/blending.mdx)
```

--------------------------------

### Initialize Engine with PhysX Physics

Source: https://galacean.antgroup.com/engine/docs/physics/overall

Demonstrates how to initialize the Galacean engine using the PhysX physics backend. This backend leverages the PhysX engine compiled via WebAssembly for advanced physics features and precise simulation.

```javascript
import { PhysXPhysics } from"@galacean/engine-physics-physx";
constengine=awaitWebGLEngine.create({
  canvas: htmlCanvas,
  physics:newPhysXPhysics(),
});
```

--------------------------------

### Galacean Engine Basics: Overview

Source: https://galacean.antgroup.com/engine/docs/core/prefab

Provides an overview of the Galacean Engine, its purpose, and fundamental concepts. This section is ideal for new users to understand the engine's capabilities.

```APIDOC
Galacean Engine Overview:

Galacean is a high-performance, cross-platform 3D engine designed for creating interactive experiences. It emphasizes ease of use, flexibility, and efficient rendering.

Key Features:
- Core Engine: Manages scene graph, rendering pipeline, and asset management.
- Scene Management: Supports hierarchical scene structures with entities and components.
- Asset Pipeline: Efficient loading and management of various asset types (models, textures, animations).
- Rendering: Advanced rendering capabilities including PBR, post-processing, and shader support.
- Animation System: Robust animation playback, blending, and state machines.
- Physics Engine: Integrated physics simulation for realistic interactions.
- Scripting: Allows custom logic implementation using JavaScript/TypeScript.
- UI System: Tools for creating user interfaces within the 3D environment.
- XR Support: Capabilities for developing Virtual Reality and Augmented Reality experiences.
- Multi-platform Deployment: Export projects to various platforms like H5 and WeChat Mini Games.
```

--------------------------------

### Install Dependencies (H5)

Source: https://galacean.antgroup.com/engine/docs/platform/h5

Command to install project dependencies for an H5 exported project.

```bash
npmi或者pnpmi
```

--------------------------------

### Galacean Engine Basics: Overview

Source: https://galacean.antgroup.com/engine/docs/basics/benchmark

Provides an overview of the Galacean Engine, its purpose, and fundamental concepts. This section is ideal for new users to understand the engine's capabilities.

```APIDOC
Galacean Engine Overview:

Galacean is a high-performance, cross-platform 3D engine designed for creating interactive experiences. It emphasizes ease of use, flexibility, and efficient rendering.

Key Features:
- Core Engine: Manages scene graph, rendering pipeline, and asset management.
- Scene Management: Supports hierarchical scene structures with entities and components.
- Asset Pipeline: Efficient loading and management of various asset types (models, textures, animations).
- Rendering: Advanced rendering capabilities including PBR, post-processing, and shader support.
- Animation System: Robust animation playback, blending, and state machines.
- Physics Engine: Integrated physics simulation for realistic interactions.
- Scripting: Allows custom logic implementation using JavaScript/TypeScript.
- UI System: Tools for creating user interfaces within the 3D environment.
- XR Support: Capabilities for developing Virtual Reality and Augmented Reality experiences.
- Multi-platform Deployment: Export projects to various platforms like H5 and WeChat Mini Games.
```

--------------------------------

### Galacean Engine Audio Overview

Source: https://galacean.antgroup.com/engine/docs/graphics/material/examples/shaderData

Provides a general overview of the audio system in the Galacean Engine, covering audio playback, spatial audio, and audio asset management.

```APIDOC
Audio System Overview:

The Galacean Engine provides a robust audio system for incorporating sound into your applications. Key features include:

- Audio Playback: Playback of various audio formats.
- Spatial Audio: Support for 3D positional audio, allowing sounds to originate from specific points in space.
- Audio Components: Components like AudioSource for managing sound playback on entities.
- Audio Assets: Loading and managing audio files (e.g., .wav, .mp3).

Core Components:
  - AudioManager: Manages global audio settings and playback.
  - AudioSource: A component that plays an AudioClip attached to an Entity. It can be configured for spatial audio properties like volume, pitch, and falloff.
  - AudioClip: Represents an audio file loaded into the engine.

Usage:
1. Load audio files as AudioClips.
2. Attach an AudioSource component to an Entity.
3. Assign an AudioClip to the AudioSource.
4. Control playback using methods like play(), pause(), and stop().
5. Configure spatial audio properties for positional sound effects.
```

--------------------------------

### Initialize Engine with Custom Input Listeners

Source: https://galacean.antgroup.com/engine/docs/input/input

Demonstrates how to initialize the WebGLEngine while specifying custom event listeners for input devices. It shows setting the `pointerTarget` to `document` for touch events and provides a note about setting `tabIndex` for HTML elements used as keyboard listeners.

```javascript
const engine = await WebGLEngine.create({
  canvas,
  input: {
    pointerTarget: document,
  },
});
```

--------------------------------

### ShaderLab Runtime Variable Assignment Example

Source: https://galacean.antgroup.com/engine/docs/graphics/material/shaderLab/renderState

Provides an example of how to set a shader variable at runtime using a JavaScript API, corresponding to a variable assignment in ShaderLab.

```JavaScript
ShaderData.setInt("material_DstBlend", BlendFactor.SourceColor);
```

--------------------------------

### Document Structure and Configuration (_meta.json)

Source: https://galacean.antgroup.com/engine/docs/how-to-contribute

Explains how to structure new documentation and configure its order and titles using a `_meta.json` file. This is crucial for organizing content in the new website, where file paths correspond to routes.

```json
{
  "title": "Document Title",
  "group": "Document Subtitle",
  "banner": "Header Image URL"
}
```

--------------------------------

### Transforming Entities (Rotation Example)

Source: https://galacean.antgroup.com/engine/docs/script/class

Entities can be transformed, such as rotating them, using methods like setRotation on the transform component. This example demonstrates rotating an entity in the onUpdate lifecycle method.

```typescript
this.entity.transform.setRotation(0, 5, 0);
```

--------------------------------

### Galacean Engine Basics: Overview

Source: https://galacean.antgroup.com/engine/docs/xr/compatibility

Provides an overview of the Galacean Engine, its purpose, and fundamental concepts. This section is ideal for new users to understand the engine's capabilities.

```APIDOC
Galacean Engine Overview:

Galacean is a high-performance, cross-platform 3D engine designed for creating interactive experiences. It emphasizes ease of use, flexibility, and efficient rendering.

Key Features:
- Core Engine: Manages scene graph, rendering pipeline, and asset management.
- Scene Management: Supports hierarchical scene structures with entities and components.
- Asset Pipeline: Efficient loading and management of various asset types (models, textures, animations).
- Rendering: Advanced rendering capabilities including PBR, post-processing, and shader support.
- Animation System: Robust animation playback, blending, and state machines.
- Physics Engine: Integrated physics simulation for realistic interactions.
- Scripting: Allows custom logic implementation using JavaScript/TypeScript.
- UI System: Tools for creating user interfaces within the 3D environment.
- XR Support: Capabilities for developing Virtual Reality and Augmented Reality experiences.
- Multi-platform Deployment: Export projects to various platforms like H5 and WeChat Mini Games.
```

--------------------------------

### Art and Asset Pipeline Guides

Source: https://galacean.antgroup.com/engine/docs/index

Guides for artists on asset preparation and integration, including baking processes for Blender and C4D, exporting Lottie animations, and working with digital human projects.

```APIDOC
Blender Baking:
  - Instructions for baking textures and data in Blender.

C4D Baking:
  - Instructions for baking textures and data in Cinema 4D.

Lottie Animation Export:
  - How to export animations in the Lottie format.

Digital Human Projects:
  - Guidelines for integrating digital human assets and workflows.
```

--------------------------------

### Galacean Engine Basics: Overview

Source: https://galacean.antgroup.com/engine/docs/animation/clip-for-artist

Provides an overview of the Galacean Engine, its purpose, and fundamental concepts. This section is ideal for new users to understand the engine's capabilities.

```APIDOC
Galacean Engine Overview:

Galacean is a high-performance, cross-platform 3D engine designed for creating interactive experiences. It emphasizes ease of use, flexibility, and efficient rendering.

Key Features:
- Core Engine: Manages scene graph, rendering pipeline, and asset management.
- Scene Management: Supports hierarchical scene structures with entities and components.
- Asset Pipeline: Efficient loading and management of various asset types (models, textures, animations).
- Rendering: Advanced rendering capabilities including PBR, post-processing, and shader support.
- Animation System: Robust animation playback, blending, and state machines.
- Physics Engine: Integrated physics simulation for realistic interactions.
- Scripting: Allows custom logic implementation using JavaScript/TypeScript.
- UI System: Tools for creating user interfaces within the 3D environment.
- XR Support: Capabilities for developing Virtual Reality and Augmented Reality experiences.
- Multi-platform Deployment: Export projects to various platforms like H5 and WeChat Mini Games.
```

--------------------------------

### FixedJoint Scripting Examples

Source: https://galacean.antgroup.com/engine/docs/physics/joint/fixedJoint

Code examples demonstrating how to use the FixedJoint component in Galacean Engine via scripting. Covers adding the component, setting connection targets and anchors, and configuring break thresholds.

```javascript
// Add FixedJoint component
const fixedJoint = entity.addComponent(FixedJoint);

// Set the target collider for connection
fixedJoint.connectedCollider = targetEntity.getComponent(Collider);

// Set the anchor point
fixedJoint.anchor.setValue(0, 1, 0);

// Manually set the connection point
fixedJoint.automaticConnectedAnchor = false;
fixedJoint.connectedAnchor.setValue(0, 0, 0);

// Set break thresholds
fixedJoint.breakForce = 1000; // Break force
fixedJoint.breakTorque = 1000; // Break torque

// Set to unbreakable
fixedJoint.breakForce = Infinity;
fixedJoint.breakTorque = Infinity;
```

--------------------------------

### Galacean Engine Basics: Overview

Source: https://galacean.antgroup.com/engine/docs/device/restore

Provides an overview of the Galacean Engine, its purpose, and fundamental concepts. This section is ideal for new users to understand the engine's capabilities.

```APIDOC
Galacean Engine Overview:

Galacean is a high-performance, cross-platform 3D engine designed for creating interactive experiences. It emphasizes ease of use, flexibility, and efficient rendering.

Key Features:
- Core Engine: Manages scene graph, rendering pipeline, and asset management.
- Scene Management: Supports hierarchical scene structures with entities and components.
- Asset Pipeline: Efficient loading and management of various asset types (models, textures, animations).
- Rendering: Advanced rendering capabilities including PBR, post-processing, and shader support.
- Animation System: Robust animation playback, blending, and state machines.
- Physics Engine: Integrated physics simulation for realistic interactions.
- Scripting: Allows custom logic implementation using JavaScript/TypeScript.
- UI System: Tools for creating user interfaces within the 3D environment.
- XR Support: Capabilities for developing Virtual Reality and Augmented Reality experiences.
- Multi-platform Deployment: Export projects to various platforms like H5 and WeChat Mini Games.
```

--------------------------------

### CharacterController Collision Flag Examples

Source: https://galacean.antgroup.com/engine/docs/physics/collider/characterController

Provides examples of checking specific collision flags returned by the `move` function, including checking if the character is grounded, hitting a ceiling, hitting a wall, or a combination of flags.

```typescript
const flags = controller.move(displacement, 0, deltaTime);

// Check if grounded
if (flags & ControllerCollisionFlag.Down) {
  this._isGrounded = true;
}

// Check if hit ceiling
if (flags & ControllerCollisionFlag.Up) {
  this._velocity.y = 0;
}

// Check if hit wall
if (flags & ControllerCollisionFlag.Sides) {
  this._handleWallCollision();
}

// Check multiple flags
if ((flags & ControllerCollisionFlag.Down) &&
    (flags & ControllerCollisionFlag.Sides)) {
  // Character is grounded and hitting a wall
}
```
Tokens:
Raw