diff --git a/docs/en/UI/overall.md b/docs/en/UI/overall.mdx
similarity index 100%
rename from docs/en/UI/overall.md
rename to docs/en/UI/overall.mdx
diff --git a/docs/en/UI/quickStart/button.md b/docs/en/UI/quickStart/button.mdx
similarity index 79%
rename from docs/en/UI/quickStart/button.md
rename to docs/en/UI/quickStart/button.mdx
index 20cb753101..25aaa2a6b7 100644
--- a/docs/en/UI/quickStart/button.md
+++ b/docs/en/UI/quickStart/button.mdx
@@ -13,7 +13,7 @@ label: UI
Add a `Button` node in the **[Hierarchy Panel](/docs/interface/hierarchy/)**.
-
+
> If the parent or ancestor node does not have a Canvas component, a root Canvas node will be automatically added.
@@ -21,7 +21,7 @@ Add a `Button` node in the **[Hierarchy Panel](/docs/interface/hierarchy/)**.
In the editor, you can easily set the button's transition effects for different states.
-
+
## Properties
@@ -41,4 +41,4 @@ In the editor, you can easily set the button's transition effects for different
## Script Development
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/en/UI/quickStart/canvas.md b/docs/en/UI/quickStart/canvas.mdx
similarity index 85%
rename from docs/en/UI/quickStart/canvas.md
rename to docs/en/UI/quickStart/canvas.mdx
index 7bb4b12c1b..f4490fc003 100644
--- a/docs/en/UI/quickStart/canvas.md
+++ b/docs/en/UI/quickStart/canvas.mdx
@@ -13,19 +13,19 @@ The root canvas is the foundation of the UI, but not all `UICanvas` nodes are ro
Add a Canvas node in the **[Hierarchy Panel](/docs/interface/hierarchy/)**.
-
+
### Set Properties
Select the node that has the `Canvas` component and you can set its properties in the **[Inspector Panel](/docs/interface/inspector)**.
-
+
### Root Canvas
If the parent or ancestor node of the newly added canvas node already contains an active `UICanvas` component, this canvas will not have rendering or interaction functionality.
-
+
## Properties
diff --git a/docs/en/UI/quickStart/event.md b/docs/en/UI/quickStart/event.mdx
similarity index 96%
rename from docs/en/UI/quickStart/event.md
rename to docs/en/UI/quickStart/event.mdx
index 0d6db41457..ad15ad431e 100644
--- a/docs/en/UI/quickStart/event.md
+++ b/docs/en/UI/quickStart/event.mdx
@@ -37,4 +37,4 @@ stateDiagram
## Script Development
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/en/UI/quickStart/group.md b/docs/en/UI/quickStart/group.mdx
similarity index 82%
rename from docs/en/UI/quickStart/group.md
rename to docs/en/UI/quickStart/group.mdx
index 8ec0cae9b5..88b9b399c2 100644
--- a/docs/en/UI/quickStart/group.md
+++ b/docs/en/UI/quickStart/group.mdx
@@ -11,7 +11,7 @@ The `UIGroup` component allows you to inherit or ignore properties such as **opa
Select the node, then in the **[Inspector Panel](/docs/interface/inspector)**, click **Add Component** and choose **UIGroup**. You can control the opacity of multiple UI elements by modifying the settings.
-
+
## Properties
@@ -25,4 +25,4 @@ Select the node, then in the **[Inspector Panel](/docs/interface/inspector)**, c
## Script Development
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/en/UI/quickStart/image.md b/docs/en/UI/quickStart/image.mdx
similarity index 80%
rename from docs/en/UI/quickStart/image.md
rename to docs/en/UI/quickStart/image.mdx
index f4851aed68..d50c736771 100644
--- a/docs/en/UI/quickStart/image.md
+++ b/docs/en/UI/quickStart/image.mdx
@@ -13,7 +13,7 @@ The `Image` component is used to display images within a `UICanvas`.
Add an `Image` node in the **[Hierarchy Panel](/docs/interface/hierarchy/)**.
-
+
> If the parent or ancestor node does not have a Canvas component, a root canvas node will be automatically added.
@@ -21,13 +21,13 @@ Add an `Image` node in the **[Hierarchy Panel](/docs/interface/hierarchy/)**.
The content displayed by the `Image` depends on the selected [Sprite asset](). Select the node with the `Image` component, and in the **[Inspector Panel](/docs/interface/inspector)**, choose the corresponding sprite asset in the Sprite property to change the displayed content.
-
+
### Modify Draw Mode
The `Image` component currently provides three draw modes: Normal, Nine-Patch, and Tiled (the default is Normal). You can visually feel the rendering differences between modes by modifying the width and height in each mode.
-
+
### Adjust Size
@@ -45,4 +45,4 @@ For adjusting the size of UI elements, refer to [Quickly Adjust UI Element Size]
## Script Development
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/en/UI/quickStart/order.md b/docs/en/UI/quickStart/order.mdx
similarity index 100%
rename from docs/en/UI/quickStart/order.md
rename to docs/en/UI/quickStart/order.mdx
diff --git a/docs/en/UI/quickStart/text.md b/docs/en/UI/quickStart/text.mdx
similarity index 84%
rename from docs/en/UI/quickStart/text.md
rename to docs/en/UI/quickStart/text.mdx
index 8a30a56a37..4ebb6ce4b6 100644
--- a/docs/en/UI/quickStart/text.md
+++ b/docs/en/UI/quickStart/text.mdx
@@ -13,7 +13,7 @@ The `Text` component is used to display text within a `UICanvas`.
Add a `Text` node in the **[Hierarchy Panel](/docs/interface/hierarchy/)**.
-
+
> If the parent or ancestor node does not have a Canvas component, a root canvas node will be automatically added.
@@ -21,19 +21,19 @@ Add a `Text` node in the **[Hierarchy Panel](/docs/interface/hierarchy/)**.
Select the node with the `Text` component, and in the **[Inspector Panel](/docs/interface/inspector)**, modify the `text` property to change the content of the `Text` element.
-
+
### Set Font
Select the node with the `Text` component, and in the **[Inspector Panel](/docs/interface/inspector)**, modify the `font` property to change the font type of the `Text` element.
-
+
### Modify Font Size
The `Text` component can modify the rendering size by adjusting the `FontSize`.
-
+
> Changing the `size` in `UITransform` will not affect the rendering size of `Text`.
@@ -57,4 +57,4 @@ The `Text` component can modify the rendering size by adjusting the `FontSize`.
## Script Development
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/en/UI/quickStart/transform.md b/docs/en/UI/quickStart/transform.mdx
similarity index 92%
rename from docs/en/UI/quickStart/transform.md
rename to docs/en/UI/quickStart/transform.mdx
index 95c05f739c..3451905fa9 100644
--- a/docs/en/UI/quickStart/transform.md
+++ b/docs/en/UI/quickStart/transform.mdx
@@ -11,7 +11,7 @@ The `UITransform` component is specifically designed to represent the size and p
When a node with a UI component is added, the `UITransform` component will automatically be added (replacing the previous [Transform](/apis/core/#Transform) component). In the editor, you can select the node and use the `RectTool` (shortcut key `T`) to quickly adjust properties, or you can set precise properties in the **[Inspector Panel](/docs/interface/inspector)**.
-
+
> When the main canvas's render mode is `Screen`, the editor will prohibit modifications to its `transform` to avoid screen adaptation issues. Therefore, in scripts, **developers should avoid modifying the `transform` properties of the main canvas in screen space.**
diff --git a/docs/en/UI/system.md b/docs/en/UI/system.mdx
similarity index 100%
rename from docs/en/UI/system.md
rename to docs/en/UI/system.mdx
diff --git a/docs/en/animation/animator.mdx b/docs/en/animation/animator.mdx
index ca1675e1e2..f916d1a682 100644
--- a/docs/en/animation/animator.mdx
+++ b/docs/en/animation/animator.mdx
@@ -26,16 +26,16 @@ The Animation Control Component ([Animator](/apis/core/#Animator)) of the model
If the model contains animations, a read-only [Animation Controller](/en/docs/animation/animatorController/) will be automatically bound for you.
-
+
If there is no Animation Control Component ([Animator](/apis/core/#Animator)), you can create one as shown below
-
+
2. Create an [Animation Controller](/en/docs/animation/animatorController/) asset and bind it to the model
-
-
+
+
3. After editing the Animation Controller ([see details](/en/docs/animation/animatorController/)), you can play the animations according to the logic of the [Animation Controller](/en/docs/animation/animatorController/)
diff --git a/docs/en/animation/animatorController.mdx b/docs/en/animation/animatorController.mdx
index f51c8db8c8..535c3c7a86 100644
--- a/docs/en/animation/animatorController.mdx
+++ b/docs/en/animation/animatorController.mdx
@@ -13,20 +13,20 @@ Through the Animation Controller editor, users can organize the playback logic o
1. Prepare the Animation Clips ([Create Animation Clips](/en/docs/animation/clip)).
-
+
2. To organize the playback of these Animation Clips, we need to create an Animation Controller ([AnimatorController](/apis/core/#AnimatorController)) asset.
-
+
3. The newly created Animation Controller has no data. We need to edit it, double-click the asset, and add an Animation State ([AnimatorState](/apis/core/#AnimatorState)) to it.
-
+
4. Click AnimatorState to bind an [Animation Clip](/en/docs/animation/clip) ([AnimationClip](/apis/core/#AnimationClip)) to it.
-
+
5. Bind the Animation Controller ([AnimatorController](/apis/core/#AnimatorController)) asset to the [Animation Control Component](/en/docs/animation/animator).
-
+
6. At this point, you can play the `Idle` animation in the exported project through `animator.play("New State")`.
diff --git a/docs/en/animation/clip-for-artist.md b/docs/en/animation/clip-for-artist.mdx
similarity index 50%
rename from docs/en/animation/clip-for-artist.md
rename to docs/en/animation/clip-for-artist.mdx
index 28e7851aa2..9dbc93ee39 100644
--- a/docs/en/animation/clip-for-artist.md
+++ b/docs/en/animation/clip-for-artist.mdx
@@ -15,37 +15,37 @@ Blender's animation editing interface is very user-friendly, clearly visualizing
1. Open Blender, import a model format supported by Blender, and then switch to the **Animation Editing** window:
-
+
2. Using the "New Animation Clip" button shown above, you can quickly copy the current animation clip and then perform unique operations. If the button is not displayed, make sure the "**Action Editor**" is open:
-
+
For example, a new animation clip named **animation_copy** is created, and only the last 5 frames of the animation are retained:
-
+
-
+
-
+
The exported clip timeline must be consistent, which can be configured in two places: the bottom right corner or the output properties:
-
+
-
+
3. Since the timeline must be consistent, you need to move the animation clips just sliced to the starting frame by dragging them:
-
+
-
+
4. At this point, the animation slices are ready. Export them as glTF or FBX and integrate them into the Galacean engine:
-
+
-
+
Unity can also export animation slices, but it is less efficient.
@@ -59,44 +59,44 @@ Plugin: [AntG-Unity-Plugin.unitypackage.zip](https://www.yuque.com/attachments/y
3. Double-click the plugin and **Import** the default selected options:
-
+
If the installation is successful, you will see an **AntG** option in the menu bar:
-
+
4. Drag the FBX file that needs slicing into the asset panel:
-
+
5. Click on the asset to bring up the animation debugging preview box. Add animation slices and adjust the timeline **start** and **end** for each slice as needed. If the animation preview appears abnormal, ensure that the **Resample Curves** option, which is enabled by default, is unchecked. After slicing is complete, remember to click the **Apply** button in the lower right corner to confirm.
-
+
-
+
6. At this point, the animation slice resource has been created. Next, we will introduce how to export it. First, drag the resource into the node tree:
-
+
7. Then add the **Animator** Component to the node:
-
+
8. You can see that the Animator component needs to be bound to an Animator Controller resource, so we need to create a new Animator Controller resource in the resource bar:
-
+
9. Double-click the controller resource and drag our previously created animation slice into it:
-
+
10. The Animator Controller resource is now complete and can be bound to the Component we just created:
-
+
11. Right-click the node and select Export AntG:
-
+
12. At this point, the created animation slice glTF file has been exported. You can visit Galacean's [glTF Viewer](https://galacean.antgroup.com/engine/gltf-viewer) for functionality verification.
diff --git a/docs/en/animation/clip.mdx b/docs/en/animation/clip.mdx
index 025a459d6c..d348d7c510 100644
--- a/docs/en/animation/clip.mdx
+++ b/docs/en/animation/clip.mdx
@@ -11,7 +11,7 @@ There are two common ways to obtain animation clips:
1. Import models with animations created using third-party tools (such as Autodesk® 3ds Max®, Autodesk® Maya®, Blender). See [Creating Animation Clips for Artists](/en/docs/animation/clip-for-artist)
-
+
2. Create animation clips in Galacean (the editor and script creation methods will be introduced below).
@@ -19,7 +19,7 @@ There are two common ways to obtain animation clips:
The animation clip editor currently supports editing all interpolable properties except for physics-related components. If you need to edit other properties, you need to add the corresponding components to the entity.
-
+
> Note: The Galacean animation editor defaults to 60FPS. The time `0:30` shown in the figure above is at the 30th frame. If the timeline scale is `1:30`, it is at the 90th frame.
@@ -29,49 +29,49 @@ The animation clip editor currently supports editing all interpolable properties
1. In the **[Assets Panel](/en/docs/assets/interface)**, right-click/click + to create an `Animation Clip` asset.
-
+
2. Double-click the `Animation Clip` asset and select an entity as the editing object for the `Animation Clip`.
-
+
Clicking the `Create` button will automatically add the [Animation Control Component](/en/docs/animation/animator) to your entity and add the animation clip to the [Animation Controller](/en/docs/animation/animatorController/).
-
-
+
+
3. Add the properties to animate (here I added two).
-
-
+
+
4. Add keyframes to the properties.
-
+
When we click the add keyframe button, the keyframe will store the current value of the specified property. So when we haven't changed anything, the keyframe stores the `position` value of the entity at that moment. We want it to move to the position (3, 0, 0) after 60 frames, so first modify the cube to (3, 0, 0) through the property panel and then add a keyframe.
-
+
Similarly, we also add keyframes for the `rotation` property.
-
+
##### Recording Mode
We provide a recording mode to facilitate developers in quickly adding keyframes. When recording mode is enabled, keyframes are automatically added when the corresponding properties are modified.
-
+
### Text Animation Example
First, you need an entity with a TextRender component.
-
+
When we add properties at this point, we can see that the properties that can add keyframes have increased with the interpolable properties related to the `TextRenderer` component.
-
+
We add keyframes using recording mode as described above.
-
+
### Frame Animation Example
@@ -81,16 +81,16 @@ In addition to numerical types, Galacean also supports animation curves of refer
Galacean also supports animation editing of asset properties within components. If there are material assets in the component, there will be additional asset property editing in the `Inspector`.
-
+
It should be noted that the default [material](/en/docs/graphics/material/material/) in the editor is not editable.
-
+
So, if we want to animate the material of this cube, we need to create a new material and replace it. Then, just like above, enable recording mode and directly modify the properties.
-
-
+
+
## More Operations
@@ -100,23 +100,23 @@ So, if we want to animate the material of this cube, we need to create a new mat
Select the keyframe and drag it.
-
+
You can zoom the timeline by scrolling the `mouse wheel`.
-
+
#### Modify Keyframe Value
Enable recording mode, move the timeline to the specified keyframe, and then re-enter the value. If recording mode is not enabled, you need to click the add keyframe button again.
-
+
#### Delete Keyframe
Select the keyframe, right-click and choose delete, or press the delete/backspace key on the keyboard.
-
+
### Editing Child Entities
@@ -124,43 +124,43 @@ Select the keyframe, right-click and choose delete, or press the delete/backspac
1. We add a child entity to the cube we just created.
-
+
2. We can see that the properties of the child entity can be added by clicking "Add Property" again.
-
+
3. Enable recording mode, edit the child entity and add keyframes.
-
+
### Edit Animation Curves
The `Animation Clip Editor` supports animation curve editing. Click the curve icon in the upper right corner to switch.
-
+
The vertical axis in curve mode represents the value of the property.
-
+
You can adjust the vertical axis scale by pressing `shift + mouse wheel`.
-
+
The color of the curve corresponding to the property is the same as the color of the button.
-
+
Selecting a keyframe will show two control points. Adjusting the control points will adjust the curve.
-
+
You can also set built-in preset values directly by right-clicking the keyframe.
-
+
Selecting a property in the property panel allows you to edit the curve of the specified property only.
diff --git a/docs/en/animation/layer.mdx b/docs/en/animation/layer.mdx
index 3ea945e452..5f6d4225d7 100644
--- a/docs/en/animation/layer.mdx
+++ b/docs/en/animation/layer.mdx
@@ -35,16 +35,16 @@ The weight of the first layer is always 1.0.
## Editor Usage
### Additive Mode
We add an animation layer in the editor and set `Blending` to `Additive`.
-
+
You can see that this character has added a `head shaking` animation on top of the original animation.
### Override Mode
Set `Blending` to `Override`.
-
+
You can see that the character's animation completely replaces the animation of the first layer.
### Blending Weight
-
+
You can see that the higher the weight of the animation layer, the greater the impact on the animation effect.
diff --git a/docs/en/animation/overview.md b/docs/en/animation/overview.mdx
similarity index 100%
rename from docs/en/animation/overview.md
rename to docs/en/animation/overview.mdx
diff --git a/docs/en/animation/sprite-sheet.md b/docs/en/animation/sprite-sheet.md
deleted file mode 100644
index d9aaba7e2b..0000000000
--- a/docs/en/animation/sprite-sheet.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-order: 7
-title: Frame Animation
-type: Animation
-label: Animation
----
-
-Galacean supports reference-type animation curves. You can add keyframes of asset types such as (sprites). The following image shows the process of creating sprite animations:
-
-1. Add the `SpriteRenderer` component to the node
-
-
-
-2. Add `Sprite`, you can refer to [Sprite](/en/docs/graphics/2D/sprite)
-
-
-
-3. Create [Animation Clip](/en/docs/animation/clip) in the **[Assets Panel](/en/docs/assets/interface)**
-
-
-
-
-4. Enable recording mode, click on the corresponding frame number in the editor, and add `Sprite` in `SpriteRenderer` to automatically add keyframes
-
-
-
-
-### Script Implementation
-
-The engine supports reference-type animation curves ([AnimationRefCurve](/apis/core/#AnimationRefCurve)) in version 1.1. The value of the keyframe can be assets such as (sprites, materials). You can create reference-type animation curves to achieve capabilities such as frame animation:
-
-
diff --git a/docs/en/animation/state-machine.mdx b/docs/en/animation/state-machine.mdx
index d44a0d433b..71db538c2f 100644
--- a/docs/en/animation/state-machine.mdx
+++ b/docs/en/animation/state-machine.mdx
@@ -51,7 +51,7 @@ Solo and Mute are usually used for debugging, helping developers test and debug
#### Editor Usage
Connect the animation state ([AnimatorState](/apis/core/#AnimatorState)) to `entry`, and the animation on it will automatically play when you run the exported project, without needing to call `animator.play`. Click on the entity bound to the animation control component ([Animator](/en/docs/animation/animator)) to preview the animation.
-
+
#### Script Usage
@@ -67,11 +67,11 @@ animatorStateMachine.addEntryStateTransition('Idle');
#### Editor Usage
Connect the two `AnimatorState` you want to transition between to achieve the animation transition effect. Click on the line between the two animations to modify the animation transition parameters and adjust the effect.
-
+
Click on the line to set the parameters of the animation transition ([AnimatorStateTransition](/apis/core/#AnimatorStateTransition)), such as adding conditions:
-
+
If multiple conditions are added, the transition will only start when all conditions are met.
@@ -184,7 +184,7 @@ class AnimationScriptExample extends Script {
### Animation State Machine Animation Loop
Connect the animation state to the `exit` state, and the state machine will exit and re-enter `entry`, making the overall process loop.
-
+
#### Script Usage
@@ -202,9 +202,9 @@ In this way, every time you play the `Run` animation on the layer where the anim
### State Machine Script
You can add state machine scripts to each animation state, which allows you to receive callbacks in different events of the animation state machine (such as state entry, exit, update, etc.) [see details](/apis/core/#StateMachineScript).
-
+
-
+
#### Script Usage
The state machine script provides three animation state cycles:
diff --git a/docs/en/animation/system.md b/docs/en/animation/system.mdx
similarity index 100%
rename from docs/en/animation/system.md
rename to docs/en/animation/system.mdx
diff --git a/docs/en/art/bake-blender.md b/docs/en/art/bake-blender.md
deleted file mode 100644
index 3b07dbdd29..0000000000
--- a/docs/en/art/bake-blender.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-order: 0
-title: Blender Baking
-type: Art
-label: Art
----
-
-> **_Special thanks to Monk and UU Efficiency Team for providing this tutorial._**
-
-In the process of actual model production, artists may use a lot of materials and textures to achieve better visual effects. However, there may be significant rendering discrepancies when exporting, and sometimes some effects may be lost.
-
-We have optimized the process of maximizing the restoration of 3D model rendering as much as possible, hoping to help everyone.
-
-### Blender Baking
-
-1. Select the model. Currently, this building is composed of many different models, and we need to merge them into one model.
-
-
-
-2. The shortcut to merge 2 models is **Ctrl+J**. If there are any models with modifiers, you need to apply the modifiers before merging; otherwise, the effects of the modifiers will be lost.
-
-
-
-
-
-3. Start baking. Select the Shader Editor view, choose the material properties, and in the Node Editor (**Shift+A**) create: Texture -> Image Texture.
-
-
-
-4. Click on **New** and give it a suitable name. You can see the image texture you just created on the left side when expanded.
-
-
-
-
-
-5. Copy this image texture you created to all material nodes under the building and make sure they are selected.
-
-
-
-6. Configure the baking parameters, but do not click on bake yet; we need the next step, UV.
-
-
-
-### Unwrapping UV
-
-1. Enter UV Editing view, select the building model, press **Tab** to enter edit mode, and you will see that the UV is currently messy.
-
-
-
-2. Select the intelligent UV projection by pressing **U**, click OK, and you will get a decent UV unwrap. Of course, if the artist has time, they can also do it manually.
-
-
-
-
-
-
-
-3. Return to the shader view, select the model layer and all materials under the layer, leave the baking parameters unchanged, and click Bake. There is a progress bar below, just wait patiently.
-
-
-
-4. After baking is complete, the image texture we created on the left has been baked. Press **alt+s** to quickly save this baked texture.
-
-
-
-### Exporting glTF File
-
-1. Delete all materials of the above model, create a background material, and assign it.
-
-
-
-
-
-2. Drag the house's baked image into the node view, and connect the color.
-
-
-
-3. Export in glTF format, make sure both layers' eyes and camera are enabled.
-
-
-
-4. Preview the effect in the [glTF Viewer](https://galacean.antgroup.com/#/gltf-viewer).
-
-
-
-Hope this helps everyone~
diff --git a/docs/en/art/bake-blender.mdx b/docs/en/art/bake-blender.mdx
new file mode 100644
index 0000000000..1d3e3b60eb
--- /dev/null
+++ b/docs/en/art/bake-blender.mdx
@@ -0,0 +1,86 @@
+---
+order: 0
+title: Blender Baking
+type: Art
+label: Art
+---
+
+> **_Special thanks to Monk and UU Efficiency Team for providing this tutorial._**
+
+In the process of actual model production, artists may use a lot of materials and textures to achieve better visual effects. However, there may be significant rendering discrepancies when exporting, and sometimes some effects may be lost.
+
+We have optimized the process of maximizing the restoration of 3D model rendering as much as possible, hoping to help everyone.
+
+### Blender Baking
+
+1. Select the model. Currently, this building is composed of many different models, and we need to merge them into one model.
+
+
+
+2. The shortcut to merge 2 models is **Ctrl+J**. If there are any models with modifiers, you need to apply the modifiers before merging; otherwise, the effects of the modifiers will be lost.
+
+
+
+
+
+3. Start baking. Select the Shader Editor view, choose the material properties, and in the Node Editor (**Shift+A**) create: Texture -> Image Texture.
+
+
+
+4. Click on **New** and give it a suitable name. You can see the image texture you just created on the left side when expanded.
+
+
+
+
+
+5. Copy this image texture you created to all material nodes under the building and make sure they are selected.
+
+
+
+6. Configure the baking parameters, but do not click on bake yet; we need the next step, UV.
+
+
+
+### Unwrapping UV
+
+1. Enter UV Editing view, select the building model, press **Tab** to enter edit mode, and you will see that the UV is currently messy.
+
+
+
+2. Select the intelligent UV projection by pressing **U**, click OK, and you will get a decent UV unwrap. Of course, if the artist has time, they can also do it manually.
+
+
+
+
+
+
+
+3. Return to the shader view, select the model layer and all materials under the layer, leave the baking parameters unchanged, and click Bake. There is a progress bar below, just wait patiently.
+
+
+
+4. After baking is complete, the image texture we created on the left has been baked. Press **alt+s** to quickly save this baked texture.
+
+
+
+### Exporting glTF File
+
+1. Delete all materials of the above model, create a background material, and assign it.
+
+
+
+
+
+2. Drag the house's baked image into the node view, and connect the color.
+
+
+
+3. Export in glTF format, make sure both layers' eyes and camera are enabled.
+
+
+
+4. Preview the effect in the [glTF Viewer](https://galacean.antgroup.com/#/gltf-viewer).
+
+
+
+Hope this helps everyone~
diff --git a/docs/en/art/bake-c4d.md b/docs/en/art/bake-c4d.mdx
similarity index 62%
rename from docs/en/art/bake-c4d.md
rename to docs/en/art/bake-c4d.mdx
index f1ee105a50..904e480f9b 100644
--- a/docs/en/art/bake-c4d.md
+++ b/docs/en/art/bake-c4d.mdx
@@ -13,11 +13,11 @@ Baking is the process of expressing all the rendered material color information
Baking requires two sets of models: a high-poly model and a low-poly model. The high-poly model is used to bake more detailed textures, while the low-poly model is used in the engine with the textures. Both models must have consistent UVs, so the low-poly model is created first with UVs laid out, then detailed to create the high-poly model. The high-poly model can have more details to bake richer textures.
-
+
The left is the low-poly model, and the right is the high-poly model. The wiring information shows that the high-poly model has more details.
-
+
Although the wiring details differ, the visible parts of both models must be consistent. The covered parts are not considered, so the high-poly model must be derived from the low-poly model to ensure UV consistency.
@@ -25,34 +25,34 @@ Although the wiring details differ, the visible parts of both models must be con
1. Adjust the high-poly model in C4D to render the desired effect. Textures used on the face should also be drawn according to the overall UV layout. Once the materials are adjusted, you can prepare for baking.
-
+
2. An important point in baking is to select the camera mode. Specify the tag for the camera to be output, and add the unique camera tag of the OC renderer.
-
+
3. Click the added camera tag to enter the tag properties. There are many options for the camera type, one of which is baking. Select baking.
-
+
4. In the baking menu, set the baking group ID to a number other than 1, here it is set to 2.
-
+
5. Then group the models to be baked. As shown below, group all the required models and add the OC object tag.
-
+
6. Click the tag to display the tag properties, select the object layer, and set the baking ID inside to the same value as the baking group ID, which is 2 here. Then click render to bake the required image.
-
+
-
+
If you are not very satisfied with the baking results, both C4D and Substance Painter can be used to paint and modify the textures. Realistic rendering is not the only option; painting textures can also be used to restore some special styles.
-
+
```markdown
-
+
```
diff --git a/docs/en/art/lottie.md b/docs/en/art/lottie.mdx
similarity index 56%
rename from docs/en/art/lottie.md
rename to docs/en/art/lottie.mdx
index ddd13a6770..9812fcabcc 100644
--- a/docs/en/art/lottie.md
+++ b/docs/en/art/lottie.mdx
@@ -14,25 +14,25 @@ label: Art
## How to use Bodymovin
- Clone the project to your local machine from the Bodymovin GitHub homepage (link: airbnb/lottie-web), or download the .zip package.
- 
+
- Find the "bodymovin.zxp" file in the "/build/extension" directory of the project directory, which is the plugin package.
- Download and install ZXP Installer.
ZXP Installer address: [https://aescripts.com/learn/zxp-installer](https://aescripts.com/learn/zxp-installer)
-
+
- Open AE, click "Edit" > "Preferences" > "General" menu item, check "Allow Scripts to Write Files and Access Network", and click OK.
-
+
- Click "Window" > "Extensions" > "Bodymovin" menu item to open the Bodymovin interface and use the plugin.
-
+
- Open the Bodymovin plugin window, and you will find the name of the project appearing in the list below. Select the name, set the JSON file output location, and click "Render".
-
+
- Click Settings in the image above to configure the exported JSON:
-
+
diff --git a/docs/en/assets/custom.md b/docs/en/assets/custom.mdx
similarity index 96%
rename from docs/en/assets/custom.md
rename to docs/en/assets/custom.mdx
index c8371064cb..4f914cfbeb 100644
--- a/docs/en/assets/custom.md
+++ b/docs/en/assets/custom.mdx
@@ -25,4 +25,4 @@ export class FBXLoader extends Loader {
## Reference
-
+
diff --git a/docs/en/assets/gc.md b/docs/en/assets/gc.mdx
similarity index 83%
rename from docs/en/assets/gc.md
rename to docs/en/assets/gc.mdx
index 7c01677c4b..09941909ac 100644
--- a/docs/en/assets/gc.md
+++ b/docs/en/assets/gc.mdx
@@ -11,7 +11,7 @@ To avoid loading resources repeatedly, once a resource is loaded, it is cached i
For example, the entity shown in the figure below contains a [MeshRenderer](/apis/core/#MeshRenderer) component, which depends on [Material](/apis/core/#Material). _Material_ may be referenced by multiple _MeshRenderers_. If _Material_ is released, other _MeshRenderers_ that reference it will not be able to find the _Material_ and will report an error.
-
+
> Note: JavaScript cannot track object references. Generally, in weakly typed languages like JavaScript, memory management functions are not provided to developers. All object memory is managed through garbage collection mechanisms, and you cannot determine when an object will be released, so there is no [destructor](https://zh.wikipedia.org/wiki/%E8%A7%A3%E6%A7%8B%E5%AD%90) to call for releasing referenced resources.
@@ -25,13 +25,13 @@ engine.resourceManager.gc();
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:
-
+
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**
-
+
-
+
diff --git a/docs/en/assets/interface.md b/docs/en/assets/interface.mdx
similarity index 85%
rename from docs/en/assets/interface.md
rename to docs/en/assets/interface.mdx
index 556bb668b3..b031615361 100644
--- a/docs/en/assets/interface.md
+++ b/docs/en/assets/interface.mdx
@@ -5,7 +5,7 @@ type: Asset Workflow
label: Resource
---
-
+
The asset panel is an important panel in the editor that helps you manage all the assets used in the scene. In the asset panel, you can view and manage all the assets used in the scene, such as materials, textures, models, etc. Through the asset panel, you can add or delete assets, as well as categorize them for better organization.
@@ -34,25 +34,25 @@ Currently, the editor supports the following uploaded or created assets (**+** i
To add assets to the scene, you can click the add button on the asset panel or use the add option in the right-click menu of the asset panel to add new assets. After adding assets, you can edit the properties of the assets in the **[Inspector Panel](/en/docs/interface/inspector)**. The asset types in the asset panel are very rich, such as materials, textures, models, fonts, etc. Refer to the table above for details.
-
+
You can also drag files into the asset panel to add assets. For multiple files, you can select and drag them into the asset panel together.
-
+
### Organizing Assets
Assets in the asset panel can be managed by categorization for better organization. You can create folders in the asset panel and move assets into the corresponding folders (you can also move them into folders in the left directory) to achieve categorized management. Folders in the asset panel can be nested, allowing you to create multi-level folders for better organization of assets.
-
+
The asset panel provides a user-friendly toolbar for browsing assets, helping you quickly find a specific asset or type of asset. You can also modify the browsing mode, sorting method, and thumbnail size of assets according to your usage habits.
-
+
After organizing the assets, each asset has a **relative path**. You can right-click an asset to copy its path.
-
+
This is important for project development because projects often need to load assets asynchronously, meaning that certain assets (or even scenes) do not need to be loaded during initialization. You can control the loading of an asset through scripts. For specific syntax, refer to the usage of [Assets](/en/docs/assets/load) and [Scenes](/en/docs/core/scene). For example, to load a scene:
@@ -76,13 +76,13 @@ You can also use `⌘`+ `C` and `⌘`+ `V` operations.
After selecting an asset, the **[Inspector Panel](/en/docs/interface/inspector)** on the right will display the configurable properties of the asset. The configurable items corresponding to different assets are different. For example, glTF assets will display a model preview window, and material assets will display detailed material configuration options.
-
+
### Using Assets
部分资产（如 glTF 资产）支持拖拽到场景中或节点树中。
-
+
### Shortcuts
diff --git a/docs/en/assets/load.md b/docs/en/assets/load.mdx
similarity index 97%
rename from docs/en/assets/load.md
rename to docs/en/assets/load.mdx
index 810ab48dcc..b620f2f458 100644
--- a/docs/en/assets/load.md
+++ b/docs/en/assets/load.mdx
@@ -86,7 +86,7 @@ this.engine.resourceManager.load("Assets/texture.png");
> In the editor, you can quickly copy the relative path of the asset through **[Asset Panel](/en/docs/assets/interface)** -> **Right-click asset** -> **Copy relative path**.
-
+
### baseUrl
diff --git a/docs/en/assets/overall.md b/docs/en/assets/overall.mdx
similarity index 100%
rename from docs/en/assets/overall.md
rename to docs/en/assets/overall.mdx
diff --git a/docs/en/assets/type.md b/docs/en/assets/type.md
deleted file mode 100644
index 7ec0b87706..0000000000
--- a/docs/en/assets/type.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-order: 1
-title: Types of Assets
-type: Asset Workflow
-label: Resource
----
-
-Galacean defines a series of out-of-the-box built-in assets and also provides flexible custom loading capabilities.
-
-## Built-in Resource Types
-
-| Resource | Loading Type | Reference |
-| ------------ | ----------------------- | -------------------------------------------------------------------------- |
-| Texture2D | AssetType.Texture2D | [Example](https://galacean.antgroup.com/#/examples/latest/wrap-mode) |
-| TextureCube | AssetType.HDR | [Example](https://galacean.antgroup.com/#/examples/latest/hdr-loader) |
-| glTF | AssetType.GLTF | [Example](https://galacean.antgroup.com/#/examples/latest/gltf-basic) |
-| Compressed Texture | AssetType.KTX2 | [Example](https://galacean.antgroup.com/#/examples/latest/compressed-texture) |
-| Ambient Light | AssetType.Env | [Example](https://galacean.antgroup.com/#/examples/latest/ambient-light) |
-| Sprite Atlas | AssetType.SpriteAtlas | [Example](https://galacean.antgroup.com/#/examples/latest/sprite-atlas) |
-| Font | AssetType.Font | [Example](https://galacean.antgroup.com/#/examples/latest/text-renderer-font) |
-
-> Note: The ambient light baking product comes from the editor or using glTF Viewer, see the image below:
-
-
-
-## Custom Asset Loaders
-
-Users can also create custom loaders to load custom resources:
-
-```typescript
-@resourceLoader(FBX, ["fbx"])
-export class FBXLoader extends Loader {
- load(item: LoadItem, resourceManager: ResourceManager): AssetPromise {
- return new AssetPromise((resolve, reject)=> {
- ...
- })
- }
-}
-```
-
-1. Mark it as a _ResourceLoader_ using the [@resourceLoader](/apis/core/#resourceLoader) decorator, passing in the type enum and the parsed resource extension. In the example above, `FBX` is the type enum, and `["fbx"]` is the parsed resource extension.
-2. Override the [load](/apis/core/#ResourceManager-load) method. The `load` method will receive `loadItem` and `resourceManager`, where `loadItem` contains the basic loading information, and `resourceManager` can help load other referenced resources.
-3. Return an [AssetPromise](/apis/core/#AssetPromise) object. `resolve` the resolved resource result, for example, FBX returns a specific `FBXResource`.
-4. If there is an error, `reject` it.
diff --git a/docs/en/basics/overview.md b/docs/en/basics/overview.mdx
similarity index 100%
rename from docs/en/basics/overview.md
rename to docs/en/basics/overview.mdx
diff --git a/docs/en/basics/quickStart/quick-start.md b/docs/en/basics/quickStart/quick-start.mdx
similarity index 70%
rename from docs/en/basics/quickStart/quick-start.md
rename to docs/en/basics/quickStart/quick-start.mdx
index f3aa0ea84a..ca9e1a25a7 100644
--- a/docs/en/basics/quickStart/quick-start.md
+++ b/docs/en/basics/quickStart/quick-start.mdx
@@ -10,11 +10,11 @@ We will understand the use of the engine through an example of a "rotating duck.
After logging in, the first thing you see is the editor's homepage, which displays all the projects you have created. Use the button in the upper right corner to create a project. After clicking, you can choose the type of project to create, either 2D or 3D. We choose 3D Project.
-
+
At this point, a new blank project will open, with a camera and a directional light built into the scene.
-
+
## Build the Scene
@@ -33,49 +33,49 @@ Before that, let's explain some basic concepts in the game engine:
First, click this [link](https://gw.alipayobjects.com/os/bmw-prod/6cb8f543-285c-491a-8cfd-57a1160dc9ab.glb) to download a 3D model of a duck. Drag the downloaded model to the asset panel, and after a while, you will see that the model has been uploaded to the editor:
-
+
Next, drag the model from the asset panel to the scene view, and you can render this 3D model in the scene. At this point, a new entity has been added to the scene's node tree.
-
+
### Adjust the Duck's Transform
First, to better preview the final effect on mobile devices, we can select the **camera** entity. You can use the positioning button to clarify the current preview camera's position in the scene, simulate real device previews by selecting different sizes of mobile devices, and also choose to lock the preview window so that it does not disappear when selecting other entities.
-
+
Next, we select the duck and use the **move**, **rotate**, **scale**, and other [transform](/en/docs/core/transform) operations from the top toolbar. Switching between different transform types will also switch different operation handles on the duck. These operation handles are similar to the interactions in most 3D software. If you are using such handles for the first time, don't worry, just move the mouse to the handle and play around a bit, and you will quickly get the hang of it. Through simple transform operations, we can adjust the duck's position, angle, and size to meet our expected effect. The camera preview in the upper left corner will display the effect of your adjustments in real-time.
-
+
### Adjusting the Light
At this point, the duck is a bit dark. Select the `DirectLight` light entity in the node tree, and in the inspector panel on the right, drag the slider to appropriately adjust the intensity of the light, making the scene brighter.
-
+
### Making the Duck Rotate
First, in the asset panel, *right-click → Create → New Empty Script* to create a Script asset.
-
+
After creation, you can see a new Script asset in the asset panel.
-
+
Next, select the duck entity, and in the inspector panel on the right, click **Add Component** to add a [ Script ](/en/docs/script/class) component.
-
+
Click **Select asset** to choose the Script you just created. This binds the script to the entity, meaning the script's lifecycle functions will apply to this entity.
-
+
After creating the script, you can **double-click it** to jump to the code editor page.
-
+
In the code editor, add a line of code in the `onUpdate` function to make the duck rotate along the Y-axis. After writing the code, save it (`⌘+s`), and you can see the effect in real-time in the preview area on the right.
@@ -94,6 +94,6 @@ export default class extends Script {
We have completed the development work in the editor. Next, let's export this project to the local machine. Click the **Download** button on the left toolbar to bring up the export interface. Here, rename the project to "duck", then click the `Download` button. The editor will package the project into a `duck.zip` file for download.
-
+
After the project is packaged, open the box project with VsCode, run `npm install` & `npm run dev`, and you can see the project running normally.
diff --git a/docs/en/basics/version.md b/docs/en/basics/version.mdx
similarity index 96%
rename from docs/en/basics/version.md
rename to docs/en/basics/version.mdx
index d7bbc13105..c2ef6a9e6a 100644
--- a/docs/en/basics/version.md
+++ b/docs/en/basics/version.mdx
@@ -61,7 +61,7 @@ In [Project Settings](/en/docs/interface/menu/#项目设置), you can control th
Most Galacean packages will output version information in the `Console` at runtime.
-
+
This is usually used to determine if there are issues with package version dependencies:
diff --git a/docs/en/core/scene.mdx b/docs/en/core/scene.mdx
index 2ccc326c17..dd0675e5c9 100644
--- a/docs/en/core/scene.mdx
+++ b/docs/en/core/scene.mdx
@@ -94,7 +94,7 @@ engine.sceneManager.removeScene(scene2);
The example of multi-scene rendering is as follows:
-
+
### Merging Scenes
diff --git a/docs/en/core/transform.mdx b/docs/en/core/transform.mdx
index c27dc8d900..3fefb201a0 100644
--- a/docs/en/core/transform.mdx
+++ b/docs/en/core/transform.mdx
@@ -11,7 +11,7 @@ label: Core
> For a deeper understanding, refer to Galacean's **[Coordinate System](/docs/core/space)**.
-
+
## Editor Usage
diff --git a/docs/en/device/restore.md b/docs/en/device/restore.mdx
similarity index 100%
rename from docs/en/device/restore.md
rename to docs/en/device/restore.mdx
diff --git a/docs/en/graphics/2D/2d.md b/docs/en/graphics/2D/2d.mdx
similarity index 83%
rename from docs/en/graphics/2D/2d.md
rename to docs/en/graphics/2D/2d.mdx
index 5871667d7d..df76d21127 100644
--- a/docs/en/graphics/2D/2d.md
+++ b/docs/en/graphics/2D/2d.mdx
@@ -8,11 +8,11 @@ label: Graphics/2D
Galacean is a 3D/2D interactive solution. You can quickly experience 2D interactive development by **clicking Template** -> **Flappy Bird** in the **Menu View** on the **Editor Homepage**.
-
+
You can also create a blank 2D project by **clicking New Project** -> **2D Project** in the **Project View** on the **Editor Homepage**.
-
+
In the editor, there is not much difference between 2D and 3D projects, except that the perspective switches from 3D to 2D, and the default camera is set to **orthographic**. In the **Hierarchy Interface**, you can **select a node and right-click** -> **2D Object** to quickly create a 2D child node.
In a 2D project, you can attach a **Sprite Renderer** and set **Sprite Assets** to render images, use a **Text Renderer** to render 2D text, use **SpriteMask** to achieve masking effects for 2D elements, and use Lottie or Spine (2D skeletal animation) to display 2D effects. For performance optimization, you can also pack **sprites** into a **sprite atlas** to improve request and rendering performance.
diff --git a/docs/en/graphics/2D/lottie.md b/docs/en/graphics/2D/lottie.mdx
similarity index 92%
rename from docs/en/graphics/2D/lottie.md
rename to docs/en/graphics/2D/lottie.mdx
index 20400c634f..f34025e94c 100644
--- a/docs/en/graphics/2D/lottie.md
+++ b/docs/en/graphics/2D/lottie.mdx
@@ -16,17 +16,17 @@ It is recommended that designers use base64 format for images when exporting Lot
After obtaining the `.json` file, developers need to upload the `.json` file to the Galacean Editor. Use the upload button in the asset panel to select the "lottie" asset, choose a local [lottie json](https://github.com/galacean/galacean.github.io/files/14106485/_Lottie.3.json) file, and then upload it:
-
+
### Add Component
Select an entity, add the Lottie component, and choose the resource as the asset uploaded in the previous step to display and play the Lottie effect:
-
+
Developers can adjust various parameters in the properties panel to configure the Lottie:
-
+
| Property | Description |
| :--- | :--- |
@@ -74,9 +74,9 @@ 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.
-
+
-
+
This operation will add the `lolitaAnimations` field in the Lottie protocol to implement animation slicing:
@@ -129,17 +129,17 @@ engine.resourceManager.load({
});
```
-
+
### 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.
-
+
Thanks to the unified architecture of the Galacean Engine 2D/3D engine, 3D transformation functions can be easily implemented.
-
+
### Version Dependencies
| Engine Version | Lottie Version |
diff --git a/docs/en/graphics/2D/spine/editor.md b/docs/en/graphics/2D/spine/editor.mdx
similarity index 66%
rename from docs/en/graphics/2D/spine/editor.md
rename to docs/en/graphics/2D/spine/editor.mdx
index b2c4394084..87f6a21898 100644
--- a/docs/en/graphics/2D/spine/editor.md
+++ b/docs/en/graphics/2D/spine/editor.mdx
@@ -21,29 +21,29 @@ Below is a brief overview of the Spine asset export process:
1. After completing the animation, click `Spine Menu` > `Export` to open the export window.
-
+
2. In the upper left corner of the export window, select **Binary** (recommended to export in binary format instead of JSON format, as it results in smaller file sizes and faster loading).
-
+
3. Check the **Texture Atlas** packing checkbox.
-
+
4. Click **Packing Settings**.
The packing settings refer to the texture packing configurations. Refer to the [official documentation](https://zh.esotericsoftware.com/spine-texture-packer) for detailed parameters. After completing the packing settings, click **OK**.
-
+
5. Return to the export window, select the export folder, and click **Export**.
-
+
6. You will get the following three files:
-
+
- spineboy.skel: Contains skeleton and animation data, the core information for binding animation actions to the skeleton.
- spineboy.atlas: Stores information about the texture atlas, including the position and size of each texture in the atlas.
@@ -54,30 +54,30 @@ The second step is to import the files exported from the Spine editor into the G
After opening the editor, drag the exported files directly into the [Assets Panel](/docs/assets/interface/) to upload them, as shown in the following GIF:
-
+
You can also click the upload button in the assets panel and select the files to upload:
-
-
+
+
Once uploaded, you will see the uploaded Spine assets in the assets panel, including: SpineSkeletonData assets, SpineAtlas assets, and texture assets.
### SpineSkeletonData Asset
-
+
The SpineSkeletonData asset stores skeleton data and references to the generated SpineAtlas asset. By clicking the asset, you can preview the Spine animation in the inspector, where you can switch between `Skin` and `Animation Clips` in the preview panel:
-
+
### SpineAtlas Asset
-
+
The SpineAtlas asset stores the texture atlas file and contains references to the required texture assets. By clicking the asset, you can view its referenced texture assets and atlas information in the inspector.
-
+
### Updating Assets
If you need to update your Spine assets, re-export the assets from the Spine editor and import them into the Galacean editor to overwrite the existing files.
@@ -91,23 +91,23 @@ After uploading the assets, you can add Spine animations to the scene using the
Drag-and-drop is the quickest method. Click the SpineSkeletonData asset, hold and drag it into the viewport to quickly create an entity with the SpineAnimationRenderer component and specify the selected SpineSkeletonData asset.
-
+
### Quick Add
Click the quick add button in the upper left corner and select `2D Object` > `SpineAnimationRenderer`.
-
+
After adding, you will see a new entity with the SpineAnimationRenderer component. Click the Resource property and select the uploaded SpineSkeletonData asset to see the Spine animation.
-
+
### Manual Add
The manual method is similar to quick add but requires manually creating a new entity in the node tree and adding the SpineAnimationRenderer component via the AddComponent button in the inspector.
-
+
After adding the SpineAnimationRenderer component, you also need to specify the component's Resource, which is the SpineSkeletonData asset that the SpineAnimationRenderer component will render.
@@ -117,7 +117,7 @@ All three methods for adding Spine animations are essentially the same: by addin
The SpineAnimationRenderer component configuration is as follows:
-
+
Using the SpineAnimationRenderer component, you can configure the Spine animation assets and default states:
@@ -133,5 +133,5 @@ Using the SpineAnimationRenderer component, you can configure the Spine animatio
Finally, after completing scene editing, you can refer to the [Project Export](/en/docs/platform/platform/) process to export the editor project.
Next section: [Using Galacean Spine Runtime in Your Code](/en/docs/graphics/2D/spine/runtime)
-
+
Next Chapter: [Using in Code](/en/docs/graphics/2D/spine/runtime)
diff --git a/docs/en/graphics/2D/spine/example.md b/docs/en/graphics/2D/spine/example.mdx
similarity index 69%
rename from docs/en/graphics/2D/spine/example.md
rename to docs/en/graphics/2D/spine/example.mdx
index 85e882f49b..8605f57b88 100644
--- a/docs/en/graphics/2D/spine/example.md
+++ b/docs/en/graphics/2D/spine/example.mdx
@@ -10,58 +10,57 @@ label: Graphics/2D/Spine/example
The Galacean editor provides a series of tutorial templates to help you quickly get started with using Spine animations.
After entering the [editor](https://galacean.antgroup.com/editor/projects), you can click on the Templates Tab on the left to view these templates.
-
**Animation Control**
This template demonstrates how to use the `setAnimation` and `addAnimation` APIs of `AnimationState` to orchestrate Spine animations:
-
+
**Animation Transition and Blending**
This template shows how to set transitions and blend animations between different tracks in Spine:
-
+
**Mix and Match Outfits**
This template demonstrates the capability of Spine to mix and match outfits. By freely combining attachments from different skins, you can mix and match accessories from various skins:
-
+
**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.
-
+
## Examples
**Animation Control**
This example demonstrates how to orchestrate a Spine animation queue using the `setAnimation` and `addAnimation` APIs:
-
+
**Follow Shooting**
This example shows how to achieve an aiming and shooting effect by modifying the IK bone position:
-
+
**Partial Skin Switching**
This example demonstrates how to achieve a partial outfit change by modifying attachments in slots:
-
+
**Full Skin Switching**
This example demonstrates how to achieve full skin switching using the `setSkin` method:
-
+
**Skin Mixing**
This example demonstrates how to achieve mix-and-match effects at runtime by combining new skins:
-
+
**Physics**
This example showcases the physics-based animation effects in Spine 4.2:
-
+
The next chapter: [Versions and Performance](/docs/graphics/2D/spine/other)
diff --git a/docs/en/graphics/2D/spine/other.md b/docs/en/graphics/2D/spine/other.mdx
similarity index 97%
rename from docs/en/graphics/2D/spine/other.md
rename to docs/en/graphics/2D/spine/other.mdx
index f6b98df2bf..381ec41457 100644
--- a/docs/en/graphics/2D/spine/other.md
+++ b/docs/en/graphics/2D/spine/other.mdx
@@ -9,7 +9,7 @@ label: Graphics/2D/Spine/other
### Upgrades and Changes in 1.4
After upgrading to Editor version 1.4, besides updating the engine version in the editor's [Project Settings](/docs/interface/menu/#project-settings), please note the following changes to the 1.4 Spine API:
-1. We no longer recommend creating Spine animations using the method: adding the `SpineAnimationRenderer` component via `addComponent` + setting the resource using `set SpineResource`.
+1. We no longer recommend creating Spine animations using the method: adding the `SpineAnimationRenderer` component via `addComponent` + setting the resource using `set SpineResource`.
In version 1.4, we introduced an instantiation method `instantiate` for SpineResource. The `instantiate` method returns a Spine animation entity that uses the resource, making the creation process much faster and more convenient.
2. `defaultState` has been renamed to `defaultConfig`. This parameter represents the default configuration of the Spine animation. The renamed parameter makes its purpose clearer.
diff --git a/docs/en/graphics/2D/spine/overview.md b/docs/en/graphics/2D/spine/overview.mdx
similarity index 100%
rename from docs/en/graphics/2D/spine/overview.md
rename to docs/en/graphics/2D/spine/overview.mdx
diff --git a/docs/en/graphics/2D/spine/runtime.md b/docs/en/graphics/2D/spine/runtime.mdx
similarity index 94%
rename from docs/en/graphics/2D/spine/runtime.md
rename to docs/en/graphics/2D/spine/runtime.mdx
index 2b9f24abc5..c0b9fae7a5 100644
--- a/docs/en/graphics/2D/spine/runtime.md
+++ b/docs/en/graphics/2D/spine/runtime.mdx
@@ -36,7 +36,7 @@ await engine.resourceManager.load({
If not added to the scene, you need to load it manually in the code. Follow these steps:
1. Copy the SkeletonDataAsset link.
Right-click on the SkeletonDataAsset, select `Copy relative path` to copy the asset path.
-
+
2. Use ResourceManager to load
@@ -66,10 +66,10 @@ const resource = await engine.resourceManager.load({
```
When loading custom uploaded assets:
-- If passing the parameter as `url`, ensure the files are in the same directory, such as:
-https://your.spineboy.json
-https://your.spineboy.atlas
-https://your.spineboy.png
+- If passing the parameter as `url`, ensure the files are in the same directory, such as:
+https://your.spineboy.json
+https://your.spineboy.atlas
+https://your.spineboy.png
- If passing the parameter as `urls` (multiple links), the files do not need to be in the same directory:
```typescript
@@ -83,10 +83,10 @@ const resource = await engine.resourceManager.load({
});
```
-- If no texture URL is provided, the loader will read the texture image name from the atlas file and look for the texture in the same directory as the atlas file.
-- If the custom uploaded asset lacks file extensions, you can add URL query parameters to the links, e.g.:
-https://your.spineboyjson?ext=.json,
-https://your.spineboyatlas?ext=.atlas
+- If no texture URL is provided, the loader will read the texture image name from the atlas file and look for the texture in the same directory as the atlas file.
+- If the custom uploaded asset lacks file extensions, you can add URL query parameters to the links, e.g.:
+https://your.spineboyjson?ext=.json,
+https://your.spineboyatlas?ext=.atlas
- If the Spine animation atlas includes multiple images (e.g., a.png and b.png), follow the order recorded in the atlas file to pass the image URLs:
```typescript
@@ -236,26 +236,26 @@ The first three parameters are easy to understand, so let’s focus on the fourt
When `delay > 0` (e.g., `delay` is 1), the preceding animation switches to the next animation after playing for 1 second, as shown below:
-
+
If animation A’s duration is less than 1 second, it will either loop until 1 second or remain in its finished state until 1 second, depending on whether looping is enabled.
When `delay = 0`, the next animation plays immediately after the preceding animation finishes, as shown below:
-
+
Assuming animation A lasts 1 second and the transition duration is 0.2 seconds, animation B will transition starting at 0.8 seconds (1 - 0.2).
When `delay < 0`, the next animation begins before the preceding animation finishes, as shown below:
Similarly, if animation A lasts 1 second with a 0.2-second transition, animation B will begin transitioning at 0.6 seconds.
-
+
Besides `addAnimation`, the [addEmptyAnimation](https://zh.esotericsoftware.com/spine-api-reference#AnimationState-addEmptyAnimation) method can add an empty animation. Empty animations reset animations to their initial state.
`addEmptyAnimation` takes three parameters: `TrackIndex`, `mixDuration`, and `delay`. The `TrackIndex` and `delay` parameters are the same as those in `addAnimation`. The `mixDuration` parameter specifies the transition duration, and the animation will reset to its initial state over this duration. As shown below (the brown area on the right represents the empty animation):
-
+
...
@@ -273,7 +273,7 @@ For more details on these parameters, refer to the [TrackEntry official document
#### **Animation Events**
-
+
When controlling animations via the `AnimationState` API, various events, as shown above, can be triggered.
- When a new animation starts, the `Start` event is triggered.
diff --git a/docs/en/graphics/2D/sprite.md b/docs/en/graphics/2D/sprite.mdx
similarity index 83%
rename from docs/en/graphics/2D/sprite.md
rename to docs/en/graphics/2D/sprite.mdx
index d742b3b5de..ab5337cf80 100644
--- a/docs/en/graphics/2D/sprite.md
+++ b/docs/en/graphics/2D/sprite.mdx
@@ -21,11 +21,11 @@ label: Graphics/2D
The region determines the display content of the sprite. You can select a rectangular area in the texture to display, and the excess part will be automatically filtered out, as shown below:
-
+
The pivot represents the position of the sprite's center in the region, as shown below:
-
+
## Usage
@@ -35,13 +35,13 @@ The pivot represents the position of the sprite's center in the region, as shown
In the **[Assets Panel](/en/docs/assets/interface/)**, right-click on the blank area and select **Upload** → **Sprite** → **Select the corresponding image** to upload the sprite asset. After a successful upload, the current asset list will synchronously add a texture asset named `image_name.png` and a sprite asset named `image_name-spr.png`.
-
+
#### Create Blank Sprite
In the **[Assets Panel](/en/docs/assets/interface/)**, right-click on the blank area and select **Create** → **Sprite** to create a blank sprite asset.
-
+
#### Script Creation
@@ -58,8 +58,8 @@ const spriteWithTexture = new Sprite(engine, texture2D);
Here, we specifically explain the setting of the pivot in the editor. For the pivot, the bottom-left corner of the texture is `(0, 0)`, the X-axis goes from left to right, and the Y-axis goes from bottom to top. The editor has some built-in common pivot shortcut values, as shown below:
-
+
If the built-in values do not meet your needs, you can customize your own pivot, as shown below:
-
+
diff --git a/docs/en/graphics/2D/spriteAtlas.md b/docs/en/graphics/2D/spriteAtlas.mdx
similarity index 81%
rename from docs/en/graphics/2D/spriteAtlas.md
rename to docs/en/graphics/2D/spriteAtlas.mdx
index 49e4f413d0..c581decb0d 100644
--- a/docs/en/graphics/2D/spriteAtlas.md
+++ b/docs/en/graphics/2D/spriteAtlas.mdx
@@ -14,7 +14,7 @@ label: Graphics/2D
In the example of the sprite atlas below, only one draw call is made per frame:
-
+
## Editor Usage
@@ -22,11 +22,11 @@ In the example of the sprite atlas below, only one draw call is made per frame:
Right-click in the **[Assets Panel](/en/docs/assets/interface/)**, select `Create` from the `Function List`, and choose `Sprite Atlas`. At this point, a blank sprite atlas asset is successfully created.
-
+
Select the `Sprite Atlas` asset to view detailed information about the asset in the **[Inspector Panel](/en/docs/interface/inspector)**.
-
+
### Adding Sprites
@@ -36,13 +36,13 @@ After determining the inclusion relationship between the `Sprite Atlas` and the
Left-click to select the `Sprite` asset to be added. In the **[Inspector Panel](/en/docs/interface/inspector)**, find the sprite's `Affiliation`, and select `Pack into Atlas` to choose the `Sprite Atlas` asset you want to pack into.
-
+
#### Method 2: Operating the Sprite Atlas
Left-click to select the target `Sprite Atlas` asset. In the **[Inspector Panel](/en/docs/interface/inspector)**, find the sprite list of the atlas, and select `Add Sprite` to choose the `Sprite` asset you want to pack. (If you select a folder, all sprites in the folder directory will be added)
-
+
### Removing Sprites
@@ -50,25 +50,25 @@ Left-click to select the target `Sprite Atlas` asset. In the **[Inspector Panel]
Left-click to select the `Sprite` asset to be removed from the atlas. In the **[Inspector Panel](/en/docs/interface/inspector)**, find the sprite's `Affiliation` (make sure the target atlas path matches), and click the remove button to remove the sprite from the target atlas.
-
+
#### Method 2: Operating the Sprite Atlas
Left-click to select the `Sprite Atlas` asset to be operated on. In the **[Inspector Panel](/en/docs/interface/inspector)**, find the sprite list of the atlas, find the sprite object to be removed, and click the remove button.
-
+
### Quick Operations on Sprites
After the `Sprite` asset is added to the `Sprite Atlas`, you can quickly operate the sprite in the **[Inspector Panel](/en/docs/interface/inspector)** of the `Sprite Atlas`. Its properties will be synchronously modified in the `Sprite` asset.
-
+
### Settings
#### Packaging Settings
-
+
| Setting Name | Description |
| ------------------ | ---------------------------------------- |
@@ -80,11 +80,11 @@ After the `Sprite` asset is added to the `Sprite Atlas`, you can quickly operate
If you encounter the following warning during packaging, it means that the size of the atlas exceeds the maximum width and height of the texture. You can solve this by adjusting the `Max Texture Width` and `Max Texture Height` or **rearranging** the scattered images for packaging.
-
+
#### Export Settings
-
+
| Property | Value |
| --- | --- |
@@ -98,7 +98,7 @@ If you encounter the following warning during packaging, it means that the size
Click on the `Sprite Atlas` asset, adjust the `Max Texture Width` and `Max Texture Height` in the `Packaging Settings`, and then call `Pack and Preview` in the `Packaging Object` to ensure a high level of atlas utilization.
-
+
The left side of the preview image shows the size information of the exported image, and the right side shows the atlas utilization information (representing the percentage of the total area of all scattered images occupying the final large image). You can adjust the packing settings based on this value to achieve better results.
@@ -122,7 +122,7 @@ galacean-tool-atlas p inputPath -o outputName
Here, `inputPath` represents the path of the folder to be packed, and `outputName` represents the name of the output sprite atlas file. If you get the result shown in the image below, it means the packing was successful.
-
+
| Property | Description |
| -------------- | --------------------------------------------- |
diff --git a/docs/en/graphics/2D/spriteMask.md b/docs/en/graphics/2D/spriteMask.mdx
similarity index 85%
rename from docs/en/graphics/2D/spriteMask.md
rename to docs/en/graphics/2D/spriteMask.mdx
index 2ca55b28e6..4847086511 100644
--- a/docs/en/graphics/2D/spriteMask.md
+++ b/docs/en/graphics/2D/spriteMask.mdx
@@ -8,7 +8,7 @@ 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.
-
+
Control the interaction with [Sprite](/en/docs/graphics/2D/sprite/) using parameters provided by [SpriteMask](/apis/core/#SpriteMask).
@@ -21,7 +21,7 @@ Control the interaction with [Sprite](/en/docs/graphics/2D/sprite/) using parame
The `influenceLayers` of `SpriteMask` indicates which mask layers the mask will affect for `SpriteRenderer`. The `maskLayer` of `SpriteRenderer` indicates which mask layers the sprite belongs to, as shown below:
-
+
In the image above, the spriteMask affects sprites in `Layer1` and `Layer30`. spriteRenderer0 is in `Layer2`, so there is no intersection, and spriteRenderer0 does not interact with spriteMask. spriteRenderer1 is in `Layer1`, which intersects with the mask layers affected by spriteMask, so spriteRenderer1 interacts with spriteMask.
@@ -31,25 +31,25 @@ In the image above, the spriteMask affects sprites in `Layer1` and `Layer30`. sp
When we need to mask a sprite, we first need to create an entity and add a sprite mask component, as shown below:
-
+
### Setting the Mask Area
The sprite mask component uses an image to represent the mask area. We set the sprite resource through the component's `sprite` parameter, as shown below:
-
+
### Setting the Sprite's Mask Type
After the above two steps, you may find that the mask still has no effect. This is because the current sprite's mask type is still the default (None). We set the `mask interaction` of the sprite in the scene to the inner mask type, as shown below:
-
+
### Setting alpha cutoff
This parameter represents the lower limit of the effective `alpha` value for the current mask (range: `0~1`). In other words, any alpha value in the sprite's texture that is less than the alpha cutoff will be discarded (i.e., it will not be considered as a mask area). We can dynamically adjust the value of this property to see the actual effect, as shown below:
-
+
Similarly, in the script, we can use the following code to apply the sprite mask:
diff --git a/docs/en/graphics/2D/spriteRenderer.md b/docs/en/graphics/2D/spriteRenderer.mdx
similarity index 81%
rename from docs/en/graphics/2D/spriteRenderer.md
rename to docs/en/graphics/2D/spriteRenderer.mdx
index 04327d2eb9..b7245616ff 100644
--- a/docs/en/graphics/2D/spriteRenderer.md
+++ b/docs/en/graphics/2D/spriteRenderer.mdx
@@ -10,11 +10,11 @@ The [SpriteRenderer](/apis/core/#SpriteRenderer) component is used to display im
> Note: By default, the sprite renderer places the image on the XoY plane.
-
+
## Properties
-
+
| Property | Type | Description |
| :----------------------------------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------ |
@@ -36,13 +36,13 @@ The [SpriteRenderer](/apis/core/#SpriteRenderer) component is used to display im
By selecting a node in the **[Hierarchy Panel](/en/docs/interface/hierarchy)**, you can quickly add a child node with a sprite renderer by right-clicking -> **2D Object** -> **Sprite Renderer**.
-
+
#### Attach Sprite Renderer to a Node
To attach a sprite renderer to an existing node, simply go to the **[Inspector Panel](/en/docs/interface/inspector)** of the selected node, then choose **Add Component** -> **2D** -> **Sprite Renderer**.
-
+
#### Script Creation
@@ -57,33 +57,33 @@ spriteRenderer.sprite = sprite;
When displaying an image, first add a sprite component to an entity and then set the sprite asset as follows:
-
+
### Rendering Size
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.
-
+
### Set Color
Adjust the color by setting the `color` property to achieve fade-in and fade-out effects, as shown below:
-
+
### Image Flip
In addition to basic image display, `SpriteRenderer` also supports image flipping. Simply set the `flipX/flipY` properties to achieve flipping, as shown below:
-
+
-
+
### 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:
-
+
### Masking
@@ -93,5 +93,5 @@ Please refer to the [Sprite Mask](/en/docs/graphics/2D/spriteMask) documentation
Please refer to the [Custom Shader](/en/docs/graphics-shader-custom) documentation.
-
+
diff --git a/docs/en/graphics/2D/text.md b/docs/en/graphics/2D/text.mdx
similarity index 92%
rename from docs/en/graphics/2D/text.md
rename to docs/en/graphics/2D/text.mdx
index dd9d781795..8e282a3117 100644
--- a/docs/en/graphics/2D/text.md
+++ b/docs/en/graphics/2D/text.mdx
@@ -14,12 +14,12 @@ label: Graphics/2D
To display text, you need to add a text component to an entity, as shown below:
-
+
### Parameter Description
Select an entity with the TextRenderer component, and you can set all related properties in the inspector on the right to configure the text component:
-
+
The property descriptions are as follows:
| Property | Description |
@@ -44,17 +44,17 @@ The property descriptions are as follows:
After adding the text component, you can set the Text property to display the desired text, as shown below:
-
+
### Set Custom Font
To make the text display more diverse, developers can upload their own font files. The editor currently supports the following font file formats: **.ttf**, **.otf**, **.woff**
-
+
## Script Usage
-
+
1. Create a [TextRenderer](/apis/core/#TextRenderer) component to display text
2. Set the [Font](/apis/core/#Font) object through the font property
@@ -160,7 +160,7 @@ textRenderer.fontStyle = FontStyle.Bold | FontStyle.Italic;
### Multi-line Text
-
+
### Custom Fonts
@@ -182,5 +182,5 @@ const font = await engine.resourceManager.load({
});
```
-
+
```
diff --git a/docs/en/graphics/background/background.md b/docs/en/graphics/background/background.mdx
similarity index 87%
rename from docs/en/graphics/background/background.md
rename to docs/en/graphics/background/background.mdx
index 2b092ba1a7..5378b7bf4f 100644
--- a/docs/en/graphics/background/background.md
+++ b/docs/en/graphics/background/background.mdx
@@ -14,9 +14,9 @@ Developers can customize the background for scenes, which will be rendered befor
Developers can set different backgrounds according to their needs:
-
+
In [Skybox](/en/docs/graphics-background-sky}) mode, by setting specific meshes and materials, various custom backgrounds can be achieved, such as `video background`:
-
+
diff --git a/docs/en/graphics/background/sky.md b/docs/en/graphics/background/sky.mdx
similarity index 91%
rename from docs/en/graphics/background/sky.md
rename to docs/en/graphics/background/sky.mdx
index e1c8a52fa4..ecd41d38e7 100644
--- a/docs/en/graphics/background/sky.md
+++ b/docs/en/graphics/background/sky.mdx
@@ -20,19 +20,19 @@ In the editor, simply follow these steps to set the skybox for the background:
A skybox texture is a [cube texture](/en/docs/graphics/texture/cube/). After preparing the HDR, follow the path **[Asset Panel](/en/docs/assets/interface)** -> **Right-click Upload** -> **Select TextureCube(.hdr)** -> **Choose the corresponding HDR map** -> **Cube texture asset creation complete**.
-
+
### 2. Create Skybox Material
After creating the cube texture asset, follow the path **[Asset Panel](/en/docs/assets/interface)** -> **Right-click Create** -> **Select Material** -> **Select the generated asset** -> **[Inspector Panel](/en/docs/interface/inspector)** -> **Click the Shader property in the Base section** -> **Select Sky Box** -> **Click HDR in the Base section** -> **Choose the cube texture created in the first step** to create the skybox material.
-
+
### 3. Set the Skybox
Finally, follow the path **[Hierarchy Panel](/en/docs/interface/hierarchy)** -> **Select Scene** -> **[Inspector Panel](/en/docs/interface/inspector)** -> **Background section** -> **Set Mode to Sky** -> **Select the material created in the second step** -> **Set Mesh to the built-in Cuboid** to see the background of the scene change to the skybox.
-
+
### Code to Set Skybox
@@ -63,7 +63,7 @@ background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
Procedural sky is the default background in 3D projects in the editor. You can also follow the path **[Hierarchy Panel](/en/docs/interface/hierarchy)** -> **Select Scene** -> **[Inspector Panel](/en/docs/interface/inspector)** -> **Background section** -> **Set Mode to Sky** -> **Select the built-in SkyMat material** -> **Set Mesh to the built-in Sphere**
-
+
### Code to Set Procedural Sky
@@ -81,7 +81,7 @@ background.sky.mesh = PrimitiveMesh.createSphere(engine);
In the atmospheric scattering material's **[Inspector Panel](/en/docs/interface/inspector)**, you can see many adjustable properties:
-
+
> The built-in atmospheric scattering material cannot have its properties freely adjusted; developers can create and adjust their own.
diff --git a/docs/en/graphics/background/solidColor.md b/docs/en/graphics/background/solidColor.mdx
similarity index 92%
rename from docs/en/graphics/background/solidColor.md
rename to docs/en/graphics/background/solidColor.mdx
index 39ebc0296c..3dc2f49631 100644
--- a/docs/en/graphics/background/solidColor.md
+++ b/docs/en/graphics/background/solidColor.mdx
@@ -12,7 +12,7 @@ When the background type of the scene is set to solid color, the rendering area
Navigate to **[Hierarchy Panel](/en/docs/interface/hierarchy)** -> **Select Scene** -> **[Inspector Panel](/en/docs/interface/inspector)** -> **Background Section** and set **Mode** to **Solid Color**, then choose the desired background color. You will see the background of the scene change in real-time.
-
+
Similarly, you can also set it in the script with the following code:
diff --git a/docs/en/graphics/background/texture.md b/docs/en/graphics/background/texture.mdx
similarity index 96%
rename from docs/en/graphics/background/texture.md
rename to docs/en/graphics/background/texture.mdx
index a23ba37534..590351bf21 100644
--- a/docs/en/graphics/background/texture.md
+++ b/docs/en/graphics/background/texture.mdx
@@ -12,7 +12,7 @@ When the background type of the scene is set to texture, the rendering area of t
According to the path **[Hierarchy Panel](/en/docs/interface/hierarchy)** -> **Select Scene** -> **[Inspector Panel](/en/docs/interface/inspector)** -> **Background Section** set **Mode** to **Texture**, then select the desired texture, you can see the background of the scene change in real-time.
-
+
Similarly, in the script, you can also set it with the following code:
diff --git a/docs/en/graphics/light/ambient.md b/docs/en/graphics/light/ambient.mdx
similarity index 81%
rename from docs/en/graphics/light/ambient.md
rename to docs/en/graphics/light/ambient.mdx
index 8a3f28b4f5..5551c0149a 100644
--- a/docs/en/graphics/light/ambient.md
+++ b/docs/en/graphics/light/ambient.mdx
@@ -8,13 +8,13 @@ label: Graphics/Light
In addition to real-time computed direct light sources, we generally need to pre-bake lighting offline as ambient light for real-time sampling. This method effectively captures the global illumination and atmosphere of the environment, making objects blend better into their surroundings.
-
+
## Editor Usage
### 1. Ambient Diffuse
-
+
| Property | Function |
| :-- | :-- |
@@ -23,7 +23,7 @@ In addition to real-time computed direct light sources, we generally need to pre
### 2. Ambient Specular
-
+
| Property | Function |
| :-- | :-- |
diff --git a/docs/en/graphics/light/bake.md b/docs/en/graphics/light/bake.mdx
similarity index 69%
rename from docs/en/graphics/light/bake.md
rename to docs/en/graphics/light/bake.mdx
index 5437c15a81..5c1153d028 100644
--- a/docs/en/graphics/light/bake.md
+++ b/docs/en/graphics/light/bake.mdx
@@ -8,7 +8,7 @@ label: Graphics/Light
Baking refers to Galacean performing lighting calculations in advance and baking the results into a binary file (containing [diffuse spherical harmonics parameters](https://www.wikiwand.com/zh-hans/%E7%90%83%E8%B0%90%E5%87%BD%E6%95%B0) and [pre-filtered environment maps](https://learnopengl-cn.github.io/07%20PBR/03%20IBL/02%20Specular%20IBL/)), which are then sampled in real-time during runtime.
-
+
We provide baking tools in the [editor](https://galacean.antgroup.com/editor) and the [glTF viewer](https://galacean.antgroup.com/engine/gltf-viewer).
@@ -18,26 +18,26 @@ We provide baking tools in the [editor](https://galacean.antgroup.com/editor) an
The editor has automatic baking enabled by default. It will automatically bake after modifying the background (color, exposure, rotation, etc.) or changing the baking resolution.
-
+
You can also disable automatic baking and perform manual baking when needed.
-
+
### 2. Baking Resolution
This indicates the resolution of the pre-filtered environment map after baking. The default resolution is 128, with the baked product being approximately 500KB; a resolution of 64 results in a baked product of about 125KB. You can choose the appropriate baking resolution based on the scene.
-
+
### 3. Setting Background
Refer to the [background tutorial](/en/docs/graphics/background/sky/) to set the scene background. The editor will perform lighting baking based on the baking resolution and baking switch settings. Any modifications to the background (color, rotation, exposure, changing HDR maps, etc.) will depend on the baking switch to decide whether to bake automatically. **If you want to set a solid color background or a transparent background but do not want to bake the solid color background, you can first turn off the automatic baking switch and then switch to the [solid color background](/en/docs/graphics/background/solidColor/).**
-
+
## glTF Viewer
We also provide a baking tool in the [glTF viewer](https://galacean.antgroup.com/engine/gltf-viewer) on our official website. Simply drag and drop an HDR map onto the webpage to automatically download the baked product:
-
+
diff --git a/docs/en/graphics/light/directional.md b/docs/en/graphics/light/directional.mdx
similarity index 91%
rename from docs/en/graphics/light/directional.md
rename to docs/en/graphics/light/directional.mdx
index 4b626eb62d..480943c5f2 100644
--- a/docs/en/graphics/light/directional.md
+++ b/docs/en/graphics/light/directional.mdx
@@ -8,7 +8,7 @@ label: Graphics/Light
**Directional Light** represents light that is emitted uniformly in a certain direction, with parallel light rays. Sunlight hitting the Earth's surface can be considered directional light because the distance between the Sun and the Earth is much greater than the Earth's radius. Therefore, sunlight hitting the Earth can be seen as a set of parallel light rays coming from the same direction, i.e., directional light.
-
+
Directional light has 3 main characteristics: _color_ ([color](/apis/core/#DirectLight-color)), _intensity_ ([intensity](/apis/core/#DirectLight-intensity)), and _direction_ ([direction](/apis/core/#DirectLight-direction)). The _direction_ is represented by the orientation of the node where the directional light is located.
diff --git a/docs/en/graphics/light/light.md b/docs/en/graphics/light/light.mdx
similarity index 94%
rename from docs/en/graphics/light/light.md
rename to docs/en/graphics/light/light.mdx
index 5437541c90..a42e850d67 100644
--- a/docs/en/graphics/light/light.md
+++ b/docs/en/graphics/light/light.mdx
@@ -24,13 +24,13 @@ Proper use of lighting can provide realistic rendering effects. This section inc
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:
-
+
## Indirect Light
Ambient light is emitted from all around and enters the eye, as shown in the following example:
-
+
## Real-time Lighting and Baked Lighting
diff --git a/docs/en/graphics/light/point.md b/docs/en/graphics/light/point.mdx
similarity index 89%
rename from docs/en/graphics/light/point.md
rename to docs/en/graphics/light/point.mdx
index 1caf0072b4..1165d1ae05 100644
--- a/docs/en/graphics/light/point.md
+++ b/docs/en/graphics/light/point.mdx
@@ -8,7 +8,7 @@ label: Graphics/Light
A **point light** is a light source located at a point in space that emits light rays in all directions, similar to a light bulb in real life.
-
+
Point lights have 3 main characteristics: _color_ ([color](/apis/core/#PointLight-color)), _intensity_ ([intensity](/apis/core/#PointLight-intensity)), and _range_ ([distance](/apis/core/#PointLight-distance)). Areas beyond the range will not receive light from the point light, and the intensity of the light decreases as the distance from the light source increases.
diff --git a/docs/en/graphics/light/shadow.md b/docs/en/graphics/light/shadow.mdx
similarity index 85%
rename from docs/en/graphics/light/shadow.md
rename to docs/en/graphics/light/shadow.mdx
index a75c64fe21..5962b70908 100644
--- a/docs/en/graphics/light/shadow.md
+++ b/docs/en/graphics/light/shadow.mdx
@@ -10,7 +10,7 @@ Shadows can effectively enhance the three-dimensionality and realism of the rend
## Scene Configuration
-
+
There are some configurations in the scene that can affect global shadows:
@@ -25,7 +25,7 @@ There are some configurations in the scene that can affect global shadows:
## Light Configuration
-
+
To cast shadows, there needs to be a [directional light](/en/docs/graphics/light/directional) in the scene. Currently, the engine can only enable shadows for one directional light `DirectLight`, mainly because shadow rendering doubles the DrawCall, which can severely impact rendering performance. In the absence of a specified [main light(scene.sun)](/apis/core/#Scene-sun), the engine will default to selecting the light with the highest intensity to cast shadows:
@@ -39,7 +39,7 @@ To cast shadows, there needs to be a [directional light](/en/docs/graphics/light
## Projectiles and Receivers
-
+
In the [Mesh Renderer Component](/en/docs/graphics/renderer/meshRenderer), `receiveShadows` determines whether the object receives shadows, and `castShadows` determines whether the object casts shadows.
@@ -47,4 +47,4 @@ In the [Mesh Renderer Component](/en/docs/graphics/renderer/meshRenderer), `rece
Starting from version `1.3`, the engine supports casting shadows for alpha cutoff (Alpha Cutoff) objects and transparent (Transparent) objects. For transparent objects to cast shadows, you need to enable the `Transparent` switch in the scene panel:
-
+
diff --git a/docs/en/graphics/light/spot.md b/docs/en/graphics/light/spot.mdx
similarity index 92%
rename from docs/en/graphics/light/spot.md
rename to docs/en/graphics/light/spot.mdx
index ece5dbabdc..80d60be329 100644
--- a/docs/en/graphics/light/spot.md
+++ b/docs/en/graphics/light/spot.mdx
@@ -8,7 +8,7 @@ label: Graphics/Light
**Spotlight** is like the light emitted from a flashlight in real life, emitting conically from a point in a specific direction.
-
+
The spotlight has several main characteristics: _color_ ([color](/apis/core/#SpotLight-color)), _intensity_ ([intensity](/apis/core/#SpotLight-intensity)), _effective distance_ ([distance](/apis/core/#SpotLight-distance)), _scatter angle_ ([angle](/apis/core/#SpotLight-angle)), _penumbra attenuation angle_ ([penumbra](/apis/core/#SpotLight-penumbra)). The scatter angle indicates the angle within which there is light relative to the direction of the light source, and the penumbra attenuation angle indicates that within the effective angle range, the light intensity gradually attenuates to 0 as the angle increases.
diff --git a/docs/en/graphics/material/composition.md b/docs/en/graphics/material/composition.mdx
similarity index 100%
rename from docs/en/graphics/material/composition.md
rename to docs/en/graphics/material/composition.mdx
diff --git a/docs/en/graphics/material/editor.md b/docs/en/graphics/material/editor.mdx
similarity index 60%
rename from docs/en/graphics/material/editor.md
rename to docs/en/graphics/material/editor.mdx
index 7ecb7065da..f0c30d5091 100644
--- a/docs/en/graphics/material/editor.md
+++ b/docs/en/graphics/material/editor.mdx
@@ -6,17 +6,17 @@ title: Using the Editor
### 1. Manually Create Material
-
+
### 2. Import Model
Refer to the [Import and Use Model](/en/docs/graphics/model/use/) tutorial. We can first import the model into the editor. Generally, the model is already automatically bound to the material, and the user does not need to do anything; if you want to modify the material, we need to click the `duplicate & remap` button to generate a copy of the material and then edit the material copy.
-
+
Switching shaders will not reset shader data. For example, if the base color is red, the base color will remain red even if the shader is switched.
-
+
### 3. Adjust Material
diff --git a/docs/en/graphics/material/material.md b/docs/en/graphics/material/material.mdx
similarity index 73%
rename from docs/en/graphics/material/material.md
rename to docs/en/graphics/material/material.mdx
index cba63e7caa..fff2648c37 100644
--- a/docs/en/graphics/material/material.md
+++ b/docs/en/graphics/material/material.mdx
@@ -4,7 +4,7 @@ title: Material Overview
Materials refer to a collection of properties used to describe the appearance and surface characteristics of an object. Materials determine how a model interacts with light during rendering, thus affecting its visual presentation.
-
+
This section includes the following related information:
diff --git a/docs/en/graphics/material/script.md b/docs/en/graphics/material/script.mdx
similarity index 100%
rename from docs/en/graphics/material/script.md
rename to docs/en/graphics/material/script.mdx
diff --git a/docs/en/graphics/mesh/bufferMesh.md b/docs/en/graphics/mesh/bufferMesh.mdx
similarity index 96%
rename from docs/en/graphics/mesh/bufferMesh.md
rename to docs/en/graphics/mesh/bufferMesh.mdx
index cd1cce9f37..28414f7fba 100644
--- a/docs/en/graphics/mesh/bufferMesh.md
+++ b/docs/en/graphics/mesh/bufferMesh.mdx
@@ -12,7 +12,7 @@ label: Graphics/Mesh
Let's first overview the diagram of `BufferMesh`.
-
+
`BufferMesh` has three core elements:
@@ -30,7 +30,7 @@ Here are some common use cases of [MeshRenderer](/apis/core/#MeshRenderer) and [
### Interleaved Vertex Buffer
-
+
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.
@@ -65,7 +65,7 @@ renderer.mesh = mesh;
### Independent Vertex Buffer
-
+
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.
@@ -109,7 +109,7 @@ renderer.mesh = mesh;
### Instance Rendering
-
+
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.
diff --git a/docs/en/graphics/mesh/mesh.md b/docs/en/graphics/mesh/mesh.mdx
similarity index 94%
rename from docs/en/graphics/mesh/mesh.md
rename to docs/en/graphics/mesh/mesh.mdx
index ff021fa119..4d75da212f 100644
--- a/docs/en/graphics/mesh/mesh.md
+++ b/docs/en/graphics/mesh/mesh.mdx
@@ -20,7 +20,7 @@ Mesh assets generally come from:
When you need to set a mesh for the mesh renderer, you only need to select the corresponding mesh asset.
-
+
Correspondingly, in the script, the use of the mesh will be more free, and the complexity will also be higher. First, let's look at
diff --git a/docs/en/graphics/mesh/modelMesh.md b/docs/en/graphics/mesh/modelMesh.mdx
similarity index 95%
rename from docs/en/graphics/mesh/modelMesh.md
rename to docs/en/graphics/mesh/modelMesh.mdx
index 90ac1f5109..f6ffacd145 100644
--- a/docs/en/graphics/mesh/modelMesh.md
+++ b/docs/en/graphics/mesh/modelMesh.mdx
@@ -8,7 +8,7 @@ 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.
-
+
## Code Example
@@ -85,7 +85,7 @@ The APIs for setting high-level data are:
Compared to high-level data, setting data through low-level interfaces allows for free manipulation of vertex buffer data, which is not only flexible but may also bring performance improvements. However, it is necessary to understand the relationship between Vertex Buffer and Vertex Element, as shown in the following diagram:
-
+
```typescript
const pos = new Float32Array([1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0]);
@@ -134,7 +134,7 @@ If you need to continuously modify the `ModelMesh` data, set the `releaseData` p
modelMesh.uploadData(false);
```
-
+
### **Reading Advanced Data**
@@ -173,10 +173,10 @@ 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:**
-
+
**Custom BlendShape Animation in Script Example:**
-
+
### Detailed Steps
diff --git a/docs/en/graphics/mesh/primitiveMesh.md b/docs/en/graphics/mesh/primitiveMesh.mdx
similarity index 87%
rename from docs/en/graphics/mesh/primitiveMesh.md
rename to docs/en/graphics/mesh/primitiveMesh.mdx
index d2217d0edb..36d72853f0 100644
--- a/docs/en/graphics/mesh/primitiveMesh.md
+++ b/docs/en/graphics/mesh/primitiveMesh.mdx
@@ -12,19 +12,19 @@ label: Graphics/Mesh
The editor has built-in basic geometries such as `Cube`, `Sphere`, and `Cylinder`, which can be directly placed in the model by clicking `+` on the left node tree:
-
+
Of course, we can also click `1` in the component panel to add the `Mesh Renderer` component, and click `2` to bind the desired basic geometry:
-
+
Built-in geometries not meeting your needs? You can create a `Mesh` asset in the **[Asset Panel](/en/docs/assets/interface)** by **right-clicking** → **Create** → **PrimitiveMesh**, and adjust the parameters of the `Mesh` to meet your requirements.
-
+
## Script Usage
-
+
The currently provided geometries are as follows:
diff --git a/docs/en/graphics/model/assets.md b/docs/en/graphics/model/assets.mdx
similarity index 71%
rename from docs/en/graphics/model/assets.md
rename to docs/en/graphics/model/assets.mdx
index 5b7bd3d1cf..cb78ac3044 100644
--- a/docs/en/graphics/model/assets.md
+++ b/docs/en/graphics/model/assets.mdx
@@ -8,7 +8,7 @@ label: Graphics/Model
After the model is imported, the imported model asset will be added to the **[Asset Panel](/en/docs/assets/interface)**. By clicking on the asset thumbnail, you can see the basic information of this model.
-
+
| Area | Function | Explanation |
| :--------- | :--------------- | :----------------------------------------------------------------- |
@@ -25,13 +25,13 @@ After the model is imported, the imported model asset will be added to the **[As
Hover the mouse over the model asset thumbnail and click the triangle button that appears on the right. The mesh, textures, animations, materials, and other sub-asset information contained in the model asset will be displayed in the resource panel.
-
+
### Mesh Sub-assets
Click on the mesh sub-asset thumbnail to see the basic information of the mesh as follows:
-
+
| Area | Function | Explanation |
| :------- | :------------- | :------------------------ |
@@ -42,20 +42,20 @@ Click on the mesh sub-asset thumbnail to see the basic information of the mesh a
The only difference between the basic information of texture sub-assets and [texture](/en/docs/graphics/texture/texture/) assets is that the texture information is mostly read-only.
-
+
### Material Sub-assets
Similarly, [material](/en/docs/graphics/material/material/) sub-assets work the same way:
-
+
In general, users do not need to perform any operations on the materials that come with the model; however, in certain scenarios, developers may want to manually tweak the materials, such as changing the color. In this case, we can duplicate the original material by clicking **duplicate & remap**, and then modify it based on the original material parameters:
-
+
### Animation Sub-assets
Animation sub-assets appear in the model assets in the form of [animation clips](/en/docs/animation/clip), and they are also **read-only**.
-
+
diff --git a/docs/en/graphics/model/glTF.md b/docs/en/graphics/model/glTF.mdx
similarity index 97%
rename from docs/en/graphics/model/glTF.md
rename to docs/en/graphics/model/glTF.mdx
index d1e3abbd06..1e966418f7 100644
--- a/docs/en/graphics/model/glTF.md
+++ b/docs/en/graphics/model/glTF.mdx
@@ -12,7 +12,7 @@ label: Graphics/Model
## Ecosystem
-
+
## Exported Products
@@ -35,7 +35,7 @@ Both types of products are supported in Galacean. The choice of export type can
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**.
-
+
### Plugin Support
diff --git a/docs/en/graphics/model/importGlTF.md b/docs/en/graphics/model/importGlTF.mdx
similarity index 72%
rename from docs/en/graphics/model/importGlTF.md
rename to docs/en/graphics/model/importGlTF.mdx
index 9198dddd39..f8cc32f2c7 100644
--- a/docs/en/graphics/model/importGlTF.md
+++ b/docs/en/graphics/model/importGlTF.mdx
@@ -20,19 +20,18 @@ It should be noted that the editor will convert FBX to a [glTF format](/en/docs/
Drag the model file, or the compressed **.zip** file into the asset panel:
-
+
## Button Upload
Click the upper right corner **Asset Panel** -> **GLTF/GLB/FBX**
-
+
## Right-click Upload
Follow **Asset Panel** -> **Right-click** -> **Upload** -> **GLTF/GLB/FBX**
-
+
After the import is complete, the imported model assets will be added to the **[Asset Panel](/en/docs/assets/interface)**. Let's [see what the model assets contain](/en/docs/graphics/model/assets/).
diff --git a/docs/en/graphics/model/model.md b/docs/en/graphics/model/model.mdx
similarity index 100%
rename from docs/en/graphics/model/model.md
rename to docs/en/graphics/model/model.mdx
diff --git a/docs/en/graphics/model/opt.md b/docs/en/graphics/model/opt.mdx
similarity index 84%
rename from docs/en/graphics/model/opt.md
rename to docs/en/graphics/model/opt.mdx
index f9bc071598..0eee2deb50 100644
--- a/docs/en/graphics/model/opt.md
+++ b/docs/en/graphics/model/opt.mdx
@@ -19,6 +19,6 @@ In the editor, we can optimize the model in the following ways:
1. Use [Quantize](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_mesh_quantization/README.md) to compress mesh data. When exporting the project, check the GlTF Quantize option to quantize and compress the mesh.
1. Use [Meshopt](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/EXT_meshopt_compression/README.md) to further compress mesh data.
-
+
Compression may affect the precision of the model mesh, but in most cases, it is difficult to distinguish with the naked eye.
diff --git a/docs/en/graphics/model/restoration.md b/docs/en/graphics/model/restoration.mdx
similarity index 79%
rename from docs/en/graphics/model/restoration.md
rename to docs/en/graphics/model/restoration.mdx
index 6b568a4925..5ed615e4e6 100644
--- a/docs/en/graphics/model/restoration.md
+++ b/docs/en/graphics/model/restoration.mdx
@@ -6,7 +6,7 @@ group: Model
label: Graphics/Model
---
-
+
## Background
@@ -46,25 +46,25 @@ Currently, the most widely used algorithm in real-time rendering is the PBR algo
It is worth mentioning that although different algorithms can cause some visual differences, their physical principles are consistent. For example, the higher the metallicity, the stronger the environmental reflection and the weaker the diffuse reflection; the higher the roughness, the more blurred the environmental reflection, as shown below:
-
+
### Differences in Lighting
Like the real world, 3D scenes can also add [direct and ambient light](/en/docs/graphics/light/light/). By default, Galacean scenes have **no** light sources, only a blue-tinted [solid color diffuse](/apis/core/#AmbientLight-diffuseSolidColor), as shown in the first image on the left; whereas many modeling software come with built-in light sources:
-
+
Ambient light based on [cube textures](/en/docs/graphics/texture/cube) enables IBL mode, requiring an HDRI map to simulate the surrounding environment, which can be [downloaded online](https://polyhaven.com/hdris). By default, Galacean scenes do not have an HDRI map bound, whereas many modeling software come with a visually appealing surrounding environment:
-
+
### Differences in glTF Support
The connection channel between the Galacean engine and modeling software is the [glTF file](/en/docs/graphics/model/glTF/). glTF supports standard [PBR properties](https://www.khronos.org/registry/glTF/specs/2.0/glTF-2.0.html#reference-material-pbrmetallicroughness) and [general material properties](https://www.khronos.org/registry/glTF/specs/2.0/glTF-2.0.html#reference-material), and supports plugins like [ClearCoat](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_clearcoat), as shown below. Therefore, as long as the operations in the modeling software can be exported to glTF, the engine can load them through the loader. However, those additional operations, such as some parameters of [vRay](https://www.chaosgroup.com/cn/vray/3ds-max) materials, cannot be exported to glTF files.
-
+
-
+
## Solution
@@ -76,11 +76,11 @@ The primary prerequisite for ensuring visual fidelity is to debug the material i
As mentioned earlier, the engine does not come with direct light by default. The simplest way to maintain fidelity is to delete the lights in the modeling software, ensuring that both the modeling software and the Galacean engine only have ambient light (best performance).
-
+
If some scenes indeed require adding direct light, please ensure that the modeling software can export the [glTF light plugin](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_lights_punctual) (Google search keyword "\***\* modeling software KHR_lights_punctual" ), such as selecting **Punctual Lights** when exporting glTF from Blender.
-
+
If the modeling software does not support exporting this lighting plugin, you can transfer it to Blender for export, or verbally describe the lighting data to the developers.
@@ -88,13 +88,13 @@ If the modeling software does not support exporting this lighting plugin, you ca
As mentioned earlier, the engine does not come with an environment map, i.e., HDRI map, by default, but modeling software usually does, such as Blender:
-
+
We can first [download](https://polyhaven.com/hdris) our favorite HDRI images from the internet, then debug them in the modeling software. Once satisfied, deliver the final HDRI to the developers (since glTF does not support exporting HDR).
Binding an environment map in the modeling software is very simple. You can Google search the keyword "\*\*\* modeling software environment IBL". Taking Blender as an example:
-
+
### Real-time Rendering Solution
@@ -106,19 +106,19 @@ After unifying the lighting, we can choose the rendering solution. If you want t
As mentioned earlier, Galacean PBR uses the **Cook-Torrance BRDF** reflectance equation, which is relatively close to the Principled BSDF - GGX algorithm in Blender:
-
+
You can refer to the [Blender official tutorial](https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#) to debug the material parameters that can be exported to glTF. The same applies to other modeling software; you can Google the keyword “\*\*\* modeling software export glTF”.
Another relatively simple reference method is to import the glTF demo in the modeling software ([click to download](https://gw.alipayobjects.com/os/bmw-prod/85faf9f8-8030-45b2-8ba3-09a61b3db0c3.glb)). The PBR properties in this demo are quite comprehensive and can be used as a reference for debugging. For example, after importing into Blender, the material panel displays as follows:
-
+
- Export Verification
After exporting the glTF, you can drag the file into the [glTF Viewer](https://galacean.antgroup.com/engine/gltf-viewer) to check whether the corresponding colors, textures, parameters, etc., are correct:
-
+
### Baking Solution
diff --git a/docs/en/graphics/model/use.md b/docs/en/graphics/model/use.mdx
similarity index 90%
rename from docs/en/graphics/model/use.md
rename to docs/en/graphics/model/use.mdx
index 82965046b3..9d35ddb6b8 100644
--- a/docs/en/graphics/model/use.md
+++ b/docs/en/graphics/model/use.mdx
@@ -15,7 +15,7 @@ In the editor, **models placed in the scene** will be preloaded with the scene f
> The editor cannot directly adjust the scale property of the model node. Therefore, in most cases, you need to drag the model node under an entity node and then adjust the scale property of the entity node.
-
+
In this case, you only need to find the specific node in the scene at runtime to get the corresponding model object.
@@ -43,7 +43,7 @@ engine.resourceManager
In the editor, you can directly get the URL of the model asset (**[Assets Panel](/en/docs/assets/interface)** -> **Right-click the model asset thumbnail** -> **Copy file info / Copy relative path**):
-
+
For models not imported into the editor, the corresponding URL is the path where the model assets are stored.
@@ -63,13 +63,13 @@ this.engine.resourceManager
}
```
-
+
## Using Models
The loaded model object will return a root node containing rendering information and animation information. Its usage is no different from ordinary nodes.
-
+
### 1. Select Scene Root Node
diff --git a/docs/en/graphics/particle/renderer-animation-module.md b/docs/en/graphics/particle/renderer-animation-module.mdx
similarity index 92%
rename from docs/en/graphics/particle/renderer-animation-module.md
rename to docs/en/graphics/particle/renderer-animation-module.mdx
index 25cfb8ca77..2c2b1b81c0 100644
--- a/docs/en/graphics/particle/renderer-animation-module.md
+++ b/docs/en/graphics/particle/renderer-animation-module.mdx
@@ -8,7 +8,7 @@ label: Graphics/Particle
[`TextureSheetAnimationModule`](/apis/core/#TextureSheetAnimationModule) inherits from `ParticleGeneratorModule` and is used to control the texture sheet animation of the particle system.
-
+
## Properties
diff --git a/docs/en/graphics/particle/renderer-color-module.md b/docs/en/graphics/particle/renderer-color-module.mdx
similarity index 73%
rename from docs/en/graphics/particle/renderer-color-module.md
rename to docs/en/graphics/particle/renderer-color-module.mdx
index b1011474b9..eb3cdccd09 100644
--- a/docs/en/graphics/particle/renderer-color-module.md
+++ b/docs/en/graphics/particle/renderer-color-module.mdx
@@ -8,7 +8,7 @@ label: Graphics/Particle
[`ColorOverLifetimeModule`](/apis/core/#ColorOverLifetimeModule) inherits from `ParticleGeneratorModule` and is used to handle color changes during the lifecycle of a particle system.
-
+
## Properties
@@ -20,4 +20,4 @@ label: Graphics/Particle
For the [ParticleCompositeGradient](/apis/core/#ParticleCompositeGradient) object, the editor has a built-in gradient editor. The top of the gradient bar represents color keys, and the bottom represents alpha value keys. Each key's position on the gradient bar represents its time. Double-clicking an existing key can create a new key, and long-pressing a key and dragging it downwards can delete the key.
-
+
diff --git a/docs/en/graphics/particle/renderer-emission-module.md b/docs/en/graphics/particle/renderer-emission-module.mdx
similarity index 95%
rename from docs/en/graphics/particle/renderer-emission-module.md
rename to docs/en/graphics/particle/renderer-emission-module.mdx
index 96fc64b96a..8d9c56539b 100644
--- a/docs/en/graphics/particle/renderer-emission-module.md
+++ b/docs/en/graphics/particle/renderer-emission-module.mdx
@@ -8,7 +8,7 @@ label: Graphics/Particle
[EmissionModule](/apis/core/#EmissionModule) is the emission module of `ParticleGeneratorModule`. This module is used to handle the emission behavior of the particle system, including particle emission rate, emission shape, and burst behavior.
-
+
## Properties
diff --git a/docs/en/graphics/particle/renderer-main-module.md b/docs/en/graphics/particle/renderer-main-module.mdx
similarity index 96%
rename from docs/en/graphics/particle/renderer-main-module.md
rename to docs/en/graphics/particle/renderer-main-module.mdx
index 5068bf276a..88e3a17e90 100644
--- a/docs/en/graphics/particle/renderer-main-module.md
+++ b/docs/en/graphics/particle/renderer-main-module.mdx
@@ -8,11 +8,11 @@ label: Graphics/Particle
[MainModule](/apis/core/#MainModule) is the main module of `ParticleGeneratorModule`, containing the most basic particle generation parameters. These properties are mostly used to control the initial state of newly created particles.
-
+
## Properties
-
+
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.
diff --git a/docs/en/graphics/particle/renderer-rotation-module.md b/docs/en/graphics/particle/renderer-rotation-module.mdx
similarity index 90%
rename from docs/en/graphics/particle/renderer-rotation-module.md
rename to docs/en/graphics/particle/renderer-rotation-module.mdx
index d58216a8f3..f58645870e 100644
--- a/docs/en/graphics/particle/renderer-rotation-module.md
+++ b/docs/en/graphics/particle/renderer-rotation-module.mdx
@@ -8,7 +8,7 @@ label: Graphics/Particle
[`RotationOverLifetimeModule`](/apis/core/#RotationOverLifetimeModule) inherits from `ParticleGeneratorModule` and is used to control the rotation changes of the particle system over its lifetime.
-
+
## Properties
diff --git a/docs/en/graphics/particle/renderer-size-module.md b/docs/en/graphics/particle/renderer-size-module.mdx
similarity index 87%
rename from docs/en/graphics/particle/renderer-size-module.md
rename to docs/en/graphics/particle/renderer-size-module.mdx
index 6b8be5a33f..183f5fb188 100644
--- a/docs/en/graphics/particle/renderer-size-module.md
+++ b/docs/en/graphics/particle/renderer-size-module.mdx
@@ -8,7 +8,7 @@ label: Graphics/Particle
[`SizeOverLifetimeModule`](/apis/core/#SizeOverLifetimeModule) is a subclass of `ParticleGeneratorModule` used to handle size changes over the lifetime of a particle system.
-
+
## Properties
@@ -24,7 +24,7 @@ label: Graphics/Particle
For the [ParticleCompositeCurve](/apis/core/#ParticleCompositeCurve) object, a polyline editor is built into the editor for visual curve adjustments.
-
+
Or in code:
diff --git a/docs/en/graphics/particle/renderer-velocity-module.md b/docs/en/graphics/particle/renderer-velocity-module.mdx
similarity index 90%
rename from docs/en/graphics/particle/renderer-velocity-module.md
rename to docs/en/graphics/particle/renderer-velocity-module.mdx
index 6da663d949..dcf3bf03af 100644
--- a/docs/en/graphics/particle/renderer-velocity-module.md
+++ b/docs/en/graphics/particle/renderer-velocity-module.mdx
@@ -10,7 +10,7 @@ label: Graphics/Particle
[`VelocityOverLifetimeModule`](/apis/core/#VelocityOverLifetimeModule) inherits from `ParticleGeneratorModule` and is used to control the velocity changes of a particle system over its lifetime.
-
+
## Properties
diff --git a/docs/en/graphics/particle/renderer.md b/docs/en/graphics/particle/renderer.mdx
similarity index 84%
rename from docs/en/graphics/particle/renderer.md
rename to docs/en/graphics/particle/renderer.mdx
index e2bde23116..79e5ef4850 100644
--- a/docs/en/graphics/particle/renderer.md
+++ b/docs/en/graphics/particle/renderer.mdx
@@ -8,17 +8,17 @@ label: Graphics/Particle
The particle (Particle Renderer) [ParticleRenderer](/apis/core/#ParticleRenderer) of the Galacean Engine is a commonly used rendering component with rich properties. By adjusting various property values, you can achieve colorful particle effects.
-
+
## Components
The particle component can be mounted on an activated Entity in the scene through the shortcut at the top of the hierarchy panel or by adding a component in the inspector panel.
-
+
After adding, you can view the particle properties in the inspector panel. The particle panel at the bottom left corner of the view window can control the playback of particle effects in the view window.
-
+
You can also mount the particle component in the script.
@@ -35,7 +35,7 @@ let particleRenderer = particleEntity.addComponent(ParticleRenderer);
In the editor, create it by adding material - selecting particle material. After editing, go back to the particle inspector panel to select and use the material.
-
+
Or in the script:
@@ -56,7 +56,7 @@ The particle panel that appears when an entity with a particle component is sele
It should be noted that adjustments to particle playback on this panel are only for previewing in the view window and do not change the properties of the particle component. If you need to change the playback-related properties of the particle, you need to adjust them in the inspector panel.
-
+
| Preview Playback Options | Description |
| ------------------------ | ------------------------------------------------ |
@@ -83,7 +83,7 @@ The [generator](/apis/core/#ParticleGenerator) property of `ParticleRenderer` is
## Other Parameters
-
+
| Property | Description |
| --- | --- |
diff --git a/docs/en/graphics/renderer/meshRenderer.md b/docs/en/graphics/renderer/meshRenderer.mdx
similarity index 93%
rename from docs/en/graphics/renderer/meshRenderer.md
rename to docs/en/graphics/renderer/meshRenderer.mdx
index 401fd326eb..e92e481936 100644
--- a/docs/en/graphics/renderer/meshRenderer.md
+++ b/docs/en/graphics/renderer/meshRenderer.mdx
@@ -8,7 +8,7 @@ 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.
-
+
## Usage
@@ -33,7 +33,7 @@ cube.setMaterial(new BlinnPhongMaterial(engine));
In the editor, you can easily set the properties of the mesh renderer.
-
+
| Setting | Explanation |
| :---------------- | :-------------------------------------------------------- |
diff --git a/docs/en/graphics/renderer/order.md b/docs/en/graphics/renderer/order.mdx
similarity index 93%
rename from docs/en/graphics/renderer/order.md
rename to docs/en/graphics/renderer/order.mdx
index 3b97394ec8..2bc1868ccf 100644
--- a/docs/en/graphics/renderer/order.md
+++ b/docs/en/graphics/renderer/order.mdx
@@ -48,7 +48,7 @@ The engine provides the `priority` property for the renderer to modify the rende
The calculation method of the distance from the renderer component bounding box to the camera depends on the [camera](/en/docs/graphics/camera/camera/) type. In an orthographic camera, it is the distance from the center of the renderer bounding box to the camera along the camera view direction. In a perspective camera, it is the direct distance from the center of the renderer bounding box to the camera position.
-
+
> It should be noted that in different render queues, the rules for the impact of distance on render order are different. In the opaque render queue and alpha test render queue, the render order is **from near to far**, while in the transparent render queue, the render order is **from far to near**.
diff --git a/docs/en/graphics/renderer/renderer.md b/docs/en/graphics/renderer/renderer.mdx
similarity index 98%
rename from docs/en/graphics/renderer/renderer.md
rename to docs/en/graphics/renderer/renderer.mdx
index f46590a77a..6c71b7f265 100644
--- a/docs/en/graphics/renderer/renderer.md
+++ b/docs/en/graphics/renderer/renderer.mdx
@@ -50,7 +50,7 @@ console.log("isCulled", renderer.isCulled);
Below shows how to get the overall bounding box of multiple `Renderers`:
-
+
## Methods
diff --git a/docs/en/graphics/renderer/skinnedMeshRenderer.md b/docs/en/graphics/renderer/skinnedMeshRenderer.mdx
similarity index 90%
rename from docs/en/graphics/renderer/skinnedMeshRenderer.md
rename to docs/en/graphics/renderer/skinnedMeshRenderer.mdx
index 314472a2ad..c3976bbc31 100644
--- a/docs/en/graphics/renderer/skinnedMeshRenderer.md
+++ b/docs/en/graphics/renderer/skinnedMeshRenderer.mdx
@@ -23,9 +23,9 @@ In models exported from the art workflow, all bone and BlendShape information is
## Skeletal Animation
-
+
## BlendShape
-
+
diff --git a/docs/en/graphics/shader/builtins/blinnPhong.md b/docs/en/graphics/shader/builtins/blinnPhong.mdx
similarity index 92%
rename from docs/en/graphics/shader/builtins/blinnPhong.md
rename to docs/en/graphics/shader/builtins/blinnPhong.mdx
index a03f089e32..5a14f844b1 100644
--- a/docs/en/graphics/shader/builtins/blinnPhong.md
+++ b/docs/en/graphics/shader/builtins/blinnPhong.mdx
@@ -4,11 +4,11 @@ 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.
-
+
## Editor Usage
-
+
## Parameter Introduction
diff --git a/docs/en/graphics/shader/builtins/unlit.md b/docs/en/graphics/shader/builtins/unlit.mdx
similarity index 64%
rename from docs/en/graphics/shader/builtins/unlit.md
rename to docs/en/graphics/shader/builtins/unlit.mdx
index 408e1b329a..6cbd04d54e 100644
--- a/docs/en/graphics/shader/builtins/unlit.md
+++ b/docs/en/graphics/shader/builtins/unlit.mdx
@@ -4,11 +4,11 @@ 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.
-
+
## Editor Usage
-
+
## Parameter Introduction
@@ -24,7 +24,7 @@ If you need to use the material through a script, you can go to the [material us
As introduced in the [baking tutorial](/en/docs/art/bake-blender), if we have already created the baked map and want a **convenient material** where the color is only influenced by the baked texture, without adding lights, debugging normals, or adjusting advanced properties like metallic roughness, then you can try Galacean's [UnlitMaterial](/apis/core/#UnlitMaterial). glTF has a dedicated [KHR_materials_unlit](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit) plugin, which Galacean will parse to generate Unlit material.
-
+
Test model: [TREX.zip](https://www.yuque.com/attachments/yuque/0/2021/zip/381718/1623651429048-7f6a3610-d5cb-4a73-97f5-0d37d0c63b2c.zip?_lake_card=%7B%22src%22%3A%22https%3A%2F%2Fwww.yuque.com%2Fattachments%2Fyuque%2F0%2F2021%2Fzip%2F381718%2F1623651429048-7f6a3610-d5cb-4a73-97f5-0d37d0c63b2c.zip%22%2C%22name%22%3A%22TREX.zip%22%2C%22size%22%3A499161%2C%22type%22%3A%22application%2Fx-zip-compressed%22%2C%22ext%22%3A%22zip%22%2C%22status%22%3A%22done%22%2C%22taskId%22%3A%22u458bcbec-d647-4328-8036-3d5eb12860f%22%2C%22taskType%22%3A%22upload%22%2C%22id%22%3A%22ua8a5baad%22%2C%22card%22%3A%22file%22%7D)
@@ -32,34 +32,34 @@ Next, we will introduce how to export a glTF file with the unlit plugin using Bl
1. Import the model
-
+
2. Modify Shader
The default shader type is BSDF. We need to change the shader type in the surface material properties to **Background**.
-
+
-
+
3. Add Baked Texture
Add the baked texture and connect Color and Shader together.
-
+
-
+
-
+
4. Export glTF
If the preview is normal, export the glTF.
-
+
-
+
Drag the exported glTF file into the editor or [glTF Viewer](https://galacean.antgroup.com/engine/gltf-viewer). If the material type is **UnlitMaterial**, it means that the [KHR_materials_unlit](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit) extension has been exported, and Galacean has parsed it into an Unlit material.
-
+
diff --git a/docs/en/graphics/shader/custom.md b/docs/en/graphics/shader/custom.mdx
similarity index 98%
rename from docs/en/graphics/shader/custom.md
rename to docs/en/graphics/shader/custom.mdx
index 6f7fdd4076..7dbe048096 100644
--- a/docs/en/graphics/shader/custom.md
+++ b/docs/en/graphics/shader/custom.mdx
@@ -4,7 +4,7 @@ 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).
-
+
## Creating Shaders
@@ -111,7 +111,7 @@ The engine has automatically uploaded some commonly used variables, which users
In addition to built-in variables, we can upload any custom-named variables in the shader. All we need to do is use the correct interface according to the shader data type. All upload interfaces are stored in [ShaderData](/apis/core/#ShaderData), and the shaderData instance objects are stored in the engine's four main classes: [Scene](/apis/core/#Scene), [Camera](/apis/core/#Camera), [Renderer](/apis/core/#Renderer), and [Material](/apis/core/#Material). We just need to call the interfaces on these shaderData to upload variables, and the engine will automatically assemble these data at the underlying level and perform optimizations such as redundancy checks.
-
+
### Benefits of Separating Shader Data
diff --git a/docs/en/graphics/shader/shaderLab/intro.md b/docs/en/graphics/shader/shaderLab/intro.mdx
similarity index 97%
rename from docs/en/graphics/shader/shaderLab/intro.md
rename to docs/en/graphics/shader/shaderLab/intro.mdx
index 7092d3ed19..649d72dcbc 100644
--- a/docs/en/graphics/shader/shaderLab/intro.md
+++ b/docs/en/graphics/shader/shaderLab/intro.mdx
@@ -15,4 +15,4 @@ flowchart LR
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.
-
+
diff --git a/docs/en/graphics/shader/shaderLab/usage.md b/docs/en/graphics/shader/shaderLab/usage.mdx
similarity index 61%
rename from docs/en/graphics/shader/shaderLab/usage.md
rename to docs/en/graphics/shader/shaderLab/usage.mdx
index 7406c37165..9ecbc803a3 100644
--- a/docs/en/graphics/shader/shaderLab/usage.md
+++ b/docs/en/graphics/shader/shaderLab/usage.mdx
@@ -4,14 +4,14 @@ title: "Usage"
With custom shader assets written using `ShaderLab`, we can implement user-defined materials by binding the shader to newly created materials.
-
+
- `ShaderLab` Reflecting Material Properties
If we write the `material property definition` module in `ShaderLab`, the properties defined in the module will be exposed in the Inspector panel of the material asset bound to the Shader.
-
+
## An Example of Implementing Planar Shadows Using Multi-Pass Technology
-
+
diff --git a/docs/en/graphics/texture/2d.md b/docs/en/graphics/texture/2d.mdx
similarity index 86%
rename from docs/en/graphics/texture/2d.md
rename to docs/en/graphics/texture/2d.mdx
index 19b6733c89..943b36a0ee 100644
--- a/docs/en/graphics/texture/2d.md
+++ b/docs/en/graphics/texture/2d.mdx
@@ -1,8 +1,8 @@
---
order: 1
-title: 2D 纹理
-type: 图形
-group: 纹理
+title: 2D Texture
+type: Graphics
+group: Texture
label: Graphics/Texture
---
@@ -12,7 +12,7 @@ label: Graphics/Texture
In the editor, you can easily import a 2D texture by following the path **[Asset Panel](/en/docs/assets/interface)** -> **Right-click Upload** -> **Select Texture2D** -> **Choose the corresponding texture** -> **2D texture asset creation complete**.
-
+
Similarly, in the script, you can load an image through [ResourceManager](/apis/core/#ResourceManager) to get the corresponding 2D texture:
@@ -55,7 +55,7 @@ texture.setImageSource(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. The sample code is as follows:
-
+
### setPixelBuffer
@@ -85,7 +85,7 @@ texture.getPixelBuffer(0, 0, width, height, 0, data);
Assigning the texture to the corresponding property of the material ball can enable different rendering functions. For example, adding a base color texture can determine the basic tone of the model. In the editor, you only need to select the corresponding texture in the corresponding property.
-
+
Similarly, in the script, you can set it like this:
@@ -98,7 +98,7 @@ material.baseTexture = texture;
## Color Expansion
-
+
To solve the problem of black edges appearing at the abrupt changes in Alpha values in images with transparent pixels, the editor has a built-in color expansion function. This function removes the black edges of the image by rewriting the RGB values of all transparent pixels in the image to the RGB values of the nearest non-fully transparent pixels.
@@ -109,6 +109,6 @@ To solve the problem of black edges appearing at the abrupt changes in Alpha val
## Export Configuration
-
+
The [Project Release](/en/docs/platform/platform) document explains the **global configuration** for texture export in detail. If the Overwrite option is selected here, this asset will follow the **custom configuration** instead of the **global configuration** during export.
diff --git a/docs/en/graphics/texture/compression.md b/docs/en/graphics/texture/compression.mdx
similarity index 88%
rename from docs/en/graphics/texture/compression.md
rename to docs/en/graphics/texture/compression.mdx
index c75635608e..b78dc27f2c 100644
--- a/docs/en/graphics/texture/compression.md
+++ b/docs/en/graphics/texture/compression.mdx
@@ -23,7 +23,7 @@ engine.resourceManager.load({
})
```
-
+
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.
@@ -36,7 +36,7 @@ KTX2 can be generated using:
When packaging the project, the editor can configure options to generate KTX2. Refer to the '[Project Release](/en/docs/platform/platform/)' document. The project export is a global configuration, and different compression formats can be configured independently for different texture resources. Check overwrite in the texture panel of the editor to override the global configuration:
-
+
- ETC1S has a small size and minimal memory usage but lower quality, suitable for albedo, specular, and other maps.
- UASTC has a larger size and higher quality, suitable for normal maps and similar textures.
diff --git a/docs/en/graphics/texture/cube.md b/docs/en/graphics/texture/cube.mdx
similarity index 81%
rename from docs/en/graphics/texture/cube.md
rename to docs/en/graphics/texture/cube.mdx
index ed65606af6..623b66cdbe 100644
--- a/docs/en/graphics/texture/cube.md
+++ b/docs/en/graphics/texture/cube.mdx
@@ -8,13 +8,13 @@ label: Graphics/Texture
The difference between a cube texture ([TextureCube](/apis/core/#TextureCube)) and a 2D texture is that it has 6 faces, which means a cube texture is composed of 6 2D textures.
-
+
-
+
The underlying sampling method of cube textures is slightly different from that of 2D textures. Textures use two-dimensional coordinates for sampling, while cube textures use three-dimensional coordinates, i.e., _direction vectors_ for sampling. For example, using an orange direction vector to sample a texture value from a cube texture would look like this:
-
+
Because of this sampling characteristic, cube textures can be used to achieve effects such as skyboxes and environment reflections.
@@ -24,7 +24,7 @@ Because of this sampling characteristic, cube textures can be used to achieve ef
After preparing the HDR, follow the path **[Asset Panel](/en/docs/assets/interface)** -> **Right-click Upload** -> **Select TextureCube(.hdr)** -> **Choose the corresponding HDR map** -> **Cube texture asset creation completed**.
-
+
Similarly, in the script, you can also get the corresponding cube texture by loading six textures in the correct order.
diff --git a/docs/en/graphics/texture/rtt.md b/docs/en/graphics/texture/rtt.mdx
similarity index 97%
rename from docs/en/graphics/texture/rtt.md
rename to docs/en/graphics/texture/rtt.mdx
index b02f026729..72ff24457f 100644
--- a/docs/en/graphics/texture/rtt.md
+++ b/docs/en/graphics/texture/rtt.mdx
@@ -51,4 +51,4 @@ class switchRTScript extends Script {
cameraEntity.addComponent(switchRTScript);
```
-
+
diff --git a/docs/en/graphics/texture/texture.md b/docs/en/graphics/texture/texture.mdx
similarity index 90%
rename from docs/en/graphics/texture/texture.md
rename to docs/en/graphics/texture/texture.mdx
index 523c2459e5..f9dca4d1c9 100644
--- a/docs/en/graphics/texture/texture.md
+++ b/docs/en/graphics/texture/texture.mdx
@@ -34,14 +34,14 @@ This article will mainly introduce:
Texture space is determined by the shape of the texture. 2D textures require 2D space vectors for texture sampling, while cube textures require 3D space vectors for texture sampling.
-
-
-
-
-
-
-3. Return to the shader view, select the model layer and all materials under the layer, leave the baking parameters unchanged, and click Bake. There is a progress bar below, just wait patiently.
-
-
-
-4. After baking is complete, the image texture we created on the left has been baked. Press **alt+s** to quickly save this baked texture.
-
-
-
-### Exporting glTF File
-
-1. Delete all materials of the above model, create a background material, and assign it.
-
-
-
-
-
-2. Drag the house's baked image into the node view, and connect the color.
-
-
-
-3. Export in glTF format, make sure both layers' eyes and camera are enabled.
-
-
-
-4. Preview the effect in the [glTF Viewer](https://galacean.antgroup.com/#/gltf-viewer).
-
-
-
-Hope this helps everyone~
diff --git a/docs/en/art/bake-blender.mdx b/docs/en/art/bake-blender.mdx
new file mode 100644
index 0000000000..1d3e3b60eb
--- /dev/null
+++ b/docs/en/art/bake-blender.mdx
@@ -0,0 +1,86 @@
+---
+order: 0
+title: Blender Baking
+type: Art
+label: Art
+---
+
+> **_Special thanks to Monk and UU Efficiency Team for providing this tutorial._**
+
+In the process of actual model production, artists may use a lot of materials and textures to achieve better visual effects. However, there may be significant rendering discrepancies when exporting, and sometimes some effects may be lost.
+
+We have optimized the process of maximizing the restoration of 3D model rendering as much as possible, hoping to help everyone.
+
+### Blender Baking
+
+1. Select the model. Currently, this building is composed of many different models, and we need to merge them into one model.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-导出的切片时间轴必须一致，可以通过右下角或者输出属性两个地方进行配置：
-
-
-
-
-
-3. 因为时间轴必须一致，因此需要将刚才切的动画切片，都移到起始帧，拖拽即可：
-
-
-
-
-
-4. 至此，动画切片已经准备完成，导出 glTF 或者 FBX ，接入 Galacean 引擎即可：
-
-
-
-
-
-Unity 也可以导出动画切片，但是效率比较低。
-
-### Unity
-
-插件：[AntG-Unity-Plugin.unitypackage.zip](https://www.yuque.com/attachments/yuque/0/2021/zip/381718/1622541632701-4f33e890-5295-4430-8798-d979b8df504f.zip?_lake_card=%7B%22src%22%3A%22https%3A%2F%2Fwww.yuque.com%2Fattachments%2Fyuque%2F0%2F2021%2Fzip%2F381718%2F1622541632701-4f33e890-5295-4430-8798-d979b8df504f.zip%22%2C%22name%22%3A%22AntG-Unity-Plugin.unitypackage.zip%22%2C%22size%22%3A490677%2C%22type%22%3A%22application%2Fzip%22%2C%22ext%22%3A%22zip%22%2C%22status%22%3A%22done%22%2C%22taskId%22%3A%22u4c98eaae-9ce5-43c7-ae94-c26f4ce0c0f%22%2C%22taskType%22%3A%22upload%22%2C%22id%22%3A%22uef3d6075%22%2C%22card%22%3A%22file%22%7D)
-
-1. 下载插件。
-
-2. 打开 Unity 。
-
-3. 双击插件， **Import** 默认框选选项：
-
-
-
-若安装成功，可以看到菜单栏多出 **AntG** 选项：
-
-
-
-4. 把需要切片的 FBX 文件拖拽进资源栏：
-
-
-
-5. 单击该资源，出现动画调试预览框。增加动画切片，并根据需求调整每个切片的时间轴 **start**、**end**，如果预览动画效果异常，确认没有勾选 **Resample Curves** 这个默认开启选项，切片完成后，记得点击右下角的 **Apply** 确认按钮。
-
-
-
-
-
-6. 至此，动画切片资源已经制作完毕，接下来介绍如何导出，先将该资源拖拽到节点树中：
-
-
-
-7. 然后给该节点增加 **Animator** Component:
-
-
-
-8. 可以看到，Animator 组件需要绑定一个 Animator Controller 资源，因此我们需要在资源栏新建一个 Animator Controller 资源：
-
-
-
-9. 双击该 controller 资源，将我们之前的动画切片拖拽进去：
-
-
-
-10. Animator Controller 资源制作完毕，绑定到刚才的 Component 上：
-
-
-
-11. 右键该节点，选择导出 AntG：
-
-
-
-12. 至此，制作的动画切片 glTF 文件导出完毕，可以访问 Galacean 的 [glTF 预览](https://galacean.antgroup.com/engine/gltf-viewer) 进行功能校验。
-
diff --git a/docs/zh/animation/clip-for-artist.mdx b/docs/zh/animation/clip-for-artist.mdx
new file mode 100644
index 0000000000..de0f31fbf5
--- /dev/null
+++ b/docs/zh/animation/clip-for-artist.mdx
@@ -0,0 +1,103 @@
+---
+order: 8
+title: 美术动画切片
+type: 动画
+label: Animation
+---
+
+动画切片(**AnimationClip**) 为**一段时间轴上的动画组合**，可以是多个物体的旋转、位移、缩放、权重动画，如**走路、跑步、跳跃**可以分别导出 3 个动画切片；Galacean 引擎可以选择播放哪一个动画切片，前提是建模软件导出的 FBX 或者 glTF 里面包含多个动画切片。
+
+为减少沟通成本，本文列举了几种常见的动画切片方法，导出 glTF 方便 Galacean 引擎直接使用，也可以通过 [glTF 预览](https://galacean.antgroup.com/engine/gltf-viewer) 页面进行功能校验。
+
+Blender 的动画编辑页面非常友好，能够清晰地可视化显示受动画影响的节点，并且在时间轴上显示关键帧，因此推荐使用 Blender 进行动画切片。
+
+### Blender
+
+1. 打开 Blender，导入 Blender 支持的模型格式，然后切换到 **动画编辑** 窗口：
+
+
-
-
-
-3. 开始烘焙，选择着色器视图，选中材质属性，在节点视图【shift+a】新建：纹理 -> 图像纹理。
-
-
-
-4. 点击新建>取一个合适的名字即可，左侧展开就能看到你刚新建的图像纹理。
-
-
-
-
-
-5. 把你新建的这个图像纹理复制到建筑下的所有材质节点中，并且是选中状态。
-
-
-
-6. 配置烘焙参数，先不要点击烘焙，需要下一步的 UV
-
-
-
-### 拆 UV
-
-1. 进入 UV 编辑视图，选中建筑模型，【tab 键】打开编辑模式，可以看到现在 UV 是混乱的
-
-
-
-2. 按【U】选择智能 UV 投射，点击确定，就能获得到一个还不错的 UV 展开图，当然如果美术有时间也可以手工
-
-
+
+
+
，选择 `Sprite`，此时会唤起操作系统的文件查看器，选中所有 FlappyBird 目录下的图片。上传之后，如下图所示，编辑器为每张图片创建了一个 [Texture](/docs/graphics/texture/texture/) 资源和 一个 [Sprite](/docs/graphics/2D/sprite) 资源（为了和 Texture 资源作区分，Sprite 对象带灰色圆角矩形背景）。在接下来的操作中，我们只需要关心 Sprite 资源。
+回到场景编辑器，点击资源面板上的上传按钮 
+
按钮选择 `Sprite Atlas`，创建后选中它，通过 **[检查器面板](/docs/interface/inspector)** 上的 `Add to List` 按钮把所有 Sprite 资源都添加到列表中。
+为了达到更好的运行时性能，我们选择把这些 Sprite 资源打包到一个 Atlas 资源。我们点击 
+
+
+
+
+
+
+
+ 
+ 
+ 
+
+
+
+
+
+
+
+
-