# 1 初始准备
## 1.1 CGKit简介
  CGKit是华为推出的一套高性能渲染框架，提供了渲染所需的原子能力，如材质、模型、灯光以及一些后期特效等。另外提供了高性能渲染组件，如抗锯齿和基于Vulkan的多线程组件等。除此之外还提供了Smart Cache以及Pre-rotation等扩展能力，并整合了前沿计算机图形学、计算机视觉和深度学习等最新研究成果。

## 1.2 官方指导
  华为开发者的主页如下：
  [https://developer.huawei.com/consumer/cn/](https://developer.huawei.com/consumer/cn/)

在该页面有CGKit的链接：

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020072911335660.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

点击该链接即可转到CGKit的主页，其地址如下：
  [https://developer.huawei.com/consumer/cn/hms/huawei-computer-graphics/](https://developer.huawei.com/consumer/cn/hms/huawei-computer-graphics/)

这里会有CGKit的基本介绍，如下：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200729113424187.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

这里主要关注开发，点击“查看文档”，即可转到如下地址：

[https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/introduction-0000001050197938](https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/introduction-0000001050197938)

该网页是进行CGKit开发的官方页面，有关介绍这里不再重复。

重点关注以下两点即可：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200729113503489.jpg#pic_center)

其中示例代码是一套Android Studio工程，含有开发CGKit的框架以及必要的代码；SDK则是CGKit的核心，包括so文件以及对应头文件。

需要注意的是，示例代码需要做一定的修改才能开发出可运行的应用，主要是以下两个原因：

1. SDK是核心模块，需要注册华为账号才能下载，故不包含在示例代码中，需要下载后放入示例代码工程中；
2. 模型等文件有一定版权限制，故不包含在示例代码中，需要自行下载或制作模型后放入示例代码工程中。

## 1.3 开发准备
1. 基于Kirin芯片的华为手机，目前支持Vulkan1.0版本，系统版本要求Android10以上；
2. Android Studio，推荐使用最新版本（目前为4.0）；
3. NDK版本20.1.5948944；
4. API等级29（Android 10）
5. Build Tools版本29.0.3

# 2 开发详细记录
## 2.1 新建工程
  使用Android Studio新建工程，这里为了方便不直接新建工程，而以官方示例代码为例，直接用Android Studio打开即可。

打开示例代码后，Android Studio会自动根据gradle进行有关内容的下载，比如该工程所指定的gradle-5.6.4。

虽然gradle配置了minSdkVersion为27，但是由于CGKit刚刚推出，兼容性问题还有待完善，因此可以改为29，仅在Android 10以上版本运行。

## 2.2 签名
  示例代码中的gradle文件配置了签名，这里可以删除，仅作为自己开发验证使用。当然，参考官方资料进行签名生成，以及华为应用接入等完整步骤也可以。

## 2.3 集成SDK
  在前面章节提到的SDK下载部分，将SDK下载下来，如下：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200729113839956.jpg#pic_center)

将include目录拷贝到：
  app\src\main\cpp

如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020072911394117.jpg#pic_center)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200729114047776.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

接着点击Build下的Refresh Linked C++ Projects：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200729114123372.jpg#pic_center)

则可以打开MainApplication.cpp，查看其中的接口都不再以红色显示，说明已经配置好了：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200729114328928.jpg#pic_center)

## 2.4 制作天空盒
  根据官方文档，天空盒应该自己制作，没有随示例代码发布。天空盒有许多参考资料，这里参考：
  [https://www.cnblogs.com/alps/p/7112872.html](https://www.cnblogs.com/alps/p/7112872.html)

该网站也提供了天空盒资源下载，可以作为学习之用。另外提供一个cubemap天空盒示例网站，可在线查看天空盒效果：
[https://doc.babylonjs.com/resources/playground_textures#cubetextures](https://doc.babylonjs.com/resources/playground_textures#cubetextures)

选择一个cubemap天空盒下载，然后编辑.cub配置文件内容如下：

width=512
height=512
depth=6
mipmap=1
face=6
channel=4
suffix=.png

这里width和height要和天空盒第一级mipmap的png图像大小一致。

并根据指导将图片命名，如下：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200729114438223.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

这些文件都放在env目录，然后复制到示例工程的cubemap目录即可。

这里要注意，目前CGKit仅支持四通道png格式的图片，请勿使用其他格式。如果png不是四通道，可以使用windows画图程序打开，另存为png，则可以转换成四通道。

## 2.5 准备模型
  目前CGKit只支持obj格式的模型，且仅从obj中解析点和面，其中的mtl格式材质则被忽略。另外，解析支持法线、贴图坐标解析及切线计算，但是面仅支持三角形模式，而不会进行多顶点组成的面的自动三角化。

开源免费的3D模型有许多，这里给一个参考网站：
  [https://www.turbosquid.com/Search/3D-Models/free/obj](https://www.turbosquid.com/Search/3D-Models/free/obj)

对于本教程，这里选了如下的模型：
[https://www.turbosquid.com/3d-models/medieval-blacksmith-low-poly-3d-model-1591136](https://www.turbosquid.com/3d-models/medieval-blacksmith-low-poly-3d-model-1591136)

效果如下：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200729114627655.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

## 2.5 开发应用
  示例工程已经含有MainApplication.cpp有关代码，这里仅需要稍作修改即可。

### 2.5.1 修改模型
  首先在InitScene方法中，修改模型路径：

String modelName = "models/black_smith/black_smith.obj";

接着修改贴图路径（将原来的jpg转为png格式）：

String texAlbedo = "models/black_smith/texture/black_smith.png";

这里只有一个贴图，将原来的多余贴图注释掉：

//String texNormal = "models/Avatar/Normal_01.png";
  //String texPbr = "models/Avatar/Pbr_01.png";

并将这两个贴图对应的SetTexture和SetSamplerParam注释掉。

### 2.5.2 修改天空盒
  修改CreateSkybox方法中的有关配置，将天空盒所用的立方体模型修改为：

String modelName = "models/cube/cube.obj";

这里cube是最简单的模型，链接如下：

https://gist.github.com/MaikKlein/0b6d6bb58772c13593d0a0add6004c1c

并注意将MainApplication.h中的环境贴图设置为：

String m_envMap = "cubemaps/env/env.cub";

这里与前面制作天空盒时所用的名称相同。

## 2.6 运行验证
  效果如下：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200729135635402.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

如果运行出现问题，可以使用adb logcat进行日志查看以分析问题。CGKit也会在安卓标准日志中打印有关信息，且只记录ERROR级别日志。如果想要对CGKit日志进行过滤，可以使用如下命令：

adb logcat | grep CGKit

# 3 FAQ
## 3.1 模型支持什么格式
  目前CGKit仅支持obj格式的模型，可解析顶点、法线、贴图坐标及面信息等；但不支持多余3顶点的面自动三角化，也不支持从mtl格式材质文件解析有关配置。

## 3.2 贴图支持什么格式
  目前CGKit仅支持四通道png格式图片解析。

## 3.3 签名是什么
  安卓开发可能需要用到签名，可以参考官方资料制作签名文件。在平时开发调试时，可以将示例代码中的签名配置注释掉。

## 3.4 Failed to get hire
  日志打印中可能会发现“Failed to get hire”，这条是打点所用，无需理会。“打点”是指CGKit对自己运行情况进行记录和上报，不影响渲染等模块运行。

# 4 附录
      已经编译好的apk，以及编译的Android Studio工程已经放在百度网盘供下载参考，如下：

链接：https://pan.baidu.com/s/1x8wjYLqZ4CZpVUlo-ZDM1w   提取码：3j8j

请注意，CGKit本身需要从官方下载SDK，即so和头文件，所以这里提供的工程中是不含有该SDK的，请先注册华为开发者后下载放入即可。该工程已经含有模型、贴图以及天空盒等必备资源，仅缺少CGKit SDK而已。

---
原文链接：[https://developer.huawei.com/consumer/cn/forum/topicview?tid=0201309841885850221&fid=18](https://developer.huawei.com/consumer/cn/forum/topicview?tid=0201309841885850221&fid=18)

原作者：捉不住的鼬鼠

ITPub博客

新技能Get! 手把手教你接入CG Kit

最新文章