[CG从零开始] 6. 加载一个柴犬模型学习UV贴图

在第 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 的位置、角度,或者相机的角度等,渲染的结果如下:

[CG从零开始] 6. 加载一个柴犬模型学习UV贴图

4. 总结

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

相关文章