鸿蒙（API 12 Beta6版）【ArkGraphics 3D场景搭建以及管理】方舟3D图形 ...

ArkGraphics 3D （方舟3D图形）基于轻量级的3D引擎以及渲染管线为开发者提供底子3D场景绘制能力，供开发者便捷、高效地构建3D场景并完成渲染。
功能介绍

• 提供加载并解析glTF模子的能力，支持开发者将glTF模子文件置于应用文件沙盒中，通过ArkGraphics 3D提供的异步接口完成模子的加载以及渲染。
  
• 提供自界说灯光（Light）、相机（Camera）节点以及通用节点（Node）的能力，支撑开发者自界说场景灯光、渲染视角等信息，同时支撑用户动态地调解场景树结构以及节点属性进而调解3D场景。
  
• 提供创建图片（Image）、材质（Material）、环境（Environment）以及自界说着色器(Shader)的能力，支撑开发者调用ArkGraphics 3D提供的能力创建3D场景中使用的各种资源，支撑开发者自界说着色器，完成自界说3D材质渲染。
  
• 提供控制3D场景动画状态的能力，支撑开发者控制动画的开始、停息、结束、播放到指定位置等操纵，同时提供动画开始、结束时的回调函数支持开发者举行逻辑控制。
  
• 提供底子的3D渲染后处置惩罚能力，提供接口支撑开发者举行ToneMapping后处置惩罚干系控制。
  

综上，ArkGraphics 3D提供底子的3D场景渲染能力，支撑开发者完成3D场景渲染以及逻辑控制开发工作。
框架原理

如上图 ArkGraphics 3D接口能力由图形后端、引擎层以及接口层三个关键部门共同组成。

• 图形后端：主要指GPU硬件提供的驱动接口类型，业界通用的主要包含OpenGL ES以及Vulkan两类。引擎层通过下发GPU指令调用这些接口，实现场景的渲染。
  
• 引擎层：依托Ark Graphics Platform渲染引擎部件提供渲染能力，AGP引擎具有易用性、高画质、可扩展等特性。引擎使用先进的ECS（Entity-Component-System）架构筹划，举行模块化封装（如材质界说、后处置惩罚特效等），为开发者提供了机动易用的开发套件。
  
• 接口层：基于引擎的ECS Framework，通过NAPI层对数据举行组织处置惩罚，向开发者暴露简单易用的3D渲染接口，支持开发者使用少量代码完成3D场景的开发。
  

约束限定

使用ArkGraphics 3D模块需要硬件设备支持OpenGL ES 3.2以上或者Vulkan 1.0以上的GPU驱动。
ArkGraphics 3D场景搭建以及管理

一个3D场景通常由光源、相机、模子三个关键部门组成。

• 光源：为整个3D场景提供光照，使得3D场景中的模子变得可见。与真实物理场景划一，没有光源场景将变得一片漆黑，得到的渲染结果也就是全黑色。
  
• 相机：为3D场景提供一个观察者。3D渲染本质上是从一个角度观察3D场景并投影到一张2D图片上。没有相机就没有3D场景的观察者，也就不会得到渲染结果。
  
• 模子：3D场景中的模子用于描述对象的外形、结构和表面，一般具有网格、材质、纹理、动画等属性。常见的3D模子格式有OBJ、FBX、glTF等。
  

模子加载后，可以通过ArkUI的[Component3D]渲染组件呈现给用户，Component3D也可以对3D模子做自界说渲染。开发者也可以使用ArkTS API对相机和光源举行调治，获得合适的观察角度和光照效果。ArkTS API可通过napi调用AGP中由C++实现的相应能力。

模子的加载及呈现

模子的格式多种多样，现在ArkGraphics 3D仅支持glTF模子的加载，glTF是一种对于3D场景描述的格式，就像图片有png格式一样，glTF作为一种开源3D场景格式在业界被广泛采取。
一个glTF模子可以包含光源、相机、模子等3D场景关键要素，假如一个glTF模子中包含相机，使用ArkGraphics 3D提供的接口加载glTF就可以直接完成该相机视角下3D场景的渲染。假如不包含相机，也可以使用ArkGraphics 3D创建一个相机完成渲染。由于3D模子每每数据量很大，通常采取异步方式举行加载，加载成功后将返回一个scene对象，通过该对象可对整个3D场景举行编辑。
glTF模子可用Scene提供的[load]接口加载，示例代码如下：

1. import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters,
2.   LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D';
4. function loadModel() : void {
5.   // 加载模型
6.   let scene: Promise<Scene> = Scene.load($rawfile("gltf/DamagedHelmet/glTF/DamagedHelmet.gltf"));
7.   scene.then(async (result: Scene) => {});
8. }

复制代码

模子加载成功后，可通过SceneResourceFactory实例创建相机、光源等，再对相机和光源的参数做调治，调解观察角度和光照效果。最后，将Scene实例和ModelType作为SceneOptions传给Component3D组件表现到屏幕。
模子表现的示例代码如下：

1. import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters,
2.   LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D';
4. @Entry
5. @Component
6. struct Model {
7.   scene: Scene | null = null;
8.   @State sceneOpt: SceneOptions | null = null;
9.   cam: Camera | null = null;
11.   onPageShow(): void {
12.     this.Init();
13.   }
15.   Init(): void {
16.     if (this.scene == null) {
17.       // 加载模型，将gltf文件放置到相关路径，加载时以实际路径为准
18.       Scene.load($rawfile('gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'))
19.       .then(async (result: Scene) => {
20.         this.scene = result;
21.         let rf:SceneResourceFactory = this.scene.getResourceFactory();
22.         // 创建相机
23.         this.cam = await rf.createCamera({ "name": "Camera" });
24.         // 设置合适的相机参数
25.         this.cam.enabled = true;
26.         this.cam.position.z = 5;
27.         this.sceneOpt = { scene: this.scene, modelType: ModelType.SURFACE } as SceneOptions;
28.       })
29.       .catch((reason: string) => {
30.         console.log(reason);
31.       });
32.     }
33.   }
35.   build() {
36.     Row() {
37.       Column() {
38.         if (this.sceneOpt) {
39.           // 通过Component3D呈现3D场景
40.           Component3D(this.sceneOpt)
41.         } else {
42.           Text("loading ...")
43.         }
44.       }.width('100%')
45.     }.height('60%')
46.   }
47. }

复制代码

相机的创建及管理

相机作为3D场景中的重要部门，决定了整个3D场景向2D图片的投影过程，相机的近远平面、Fov角等关键参数也会对整个3D渲染产生重要的影响。开发者可以通过对于相机参数的设置。控制这个渲染过程，得到开发者想要的渲染效果。
相机干系控制的示例代码如下：

1. import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters,
2.   LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D';
4. function createCameraPromise() : Promise<Camera> {
5.   return new Promise(() => {
6.     let scene: Promise<Scene> = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.gltf"));
7.     scene.then(async (result: Scene) => {
8.       let sceneFactory: SceneResourceFactory = result.getResourceFactory();
9.       let sceneCameraParameter: SceneNodeParameters = { name: "camera1" };
10.       // 创建相机
11.       let camera: Promise<Camera> = sceneFactory.createCamera(sceneCameraParameter);
12.       camera.then(async (cameraEntity: Camera) => {
13.         // 使能相机节点
14.         cameraEntity.enabled = true;
16.         // 设置相机的位置
17.         cameraEntity.position.z = 5;
19.         // 设置相机Fov参数
20.         cameraEntity.fov = 60 * Math.PI / 180;
22.         // 可以参照此方式设置相机很多其他的参数
23.         // ...
24.       });
25.       return camera;
26.     });
27.   });
28. }

复制代码

光源的创建及管理

3D场景的光源是对于物理世界中光源的一种数据建模，模仿物理世界的光源对于3D场景中的物体产生影响。
光源具有许多的类型，好比平行光、锥形光。平行光便是用来模仿生存中的太阳光照，发出的光线到处平行且强度匀称。锥形光则像是我们使用的手电筒，以一个点向一个扇形地域发射光线，且发出的光线会随着距离而衰减。光源的颜色也会对场景中的物体最终的着色产生影响，光源颜色与物体颜色相互作用的盘算与真实物理世界保持划一。ArkGraphics 3D提供了创建光源，修改光源各种参数的能力，支撑开发者通过对于光源属性的设置对于3D场景举行调解，得到盼望的渲染效果。
光源干系控制的示例代码如下：

1. import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters,
2.   LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D';
4. function createLightPromise() : Promise<Light> {
5.   return new Promise(() => {
6.     let scene: Promise<Scene> = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.gltf"));
7.     scene.then(async (result: Scene) => {
8.       let sceneFactory: SceneResourceFactory = result.getResourceFactory();
9.       let sceneLightParameter: SceneNodeParameters = { name: "light" };
10.       // 创建平行光
11.       let light: Promise<Light> = sceneFactory.createLight(sceneLightParameter, LightType.DIRECTIONAL);
12.       light.then(async (lightEntity: Light) => {
13.         // 设置平行光的颜色属性
14.         lightEntity.color = { r: 0.8, g: 0.1, b: 0.2, a: 1.0 };
16.         // 可以参照此方式设置光源很多其他的参数
17.         // ...
18.       });
19.       return light;
20.     });
21.   });
22. }

复制代码

最后呢

许多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的举行。
而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走许多弯路，节省没须要的贫苦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》内里内容包含了（ArkTS、ArkUI开发组件、Stage模子、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点
假如你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习门路图。

针对鸿蒙发展门路打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，帮助大家在技术的道路上更进一步。

• 《鸿蒙 (OpenHarmony)开发学习视频》
  
• 《鸿蒙生态应用开发V2.0白皮书》
  
• 《鸿蒙 (OpenHarmony)开发底子到实战手册》
  
• OpenHarmony北向、南向开发环境搭建
  
• 《鸿蒙开发底子》
  
• 《鸿蒙开发进阶》
  
• 《鸿蒙开发实战》
  

总结

鸿蒙—作为国家主力推送的国产操纵系统。部门的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。
并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，将来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来发作式的增长，学习鸿蒙势在必行！ 自↓↓↓拿

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。