From dc1a4793ed652790cf5dbb4f29fb82f612786af1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=B9=85=E5=8F=94?= Date: Fri, 23 May 2025 17:24:53 +0800 Subject: [PATCH] Docs: remove playgrounds (#2689) * fix: doc typo --- docs/en/UI/quickStart/button.mdx | 4 - docs/en/UI/quickStart/event.mdx | 4 - docs/en/UI/quickStart/group.mdx | 4 - docs/en/UI/quickStart/image.mdx | 4 - docs/en/UI/quickStart/text.mdx | 4 - docs/en/animation/clip.mdx | 4 - docs/en/animation/layer.mdx | 3 +- docs/en/assets/custom.mdx | 3 - docs/en/assets/gc.mdx | 15 -- docs/en/core/scene.mdx | 4 - docs/en/core/transform.mdx | 6 +- docs/en/graphics/2D/lottie.mdx | 6 - docs/en/graphics/2D/spine/example.mdx | 36 +--- docs/en/graphics/2D/spriteAtlas.mdx | 4 - docs/en/graphics/2D/spriteMask.mdx | 2 - docs/en/graphics/2D/spriteRenderer.mdx | 8 - docs/en/graphics/2D/text.mdx | 24 +-- docs/en/graphics/background/background.mdx | 7 - .../graphics/camera/{camera.md => camera.mdx} | 8 +- .../camera/{component.md => component.mdx} | 16 +- .../camera/{control.md => control.mdx} | 7 +- docs/en/graphics/camera/depthTexture.md | 15 -- docs/en/graphics/camera/multiCamera.md | 17 -- docs/en/graphics/camera/multiCamera.mdx | 10 + .../camera/{texture.md => texture.mdx} | 4 +- docs/en/graphics/light/light.mdx | 8 +- docs/en/graphics/mesh/bufferMesh.mdx | 6 - docs/en/graphics/mesh/modelMesh.mdx | 10 - docs/en/graphics/mesh/primitiveMesh.mdx | 2 - docs/en/graphics/model/glTF.mdx | 4 +- docs/en/graphics/model/use.mdx | 2 - .../particle/renderer-main-module.mdx | 2 - docs/en/graphics/postProcess/effects.md | 69 ------- docs/en/graphics/postProcess/effects.mdx | 109 ++++++++++ docs/en/graphics/renderer/meshRenderer.mdx | 2 - docs/en/graphics/renderer/renderer.mdx | 4 - .../graphics/renderer/skinnedMeshRenderer.mdx | 9 - .../graphics/shader/builtins/blinnPhong.mdx | 2 - docs/en/graphics/shader/builtins/unlit.mdx | 2 - docs/en/graphics/shader/custom.mdx | 2 - docs/en/graphics/shader/shaderLab/intro.mdx | 4 - docs/en/graphics/shader/shaderLab/usage.mdx | 3 - docs/en/graphics/texture/2d.mdx | 4 +- docs/en/graphics/texture/compression.mdx | 2 - docs/en/graphics/texture/rtt.mdx | 2 - docs/en/graphics/texture/texture.mdx | 6 - docs/en/how-to-contribute.mdx | 24 --- docs/en/input/framebuffer-picker.mdx | 2 - docs/en/input/keyboard.mdx | 6 - docs/en/input/pointer.mdx | 26 +-- docs/en/input/wheel.mdx | 5 - docs/en/performance/stats.mdx | 4 - docs/en/physics/collider/colliderShape.mdx | 3 - docs/en/physics/collider/event.mdx | 4 - docs/en/physics/debug.mdx | 3 +- docs/en/physics/joint/overview.mdx | 3 - docs/en/physics/manager.mdx | 2 - docs/en/quick-start/core-concept.md | 192 ------------------ .../{flappy-bird.md => flappy-bird.mdx} | 39 ++-- .../quick-start/{overview.md => overview.mdx} | 0 .../script/{attributes.md => attributes.mdx} | 0 docs/en/script/{class.md => class.mdx} | 2 +- .../{communication.md => communication.mdx} | 0 docs/en/script/{script.md => script.mdx} | 0 docs/en/xr/{camera.md => camera.mdx} | 0 .../{compatibility.md => compatibility.mdx} | 2 +- docs/en/xr/{features.md => features.mdx} | 8 +- docs/en/xr/{input.md => input.mdx} | 0 docs/en/xr/{manager.md => manager.mdx} | 0 docs/en/xr/{overall.md => overall.mdx} | 2 +- docs/en/xr/quickStart/{debug.md => debug.mdx} | 8 +- .../xr/quickStart/{develop.md => develop.mdx} | 18 +- docs/en/xr/{session.md => session.mdx} | 0 docs/en/xr/{start.md => start.mdx} | 10 +- docs/en/xr/system/{camera.md => camera.mdx} | 0 .../xr/system/{features.md => features.mdx} | 12 +- docs/en/xr/system/{input.md => input.mdx} | 0 docs/en/xr/system/{session.md => session.mdx} | 0 docs/zh/UI/quickStart/button.mdx | 4 - docs/zh/UI/quickStart/event.mdx | 4 - docs/zh/UI/quickStart/group.mdx | 4 - docs/zh/UI/quickStart/image.mdx | 4 - docs/zh/UI/quickStart/text.mdx | 4 - docs/zh/animation/clip.mdx | 5 - docs/zh/animation/layer.mdx | 1 - docs/zh/assets/custom.mdx | 4 - docs/zh/assets/gc.mdx | 15 -- docs/zh/core/scene.mdx | 4 - docs/zh/core/transform.mdx | 5 +- docs/zh/device/{restore.md => restore.mdx} | 0 docs/zh/graphics/2D/lottie.mdx | 7 - docs/zh/graphics/2D/spine/example.mdx | 34 ---- docs/zh/graphics/2D/spriteAtlas.mdx | 4 - docs/zh/graphics/2D/spriteMask.mdx | 2 - docs/zh/graphics/2D/spriteRenderer.mdx | 7 - docs/zh/graphics/2D/text.mdx | 24 +-- docs/zh/graphics/background/background.mdx | 8 - .../graphics/camera/{camera.md => camera.mdx} | 6 +- .../camera/{component.md => component.mdx} | 16 +- .../camera/{control.md => control.mdx} | 6 - docs/zh/graphics/camera/multiCamera.md | 17 -- docs/zh/graphics/camera/multiCamera.mdx | 10 + .../camera/{texture.md => texture.mdx} | 4 +- docs/zh/graphics/light/light.mdx | 8 +- .../{blinnPhong.md => blinnPhong.mdx} | 4 +- .../builtinShaders/{unlit.md => unlit.mdx} | 24 +-- docs/zh/graphics/mesh/bufferMesh.mdx | 6 - docs/zh/graphics/mesh/modelMesh.mdx | 10 - docs/zh/graphics/mesh/primitiveMesh.mdx | 2 - docs/zh/graphics/model/glTF.mdx | 4 +- docs/zh/graphics/model/use.mdx | 2 - .../particle/renderer-main-module.mdx | 2 - docs/zh/graphics/renderer/meshRenderer.mdx | 2 - docs/zh/graphics/renderer/renderer.mdx | 4 - .../graphics/renderer/skinnedMeshRenderer.mdx | 8 - docs/zh/graphics/texture/2d.mdx | 4 +- docs/zh/graphics/texture/compression.mdx | 2 - docs/zh/graphics/texture/rtt.mdx | 2 - docs/zh/graphics/texture/texture.mdx | 8 - docs/zh/how-to-contribute.mdx | 23 --- docs/zh/input/framebuffer-picker.mdx | 2 - docs/zh/input/keyboard.mdx | 6 - docs/zh/input/pointer.mdx | 27 +-- docs/zh/input/wheel.mdx | 3 - docs/zh/performance/stats.mdx | 4 - docs/zh/physics/collider/colliderShape.mdx | 4 - docs/zh/physics/collider/event.mdx | 4 - docs/zh/physics/debug.mdx | 1 - docs/zh/physics/joint/overview.mdx | 4 - docs/zh/physics/manager.mdx | 2 - .../script/{attributes.md => attributes.mdx} | 0 docs/zh/script/{class.md => class.mdx} | 2 +- .../{communication.md => communication.mdx} | 0 docs/zh/script/{script.md => script.mdx} | 0 .../{compatibility.md => compatibility.mdx} | 2 +- docs/zh/xr/{overall.md => overall.mdx} | 2 +- docs/zh/xr/quickStart/{debug.md => debug.mdx} | 8 +- .../xr/quickStart/{develop.md => develop.mdx} | 18 +- docs/zh/xr/system/{camera.md => camera.mdx} | 0 .../xr/system/{features.md => features.mdx} | 12 +- docs/zh/xr/system/{input.md => input.mdx} | 0 docs/zh/xr/system/{manager.md => manager.mdx} | 2 - docs/zh/xr/system/{session.md => session.mdx} | 0 docs/zh/xr/system/{toolkit.md => toolkit.mdx} | 0 144 files changed, 251 insertions(+), 1014 deletions(-) rename docs/en/graphics/camera/{camera.md => camera.mdx} (83%) rename docs/en/graphics/camera/{component.md => component.mdx} (93%) rename docs/en/graphics/camera/{control.md => control.mdx} (95%) delete mode 100644 docs/en/graphics/camera/depthTexture.md delete mode 100644 docs/en/graphics/camera/multiCamera.md create mode 100644 docs/en/graphics/camera/multiCamera.mdx rename docs/en/graphics/camera/{texture.md => texture.mdx} (94%) delete mode 100644 docs/en/graphics/postProcess/effects.md create mode 100644 docs/en/graphics/postProcess/effects.mdx delete mode 100644 docs/en/quick-start/core-concept.md rename docs/en/quick-start/{flappy-bird.md => flappy-bird.mdx} (88%) rename docs/en/quick-start/{overview.md => overview.mdx} (100%) rename docs/en/script/{attributes.md => attributes.mdx} (100%) rename docs/en/script/{class.md => class.mdx} (98%) rename docs/en/script/{communication.md => communication.mdx} (100%) rename docs/en/script/{script.md => script.mdx} (100%) rename docs/en/xr/{camera.md => camera.mdx} (100%) rename docs/en/xr/{compatibility.md => compatibility.mdx} (93%) rename docs/en/xr/{features.md => features.mdx} (96%) rename docs/en/xr/{input.md => input.mdx} (100%) rename docs/en/xr/{manager.md => manager.mdx} (100%) rename docs/en/xr/{overall.md => overall.mdx} (93%) rename docs/en/xr/quickStart/{debug.md => debug.mdx} (80%) rename docs/en/xr/quickStart/{develop.md => develop.mdx} (80%) rename docs/en/xr/{session.md => session.mdx} (100%) rename docs/en/xr/{start.md => start.mdx} (82%) rename docs/en/xr/system/{camera.md => camera.mdx} (100%) rename docs/en/xr/system/{features.md => features.mdx} (91%) rename docs/en/xr/system/{input.md => input.mdx} (100%) rename docs/en/xr/system/{session.md => session.mdx} (100%) rename docs/zh/device/{restore.md => restore.mdx} (100%) rename docs/zh/graphics/camera/{camera.md => camera.mdx} (88%) rename docs/zh/graphics/camera/{component.md => component.mdx} (92%) rename docs/zh/graphics/camera/{control.md => control.mdx} (96%) delete mode 100644 docs/zh/graphics/camera/multiCamera.md create mode 100644 docs/zh/graphics/camera/multiCamera.mdx rename docs/zh/graphics/camera/{texture.md => texture.mdx} (93%) rename docs/zh/graphics/material/builtinShaders/{blinnPhong.md => blinnPhong.mdx} (91%) rename docs/zh/graphics/material/builtinShaders/{unlit.md => unlit.mdx} (63%) rename docs/zh/script/{attributes.md => attributes.mdx} (100%) rename docs/zh/script/{class.md => class.mdx} (98%) rename docs/zh/script/{communication.md => communication.mdx} (100%) rename docs/zh/script/{script.md => script.mdx} (100%) rename docs/zh/xr/{compatibility.md => compatibility.mdx} (92%) rename docs/zh/xr/{overall.md => overall.mdx} (92%) rename docs/zh/xr/quickStart/{debug.md => debug.mdx} (77%) rename docs/zh/xr/quickStart/{develop.md => develop.mdx} (80%) rename docs/zh/xr/system/{camera.md => camera.mdx} (100%) rename docs/zh/xr/system/{features.md => features.mdx} (91%) rename docs/zh/xr/system/{input.md => input.mdx} (100%) rename docs/zh/xr/system/{manager.md => manager.mdx} (98%) rename docs/zh/xr/system/{session.md => session.mdx} (100%) rename docs/zh/xr/system/{toolkit.md => toolkit.mdx} (100%) diff --git a/docs/en/UI/quickStart/button.mdx b/docs/en/UI/quickStart/button.mdx index 25aaa2a6b..24b3e5cff 100644 --- a/docs/en/UI/quickStart/button.mdx +++ b/docs/en/UI/quickStart/button.mdx @@ -38,7 +38,3 @@ In the editor, you can easily set the button's transition effects for different | `removeTransition` | Remove a transition effect from the button | | `addClicked` | Add a click callback function | | `removeClicked` | Remove a click callback function | - -## Script Development - - \ No newline at end of file diff --git a/docs/en/UI/quickStart/event.mdx b/docs/en/UI/quickStart/event.mdx index ad15ad431..260159321 100644 --- a/docs/en/UI/quickStart/event.mdx +++ b/docs/en/UI/quickStart/event.mdx @@ -34,7 +34,3 @@ stateDiagram B --> C B --> D ``` - -## Script Development - - \ No newline at end of file diff --git a/docs/en/UI/quickStart/group.mdx b/docs/en/UI/quickStart/group.mdx index 88b9b399c..1ab19239b 100644 --- a/docs/en/UI/quickStart/group.mdx +++ b/docs/en/UI/quickStart/group.mdx @@ -22,7 +22,3 @@ Select the node, then in the **[Inspector Panel](/docs/interface/inspector)**, c | `ignoreParentGroup` | Whether to ignore the settings of the parent group | > UIGroup resolves the issue where UI element properties cannot be passed from parent to child. - -## Script Development - - \ No newline at end of file diff --git a/docs/en/UI/quickStart/image.mdx b/docs/en/UI/quickStart/image.mdx index d50c73677..1dbd8d5e3 100644 --- a/docs/en/UI/quickStart/image.mdx +++ b/docs/en/UI/quickStart/image.mdx @@ -42,7 +42,3 @@ For adjusting the size of UI elements, refer to [Quickly Adjust UI Element Size] | `drawMode` | The draw mode, supports Normal, Nine-Patch, and Tiled modes | | `raycastEnabled` | Whether the image can be detected by raycasting | | `raycastPadding` | Custom padding for raycasting, representing the distance from the edges of the collision area. This is a normalized value, where X, Y, Z, and W represent the distances from the left, bottom, right, and top edges respectively. | - -## Script Development - - \ No newline at end of file diff --git a/docs/en/UI/quickStart/text.mdx b/docs/en/UI/quickStart/text.mdx index 4ebb6ce4b..22ab0560c 100644 --- a/docs/en/UI/quickStart/text.mdx +++ b/docs/en/UI/quickStart/text.mdx @@ -54,7 +54,3 @@ The `Text` component can modify the rendering size by adjusting the `FontSize`. | `Mask Interaction` | Mask type for text, specifying whether the text needs masking, and whether the content inside or outside the mask should be shown | | `Mask Layer` | The mask layer for the text, used for matching with SpriteMask. Default is Everything, meaning it can interact with any SpriteMask | | `priority` | Rendering priority; the lower the value, the higher the priority, meaning it will be rendered first | - -## Script Development - - \ No newline at end of file diff --git a/docs/en/animation/clip.mdx b/docs/en/animation/clip.mdx index 56dbef2ee..8f0c01b2c 100644 --- a/docs/en/animation/clip.mdx +++ b/docs/en/animation/clip.mdx @@ -200,8 +200,6 @@ colorClip.addCurveBinding("/light", DirectLight, "color.r", colorCurve); You can also add `AnimationCurve` to your child entity `/light`, as shown in the code example above. At the same time, the third parameter of `addCurveBinding` is not limited to the properties of the component; it is a path that can index the value. - - ### Animation Events You can use [AnimationEvent](/apis/core/#AnimationEvent) to add events to `AnimationClip`. Animation events will call the specified callback function of the component bound to the same entity at the specified time. @@ -212,5 +210,3 @@ event.functionName = "test"; event.time = 0.5; clip.addEvent(event); ``` - - diff --git a/docs/en/animation/layer.mdx b/docs/en/animation/layer.mdx index 064842b83..4986cb5da 100644 --- a/docs/en/animation/layer.mdx +++ b/docs/en/animation/layer.mdx @@ -57,5 +57,4 @@ additiveLayer.blendingMode = AnimatorLayerBlendingMode.Additive; // Override mode additiveLayer.blendingMode = AnimatorLayerBlendingMode.Override; additiveLayer.weight = 0.5; -``` - +``` \ No newline at end of file diff --git a/docs/en/assets/custom.mdx b/docs/en/assets/custom.mdx index 4f914cfbe..cf9e40b46 100644 --- a/docs/en/assets/custom.mdx +++ b/docs/en/assets/custom.mdx @@ -23,6 +23,3 @@ export class FBXLoader extends Loader { 3. Return an [AssetPromise](/apis/core/#AssetPromise) object. `resolve` the parsed resource result, for example, FBX returns a specific `FBXResource`. 4. If there is an error, `reject` the error. -## Reference - - diff --git a/docs/en/assets/gc.mdx b/docs/en/assets/gc.mdx index 09941909a..73ee192f8 100644 --- a/docs/en/assets/gc.mdx +++ b/docs/en/assets/gc.mdx @@ -20,18 +20,3 @@ For example, the entity shown in the figure below contains a [MeshRenderer](/api ```typescript engine.resourceManager.gc(); ``` - -## Verifying Asset Release - -If you need to verify whether assets have been successfully released, you can follow the steps below and open the following example on a blank page: - - - -In this example, `Texture2D` and `Sprite` are created to render 2D sprites during initialization. When you click the GC button in the upper right corner, the `root` node is destroyed, and the reference counts of the texture and sprite assets are cleared. At this point, these assets will be truly destroyed. Taking memory snapshots before and after `gc` can give a more intuitive understanding of this process. - -1. Before gc: **Developer Tools** -> **Memory** -> **Take Heap Snapshot** -2. After gc: **Developer Tools** -> **Memory** -> **Take Heap Snapshot** -> **Compare** -> **Select Snapshot Before gc** - -image-1 - -image-1 diff --git a/docs/en/core/scene.mdx b/docs/en/core/scene.mdx index dd0675e5c..395ec9116 100644 --- a/docs/en/core/scene.mdx +++ b/docs/en/core/scene.mdx @@ -92,10 +92,6 @@ engine.sceneManager.addScene(scene1); engine.sceneManager.removeScene(scene2); ``` -The example of multi-scene rendering is as follows: - - - ### Merging Scenes You can use `engine.sceneManager.mergeScenes` to merge 2 scenes into 1 scene. diff --git a/docs/en/core/transform.mdx b/docs/en/core/transform.mdx index 3fefb201a..9cad9441d 100644 --- a/docs/en/core/transform.mdx +++ b/docs/en/core/transform.mdx @@ -9,9 +9,9 @@ label: Core `Transform` is a basic component that comes with an `Entity`. Developers can use it to manage the position, rotation, and scale of an `Entity` in **local space** and **world space**. -> For a deeper understanding, refer to Galacean's **[Coordinate System](/docs/core/space)**. - - + +For a deeper understanding, refer to Galacean's **[Coordinate System](/docs/core/space)**. + ## Editor Usage diff --git a/docs/en/graphics/2D/lottie.mdx b/docs/en/graphics/2D/lottie.mdx index f34025e94..b642dadd4 100644 --- a/docs/en/graphics/2D/lottie.mdx +++ b/docs/en/graphics/2D/lottie.mdx @@ -74,8 +74,6 @@ await lottie.play(); The editor provides an animation slicing function, allowing you to cut the entire segment provided by the designer into multiple segments. Each segment needs to define three fields: segment name, start frame, and end frame. - - This operation will add the `lolitaAnimations` field in the Lottie protocol to implement animation slicing: @@ -129,8 +127,6 @@ 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. @@ -139,8 +135,6 @@ In business scenarios, there is often a need for 3D transformations, such as ent Thanks to the unified architecture of the Galacean Engine 2D/3D engine, 3D transformation functions can be easily implemented. - - ### Version Dependencies | Engine Version | Lottie Version | | :--- | :--- | diff --git a/docs/en/graphics/2D/spine/example.mdx b/docs/en/graphics/2D/spine/example.mdx index 8605f57b8..87ff2d27e 100644 --- a/docs/en/graphics/2D/spine/example.mdx +++ b/docs/en/graphics/2D/spine/example.mdx @@ -29,38 +29,4 @@ This template demonstrates the capability of Spine to mix and match outfits. By **Dynamic Partial Skin Switching** This template showcases the ability to dynamically switch partial skins. You can create new attachments based on an additionally uploaded atlas and replace them dynamically. -spine-dynamic-change - -## 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) +spine-dynamic-change \ No newline at end of file diff --git a/docs/en/graphics/2D/spriteAtlas.mdx b/docs/en/graphics/2D/spriteAtlas.mdx index c581decb0..674beaca3 100644 --- a/docs/en/graphics/2D/spriteAtlas.mdx +++ b/docs/en/graphics/2D/spriteAtlas.mdx @@ -12,10 +12,6 @@ label: Graphics/2D - Less video memory (packing algorithm reduces texture size); - Fewer requests (reduces the number of load requests by reducing fragmented files); -In the example of the sprite atlas below, only one draw call is made per frame: - - - ## Editor Usage ### Creating a Sprite Atlas diff --git a/docs/en/graphics/2D/spriteMask.mdx b/docs/en/graphics/2D/spriteMask.mdx index 484708651..23a08d4bf 100644 --- a/docs/en/graphics/2D/spriteMask.mdx +++ b/docs/en/graphics/2D/spriteMask.mdx @@ -8,8 +8,6 @@ label: Graphics/2D The Sprite Mask component is used to apply masking effects to [Sprite Renderer](/en/docs/graphics/2D/spriteRenderer/) and [Text Renderer](/en/docs/graphics/2D/text/) in 3D/2D scenes. - - Control the interaction with [Sprite](/en/docs/graphics/2D/sprite/) using parameters provided by [SpriteMask](/apis/core/#SpriteMask). | Parameter | Type | Description | diff --git a/docs/en/graphics/2D/spriteRenderer.mdx b/docs/en/graphics/2D/spriteRenderer.mdx index b7245616f..0f94d6007 100644 --- a/docs/en/graphics/2D/spriteRenderer.mdx +++ b/docs/en/graphics/2D/spriteRenderer.mdx @@ -63,8 +63,6 @@ When displaying an image, first add a sprite component to an entity and then set Setting the `width` and `height` of `SpriteRenderer` can explicitly specify the size of the sprite in 3D space. If not set, the size of the `Sprite` will be used as the default value. - - ### Set Color Adjust the color by setting the `color` property to achieve fade-in and fade-out effects, as shown below: @@ -77,14 +75,10 @@ In addition to basic image display, `SpriteRenderer` also supports image flippin avatar - - ### 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 Please refer to the [Sprite Mask](/en/docs/graphics/2D/spriteMask) documentation. @@ -93,5 +87,3 @@ Please refer to the [Sprite Mask](/en/docs/graphics/2D/spriteMask) documentation Please refer to the [Custom Shader](/en/docs/graphics-shader-custom) documentation. - - diff --git a/docs/en/graphics/2D/text.mdx b/docs/en/graphics/2D/text.mdx index 8e282a311..024b09557 100644 --- a/docs/en/graphics/2D/text.mdx +++ b/docs/en/graphics/2D/text.mdx @@ -54,13 +54,6 @@ To make the text display more diverse, developers can upload their own font file ## 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 -3. Set the text to be displayed through the text property -3. Set the font size through the fontSize property -4. Set the text color through the color property ```typescript import { @@ -74,15 +67,15 @@ import { } from "@galacean/engine"; const textEntity = rootEntity.createChild("text"); -// 给实体添加 TextRenderer 组件 +// 1. Create a TextRenderer component to display text const textRenderer = textEntity.addComponent(TextRenderer); -// 通过 font 设置 Font 对象 +// 2. Set the Font object through the font property textRenderer.font = Font.createFromOS(engine, "Arial"); -// 通过 text 设置需要显示的文本 +// 3. Set the text to be displayed through the text property textRenderer.text = "Galacean 会写字了！"; -// 通过 fontSize 设置字体大小 +// 4. Set the font size through the fontSize property textRenderer.fontSize = 36; -// 通过 color 设置文本颜色 +// 5. Set the text color through the color property textRenderer.color.set(1, 0, 0, 1); ``` @@ -158,10 +151,6 @@ textRenderer.fontStyle = FontStyle.Italic; textRenderer.fontStyle = FontStyle.Bold | FontStyle.Italic; ``` -### Multi-line Text - - - ### Custom Fonts [Font](/apis/core/#Font) is a font resource used to represent the font used by the text. @@ -181,6 +170,3 @@ const font = await engine.resourceManager.load({ url: "https://lg-2fw0hhsc-1256786476.cos.ap-shanghai.myqcloud.com/Avelia.otf", }); ``` - - -``` diff --git a/docs/en/graphics/background/background.mdx b/docs/en/graphics/background/background.mdx index 5378b7bf4..f180a2da0 100644 --- a/docs/en/graphics/background/background.mdx +++ b/docs/en/graphics/background/background.mdx @@ -12,11 +12,4 @@ Developers can customize the background for scenes, which will be rendered befor - [Texture Background](/en/docs/graphics-background-texture) - [Sky Background](/en/docs/graphics-background-sky) -Developers can set different backgrounds according to their needs: - - - -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/camera/camera.md b/docs/en/graphics/camera/camera.mdx similarity index 83% rename from docs/en/graphics/camera/camera.md rename to docs/en/graphics/camera/camera.mdx index 0c762ac0b..ddbb6bb3d 100644 --- a/docs/en/graphics/camera/camera.md +++ b/docs/en/graphics/camera/camera.mdx @@ -14,7 +14,7 @@ A camera is an abstract concept in a graphics engine for [3D projection](https:/ Perspective projection conforms to our model of objects appearing larger when closer and smaller when farther away. Here is a diagram of the perspective model: -image.png +image.png As shown in the diagram above, the near clipping plane ([nearClipPlane](/apis/core/#Camera-nearClipPlane)), far clipping plane ([farClipPlane](/apis/core/#Camera-farClipPlane)), and field of view ([fieldOfView](/apis/core/#Camera-fieldOfView)) form a view frustum ([_View Frustum_](https://en.wikipedia.org/wiki/Viewing_frustum)). Objects within the frustum are projected into the camera and rendered on the canvas, while objects outside the frustum are clipped. @@ -22,7 +22,7 @@ As shown in the diagram above, the near clipping plane ([nearClipPlane](/apis/co In orthographic projection, objects appear the same size regardless of their distance from the camera. The visible area created by orthographic projection is called a box-shaped view volume, as shown below: -image.png +image.png As shown in the diagram above, there are top, bottom, left, and right boundaries. Galacean simplifies orthographic properties to better suit developers' habits, using only [orthographicSize](/apis/core/#Camera-orthographicSize). The relationships between the various properties and [orthographicSize](/apis/core/#Camera-orthographicSize) are as follows: @@ -38,10 +38,6 @@ Comparing perspective projection and orthographic projection reveals their diffe - View volume model - Whether objects appear larger when closer and smaller when farther away -The following example visually demonstrates the difference between rendering with an orthographic camera and a perspective camera. In short, choose an orthographic camera for 2D effects and a perspective camera for 3D effects. - - - ## Camera Orientation In Galacean, both local and world coordinates follow the `right-hand coordinate system`, so the camera's `forward` direction is the `-Z` axis, and the camera's viewing direction is also the `-Z` direction. diff --git a/docs/en/graphics/camera/component.md b/docs/en/graphics/camera/component.mdx similarity index 93% rename from docs/en/graphics/camera/component.md rename to docs/en/graphics/camera/component.mdx index 90c80d8cc..654206420 100644 --- a/docs/en/graphics/camera/component.md +++ b/docs/en/graphics/camera/component.mdx @@ -10,11 +10,11 @@ The camera component can project a 3D scene onto a 2D screen. Based on the camer First, you need to mount the camera component onto an activated [Entity](/en/docs/core/entity) in the scene. Editor projects usually come with a camera component by default, but you can also add one manually. -image-20231009114711623 +image-20231009114711623 After adding it, you can view the camera properties in the inspector, and the camera preview in the lower left corner allows you to conveniently see the camera effect during the actual project runtime: -image-20240718211520816 +image-20240718211520816 You can also mount the camera component to an [Entity](/en/docs/core/entity) in the script with the following code: @@ -29,7 +29,7 @@ const camera = entity.addComponent(Camera); By modifying the properties of the camera component, you can customize the rendering effects. Below are the property settings exposed by the camera component in the **[Inspector Panel](/en/docs/interface/inspector)**. -image-20240718211645854 +image-20240718211645854 You can also get the camera component and set the corresponding properties through the script. @@ -90,20 +90,14 @@ The functionality corresponding to each property is as follows: The camera component can selectively render the rendering components in the scene by setting the `cullingMask`. - - ### Render Target The camera component can render the result to different targets by setting the `renderTarget`. - - ### Frustum Culling The `enableFrustumCulling` property is enabled by default because, in a 3D world, "things that are not visible do not need to be rendered" is a very natural logic and is the most basic performance optimization. Disabling frustum culling means turning off this optimization. If you want to keep this optimization but always render a specific node, you can set the bounding box of the node's renderer to be infinite. - - ## Methods The camera component provides various methods (mainly related to `rendering` and `space transformation`) to facilitate developers in achieving the desired customization capabilities. Before that, you need to learn how to get the camera component. If you know which node the camera component is mounted on, you can directly get it through `getComponent` or `getComponentsIncludeChildren`: @@ -140,9 +134,7 @@ const cameras = scene._componentsManager._activeCameras; ### Shader Replacement -With the ability of `setReplacementShader` to globally replace shaders, you can observe specific rendering effects: - - +With the ability of `setReplacementShader` to globally replace shaders, you can observe specific rendering effects. ### Space Transformation diff --git a/docs/en/graphics/camera/control.md b/docs/en/graphics/camera/control.mdx similarity index 95% rename from docs/en/graphics/camera/control.md rename to docs/en/graphics/camera/control.mdx index 64c592de4..214d39382 100644 --- a/docs/en/graphics/camera/control.md +++ b/docs/en/graphics/camera/control.mdx @@ -16,8 +16,6 @@ Camera controls inherit from powerful scripts and are mounted on an `Entity` tha `OrbitControl` is used to simulate orbit interaction, suitable for 360-degree rotation interaction around a target object. Note that **the orbit controller must be added after the camera component**. - - | Property | Description | | :--------------- | :----------------------------------------------------------------- | | `target` | The target position to observe | @@ -42,8 +40,6 @@ Camera controls inherit from powerful scripts and are mounted on an `Entity` tha `FreeControl` is generally used for roaming control, commonly seen in game scenes. Note that **the free controller must be added after the camera component**. - - | Property | Description | | :-------------- | :---------------------------------------- | | `floorMock` | Whether to simulate the ground, default is true | @@ -53,9 +49,8 @@ Camera controls inherit from powerful scripts and are mounted on an `Entity` tha #### Orthographic Controller -`OrthoControl` is generally used to control zooming and panning in 2D scenes: +`OrthoControl` is generally used to control zooming and panning in 2D scenes. - | Property | Description | | :---------- | :-----------| diff --git a/docs/en/graphics/camera/depthTexture.md b/docs/en/graphics/camera/depthTexture.md deleted file mode 100644 index ed7e214a8..000000000 --- a/docs/en/graphics/camera/depthTexture.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -order: 4 -title: Camera Depth Texture -type: Graphics -group: Camera -label: Graphics/Camera ---- - - -The camera can enable depth texture through the [depthTextureMode](/apis/core/#Camera-depthTextureMode) property. After enabling the depth texture, you can access the depth texture in the Shader through the `camera_DepthTexture` property. Depth texture can be used to implement soft particles, water surface edge transitions, and some simple post-processing effects. - - - -Note: Depth texture only renders non-transparent objects. - diff --git a/docs/en/graphics/camera/multiCamera.md b/docs/en/graphics/camera/multiCamera.md deleted file mode 100644 index 197021ac8..000000000 --- a/docs/en/graphics/camera/multiCamera.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -order: 3 -title: Multi-Camera Rendering -type: Graphics -group: Camera -label: Graphics/Camera ---- - -In the case of multiple cameras, many customized rendering effects can be achieved by combining camera component properties such as [viewport](/apis/core/#Camera-viewport), [cullingMask](/apis/core/#Camera-cullingMask), [clearFlags](/apis/core/#Camera-clearFlags), and others. - -For example, by setting the [viewport](/apis/core/#Camera-viewport), multiple cameras can render scene content in different positions on the canvas. - - - -Another example is achieving a picture-in-picture effect by setting the [cullingMask](/apis/core/#Camera-cullingMask). - - diff --git a/docs/en/graphics/camera/multiCamera.mdx b/docs/en/graphics/camera/multiCamera.mdx new file mode 100644 index 000000000..132ab7d4e --- /dev/null +++ b/docs/en/graphics/camera/multiCamera.mdx @@ -0,0 +1,10 @@ +--- +order: 3 +title: Multi-Camera Rendering +type: Graphics +group: Camera +label: Graphics/Camera +--- + +In the case of multiple cameras, many customized rendering effects can be achieved by combining camera component properties such as [viewport](/apis/core/#Camera-viewport), [cullingMask](/apis/core/#Camera-cullingMask), [clearFlags](/apis/core/#Camera-clearFlags), and others. For example, by setting the [viewport](/apis/core/#Camera-viewport), multiple cameras can render scene content in different positions on the canvas. Another example is achieving a picture-in-picture effect by setting the [cullingMask](/apis/core/#Camera-cullingMask). + diff --git a/docs/en/graphics/camera/texture.md b/docs/en/graphics/camera/texture.mdx similarity index 94% rename from docs/en/graphics/camera/texture.md rename to docs/en/graphics/camera/texture.mdx index 45a9fcf39..e8819029d 100644 --- a/docs/en/graphics/camera/texture.md +++ b/docs/en/graphics/camera/texture.mdx @@ -10,9 +10,9 @@ label: Graphics/Camera The camera can enable the depth texture through the [depthTextureMode](/apis/galacean/#Camera) property. Once enabled, the depth texture can be accessed in the Shader via the `camera_DepthTexture` property. Depth textures can be used to implement soft particles and water edge transitions, as well as some simple post-processing effects. - - + Note: Depth textures only render non-transparent objects. + ## Opaque Texture diff --git a/docs/en/graphics/light/light.mdx b/docs/en/graphics/light/light.mdx index a42e850d6..3071a4a21 100644 --- a/docs/en/graphics/light/light.mdx +++ b/docs/en/graphics/light/light.mdx @@ -22,15 +22,11 @@ Proper use of lighting can provide realistic rendering effects. This section inc ## Direct Light -Direct light usually shines from an area or in a specific direction, entering the eye (camera) directly after one reflection, as shown in the following example: - - +Direct light usually shines from an area or in a specific direction, entering the eye (camera) directly after one reflection. ## Indirect Light -Ambient light is emitted from all around and enters the eye, as shown in the following example: - - +Ambient light is emitted from all around and enters the eye. ## Real-time Lighting and Baked Lighting diff --git a/docs/en/graphics/mesh/bufferMesh.mdx b/docs/en/graphics/mesh/bufferMesh.mdx index 28414f7fb..6d11381d7 100644 --- a/docs/en/graphics/mesh/bufferMesh.mdx +++ b/docs/en/graphics/mesh/bufferMesh.mdx @@ -30,8 +30,6 @@ 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. ```typescript @@ -65,8 +63,6 @@ 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. ```typescript @@ -109,8 +105,6 @@ 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. ```typescript diff --git a/docs/en/graphics/mesh/modelMesh.mdx b/docs/en/graphics/mesh/modelMesh.mdx index f6ffacd14..2d60ac7d7 100644 --- a/docs/en/graphics/mesh/modelMesh.mdx +++ b/docs/en/graphics/mesh/modelMesh.mdx @@ -8,8 +8,6 @@ label: Graphics/Mesh [ModelMesh](/apis/core/#ModelMesh) is a mesh rendering data class used to describe the geometric outline, mainly including vertex data (such as position, normal, and UV), indices, and blend shapes. It can not only be created and exported in glTF format using modeling software for engine parsing and restoration but also be conveniently written directly into data creation using scripts. - - ## Code Example ```typescript @@ -134,8 +132,6 @@ If you need to continuously modify the `ModelMesh` data, set the `releaseData` p modelMesh.uploadData(false); ``` - - ### **Reading Advanced Data** To make the vertex data in `ModelMesh` readable, pay attention to: @@ -172,12 +168,6 @@ const result = mesh.getPositions(); `BlendShape` is commonly used to create highly detailed animations, such as facial expressions. The principle is quite simple, mainly blending the mesh data of base shape and target shape with weights to achieve smooth transition between shapes. -**glTF Import BlendShape Animation Example:** - - -**Custom BlendShape Animation in Script Example:** - - ### Detailed Steps #### **Organizing `BlendShape` Data** diff --git a/docs/en/graphics/mesh/primitiveMesh.mdx b/docs/en/graphics/mesh/primitiveMesh.mdx index 36d72853f..c7feaea26 100644 --- a/docs/en/graphics/mesh/primitiveMesh.mdx +++ b/docs/en/graphics/mesh/primitiveMesh.mdx @@ -24,8 +24,6 @@ Built-in geometries not meeting your needs? You can create a `Mesh` asset in the ## Script Usage - - The currently provided geometries are as follows: - [createCuboid](/apis/core/#PrimitiveMesh-createCuboid) **Cuboid** diff --git a/docs/en/graphics/model/glTF.mdx b/docs/en/graphics/model/glTF.mdx index 1e966418f..72eee25ce 100644 --- a/docs/en/graphics/model/glTF.mdx +++ b/docs/en/graphics/model/glTF.mdx @@ -33,9 +33,7 @@ Both types of products are supported in Galacean. The choice of export type can - Supports cameras in glTF, compiling them into runtime camera components. - Supports some plugins of glTF. -glTF has many features, and the official website provides a large number of [examples](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0) for reference. Galacean also provides a replicated version for quick browsing. You can switch between different glTF models through the following **glTF List**. - - +glTF has many features, and the official website provides a large number of [examples](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0) for reference. ### Plugin Support diff --git a/docs/en/graphics/model/use.mdx b/docs/en/graphics/model/use.mdx index 9d35ddb6b..d18c022fb 100644 --- a/docs/en/graphics/model/use.mdx +++ b/docs/en/graphics/model/use.mdx @@ -69,8 +69,6 @@ this.engine.resourceManager The loaded model object will return a root node containing rendering information and animation information. Its usage is no different from ordinary nodes. - - ### 1. Select Scene Root Node glTF may contain multiple scene root nodes `sceneRoots`. Developers can manually select the root node they wish to instantiate. diff --git a/docs/en/graphics/particle/renderer-main-module.mdx b/docs/en/graphics/particle/renderer-main-module.mdx index 88e3a17e9..59f6c86ac 100644 --- a/docs/en/graphics/particle/renderer-main-module.mdx +++ b/docs/en/graphics/particle/renderer-main-module.mdx @@ -12,8 +12,6 @@ label: Graphics/Particle ## 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. Duration [duration](/apis/core/#MainModule-duration) determines how long the particle generator runs, in seconds. A longer duration means the particle system will generate more particles, creating a continuous effect. diff --git a/docs/en/graphics/postProcess/effects.md b/docs/en/graphics/postProcess/effects.md deleted file mode 100644 index c5156fa9a..000000000 --- a/docs/en/graphics/postProcess/effects.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -order: 1 -title: Post Process Effects ---- - -## Bloom - -[API](/apis/core/#BloomEffect) - - - -- **Down Scale**: Controls the starting resolution that this effect begins processing, you can choose `Half`, `Quarter`. - -
- -
`Half`(left), `Quarter`(right)
-
- -- **Threshold**: Filters out pixels under this level of brightness. Value is in gamma-space. - -
- -
value `0.9`(left), `0.5`(right)
-
- -- **Scatter**: Set the radius of the bloom effect. - -
- -
value `0.3`(left), `0.8`(right)
-
- -- **Intensity**: Strength of the bloom effect. - -
- -
value `1`(left), `2`(right)
-
- -- **Tint**: The tint of the bloom effect. - -
- -
value `(255, 255, 255)`(left), `(255, 0, 0)`(right)
-
- -- **Dirt Texture**: Dirtiness texture to add smudges or dust to the bloom effect. - -
- -
`OFF`(left), `ON`(right)
-
- -- **Dirt Intensity**: The strength of the dirt texture. - -
- -
value `1`(left), `5`(right)
-
- -## Tonemapping - -[API](/apis/core/#TonemappingEffect) - - - -- **Mode**: Tone mapping algorithm. You can choose `Neutral` and `ACES`. `Netural` mode is particularly suitable for situations where only range remapping is required with minimal impact on hue and saturation; `ACES` mode uses the ACES reference color space of movies, which can produce film-like contrast effects, but the performance consumption is large. - -
`OFF`(left), `Netual`(center), `ACES`(right)
diff --git a/docs/en/graphics/postProcess/effects.mdx b/docs/en/graphics/postProcess/effects.mdx new file mode 100644 index 000000000..e8fe9e8bc --- /dev/null +++ b/docs/en/graphics/postProcess/effects.mdx @@ -0,0 +1,109 @@ +--- +order: 1 +title: Post Process Effects +--- + +## Bloom + +[API](/apis/core/#BloomEffect) + + + +The Bloom effect adds a halo-like quality to images. + +### Properties + +- **Down Scale**: Controls the starting resolution of the bloom post-processing. The default is `Half`, meaning the initial downsampled resolution is half of the canvas. If precision is not a major concern, it can be switched to `Quarter` to save resources, reducing it to 1/4 of the canvas. + + + +- **Threshold**: The bloom effect filters out pixels below this brightness level. The lower the value, the larger the Bloom area. This value is in gamma space, with a default of 0.9. + + + +- **Scatter**: Sets the diffusion range of the bloom effect, default is 0.7. + + + +- **Intensity**: The strength of the bloom effect. + + + +- **Tint**: The tint color for the bloom effect. + + + +- **Dirt Texture**: Adds smudges or dust to the bloom effect using a dirt texture. + + + +- **Dirt Intensity**: The intensity of the dirt texture. + + + +## Tonemapping + +[API](/apis/core/#TonemappingEffect) + + + +Tonemapping remaps the HDR values of an image, improving the overall contrast and color saturation. + + + Tonemapping is generally used after enabling [HDR mode on the camera](/docs/graphics/postProcess/postProcess/#2相机开关). + + +For example, enabling ACES tonemapping in the image below increases the dynamic range in sun-exposed areas, revealing more details: + + + +### Properties + +- **Mode**: Tonemapping algorithm. You can choose between `Neutral` and `ACES`. The `Neutral` mode is particularly suitable for situations requiring only range remapping with minimal impact on tone and saturation. The `ACES` mode uses the cinematic ACES reference color space, which can produce film-like contrast effects but is more consuming in performance. + + \ No newline at end of file diff --git a/docs/en/graphics/renderer/meshRenderer.mdx b/docs/en/graphics/renderer/meshRenderer.mdx index e92e48193..cdd1b0cd7 100644 --- a/docs/en/graphics/renderer/meshRenderer.mdx +++ b/docs/en/graphics/renderer/meshRenderer.mdx @@ -8,8 +8,6 @@ label: Graphics/Renderer [MeshRenderer](/apis/core/#MeshRenderer) is a mesh renderer component that uses mesh objects (such as cubes) as the data source for geometric outlines. When an entity is mounted with a mesh renderer component, you only need to set its `mesh` and `material` to render the object. - - ## Usage In the editor **[Hierarchy Panel](/en/docs/interface/hierarchy)**, you can quickly create a node with a cuboid mesh renderer ( **Hierarchy Panel** -> **Right Click** -> **3D Object** -> **Cuboid** ). diff --git a/docs/en/graphics/renderer/renderer.mdx b/docs/en/graphics/renderer/renderer.mdx index 6c71b7f26..c4543f36f 100644 --- a/docs/en/graphics/renderer/renderer.mdx +++ b/docs/en/graphics/renderer/renderer.mdx @@ -48,10 +48,6 @@ console.log("bounds", renderer.bounds); console.log("isCulled", renderer.isCulled); ``` -Below shows how to get the overall bounding box of multiple `Renderers`: - - - ## Methods The `Renderer` base class mainly provides methods for setting and getting materials. It is important to note that a renderer may contain multiple materials, so the following methods are more like **manipulating an array of materials**. diff --git a/docs/en/graphics/renderer/skinnedMeshRenderer.mdx b/docs/en/graphics/renderer/skinnedMeshRenderer.mdx index c3976bbc3..8ace27f1d 100644 --- a/docs/en/graphics/renderer/skinnedMeshRenderer.mdx +++ b/docs/en/graphics/renderer/skinnedMeshRenderer.mdx @@ -20,12 +20,3 @@ The properties of the Skinned Mesh Renderer are mostly related to `skeletal anim | `blendShapeWeights` | The blend weights of BlendShapes | In models exported from the art workflow, all bone and BlendShape information is generally pre-set. Developers only need to play the specified animation clips in conjunction with the [animation system](/en/docs/animation/overview). - -## Skeletal Animation - - - -## BlendShape - - - diff --git a/docs/en/graphics/shader/builtins/blinnPhong.mdx b/docs/en/graphics/shader/builtins/blinnPhong.mdx index 5a14f844b..765812c7b 100644 --- a/docs/en/graphics/shader/builtins/blinnPhong.mdx +++ b/docs/en/graphics/shader/builtins/blinnPhong.mdx @@ -4,8 +4,6 @@ title: Blinn Phong [BlinnPhongMaterial](/apis/core/#BlinnPhongMaterial) material is one of the classic materials. Although it is not based on physical rendering, its efficient rendering algorithm and comprehensive optical components make it still applicable to many scenarios today. - - ## Editor Usage blinn diff --git a/docs/en/graphics/shader/builtins/unlit.mdx b/docs/en/graphics/shader/builtins/unlit.mdx index 6cbd04d54..73aff8349 100644 --- a/docs/en/graphics/shader/builtins/unlit.mdx +++ b/docs/en/graphics/shader/builtins/unlit.mdx @@ -4,8 +4,6 @@ title: Unlit In some simple scenes, you might not want to calculate lighting. The engine provides [UnlitMaterial](/apis/core/#UnlitMaterial), which uses the most streamlined shader code and only requires color or texture to render. Unlit material is suitable for rendering baked models. It only needs a basic texture or color to display the high-quality rendering results obtained from offline rendering. However, the downside is that it cannot display real-time light and shadow interactions because Unlit is determined by the texture and is not affected by any lighting. - - ## Editor Usage unlit diff --git a/docs/en/graphics/shader/custom.mdx b/docs/en/graphics/shader/custom.mdx index 7dbe04809..e9cd5dd59 100644 --- a/docs/en/graphics/shader/custom.mdx +++ b/docs/en/graphics/shader/custom.mdx @@ -4,8 +4,6 @@ title: Custom Shaders There may be some special rendering requirements in the business, such as water flow effects, which need to be implemented through **custom shaders** (Shader). - - ## Creating Shaders The [Shader class](/apis/core/#Shader) encapsulates vertex shaders, fragment shaders, shader precompilation, platform precision, and platform differences. Its creation and use are very convenient, and users only need to focus on the shader algorithm itself without worrying about what precision to use or which version of GLSL to write. Here is a simple demo: diff --git a/docs/en/graphics/shader/shaderLab/intro.mdx b/docs/en/graphics/shader/shaderLab/intro.mdx index 649d72dcb..bb8e876a5 100644 --- a/docs/en/graphics/shader/shaderLab/intro.mdx +++ b/docs/en/graphics/shader/shaderLab/intro.mdx @@ -12,7 +12,3 @@ Although ShaderLab introduces convenience for writing shaders, it does not repla flowchart LR A[Create Shader] --> B[Edit shaderlab] --> C[Debug shaderlab] ``` - -Below is a simple example of using ShaderLab, which includes two Shaders. The `normal` Shader defines a vertex shader that only implements MVP transformation and a fragment shader that specifies the pixel color through a Uniform variable. Additionally, the `lines` Shader is a [shadertoy](https://www.shadertoy.com/view/DtXfDr) example modified using ShaderLab. - - diff --git a/docs/en/graphics/shader/shaderLab/usage.mdx b/docs/en/graphics/shader/shaderLab/usage.mdx index 9ecbc803a..9953cd786 100644 --- a/docs/en/graphics/shader/shaderLab/usage.mdx +++ b/docs/en/graphics/shader/shaderLab/usage.mdx @@ -12,6 +12,3 @@ If we write the `material property definition` module in `ShaderLab`, the proper -## An Example of Implementing Planar Shadows Using Multi-Pass Technology - - diff --git a/docs/en/graphics/texture/2d.mdx b/docs/en/graphics/texture/2d.mdx index 943b36a0e..ce5d0ec0f 100644 --- a/docs/en/graphics/texture/2d.mdx +++ b/docs/en/graphics/texture/2d.mdx @@ -53,9 +53,7 @@ texture.setImageSource(video); > `setImageSource` can only synchronize the data of that frame, but the video changes every frame. If you need the texture to change synchronously, you need to execute it in the script's onUpdate hook. -For scenarios where the texture content needs to be frequently updated, such as videos, you need to disable mipmap and set the texture usage to Dynamic when creating the texture to achieve better performance. The sample code is as follows: - - +For scenarios where the texture content needs to be frequently updated, such as videos, you need to disable mipmap and set the texture usage to Dynamic when creating the texture to achieve better performance. ### setPixelBuffer diff --git a/docs/en/graphics/texture/compression.mdx b/docs/en/graphics/texture/compression.mdx index b78dc27f2..b92a40c1d 100644 --- a/docs/en/graphics/texture/compression.mdx +++ b/docs/en/graphics/texture/compression.mdx @@ -23,8 +23,6 @@ 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. KTX2 can be generated using: diff --git a/docs/en/graphics/texture/rtt.mdx b/docs/en/graphics/texture/rtt.mdx index 72ff24457..808f93221 100644 --- a/docs/en/graphics/texture/rtt.mdx +++ b/docs/en/graphics/texture/rtt.mdx @@ -50,5 +50,3 @@ class switchRTScript extends Script { cameraEntity.addComponent(switchRTScript); ``` - - diff --git a/docs/en/graphics/texture/texture.mdx b/docs/en/graphics/texture/texture.mdx index f9dca4d1c..98316545f 100644 --- a/docs/en/graphics/texture/texture.mdx +++ b/docs/en/graphics/texture/texture.mdx @@ -66,7 +66,6 @@ The texture sampling range is `[0,1]`. When the texture UV coordinates exceed th | Repeat | Resamples from [0,1] when out of range | | Mirror | Mirrors sampling from [1,0] when out of range | - ### Filter Mode @@ -78,14 +77,11 @@ Generally, texels and screen pixels do not correspond exactly. We can control th | Bilinear | Uses the average value of the nearest 2\*2 texel matrix | | Trilinear | Applies average filtering to the mipmap levels based on bilinear filtering | - ### Anisotropic Filtering Level Anisotropic filtering technology can make textures appear clearer when viewed at oblique angles. As shown in the figure below, the end of the texture becomes clearer as the anisotropic filtering level increases. However, use it with caution; the higher the value, the greater the GPU computation. - - ## General Settings | Setting | Value | @@ -126,8 +122,6 @@ const cubeTexture = new TextureCube( ); // 第 4 个参数 ``` - - ### flipY flipY is used to control whether the texture is flipped along the Y-axis, i.e., upside down. **The engine and editor disable it by default**. If you need to change the default behavior of flipY, you can do so via the [setImageSource](/apis/core/#Texture2D-setImageSource) method: diff --git a/docs/en/how-to-contribute.mdx b/docs/en/how-to-contribute.mdx index a527dcfa7..13604b55f 100644 --- a/docs/en/how-to-contribute.mdx +++ b/docs/en/how-to-contribute.mdx @@ -201,30 +201,6 @@ engine.resourceManager engine.run(); }); - -### 示例 - -#### 编写示例代码 - -我们现在提供两种方式让你组织示例代码： - -- 在 `examples/` 文件夹下新建 `.ts` 示例文件来组织示例代码 -- 在 `examples/` 文件夹下新建一个 **示例文件夹**，最后通过 `示例文件夹/index.ts` 来暴露示例代码 - -#### 嵌入示例 - -````mdx filename="light.mdx" -... - -Ambient light emits from all directions and enters the eye, as shown in the example below: - - - -... -```` - - - ## New Documentation Adding new documentation may involve more steps than before (in some cases). It should be noted in advance that in the new official website, the file path is the route. At the same time, the order and titles of the documents need to be configured using `_meta.json`. diff --git a/docs/en/input/framebuffer-picker.mdx b/docs/en/input/framebuffer-picker.mdx index f2edddcac..7cbcd3c0e 100644 --- a/docs/en/input/framebuffer-picker.mdx +++ b/docs/en/input/framebuffer-picker.mdx @@ -9,8 +9,6 @@ In 3D applications, it is often necessary to pick objects in the scene. [Ray-box When the picking frequency is not high, you can consider using the `FramebufferPicker` component with **pixel-level accuracy**. When the picking frequency is too high, developers need to evaluate whether the performance overhead is suitable for the business scenario, as this component involves CPU-GPU communication at the underlying level, i.e., calling `gl.readPixels`. - - ## Create Framebuffer Picking ```typescript diff --git a/docs/en/input/keyboard.mdx b/docs/en/input/keyboard.mdx index 5cef7b730..20acb566d 100644 --- a/docs/en/input/keyboard.mdx +++ b/docs/en/input/keyboard.mdx @@ -36,12 +36,6 @@ class KeyScript extends Script { } ``` -## Practical Example - -This time, let's use the spacebar to control Angry Birds. - - - ## State Dictionary | Key State | isKeyHeldDown | isKeyDown | isKeyUp | diff --git a/docs/en/input/pointer.mdx b/docs/en/input/pointer.mdx index 9bd31f139..9f9bae153 100644 --- a/docs/en/input/pointer.mdx +++ b/docs/en/input/pointer.mdx @@ -36,8 +36,6 @@ timeline …… ``` - - ### Touch Buttons Referring to the [W3C standard](https://www.w3.org/TR/uievents/#dom-mouseevent-button) and [Microsoft related documentation](https://learn.microsoft.com/en-us/dotnet/api/system.windows.input.mousebutton?view=windowsdesktop-6.0), Galacean defines touch buttons as follows: @@ -54,9 +52,6 @@ Referring to the [W3C standard](https://www.w3.org/TR/uievents/#dom-mouseevent-b | [XButton4](/apis/core/#PointerButton-XButton4) | Extended button | | …… | …… | -Combining touch buttons can easily detect the behavior of touch points triggered in this frame: - - ### Touch Callbacks @@ -71,15 +66,10 @@ You only need to add touch callbacks to an Entity with a Collider component to e | [onPointerClick](/apis/core/#Script-onPointerClick) | Triggered once when the touch point is pressed and released within the Entity's collider range | | [onPointerDrag](/apis/core/#Script-onPointerDrag) | Continuously triggered when the touch point is pressed within the Entity's collider range until the touch point is no longer pressed | -> ⚠️ Touch callbacks **depend on the physics engine**. Please ensure the physics engine is initialized before using this feature. + +Touch callbacks **depend on the physics engine**. Please ensure the physics engine is initialized before using this feature. + -Example: - -- The leftmost cube responds to Enter and Exit events, changing color when the mouse moves over it and when the mouse leaves. -- The middle cube responds to Drag events, allowing you to drag the cube anywhere in space with the mouse. -- The rightmost cube responds to Click events (first down, then up), changing color when the mouse clicks on it. - - ### Raycasting @@ -104,17 +94,13 @@ if (scene.physics.raycast(ray, 100, hitResult)) { } ``` -The following example provides a more intuitive understanding of this process. The main camera is equipped with auxiliary lines, and the side view camera can fully observe the process of the main camera's raycasting detecting the collider. - - - ## Compatibility As of February 2024, the compatibility of PointerEvent across different platforms has reached [96.35%](https://caniuse.com/?search=PointerEvent). -Design ideas can be referenced at: https://github.com/galacean/engine/wiki/Input-system-design. - -> ⚠️ If you encounter compatibility issues on a platform, you can raise an issue at https://github.com/galacean/polyfill-pointer-event. + +️ If you encounter compatibility issues on a platform, you can raise an issue at https://github.com/galacean/polyfill-pointer-event. + ## QA diff --git a/docs/en/input/wheel.mdx b/docs/en/input/wheel.mdx index 661e55a93..ea2ad2293 100644 --- a/docs/en/input/wheel.mdx +++ b/docs/en/input/wheel.mdx @@ -10,8 +10,3 @@ Galacean's wheel input is based on [WheelEvent](https://www.w3.org/TR/uievents/# ## Usage image.png - -Here is an example of using the wheel to control the camera distance. - - - diff --git a/docs/en/performance/stats.mdx b/docs/en/performance/stats.mdx index 8fdd7299c..c424d121b 100644 --- a/docs/en/performance/stats.mdx +++ b/docs/en/performance/stats.mdx @@ -14,7 +14,3 @@ import { Stats } from "@galacean/engine-toolkit-stats"; cameraEntity.addComponent(Camera); cameraEntity.addComponent(Stats); ``` - -## Example - - diff --git a/docs/en/physics/collider/colliderShape.mdx b/docs/en/physics/collider/colliderShape.mdx index d0191a8c3..8bd530ac0 100644 --- a/docs/en/physics/collider/colliderShape.mdx +++ b/docs/en/physics/collider/colliderShape.mdx @@ -148,9 +148,6 @@ function createCompoundCollider(entity: Entity) { } ``` -#### Example Reference - - ### Common Scenarios 1. **Creating Ground** diff --git a/docs/en/physics/collider/event.mdx b/docs/en/physics/collider/event.mdx index 1dac58452..6bb4187a6 100644 --- a/docs/en/physics/collider/event.mdx +++ b/docs/en/physics/collider/event.mdx @@ -83,7 +83,3 @@ class EventHandler extends Script { } } ``` - -### Example - - diff --git a/docs/en/physics/debug.mdx b/docs/en/physics/debug.mdx index 710be990d..38e74291c 100644 --- a/docs/en/physics/debug.mdx +++ b/docs/en/physics/debug.mdx @@ -12,5 +12,4 @@ It's very easy to use - just mount the `WireframeManager` script and set its ass ```typescript const wireframe = rootEntity.addComponent(WireframeManager); wireframe.addCollideWireframe(collider); -``` - +``` \ No newline at end of file diff --git a/docs/en/physics/joint/overview.mdx b/docs/en/physics/joint/overview.mdx index 72eda43ae..d9dada1b8 100644 --- a/docs/en/physics/joint/overview.mdx +++ b/docs/en/physics/joint/overview.mdx @@ -90,9 +90,6 @@ joint.connectedMassScale = 1.0; joint.automaticConnectedAnchor = true; ``` -For example of using these physical constraint components, see: - - For detailed script usage of each joint type, please refer to their respective documentation: - [FixedJoint](/docs/physics/joint/fixedJoint) - [SpringJoint](/docs/physics/joint/springJoint) diff --git a/docs/en/physics/manager.mdx b/docs/en/physics/manager.mdx index ca630e517..af5dd104c 100644 --- a/docs/en/physics/manager.mdx +++ b/docs/en/physics/manager.mdx @@ -65,8 +65,6 @@ scene.physics.gravity.set(0, -9.81, 0); ## Using Raycasting - - A ray can be understood as an infinite line emitted from a point in a certain direction in the 3D world. Raycasting is widely used in 3D applications: - Used to pick objects in the 3D scene when the user clicks the screen diff --git a/docs/en/quick-start/core-concept.md b/docs/en/quick-start/core-concept.md deleted file mode 100644 index 55e7bd8fb..000000000 --- a/docs/en/quick-start/core-concept.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -order: 1 -title: Core Concepts -type: Basics -group: Getting Started -label: Basics/GettingStarted ---- - -Let's understand the core concepts in the editor and runtime through an example of a cube. - -## Editor Usage - -### Creating a Project - -After logging in, you will first see the homepage of the editor, where all your created projects are displayed. Use the button in the top right corner to create a project. After clicking, you can choose the type of project to create, either 2D or 3D. Let's choose a 3D Project. - -image-20230921161225962 - -### Creating a Cube - -First, we create a new entity in the **Hierarchy Panel** ([What is an entity?](https://galacean.antgroup.com/#/en/docs/latest/cn/entity)). - -image-20230921161422138 - -Select the newly created entity node with the left mouse button. The **[Inspector Panel](/en/docs/interface/inspector)** on the right will display some configurable properties of the current entity. Since our entity is not currently associated with any components ([What is a component?](https://galacean.antgroup.com/#/en/docs/latest/cn/entity)), we can only adjust basic properties like the entity's coordinate information for now. - -Next, click the `Add Component` button in the **[Inspector Panel](/en/docs/interface/inspector)** to bring up the component menu, then choose to add a `Mesh Renderer` component ([What is a Mesh Renderer?](/en/docs/graphics-renderer-meshRenderer)). - -image-20230921161622497 - -Now, we have added a `Mesh Renderer` component to the current entity. However, we still cannot see this object in the main editing area. We need to add Mesh and Material to this component. The editor will automatically add a non-editable default material for the `Mesh Renderer` component. We just need to add a Cuboid Mesh to the Mesh property of the component to see it in the scene. - -image-20230921161758541 - -Since the default material is quite simple, let's create a custom material next. - -You can also quickly add a cube model by clicking the `3D Object` → `Cuboid` in the add entity button, which will automatically add a `Mesh Renderer` component for you: - - - -### Creating Materials - -First, let's upload textures. You can drag these texture files directly to the **Asset Management Panel** to upload them in bulk. - -After uploading, you can see these files in the panel, which are roughness texture, normal texture, and base color texture. - -image-20230921172453377 - -First, in the **Asset Management Panel**, select `Right-click` → `Create` → `Material` to let the editor create a default PBR material. Select this material, and the **[Inspector Panel](/en/docs/interface/inspector)** will display the configuration options for the current material. The default material is quite simple, so we can add some texture maps to this material, such as base texture, roughness texture, and normal map. - - -![image-20230921173056885](https://gw.alipayobjects.com/zos/OasisHub/65bf4b63-3f09-4ad6-abc9-a9d26e173783/image-20230921173056885.png) - -Next, we will configure these textures to the corresponding properties of the material. After configuration, we select the entity node created in the previous step again, and modify the `Material` property of the `Mesh Renderer` component to the custom material we just created. A cube with a metallic texture is successfully created. - -![Untitled](https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*ni3KQ7jGK-0AAAAAAAAAAAAADqiTAQ/original) - -However, the cube looks a bit dark now, so we need to brighten the [lighting](https://galacean.antgroup.com/#/en/docs/latest/en/light) in the scene. We select the `DirectLight` node in the node tree, then increase the `Intensity` property in the inspector. - -Now it looks more normal. -![Untitled](https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*n151R6vZ59oAAAAAAAAAAAAADqiTAQ/original) - -### Create a Script - -Next, we will bind a `Script` component to this node ([What is a Script component?](https://galacean.antgroup.com/#/en/docs/latest/en/script)). - -1. We continue to add a `Script` component in the **[Inspector Panel](/en/docs/interface/inspector)** in the same way as above -2. Next, in the **[Assets Panel](/en/docs/assets/interface)**, `right-click` → `Create` → `Script` to create a `Script` asset -3. Finally, in the **[Inspector Panel](/en/docs/interface/inspector)**, bind the newly created script file to the script component - -> ⚠️ Note that if you do not bind the script asset to the entity's script component, the script will not run - -After creating the script, we can **double-click** it to jump to the code editor page. - -![image-20230921180953712](https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*gmIjSbbNHZ0AAAAAAAAAAAAADhuCAQ/original) - -Once in the code editor, we write a very simple rotation function: - -```ts -// Script.ts -import { Script } from "@galacean/engine"; - -export default class extends Script { - onUpdate(deltaTime: number) { - this.entity.transform.rotate(1, 1, 1); - } -} -``` - -After writing the code, save (`⌘+s`), and you can see the effect of the entire scene in the preview area on the right in real-time. - -### Export the Project - -Now that we have completed the basic development work in the editor, let's export this project to the local environment. - -Click the **Download** button on the left toolbar, which will bring up the export interface. Here, change the project name to "box," then click the `Download` button, and the editor will package the project into a `box.zip` file for download. - -![image-20230921162204014](https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*mmoIRqIt30oAAAAAAAAAAAAADhuCAQ/original) - -After the project is packaged, open the box project in VsCode, run `npm install` & `npm run dev`, and you will see that the project is running correctly. - -## Script Usage - - - -## Import Modules - -We start writing engine code using [TypeScript](https://www.typescriptlang.org/). If you are not yet comfortable with TypeScript, you can still run using JavaScript and enjoy the benefits of engine API hints (by using IDEs like [VSCode](https://code.visualstudio.com/)). - -Returning to our programming, to implement such a feature, we need to import the following Galacean engine classes into our project: - -Let's start by getting to know these classes: - -| Type | Class Name | Definition | -| -------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| WebGL Engine | [WebGLEngine](/apis/rhi-webgl/WebGLEngine) | WebGL platform engine, supporting WebGL 1.0 and WebGL 2.0, it can control all behaviors of the canvas, including resource management, scene management, execution/pause/resume, vertical synchronization, etc. (See [Engine](/en/docs/core/engine) section for details.) | -| Component | [Camera](/apis/core/#Camera) | Camera, an abstract concept of 3D projection in a graphics engine, similar to a camera or eye in the real world. Without a camera, the canvas will not render anything. (See [Camera](/en/docs/graphics-camera) section for details.) | -| | [DirectLight](/apis/core/#DirectLight) | Direct light, a type of lighting that adds depth to the scene. Using lighting can create a more realistic 3D scene. (See [Lighting](/en/docs/graphics-light) section for details.) | -| | [Script](/apis/core/#Script) | Script, a link between engine capabilities and game logic. It can be used to extend the engine's functionality, and game logic code can be written in the lifecycle hooks provided by script components. (See [Script](/en/docs/script) section for details.) | -| | [MeshRenderer](/apis/core/#MeshRenderer) | Mesh renderer, using a mesh object (in this example, a cube) as the data source for the geometric outline. | -| Geometry and Material Classes | [PrimitiveMesh](/apis/core/#PrimitiveMesh) | Primitive mesh, providing convenient methods for creating mesh objects such as cubes, spheres, etc. (See [Built-in Geometry](/en/docs/graphics-model) section for details.) | -| | [BlinnPhongMaterial](/apis/core/#BlinnPhongMaterial) | Material defines how to render this cube, BlinnPhong material is one of the classic materials. (See [Material](/en/docs/graphics-material) section for details.) | -| Math Library Classes | [Vector3](/apis/math/#Vector3), [Vector4](/apis/math/#Vector4), [Color](/apis/math/#Color) | These classes are basic units for mathematical calculations, used to calculate the position, color, etc., of the cube. (See [Math Library](/en/docs/core/math) section for details.) | - - -## Create Engine Instance - -Create an engine instance, where the `canvas` parameter is the `id` of the _Canvas_ element. If the `id` is different, please replace it accordingly. As mentioned above, reset the canvas dimensions using the [resizeByClientSize](/apis/rhi-webgl/WebCanvas#resizeByClientSize) method. - -```typescript -const engine = await WebGLEngine.create({ canvas: "canvas" }); -engine.canvas.resizeByClientSize(); -``` - -## Create Root Node of the Scene - -It is worth noting that an engine instance may contain multiple scene instances. To add a cube to the currently active scene, you need to obtain the currently active scene through the engine's scene manager `engine.sceneManager`. - -Once you have the scene, create a **root entity** using the scene's `createRootEntity` method. The root entity in the scene is the root node of the scene tree. - -```typescript -const scene = engine.sceneManager.activeScene; -const rootEntity = scene.createRootEntity("root"); -``` - -## Create a Camera Entity - -In Galacean Engine, functionalities are added to entities in the form of components. First, create an entity to add a camera component. - -After creation, use the entity's built-in transform component `transform` to change the position and orientation of the camera. Then add a camera component `Camera` to this entity. - -```typescript -let cameraEntity = rootEntity.createChild("camera_entity"); - -cameraEntity.transform.position = new Vector3(0, 5, 10); -cameraEntity.transform.lookAt(new Vector3(0, 0, 0)); - -let camera = cameraEntity.addComponent(Camera); -``` - -## Create Lighting - -Similarly, lighting is also attached to entities in the form of components. After creating the entity, add a directional light component `DirectLight`, set the color, intensity properties, and light angle of the directional light component to achieve the desired lighting effect. - -```typescript -let lightEntity = rootEntity.createChild("light"); - -let directLight = lightEntity.addComponent(DirectLight); -directLight.color = new Color(1.0, 1.0, 1.0); -directLight.intensity = 0.5; - -lightEntity.transform.rotation = new Vector3(45, 45, 45); -``` - -## Create a Cube - -Create another entity to attach a cube mesh renderer component. `MeshRenderer` is the mesh renderer component, set the `.mesh` property to the cube data created by `PrimitiveMesh`, and set the cube's material to BlinnPhong using the `setMaterial` method. - -```typescript -let cubeEntity = rootEntity.createChild("cube"); -let cube = cubeEntity.addComponent(MeshRenderer); -cube.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2); -cube.setMaterial(new BlinnPhongMaterial(engine)); -``` - -## Start the Engine - -Everything is set up, let's start the engine with just one line of code! - -```typescript -engine.run(); -``` diff --git a/docs/en/quick-start/flappy-bird.md b/docs/en/quick-start/flappy-bird.mdx similarity index 88% rename from docs/en/quick-start/flappy-bird.md rename to docs/en/quick-start/flappy-bird.mdx index 0657d0e61..652ed66ea 100644 --- a/docs/en/quick-start/flappy-bird.md +++ b/docs/en/quick-start/flappy-bird.mdx @@ -12,7 +12,7 @@ label: Basics/GettingStarted Flappy Bird is a 2D project. The 2D template provided on the editor's homepage is implemented step by step according to this document. Let's start by creating a `2D Project` using the editor's `New Project` feature. (If you encounter any issues, refer to **Home** -> **Templates** -> **Pixel Bird**) -image-20231007170002181 +image-20231007170002181 ## Prepare Resources @@ -24,25 +24,25 @@ Flappy Bird relies on a set of images. You can download the image package to you - Ground, pipes - Game restart button -image-20231007170002181 +image-20231007170002181 ### Upload Resources -Go back to the scene editor, click the upload button on the resource panel image-20231007145111353, and select `Sprite`. This will open the file viewer of your operating system. Choose all the images from the FlappyBird directory. After uploading, as shown in the image below, the editor creates a [Texture](/en/docs/graphics-texture) resource and a [Sprite](/en/docs/graphics/2D/sprite) resource for each image (Sprites are distinguished from Texture resources by a gray rounded rectangle background). In the following steps, we will only focus on Sprite resources. +Go back to the scene editor, click the upload button on the resource panel image-20231007145111353, and select `Sprite`. This will open the file viewer of your operating system. Choose all the images from the FlappyBird directory. After uploading, as shown in the image below, the editor creates a [Texture](/en/docs/graphics-texture) resource and a [Sprite](/en/docs/graphics/2D/sprite) resource for each image (Sprites are distinguished from Texture resources by a gray rounded rectangle background). In the following steps, we will only focus on Sprite resources. -image-20231007145451371 +image-20231007145451371 At this point, we have uploaded the resources. However, if you have a tendency for tidiness, seeing these scattered resources may trigger your urge to organize them. Let's create a folder and rename it to _Sprites_. Then, select all the recently uploaded resources and drag them into the _Sprites_ directory. This not only makes the resource panel more organized but also prepares us for creating a [Sprite Atlas](/en/docs/graphics/2D/spriteAtlas) resource in the next step. ### Create Sprite Atlas -To achieve better runtime performance, we choose to pack these Sprite resources into an Atlas resource. Click the image-20231007152415467 button and select `Sprite Atlas`. After creating it, select the Sprite Atlas and use the `Add to List` button on the **[Inspector Panel](/en/docs/interface/inspector)** to add all Sprite resources to the list. +To achieve better runtime performance, we choose to pack these Sprite resources into an Atlas resource. Click the image-20231007152415467 button and select `Sprite Atlas`. After creating it, select the Sprite Atlas and use the `Add to List` button on the **[Inspector Panel](/en/docs/interface/inspector)** to add all Sprite resources to the list. -image-20231007171348757 +image-20231007171348757 点击 `Pack and Preview` button to see Atlas creation success: -image-20231007153448666 +image-20231007153448666 Congratulations, you have completed the resource upload and management operations up to this point. Next, we will proceed to building the game scene. @@ -56,7 +56,7 @@ Select the `Camera` node in the hierarchy panel to preview how the scene will re > If you find the screen too large or too small, you can adjust the `Orthographic Size` of the orthographic camera to scale it. -image-20231007162550749 +image-20231007162550749 ### Add the Bird @@ -66,19 +66,19 @@ Similarly, drag the Sprite of the bird (`bird3-spr.png`) into the scene. The bir As the game progresses, pipes will repeatedly appear on the screen in pairs of upper and lower pipes. Here's a little trick: you can set the `Scale` value of the upper pipe to `-1` to elegantly achieve flipping. -image-20231007163240028 +image-20231007163240028 During the game, the height at which pipes appear is random, but the assets we have on hand have fixed heights. No worries, just adjust the `Sprite Render Mode` to stretch without loss, allowing us to stretch certain assets without distortion. - + Here's a little trick: setting the `pivot` property of the referenced `sprite` asset to `bottom` can avoid re-anchoring the position every time you adjust the height. -image-20231007163240028 +image-20231007163240028 Considering that pipes will repeat, we can group a pair of pipes into a `PipeMother` group in the node tree and place it under the `Pipe` node. This way, by binding a script component to the Pipe later, we can access `PipeMother` to achieve pipe reuse. -image-20231007163400680 +image-20231007163400680 ### Add the Ground @@ -90,24 +90,23 @@ Here are the steps: 2. In the **[Inspector Panel](/en/docs/interface/inspector)**, add a `Sprite Renderer` component by clicking the `Add Component` button, set the `SpriteRenderer DrawMode Info` property to `Tiled`, and set the width to `8.14`. -```markdown - image-20231007173243980 + image-20231007173243980 3. At this point, we have a fully tiled ground. Next, we can make it move by creating animation clips! See [Animation Clip Editing](/en/docs/animation/clip) for details. - + ### Adding a Mask After adding the ground, we noticed that the left and right sides seem to be exposed! In such cases, you just need to add a mask to the sprite renderer. See [Sprite Mask Component](/en/docs/graphics/2D/spriteMask) for details. - + ### Adding GUI The GUI includes score display and restart button. Drag two sprites, one for the score (`0.png`) and the other for the restart button (`restart.png`), into the scene and place them under a newly created `GUI` node. -image-20231007180819265 +image-20231007180819265 With this, the interface is set up! Take a look at the complete structure of the node tree on the left. A good tree structure is important for managing complex scenes. @@ -124,7 +123,7 @@ In this project, we need to add physical feedback when **the bird touches the pi Colliders describe the pose and shape of objects, so when adding colliders, they should closely match the actual size of the objects being displayed. See [Colliders](/en/docs/physics-collider) for more information on using colliders. Here, we demonstrate adding a collider to the bird. - + #### Handling Collision Callbacks @@ -259,7 +258,7 @@ timeline After disassembling, it can be found that if we simply classify animations as idle animation, flying animation, and falling animation, considering that when idle, we need to play sprite switching and vertical easing animations, and when flying, we also need to play sprite switching and upward falling animations. The overlapping parts not only increase the workload during animation editing but also require additional consideration of whether the sprite switching animations between these two animations are natural. Therefore, we further atomize each `AnimatorState` , split the parts of sprite switching and coordinate changes, and set them in different `Layers` separately. Different `Layers` are independent of each other and can play their animations simultaneously, set their overlay modes and weights. For more details, refer to the [animation component](/en/docs/animation/system/). -image-20231007180819265 +image-20231007180819265 Let each `Layer` control its own `AnimatorState` separately for clearer logic. @@ -348,7 +347,7 @@ class Bird extends Script { Since animation segment editing can only edit absolute coordinate or rotation changes, for example, each flight animation, its rotation change is absolute, but the coordinates are relative. Therefore, we can implement this in the `StateMachineScript`, using the `Fly` animation as an example: - + Then open this script and add the free fall coordinate changes: diff --git a/docs/en/quick-start/overview.md b/docs/en/quick-start/overview.mdx similarity index 100% rename from docs/en/quick-start/overview.md rename to docs/en/quick-start/overview.mdx diff --git a/docs/en/script/attributes.md b/docs/en/script/attributes.mdx similarity index 100% rename from docs/en/script/attributes.md rename to docs/en/script/attributes.mdx diff --git a/docs/en/script/class.md b/docs/en/script/class.mdx similarity index 98% rename from docs/en/script/class.md rename to docs/en/script/class.mdx index 62bdaf5a8..ef7c36a53 100644 --- a/docs/en/script/class.md +++ b/docs/en/script/class.mdx @@ -15,7 +15,7 @@ Additionally, it provides a rich set of lifecycle callback functions. As long as ## Script Lifecycle -Script Lifecycle-zh +Script Lifecycle-zh > [onBeginRender](/apis/core/#Script-onBeginRender) and [onEndRender](/apis/core/#Script-onEndRender) are somewhat different from the others. > diff --git a/docs/en/script/communication.md b/docs/en/script/communication.mdx similarity index 100% rename from docs/en/script/communication.md rename to docs/en/script/communication.mdx diff --git a/docs/en/script/script.md b/docs/en/script/script.mdx similarity index 100% rename from docs/en/script/script.md rename to docs/en/script/script.mdx diff --git a/docs/en/xr/camera.md b/docs/en/xr/camera.mdx similarity index 100% rename from docs/en/xr/camera.md rename to docs/en/xr/camera.mdx diff --git a/docs/en/xr/compatibility.md b/docs/en/xr/compatibility.mdx similarity index 93% rename from docs/en/xr/compatibility.md rename to docs/en/xr/compatibility.mdx index 865d3f1b2..1ca024060 100644 --- a/docs/en/xr/compatibility.md +++ b/docs/en/xr/compatibility.mdx @@ -50,5 +50,5 @@ xrManager.isSupportedFeature(XRImageTracking); Android supports some experimental features, but they are turned off by default. You can enable them by setting flags: **Open Chrome on Android** -> **Log in to chrome://flags** -> **Search for WebXR** -> **Enable WebXR Incubations** -image.png +image.png diff --git a/docs/en/xr/features.md b/docs/en/xr/features.mdx similarity index 96% rename from docs/en/xr/features.md rename to docs/en/xr/features.mdx index abac92a28..619e91d2d 100644 --- a/docs/en/xr/features.md +++ b/docs/en/xr/features.mdx @@ -70,9 +70,7 @@ anchorTracking.addChangedListener( xrManager.addFeature(XRPlaneTracking, XRPlaneMode.EveryThing); ``` -We can track real-world planes and mark them with transparent grids and coordinate systems: - - +We can track real-world planes and mark them with transparent grids and coordinate systems. ## Image Tracking @@ -93,9 +91,7 @@ We can track real-world planes and mark them with transparent grids and coordina xrManager.addFeature(XRImageTracking, [refImage]); ``` -We can track real-world images and mark them with coordinate systems: - - +We can track real-world images and mark them with coordinate systems. ## Collision Detection diff --git a/docs/en/xr/input.md b/docs/en/xr/input.mdx similarity index 100% rename from docs/en/xr/input.md rename to docs/en/xr/input.mdx diff --git a/docs/en/xr/manager.md b/docs/en/xr/manager.mdx similarity index 100% rename from docs/en/xr/manager.md rename to docs/en/xr/manager.mdx diff --git a/docs/en/xr/overall.md b/docs/en/xr/overall.mdx similarity index 93% rename from docs/en/xr/overall.md rename to docs/en/xr/overall.mdx index 23850660d..e83183c4e 100644 --- a/docs/en/xr/overall.md +++ b/docs/en/xr/overall.mdx @@ -15,7 +15,7 @@ Galacean has designed XR to be clean and flexible: - Flexible: Pluggable functionality makes development easier. - Future-oriented: Multi-backend design allows for adaptation to different platforms and interfaces in the future. -image.png +image.png ## Module Management diff --git a/docs/en/xr/quickStart/debug.md b/docs/en/xr/quickStart/debug.mdx similarity index 80% rename from docs/en/xr/quickStart/debug.md rename to docs/en/xr/quickStart/debug.mdx index 564bf35b7..33e2d59e9 100644 --- a/docs/en/xr/quickStart/debug.md +++ b/docs/en/xr/quickStart/debug.mdx @@ -17,7 +17,7 @@ First, prepare the debugging environment. Use the Chrome browser that supports W Once prepared, you can preview the XR project in the editor: -image.png +image.png Of course, you can also preview by downloading the project to the local script build: @@ -26,7 +26,7 @@ npm install npm run https ``` -image.png +image.png > WebXR is only available in a secure environment (HTTPS), so you need to enable HTTPS when building the project for debugging. @@ -40,11 +40,11 @@ To support mobile debugging, the following conditions must be met: > `Google Play Services for AR` is an augmented reality platform developed by Google (ARCore). Some phones come with this app pre-installed. If not, you can search for it in the app store. The image below shows the search result in the Xiaomi app store. -image.png +image.png With all the above conditions met, you can preview the locally built project on your phone (ensure that **the phone and computer are on the same local network**): -image.png +image.png ### Debugging diff --git a/docs/en/xr/quickStart/develop.md b/docs/en/xr/quickStart/develop.mdx similarity index 80% rename from docs/en/xr/quickStart/develop.md rename to docs/en/xr/quickStart/develop.mdx index 523d830a4..4fee61980 100644 --- a/docs/en/xr/quickStart/develop.md +++ b/docs/en/xr/quickStart/develop.mdx @@ -20,13 +20,13 @@ flowchart LR On the **[Home Page](/en/docs/interface/intro/#%E9%A6%96%E9%A1%B5)** click **Create Project**, then in **[Project Settings](/en/docs/interface/sidebar/#project-settings)** select the physics backend as `WebXR`. -image.png +image.png ### Add XR Node In the **[Hierarchy Panel](/en/docs/interface/hierarchy/)** add an XR node. -image.png +image.png > Adding an XR node will automatically create and select `origin` and `camera`, so there should be no other `Camera` components in the scene unless intentionally added. @@ -36,7 +36,7 @@ In the **[Hierarchy Panel](/en/docs/interface/hierarchy/)** add an XR node. If you have followed the [Debug XR Project](/en/docs/xr/quickStart/debug/) requirements using Chrome and the [Immersive Web Emulator](https://chromewebstore.google.com/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik) plugin, you can preview directly. -image.png +image.png ### XR Capabilities @@ -51,7 +51,7 @@ Add the `XR Anchor Manage` component to any active Entity to add anchor tracking | Anchor List | List of tracked anchors, determined by Position and RotationQuaternion in real space | | Prefab | If a prefab is set, it will be instantiated and attached to the tracked anchor when the anchor is tracked | -image.png +image.png #### Image Tracking @@ -62,7 +62,7 @@ Add the `XR Image Manage` component to any active Entity to add image tracking c | Image List | List of tracked images, add `ReferenceImageAssets` to determine the tracked image information | | Prefab | If a prefab is set, it will be instantiated and attached to the tracked anchor when the anchor is tracked | -image.png +image.png Among them, the tracked image is an asset in the editor. You can upload the tracked image by right-clicking on the blank space of the **[Asset Panel](/en/docs/assets/interface/)** → **Upload** → **XRReferenceImage** → **select the corresponding image**. @@ -82,7 +82,7 @@ Add the `XR Plane Manage` component to any active Entity to enable plane trackin | Detection Mode | The type of plane detection, including `None`, `Horizontal`, `Vertical`, `EveryThing`. It can determine the type of plane to be tracked. The default is `EveryThing`, but in `WebXR`, it usually detects horizontal planes | | Prefab | If a prefab is set, the prefab will be instantiated and attached to the tracked plane when the plane is tracked | -image.png +image.png ### Note @@ -106,9 +106,3 @@ engine.xrManager.sessionManager.isSupportedMode(xrMode).then( } ); ``` - -## Script Development - -Before entering pure code development, please first understand some [XR Managers](/en/docs/xr/system/manager/) content. Below is the simplest example to enable AR interaction: - - diff --git a/docs/en/xr/session.md b/docs/en/xr/session.mdx similarity index 100% rename from docs/en/xr/session.md rename to docs/en/xr/session.mdx diff --git a/docs/en/xr/start.md b/docs/en/xr/start.mdx similarity index 82% rename from docs/en/xr/start.md rename to docs/en/xr/start.mdx index 7065ce460..6e0dac4d5 100644 --- a/docs/en/xr/start.md +++ b/docs/en/xr/start.mdx @@ -24,13 +24,13 @@ Since we are introducing WebXR for the backend, taking an AR project as an examp > `Google Play Services for AR` is an augmented reality platform (ARCore) developed by Google. Some phones come with this app pre-installed. If not, you can search for it in the app store. The image below shows the search result in the Xiaomi app store. -image.png +image.png ### PC Debugging For PC Chrome, it is recommended to install [Immersive Web Emulator](https://chromewebstore.google.com/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik), a tool developed by Meta that allows you to easily debug WebXR on Chrome. As shown in the image below, we use this tool to simulate XR devices for debugging on PC Chrome. -image.png +image.png > The left side of the image above shows the XR business panel view, and the right side shows the developer tools. @@ -42,7 +42,7 @@ After confirming the installation of `Google Play Services for AR` on an Android After preparing the above, you can quickly create an XR project by clicking on **Templates** -> **XR Template** in the **Menu View** on the **Editor Homepage**. -image.png +image.png ## PC Preview @@ -55,7 +55,7 @@ npm run https Then open the corresponding URL in Chrome to debug the XR project. -image.png +image.png > WebXR is only available in a secure environment (HTTPS), so enabling HTTPS is required when building and debugging the project. @@ -67,7 +67,7 @@ As mentioned above, with the installation of `Immersive Web Emulator`, open the Before the project is officially released, you can test it on both your phone and computer within the same local network. -image.png +image.png ### Debugging diff --git a/docs/en/xr/system/camera.md b/docs/en/xr/system/camera.mdx similarity index 100% rename from docs/en/xr/system/camera.md rename to docs/en/xr/system/camera.mdx diff --git a/docs/en/xr/system/features.md b/docs/en/xr/system/features.mdx similarity index 91% rename from docs/en/xr/system/features.md rename to docs/en/xr/system/features.mdx index 3ea0e8423..1a801386d 100644 --- a/docs/en/xr/system/features.md +++ b/docs/en/xr/system/features.mdx @@ -66,9 +66,7 @@ anchorTracking.addChangedListener( xrManager.addFeature(XRPlaneTracking, XRPlaneMode.EveryThing); ``` -We can track real-world planes and mark them with transparent grids and coordinate systems: - - +We can track real-world planes and mark them with transparent grids and coordinate systems. ## Image Tracking @@ -103,14 +101,6 @@ image.onload = () => { image.src = "图片的 URL"; ``` -The example below can track a real-world image and mark the coordinate system: - - - -> The above example can directly generate a QR code for mobile-side experience. The tracking image is as follows: - - image-20231007201437362 - ## Collision Detection | Method | Description | diff --git a/docs/en/xr/system/input.md b/docs/en/xr/system/input.mdx similarity index 100% rename from docs/en/xr/system/input.md rename to docs/en/xr/system/input.mdx diff --git a/docs/en/xr/system/session.md b/docs/en/xr/system/session.mdx similarity index 100% rename from docs/en/xr/system/session.md rename to docs/en/xr/system/session.mdx diff --git a/docs/zh/UI/quickStart/button.mdx b/docs/zh/UI/quickStart/button.mdx index 56ad03cb2..a575a6101 100644 --- a/docs/zh/UI/quickStart/button.mdx +++ b/docs/zh/UI/quickStart/button.mdx @@ -38,7 +38,3 @@ label: UI | `removeTransition` | 移除某个按钮过渡表现 | | `addClicked` | 添加一个点击回调函数 | | `removeClicked` | 移除某个点击回调函数 | - -## 脚本开发 - - diff --git a/docs/zh/UI/quickStart/event.mdx b/docs/zh/UI/quickStart/event.mdx index 019a3edcd..4d21fbd3b 100644 --- a/docs/zh/UI/quickStart/event.mdx +++ b/docs/zh/UI/quickStart/event.mdx @@ -34,7 +34,3 @@ stateDiagram B --> C B --> D ``` - -## 脚本开发 - - diff --git a/docs/zh/UI/quickStart/group.mdx b/docs/zh/UI/quickStart/group.mdx index ff7aa8027..7f19ebeec 100644 --- a/docs/zh/UI/quickStart/group.mdx +++ b/docs/zh/UI/quickStart/group.mdx @@ -22,7 +22,3 @@ label: UI | `ignoreParentGroup` | 是否忽略上层 Group 的设置 | > UIGroup 解决了 UI 元素的属性无法由父传递给子的问题。 - -## 脚本开发 - - diff --git a/docs/zh/UI/quickStart/image.mdx b/docs/zh/UI/quickStart/image.mdx index cbaa67b72..338cacf4f 100644 --- a/docs/zh/UI/quickStart/image.mdx +++ b/docs/zh/UI/quickStart/image.mdx @@ -42,7 +42,3 @@ Image 的显示内容取决于设置的 [Sprite 资产]() ，选中添加了 `Im | `drawMode` | 绘制模式，支持普通，九宫和平铺绘制模式 | | `raycastEnabled` | 是否可以被射线检测到 | | `raycastPadding` | 射线检测的自定义边界与他的碰撞区域的距离，它是归一化的值并且 X，Y，Z，W 分别代表距离左下右上四条边的距离 | - -## 脚本开发 - - diff --git a/docs/zh/UI/quickStart/text.mdx b/docs/zh/UI/quickStart/text.mdx index 11b6e7f11..cbe504b78 100644 --- a/docs/zh/UI/quickStart/text.mdx +++ b/docs/zh/UI/quickStart/text.mdx @@ -51,7 +51,3 @@ label: UI | `verticalAlignment` | 竖直对齐方式，可选值有：Top/Center/Bottom | | `enableWrapping` | 是否开启换行模式，打开换行模式后，会根据设置的宽来进行换行，如果这时候宽设置为 0，那么文本将不渲染 | | `overflowMode` | 当文本总高度超出设置的高的时候的处理方式，可选值有：Overflow/Truncate， Overflow 表示直接溢出显示， Truncate 表示只保留设置高度以内的内容显示，具体显示内容还和文本在竖直方向上的对齐方式有关 | - -## 脚本开发 - - diff --git a/docs/zh/animation/clip.mdx b/docs/zh/animation/clip.mdx index 43db9704c..4d001d5c0 100644 --- a/docs/zh/animation/clip.mdx +++ b/docs/zh/animation/clip.mdx @@ -200,8 +200,6 @@ colorClip.addCurveBinding("/light", DirectLight, "color.r", colorCurve); 你同样可以为你的子实体 `/light` 添加 `AnimationCurve` ，就像上面的代码示例，同时 `addCurveBinding` 的第三个参数并不局限于组件的属性，它是一个能索引到值的路径。 - - ### 动画事件 你可以使用 [AnimationEvent](/apis/core/#AnimationEvent)  来为 AnimationClip 添加事件，动画事件将在指定时间调用你在同一实体上绑定组件的指定回调函数。 @@ -212,6 +210,3 @@ event.functionName = "test"; event.time = 0.5; clip.addEvent(event); ``` - - - diff --git a/docs/zh/animation/layer.mdx b/docs/zh/animation/layer.mdx index a9dfe962a..839a7e222 100644 --- a/docs/zh/animation/layer.mdx +++ b/docs/zh/animation/layer.mdx @@ -60,4 +60,3 @@ additiveLayer.blendingMode = AnimatorLayerBlendingMode.Additive; additiveLayer.blendingMode = AnimatorLayerBlendingMode.Override; additiveLayer.weight = 0.5; ``` - diff --git a/docs/zh/assets/custom.mdx b/docs/zh/assets/custom.mdx index 6f88bcaba..b872936a0 100644 --- a/docs/zh/assets/custom.mdx +++ b/docs/zh/assets/custom.mdx @@ -22,7 +22,3 @@ export class FBXLoader extends Loader { 2. 重写 [load](/apis/core/#ResourceManager-load) 方法， `load`  方法会传入 `loadItem` 和 `resourceManager` ， `loadItem`  包含了加载的基信息， `resourceManager`  可以帮助加载其他引用资源。 3. 返回 [AssetPromise](/apis/core/#AssetPromise)  对象， `resolve`  解析后的资源结果，例如 FBX 返回特定的 `FBXResource` 。 4. 若报错则 `reject`  错误。 - -## 参考 - - \ No newline at end of file diff --git a/docs/zh/assets/gc.mdx b/docs/zh/assets/gc.mdx index e537d9a68..8948d27a7 100644 --- a/docs/zh/assets/gc.mdx +++ b/docs/zh/assets/gc.mdx @@ -20,18 +20,3 @@ label: Resource ```typescript engine.resourceManager.gc(); ``` - -## 验证资产释放 - -如果您需要验证资产是否释放成功，可按照以下步骤，在空白页打开以下示例： - - - -该示例在初始化时会通过创建 `Texture2D` 和 `Sprite` 渲染 2D 精灵，当点击右上角 GC 按钮后，`root` 节点被销毁，纹理和精灵资产的引用计数都被清空，此时这些资产会被真正销毁，分别在 `gc` 前后拍摄内存快照可以更直观地感受这个过程 - -1. gc 前： **开发者工具** -> **内存** -> **拍摄堆快照** -2. gc 后： **开发者工具** -> **内存** -> **拍摄堆快照** -> **比较** -> **选择 gc 前快照** - -image-1 - -image-1 diff --git a/docs/zh/core/scene.mdx b/docs/zh/core/scene.mdx index 94a40860a..ac5685c03 100644 --- a/docs/zh/core/scene.mdx +++ b/docs/zh/core/scene.mdx @@ -92,10 +92,6 @@ engine.sceneManager.addScene(scene1); engine.sceneManager.removeScene(scene2); ``` -多场景渲染示例如下： - - - ### 合并场景 可以使用 `engine.sceneManager.mergeScenes` 将 2 个场景进行合并为 1 个场景。 diff --git a/docs/zh/core/transform.mdx b/docs/zh/core/transform.mdx index bc3fa3abc..d642666e6 100644 --- a/docs/zh/core/transform.mdx +++ b/docs/zh/core/transform.mdx @@ -9,9 +9,10 @@ label: Core `Transform` 是 `Entity` 自带的基础组件，开发者可以通过它管理 `Entity` 在**局部空间**与**世界空间**中的位置、旋转和缩放。 -> 结合 Galacean 的 **[坐标系统](/docs/core/space)** 会有更深入地了解。 + +结合 Galacean 的 **[坐标系统](/docs/core/space)** 会有更深入地了解。 + - ## 编辑器使用 diff --git a/docs/zh/device/restore.md b/docs/zh/device/restore.mdx similarity index 100% rename from docs/zh/device/restore.md rename to docs/zh/device/restore.mdx diff --git a/docs/zh/graphics/2D/lottie.mdx b/docs/zh/graphics/2D/lottie.mdx index c1b3c787e..d316d9e83 100644 --- a/docs/zh/graphics/2D/lottie.mdx +++ b/docs/zh/graphics/2D/lottie.mdx @@ -75,8 +75,6 @@ await lottie.play(); 编辑器提供了动画切片的功能，可以把设计师提供的整个片段切成多段，每个片段需要定义片段名、开始帧、结束帧三个字段。 - - 该操作会在 Lottie 协议中添加 `lolitaAnimations` 字段实现动画的切片： @@ -131,9 +129,6 @@ engine.resourceManager.load({ }); ``` - - - ### 3D 变换 业务场景中经常会出现 3D 变换的需求，比如一些弹窗的入场动画。以旋转为例，由于传统的 lottie-web 方案只能沿着 **Z轴** 旋转（也就是说垂直于屏幕法线方向旋转），即使我们在 AE 中实现了沿着 **X轴** 或 **Y轴** 的旋转效果，使用 lottie-web 播放时也会被忽略。 @@ -142,8 +137,6 @@ engine.resourceManager.load({ 得益于 Galacean Engine 2D/3D 引擎统一架构的优势，轻松地实现 3D 变换功能。 - - ### 版本依赖 | 引擎版本 | Lottie 版本 | | :--- | :--- | diff --git a/docs/zh/graphics/2D/spine/example.mdx b/docs/zh/graphics/2D/spine/example.mdx index 9b8c851ff..638d53942 100644 --- a/docs/zh/graphics/2D/spine/example.mdx +++ b/docs/zh/graphics/2D/spine/example.mdx @@ -31,38 +31,4 @@ Galacean 编辑器提供了一系列教学模板，帮助大家更快的上手 S 该模板展示了动态局部换肤的能力。我们能够基于一个额外上传的图集创建新的附件并进行替换。 spine-dynamic-change -## 示例 - -**动画控制** - -该示例展示了如何通过 setAnimation 与 addAnimation API 来编排 spine 动画队列： - - -**跟踪射击** - -该示例展示了通过修改 IK 骨骼位置，来实现瞄准射击的效果： - - -**局部换肤** - -该示例展示了修改插槽中的附件，实现局部换装的效果： - - -**整体换肤** - -该示例展示了通过 setSkin 方法，实现整体换肤的效果： - - -**皮肤混搭** - -该示例展示了在运行时，通过组合新的皮肤，实现混搭的效果： - - -**物理** - -该示例展示了 spine 4.2 版本，基于物理的动画效果： - - - - 下一章节：[版本与性能](/docs/graphics/2D/spine/other) \ No newline at end of file diff --git a/docs/zh/graphics/2D/spriteAtlas.mdx b/docs/zh/graphics/2D/spriteAtlas.mdx index f10a8a450..eb0463bb5 100644 --- a/docs/zh/graphics/2D/spriteAtlas.mdx +++ b/docs/zh/graphics/2D/spriteAtlas.mdx @@ -12,10 +12,6 @@ label: Graphics/2D - 更少的显存（打包算法降低纹理尺寸）； - 更少的请求次数（通过减少碎片文件来减少加载的请求次数）； -下图精灵图集例子里每帧只调用了一次绘制指令： - - - ## 编辑器使用 ### 创建精灵图集 diff --git a/docs/zh/graphics/2D/spriteMask.mdx b/docs/zh/graphics/2D/spriteMask.mdx index d98a8d6b4..23990c801 100644 --- a/docs/zh/graphics/2D/spriteMask.mdx +++ b/docs/zh/graphics/2D/spriteMask.mdx @@ -8,8 +8,6 @@ label: Graphics/2D 精灵遮罩组件用于对 3D/2D 场景中的[精灵渲染器](/docs/graphics/2D/spriteRenderer/)和[文字渲染器](/docs/graphics/2D/text/)实现遮罩效果。 - - 通过 [SpriteMask](/apis/core/#SpriteMask) 提供的参数来控制和 [精灵](/docs/graphics/2D/sprite/) 发生作用。 | 参数 | 类型 | 说明 | diff --git a/docs/zh/graphics/2D/spriteRenderer.mdx b/docs/zh/graphics/2D/spriteRenderer.mdx index df9abafb8..f81356198 100644 --- a/docs/zh/graphics/2D/spriteRenderer.mdx +++ b/docs/zh/graphics/2D/spriteRenderer.mdx @@ -63,8 +63,6 @@ spriteRenderer.sprite = sprite; 设置 `SpriteRenderer` 的 `width` 与 `height` 可以明确指定精灵在三维空间中显示的尺寸，若没有设置，则会将 `Sprite` 的尺寸作为默认值。 - - ### 设置颜色 可以通过设置 `color` 属性来调整颜色，从而实现一些淡入淡出的效果，如下： @@ -77,14 +75,11 @@ spriteRenderer.sprite = sprite; avatar - ### 绘制模式 精灵渲染器目前提供三种绘制模式，分别是普通绘制，九宫绘制与平铺绘制（默认为普通绘制），在不同的绘制模式下，修改绘制宽高可以直观地感受到各种模式之间的渲染差异，如下： - - ### 遮罩 请参考[精灵遮罩](/docs/graphics/2D/spriteMask/)文档。 @@ -92,5 +87,3 @@ spriteRenderer.sprite = sprite; ## 自定义材质 请参考[自定义着色器](/docs/graphics/shader/custom/)文档。 - - diff --git a/docs/zh/graphics/2D/text.mdx b/docs/zh/graphics/2D/text.mdx index c1595d3bc..921f82cf1 100644 --- a/docs/zh/graphics/2D/text.mdx +++ b/docs/zh/graphics/2D/text.mdx @@ -54,14 +54,6 @@ label: Graphics/2D ## 脚本使用 - - -1、创建 [TextRenderer](/apis/core/#TextRenderer) 组件显示文本 -2、通过 font 设置 [Font](/apis/core/#Font) 对象 -3、通过 text 设置需要显示的文本 -3、通过 fontSize 设置字体大小 -4、通过 color 设置文本颜色 - ```typescript import { Camera, @@ -74,15 +66,15 @@ import { } from "@galacean/engine"; const textEntity = rootEntity.createChild("text"); -// 给实体添加 TextRenderer 组件 +// 1、创建 TextRenderer 组件显示文本 const textRenderer = textEntity.addComponent(TextRenderer); -// 通过 font 设置 Font 对象 +// 2、通过 font 设置 Font 对象 textRenderer.font = Font.createFromOS(engine, "Arial"); -// 通过 text 设置需要显示的文本 +// 3、通过 text 设置需要显示的文本 textRenderer.text = "Galacean 会写字了！"; -// 通过 fontSize 设置字体大小 +// 4、通过 fontSize 设置字体大小 textRenderer.fontSize = 36; -// 通过 color 设置文本颜色 +// 5、通过 color 设置文本颜色 textRenderer.color.set(1, 0, 0, 1); ``` @@ -158,10 +150,6 @@ textRenderer.fontStyle = FontStyle.Italic; textRenderer.fontStyle = FontStyle.Bold | FontStyle.Italic; ``` -### 多行文本 - - - ### 自定义字体 [Font](/apis/core/#Font) 是字体资源，用于表示文本使用的字体。 @@ -181,5 +169,3 @@ const font = await engine.resourceManager.load({ url: "https://lg-2fw0hhsc-1256786476.cos.ap-shanghai.myqcloud.com/Avelia.otf", }); ``` - - diff --git a/docs/zh/graphics/background/background.mdx b/docs/zh/graphics/background/background.mdx index d045ac218..ebaf32bbb 100644 --- a/docs/zh/graphics/background/background.mdx +++ b/docs/zh/graphics/background/background.mdx @@ -11,11 +11,3 @@ label: Graphics/Background - [纯色背景](/docs/graphics/background/solidColor/) - [纹理背景](/docs/graphics/background/texture/) - [天空背景](/docs/graphics/background/sky/) - -开发者可依据自己的需求设置不同的背景： - - - -在[天空盒](/docs/graphics/background/sky/)模式下，通过设置特定的网格和材质，可以实现各种定制背景，如`视频背景`： - - diff --git a/docs/zh/graphics/camera/camera.md b/docs/zh/graphics/camera/camera.mdx similarity index 88% rename from docs/zh/graphics/camera/camera.md rename to docs/zh/graphics/camera/camera.mdx index 9728745e5..c82daff18 100644 --- a/docs/zh/graphics/camera/camera.md +++ b/docs/zh/graphics/camera/camera.mdx @@ -14,7 +14,7 @@ label: Graphics/Camera 透视投影符合我们的近大远小模型，可以看一下透视模型示意图： -image.png +image.png 如上图所示，近裁剪平面（[nearClipPlane](/apis/core/#Camera-nearClipPlane)），远裁剪平面（[farClipPlane](/apis/core/#Camera-farClipPlane)）和 视角（[fieldOfView](/apis/core/#Camera-fieldOfView)） 会形成一个视椎体 ([_View Frustum_](https://en.wikipedia.org/wiki/Viewing_frustum))。在视椎体内部的物体是会被投影到摄像机里的，也就是会渲染在画布上，而视椎体外的物体则会被裁剪。 @@ -22,7 +22,7 @@ label: Graphics/Camera 正交投影就是可视区近处和远处看到的物体是等大小的。由正交投影模型产生的可视区称为盒状可视区，盒状可视区模型如下： -image.png +image.png 如上图所示，有 top、bottom、left 和 right，Galacean 对正交属性做了一些简化，更符合开发者的使用习惯，只有 [orthographicSize](/apis/core/#Camera-orthographicSize)。下面是针对各项属性和 [orthographicSize](/apis/core/#Camera-orthographicSize) 的关系 @@ -40,8 +40,6 @@ label: Graphics/Camera 通过以下示例能直观感受到正交相机与透视相机渲染效果的差异，简而言之，当需要展示 2D 效果时，就选择正交相机，当需要展示 3D 效果时，就选择透视相机。 - - ## 相机的朝向 Galacean 中的局部坐标与世界坐标遵循`右手坐标系`，因此相机的 `forward` 方向为 `-Z` 轴，相机取景的方向也是 `-Z` 方向。 diff --git a/docs/zh/graphics/camera/component.md b/docs/zh/graphics/camera/component.mdx similarity index 92% rename from docs/zh/graphics/camera/component.md rename to docs/zh/graphics/camera/component.mdx index 06953f3cd..2db648efb 100644 --- a/docs/zh/graphics/camera/component.md +++ b/docs/zh/graphics/camera/component.mdx @@ -10,11 +10,11 @@ label: Graphics/Camera 首先需要将相机组件挂载到在场景中已激活的 [Entity](/docs/core/entity) 上，编辑器项目通常已经自带了相机组件，当然我们也可以自己手动添加。 -image-20231009114711623 +image-20231009114711623 添加完毕后，就可以在检查器里可以查看相机属性，并且左下角的相机预览可以方便地查看项目实际运行时的相机效果： -image-20240718211520816 +image-20240718211520816 您也可以在脚本中通过如下代码为 [Entity](/docs/core/entity) 挂载相机组件： @@ -29,7 +29,7 @@ const camera = entity.addComponent(Camera); 通过修改相机组件的属性可以定制渲染效果。下方是相机组件在 **[检查器面板](/docs/interface/inspector)** 暴露的属性设置。 -image-20240718211645854 +image-20240718211645854 也可以通过脚本去获取相机组件并设置相应的属性。 @@ -90,20 +90,14 @@ camera.antiAliasing = AntiAliasing.FXAA; 相机组件可以通过设置 `cullingMask` 选择性地渲染场景内的渲染组件 - - ### 渲染目标 相机组件可以通过设置 `renderTarget` 将渲染结果渲染到不同的目标上。 - - ### 视锥剔除 `enableFrustumCulling` 属性默认是开启的，因为对于三维世界来说，“看不见的东西就不需要渲染”是个很自然的逻辑，属于最基本的性能优化。关闭视锥剔除意味着关闭此项优化。如果你想保留此项优化，而只想让某个节点始终渲染，可以把节点的渲染器的包围盒设置成无限大。 - - ## 方法 相机组件提供各种方法（主要涉及`渲染`与`空间转换`）方便开发者实现期望的定制能力，在此之前，要先学会如何获取相机组件，在知道相机组件挂载在哪个节点的前提下，可直接通过 `getComponent` 或 `getComponentsIncludeChildren` 获取： @@ -140,9 +134,7 @@ const cameras = scene._componentsManager._activeCameras; ### Shader 替换 -借助 `setReplacementShader` 全局替换 Shader 的能力可以观测特定的渲染效果： - - +借助 `setReplacementShader` 全局替换 Shader 的能力可以观测特定的渲染效果。 ### 空间转换 diff --git a/docs/zh/graphics/camera/control.md b/docs/zh/graphics/camera/control.mdx similarity index 96% rename from docs/zh/graphics/camera/control.md rename to docs/zh/graphics/camera/control.mdx index 3dccbef26..12dc38b78 100644 --- a/docs/zh/graphics/camera/control.md +++ b/docs/zh/graphics/camera/control.mdx @@ -16,8 +16,6 @@ label: Graphics/Camera `OrbitControl`  用来模拟轨道交互，适用于围绕一个目标对象进行 360 度旋转交互，需要注意的是，**请务必在添加相机组件后再添加轨道控制器**。 - - | 属性 | 解释 | | :---------------- | :--------------------------------------------------------------- | | `target` | 观察的目标位置 | @@ -42,8 +40,6 @@ label: Graphics/Camera `FreeControl`  一般用于漫游控制，常见于游戏场景，需要注意的是，**请务必在添加相机组件后再添加自由控制器**。 - - | 属性 | 解释 | | :-------------- | :---------------------------------------- | | `floorMock` | 是否模拟地面，默认为 true | @@ -55,8 +51,6 @@ label: Graphics/Camera `OrthoControl`  一般用于控制 2D 场景中的缩放和位移： - - | 属性 | 解释 | | :---------- | :------- | | `zoomSpeed` | 缩放速度 | diff --git a/docs/zh/graphics/camera/multiCamera.md b/docs/zh/graphics/camera/multiCamera.md deleted file mode 100644 index 1c41a0a5f..000000000 --- a/docs/zh/graphics/camera/multiCamera.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -order: 3 -title: 多相机渲染 -type: 图形 -group: 相机 -label: Graphics/Camera ---- - -在多个相机的情况下，通过结合相机组件的 [viewport](/apis/core/#Camera-viewport), [cullingMask](/apis/core/#Camera-cullingMask), [clearFlags](/apis/core/#Camera-clearFlags) 等属性完成许多定制化的渲染效果。 - -比如通过设置 [viewport](/apis/core/#Camera-viewport) 让多个相机分别在画布的不同位置渲染场景内容。 - - - -又比如通过设置 [cullingMask](/apis/core/#Camera-cullingMask) 实现画中画的效果。 - - diff --git a/docs/zh/graphics/camera/multiCamera.mdx b/docs/zh/graphics/camera/multiCamera.mdx new file mode 100644 index 000000000..efeb0dcc4 --- /dev/null +++ b/docs/zh/graphics/camera/multiCamera.mdx @@ -0,0 +1,10 @@ +--- +order: 3 +title: 多相机渲染 +type: 图形 +group: 相机 +label: Graphics/Camera +--- + +在多个相机的情况下，通过结合相机组件的 [viewport](/apis/core/#Camera-viewport), [cullingMask](/apis/core/#Camera-cullingMask), [clearFlags](/apis/core/#Camera-clearFlags) 等属性完成许多定制化的渲染效果。比如通过设置 [viewport](/apis/core/#Camera-viewport) 让多个相机分别在画布的不同位置渲染场景内容，又比如通过设置 [cullingMask](/apis/core/#Camera-cullingMask) 实现画中画的效果。 + diff --git a/docs/zh/graphics/camera/texture.md b/docs/zh/graphics/camera/texture.mdx similarity index 93% rename from docs/zh/graphics/camera/texture.md rename to docs/zh/graphics/camera/texture.mdx index 6690f8c97..c766a44a4 100644 --- a/docs/zh/graphics/camera/texture.md +++ b/docs/zh/graphics/camera/texture.mdx @@ -10,9 +10,9 @@ label: Graphics/Camera 相机可以通过 [depthTextureMode](/apis/galacean/#Camera) 属性开启深度纹理，开启深度纹理后可以通过 `camera_DepthTexture` 属性在 Shader 中访问深度纹理。深度纹理可以用于实现软粒子和水面边缘过渡，以及一些简单的后处理效果。 - - + 注意：深度纹理仅渲染非透明物体。 + ## 非透明纹理 diff --git a/docs/zh/graphics/light/light.mdx b/docs/zh/graphics/light/light.mdx index aa8bd6006..d45e91a41 100644 --- a/docs/zh/graphics/light/light.mdx +++ b/docs/zh/graphics/light/light.mdx @@ -22,15 +22,11 @@ label: Graphics/Light ## 直接光 -直接光一般从一个区域或者朝特定方向照射，经过一次反射直接进入眼睛（相机），如下案例： - - +直接光一般从一个区域或者朝特定方向照射，经过一次反射直接进入眼睛（相机）。 ## 间接光 -环境光从四周发射进入眼睛，如下案例： - - +环境光从四周发射进入眼睛。 ## 实时光照和烘焙光照 diff --git a/docs/zh/graphics/material/builtinShaders/blinnPhong.md b/docs/zh/graphics/material/builtinShaders/blinnPhong.mdx similarity index 91% rename from docs/zh/graphics/material/builtinShaders/blinnPhong.md rename to docs/zh/graphics/material/builtinShaders/blinnPhong.mdx index 2d49b1d82..6196c3f0d 100644 --- a/docs/zh/graphics/material/builtinShaders/blinnPhong.md +++ b/docs/zh/graphics/material/builtinShaders/blinnPhong.mdx @@ -4,11 +4,9 @@ title: Blinn Phong [BlinnPhongMaterial](/apis/core/#BlinnPhongMaterial) 材质是经典的材质之一，虽然不是基于物理渲染，但是其高效的渲染算法和基本齐全的光学部分，流传至今仍可以适用很多的场景。 - - ## 编辑器使用 -blinn +blinn ## 参数介绍 diff --git a/docs/zh/graphics/material/builtinShaders/unlit.md b/docs/zh/graphics/material/builtinShaders/unlit.mdx similarity index 63% rename from docs/zh/graphics/material/builtinShaders/unlit.md rename to docs/zh/graphics/material/builtinShaders/unlit.mdx index 456b1282f..b28c95457 100644 --- a/docs/zh/graphics/material/builtinShaders/unlit.md +++ b/docs/zh/graphics/material/builtinShaders/unlit.mdx @@ -4,11 +4,9 @@ title: Unlit 在一些简单的场景中，可能不希望计算光照，引擎提供了 [UnlitMaterial](/apis/core/#UnlitMaterial)，使用了最精简的 shader 代码，只需要提供颜色或者纹理即可渲染。Unlit 材质适用于烘焙好的模型渲染，它只需要设置一张基本纹理或者颜色，即可展现离线渲染得到的高质量渲染结果，但是缺点是无法实时展现光影交互，因为 Unlit 由纹理决定渲染，不受任何光照影响。 - - ## 编辑器使用 -unlit +unlit ## 参数介绍 @@ -24,7 +22,7 @@ title: Unlit 如[烘焙教程](/docs/art/bake-blender)介绍，如果我们已经制作完了烘焙贴图，希望有一种**便捷材质**，颜色只由烘焙纹理影响，不用添加灯光，不用调试法线，也不用调试金属粗糙度等高阶属性，那么你可以试试 Galacean 的 [UnlitMaterial](/apis/core/#UnlitMaterial), glTF 有专门的[KHR_materials_unlit ](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit)插件，Galacean 会解析插件，生成 Unlit 材质。 -image.png +image.png 测试模型：[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 +30,34 @@ title: Unlit 1. 导入模型 -![image.png](https://gw.alipayobjects.com/zos/OasisHub/e5dbfb61-5c0c-4ca5-8c7f-bde353d4c211/1623651809057-138f49cf-6fe7-4f54-8161-c7e157ec85fd-20210614150752343.png) + 2. 修改 Shader 默认的 shader 类型为 BSDF ，我们需要将材质属性栏 surface 里面的 shader 类型修改为 **Background**。 -![image.png](https://gw.alipayobjects.com/zos/OasisHub/abf1e279-1f78-4d21-8c1f-d58d7f74992c/1623652169374-7f39e5f0-6639-4795-8565-b8f0b09420ed-20210614150804567.png) + -![image.png](https://gw.alipayobjects.com/zos/OasisHub/c8c51e5f-c7c6-44a3-87e2-dc649e13fddb/1623652230768-69cd6f7e-175d-4f9f-9042-b3629d422b8e.png) + 3. 添加烘焙纹理 添加烘焙好的纹理，将 Color 和 Shader 连接在一起 -![image.png](https://gw.alipayobjects.com/zos/OasisHub/50c69e7b-c099-4a2d-b546-8a55ff4f9309/1623652264008-7ae4c13c-6430-44b0-995e-2c23c9f117a7-20210614150846797.png) + -![image.png](https://gw.alipayobjects.com/zos/OasisHub/6ed13e19-a9e5-4454-a0d5-ad27b3cabe14/1623652368637-6dda44be-4cde-4f65-a72f-d39b5d3f60ce.png) + -![image.png](https://gw.alipayobjects.com/zos/OasisHub/e9a99c9c-f661-4666-86bc-d8e91030c0f7/1623652380351-501dd929-7f96-4578-b49a-11724a0782a7.png) + 4. 导出 glTF 若预览正常，导出 glTF 。 -![image.png](https://gw.alipayobjects.com/zos/OasisHub/4b6b5f8f-ebd2-46af-85c7-9a26b5f66a2e/1623652403568-450291a8-1a0b-4cf4-8e71-c183a05632b0-20210614150902221.png) + -![image.png](https://gw.alipayobjects.com/zos/OasisHub/1fe38185-399e-4f56-bff4-c39ba4ae3a2a/1623652462007-85b065a3-69fa-4d80-9dfd-834ef66da12a.png) + 将刚才导出来的 glTF 文件拖入编辑器或者 [glTF 预览器](https://galacean.antgroup.com/engine/gltf-viewer)，若材质类型为 **UnlitMaterial**，说明已经导出了 glTF 的 [KHR_materials_unlit](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit) 插件，且 Galacean 已经解析成 Unlit 材质。 -![image.png](https://gw.alipayobjects.com/zos/OasisHub/fbb6ba43-f7d7-4757-a1d3-590083d30573/1623652636074-d8bb8437-f885-43fd-8957-8e14ae9fd8c0-20210614150914493.png) + diff --git a/docs/zh/graphics/mesh/bufferMesh.mdx b/docs/zh/graphics/mesh/bufferMesh.mdx index f8e36a73a..8b2d763fa 100644 --- a/docs/zh/graphics/mesh/bufferMesh.mdx +++ b/docs/zh/graphics/mesh/bufferMesh.mdx @@ -30,8 +30,6 @@ label: Graphics/Mesh ### 交错顶点缓冲 - - 常用方式，比如自定义 Mesh、Particle 等实现，具有显存紧凑，每帧 CPU 数据上传至 GPU 次数少等优势。这个案例的主要特点是多个 [VertexElement](/apis/core/#VertexElement)  对应一个 *VertexBuffer* （[Buffer](/apis/core/#Buffer)），仅使用一个 *VertexBuffer*  就可以将不同顶点元素与 Shader 关联。 ```typescript @@ -65,8 +63,6 @@ renderer.mesh = mesh; ### 独立顶点缓冲 - - 动态顶点 buffer 和静态顶点 buffer 混用时具有优势，比如 _position_ 为静态，但 _color_ 为动态，独立顶点缓冲可以仅更新颜色数据至 GPU。这个案例的主要特点是一个 [VertexElement](/apis/core/#VertexElement) 对应一个 _VertexBuffer_ ，可以分别调用 [Buffer](/apis/core/#Buffer)  对象的 [setData](/apis/core/#Buffer-setData)  方法独立更新数据。 ```typescript @@ -109,8 +105,6 @@ renderer.mesh = mesh; ### Instance 渲染 - - GPU Instance 渲染是三维引擎的常用技术，比如可以把相同几何体形状的物体一次性渲染到不同的位置，可以大幅提升渲染性能。这个案例的主要特点是使用了 [VertexElement](/apis/core/#VertexElement) 的实例功能，其构造函数的最后一个参数表示实例步频（在缓冲中每前进一个顶点绘制的实例数量，非实例元素必须为 0），[BufferMesh](/apis/core/#BufferMesh)  的 [instanceCount](/apis/core/#BufferMesh-instanceCount)  表示实例数量。 ```typescript diff --git a/docs/zh/graphics/mesh/modelMesh.mdx b/docs/zh/graphics/mesh/modelMesh.mdx index aae3b2407..bf08ba579 100644 --- a/docs/zh/graphics/mesh/modelMesh.mdx +++ b/docs/zh/graphics/mesh/modelMesh.mdx @@ -8,8 +8,6 @@ label: Graphics/Mesh [ModelMesh](/apis/core/#ModelMesh) 是一个用于描述几何体轮廓的网状渲染数据类，主要包含了顶点（位置、法线和 UV 等）、索引和混合形状等数据。不仅可以使用建模软件制作并导出 glTF 在引擎中解析还原，还可以方便的使用脚本直接写入数据创建。 - - ## 代码示例 ```typescript @@ -134,8 +132,6 @@ modelMesh.uploadData(true); modelMesh.uploadData(false); ``` - - ### **读取高级数据** 若要让 `ModelMesh` 中的顶点数据可读，需注意： @@ -172,12 +168,6 @@ const result = mesh.getPositions(); `BlendShape` 通常用于制作精细程度非常高的动画，比如表情动画等。其原理也比较简单，主要通过权重混合基础形状和目标形状的网格数据来表现形状之间过渡的动画效果。 -**glTF 导入 BlendShape 动画案例：** - - -**脚本自定义 BlendShape 动画案例：** - - ### 详细步骤 #### **组织`BlendShape`数据** diff --git a/docs/zh/graphics/mesh/primitiveMesh.mdx b/docs/zh/graphics/mesh/primitiveMesh.mdx index 8208d0123..3f5fb7c42 100644 --- a/docs/zh/graphics/mesh/primitiveMesh.mdx +++ b/docs/zh/graphics/mesh/primitiveMesh.mdx @@ -24,8 +24,6 @@ label: Graphics/Mesh ## 脚本使用 - - 目前提供的几何体如下： - [createCuboid](/apis/core/#PrimitiveMesh-createCuboid) **立方体** diff --git a/docs/zh/graphics/model/glTF.mdx b/docs/zh/graphics/model/glTF.mdx index e9337e049..36da7e517 100644 --- a/docs/zh/graphics/model/glTF.mdx +++ b/docs/zh/graphics/model/glTF.mdx @@ -33,9 +33,7 @@ glTF 的导出产物一般分为两种： - 支持 glTF 的相机，并将它编译为运行时的相机组件 - 支持 glTF 的部分插件。 -glTF 拥有非常多的特性，官网提供了大量的[示例](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0)进行参考，Galacean 也提供了一份复刻版本进行快速浏览，可以通过以下 **glTF List** 切换不同的 glTF 模型。 - - +glTF 拥有非常多的特性，官网提供了大量的[示例](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0)进行参考。 ### 插件支持 diff --git a/docs/zh/graphics/model/use.mdx b/docs/zh/graphics/model/use.mdx index 3b7d7c733..1e5779291 100644 --- a/docs/zh/graphics/model/use.mdx +++ b/docs/zh/graphics/model/use.mdx @@ -69,8 +69,6 @@ this.engine.resourceManager 加载完毕的模型对象会返回包含了渲染信息和动画信息的根节点，它的使用和普通节点没有什么区别。 - - ### 1. 选择场景根节点 glTF 可能包含多个场景根节点 `sceneRoots`，开发者可以手动选择希望实例化的根节点。 diff --git a/docs/zh/graphics/particle/renderer-main-module.mdx b/docs/zh/graphics/particle/renderer-main-module.mdx index 006831929..6f4199710 100644 --- a/docs/zh/graphics/particle/renderer-main-module.mdx +++ b/docs/zh/graphics/particle/renderer-main-module.mdx @@ -12,8 +12,6 @@ label: Graphics/Particle ## 属性 - - 你可以在提供的示例中逐个调试各项属性，帮助你更好地理解和掌控粒子住模块，从而实现各种复杂和精美的视觉效果。 持续时间 [duration](/apis/core/#MainModule-duration) 决定了粒子生成器运行多长时间，单位为秒。更长的持续时间意味着粒子系统会生成更多的粒子，创造出持续的效果。 diff --git a/docs/zh/graphics/renderer/meshRenderer.mdx b/docs/zh/graphics/renderer/meshRenderer.mdx index c57cb47e1..f16dcb7f8 100644 --- a/docs/zh/graphics/renderer/meshRenderer.mdx +++ b/docs/zh/graphics/renderer/meshRenderer.mdx @@ -8,8 +8,6 @@ label: Graphics/Renderer [MeshRenderer](/apis/core/#MeshRenderer) 是网格渲染器组件， 使用网格对象（如立方体）作为几何体轮廓的数据源。当一个实体挂载了网格渲染组件，只需设置它的 `mesh` 与 `material` 即可渲染物体。 - - ## 使用 在编辑器 **[层级面板](/docs/interface/hierarchy)** 中，你可以快速创建一个挂载了长方体网格渲染器的节点（ **层级面板** -> **右键** -> **3D Object** -> **Cuboid** ）。 diff --git a/docs/zh/graphics/renderer/renderer.mdx b/docs/zh/graphics/renderer/renderer.mdx index 13ccb1682..b214430f2 100644 --- a/docs/zh/graphics/renderer/renderer.mdx +++ b/docs/zh/graphics/renderer/renderer.mdx @@ -48,10 +48,6 @@ console.log("bounds", renderer.bounds); console.log("isCulled", renderer.isCulled); ``` -下方展示如何获取多个 `Renderer` 的整体包围盒： - - - ## 方法 `Renderer` 渲染器基类主要提供设置与获取材质相关的方法，需要注意的是，一个渲染器内可能包含多个材质，因此下列方法更像是在**操作材质数组的增删改查**。 diff --git a/docs/zh/graphics/renderer/skinnedMeshRenderer.mdx b/docs/zh/graphics/renderer/skinnedMeshRenderer.mdx index 11fcb81ed..e372b8bce 100644 --- a/docs/zh/graphics/renderer/skinnedMeshRenderer.mdx +++ b/docs/zh/graphics/renderer/skinnedMeshRenderer.mdx @@ -20,11 +20,3 @@ label: Graphics/Renderer | `blendShapeWeights` | BlendShapes 的混合权重 | 美术工作流导出的模型中一般已经预先设置好了所有骨骼和 BlendShape 信息，开发者只需要结合[动画系统](/docs/animation/overview)播放指定的动画片段即可。 - -## 骨骼动画 - - - -## BlendShape - - diff --git a/docs/zh/graphics/texture/2d.mdx b/docs/zh/graphics/texture/2d.mdx index 195323554..9d327b917 100644 --- a/docs/zh/graphics/texture/2d.mdx +++ b/docs/zh/graphics/texture/2d.mdx @@ -53,9 +53,7 @@ texture.setImageSource(video); > `setImageSource` 只能同步那一帧的数据，但是视频每一帧都在变化，如果需要纹理同步变化，则要在脚本 onUpdate 钩子里面执行 -对于视频这类需要频繁更新纹理内容的使用场景，创建纹理的时候需要关闭 mipmap 并设置纹理使用方式为 Dynamic，以获得更好的性能，示例代码如下： - - +对于视频这类需要频繁更新纹理内容的使用场景，创建纹理的时候需要关闭 mipmap 并设置纹理使用方式为 Dynamic，以获得更好的性能。 ### setPixelBuffer diff --git a/docs/zh/graphics/texture/compression.mdx b/docs/zh/graphics/texture/compression.mdx index 0f7fdd0d1..9b33e1f62 100644 --- a/docs/zh/graphics/texture/compression.mdx +++ b/docs/zh/graphics/texture/compression.mdx @@ -25,8 +25,6 @@ engine.resourceManager }); ``` - - glTF 中使用 ktx2 需要包含 [KHR_texture_basisu](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_texture_basisu/README.md) 扩展。 KTX2 的生成可以使用： diff --git a/docs/zh/graphics/texture/rtt.mdx b/docs/zh/graphics/texture/rtt.mdx index 26e8b08f1..8b0b634a9 100644 --- a/docs/zh/graphics/texture/rtt.mdx +++ b/docs/zh/graphics/texture/rtt.mdx @@ -50,5 +50,3 @@ class switchRTScript extends Script { cameraEntity.addComponent(switchRTScript); ``` - - diff --git a/docs/zh/graphics/texture/texture.mdx b/docs/zh/graphics/texture/texture.mdx index 5482c8d57..a541a8b49 100644 --- a/docs/zh/graphics/texture/texture.mdx +++ b/docs/zh/graphics/texture/texture.mdx @@ -66,8 +66,6 @@ label: Graphics/Texture | Repeat | 超出范围从 [0,1] 开始重新采样 | | Mirror | 超出范围从 [1,0] 开始镜像采样 | - - ### 过滤模式 一般来说，纹素和屏幕像素不会刚好对应，我们可以通过设置过滤模式来控制放大（Mag）和缩小（Min）模式下分别的过滤模式。 @@ -78,14 +76,10 @@ label: Graphics/Texture | Bilinear | 使用距离最近的 2\*2 纹素矩阵的平均值 | | Trilinear | 在双线性过滤的基础上，对 mipmap 层级也进行了平均值过滤 | - - ### 各向异性过滤等级 各向异性过滤技术可以使纹理在倾斜角度下观看会更加清晰。如下图，纹理的尽头随着各向异性过滤等级的增加会愈加清晰。但请慎重使用，数值越大，GPU 的计算量就会越大。 - - ## 通用设置 | 设置 | 值 | @@ -126,8 +120,6 @@ const cubeTexture = new TextureCube( ); // 第 4 个参数 ``` - - ### flipY flipY 用来控制纹理是否翻转 Y 轴，即上下颠倒，**引擎和编辑器默认关闭**，如果需要改变 flipY 的默认行为，可以通过 [setImageSource](/apis/core/#Texture2D-setImageSource) 方法来实现： diff --git a/docs/zh/how-to-contribute.mdx b/docs/zh/how-to-contribute.mdx index 5cd1b7687..ea219d64f 100644 --- a/docs/zh/how-to-contribute.mdx +++ b/docs/zh/how-to-contribute.mdx @@ -208,29 +208,6 @@ engine.resourceManager ``` -### 示例 - -#### 编写示例代码 - -我们现在提供两种方式让你组织示例代码： - -- 在 `examples/` 文件夹下新建 `.ts` 示例文件来组织示例代码 -- 在 `examples/` 文件夹下新建一个 **示例文件夹**，最后通过 `示例文件夹/index.ts` 来暴露示例代码 - -#### 嵌入示例 - -````mdx filename="light.mdx" -... - -Ambient light emits from all directions and enters the eye, as shown in the example below: - - - -... -```` - - - ## 新增文档 新增文档相较于之前可能多了一些步骤（在某些情况下）。需要提前说明的是，在新的官网中，文件路径即是路由。同时文档的顺序以及标题需要使用 `_meta.json` 进行配置。 diff --git a/docs/zh/input/framebuffer-picker.mdx b/docs/zh/input/framebuffer-picker.mdx index c1fda18a7..d860fdcc2 100644 --- a/docs/zh/input/framebuffer-picker.mdx +++ b/docs/zh/input/framebuffer-picker.mdx @@ -9,8 +9,6 @@ label: Interact 当拾取频率不高时，可以考虑使用**像素级精度**的 `FramebufferPicker` 组件；当拾取频率过高时，需要开发者评估好性能开销是否适合业务场景，因为该组件底层会进行 CPU-GPU 通信，即调用 `gl.readPixels` 。 - - ## 创建帧缓冲拾取 ```typescript diff --git a/docs/zh/input/keyboard.mdx b/docs/zh/input/keyboard.mdx index 56e2c5c0d..46d92eeeb 100644 --- a/docs/zh/input/keyboard.mdx +++ b/docs/zh/input/keyboard.mdx @@ -36,12 +36,6 @@ class KeyScript extends Script { } ``` -## 实战 - -这次就用空格键来控制愤怒的小鸟吧。 - - - ## 状态字典 | 按键状态 | isKeyHeldDown | isKeyDown | isKeyUp | diff --git a/docs/zh/input/pointer.mdx b/docs/zh/input/pointer.mdx index 38389da13..a0a320934 100644 --- a/docs/zh/input/pointer.mdx +++ b/docs/zh/input/pointer.mdx @@ -36,8 +36,6 @@ timeline …… ``` - - ### 触控按键 参照 [W3C 标准](https://www.w3.org/TR/uievents/#dom-mouseevent-button) 与[微软相关文档](https://learn.microsoft.com/en-us/dotnet/api/system.windows.input.mousebutton?view=windowsdesktop-6.0)，Galacean 对触控按键的定义如下： @@ -54,9 +52,6 @@ timeline | [XButton4](/apis/core/#PointerButton-XButton4) | 拓展按键 | | …… | …… | -结合触控按键可以方便地检测触控点在本帧触发的行为： - - ### 触控回调 @@ -74,15 +69,9 @@ timeline | [onPointerEndDrag](/apis/core/#Script-onPointerEndDrag) | 开始拖动后，触控点松开时触发 | | [onPointerDrop](/apis/core/#Script-onPointerDrop) | 开始拖动后，当触控点在某个 Entity 的碰撞范围内松开时触发 | -> ⚠️ 触控回调**依赖物理引擎**，使用此功能前请确保物理引擎已初始化完毕。 - -如下示例： - -- 最左边的立方体添加了对 Enter 与 Exit 的响应，当鼠标移动到上方和鼠标移出时便会触发它颜色的改变。 -- 中间的立方体添加了对 Drag 的响应，你可以用鼠标拖拽这个立方体在空间内任意移动。 -- 最右边的立方体添加了对 Click 的响应（先 down 后 up ），当鼠标点击时会触发它颜色的改变。 - - + +触控回调**依赖物理引擎**，使用此功能前请确保物理引擎已初始化完毕。 + ### 射线检测 @@ -107,17 +96,13 @@ if (scene.physics.raycast(ray, 100, hitResult)) { } ``` -通过下方示例可以更直观地理解此过程，示例中为主相机添加了辅助线，侧视相机可以完整观察到主相机射线检测到碰撞体的过程。 - - - ## 兼容性 截止 2024 年 2 月，不同平台对 PointerEvent 的兼容性已经达到了 [96.35%](https://caniuse.com/?search=PointerEvent) 。 -设计思路可参考：https://github.com/galacean/engine/wiki/Input-system-design. - -> ⚠️ 若遇到平台的兼容性问题，可以在 https://github.com/galacean/polyfill-pointer-event 提 issue 。 + +若遇到平台的兼容性问题，可以在 https://github.com/galacean/polyfill-pointer-event 提 issue 。 + ## QA diff --git a/docs/zh/input/wheel.mdx b/docs/zh/input/wheel.mdx index 84602862a..b20e4b83b 100644 --- a/docs/zh/input/wheel.mdx +++ b/docs/zh/input/wheel.mdx @@ -11,6 +11,3 @@ Galacean 的滚轮输入是基于 [WheelEvent](https://www.w3.org/TR/uievents/#i image.png -可以依此实现用滚轮控制相机距离的示例。 - - diff --git a/docs/zh/performance/stats.mdx b/docs/zh/performance/stats.mdx index fe05cad1e..0efaa42c1 100644 --- a/docs/zh/performance/stats.mdx +++ b/docs/zh/performance/stats.mdx @@ -14,7 +14,3 @@ import { Stats } from "@galacean/engine-toolkit-stats"; cameraEntity.addComponent(Camera); cameraEntity.addComponent(Stats); ``` - -## 示例 - - diff --git a/docs/zh/physics/collider/colliderShape.mdx b/docs/zh/physics/collider/colliderShape.mdx index df3aa5265..596522bca 100644 --- a/docs/zh/physics/collider/colliderShape.mdx +++ b/docs/zh/physics/collider/colliderShape.mdx @@ -151,10 +151,6 @@ function createCompoundCollider(entity: Entity) { } ``` - -#### 示例参考 - - ### 常用场景示例 1. **创建地面** diff --git a/docs/zh/physics/collider/event.mdx b/docs/zh/physics/collider/event.mdx index 3125c3113..bf0c32f10 100644 --- a/docs/zh/physics/collider/event.mdx +++ b/docs/zh/physics/collider/event.mdx @@ -82,7 +82,3 @@ class EventHandler extends Script { } } ``` - -### 示例 - - diff --git a/docs/zh/physics/debug.mdx b/docs/zh/physics/debug.mdx index f34a8a536..3832d4324 100644 --- a/docs/zh/physics/debug.mdx +++ b/docs/zh/physics/debug.mdx @@ -13,4 +13,3 @@ label: Physics const wireframe = rootEntity.addComponent(WireframeManager); wireframe.addCollideWireframe(collider); ``` - diff --git a/docs/zh/physics/joint/overview.mdx b/docs/zh/physics/joint/overview.mdx index 083f84704..29d207481 100644 --- a/docs/zh/physics/joint/overview.mdx +++ b/docs/zh/physics/joint/overview.mdx @@ -94,10 +94,6 @@ joint.connectedMassScale = 1.0; joint.automaticConnectedAnchor = true; ``` -上述物理约束组件的使用，可以参照： - - - ## 更多信息 有关各类型关节的具体使用方法，请参考对应文档: diff --git a/docs/zh/physics/manager.mdx b/docs/zh/physics/manager.mdx index c7d1cbfaf..a80f30556 100644 --- a/docs/zh/physics/manager.mdx +++ b/docs/zh/physics/manager.mdx @@ -64,8 +64,6 @@ scene.physics.gravity.set(0, -9.81, 0); ## 使用射线检测 - - 射线可以理解成 3D 世界中一个点向一个方向发射的一条无终点的线。射线投射在 3D 应用中应用非常广泛： - 在用户点击屏幕时,用于拾取3D场景中的物体 diff --git a/docs/zh/script/attributes.md b/docs/zh/script/attributes.mdx similarity index 100% rename from docs/zh/script/attributes.md rename to docs/zh/script/attributes.mdx diff --git a/docs/zh/script/class.md b/docs/zh/script/class.mdx similarity index 98% rename from docs/zh/script/class.md rename to docs/zh/script/class.mdx index 5983ad679..19206eb15 100644 --- a/docs/zh/script/class.md +++ b/docs/zh/script/class.mdx @@ -15,7 +15,7 @@ label: Script ## 脚本生命周期 -脚本生命周期-zh +脚本生命周期-zh > [onBeginRender](/apis/core/#Script-onBeginRender) 和 [onEndRender](/apis/core/#Script-onEndRender) 这两个生命周期与其他的有些不同。 > diff --git a/docs/zh/script/communication.md b/docs/zh/script/communication.mdx similarity index 100% rename from docs/zh/script/communication.md rename to docs/zh/script/communication.mdx diff --git a/docs/zh/script/script.md b/docs/zh/script/script.mdx similarity index 100% rename from docs/zh/script/script.md rename to docs/zh/script/script.mdx diff --git a/docs/zh/xr/compatibility.md b/docs/zh/xr/compatibility.mdx similarity index 92% rename from docs/zh/xr/compatibility.md rename to docs/zh/xr/compatibility.mdx index 8574daa03..3b1b10f22 100644 --- a/docs/zh/xr/compatibility.md +++ b/docs/zh/xr/compatibility.mdx @@ -50,4 +50,4 @@ xrManager.isSupportedFeature(XRImageTracking); 安卓支持某些试验功能，但是开关时默认关闭的，此时可以通过设置 flags 打开，**安卓打开 Chrome** -> **登陆 chrome://flags** -> **搜索 WebXR** -> **打开 WebXR Incubations** -image.png +image.png diff --git a/docs/zh/xr/overall.md b/docs/zh/xr/overall.mdx similarity index 92% rename from docs/zh/xr/overall.md rename to docs/zh/xr/overall.mdx index 34c14a5c6..30f1e17ec 100644 --- a/docs/zh/xr/overall.md +++ b/docs/zh/xr/overall.mdx @@ -15,7 +15,7 @@ Galacean 对 XR 做了干净灵活的设计： - 灵活：可插拔的功能，让开发更简单 - 面向未来：多后端设计，后续可适配不同平台不同接口 -image.png +image.png ## 模块管理 diff --git a/docs/zh/xr/quickStart/debug.md b/docs/zh/xr/quickStart/debug.mdx similarity index 77% rename from docs/zh/xr/quickStart/debug.md rename to docs/zh/xr/quickStart/debug.mdx index a50872231..b95700581 100644 --- a/docs/zh/xr/quickStart/debug.md +++ b/docs/zh/xr/quickStart/debug.mdx @@ -17,7 +17,7 @@ label: XR 准备完毕后，就可以在编辑器上预览 XR 项目了： -image.png +image.png 当然，将项目下载到本地脚本构建也可以预览： @@ -26,7 +26,7 @@ npm install npm run https ``` -image.png +image.png > WebXR 仅在安全环境（HTTPS）中可用，因此，构建项目调试时需启用 Https。 @@ -40,11 +40,11 @@ npm run https > `Google Play Services for AR` 是由谷歌开发的增强现实平台（ARCore），有些手机自带此 App ，若没有，可在应用商店搜索，下图为小米应用商城的搜索结果。 -image.png +image.png 上述条件全都满足的前提下，就可以用手机预览本地构建的项目了（需要保证**手机与电脑在同一个局域网**）： -image.png +image.png ### 调试 diff --git a/docs/zh/xr/quickStart/develop.md b/docs/zh/xr/quickStart/develop.mdx similarity index 80% rename from docs/zh/xr/quickStart/develop.md rename to docs/zh/xr/quickStart/develop.mdx index d77e9d227..7aafea868 100644 --- a/docs/zh/xr/quickStart/develop.md +++ b/docs/zh/xr/quickStart/develop.mdx @@ -20,13 +20,13 @@ flowchart LR 在 **[首页](/docs/interface/intro/#%E9%A6%96%E9%A1%B5)** 点击 **创建项目** ，随后在 **[项目设置](/docs/interface/sidebar/#项目设置)** 中选择物理后端为 `WebXR` -image.png +image.png ### 添加 XR 节点 在 **[层级面板](/docs/interface/hierarchy/)** 添加 XR 节点 -image.png +image.png > 添加 XR 节点会自动创建并选择 `origin` 和 `camera`，因此场景内不应该存在其他 `Camera` 组件，除非是有意为之。 @@ -36,7 +36,7 @@ flowchart LR 若已按照 [调试 XR 项目](/docs/xr/quickStart/debug/) 的要求使用 Chrome 与 [Immersive Web Emulator](https://chromewebstore.google.com/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik) 插件，此时便可以直接预览。 -image.png +image.png ### XR 能力 @@ -51,7 +51,7 @@ flowchart LR | Anchor List | 追踪的锚点列表，用 Position 和 RotationQuaternion 确定现实空间中的锚点位姿 | | Prefab | 若设置预置体，锚点被追踪到时，该预置体会被实例化并挂载到追踪到的锚点上 | -image.png +image.png #### 图片追踪 @@ -62,7 +62,7 @@ flowchart LR | Image List | 追踪的图片列表，添加 `ReferenceImageAssets` 来确定追踪的图片信息 | | Prefab | 若设置预置体，锚点被追踪到时，该预置体会被实例化并挂载到追踪到的锚点上 | -image.png +image.png 其中，追踪的图片在编辑器中是一种资产，您可以通过在 **[资产面板](/docs/assets/interface/)** 空白处依次 **右键** → **Upload** → **XRReferenceImage** → **选中对应图片** 即可上传追踪图片。 @@ -82,7 +82,7 @@ flowchart LR | Detection Mode | 识别平面类型，包含 `None` 、 `Horizontal` 、`Vertical` 、`EveryThing`,可以决定追踪的平面类型，默认选择 `EveryThing` ，但在 `WebXR` 中通常识别到的是水平平面 | | Prefab | 若设置预置体，平面被追踪到时，该预置体会被实例化并挂载到追踪到的平面上 | -image.png +image.png ### 注意 @@ -106,9 +106,3 @@ engine.xrManager.sessionManager.isSupportedMode(xrMode).then( } ); ``` - -## 脚本开发 - -在进入纯代码开发前，请先了解部分 [XR 管理器](/docs/xr/system/manager/) 内容，下方为开启 AR 互动的一个最简示例： - - \ No newline at end of file diff --git a/docs/zh/xr/system/camera.md b/docs/zh/xr/system/camera.mdx similarity index 100% rename from docs/zh/xr/system/camera.md rename to docs/zh/xr/system/camera.mdx diff --git a/docs/zh/xr/system/features.md b/docs/zh/xr/system/features.mdx similarity index 91% rename from docs/zh/xr/system/features.md rename to docs/zh/xr/system/features.mdx index ae8670011..146be0104 100644 --- a/docs/zh/xr/system/features.md +++ b/docs/zh/xr/system/features.mdx @@ -66,9 +66,7 @@ anchorTracking.addChangedListener( xrManager.addFeature(XRPlaneTracking, XRPlaneMode.EveryThing); ``` -我们可以追踪现实平面，并为他们标记透明的网格和坐标系： - - +我们可以追踪现实平面，并为他们标记透明的网格和坐标系。 ## 图片追踪 @@ -103,14 +101,6 @@ image.onload = () => { image.src = "图片的 URL"; ``` -下方示例可以追踪现实图片，并标记坐标系： - - - -> 上方示例可直接生成二维码从手机侧体验，追踪图如下： - - image-20231007201437362 - ## 碰撞检测 | 方法 | 解释 | diff --git a/docs/zh/xr/system/input.md b/docs/zh/xr/system/input.mdx similarity index 100% rename from docs/zh/xr/system/input.md rename to docs/zh/xr/system/input.mdx diff --git a/docs/zh/xr/system/manager.md b/docs/zh/xr/system/manager.mdx similarity index 98% rename from docs/zh/xr/system/manager.md rename to docs/zh/xr/system/manager.mdx index 4d1c52f42..bed7f7713 100644 --- a/docs/zh/xr/system/manager.md +++ b/docs/zh/xr/system/manager.mdx @@ -53,5 +53,3 @@ flowchart TD H -- pause --> I[Session Paused] I -- exit --> J[Session None] ``` - - diff --git a/docs/zh/xr/system/session.md b/docs/zh/xr/system/session.mdx similarity index 100% rename from docs/zh/xr/system/session.md rename to docs/zh/xr/system/session.mdx diff --git a/docs/zh/xr/system/toolkit.md b/docs/zh/xr/system/toolkit.mdx similarity index 100% rename from docs/zh/xr/system/toolkit.md rename to docs/zh/xr/system/toolkit.mdx