在第 5 篇文章中,我们成功加载了 fbx 模型,并且做了 MVP 变换,将立方体按照透视投影渲染了出来。但是当时只是随机给顶点颜色,并且默认 fbx 文件里只有一个 mesh,这次我们来加载一个柴犬模型,并且给模型贴图,模型可以从 sketchfab 下载

本文没有涉及到理论解释,更多的是代码实践。

完整代码在 https://github.com/MangoWAY/CGLearner/tree/v0.3 tag v0.3

1. 创建纹理,加载图片

我们来封装一个 Texture 类用来加载图片,创建、bind 纹理,加载图片我用的是 pillow 库。

from OpenGL import GL as gl
from PIL import Image
import numpy as np
class Texture:
COUNT = 0
def __init__(self) -> None:
self.texid = -1
self.count = -1 def create(self):
self.texid = gl.glGenTextures(1) def load_from_path(self, path: str):
gl.glActiveTexture(gl.GL_TEXTURE0 + Texture.COUNT)
self.count = Texture.COUNT
Texture.COUNT +=1
gl.glBindTexture(gl.GL_TEXTURE_2D, self.texid)
# Set the texture wrapping parameters
gl.glTexParameteri(gl.GL_TEXTURE_2D, gl.GL_TEXTURE_WRAP_S, gl.GL_REPEAT)
gl.glTexParameteri(gl.GL_TEXTURE_2D, gl.GL_TEXTURE_WRAP_T, gl.GL_REPEAT)
# Set texture filtering parameters
gl.glTexParameteri(gl.GL_TEXTURE_2D, gl.GL_TEXTURE_MIN_FILTER, gl.GL_LINEAR)
gl.glTexParameteri(gl.GL_TEXTURE_2D, gl.GL_TEXTURE_MAG_FILTER, gl.GL_LINEAR)
# load image
image = Image.open(path)
img_data = np.array(list(image.getdata()), np.uint8)
gl.glTexImage2D(gl.GL_TEXTURE_2D,
0,
gl.GL_RGB,
image.width,
image.height,
0,
gl.GL_RGB,
gl.GL_UNSIGNED_BYTE,
img_data)
gl.glGenerateMipmap(gl.GL_TEXTURE_2D) def bind(self):
gl.glActiveTexture(gl.GL_TEXTURE0 + self.count)
gl.glBindTexture(gl.GL_TEXTURE_2D, self.texid)

2. UV 采样

在之前的文章中,我们基本只用到了顶点的位置信息,这次我们需要用到顶点的 uv 坐标,我们根据 uv 坐标对纹理进行采样,获取当前的颜色。如下,在之前封装的模型加载类里,用 pyassimp 获取 uv 坐标。

# model_importer.py
...
def load_mesh(self, path: str):
scene = pyassimp.load(path)
mmeshes = []
for mesh in scene.meshes:
...
# 获取 uv 坐标
mmesh.uvs = mesh.texturecoords.squeeze(0)
...
return mmeshes
...

有了 uv 以后,我们需要将它放到我们的顶点数组里,然后正确设置长度、偏移等等,和位置、法线等数据类似。有一点需要注意一下,图片的坐标系原点一般在左上,而 uv 坐标的原点在左下,因此需要 y 方向需要翻转一下。vert 如下,我们新加一个 uv 的顶点属性,然后将它传递到 frag shader 中。在 frag 中翻转一下 y,然后采样纹理。

// vert
#version 330 core
...
layout(location = 3) in vec2 aUV;
out vec3 c;
out vec2 uv;
uniform mat4 u_mvp;
void main(){
gl_Position = u_mvp * vec4(aPos,1.0);
c = aColor;
uv = aUV;
}
// frag
#version 330 core
out vec4 color;
in vec3 c;
in vec2 uv;
uniform sampler2D ourTexture;
void main(){
...
vec2 uv1 = vec2(uv.x,1.0-uv.y);
color = texture(ourTexture, uv1);
}

3. 绘制多个网格

这个柴犬模型里有 3 个网格,我们需要绘制 3 个网格,因此我们需要修改一下之前主函数的逻辑,之前是默认加载的第一个网格,现在需要加载每一个网格,然后创建 VAO、VBO、EBO 等渲染数据,然后加载纹理资源,最后在渲染循环中依次渲染。

# main.py
...
verts = []
indes = []
renderData = []
for mesh in meshes:
vert = []
for i in range(len(mesh.vertices)):
if i % 3 == 0:
vert.extend([mesh.vertices[i],mesh.vertices[i + 1],mesh.vertices[i + 2]])
vert.extend([mesh.normals[i],mesh.normals[i + 1],mesh.normals[i + 2]])
vert.extend([random.random(),random.random(),random.random()])
vert.extend([mesh.uvs[int(i/3),0],mesh.uvs[int(i/3),1]])
verts.append(vert)
inde = mesh.subMeshes[0].indices
indes.append(inde)
data = RendererData()
data.build_data([desp,desp1,desp2,desp3],vert, inde)
renderData.append(data)
...
tex = Texture()
tex.create()
tex.load_from_path("default_Base_Color.png")
tex.bind() while (...):
...
for data in renderData:
data.use()
data.draw()
data.unuse()
...

我们可以调一调之前定义的 Transform 的位置、角度,或者相机的角度等,渲染的结果如下:

4. 总结

  • 加载 uv 坐标传递到 shader 中;
  • 利用 pyopengl 加载纹理贴图;
  • 渲染多个网格数据;

[CG从零开始] 6. 加载一个柴犬模型学习UV贴图的更多相关文章

  1. jQuery加载一个html页面到指定的div里

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

  2. 无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性。

    新建一个MVC4的项目,引用DAL后,将DAL的连接字符串考入: <connectionStrings>     <add name="brnmallEntities&qu ...

  3. “无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性 “之解决

    今天在学习插件系统设计的时候遇到一个问题:“System.Reflection.ReflectionTypeLoadException: 无法加载一个或多个请求的类型. 于是百度一下,很多内容都差不多 ...

  4. Tomcat启动时自动加载一个类

    有时候在开发Web应用的时候,需要tomcat启动后自动加载一个用户的类,执行一些初始化方法,如从数据库中加载业务字典到内存中,因此需要在tomcat启动时就自动加载一个类,或运行一个类的方法. 可以 ...

  5. Android 编程下 WebView 加载一个网页如何得到网页的 Cookie 值

    http://www.cnblogs.com/sunzn/archive/2013/04/03/2998113.html mWebView.setWebViewClient(new MyWebView ...

  6. JavaWeb 服务启动时,在后台启动加载一个线程

    JavaWeb 服务启动时,在后台启动加载一个线程. 目前,我所掌握的一共有两种方法,第一种是监听(Listener),第二种是配置随项目启动而启动的Servlet. 下面对这两种方法做一简单的介绍, ...

  7. 如何在tomcat启动时自动加载一个类

    有时候在开发web应用的时候,需要tomcat启动后自动加载一个用户的类,执行一些初始化方法,如从数据库中加载业务字典到内存中,因此需要在tomcat启动时就自动加载一个类,或运行一个类的方法. 可以 ...

  8. tomcat启动时自动加载一个类 MyServletContextListener

    目的: 我们知道在tomcat启动后,需要页面请求进行驱动来执行操作接而响应.我们希望在tomcat启动的时候能够自动运行一个后台线程,以处理我们需要的一些操作.因此需要tomcat启动时就自动加载一 ...

  9. wpf prism4 出现问题:无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性。

    WPF Prism 框架 程序 出现 问题: 无法加载一个或多个请求的类型.有关更多信息,请检索 LoaderExceptions 属性. 1.开始以为是配置的问题,找了半天,最后原来是有个依赖类库没 ...

随机推荐

  1. Page和list的区别 mybatis

    先看一段代码 点击查看代码 @Override public Result findUserPage(PageParam pageParam) { Page<SysUser> page = ...

  2. Rust 从入门到精通01-简介

    1.rust 从哪里来 Rust语言在2006年作为 Mozilla 员工 Graydon Hoare 的私人项目出现,而 Mozilla 于 2009 年开始赞助这个项目.第一个有版本号的 Rust ...

  3. qbxt五一数学Day3

    目录 1. 组合数取模 1. \(n,m\le 200\),\(p\) 任意 2. \(n,m\le 10^6\),\(p\ge 10^9\) 素数 3. \(n,m\le 10^6\),\(p\le ...

  4. 使用Python3.7配合协同过滤算法(base on user,基于人)构建一套简单的精准推荐系统(个性化推荐)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_136 时至2020年,个性化推荐可谓风生水起,Youtube,Netflix,甚至于Pornhub,这些在互联网上叱咤风云的流媒体 ...

  5. 【web自动化测试】Playwright快速入门,5分钟上手

    我喜欢Playwright! 这是微软开源的一款非常强大的自动化工具,再过几年,他很有可能取代Selenium在浏览器自动化的通知地位.使用过一段时间,我没有找到很好的中文资料可以参考,导致很多问题无 ...

  6. Apache DolphinScheduler 项目笔记 — 1. 问题定位和排查问题

    导语: Yuanhao Ji 同学是<暑期 2021 - API 模块 UT 测试问题解决>项目负责人,本文记录了他是如何排查和定位问题. 1. 背景 问题:在部分 UT 中使用 Powe ...

  7. springmvc静态资源配置

    <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class>org.springf ...

  8. TypeScript 项目报错 Unknown file extension ".ts"

    下图是该问题的详细报错截图,经过多次捣鼓,初步猜测是模块有问题,要用 ES Module 还真是曲折,最不容易出错的就是 CommonJS 模块: 在百度.Bing 上搜索了好久的帖子也都没有相关的解 ...

  9. JavaScript 基础知识(一):对象以及原型

    前言 JavaScript 常被描述为一种基于原型的语言--每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象也可能拥有原型,并从中继承方法和属性,一层一层.以此类推.这种关 ...

  10. 逻辑判断与if and while循环结构

    逻辑判断与if and while循环结构 逻辑判断 逻辑运算符在进行逻辑判断时遇到打印输出命令时 and 当碰到一个条件为False时那么整个条件即为False,当碰到第一个为True时如果之后的值 ...