上一篇如何引入Live2D SDK的专栏发出去之后,有小伙伴找到我一起做Live2D相关的App,看来这块的确是有需求的。所以这个专栏我估摸着不能再咕了。
那么上一回我们讲到,如何为一个工程引入Live2D SDK,在引入SDK之后,自然是要把我们的Live2D模型渲染到视图上。
为了更好的理解,避免ObjC孤儿语言造成理解障碍,下面会以在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的架构
Live2D Native SDK 架构
Core层作为Live2D会社的技术核心,并不对外开放,程序在编译时需要手动链接对应的链接库。你可以在SDK的Core目录中找到相关的内容。
接下来是支撑Framework的基础组建,包括数学计算,一些Json、字符串工具、便于跨平台的自定义类型,以及用于家在模型参数的ID组件。
考虑到一切对模型的操作最终目的都是渲染出来,我按照自己的理解把Render渲染层放在了较底层的地方。接下来是用于加载模型的ModelLoader,ModelLoader通过对模型的json配置文件解析正确得找到对应的moc3模型,贴图,以及各类附加资源文件。其次,ParameterSystem提供了对模型参数修改的能力,你可以获取到这个模型的所有参数,并对他进行修改。
在这之上就是方便你整活的各种辅助系统了,包括呼吸,眨眼,姿势,表情,动作以及物理效果。关于辅助系统的讲解我还是咕到下一篇,本章我就只聊聊怎么让一个模型显示出来
创建自定义内存管理对象
对应文件 l2dapp.h 和 l2dapp.cpp
这部分其实并没有好说的,直接照搬SDK的Demo代码就行。因为Live2D作为一个跨平台组件,需要考虑各个平台的差异。使用一个自定义的内存管理对象方便你灵活的分配内存。例如你可以为全局分配一个内存池,避免频繁的申请内存,或者你可以监控内存分配,优化程序。由于这部分属于比较工程上的内容,这里就先跳过,日后有缘再见
模型对象
对应文件 l2dmodel.h 和 l2dmodel.cpp
一个标准Live2D模型应该有下图所示的目录结构(ModelName为模型名字)Live2D 模型目录结构
我们需要首先加载的是ModelName.model3.json文件,这个文件里面包含了一个Live2D模型的资源文件的索引信息。我们将这个文件全部读取出来,使用Csm::CubismModelSettingJson加载
加载模型索引文件
加载好索引信息之后,我们再去找对应的资源文件就很容易了。整个资源文件加载流程我分为这几步加载模型
加载效果(Effect)
加载动作(Motion)
加载物理(Physics)
创建渲染器
加载贴图
本篇为了最简单渲染模型(好像说了几次了),只实现了1、5、6。那么加载模型的时候,流程其实和加载模型索引大同小异。加载模型
首先通过模型索引使用GetModelFileName方法,获取模型文件路径。值得注意的是,这个路径是相对json索引文件的路径,你需要拼接一下才能拿到完整的路径。
同样将文件读取到内存后使用父类的LoadModel方法加载内存。
然后为这个模型创建一个新的布局
创建渲染器直接调用父类CreateRenderer方法即可,但是在创建贴图的时候,你需要将一个png文件读取为OpenGL纹理,同时非常关键的一点,你要设置纹理采样方式
纹理采样方式
建议使用图中所示的采样配置,否则会出现图像有锯齿的问题。
创建好纹理后,将纹理索引绑定到贴图索引,即调用BindTexture方法即可。
绑定纹理
OpenGL渲染
对应文件l2drenderwidget.cpp
我这里直接使用了Qt的OpenGLWidget实际应用时可根据自己需要
首先需要使用glewInit初始化GLEW,然后配置
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
最后加载模型及其资源文件。!强烈建议在OpenGL初始化时加载模型,否则会出现OpenGL上下文不对导致模型显示有问题。
在每次渲染刷新中渲染刷新
注意调用glClear清屏。对于模型的更新需要调用模型的Update方法。在更新完模型之后,调用DrawModel方法绘制模型。
需要说明一下setMVPMatrixWithSize方法用于设置模型的位置,需要转换为OpenGL纹理坐标系。