# 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)

原作者：捉不住的鼬鼠

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

相關文章