lywsvip/engine
1
0
Fork 0
mirror of https://github.com/galacean/engine.git synced 2026-05-06 22:23:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Docs: remove playgrounds (#2689)

Browse Source 
* fix: doc typo
This commit is contained in:
鹅叔
2025-05-23 17:24:53 +08:00
committed by GitHub
parent 5825a21dab
commit dc1a4793ed
144 changed files with 251 additions and 1014 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/en/UI/quickStart/button.mdx
View File

@@ -38,7 +38,3 @@ In the editor, you can easily set the button's transition effects for different
| `removeTransition` | Remove a transition effect from the button |
| `addClicked` | Add a click callback function |
| `removeClicked` | Remove a click callback function |
## Script Development
<Playground href="/embed/ui-Button" />

4
docs/en/UI/quickStart/event.mdx
View File

@@ -34,7 +34,3 @@ stateDiagram
B --> C
B --> D
```
## Script Development
<Playground href="/embed/ui-Event" />

4
docs/en/UI/quickStart/group.mdx
View File

@@ -22,7 +22,3 @@ Select the node, then in the **[Inspector Panel](/docs/interface/inspector)**, c
| `ignoreParentGroup` | Whether to ignore the settings of the parent group |
> UIGroup resolves the issue where UI element properties cannot be passed from parent to child.
## Script Development
<Playground href="/embed/xr-ar-simple" />

4
docs/en/UI/quickStart/image.mdx
View File

@@ -42,7 +42,3 @@ For adjusting the size of UI elements, refer to [Quickly Adjust UI Element Size]
| `drawMode` | The draw mode, supports Normal, Nine-Patch, and Tiled modes |
| `raycastEnabled` | Whether the image can be detected by raycasting |
| `raycastPadding` | Custom padding for raycasting, representing the distance from the edges of the collision area. This is a normalized value, where X, Y, Z, and W represent the distances from the left, bottom, right, and top edges respectively. |
## Script Development
<Playground href="/embed/ui-Image" />

4
docs/en/UI/quickStart/text.mdx
View File

@@ -54,7 +54,3 @@ The `Text` component can modify the rendering size by adjusting the `FontSize`.
| `Mask Interaction` | Mask type for text, specifying whether the text needs masking, and whether the content inside or outside the mask should be shown |
| `Mask Layer` | The mask layer for the text, used for matching with SpriteMask. Default is Everything, meaning it can interact with any SpriteMask |
| `priority` | Rendering priority; the lower the value, the higher the priority, meaning it will be rendered first |
## Script Development
<Playground href="/embed/ui-Text" />

4
docs/en/animation/clip.mdx
View File

@@ -200,8 +200,6 @@ colorClip.addCurveBinding("/light", DirectLight, "color.r", colorCurve);
You can also add `AnimationCurve` to your child entity `/light`, as shown in the code example above. At the same time, the third parameter of `addCurveBinding` is not limited to the properties of the component; it is a path that can index the value.
<Playground href="/embed/animation-customAnimationClip" />
### Animation Events
You can use [AnimationEvent](/apis/core/#AnimationEvent) to add events to `AnimationClip`. Animation events will call the specified callback function of the component bound to the same entity at the specified time.
@@ -212,5 +210,3 @@ event.functionName = "test";
event.time = 0.5;
clip.addEvent(event);
```
<Playground href="/embed/animation-event" />

3
docs/en/animation/layer.mdx
View File

@@ -57,5 +57,4 @@ additiveLayer.blendingMode = AnimatorLayerBlendingMode.Additive;
// Override mode
additiveLayer.blendingMode = AnimatorLayerBlendingMode.Override;
additiveLayer.weight = 0.5;
```
<Playground href="/embed/skeleton-animation-additive" />
```

3
docs/en/assets/custom.mdx
View File

@@ -23,6 +23,3 @@ export class FBXLoader extends Loader<FBXResource> {
3. Return an [AssetPromise](/apis/core/#AssetPromise) object. `resolve` the parsed resource result, for example, FBX returns a specific `FBXResource`.
4. If there is an error, `reject` the error.
## Reference
<Playground href="/embed/obj-loader" />

15
docs/en/assets/gc.mdx
View File

@@ -20,18 +20,3 @@ For example, the entity shown in the figure below contains a [MeshRenderer](/api
```typescript
engine.resourceManager.gc();
```
## Verifying Asset Release
If you need to verify whether assets have been successfully released, you can follow the steps below and open the following example on a blank page:
<Playground href="/embed/assets-gc" />
In this example, `Texture2D` and `Sprite` are created to render 2D sprites during initialization. When you click the GC button in the upper right corner, the `root` node is destroyed, and the reference counts of the texture and sprite assets are cleared. At this point, these assets will be truly destroyed. Taking memory snapshots before and after `gc` can give a more intuitive understanding of this process.
1. Before gc: **Developer Tools** -> **Memory** -> **Take Heap Snapshot**
2. After gc: **Developer Tools** -> **Memory** -> **Take Heap Snapshot** -> **Compare** -> **Select Snapshot Before gc**
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*CtRmTqXDgt0AAAAAAAAAAAAADhuCAQ/original" alt="image-1" style={{zoom:"50%"}} />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*E5PwQ7ocw2EAAAAAAAAAAAAADhuCAQ/original" alt="image-1" style={{zoom:"50%"}} />

4
docs/en/core/scene.mdx
View File

@@ -92,10 +92,6 @@ engine.sceneManager.addScene(scene1);
engine.sceneManager.removeScene(scene2);
```
The example of multi-scene rendering is as follows:
<Playground href="/embed/multi-scene" />
### Merging Scenes
You can use `engine.sceneManager.mergeScenes` to merge 2 scenes into 1 scene.

6
docs/en/core/transform.mdx
View File

@@ -9,9 +9,9 @@ label: Core
`Transform` is a basic component that comes with an `Entity`. Developers can use it to manage the position, rotation, and scale of an `Entity` in **local space** and **world space**.
> For a deeper understanding, refer to Galacean's **[Coordinate System](/docs/core/space)**.
<Playground href="/embed/transform-basic" />
<Callout type="info">
For a deeper understanding, refer to Galacean's **[Coordinate System](/docs/core/space)**.
</Callout>
## Editor Usage

6
docs/en/graphics/2D/lottie.mdx
View File

@@ -74,8 +74,6 @@ await lottie.play();
The editor provides an animation slicing function, allowing you to cut the entire segment provided by the designer into multiple segments. Each segment needs to define three fields: segment name, start frame, and end frame.
<Playground href="/embed/lottie-clips" />
<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*skjbSZjSpYoAAAAAAAAAAAAADjCHAQ/original" />
This operation will add the `lolitaAnimations` field in the Lottie protocol to implement animation slicing:
@@ -129,8 +127,6 @@ engine.resourceManager.load({
});
```
<Playground href="/embed/lottie" />
### 3D Transform
In business scenarios, there is often a need for 3D transformations, such as entrance animations for pop-ups. For example, with rotation, traditional lottie-web solutions can only rotate along the **Z-axis** (i.e., perpendicular to the screen's normal direction). Even if we achieve rotation along the **X-axis** or **Y-axis** in AE, it will be ignored when played with lottie-web.
@@ -139,8 +135,6 @@ In business scenarios, there is often a need for 3D transformations, such as ent
Thanks to the unified architecture of the Galacean Engine 2D/3D engine, 3D transformation functions can be easily implemented.
<Playground href="/embed/lottie-3d-rotation" />
### Version Dependencies
| Engine Version | Lottie Version |
| :--- | :--- |

36
docs/en/graphics/2D/spine/example.mdx
View File

@@ -29,38 +29,4 @@ This template demonstrates the capability of Spine to mix and match outfits. By
**Dynamic Partial Skin Switching**
This template showcases the ability to dynamically switch partial skins. You can create new attachments based on an additionally uploaded atlas and replace them dynamically.
<Image src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*Rbd-QKbX2VEAAAAAAAAAAAAADsp6AQ/original" alt="spine-dynamic-change" />
## Examples
**Animation Control**
This example demonstrates how to orchestrate a Spine animation queue using the `setAnimation` and `addAnimation` APIs:
<Playground href="/embed/spine-animation" />
**Follow Shooting**
This example shows how to achieve an aiming and shooting effect by modifying the IK bone position:
<Playground href="/embed/spine-follow-shoot" />
**Partial Skin Switching**
This example demonstrates how to achieve a partial outfit change by modifying attachments in slots:
<Playground href="/embed/spine-change-attachment" />
**Full Skin Switching**
This example demonstrates how to achieve full skin switching using the `setSkin` method:
<Playground href="/embed/spine-full-skin-change" />
**Skin Mixing**
This example demonstrates how to achieve mix-and-match effects at runtime by combining new skins:
<Playground href="/embed/spine-mix-and-match" />
**Physics**
This example showcases the physics-based animation effects in Spine 4.2:
<Playground href="/embed/spine-physics" />
The next chapter: [Versions and Performance](/docs/graphics/2D/spine/other)
<Image src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*Rbd-QKbX2VEAAAAAAAAAAAAADsp6AQ/original" alt="spine-dynamic-change" />

4
docs/en/graphics/2D/spriteAtlas.mdx
View File

@@ -12,10 +12,6 @@ label: Graphics/2D
- Less video memory (packing algorithm reduces texture size);
- Fewer requests (reduces the number of load requests by reducing fragmented files);
In the example of the sprite atlas below, only one draw call is made per frame:
<Playground href="/embed/sprite-atlas" />
## Editor Usage
### Creating a Sprite Atlas

2
docs/en/graphics/2D/spriteMask.mdx
View File

@@ -8,8 +8,6 @@ label: Graphics/2D
The Sprite Mask component is used to apply masking effects to [Sprite Renderer](/en/docs/graphics/2D/spriteRenderer/) and [Text Renderer](/en/docs/graphics/2D/text/) in 3D/2D scenes.
<Playground href="/embed/sprite-mask" />
Control the interaction with [Sprite](/en/docs/graphics/2D/sprite/) using parameters provided by [SpriteMask](/apis/core/#SpriteMask).
| Parameter | Type | Description |

8
docs/en/graphics/2D/spriteRenderer.mdx
View File

@@ -63,8 +63,6 @@ When displaying an image, first add a sprite component to an entity and then set
Setting the `width` and `height` of `SpriteRenderer` can explicitly specify the size of the sprite in 3D space. If not set, the size of the `Sprite` will be used as the default value.
<Playground href="/embed/sprite-size" />
### Set Color
Adjust the color by setting the `color` property to achieve fade-in and fade-out effects, as shown below:
@@ -77,14 +75,10 @@ In addition to basic image display, `SpriteRenderer` also supports image flippin
<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*sK6tTJELnP0AAAAAAAAAAAAADjCHAQ/original" alt="avatar" />
<Playground href="/embed/sprite-flip" />
### Drawing Modes
The sprite renderer currently provides three drawing modes: normal, nine-slice, and tiled drawing (default is normal drawing). By modifying the drawing width and height in different drawing modes, you can visually perceive the rendering differences between the modes, as shown below:
<Playground href="/embed/sprite-drawMode" />
### Masking
Please refer to the [Sprite Mask](/en/docs/graphics/2D/spriteMask) documentation.
@@ -93,5 +87,3 @@ Please refer to the [Sprite Mask](/en/docs/graphics/2D/spriteMask) documentation
Please refer to the [Custom Shader](/en/docs/graphics-shader-custom) documentation.
<Playground href="/embed/sprite-material-blur" />

24
docs/en/graphics/2D/text.mdx
View File

@@ -54,13 +54,6 @@ To make the text display more diverse, developers can upload their own font file
## Script Usage
<Playground href="/embed/text-renderer" />
1. Create a [TextRenderer](/apis/core/#TextRenderer) component to display text
2. Set the [Font](/apis/core/#Font) object through the font property
3. Set the text to be displayed through the text property
3. Set the font size through the fontSize property
4. Set the text color through the color property
```typescript
import {
@@ -74,15 +67,15 @@ import {
} from "@galacean/engine";
const textEntity = rootEntity.createChild("text");
// 给实体添加 TextRenderer 组件
// 1. Create a TextRenderer component to display text
const textRenderer = textEntity.addComponent(TextRenderer);
// 通过 font 设置 Font 对象
// 2. Set the Font object through the font property
textRenderer.font = Font.createFromOS(engine, "Arial");
// 通过 text 设置需要显示的文本
// 3. Set the text to be displayed through the text property
textRenderer.text = "Galacean 会写字了！";
// 通过 fontSize 设置字体大小
// 4. Set the font size through the fontSize property
textRenderer.fontSize = 36;
// 通过 color 设置文本颜色
// 5. Set the text color through the color property
textRenderer.color.set(1, 0, 0, 1);
```
@@ -158,10 +151,6 @@ textRenderer.fontStyle = FontStyle.Italic;
textRenderer.fontStyle = FontStyle.Bold | FontStyle.Italic;
```
### Multi-line Text
<Playground href="/embed/text-wrap-alignment" />
### Custom Fonts
[Font](/apis/core/#Font) is a font resource used to represent the font used by the text.
@@ -181,6 +170,3 @@ const font = await engine.resourceManager.load({
url: "https://lg-2fw0hhsc-1256786476.cos.ap-shanghai.myqcloud.com/Avelia.otf",
});
```
<Playground href="/embed/text-renderer-font" />
```

7
docs/en/graphics/background/background.mdx
View File

@@ -12,11 +12,4 @@ Developers can customize the background for scenes, which will be rendered befor
- [Texture Background](/en/docs/graphics-background-texture)
- [Sky Background](/en/docs/graphics-background-sky)
Developers can set different backgrounds according to their needs:
<Playground href="/embed/background" />
In [Skybox](/en/docs/graphics-background-sky}) mode, by setting specific meshes and materials, various custom backgrounds can be achieved, such as `video background`:
<Playground href="/embed/video-background" />

8
docs/en/graphics/camera/camera.md → docs/en/graphics/camera/camera.mdx
View File

@@ -14,7 +14,7 @@ A camera is an abstract concept in a graphics engine for [3D projection](https:/
Perspective projection conforms to our model of objects appearing larger when closer and smaller when farther away. Here is a diagram of the perspective model:
<img src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*isMHSpe21ZMAAAAAAAAAAAAAARQnAQ" alt="image.png" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*isMHSpe21ZMAAAAAAAAAAAAAARQnAQ" alt="image.png" style={{zoom:"50%"}} />
As shown in the diagram above, the near clipping plane ([nearClipPlane](/apis/core/#Camera-nearClipPlane)), far clipping plane ([farClipPlane](/apis/core/#Camera-farClipPlane)), and field of view ([fieldOfView](/apis/core/#Camera-fieldOfView)) form a view frustum ([_View Frustum_](https://en.wikipedia.org/wiki/Viewing_frustum)). Objects within the frustum are projected into the camera and rendered on the canvas, while objects outside the frustum are clipped.
@@ -22,7 +22,7 @@ As shown in the diagram above, the near clipping plane ([nearClipPlane](/apis/co
In orthographic projection, objects appear the same size regardless of their distance from the camera. The visible area created by orthographic projection is called a box-shaped view volume, as shown below:
<img src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*KEuGSqX-vXsAAAAAAAAAAAAAARQnAQ" alt="image.png" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*KEuGSqX-vXsAAAAAAAAAAAAAARQnAQ" alt="image.png" style={{zoom:"50%"}} />
As shown in the diagram above, there are top, bottom, left, and right boundaries. Galacean simplifies orthographic properties to better suit developers' habits, using only [orthographicSize](/apis/core/#Camera-orthographicSize). The relationships between the various properties and [orthographicSize](/apis/core/#Camera-orthographicSize) are as follows:
@@ -38,10 +38,6 @@ Comparing perspective projection and orthographic projection reveals their diffe
- View volume model
- Whether objects appear larger when closer and smaller when farther away
The following example visually demonstrates the difference between rendering with an orthographic camera and a perspective camera. In short, choose an orthographic camera for 2D effects and a perspective camera for 3D effects.
<playground src="ortho-switch.ts"></playground>
## Camera Orientation
In Galacean, both local and world coordinates follow the `right-hand coordinate system`, so the camera's `forward` direction is the `-Z` axis, and the camera's viewing direction is also the `-Z` direction.

16
docs/en/graphics/camera/component.md → docs/en/graphics/camera/component.mdx
View File

@@ -10,11 +10,11 @@ The camera component can project a 3D scene onto a 2D screen. Based on the camer
First, you need to mount the camera component onto an activated [Entity](/en/docs/core/entity) in the scene. Editor projects usually come with a camera component by default, but you can also add one manually.
<img src="https://gw.alipayobjects.com/zos/OasisHub/c6a1a344-630c-40c6-88ef-abb447cfd183/image-20231009114711623.png" alt="image-20231009114711623" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/c6a1a344-630c-40c6-88ef-abb447cfd183/image-20231009114711623.png" alt="image-20231009114711623" style={{zoom:"50%"}} />
After adding it, you can view the camera properties in the inspector, and the camera preview in the lower left corner allows you to conveniently see the camera effect during the actual project runtime:
<img src="https://gw.alipayobjects.com/zos/OasisHub/d60e9f91-137e-4148-b85e-7458007333c3/image-20240718211520816.png" alt="image-20240718211520816" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/d60e9f91-137e-4148-b85e-7458007333c3/image-20240718211520816.png" alt="image-20240718211520816" style={{zoom:"50%"}} />
You can also mount the camera component to an [Entity](/en/docs/core/entity) in the script with the following code:
@@ -29,7 +29,7 @@ const camera = entity.addComponent(Camera);
By modifying the properties of the camera component, you can customize the rendering effects. Below are the property settings exposed by the camera component in the **[Inspector Panel](/en/docs/interface/inspector)**.
<img src="https://gw.alipayobjects.com/zos/OasisHub/af60182b-a31a-4509-a0d4-3eb4cb737087/image-20240718211645854.png" alt="image-20240718211645854" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/af60182b-a31a-4509-a0d4-3eb4cb737087/image-20240718211645854.png" alt="image-20240718211645854" style={{zoom:"50%"}} />
You can also get the camera component and set the corresponding properties through the script.
@@ -90,20 +90,14 @@ The functionality corresponding to each property is as follows:
The camera component can selectively render the rendering components in the scene by setting the `cullingMask`.
<playground src="culling-mask.ts"></playground>
### Render Target
The camera component can render the result to different targets by setting the `renderTarget`.
<playground src="multi-camera.ts"></playground>
### Frustum Culling
The `enableFrustumCulling` property is enabled by default because, in a 3D world, "things that are not visible do not need to be rendered" is a very natural logic and is the most basic performance optimization. Disabling frustum culling means turning off this optimization. If you want to keep this optimization but always render a specific node, you can set the bounding box of the node's renderer to be infinite.
<playground src="renderer-cull.ts"></playground>
## Methods
The camera component provides various methods (mainly related to `rendering` and `space transformation`) to facilitate developers in achieving the desired customization capabilities. Before that, you need to learn how to get the camera component. If you know which node the camera component is mounted on, you can directly get it through `getComponent` or `getComponentsIncludeChildren`:
@@ -140,9 +134,7 @@ const cameras = scene._componentsManager._activeCameras;
### Shader Replacement
With the ability of `setReplacementShader` to globally replace shaders, you can observe specific rendering effects:
<playground src="shader-replacement.ts"></playground>
With the ability of `setReplacementShader` to globally replace shaders, you can observe specific rendering effects.
### Space Transformation

7
docs/en/graphics/camera/control.md → docs/en/graphics/camera/control.mdx
View File

@@ -16,8 +16,6 @@ Camera controls inherit from powerful scripts and are mounted on an `Entity` tha
`OrbitControl` is used to simulate orbit interaction, suitable for 360-degree rotation interaction around a target object. Note that **the orbit controller must be added after the camera component**.
<playground src="gltf-basic.ts"></playground>
| Property | Description |
| :--------------- | :----------------------------------------------------------------- |
| `target` | The target position to observe |
@@ -42,8 +40,6 @@ Camera controls inherit from powerful scripts and are mounted on an `Entity` tha
`FreeControl` is generally used for roaming control, commonly seen in game scenes. Note that **the free controller must be added after the camera component**.
<playground src="controls-free.ts"></playground>
| Property | Description |
| :-------------- | :---------------------------------------- |
| `floorMock` | Whether to simulate the ground, default is true |
@@ -53,9 +49,8 @@ Camera controls inherit from powerful scripts and are mounted on an `Entity` tha
#### Orthographic Controller
`OrthoControl` is generally used to control zooming and panning in 2D scenes:
`OrthoControl` is generally used to control zooming and panning in 2D scenes.
<playground src="ortho-control.ts"></playground>
| Property | Description |
| :---------- | :-----------|

15
docs/en/graphics/camera/depthTexture.md
View File

@@ -1,15 +0,0 @@
---
order: 4
title: Camera Depth Texture
type: Graphics
group: Camera
label: Graphics/Camera
---
The camera can enable depth texture through the [depthTextureMode](/apis/core/#Camera-depthTextureMode) property. After enabling the depth texture, you can access the depth texture in the Shader through the `camera_DepthTexture` property. Depth texture can be used to implement soft particles, water surface edge transitions, and some simple post-processing effects.
<playground src="camera-depth-texture.ts"></playground>
Note: Depth texture only renders non-transparent objects.

17
docs/en/graphics/camera/multiCamera.md
View File

@@ -1,17 +0,0 @@
---
order: 3
title: Multi-Camera Rendering
type: Graphics
group: Camera
label: Graphics/Camera
---
In the case of multiple cameras, many customized rendering effects can be achieved by combining camera component properties such as [viewport](/apis/core/#Camera-viewport), [cullingMask](/apis/core/#Camera-cullingMask), [clearFlags](/apis/core/#Camera-clearFlags), and others.
For example, by setting the [viewport](/apis/core/#Camera-viewport), multiple cameras can render scene content in different positions on the canvas.
<playground src="multi-viewport.ts"></playground>
Another example is achieving a picture-in-picture effect by setting the [cullingMask](/apis/core/#Camera-cullingMask).
<playground src="multi-camera.ts"></playground>

10
docs/en/graphics/camera/multiCamera.mdx Normal file
View File

@@ -0,0 +1,10 @@
---
order: 3
title: Multi-Camera Rendering
type: Graphics
group: Camera
label: Graphics/Camera
---
In the case of multiple cameras, many customized rendering effects can be achieved by combining camera component properties such as [viewport](/apis/core/#Camera-viewport), [cullingMask](/apis/core/#Camera-cullingMask), [clearFlags](/apis/core/#Camera-clearFlags), and others. For example, by setting the [viewport](/apis/core/#Camera-viewport), multiple cameras can render scene content in different positions on the canvas. Another example is achieving a picture-in-picture effect by setting the [cullingMask](/apis/core/#Camera-cullingMask).

4
docs/en/graphics/camera/texture.md → docs/en/graphics/camera/texture.mdx
View File

@@ -10,9 +10,9 @@ label: Graphics/Camera
The camera can enable the depth texture through the [depthTextureMode](/apis/galacean/#Camera) property. Once enabled, the depth texture can be accessed in the Shader via the `camera_DepthTexture` property. Depth textures can be used to implement soft particles and water edge transitions, as well as some simple post-processing effects.
<playground src="camera-depth-texture.ts"></playground>
<Callout type="info">
Note: Depth textures only render non-transparent objects.
</Callout>
## Opaque Texture

8
docs/en/graphics/light/light.mdx
View File

@@ -22,15 +22,11 @@ Proper use of lighting can provide realistic rendering effects. This section inc
## Direct Light
Direct light usually shines from an area or in a specific direction, entering the eye (camera) directly after one reflection, as shown in the following example:
<Playground href="/embed/light-type" />
Direct light usually shines from an area or in a specific direction, entering the eye (camera) directly after one reflection.
## Indirect Light
Ambient light is emitted from all around and enters the eye, as shown in the following example:
<Playground href="/embed/ambient-light" />
Ambient light is emitted from all around and enters the eye.
## Real-time Lighting and Baked Lighting

6
docs/en/graphics/mesh/bufferMesh.mdx
View File

@@ -30,8 +30,6 @@ Here are some common use cases of [MeshRenderer](/apis/core/#MeshRenderer) and [
### Interleaved Vertex Buffer
<Playground href="/embed/buffer-mesh-interleaved" />
A common method, such as custom Mesh, Particle implementation, has the advantages of compact video memory and fewer CPU data uploads to the GPU per frame. The main feature of this case is that multiple [VertexElement](/apis/core/#VertexElement) correspond to one *VertexBuffer* ([Buffer](/apis/core/#Buffer)), and only one *VertexBuffer* is used to associate different vertex elements with the Shader.
```typescript
@@ -65,8 +63,6 @@ renderer.mesh = mesh;
### Independent Vertex Buffer
<Playground href="/embed/buffer-mesh-independent" />
It has advantages when mixing dynamic vertex buffers and static vertex buffers, such as _position_ being static but _color_ being dynamic. Independent vertex buffers can update only the color data to the GPU. The main feature of this case is that one [VertexElement](/apis/core/#VertexElement) corresponds to one _VertexBuffer_, and the [setData](/apis/core/#Buffer-setData) method of the [Buffer](/apis/core/#Buffer) object can be called separately to update the data independently.
```typescript
@@ -109,8 +105,6 @@ renderer.mesh = mesh;
### Instance Rendering
<Playground href="/embed/buffer-mesh-instance" />
GPU Instance rendering is a common technique in 3D engines. For example, it allows rendering objects with the same geometric shape at different positions in one go, significantly improving rendering performance. The main feature of this example is the use of the instance functionality of [VertexElement](/apis/core/#VertexElement). The last parameter of its constructor indicates the instance step rate (the number of instances drawn per vertex advance in the buffer, non-instance elements must be 0). The [instanceCount](/apis/core/#BufferMesh-instanceCount) of [BufferMesh](/apis/core/#BufferMesh) indicates the number of instances.
```typescript

10
docs/en/graphics/mesh/modelMesh.mdx
View File

@@ -8,8 +8,6 @@ label: Graphics/Mesh
[ModelMesh](/apis/core/#ModelMesh) is a mesh rendering data class used to describe the geometric outline, mainly including vertex data (such as position, normal, and UV), indices, and blend shapes. It can not only be created and exported in glTF format using modeling software for engine parsing and restoration but also be conveniently written directly into data creation using scripts.
<Playground href="/embed/obj-loader" />
## Code Example
```typescript
@@ -134,8 +132,6 @@ If you need to continuously modify the `ModelMesh` data, set the `releaseData` p
modelMesh.uploadData(false);
```
<Playground href="/embed/model-mesh" />
### **Reading Advanced Data**
To make the vertex data in `ModelMesh` readable, pay attention to:
@@ -172,12 +168,6 @@ const result = mesh.getPositions();
`BlendShape` is commonly used to create highly detailed animations, such as facial expressions. The principle is quite simple, mainly blending the mesh data of base shape and target shape with weights to achieve smooth transition between shapes.
**glTF Import BlendShape Animation Example:**
<Playground href="/embed/skeleton-animation-blendShape" />
**Custom BlendShape Animation in Script Example:**
<Playground href="/embed/skeleton-animation-customBlendShape" />
### Detailed Steps
#### **Organizing `BlendShape` Data**

2
docs/en/graphics/mesh/primitiveMesh.mdx
View File

@@ -24,8 +24,6 @@ Built-in geometries not meeting your needs? You can create a `Mesh` asset in the
## Script Usage
<Playground href="/embed/primitive-mesh" />
The currently provided geometries are as follows:
- [createCuboid](/apis/core/#PrimitiveMesh-createCuboid) **Cuboid**

4
docs/en/graphics/model/glTF.mdx
View File

@@ -33,9 +33,7 @@ Both types of products are supported in Galacean. The choice of export type can
- Supports cameras in glTF, compiling them into runtime camera components.
- Supports some plugins of glTF.
glTF has many features, and the official website provides a large number of [examples](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0) for reference. Galacean also provides a replicated version for quick browsing. You can switch between different glTF models through the following **glTF List**.
<Playground href="/embed/gltf-loader" />
glTF has many features, and the official website provides a large number of [examples](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0) for reference.
### Plugin Support

2
docs/en/graphics/model/use.mdx
View File

@@ -69,8 +69,6 @@ this.engine.resourceManager
The loaded model object will return a root node containing rendering information and animation information. Its usage is no different from ordinary nodes.
<Playground href="/embed/gltf-basic" />
### 1. Select Scene Root Node
glTF may contain multiple scene root nodes `sceneRoots`. Developers can manually select the root node they wish to instantiate.

2
docs/en/graphics/particle/renderer-main-module.mdx
View File

@@ -12,8 +12,6 @@ label: Graphics/Particle
## Properties
<Playground href="/embed/particle-mainModule" />
You can debug each property one by one in the provided example to help you better understand and control the main particle module, thereby achieving various complex and beautiful visual effects.
Duration [duration](/apis/core/#MainModule-duration) determines how long the particle generator runs, in seconds. A longer duration means the particle system will generate more particles, creating a continuous effect.

69
docs/en/graphics/postProcess/effects.md
View File

@@ -1,69 +0,0 @@
---
order: 1
title: Post Process Effects
---
## Bloom
[API](/apis/core/#BloomEffect)
<img src="https://gw.alipayobjects.com/zos/OasisHub/99928a81-72c2-45f3-90ba-b51117e01715/image-20240719122439611.png" style="zoom:50%;" />
- **Down Scale**: Controls the starting resolution that this effect begins processing, you can choose `Half`, `Quarter`.
<figure>
<img src="https://gw.alipayobjects.com/zos/OasisHub/32712777-1bb3-42f9-b17b-d4eecf9eea19/image-20240723172204618.png" style="zoom:50%;" />
<figcaption style="text-align:center; color: #889096;font-size:14px">`Half`(left), `Quarter`(right)</figcaption>
</figure>
- **Threshold**: Filters out pixels under this level of brightness. Value is in gamma-space.
<figure>
<img src="https://gw.alipayobjects.com/zos/OasisHub/739acae8-991f-4b9a-af76-7f6c695156ca/image-20240723180139089.png" style="zoom:50%;" />
<figcaption style="text-align:center; color: #889096;font-size:14px">value `0.9`(left), `0.5`(right)</figcaption>
</figure>
- **Scatter**: Set the radius of the bloom effect.
<figure>
<img src="https://gw.alipayobjects.com/zos/OasisHub/a8cd9144-7182-4ee9-a6a4-aef279fb3799/image-20240723180228646.png" style="zoom:50%;" />
<figcaption style="text-align:center; color: #889096;font-size:14px">value `0.3`(left), `0.8`(right)</figcaption>
</figure>
- **Intensity**: Strength of the bloom effect.
<figure>
<img src="https://gw.alipayobjects.com/zos/OasisHub/1aaa6eaa-0841-4427-b1ea-afb7c74308d4/image-20240723180255363.png" style="zoom:50%;" />
<figcaption style="text-align:center; color: #889096;font-size:14px">value `1`(left), `2`(right)</figcaption>
</figure>
- **Tint**: The tint of the bloom effect.
<figure>
<img src="https://gw.alipayobjects.com/zos/OasisHub/95c85eea-7cae-4c0b-9049-568d6da0259b/image-20240723180322584.png" style="zoom:50%;" />
<figcaption style="text-align:center; color: #889096;font-size:14px">value `(255, 255, 255)`(left), `(255, 0, 0)`(right)</figcaption>
</figure>
- **Dirt Texture**: Dirtiness texture to add smudges or dust to the bloom effect.
<figure>
<img src="https://gw.alipayobjects.com/zos/OasisHub/280ada8b-d007-4f4a-908f-62773d625c5a/image-20240723180356801.png" style="zoom:50%;" />
<figcaption style="text-align:center; color: #889096;font-size:14px">`OFF`(left), `ON`(right)</figcaption>
</figure>
- **Dirt Intensity**: The strength of the dirt texture.
<figure>
<img src="https://gw.alipayobjects.com/zos/OasisHub/85e9b9b7-3752-4fec-bbee-82fc96e76977/image-20240723180441902.png" style="zoom:50%;" />
<figcaption style="text-align:center; color: #889096;font-size:14px">value `1`(left), `5`(right)</figcaption>
</figure>
## Tonemapping
[API](/apis/core/#TonemappingEffect)
<img src="https://gw.alipayobjects.com/zos/OasisHub/d326f3fb-0d04-493c-8714-93cd4c5924ae/image-20240719122505552.png" style="zoom:50%;" />
- **Mode**: Tone mapping algorithm. You can choose `Neutral` and `ACES`. `Netural` mode is particularly suitable for situations where only range remapping is required with minimal impact on hue and saturation; `ACES` mode uses the ACES reference color space of movies, which can produce film-like contrast effects, but the performance consumption is large.
<figure> <img src="https://gw.alipayobjects.com/zos/OasisHub/83184ba2-9913-46d6-821d-e8ac6afec542/image-20240723180530944.png" style="zoom:50%;" /> <figcaption style="text-align:center; color: #889096;font-size:14px">`OFF`(left), `Netual`(center), `ACES`(right)</figcaption> </figure>

109
docs/en/graphics/postProcess/effects.mdx Normal file
View File

@@ -0,0 +1,109 @@
---
order: 1
title: Post Process Effects
---
## Bloom
[API](/apis/core/#BloomEffect)
<Image src="https://gw.alipayobjects.com/zos/OasisHub/99928a81-72c2-45f3-90ba-b51117e01715/image-20240719122439611.png" />
The Bloom effect adds a halo-like quality to images.
### Properties
- **Down Scale**: Controls the starting resolution of the bloom post-processing. The default is `Half`, meaning the initial downsampled resolution is half of the canvas. If precision is not a major concern, it can be switched to `Quarter` to save resources, reducing it to 1/4 of the canvas.
<Comparison
leftSrc="https://gw.alipayobjects.com/zos/OasisHub/b537d126-863e-4387-b6a6-7c4f042029ca/image-20240726114458404.png"
leftText="Half"
rightSrc="https://gw.alipayobjects.com/zos/OasisHub/b62624a6-a4f2-4c9d-964c-7742f9970c8f/image-20240726114511958.png"
rightText="Quarter"
/>
- **Threshold**: The bloom effect filters out pixels below this brightness level. The lower the value, the larger the Bloom area. This value is in gamma space, with a default of 0.9.
<Comparison
leftSrc="https://gw.alipayobjects.com/zos/OasisHub/47347ffb-b6c3-43f8-8008-32041c1d1d3c/image-20240726114601564.png"
leftText="0.9"
rightSrc="https://gw.alipayobjects.com/zos/OasisHub/ee71fee4-ab78-4848-ac46-79587e107df4/image-20240726114616577.png"
rightText="0.5"
/>
- **Scatter**: Sets the diffusion range of the bloom effect, default is 0.7.
<Comparison
leftSrc="https://gw.alipayobjects.com/zos/OasisHub/38833509-dac2-4a97-bf55-6c1d85ec17c6/image-20240726115106399.png"
leftText="0.3"
rightSrc="https://gw.alipayobjects.com/zos/OasisHub/352d7efb-3c61-4cef-bc7f-7405faa7b121/image-20240726115129010.png"
rightText="0.8"
/>
- **Intensity**: The strength of the bloom effect.
<Comparison
leftSrc="https://gw.alipayobjects.com/zos/OasisHub/8555a001-d1b6-4a2c-8687-ad322e841071/image-20240726115441141.png"
leftText="1"
rightSrc="https://gw.alipayobjects.com/zos/OasisHub/8391bd7e-feeb-4351-b65e-9c1352bfb032/image-20240726115350389.png"
rightText="2"
/>
- **Tint**: The tint color for the bloom effect.
<Comparison
leftSrc="https://gw.alipayobjects.com/zos/OasisHub/ae9ce1a2-9075-4739-9162-c0e5ff6b8ad1/image-20240726115519606.png"
leftText="White"
rightSrc="https://gw.alipayobjects.com/zos/OasisHub/796ec758-bf4e-45df-8050-67f88ad174b8/image-20240726115534397.png"
rightText="Red"
/>
- **Dirt Texture**: Adds smudges or dust to the bloom effect using a dirt texture.
<Comparison
leftSrc="https://gw.alipayobjects.com/zos/OasisHub/8a9b9fdb-191e-4ec9-bb38-ab0877fbde68/image-20240726115722323.png"
leftText="Off"
rightSrc="https://gw.alipayobjects.com/zos/OasisHub/a711bdd0-95a0-4f88-85fc-8f533569635d/image-20240726115736031.png"
rightText="On"
/>
- **Dirt Intensity**: The intensity of the dirt texture.
<Comparison
leftSrc="https://gw.alipayobjects.com/zos/OasisHub/a711bdd0-95a0-4f88-85fc-8f533569635d/image-20240726115736031.png"
leftText="1"
rightSrc="https://gw.alipayobjects.com/zos/OasisHub/451dff04-fc7b-4e40-9a3c-76dce3ff81c8/image-20240726115803813.png"
rightText="5"
/>
## Tonemapping
[API](/apis/core/#TonemappingEffect)
<Image src="https://gw.alipayobjects.com/zos/OasisHub/d326f3fb-0d04-493c-8714-93cd4c5924ae/image-20240719122505552.png" />
Tonemapping remaps the HDR values of an image, improving the overall contrast and color saturation.
<Callout type="positive">
Tonemapping is generally used after enabling [HDR mode on the camera](/docs/graphics/postProcess/postProcess/#2相机开关).
</Callout>
For example, enabling ACES tonemapping in the image below increases the dynamic range in sun-exposed areas, revealing more details:
<Comparison
leftSrc="https://gw.alipayobjects.com/zos/OasisHub/8ec8f8e0-0054-48c9-aeb1-146b745ac996/image-20240726114047059.png"
leftText="Tonemapping Off"
rightSrc="https://gw.alipayobjects.com/zos/OasisHub/9bbb75f2-8ed2-4448-930f-960da82ed298/image-20240726114242977.png"
rightText="Tonemapping On"
/>
### Properties
- **Mode**: Tonemapping algorithm. You can choose between `Neutral` and `ACES`. The `Neutral` mode is particularly suitable for situations requiring only range remapping with minimal impact on tone and saturation. The `ACES` mode uses the cinematic ACES reference color space, which can produce film-like contrast effects but is more consuming in performance.
<Comparison
leftSrc="https://gw.alipayobjects.com/zos/OasisHub/8eaed6b4-ceb6-4e05-927e-eb02b1f76aaa/image-20240726114338413.png"
leftText="Netural"
rightSrc="https://gw.alipayobjects.com/zos/OasisHub/9bbb75f2-8ed2-4448-930f-960da82ed298/image-20240726114242977.png"
rightText="ACES"
/>

2
docs/en/graphics/renderer/meshRenderer.mdx
View File

@@ -8,8 +8,6 @@ label: Graphics/Renderer
[MeshRenderer](/apis/core/#MeshRenderer) is a mesh renderer component that uses mesh objects (such as cubes) as the data source for geometric outlines. When an entity is mounted with a mesh renderer component, you only need to set its `mesh` and `material` to render the object.
<Playground href="/embed/scene-basic" />
## Usage
In the editor **[Hierarchy Panel](/en/docs/interface/hierarchy)**, you can quickly create a node with a cuboid mesh renderer ( **Hierarchy Panel** -> **Right Click** -> **3D Object** -> **Cuboid** ).

4
docs/en/graphics/renderer/renderer.mdx
View File

@@ -48,10 +48,6 @@ console.log("bounds", renderer.bounds);
console.log("isCulled", renderer.isCulled);
```
Below shows how to get the overall bounding box of multiple `Renderers`:
<Playground href="/embed/bounding-box" />
## Methods
The `Renderer` base class mainly provides methods for setting and getting materials. It is important to note that a renderer may contain multiple materials, so the following methods are more like **manipulating an array of materials**.

9
docs/en/graphics/renderer/skinnedMeshRenderer.mdx
View File

@@ -20,12 +20,3 @@ The properties of the Skinned Mesh Renderer are mostly related to `skeletal anim
| `blendShapeWeights` | The blend weights of BlendShapes |
In models exported from the art workflow, all bone and BlendShape information is generally pre-set. Developers only need to play the specified animation clips in conjunction with the [animation system](/en/docs/animation/overview).
## Skeletal Animation
<Playground href="/embed/skeleton-animation-play" />
## BlendShape
<Playground href="/embed/skeleton-animation-blendShape" />

2
docs/en/graphics/shader/builtins/blinnPhong.mdx
View File

@@ -4,8 +4,6 @@ title: Blinn Phong
[BlinnPhongMaterial](/apis/core/#BlinnPhongMaterial) material is one of the classic materials. Although it is not based on physical rendering, its efficient rendering algorithm and comprehensive optical components make it still applicable to many scenarios today.
<Playground href="/embed/blinn-phong" />
## Editor Usage
<Image src="https://gw.alipayobjects.com/zos/OasisHub/eaa93827-29a4-46ad-b9d3-f179fa200c57/blinn.gif" alt="blinn" style={{ zoom: "100%" }} />

2
docs/en/graphics/shader/builtins/unlit.mdx
View File

@@ -4,8 +4,6 @@ title: Unlit
In some simple scenes, you might not want to calculate lighting. The engine provides [UnlitMaterial](/apis/core/#UnlitMaterial), which uses the most streamlined shader code and only requires color or texture to render. Unlit material is suitable for rendering baked models. It only needs a basic texture or color to display the high-quality rendering results obtained from offline rendering. However, the downside is that it cannot display real-time light and shadow interactions because Unlit is determined by the texture and is not affected by any lighting.
<Playground href="/embed/unlit-material" />
## Editor Usage
<Image src="https://gw.alipayobjects.com/zos/OasisHub/6be78a08-3075-4cd1-8cad-9757fc34f695/unlit.gif" alt="unlit" style={{ zoom: "100%" }} />

2
docs/en/graphics/shader/custom.mdx
View File

@@ -4,8 +4,6 @@ title: Custom Shaders
There may be some special rendering requirements in the business, such as water flow effects, which need to be implemented through **custom shaders** (Shader).
<Playground href="/embed/shader-water" />
## Creating Shaders
The [Shader class](/apis/core/#Shader) encapsulates vertex shaders, fragment shaders, shader precompilation, platform precision, and platform differences. Its creation and use are very convenient, and users only need to focus on the shader algorithm itself without worrying about what precision to use or which version of GLSL to write. Here is a simple demo:

4
docs/en/graphics/shader/shaderLab/intro.mdx
View File

@@ -12,7 +12,3 @@ Although ShaderLab introduces convenience for writing shaders, it does not repla
flowchart LR
A[Create Shader] --> B[Edit shaderlab] --> C[Debug shaderlab]
```
Below is a simple example of using ShaderLab, which includes two Shaders. The `normal` Shader defines a vertex shader that only implements MVP transformation and a fragment shader that specifies the pixel color through a Uniform variable. Additionally, the `lines` Shader is a [shadertoy](https://www.shadertoy.com/view/DtXfDr) example modified using ShaderLab.
<Playground href="/embed/shader-lab-simple" />

3
docs/en/graphics/shader/shaderLab/usage.mdx
View File

@@ -12,6 +12,3 @@ If we write the `material property definition` module in `ShaderLab`, the proper
<Image src="https://mdn.alipayobjects.com/huamei_aftkdx/afts/img/A*38UISKqK2WUAAAAAAAAAAAAADteEAQ/original" style={{zoom: "50%"}} />
## An Example of Implementing Planar Shadows Using Multi-Pass Technology
<Playground href="/embed/shader-lab" />

4
docs/en/graphics/texture/2d.mdx
View File

@@ -53,9 +53,7 @@ texture.setImageSource(video);
> `setImageSource` can only synchronize the data of that frame, but the video changes every frame. If you need the texture to change synchronously, you need to execute it in the script's onUpdate hook.
For scenarios where the texture content needs to be frequently updated, such as videos, you need to disable mipmap and set the texture usage to Dynamic when creating the texture to achieve better performance. The sample code is as follows:
<Playground href="/embed/benchmark-video" />
For scenarios where the texture content needs to be frequently updated, such as videos, you need to disable mipmap and set the texture usage to Dynamic when creating the texture to achieve better performance.
### setPixelBuffer

2
docs/en/graphics/texture/compression.mdx
View File

@@ -23,8 +23,6 @@ engine.resourceManager.load<Texture2D>({
})
```
<Playground href="/embed/compressed-texture" />
Using ktx2 in glTF requires including the [KHR_texture_basisu](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_texture_basisu/README.md) extension.
KTX2 can be generated using:

2
docs/en/graphics/texture/rtt.mdx
View File

@@ -50,5 +50,3 @@ class switchRTScript extends Script {
cameraEntity.addComponent(switchRTScript);
```
<Playground href="/embed/render-target" />

6
docs/en/graphics/texture/texture.mdx
View File

@@ -66,7 +66,6 @@ The texture sampling range is `[0,1]`. When the texture UV coordinates exceed th
| Repeat | Resamples from [0,1] when out of range |
| Mirror | Mirrors sampling from [1,0] when out of range |
<Playground href="/embed/wrap-mode" />
### Filter Mode
@@ -78,14 +77,11 @@ Generally, texels and screen pixels do not correspond exactly. We can control th
| Bilinear | Uses the average value of the nearest 2\*2 texel matrix |
| Trilinear | Applies average filtering to the mipmap levels based on bilinear filtering |
<Playground href="/embed/filter-mode" />
### Anisotropic Filtering Level
Anisotropic filtering technology can make textures appear clearer when viewed at oblique angles. As shown in the figure below, the end of the texture becomes clearer as the anisotropic filtering level increases. However, use it with caution; the higher the value, the greater the GPU computation.
<Playground href="/embed/texture-aniso" />
## General Settings
| Setting | Value |
@@ -126,8 +122,6 @@ const cubeTexture = new TextureCube(
); // 第 4 个参数
```
<Playground href="/embed/texture-mipmap" />
### flipY
flipY is used to control whether the texture is flipped along the Y-axis, i.e., upside down. **The engine and editor disable it by default**. If you need to change the default behavior of flipY, you can do so via the [setImageSource](/apis/core/#Texture2D-setImageSource) method:

24
docs/en/how-to-contribute.mdx
View File

@@ -201,30 +201,6 @@ engine.resourceManager
engine.run();
});
### 示例
#### 编写示例代码
我们现在提供两种方式让你组织示例代码：
- 在 `examples/` 文件夹下新建 `.ts` 示例文件来组织示例代码
- 在 `examples/` 文件夹下新建一个 **示例文件夹**，最后通过 `示例文件夹/index.ts` 来暴露示例代码
#### 嵌入示例
````mdx filename="light.mdx"
...
Ambient light emits from all directions and enters the eye, as shown in the example below:
<Playground href="/embed/ambient-light" />
...
````
<Playground href="/embed/ambient-light" />
## New Documentation
Adding new documentation may involve more steps than before (in some cases). It should be noted in advance that in the new official website, the file path is the route. At the same time, the order and titles of the documents need to be configured using `_meta.json`.

2
docs/en/input/framebuffer-picker.mdx
View File

@@ -9,8 +9,6 @@ In 3D applications, it is often necessary to pick objects in the scene. [Ray-box
When the picking frequency is not high, you can consider using the `FramebufferPicker` component with **pixel-level accuracy**. When the picking frequency is too high, developers need to evaluate whether the performance overhead is suitable for the business scenario, as this component involves CPU-GPU communication at the underlying level, i.e., calling `gl.readPixels`.
<Playground href="/embed/framebuffer-picker" />
## Create Framebuffer Picking
```typescript

6
docs/en/input/keyboard.mdx
View File

@@ -36,12 +36,6 @@ class KeyScript extends Script {
}
```
## Practical Example
This time, let's use the spacebar to control Angry Birds.
<Playground href="/embed/flappy-bird" />
## State Dictionary
| Key State | isKeyHeldDown | isKeyDown | isKeyUp |

26
docs/en/input/pointer.mdx
View File

@@ -36,8 +36,6 @@ timeline
……
```
<Playground href="/embed/input-log" />
### Touch Buttons
Referring to the [W3C standard](https://www.w3.org/TR/uievents/#dom-mouseevent-button) and [Microsoft related documentation](https://learn.microsoft.com/en-us/dotnet/api/system.windows.input.mousebutton?view=windowsdesktop-6.0), Galacean defines touch buttons as follows:
@@ -54,9 +52,6 @@ Referring to the [W3C standard](https://www.w3.org/TR/uievents/#dom-mouseevent-b
| [XButton4](/apis/core/#PointerButton-XButton4) | Extended button |
| …… | …… |
Combining touch buttons can easily detect the behavior of touch points triggered in this frame:
<Playground href="/embed/input-pointerButton" />
### Touch Callbacks
@@ -71,15 +66,10 @@ You only need to add touch callbacks to an Entity with a Collider component to e
| [onPointerClick](/apis/core/#Script-onPointerClick) | Triggered once when the touch point is pressed and released within the Entity's collider range |
| [onPointerDrag](/apis/core/#Script-onPointerDrag) | Continuously triggered when the touch point is pressed within the Entity's collider range until the touch point is no longer pressed |
> ⚠️ Touch callbacks **depend on the physics engine**. Please ensure the physics engine is initialized before using this feature.
<Callout type="info">
Touch callbacks **depend on the physics engine**. Please ensure the physics engine is initialized before using this feature.
</Callout>
Example:
- The leftmost cube responds to Enter and Exit events, changing color when the mouse moves over it and when the mouse leaves.
- The middle cube responds to Drag events, allowing you to drag the cube anywhere in space with the mouse.
- The rightmost cube responds to Click events (first down, then up), changing color when the mouse clicks on it.
<Playground href="/embed/input-pointer" />
### Raycasting
@@ -104,17 +94,13 @@ if (scene.physics.raycast(ray, 100, hitResult)) {
}
```
The following example provides a more intuitive understanding of this process. The main camera is equipped with auxiliary lines, and the side view camera can fully observe the process of the main camera's raycasting detecting the collider.
<Playground href="/embed/input-pointerRaycast" />
## Compatibility
As of February 2024, the compatibility of PointerEvent across different platforms has reached [96.35%](https://caniuse.com/?search=PointerEvent).
Design ideas can be referenced at: https://github.com/galacean/engine/wiki/Input-system-design.
> ⚠️ If you encounter compatibility issues on a platform, you can raise an issue at https://github.com/galacean/polyfill-pointer-event.
<Callout type="info">
️ If you encounter compatibility issues on a platform, you can raise an issue at https://github.com/galacean/polyfill-pointer-event.
</Callout>
## QA

5
docs/en/input/wheel.mdx
View File

@@ -10,8 +10,3 @@ Galacean's wheel input is based on [WheelEvent](https://www.w3.org/TR/uievents/#
## Usage
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*9hCPSpreeJUAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{ zoom: "100%" }} />
Here is an example of using the wheel to control the camera distance.
<Playground href="/embed/input-wheel" />

4
docs/en/performance/stats.mdx
View File

@@ -14,7 +14,3 @@ import { Stats } from "@galacean/engine-toolkit-stats";
cameraEntity.addComponent(Camera);
cameraEntity.addComponent(Stats);
```
## Example
<Playground href="/embed/text-barrage" />

3
docs/en/physics/collider/colliderShape.mdx
View File

@@ -148,9 +148,6 @@ function createCompoundCollider(entity: Entity) {
}
```
#### Example Reference
<Playground href="/embed/physx-compound" />
### Common Scenarios
1. **Creating Ground**

4
docs/en/physics/collider/event.mdx
View File

@@ -83,7 +83,3 @@ class EventHandler extends Script {
}
}
```
### Example
<Playground href="/embed/physx-collision-detection" />

3
docs/en/physics/debug.mdx
View File

@@ -12,5 +12,4 @@ It's very easy to use - just mount the `WireframeManager` script and set its ass
```typescript
const wireframe = rootEntity.addComponent(WireframeManager);
wireframe.addCollideWireframe(collider);
```
<Playground href="/embed/physics-debug-draw" />
```

3
docs/en/physics/joint/overview.mdx
View File

@@ -90,9 +90,6 @@ joint.connectedMassScale = 1.0;
joint.automaticConnectedAnchor = true;
```
For example of using these physical constraint components, see:
<playground src="physx-joint-basic.ts"></playground>
For detailed script usage of each joint type, please refer to their respective documentation:
- [FixedJoint](/docs/physics/joint/fixedJoint)
- [SpringJoint](/docs/physics/joint/springJoint)

2
docs/en/physics/manager.mdx
View File

@@ -65,8 +65,6 @@ scene.physics.gravity.set(0, -9.81, 0);
## Using Raycasting
<Playground href="/embed/physx-raycast" />
A ray can be understood as an infinite line emitted from a point in a certain direction in the 3D world. Raycasting is widely used in 3D applications:
- Used to pick objects in the 3D scene when the user clicks the screen

192
docs/en/quick-start/core-concept.md
View File

@@ -1,192 +0,0 @@
---
order: 1
title: Core Concepts
type: Basics
group: Getting Started
label: Basics/GettingStarted
---
Let's understand the core concepts in the editor and runtime through an example of a cube.
## Editor Usage
### Creating a Project
After logging in, you will first see the homepage of the editor, where all your created projects are displayed. Use the button in the top right corner to create a project. After clicking, you can choose the type of project to create, either 2D or 3D. Let's choose a 3D Project.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*luxKRKYGSBMAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161225962" style="zoom:50%;" />
### Creating a Cube
First, we create a new entity in the **Hierarchy Panel** ([What is an entity?](https://galacean.antgroup.com/#/en/docs/latest/cn/entity)).
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*g-zmTr6rD9MAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161422138" style="zoom:50%;" />
Select the newly created entity node with the left mouse button. The **[Inspector Panel](/en/docs/interface/inspector)** on the right will display some configurable properties of the current entity. Since our entity is not currently associated with any components ([What is a component?](https://galacean.antgroup.com/#/en/docs/latest/cn/entity)), we can only adjust basic properties like the entity's coordinate information for now.
Next, click the `Add Component` button in the **[Inspector Panel](/en/docs/interface/inspector)** to bring up the component menu, then choose to add a `Mesh Renderer` component ([What is a Mesh Renderer?](/en/docs/graphics-renderer-meshRenderer)).
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*TrArQ7FmXc4AAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161622497" style="zoom:50%;" />
Now, we have added a `Mesh Renderer` component to the current entity. However, we still cannot see this object in the main editing area. We need to add Mesh and Material to this component. The editor will automatically add a non-editable default material for the `Mesh Renderer` component. We just need to add a Cuboid Mesh to the Mesh property of the component to see it in the scene.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*pc_6S5zuGhYAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161758541" style="zoom:50%;" />
Since the default material is quite simple, let's create a custom material next.
You can also quickly add a cube model by clicking the `3D Object` → `Cuboid` in the add entity button, which will automatically add a `Mesh Renderer` component for you:
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*zlEzSLQ-L9cAAAAAAAAAAAAADhuCAQ/original" style="zoom:50%;" />
### Creating Materials
First, let's upload textures. You can drag these texture files directly to the **Asset Management Panel** to upload them in bulk.
After uploading, you can see these files in the panel, which are roughness texture, normal texture, and base color texture.
<img src="https://gw.alipayobjects.com/zos/OasisHub/81ad7299-158b-4347-8e67-86b835980a04/image-20230921172453377.png" alt="image-20230921172453377" style="zoom:50%;" />
First, in the **Asset Management Panel**, select `Right-click` → `Create` → `Material` to let the editor create a default PBR material. Select this material, and the **[Inspector Panel](/en/docs/interface/inspector)** will display the configuration options for the current material. The default material is quite simple, so we can add some texture maps to this material, such as base texture, roughness texture, and normal map.
![image-20230921173056885](https://gw.alipayobjects.com/zos/OasisHub/65bf4b63-3f09-4ad6-abc9-a9d26e173783/image-20230921173056885.png)
Next, we will configure these textures to the corresponding properties of the material. After configuration, we select the entity node created in the previous step again, and modify the `Material` property of the `Mesh Renderer` component to the custom material we just created. A cube with a metallic texture is successfully created.
![Untitled](https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*ni3KQ7jGK-0AAAAAAAAAAAAADqiTAQ/original)
However, the cube looks a bit dark now, so we need to brighten the [lighting](https://galacean.antgroup.com/#/en/docs/latest/en/light) in the scene. We select the `DirectLight` node in the node tree, then increase the `Intensity` property in the inspector.
Now it looks more normal.
![Untitled](https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*n151R6vZ59oAAAAAAAAAAAAADqiTAQ/original)
### Create a Script
Next, we will bind a `Script` component to this node ([What is a Script component?](https://galacean.antgroup.com/#/en/docs/latest/en/script)).
1. We continue to add a `Script` component in the **[Inspector Panel](/en/docs/interface/inspector)** in the same way as above
2. Next, in the **[Assets Panel](/en/docs/assets/interface)**, `right-click` → `Create` → `Script` to create a `Script` asset
3. Finally, in the **[Inspector Panel](/en/docs/interface/inspector)**, bind the newly created script file to the script component
> ⚠️ Note that if you do not bind the script asset to the entity's script component, the script will not run
After creating the script, we can **double-click** it to jump to the code editor page.
![image-20230921180953712](https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*gmIjSbbNHZ0AAAAAAAAAAAAADhuCAQ/original)
Once in the code editor, we write a very simple rotation function:
```ts
// Script.ts
import { Script } from "@galacean/engine";
export default class extends Script {
onUpdate(deltaTime: number) {
this.entity.transform.rotate(1, 1, 1);
}
}
```
After writing the code, save (`⌘+s`), and you can see the effect of the entire scene in the preview area on the right in real-time.
### Export the Project
Now that we have completed the basic development work in the editor, let's export this project to the local environment.
Click the **Download** button on the left toolbar, which will bring up the export interface. Here, change the project name to "box," then click the `Download` button, and the editor will package the project into a `box.zip` file for download.
![image-20230921162204014](https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*mmoIRqIt30oAAAAAAAAAAAAADhuCAQ/original)
After the project is packaged, open the box project in VsCode, run `npm install` & `npm run dev`, and you will see that the project is running correctly.
## Script Usage
<playground src="scene-basic.ts"></playground>
## Import Modules
We start writing engine code using [TypeScript](https://www.typescriptlang.org/). If you are not yet comfortable with TypeScript, you can still run using JavaScript and enjoy the benefits of engine API hints (by using IDEs like [VSCode](https://code.visualstudio.com/)).
Returning to our programming, to implement such a feature, we need to import the following Galacean engine classes into our project:
Let's start by getting to know these classes:
| Type | Class Name | Definition |
| -------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| WebGL Engine | [WebGLEngine](/apis/rhi-webgl/WebGLEngine) | WebGL platform engine, supporting WebGL 1.0 and WebGL 2.0, it can control all behaviors of the canvas, including resource management, scene management, execution/pause/resume, vertical synchronization, etc. (See [Engine](/en/docs/core/engine) section for details.) |
| Component | [Camera](/apis/core/#Camera) | Camera, an abstract concept of 3D projection in a graphics engine, similar to a camera or eye in the real world. Without a camera, the canvas will not render anything. (See [Camera](/en/docs/graphics-camera) section for details.) |
| | [DirectLight](/apis/core/#DirectLight) | Direct light, a type of lighting that adds depth to the scene. Using lighting can create a more realistic 3D scene. (See [Lighting](/en/docs/graphics-light) section for details.) |
| | [Script](/apis/core/#Script) | Script, a link between engine capabilities and game logic. It can be used to extend the engine's functionality, and game logic code can be written in the lifecycle hooks provided by script components. (See [Script](/en/docs/script) section for details.) |
| | [MeshRenderer](/apis/core/#MeshRenderer) | Mesh renderer, using a mesh object (in this example, a cube) as the data source for the geometric outline. |
| Geometry and Material Classes | [PrimitiveMesh](/apis/core/#PrimitiveMesh) | Primitive mesh, providing convenient methods for creating mesh objects such as cubes, spheres, etc. (See [Built-in Geometry](/en/docs/graphics-model) section for details.) |
| | [BlinnPhongMaterial](/apis/core/#BlinnPhongMaterial) | Material defines how to render this cube, BlinnPhong material is one of the classic materials. (See [Material](/en/docs/graphics-material) section for details.) |
| Math Library Classes | [Vector3](/apis/math/#Vector3), [Vector4](/apis/math/#Vector4), [Color](/apis/math/#Color) | These classes are basic units for mathematical calculations, used to calculate the position, color, etc., of the cube. (See [Math Library](/en/docs/core/math) section for details.) |
## Create Engine Instance
Create an engine instance, where the `canvas` parameter is the `id` of the _Canvas_ element. If the `id` is different, please replace it accordingly. As mentioned above, reset the canvas dimensions using the [resizeByClientSize](/apis/rhi-webgl/WebCanvas#resizeByClientSize) method.
```typescript
const engine = await WebGLEngine.create({ canvas: "canvas" });
engine.canvas.resizeByClientSize();
```
## Create Root Node of the Scene
It is worth noting that an engine instance may contain multiple scene instances. To add a cube to the currently active scene, you need to obtain the currently active scene through the engine's scene manager `engine.sceneManager`.
Once you have the scene, create a **root entity** using the scene's `createRootEntity` method. The root entity in the scene is the root node of the scene tree.
```typescript
const scene = engine.sceneManager.activeScene;
const rootEntity = scene.createRootEntity("root");
```
## Create a Camera Entity
In Galacean Engine, functionalities are added to entities in the form of components. First, create an entity to add a camera component.
After creation, use the entity's built-in transform component `transform` to change the position and orientation of the camera. Then add a camera component `Camera` to this entity.
```typescript
let cameraEntity = rootEntity.createChild("camera_entity");
cameraEntity.transform.position = new Vector3(0, 5, 10);
cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
let camera = cameraEntity.addComponent(Camera);
```
## Create Lighting
Similarly, lighting is also attached to entities in the form of components. After creating the entity, add a directional light component `DirectLight`, set the color, intensity properties, and light angle of the directional light component to achieve the desired lighting effect.
```typescript
let lightEntity = rootEntity.createChild("light");
let directLight = lightEntity.addComponent(DirectLight);
directLight.color = new Color(1.0, 1.0, 1.0);
directLight.intensity = 0.5;
lightEntity.transform.rotation = new Vector3(45, 45, 45);
```
## Create a Cube
Create another entity to attach a cube mesh renderer component. `MeshRenderer` is the mesh renderer component, set the `.mesh` property to the cube data created by `PrimitiveMesh`, and set the cube's material to BlinnPhong using the `setMaterial` method.
```typescript
let cubeEntity = rootEntity.createChild("cube");
let cube = cubeEntity.addComponent(MeshRenderer);
cube.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
cube.setMaterial(new BlinnPhongMaterial(engine));
```
## Start the Engine
Everything is set up, let's start the engine with just one line of code!
```typescript
engine.run();
```

39
docs/en/quick-start/flappy-bird.md → docs/en/quick-start/flappy-bird.mdx
View File

@@ -12,7 +12,7 @@ label: Basics/GettingStarted
Flappy Bird is a 2D project. The 2D template provided on the editor's homepage is implemented step by step according to this document. Let's start by creating a `2D Project` using the editor's `New Project` feature. (If you encounter any issues, refer to **Home** -> **Templates** -> **Pixel Bird**)
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*tzD2TKk9f9gAAAAAAAAAAAAADleLAQ/original" alt="image-20231007170002181" />
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*tzD2TKk9f9gAAAAAAAAAAAAADleLAQ/original" alt="image-20231007170002181" />
## Prepare Resources
@@ -24,25 +24,25 @@ Flappy Bird relies on a set of images. You can download the image package to you
- Ground, pipes
- Game restart button
<img src="https://gw.alipayobjects.com/zos/OasisHub/154a2280-92d5-465e-8501-4ecc3f01c9d1/image-20231007170002181.png" alt="image-20231007170002181" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/154a2280-92d5-465e-8501-4ecc3f01c9d1/image-20231007170002181.png" alt="image-20231007170002181" style={{zoom:"50%"}} />
### Upload Resources
Go back to the scene editor, click the upload button on the resource panel <img src="https://gw.alipayobjects.com/zos/OasisHub/07b876d3-462b-4a06-a2da-ce68d2932034/image-20231007145111353.png" alt="image-20231007145111353" style="zoom:50%;" />, and select `Sprite`. This will open the file viewer of your operating system. Choose all the images from the FlappyBird directory. After uploading, as shown in the image below, the editor creates a [Texture](/en/docs/graphics-texture) resource and a [Sprite](/en/docs/graphics/2D/sprite) resource for each image (Sprites are distinguished from Texture resources by a gray rounded rectangle background). In the following steps, we will only focus on Sprite resources.
Go back to the scene editor, click the upload button on the resource panel <img src="https://gw.alipayobjects.com/zos/OasisHub/07b876d3-462b-4a06-a2da-ce68d2932034/image-20231007145111353.png" alt="image-20231007145111353" />, and select `Sprite`. This will open the file viewer of your operating system. Choose all the images from the FlappyBird directory. After uploading, as shown in the image below, the editor creates a [Texture](/en/docs/graphics-texture) resource and a [Sprite](/en/docs/graphics/2D/sprite) resource for each image (Sprites are distinguished from Texture resources by a gray rounded rectangle background). In the following steps, we will only focus on Sprite resources.
<img src="https://gw.alipayobjects.com/zos/OasisHub/7f13679f-de18-4621-81b1-5834b5d00bd7/image-20231007145451371.png" alt="image-20231007145451371" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/7f13679f-de18-4621-81b1-5834b5d00bd7/image-20231007145451371.png" alt="image-20231007145451371" style={{zoom:"50%"}} />
At this point, we have uploaded the resources. However, if you have a tendency for tidiness, seeing these scattered resources may trigger your urge to organize them. Let's create a folder and rename it to _Sprites_. Then, select all the recently uploaded resources and drag them into the _Sprites_ directory. This not only makes the resource panel more organized but also prepares us for creating a [Sprite Atlas](/en/docs/graphics/2D/spriteAtlas) resource in the next step.
### Create Sprite Atlas
To achieve better runtime performance, we choose to pack these Sprite resources into an Atlas resource. Click the <img src="https://gw.alipayobjects.com/zos/OasisHub/16aa674c-1bee-49d7-a516-21c591a4ce36/image-20231007152415467.png" alt="image-20231007152415467" style="zoom:50%;" /> button and select `Sprite Atlas`. After creating it, select the Sprite Atlas and use the `Add to List` button on the **[Inspector Panel](/en/docs/interface/inspector)** to add all Sprite resources to the list.
To achieve better runtime performance, we choose to pack these Sprite resources into an Atlas resource. Click the <img src="https://gw.alipayobjects.com/zos/OasisHub/16aa674c-1bee-49d7-a516-21c591a4ce36/image-20231007152415467.png" alt="image-20231007152415467" /> button and select `Sprite Atlas`. After creating it, select the Sprite Atlas and use the `Add to List` button on the **[Inspector Panel](/en/docs/interface/inspector)** to add all Sprite resources to the list.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*1YsTTZdjmm4AAAAAAAAAAAAADhuCAQ/original" alt="image-20231007171348757" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*1YsTTZdjmm4AAAAAAAAAAAAADhuCAQ/original" alt="image-20231007171348757" style={{zoom:"50%"}} />
点击 `Pack and Preview` button to see Atlas creation success:
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*Xc0ZR71aXdMAAAAAAAAAAAAADleLAQ/original" alt="image-20231007153448666" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*Xc0ZR71aXdMAAAAAAAAAAAAADleLAQ/original" alt="image-20231007153448666" style={{zoom:"50%"}} />
Congratulations, you have completed the resource upload and management operations up to this point. Next, we will proceed to building the game scene.
@@ -56,7 +56,7 @@ Select the `Camera` node in the hierarchy panel to preview how the scene will re
> If you find the screen too large or too small, you can adjust the `Orthographic Size` of the orthographic camera to scale it.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*XRceR5mdqLgAAAAAAAAAAAAADhuCAQ/original" alt="image-20231007162550749" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*XRceR5mdqLgAAAAAAAAAAAAADhuCAQ/original" alt="image-20231007162550749" style={{zoom:"50%"}} />
### Add the Bird
@@ -66,19 +66,19 @@ Similarly, drag the Sprite of the bird (`bird3-spr.png`) into the scene. The bir
As the game progresses, pipes will repeatedly appear on the screen in pairs of upper and lower pipes. Here's a little trick: you can set the `Scale` value of the upper pipe to `-1` to elegantly achieve flipping.
<img src="https://gw.alipayobjects.com/zos/OasisHub/c4e2cf84-3834-4178-86d0-3ad9faa7bd28/image-20231007163240028.png" alt="image-20231007163240028" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/c4e2cf84-3834-4178-86d0-3ad9faa7bd28/image-20231007163240028.png" alt="image-20231007163240028" style={{zoom:"50%"}} />
During the game, the height at which pipes appear is random, but the assets we have on hand have fixed heights. No worries, just adjust the `Sprite Render Mode` to stretch without loss, allowing us to stretch certain assets without distortion.
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*ZDSZTaXK-RIAAAAAAAAAAAAADleLAQ/original"/>
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*ZDSZTaXK-RIAAAAAAAAAAAAADleLAQ/original"/>
Here's a little trick: setting the `pivot` property of the referenced `sprite` asset to `bottom` can avoid re-anchoring the position every time you adjust the height.
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*MQqKTK0BAFAAAAAAAAAAAAAADleLAQ/original" alt="image-20231007163240028" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*MQqKTK0BAFAAAAAAAAAAAAAADleLAQ/original" alt="image-20231007163240028" style={{zoom:"50%"}} />
Considering that pipes will repeat, we can group a pair of pipes into a `PipeMother` group in the node tree and place it under the `Pipe` node. This way, by binding a script component to the Pipe later, we can access `PipeMother` to achieve pipe reuse.
<img src="https://gw.alipayobjects.com/zos/OasisHub/ef20415a-aa57-4236-b29e-e4df88f7e747/image-20231007163400680.png" alt="image-20231007163400680" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/ef20415a-aa57-4236-b29e-e4df88f7e747/image-20231007163400680.png" alt="image-20231007163400680" style={{zoom:"50%"}} />
### Add the Ground
@@ -90,24 +90,23 @@ Here are the steps:
2. In the **[Inspector Panel](/en/docs/interface/inspector)**, add a `Sprite Renderer` component by clicking the `Add Component` button, set the `SpriteRenderer DrawMode Info` property to `Tiled`, and set the width to `8.14`.
```markdown
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*pDBbTp6a78oAAAAAAAAAAAAADleLAQ/original" alt="image-20231007173243980" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*pDBbTp6a78oAAAAAAAAAAAAADleLAQ/original" alt="image-20231007173243980" style={{zoom:"50%"}} />
3. At this point, we have a fully tiled ground. Next, we can make it move by creating animation clips! See [Animation Clip Editing](/en/docs/animation/clip) for details.
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*3d2GSINL_8IAAAAAAAAAAAAADleLAQ/original" />
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*3d2GSINL_8IAAAAAAAAAAAAADleLAQ/original" />
### Adding a Mask
After adding the ground, we noticed that the left and right sides seem to be exposed! In such cases, you just need to add a mask to the sprite renderer. See [Sprite Mask Component](/en/docs/graphics/2D/spriteMask) for details.
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*d_ZBS6zxOjQAAAAAAAAAAAAADleLAQ/original" />
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*d_ZBS6zxOjQAAAAAAAAAAAAADleLAQ/original" />
### Adding GUI
The GUI includes score display and restart button. Drag two sprites, one for the score (`0.png`) and the other for the restart button (`restart.png`), into the scene and place them under a newly created `GUI` node.
<img src="https://gw.alipayobjects.com/zos/OasisHub/2f443e5f-1523-4341-8f10-4c85c421fb50/image-20231007180819265.png" alt="image-20231007180819265" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/2f443e5f-1523-4341-8f10-4c85c421fb50/image-20231007180819265.png" alt="image-20231007180819265" style={{zoom:"50%"}} />
With this, the interface is set up! Take a look at the complete structure of the node tree on the left. A good tree structure is important for managing complex scenes.
@@ -124,7 +123,7 @@ In this project, we need to add physical feedback when **the bird touches the pi
Colliders describe the pose and shape of objects, so when adding colliders, they should closely match the actual size of the objects being displayed. See [Colliders](/en/docs/physics-collider) for more information on using colliders. Here, we demonstrate adding a collider to the bird.
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*_szwQL3V1AQAAAAAAAAAAAAADleLAQ/original" />
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*_szwQL3V1AQAAAAAAAAAAAAADleLAQ/original" />
#### Handling Collision Callbacks
@@ -259,7 +258,7 @@ timeline
After disassembling, it can be found that if we simply classify animations as idle animation, flying animation, and falling animation, considering that when idle, we need to play sprite switching and vertical easing animations, and when flying, we also need to play sprite switching and upward falling animations. The overlapping parts not only increase the workload during animation editing but also require additional consideration of whether the sprite switching animations between these two animations are natural. Therefore, we further atomize each `AnimatorState` , split the parts of sprite switching and coordinate changes, and set them in different `Layers` separately. Different `Layers` are independent of each other and can play their animations simultaneously, set their overlay modes and weights. For more details, refer to the [animation component](/en/docs/animation/system/).
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*1cXjQIJAgZoAAAAAAAAAAAAADleLAQ/original" alt="image-20231007180819265" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*1cXjQIJAgZoAAAAAAAAAAAAADleLAQ/original" alt="image-20231007180819265" style={{zoom:"50%"}} />
Let each `Layer` control its own `AnimatorState` separately for clearer logic.
@@ -348,7 +347,7 @@ class Bird extends Script {
Since animation segment editing can only edit absolute coordinate or rotation changes, for example, each flight animation, its rotation change is absolute, but the coordinates are relative. Therefore, we can implement this in the `StateMachineScript`, using the `Fly` animation as an example:
<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*T_stQakEWT0AAAAAAAAAAAAADleLAQ/original"/>
<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*T_stQakEWT0AAAAAAAAAAAAADleLAQ/original"/>
Then open this script and add the free fall coordinate changes:

0
docs/en/quick-start/overview.md → docs/en/quick-start/overview.mdx
View File

0
docs/en/script/attributes.md → docs/en/script/attributes.mdx
View File

2
docs/en/script/class.md → docs/en/script/class.mdx
View File

@@ -15,7 +15,7 @@ Additionally, it provides a rich set of lifecycle callback functions. As long as
## Script Lifecycle
<img src="https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*_8C-TJP2UIgAAAAAAAAAAAAAARQnAQ" alt="Script Lifecycle-zh" style="zoom:67%;" />
<Image src="https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*_8C-TJP2UIgAAAAAAAAAAAAAARQnAQ" alt="Script Lifecycle-zh" />
> [onBeginRender](/apis/core/#Script-onBeginRender) and [onEndRender](/apis/core/#Script-onEndRender) are somewhat different from the others.
>

0
docs/en/script/communication.md → docs/en/script/communication.mdx
View File

0
docs/en/script/script.md → docs/en/script/script.mdx
View File

0
docs/en/xr/camera.md → docs/en/xr/camera.mdx
View File

2
docs/en/xr/compatibility.md → docs/en/xr/compatibility.mdx
View File

@@ -50,5 +50,5 @@ xrManager.isSupportedFeature(XRImageTracking);
Android supports some experimental features, but they are turned off by default. You can enable them by setting flags: **Open Chrome on Android** -> **Log in to chrome://flags** -> **Search for WebXR** -> **Enable WebXR Incubations**
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*YJCVTIAe0nEAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*YJCVTIAe0nEAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />

8
docs/en/xr/features.md → docs/en/xr/features.mdx
View File

@@ -70,9 +70,7 @@ anchorTracking.addChangedListener(
xrManager.addFeature(XRPlaneTracking, XRPlaneMode.EveryThing);
```
We can track real-world planes and mark them with transparent grids and coordinate systems:
<playground src="xr-ar-planeTracking.ts"></playground>
We can track real-world planes and mark them with transparent grids and coordinate systems.
## Image Tracking
@@ -93,9 +91,7 @@ We can track real-world planes and mark them with transparent grids and coordina
xrManager.addFeature(XRImageTracking, [refImage]);
```
We can track real-world images and mark them with coordinate systems:
<playground src="xr-ar-planeTracking.ts"></playground>
We can track real-world images and mark them with coordinate systems.
## Collision Detection

0
docs/en/xr/input.md → docs/en/xr/input.mdx
View File

0
docs/en/xr/manager.md → docs/en/xr/manager.mdx
View File

2
docs/en/xr/overall.md → docs/en/xr/overall.mdx
View File

@@ -15,7 +15,7 @@ Galacean has designed XR to be clean and flexible:
- Flexible: Pluggable functionality makes development easier.
- Future-oriented: Multi-backend design allows for adaptation to different platforms and interfaces in the future.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*_lUbQblVmQYAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*_lUbQblVmQYAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
## Module Management

8
docs/en/xr/quickStart/debug.md → docs/en/xr/quickStart/debug.mdx
View File

@@ -17,7 +17,7 @@ First, prepare the debugging environment. Use the Chrome browser that supports W
Once prepared, you can preview the XR project in the editor:
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*lglHQad-k88AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*lglHQad-k88AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
Of course, you can also preview by downloading the project to the local script build:
@@ -26,7 +26,7 @@ npm install
npm run https
```
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*4rqLS51t6DoAAAAAAAAAAAAADhuCAQ/original" alt="image.png" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*4rqLS51t6DoAAAAAAAAAAAAADhuCAQ/original" alt="image.png" />
> WebXR is only available in a secure environment (HTTPS), so you need to enable HTTPS when building the project for debugging.
@@ -40,11 +40,11 @@ To support mobile debugging, the following conditions must be met:
> `Google Play Services for AR` is an augmented reality platform developed by Google (ARCore). Some phones come with this app pre-installed. If not, you can search for it in the app store. The image below shows the search result in the Xiaomi app store.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*1piTR6lx8T8AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*1piTR6lx8T8AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
With all the above conditions met, you can preview the locally built project on your phone (ensure that **the phone and computer are on the same local network**):
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*YGikQ6UhL5oAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*YGikQ6UhL5oAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
### Debugging

18
docs/en/xr/quickStart/develop.md → docs/en/xr/quickStart/develop.mdx
View File

@@ -20,13 +20,13 @@ flowchart LR
On the **[Home Page](/en/docs/interface/intro/#%E9%A6%96%E9%A1%B5)** click **Create Project**, then in **[Project Settings](/en/docs/interface/sidebar/#project-settings)** select the physics backend as `WebXR`.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*n0b_Sa89AKoAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*n0b_Sa89AKoAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
### Add XR Node
In the **[Hierarchy Panel](/en/docs/interface/hierarchy/)** add an XR node.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*qGeqSa-gx8EAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*qGeqSa-gx8EAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
> Adding an XR node will automatically create and select `origin` and `camera`, so there should be no other `Camera` components in the scene unless intentionally added.
@@ -36,7 +36,7 @@ In the **[Hierarchy Panel](/en/docs/interface/hierarchy/)** add an XR node.
If you have followed the [Debug XR Project](/en/docs/xr/quickStart/debug/) requirements using Chrome and the [Immersive Web Emulator](https://chromewebstore.google.com/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik) plugin, you can preview directly.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*aiw2Tq994REAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*aiw2Tq994REAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
### XR Capabilities
@@ -51,7 +51,7 @@ Add the `XR Anchor Manage` component to any active Entity to add anchor tracking
| Anchor List | List of tracked anchors, determined by Position and RotationQuaternion in real space |
| Prefab | If a prefab is set, it will be instantiated and attached to the tracked anchor when the anchor is tracked |
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*QJgzSasSHmQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*QJgzSasSHmQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
#### Image Tracking
@@ -62,7 +62,7 @@ Add the `XR Image Manage` component to any active Entity to add image tracking c
| Image List | List of tracked images, add `ReferenceImageAssets` to determine the tracked image information |
| Prefab | If a prefab is set, it will be instantiated and attached to the tracked anchor when the anchor is tracked |
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*QJgzSasSHmQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*QJgzSasSHmQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
Among them, the tracked image is an asset in the editor. You can upload the tracked image by right-clicking on the blank space of the **[Asset Panel](/en/docs/assets/interface/)** → **Upload** → **XRReferenceImage** → **select the corresponding image**.
@@ -82,7 +82,7 @@ Add the `XR Plane Manage` component to any active Entity to enable plane trackin
| Detection Mode | The type of plane detection, including `None`, `Horizontal`, `Vertical`, `EveryThing`. It can determine the type of plane to be tracked. The default is `EveryThing`, but in `WebXR`, it usually detects horizontal planes |
| Prefab | If a prefab is set, the prefab will be instantiated and attached to the tracked plane when the plane is tracked |
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*10GkTo4k-CcAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*10GkTo4k-CcAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
### Note
@@ -106,9 +106,3 @@ engine.xrManager.sessionManager.isSupportedMode(xrMode).then(
}
);
```
## Script Development
Before entering pure code development, please first understand some [XR Managers](/en/docs/xr/system/manager/) content. Below is the simplest example to enable AR interaction:
<playground src="xr-ar-simple.ts"></playground>

0
docs/en/xr/session.md → docs/en/xr/session.mdx
View File

10
docs/en/xr/start.md → docs/en/xr/start.mdx
View File

@@ -24,13 +24,13 @@ Since we are introducing WebXR for the backend, taking an AR project as an examp
> `Google Play Services for AR` is an augmented reality platform (ARCore) developed by Google. Some phones come with this app pre-installed. If not, you can search for it in the app store. The image below shows the search result in the Xiaomi app store.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*1piTR6lx8T8AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*1piTR6lx8T8AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
### PC Debugging
For PC Chrome, it is recommended to install [Immersive Web Emulator](https://chromewebstore.google.com/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik), a tool developed by Meta that allows you to easily debug WebXR on Chrome. As shown in the image below, we use this tool to simulate XR devices for debugging on PC Chrome.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*KR_rQq3sSY4AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*KR_rQq3sSY4AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
> The left side of the image above shows the XR business panel view, and the right side shows the developer tools.
@@ -42,7 +42,7 @@ After confirming the installation of `Google Play Services for AR` on an Android
After preparing the above, you can quickly create an XR project by clicking on **Templates** -> **XR Template** in the **Menu View** on the **Editor Homepage**.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*du7MS4eTWkgAAAAAAAAAAAAADhuCAQ/original" alt="image.png" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*du7MS4eTWkgAAAAAAAAAAAAADhuCAQ/original" alt="image.png" />
## PC Preview
@@ -55,7 +55,7 @@ npm run https
Then open the corresponding URL in Chrome to debug the XR project.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*4rqLS51t6DoAAAAAAAAAAAAADhuCAQ/original" alt="image.png" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*4rqLS51t6DoAAAAAAAAAAAAADhuCAQ/original" alt="image.png" />
> WebXR is only available in a secure environment (HTTPS), so enabling HTTPS is required when building and debugging the project.
@@ -67,7 +67,7 @@ As mentioned above, with the installation of `Immersive Web Emulator`, open the
Before the project is officially released, you can test it on both your phone and computer within the same local network.
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*YGikQ6UhL5oAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*YGikQ6UhL5oAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom:"50%"}} />
### Debugging

0
docs/en/xr/system/camera.md → docs/en/xr/system/camera.mdx
View File

12
docs/en/xr/system/features.md → docs/en/xr/system/features.mdx
View File

@@ -66,9 +66,7 @@ anchorTracking.addChangedListener(
xrManager.addFeature(XRPlaneTracking, XRPlaneMode.EveryThing);
```
We can track real-world planes and mark them with transparent grids and coordinate systems:
<playground src="xr-ar-planeTracking.ts"></playground>
We can track real-world planes and mark them with transparent grids and coordinate systems.
## Image Tracking
@@ -103,14 +101,6 @@ image.onload = () => {
image.src = "图片的 URL";
```
The example below can track a real-world image and mark the coordinate system:
<playground src="xr-ar-imageTracking.ts"></playground>
> The above example can directly generate a QR code for mobile-side experience. The tracking image is as follows:
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*-MneS5WGJywAAAAAAAAAAAAADhuCAQ/original" alt="image-20231007201437362" style="zoom:20%;" />
## Collision Detection
| Method | Description |

0
docs/en/xr/system/input.md → docs/en/xr/system/input.mdx
View File

0
docs/en/xr/system/session.md → docs/en/xr/system/session.mdx
View File

4
docs/zh/UI/quickStart/button.mdx
View File

@@ -38,7 +38,3 @@ label: UI
| `removeTransition` | 移除某个按钮过渡表现 |
| `addClicked` | 添加一个点击回调函数 |
| `removeClicked` | 移除某个点击回调函数 |
## 脚本开发
<Playground href="/embed/ui-Button" />

4
docs/zh/UI/quickStart/event.mdx
View File

@@ -34,7 +34,3 @@ stateDiagram
B --> C
B --> D
```
## 脚本开发
<Playground href="/embed/ui-Event" />

4
docs/zh/UI/quickStart/group.mdx
View File

@@ -22,7 +22,3 @@ label: UI
| `ignoreParentGroup` | 是否忽略上层 Group 的设置 |
> UIGroup 解决了 UI 元素的属性无法由父传递给子的问题。
## 脚本开发
<Playground href="/embed/xr-ar-simple" />

4
docs/zh/UI/quickStart/image.mdx
View File

@@ -42,7 +42,3 @@ Image 的显示内容取决于设置的 [Sprite 资产]() ，选中添加了 `Im
| `drawMode` | 绘制模式，支持普通，九宫和平铺绘制模式 |
| `raycastEnabled` | 是否可以被射线检测到 |
| `raycastPadding` | 射线检测的自定义边界与他的碰撞区域的距离，它是归一化的值并且 X，Y，Z，W 分别代表距离左下右上四条边的距离 |
## 脚本开发
<Playground href="/embed/ui-Image" />

4
docs/zh/UI/quickStart/text.mdx
View File

@@ -51,7 +51,3 @@ label: UI
| `verticalAlignment` | 竖直对齐方式，可选值有：Top/Center/Bottom |
| `enableWrapping` | 是否开启换行模式，打开换行模式后，会根据设置的宽来进行换行，如果这时候宽设置为 0，那么文本将不渲染 |
| `overflowMode` | 当文本总高度超出设置的高的时候的处理方式，可选值有：Overflow/Truncate， Overflow 表示直接溢出显示， Truncate 表示只保留设置高度以内的内容显示，具体显示内容还和文本在竖直方向上的对齐方式有关 |
## 脚本开发
<Playground href="/embed/ui-Text" />

5
docs/zh/animation/clip.mdx
View File

@@ -200,8 +200,6 @@ colorClip.addCurveBinding("/light", DirectLight, "color.r", colorCurve);
你同样可以为你的子实体 `/light` 添加 `AnimationCurve` ，就像上面的代码示例，同时 `addCurveBinding` 的第三个参数并不局限于组件的属性，它是一个能索引到值的路径。
<Playground href="/embed/animation-customAnimationClip" />
### 动画事件
你可以使用 [AnimationEvent](/apis/core/#AnimationEvent)  来为 AnimationClip 添加事件，动画事件将在指定时间调用你在同一实体上绑定组件的指定回调函数。
@@ -212,6 +210,3 @@ event.functionName = "test";
event.time = 0.5;
clip.addEvent(event);
```
<Playground href="/embed/animation-event" />

1
docs/zh/animation/layer.mdx
View File

@@ -60,4 +60,3 @@ additiveLayer.blendingMode = AnimatorLayerBlendingMode.Additive;
additiveLayer.blendingMode = AnimatorLayerBlendingMode.Override;
additiveLayer.weight = 0.5;
```
<Playground href="/embed/skeleton-animation-additive" />

4
docs/zh/assets/custom.mdx
View File

@@ -22,7 +22,3 @@ export class FBXLoader extends Loader<FBXResource> {
2. 重写 [load](/apis/core/#ResourceManager-load) 方法， `load`  方法会传入 `loadItem` 和 `resourceManager` ， `loadItem`  包含了加载的基信息， `resourceManager`  可以帮助加载其他引用资源。
3. 返回 [AssetPromise](/apis/core/#AssetPromise)  对象， `resolve`  解析后的资源结果，例如 FBX 返回特定的 `FBXResource` 。
4. 若报错则 `reject`  错误。
## 参考
<Playground href="/embed/obj-loader" />

15
docs/zh/assets/gc.mdx
View File

@@ -20,18 +20,3 @@ label: Resource
```typescript
engine.resourceManager.gc();
```
## 验证资产释放
如果您需要验证资产是否释放成功，可按照以下步骤，在空白页打开以下示例：
<Playground href="/embed/assets-gc" />
该示例在初始化时会通过创建 `Texture2D` 和 `Sprite` 渲染 2D 精灵，当点击右上角 GC 按钮后，`root` 节点被销毁，纹理和精灵资产的引用计数都被清空，此时这些资产会被真正销毁，分别在 `gc` 前后拍摄内存快照可以更直观地感受这个过程
1. gc 前： **开发者工具** -> **内存** -> **拍摄堆快照**
2. gc 后： **开发者工具** -> **内存** -> **拍摄堆快照** -> **比较** -> **选择 gc 前快照**
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*CtRmTqXDgt0AAAAAAAAAAAAADhuCAQ/original" alt="image-1" style={{zoom:"50%"}} />
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*E5PwQ7ocw2EAAAAAAAAAAAAADhuCAQ/original" alt="image-1" style={{zoom:"50%"}} />

4
docs/zh/core/scene.mdx
View File

@@ -92,10 +92,6 @@ engine.sceneManager.addScene(scene1);
engine.sceneManager.removeScene(scene2);
```
多场景渲染示例如下：
<Playground href="/embed/multi-scene" />
### 合并场景
可以使用 `engine.sceneManager.mergeScenes` 将 2 个场景进行合并为 1 个场景。

5
docs/zh/core/transform.mdx
View File

@@ -9,9 +9,10 @@ label: Core
`Transform` 是 `Entity` 自带的基础组件，开发者可以通过它管理 `Entity` 在**局部空间**与**世界空间**中的位置、旋转和缩放。
> 结合 Galacean 的 **[坐标系统](/docs/core/space)** 会有更深入地了解。
<Callout type="info">
结合 Galacean 的 **[坐标系统](/docs/core/space)** 会有更深入地了解。
</Callout>
<Playground href="/embed/transform-basic" />
## 编辑器使用

0
docs/zh/device/restore.md → docs/zh/device/restore.mdx
View File

7
docs/zh/graphics/2D/lottie.mdx
View File

@@ -75,8 +75,6 @@ await lottie.play();
编辑器提供了动画切片的功能，可以把设计师提供的整个片段切成多段，每个片段需要定义片段名、开始帧、结束帧三个字段。
<Playground href="/embed/lottie-clips" />
<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*skjbSZjSpYoAAAAAAAAAAAAADjCHAQ/original" />
该操作会在 Lottie 协议中添加 `lolitaAnimations` 字段实现动画的切片：
@@ -131,9 +129,6 @@ engine.resourceManager.load({
});
```
<Playground href="/embed/lottie" />
### 3D 变换
业务场景中经常会出现 3D 变换的需求，比如一些弹窗的入场动画。以旋转为例，由于传统的 lottie-web 方案只能沿着 **Z轴** 旋转（也就是说垂直于屏幕法线方向旋转），即使我们在 AE 中实现了沿着 **X轴** 或 **Y轴** 的旋转效果，使用 lottie-web 播放时也会被忽略。
@@ -142,8 +137,6 @@ engine.resourceManager.load({
得益于 Galacean Engine 2D/3D 引擎统一架构的优势，轻松地实现 3D 变换功能。
<Playground href="/embed/lottie-3d-rotation" />
### 版本依赖
| 引擎版本 | Lottie 版本 |
| :--- | :--- |

34
docs/zh/graphics/2D/spine/example.mdx
View File

@@ -31,38 +31,4 @@ Galacean 编辑器提供了一系列教学模板，帮助大家更快的上手 S
该模板展示了动态局部换肤的能力。我们能够基于一个额外上传的图集创建新的附件并进行替换。
<Image src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*m2GpT7eX_ZwAAAAAAAAAAAAADsp6AQ/original" alt="spine-dynamic-change" />
## 示例
**动画控制**
该示例展示了如何通过 setAnimation 与 addAnimation API 来编排 spine 动画队列：
<Playground href="/embed/spine-animation" />
**跟踪射击**
该示例展示了通过修改 IK 骨骼位置，来实现瞄准射击的效果：
<Playground href="/embed/spine-follow-shoot" />
**局部换肤**
该示例展示了修改插槽中的附件，实现局部换装的效果：
<Playground href="/embed/spine-change-attachment" />
**整体换肤**
该示例展示了通过 setSkin 方法，实现整体换肤的效果：
<Playground href="/embed/spine-full-skin-change" />
**皮肤混搭**
该示例展示了在运行时，通过组合新的皮肤，实现混搭的效果：
<Playground href="/embed/spine-mix-and-match" />
**物理**
该示例展示了 spine 4.2 版本，基于物理的动画效果：
<Playground href="/embed/spine-physics" />
下一章节：[版本与性能](/docs/graphics/2D/spine/other)

4
docs/zh/graphics/2D/spriteAtlas.mdx
View File

@@ -12,10 +12,6 @@ label: Graphics/2D
- 更少的显存（打包算法降低纹理尺寸）；
- 更少的请求次数（通过减少碎片文件来减少加载的请求次数）；
下图精灵图集例子里每帧只调用了一次绘制指令：
<Playground href="/embed/sprite-atlas" />
## 编辑器使用
### 创建精灵图集

2
docs/zh/graphics/2D/spriteMask.mdx
View File

@@ -8,8 +8,6 @@ label: Graphics/2D
精灵遮罩组件用于对 3D/2D 场景中的[精灵渲染器](/docs/graphics/2D/spriteRenderer/)和[文字渲染器](/docs/graphics/2D/text/)实现遮罩效果。
<Playground href="/embed/sprite-mask" />
通过 [SpriteMask](/apis/core/#SpriteMask) 提供的参数来控制和 [精灵](/docs/graphics/2D/sprite/) 发生作用。
| 参数 | 类型 | 说明 |

7
docs/zh/graphics/2D/spriteRenderer.mdx
View File

@@ -63,8 +63,6 @@ spriteRenderer.sprite = sprite;
设置 `SpriteRenderer` 的 `width` 与 `height` 可以明确指定精灵在三维空间中显示的尺寸，若没有设置，则会将 `Sprite` 的尺寸作为默认值。
<Playground href="/embed/sprite-size" />
### 设置颜色
可以通过设置 `color` 属性来调整颜色，从而实现一些淡入淡出的效果，如下：
@@ -77,14 +75,11 @@ spriteRenderer.sprite = sprite;
<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*sK6tTJELnP0AAAAAAAAAAAAADjCHAQ/original" alt="avatar" />
<Playground href="/embed/sprite-flip" />
### 绘制模式
精灵渲染器目前提供三种绘制模式，分别是普通绘制，九宫绘制与平铺绘制（默认为普通绘制），在不同的绘制模式下，修改绘制宽高可以直观地感受到各种模式之间的渲染差异，如下：
<Playground href="/embed/sprite-drawMode" />
### 遮罩
请参考[精灵遮罩](/docs/graphics/2D/spriteMask/)文档。
@@ -92,5 +87,3 @@ spriteRenderer.sprite = sprite;
## 自定义材质
请参考[自定义着色器](/docs/graphics/shader/custom/)文档。
<Playground href="/embed/sprite-material-blur" />

24
docs/zh/graphics/2D/text.mdx
View File

@@ -54,14 +54,6 @@ label: Graphics/2D
## 脚本使用
<Playground href="/embed/text-renderer" />
1、创建 [TextRenderer](/apis/core/#TextRenderer) 组件显示文本
2、通过 font 设置 [Font](/apis/core/#Font) 对象
3、通过 text 设置需要显示的文本
3、通过 fontSize 设置字体大小
4、通过 color 设置文本颜色
```typescript
import {
Camera,
@@ -74,15 +66,15 @@ import {
} from "@galacean/engine";
const textEntity = rootEntity.createChild("text");
// 给实体添加 TextRenderer 组件
// 1、创建 TextRenderer 组件显示文本
const textRenderer = textEntity.addComponent(TextRenderer);
// 通过 font 设置 Font 对象
// 2、通过 font 设置 Font 对象
textRenderer.font = Font.createFromOS(engine, "Arial");
// 通过 text 设置需要显示的文本
// 3、通过 text 设置需要显示的文本
textRenderer.text = "Galacean 会写字了！";
// 通过 fontSize 设置字体大小
// 4、通过 fontSize 设置字体大小
textRenderer.fontSize = 36;
// 通过 color 设置文本颜色
// 5、通过 color 设置文本颜色
textRenderer.color.set(1, 0, 0, 1);
```
@@ -158,10 +150,6 @@ textRenderer.fontStyle = FontStyle.Italic;
textRenderer.fontStyle = FontStyle.Bold | FontStyle.Italic;
```
### 多行文本
<Playground href="/embed/text-wrap-alignment" />
### 自定义字体
[Font](/apis/core/#Font) 是字体资源，用于表示文本使用的字体。
@@ -181,5 +169,3 @@ const font = await engine.resourceManager.load({
url: "https://lg-2fw0hhsc-1256786476.cos.ap-shanghai.myqcloud.com/Avelia.otf",
});
```
<Playground href="/embed/text-renderer-font" />

8
docs/zh/graphics/background/background.mdx
View File

@@ -11,11 +11,3 @@ label: Graphics/Background
- [纯色背景](/docs/graphics/background/solidColor/)
- [纹理背景](/docs/graphics/background/texture/)
- [天空背景](/docs/graphics/background/sky/)
开发者可依据自己的需求设置不同的背景：
<Playground href="/embed/background" />
在[天空盒](/docs/graphics/background/sky/)模式下，通过设置特定的网格和材质，可以实现各种定制背景，如`视频背景`：
<Playground href="/embed/video-background" />

6
docs/zh/graphics/camera/camera.md → docs/zh/graphics/camera/camera.mdx
View File

@@ -14,7 +14,7 @@ label: Graphics/Camera
透视投影符合我们的近大远小模型，可以看一下透视模型示意图：
<img src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*isMHSpe21ZMAAAAAAAAAAAAAARQnAQ" alt="image.png" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*isMHSpe21ZMAAAAAAAAAAAAAARQnAQ" alt="image.png" style={{zoom:"50%"}} />
如上图所示，近裁剪平面（[nearClipPlane](/apis/core/#Camera-nearClipPlane)），远裁剪平面（[farClipPlane](/apis/core/#Camera-farClipPlane)）和 视角（[fieldOfView](/apis/core/#Camera-fieldOfView)） 会形成一个视椎体 ([_View Frustum_](https://en.wikipedia.org/wiki/Viewing_frustum))。在视椎体内部的物体是会被投影到摄像机里的，也就是会渲染在画布上，而视椎体外的物体则会被裁剪。
@@ -22,7 +22,7 @@ label: Graphics/Camera
正交投影就是可视区近处和远处看到的物体是等大小的。由正交投影模型产生的可视区称为盒状可视区，盒状可视区模型如下：
<img src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*KEuGSqX-vXsAAAAAAAAAAAAAARQnAQ" alt="image.png" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*KEuGSqX-vXsAAAAAAAAAAAAAARQnAQ" alt="image.png" style={{zoom:"50%"}} />
如上图所示，有 top、bottom、left 和 right，Galacean 对正交属性做了一些简化，更符合开发者的使用习惯，只有 [orthographicSize](/apis/core/#Camera-orthographicSize)。下面是针对各项属性和 [orthographicSize](/apis/core/#Camera-orthographicSize) 的关系
@@ -40,8 +40,6 @@ label: Graphics/Camera
通过以下示例能直观感受到正交相机与透视相机渲染效果的差异，简而言之，当需要展示 2D 效果时，就选择正交相机，当需要展示 3D 效果时，就选择透视相机。
<playground src="ortho-switch.ts"></playground>
## 相机的朝向
Galacean 中的局部坐标与世界坐标遵循`右手坐标系`，因此相机的 `forward` 方向为 `-Z` 轴，相机取景的方向也是 `-Z` 方向。

16
docs/zh/graphics/camera/component.md → docs/zh/graphics/camera/component.mdx
View File

@@ -10,11 +10,11 @@ label: Graphics/Camera
首先需要将相机组件挂载到在场景中已激活的 [Entity](/docs/core/entity) 上，编辑器项目通常已经自带了相机组件，当然我们也可以自己手动添加。
<img src="https://gw.alipayobjects.com/zos/OasisHub/c6a1a344-630c-40c6-88ef-abb447cfd183/image-20231009114711623.png" alt="image-20231009114711623" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/c6a1a344-630c-40c6-88ef-abb447cfd183/image-20231009114711623.png" alt="image-20231009114711623" style={{zoom:"50%"}} />
添加完毕后，就可以在检查器里可以查看相机属性，并且左下角的相机预览可以方便地查看项目实际运行时的相机效果：
<img src="https://gw.alipayobjects.com/zos/OasisHub/d60e9f91-137e-4148-b85e-7458007333c3/image-20240718211520816.png" alt="image-20240718211520816" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/d60e9f91-137e-4148-b85e-7458007333c3/image-20240718211520816.png" alt="image-20240718211520816" style={{zoom:"50%"}} />
您也可以在脚本中通过如下代码为 [Entity](/docs/core/entity) 挂载相机组件：
@@ -29,7 +29,7 @@ const camera = entity.addComponent(Camera);
通过修改相机组件的属性可以定制渲染效果。下方是相机组件在 **[检查器面板](/docs/interface/inspector)** 暴露的属性设置。
<img src="https://gw.alipayobjects.com/zos/OasisHub/af60182b-a31a-4509-a0d4-3eb4cb737087/image-20240718211645854.png" alt="image-20240718211645854" style="zoom:50%;" />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/af60182b-a31a-4509-a0d4-3eb4cb737087/image-20240718211645854.png" alt="image-20240718211645854" style={{zoom:"50%"}} />
也可以通过脚本去获取相机组件并设置相应的属性。
@@ -90,20 +90,14 @@ camera.antiAliasing = AntiAliasing.FXAA;
相机组件可以通过设置 `cullingMask` 选择性地渲染场景内的渲染组件
<playground src="culling-mask.ts"></playground>
### 渲染目标
相机组件可以通过设置 `renderTarget` 将渲染结果渲染到不同的目标上。
<playground src="multi-camera.ts"></playground>
### 视锥剔除
`enableFrustumCulling` 属性默认是开启的，因为对于三维世界来说，“看不见的东西就不需要渲染”是个很自然的逻辑，属于最基本的性能优化。关闭视锥剔除意味着关闭此项优化。如果你想保留此项优化，而只想让某个节点始终渲染，可以把节点的渲染器的包围盒设置成无限大。
<playground src="renderer-cull.ts"></playground>
## 方法
相机组件提供各种方法（主要涉及`渲染`与`空间转换`）方便开发者实现期望的定制能力，在此之前，要先学会如何获取相机组件，在知道相机组件挂载在哪个节点的前提下，可直接通过 `getComponent` 或 `getComponentsIncludeChildren` 获取：
@@ -140,9 +134,7 @@ const cameras = scene._componentsManager._activeCameras;
### Shader 替换
借助 `setReplacementShader` 全局替换 Shader 的能力可以观测特定的渲染效果：
<playground src="shader-replacement.ts"></playground>
借助 `setReplacementShader` 全局替换 Shader 的能力可以观测特定的渲染效果。
### 空间转换

6
docs/zh/graphics/camera/control.md → docs/zh/graphics/camera/control.mdx
View File

@@ -16,8 +16,6 @@ label: Graphics/Camera
`OrbitControl`  用来模拟轨道交互，适用于围绕一个目标对象进行 360 度旋转交互，需要注意的是，**请务必在添加相机组件后再添加轨道控制器**。
<playground src="gltf-basic.ts"></playground>
| 属性 | 解释 |
| :---------------- | :--------------------------------------------------------------- |
| `target` | 观察的目标位置 |
@@ -42,8 +40,6 @@ label: Graphics/Camera
`FreeControl`  一般用于漫游控制，常见于游戏场景，需要注意的是，**请务必在添加相机组件后再添加自由控制器**。
<playground src="controls-free.ts"></playground>
| 属性 | 解释 |
| :-------------- | :---------------------------------------- |
| `floorMock` | 是否模拟地面，默认为 true |
@@ -55,8 +51,6 @@ label: Graphics/Camera
`OrthoControl`  一般用于控制 2D 场景中的缩放和位移：
<playground src="ortho-control.ts"></playground>
| 属性 | 解释 |
| :---------- | :------- |
| `zoomSpeed` | 缩放速度 |

Some files were not shown because too many files have changed in this diff Show More