上一篇如何引入Live2D SDK的專欄發(fā)出去之后，有小伙伴找到我一起做Live2D相關(guān)的App，看來這塊的確是有需求的。所以這個(gè)專欄我估摸著不能再咕了。

那么上一回我們講到，如何為一個(gè)工程引入Live2D SDK，在引入SDK之后，自然是要把我們的Live2D模型渲染到視圖上。

為了更好的理解，避免ObjC孤兒語言造成理解障礙，下面會(huì)以在Qt中渲染Live2D作為例子。

先上Demo地址

https://github.com/CmST0us/Nodoka

值得注意的是，需要先參考?https://github.com/CmST0us/Nodoka/blob/master/vendor/download_live2d_native_sdk.txt 來下載配置SDK

先看看Live2D Native SDK的架構(gòu)

Live2D Native SDK 架構(gòu)

Core層作為Live2D會(huì)社的技術(shù)核心，并不對(duì)外開放，程序在編譯時(shí)需要手動(dòng)鏈接對(duì)應(yīng)的鏈接庫。你可以在SDK的Core目錄中找到相關(guān)的內(nèi)容。

接下來是支撐Framework的基礎(chǔ)組建，包括數(shù)學(xué)計(jì)算，一些Json、字符串工具、便于跨平臺(tái)的自定義類型，以及用于家在模型參數(shù)的ID組件。

考慮到一切對(duì)模型的操作最終目的都是渲染出來，我按照自己的理解把Render渲染層放在了較底層的地方。接下來是用于加載模型的ModelLoader，ModelLoader通過對(duì)模型的json配置文件解析正確得找到對(duì)應(yīng)的moc3模型，貼圖，以及各類附加資源文件。其次，ParameterSystem提供了對(duì)模型參數(shù)修改的能力，你可以獲取到這個(gè)模型的所有參數(shù)，并對(duì)他進(jìn)行修改。

在這之上就是方便你整活的各種輔助系統(tǒng)了，包括呼吸，眨眼，姿勢(shì)，表情，動(dòng)作以及物理效果。關(guān)于輔助系統(tǒng)的講解我還是咕到下一篇，本章我就只聊聊怎么讓一個(gè)模型顯示出來

創(chuàng)建自定義內(nèi)存管理對(duì)象

對(duì)應(yīng)文件?l2dapp.h 和 l2dapp.cpp

這部分其實(shí)并沒有好說的，直接照搬SDK的Demo代碼就行。因?yàn)長ive2D作為一個(gè)跨平臺(tái)組件，需要考慮各個(gè)平臺(tái)的差異。使用一個(gè)自定義的內(nèi)存管理對(duì)象方便你靈活的分配內(nèi)存。例如你可以為全局分配一個(gè)內(nèi)存池，避免頻繁的申請(qǐng)內(nèi)存，或者你可以監(jiān)控內(nèi)存分配，優(yōu)化程序。由于這部分屬于比較工程上的內(nèi)容，這里就先跳過，日后有緣再見

模型對(duì)象

對(duì)應(yīng)文件 l2dmodel.h 和 l2dmodel.cpp

一個(gè)標(biāo)準(zhǔn)Live2D模型應(yīng)該有下圖所示的目錄結(jié)構(gòu)(ModelName為模型名字)Live2D 模型目錄結(jié)構(gòu)

我們需要首先加載的是ModelName.model3.json文件，這個(gè)文件里面包含了一個(gè)Live2D模型的資源文件的索引信息。我們將這個(gè)文件全部讀取出來，使用Csm::CubismModelSettingJson加載

加載模型索引文件

加載好索引信息之后，我們?cè)偃フ覍?duì)應(yīng)的資源文件就很容易了。整個(gè)資源文件加載流程我分為這幾步加載模型

加載效果(Effect)

加載動(dòng)作(Motion)

加載物理(Physics)

創(chuàng)建渲染器

加載貼圖

本篇為了最簡單渲染模型(好像說了幾次了)，只實(shí)現(xiàn)了1、5、6。那么加載模型的時(shí)候，流程其實(shí)和加載模型索引大同小異。加載模型

首先通過模型索引使用GetModelFileName方法，獲取模型文件路徑。值得注意的是，這個(gè)路徑是相對(duì)json索引文件的路徑，你需要拼接一下才能拿到完整的路徑。

同樣將文件讀取到內(nèi)存后使用父類的LoadModel方法加載內(nèi)存。

然后為這個(gè)模型創(chuàng)建一個(gè)新的布局

創(chuàng)建渲染器直接調(diào)用父類CreateRenderer方法即可，但是在創(chuàng)建貼圖的時(shí)候，你需要將一個(gè)png文件讀取為OpenGL紋理，同時(shí)非常關(guān)鍵的一點(diǎn)，你要設(shè)置紋理采樣方式

紋理采樣方式

建議使用圖中所示的采樣配置，否則會(huì)出現(xiàn)圖像有鋸齒的問題。

創(chuàng)建好紋理后，將紋理索引綁定到貼圖索引，即調(diào)用BindTexture方法即可。

綁定紋理

OpenGL渲染

對(duì)應(yīng)文件l2drenderwidget.cpp

我這里直接使用了Qt的OpenGLWidget實(shí)際應(yīng)用時(shí)可根據(jù)自己需要

首先需要使用glewInit初始化GLEW，然后配置

glEnable(GL_BLEND);

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

最后加載模型及其資源文件。！強(qiáng)烈建議在OpenGL初始化時(shí)加載模型，否則會(huì)出現(xiàn)OpenGL上下文不對(duì)導(dǎo)致模型顯示有問題。

在每次渲染刷新中渲染刷新

注意調(diào)用glClear清屏。對(duì)于模型的更新需要調(diào)用模型的Update方法。在更新完模型之后，調(diào)用DrawModel方法繪制模型。

需要說明一下setMVPMatrixWithSize方法用于設(shè)置模型的位置，需要轉(zhuǎn)換為OpenGL紋理坐標(biāo)系。

總結(jié)

以上是生活随笔為你收集整理的live2dmesh渲染优先级_如何渲染Live2D模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。