一个专注音视频领域问答的小圈子

在掘金上看到最近的新活动 “代码吸猫”,技术类文章只要和猫有关就行。

对于没有养猫的程序员,这不是为难人嘛。

不过没关系,用 OpenGL 图像渲染给自己造一只猫吧!!!

模型构造

首先需要构造出猫的模型,有能力的话可以直接在三维软件里面造一个。

或者像我一样直接下载免费的猫模型,然后把它导入 Blender 3D 软件中。

在 Blender 中可以预览猫模型,或者对它做一下调整,最后在把这个模型导出。

模型加载

导出的 obj 文件里面就记录了模型的顶点信息,接下来就要用 OpenGL 将它绘制出来。

这里要用到 assimp 开源库,它支持多种模型文件的解析操作,通过它将模型解析成一个个 Mesh 。

Mesh 的定义如下:

class Mesh {
public:
  /*  Mesh Data  */
  vector<Vertex> vertices;
  vector<unsigned int> indices;
  vector<Texture> textures;
  unsigned int VAO;
  // 省略部分代码
}

Mesh 相当于绘制模型上的一个个网格或者说面片,它包含了该网格的顶点、纹理信息和绘制索引。

而模型 Model 就是由这一系列网格 Mesh 组成的。

如上图所示,猫模型是由一个个小矩阵组成的,小矩阵就可以理解成 mesh 网格了。

Model 的定义如下:

class Model
{
public:
  /*  Model Data */
  vector<Texture> textures_loaded;    
  vector<Mesh> meshes;
  // 省略部分代码  
}  

在实际绘制的时候,也是由一个一个 Mesh 最终绘制成的。

    // draws the model, and thus all its meshes
 void Draw(Shader shader)
 {
   for(unsigned int i = 0; i < meshes.size(); i++)
     meshes[i].Draw(shader);
 }

从图中也可以看到,猫模型的网格数量是很多的,导致加载的时候会很很慢了,加载方法如下:

  void loadModel(string const &path)
  {
    // 使用 assimp 库进行加载
    const aiScene* scene = importer.ReadFile(path, aiProcess_Triangulate | aiProcess_FlipUVs | aiProcess_CalcTangentSpace);
    // 检查是否有错
    if(!scene || scene->mFlags & AI_SCENE_FLAGS_INCOMPLETE || !scene->mRootNode) // if is Not Zero
    {
      cout << "ERROR::ASSIMP:: " << importer.GetErrorString() << endl;
      return;
    }
    // 获取模型所在文件夹
    directory = path.substr(0, path.find_last_of('/'));

    // 从根节点一个一个节点开始处理
    processNode(scene->mRootNode, scene);
  }

使用 assimp 处理后会得到一个根节点,然后顺着根节点一个一个往下处理就好了。

  void processNode(aiNode *node, const aiScene *scene)
  {
    for(unsigned int i = 0; i < node->mNumMeshes; i++)
    {
      aiMesh* mesh = scene->mMeshes[node->mMeshes[i]];
      // 处理得到的 aiMesh 并组装成定义好的 Mesh 数据结构 
      meshes.push_back(processMesh(mesh, scene));
    }
    // 处理子节点
    for(unsigned int i = 0; i < node->mNumChildren; i++)
    {
      processNode(node->mChildren[i], scene);
    }
  }

可以看到处理过程大量的 for 循环操作,所以后续才会针对模型文件的优化,加快其加载速度。

模型渲染

得到了最终的 Model 之后,就可以对它做渲染显示了。

    // model 矩阵调整模型显示位置和方向
    glm::mat4 model = glm::mat4(1.0f);
    model = glm::translate(model, glm::vec3(tranx_x, tranx_y, tranx_z));
    model = glm::rotate(model,glm::radians(90.0f),glm::vec3(0.0,0.0,1.0));
    model = glm::scale(model, glm::vec3(0.5f, 0.5f, 0.5f));    
    shader.setMatrix4fv("model", glm::value_ptr(model));
    ourModel.Draw(shader);

由于模型自身就带了一个位置和方向,显示的时候不一定是我们想要的观察方位,所以还是要调整一个模型矩阵。

最后渲染就可以看到 猫模型 效果啦。

小结

为了便于观察,可以处理一下键盘或者鼠标事件,修改模型矩阵的值,从不同角度撸猫。

目前的猫模型还只是静态的,调整的话也只能用键盘调整,而且还只是改了 移动、缩放、旋转这些属性,猫本身是没有动的。

想要猫自身能动的话,还需要模型里面有对应的骨骼动画才可以了,等后面有了这样的模型,再继续迭代。

关注微信公众号 音视频开发进阶,看更多撸猫后续内容…

知识星球

一个专注音视频领域问答的小圈子

公众号音视频开发进阶对应的知识星球,一个编程开发领域的专业圈子,贩卖知识和技巧!

※ 入群须知:了解该星球能提供的价值和帮助,在提问时务必阐述好背景,附带相关的信息。

iOS 用户可以加我微信 ezglumes 邀请你进星球,有疑问也可以加我微信咨询。

※ 星球内容:

基础教程:

在知识星球连载的干货教程,可以在专栏中找到,随着时间的推移,教程也会越来越多:

- 音视频基础概念
- WebRTC 入门教程及源码实践
- 播放器教程及源码实践
- OpenGL 和特效开发教程
- Vulkan 入门教程

部分内容可以在博客 https://glumes.com 中检索到,后面会在星球里持续更新.

干货分享:

涵盖了移动开发和音视频工程领域的绝大部分,从项目实战角度出发,提升能力,包括但不限于以下领域:

- Android/iOS 移动开发
- Camera 开发
- 短视频编辑 SDK 项目实践
- 在线直播和推流
- WebRTC 开发
- 播放器基础和提高
- OpenGL 图像渲染及特效开发
- C++ 基础和提高
- FFmpeg 使用和分析
- 干货资源和书籍分享

不止于技术方面的,各种 IT 新闻、茶余饭后、生活趣事也欢迎大家分享!!!

技术答疑解惑:

针对上述基础教程和干货分享的答疑,另外还有音视频和 IT 开发中的各种交流讨论。

- 基础知识点答疑
- 工业项目实践答疑
- 问题排查思路分析

一个 BUG 排查很久,不如来星球里提个问题,效率提升百倍。

求职和面试辅导:

一站式职场服务,每份工作都值得用心对待!!!

- 面试题和面试经验分享
- 简历修改和模拟面试
- 大厂内推和信息同步
- 职场经验分享
- 职业规划和发展分析

※ 星主和合伙人介绍

星主是公众号音视频开发进阶的作者,也是网站 https://glumes.com 的作者,曾参与过抖音、剪映等头部音视频 APP 底层 SDK 的开发。

合伙人也是在头条、快手从事音视频架构师的职位,具有多年的音视频开发经验,能力圈覆盖了音视频的绝大多数领域,资深音视频从业人员为你保驾护航。

微信公众号

扫描下面的二维码关注我的微信公众号《音视频开发进阶》,推送更多精彩内容!

添加我的微信 ezglumes 拉你入音视频与图形图像技术群一起交流学习~

wechat-account-qrcode

原创文章,转载请注明来源:    代码吸猫 | 用 OpenGL 图像渲染的养猫计划