From a87eda12a1acd41a540b0a7e3908ea505fe99be5 Mon Sep 17 00:00:00 2001 From: gz65555 Date: Thu, 28 Jul 2022 20:04:59 +0800 Subject: [PATCH 1/2] doc: perf scene doc --- docs/scene.zh-CN.md | 38 ++++++++++++++++++++++---------------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/docs/scene.zh-CN.md b/docs/scene.zh-CN.md index 82161303f..3feb0f402 100644 --- a/docs/scene.zh-CN.md +++ b/docs/scene.zh-CN.md @@ -6,6 +6,8 @@ type: 核心 Scene 作为场景单元，可以方便场景的实体树管理，尤其是大型游戏场景。如，**scene1** 和 **scene2** 作为两个不同的场景，不需要同时加载激活和渲染，那么我们完全可以通过建模软件或者代码逻辑，将之划分为不同的场景，在不同的时机分别地激活相应场景，或者合并场景。 +每个 Engine 下面只会渲染一个激活的场景 `engine.sceneManager.activeScene`。每个 Scene 可以有多个根实体，我们通过 Scene 对象去管理整个实体树。 + ## 场景管理 | 属性名称 | 解释 | @@ -51,20 +53,25 @@ engine.sceneManager.activeScene = destScene; #### 3. 加载 Scene -如果想要加载 **Scene** 资产作为应用中的一个场景，可以使用 `engine.sceneManager.loadScene` 传入 url 即可。 +如果想要加载 **Scene** 资产作为应用中的一个场景，可以使用 `engine.resourceManager.load` 传入 url 即可。 ```typescript -const sceneUrl = '...'; - -const scenePromise = engine.sceneManager.loadScene(sceneUrl); +const sceneUrl = "..."; -// 至此，加载的场景已经激活，如果还想对加载到的 scene 进行后续操作,如下： -scenePromise.then((scene) => { - console.log(scene); +engine.resourceManager.load({ type: AssetType.Scene, url: "..." }).then(scene=>{ + engine.sceneManager.activeScene = scene; }); + ``` -#### 4. 设置场景背景 +> 此 api 更多在编辑器场景中使用，后续编辑器开放后，同时也会开放场景格式标准。 + +#### 4. 场景销毁 + +调用 `scene.destroy()` 即可销毁场景。 + + +#### 5. 设置场景背景 目前场景背景支持添加纯色、天空和纹理背景。纯色和天空相对简单，代码示例如下： @@ -94,11 +101,11 @@ background.texture = texture; 目前纹理适配模式有以下三种： -| 适配模式 | 说明 | -| --------------- | -------------------------------------------------- | -| [AspectFitWidth](${api}core/BackgroundTextureFillMode#AspectFitWidth) | 保持宽高比，把纹理宽缩放至 Canvas 的宽，上下居中。 | +| 适配模式 | 说明 | +| --- | --- | +| [AspectFitWidth](${api}core/BackgroundTextureFillMode#AspectFitWidth) | 保持宽高比，把纹理宽缩放至 Canvas 的宽，上下居中。 | | [AspectFitHeight](${api}core/BackgroundTextureFillMode#AspectFitHeight) | 保持宽高比，把纹理高缩放至 Canvas 的高，左右居中。 | -| [Fill](${api}core/BackgroundTextureFillMode#Fill) | 把纹理的宽高填满 Canvas 的宽高。 | +| [Fill](${api}core/BackgroundTextureFillMode#Fill) | 把纹理的宽高填满 Canvas 的宽高。 | 默认的适配模式是 `BackgroundTextureFillMode.AspectFitHeight`。 @@ -106,14 +113,13 @@ Playground 示例如下： -#### 5. 设置场景环境光 +#### 6. 设置场景环境光 场景环境光（AmbientLight）设置： ```typescript const scene = engine.sceneManager.activeScene; scene.ambientLight.diffuseSolidColor.set(1, 1, 1, 1); - ``` ## 实体树管理 @@ -121,7 +127,7 @@ scene.ambientLight.diffuseSolidColor.set(1, 1, 1, 1); ### 基本用法 ```typescript -const engine = new WebGLEngine('demo'); +const engine = new WebGLEngine("demo"); const scene = engine.sceneManager.activeScene; // 创建根实体 @@ -153,7 +159,7 @@ const entity2 = scene.getRootEntity(2); 需要注意的是，当我们熟悉了 [Engine](${api}core/Engine) 和 [Scene](${api}core/Scene) 之后，如果想要将渲染画面输出到屏幕上或者进行离屏渲染，我们还得确保当前 _scene_ 的实体树上挂载了 [Camera](${api}core/Camera)，挂载相机的方法如下： ```typescript -const cameraEntity = rootEntity.createChild('camera'); +const cameraEntity = rootEntity.createChild("camera"); cameraEntity.addComponent(Camera); ``` From 53835903c11f12c9b3c5227cdf81e0afa68a4d6f Mon Sep 17 00:00:00 2001 From: gz65555 Date: Fri, 29 Jul 2022 00:35:26 +0800 Subject: [PATCH 2/2] doc: perf scene doc --- docs/scene.md | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/docs/scene.md b/docs/scene.md index 9987cd56f..58e3063bc 100644 --- a/docs/scene.md +++ b/docs/scene.md @@ -6,16 +6,18 @@ type: Core Scene can manage the entity tree, especially large game scenes. For example, **scene1** and **scene2** are two different scenes and do not need to be loaded for activation and rendering at the same time. Then we can divide them into different scenes through modeling software or code logic. Activating the corresponding scenes separately or merging scenes at the appropriate time. +Only one active scene `engine.sceneManager.activeScene` will be rendered under an Engine. Each Scene can have multiple root entities, and we manage the entire entity tree through the Scene object. + ## Scene management -| Properties | Explanation | -| :------------------------------------------------- | :------- | +| Properties | Explanation | +| :------------------------------------------------- | :-------------- | | [activeScene](${api}core/SceneManager#activeScene) | Activated scene | -| Methods | Explanation | -| :------------------------------------------------- | :------- | -| [mergeScenes](${api}core/SceneManager#mergeScenes) | Merge scenes| -| [loadScene](${api}core/SceneManager#loadScene) | Load scene | +| Methods | Explanation | +| :------------------------------------------------- | :----------- | +| [mergeScenes](${api}core/SceneManager#mergeScenes) | Merge scenes | +| [loadScene](${api}core/SceneManager#loadScene) | Load scene | ### Basic usage @@ -54,7 +56,7 @@ engine.sceneManager.activeScene = destScene; If you want to load the **Scene** asset in the application, you can pass an url to `engine.sceneManager.loadScene` method. ```typescript -const sceneUrl = '...'; +const sceneUrl = "..."; const scenePromise = engine.sceneManager.loadScene(sceneUrl); @@ -64,7 +66,11 @@ scenePromise.then((scene) => { }); ``` -#### 4. Set background of scene +#### 4. Destroy scene + +Call `scene.destroy()` will destroy the scene. + +#### 4. Set background of scene The scene background supports adding pure colors and sky: @@ -78,7 +84,7 @@ background.solidColor.set(1, 1, 1, 1); // White // Add a skybox background background.mode = BackgroundMode.Sky; -const skyMaterial = (background.sky.material = new SkyBoxMaterial(engine)); // Set the material of skybox +const skyMaterial = (background.sky.material = new SkyBoxMaterial(engine)); // Set the material of skybox skyMaterial.textureCubeMap = textureCube; // Set the cube texture of material background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2); // Set the mesh of the skybox ``` @@ -94,7 +100,6 @@ AmbientLight setting of the scene: ```typescript const scene = engine.sceneManager.activeScene; scene.ambientLight.diffuseSolidColor.set(1, 1, 1, 1); - ``` ## Entity tree management @@ -102,7 +107,7 @@ scene.ambientLight.diffuseSolidColor.set(1, 1, 1, 1); ### Basic usage ```typescript -const engine = new WebGLEngine('demo'); +const engine = new WebGLEngine("demo"); const scene = engine.sceneManager.activeScene; // Create root entity @@ -134,7 +139,7 @@ const entity2 = scene.getRootEntity(2); Note that if the rendered image is need to show on the screen or off-screen, the [Camera](${api}core/Camera) must be added on the entity in the current _scene_. The method of mounting the camera is as follows: ```typescript -const cameraEntity = rootEntity.createChild('camera'); +const cameraEntity = rootEntity.createChild("camera"); cameraEntity.addComponent(Camera); ```