[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 的位置、角度，或者相机的角度等，渲染的结果如下：
4. 总结
- 加载 uv 坐标传递到 shader 中；
- 利用 pyopengl 加载纹理贴图；
- 渲染多个网格数据；
