一、目的
1、二维纹理映射学习，画一个顶点颜色和纹理混合的立方体；
二、程序运行结果
顶点颜色和纹理混合
三、纹理映射的概念和原理
1、使用纹理增加物体表面细节
使用纹理，将物体表面的细节映射到建模好的物体表面，这样不仅能使渲染的模型表面细节更丰富，而且比较方便高效。纹理映射就是这样一种方法，在程序中通过为物体指定纹理坐标，通过纹理坐标获取纹理对象中的纹理，最终显示在屏幕区域上，已达到更加逼真的效果。
2、纹素(texel)和纹理坐标
使用纹素这个术语，而不是像素来表示纹理对象中的显示元素，主要是为了强调纹理对象的应用方式。纹理对象通常是通过纹理图片读取到的，这个数据保存到一个二维数组中，这个数组中的元素称为纹素(texel)，纹素包含颜色值和alpha值。纹理对象的大小的宽度和高度应该为2的整数幂，例如16, 32, 64, 128, 256。要想获取纹理对象中的纹素，需要使用纹理坐标(texture coordinate)指定。
纹理坐标应该与纹理对象大小无关，这样指定的纹理坐标当纹理对象大小变更时，依然能够工作，比如从256x256大小的纹理，换到512x256时，纹理坐标依然能够工作。因此纹理坐标使用规范化的值，大小范围为[0,1]，纹理坐标使用uv表示
纹理映射时只需要为物体的顶点指定纹理坐标即可，其余部分由片元着色器插值完成
四、二维纹理映射的处理方法
1、使用纹理的完整过程
Step1 首先要指定纹理坐标，这个坐标和顶点位置、顶点颜色一样处理，使用索引绘制，同顶点位置和颜色一样，需要指定纹理坐标的解析方式。
Step2 :然后需要设置OpenGL纹理参数；最后通过读取纹理图片，定义纹理图像格式等信息。纹理数据最终传递到了显卡中存储。
Step3 着色器中使用纹理对象
在顶点着色器中我们传递了纹理坐标，有了纹理坐标，获取最终的纹素使用过在片元着色器中完成的。由于纹理对象通过使用uniform变量来像片元着色器传递，实际上这里传递的是对应纹理单元(texture unit)的索引号。
着色器通过纹理单元的索引号索引纹理单元，每个纹理单元可以绑定多个纹理到不同的目标(1D,2D)。OpenGL可以支持的纹理单元数目，一般至少有16个，依次为GL_TEXTURE0 到GL_TEXTURE15
2、将顶点颜色和纹理混合
在程序的顶点着色器中，我们也传递了顶点颜色属性，将顶点颜色和纹理混合，修改片元着色器中代码为：
out_color = texture(s_texture, v_texture) * vec4(v_color, 1.0f);
五、源代码
"""
程序名称：GL_textures02.py
编程: dalong10
功能: 二维纹理与颜色混合的实现
参考资料： https://blog.csdn.net/wangdingqiaoit/article/details/51457675
"""
import glfw
from OpenGL.GL import *
from OpenGL.GL.shaders import compileProgram, compileShader
import numpy as np
import pyrr
from PIL import Image
vertex_src = """
# version 330
layout(location = 0) in vec3 a_position;
layout(location = 1) in vec3 a_color;
layout(location = 2) in vec2 a_texture;
uniform mat4 rotation;
out vec3 v_color;
out vec2 v_texture;
void main()
{
gl_Position = rotation * vec4(a_position, 1.0);
v_color = a_color;
v_texture = a_texture;
//v_texture = 1 - a_texture; // Flips the texture vertically and horizontally
//v_texture = vec2(a_texture.s, 1 - a_texture.t); // Flips the texture vertically
}
"""
fragment_src = """
# version 330
in vec3 v_color;
in vec2 v_texture;
out vec4 out_color;
uniform sampler2D s_texture;
void main()
{
out_color = texture(s_texture, v_texture) * vec4(v_color, 1.0f);
}
"""
# glfw callback functions
def window_resize(window, width, height):
glViewport(0, 0, width, height)
# initializing glfw library
if not glfw.init():
raise Exception("glfw can not be initialized!")
# creating the window
window = glfw.create_window(400, 400, "My OpenGL window", None, None)
# check if window was created
if not window:
glfw.terminate()
raise Exception("glfw window can not be created!")
# set window's position
glfw.set_window_pos(window, 100, 100)
# set the callback function for window resize
glfw.set_window_size_callback(window, window_resize)
# make the context current
glfw.make_context_current(window)
vertices = [-0.5, -0.5, 0.5, 1.0, 0.0, 0.0, 0.0, 0.0,
0.5, -0.5, 0.5, 0.0, 1.0, 0.0, 1.0, 0.0,
0.5, 0.5, 0.5, 0.0, 0.0, 1.0, 1.0, 1.0,
-0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 0.0, 1.0,
-0.5, -0.5, -0.5, 1.0, 0.0, 0.0, 0.0, 0.0,
0.5, -0.5, -0.5, 0.0, 1.0, 0.0, 1.0, 0.0,
0.5, 0.5, -0.5, 0.0, 0.0, 1.0, 1.0, 1.0,
-0.5, 0.5, -0.5, 1.0, 1.0, 1.0, 0.0, 1.0,
0.5, -0.5, -0.5, 1.0, 0.0, 0.0, 0.0, 0.0,
0.5, 0.5, -0.5, 0.0, 1.0, 0.0, 1.0, 0.0,
0.5, 0.5, 0.5, 0.0, 0.0, 1.0, 1.0, 1.0,
0.5, -0.5, 0.5, 1.0, 1.0, 1.0, 0.0, 1.0,
-0.5, 0.5, -0.5, 1.0, 0.0, 0.0, 0.0, 0.0,
-0.5, -0.5, -0.5, 0.0, 1.0, 0.0, 1.0, 0.0,
-0.5, -0.5, 0.5, 0.0, 0.0, 1.0, 1.0, 1.0,
-0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 0.0, 1.0,
-0.5, -0.5, -0.5, 1.0, 0.0, 0.0, 0.0, 0.0,
0.5, -0.5, -0.5, 0.0, 1.0, 0.0, 1.0, 0.0,
0.5, -0.5, 0.5, 0.0, 0.0, 1.0, 1.0, 1.0,
-0.5, -0.5, 0.5, 1.0, 1.0, 1.0, 0.0, 1.0,
0.5, 0.5, -0.5, 1.0, 0.0, 0.0, 0.0, 0.0,
-0.5, 0.5, -0.5, 0.0, 1.0, 0.0, 1.0, 0.0,
-0.5, 0.5, 0.5, 0.0, 0.0, 1.0, 1.0, 1.0,
0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 0.0, 1.0]
indices = [0, 1, 2, 2, 3, 0,
4, 5, 6, 6, 7, 4,
8, 9, 10, 10, 11, 8,
12, 13, 14, 14, 15, 12,
16, 17, 18, 18, 19, 16,
20, 21, 22, 22, 23, 20]
vertices = np.array(vertices, dtype=np.float32)
indices = np.array(indices, dtype=np.uint32)
shader = compileProgram(compileShader(vertex_src, GL_VERTEX_SHADER), compileShader(fragment_src, GL_FRAGMENT_SHADER))
# Step2: 创建并绑定VBO 对象 传送数据
VBO = glGenBuffers(1)
glBindBuffer(GL_ARRAY_BUFFER, VBO)
glBufferData(GL_ARRAY_BUFFER, vertices.nbytes, vertices, GL_STATIC_DRAW)
# Step3: 创建并绑定EBO 对象 传送数据
EBO = glGenBuffers(1)
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO)
glBufferData(GL_ELEMENT_ARRAY_BUFFER, indices.nbytes, indices, GL_STATIC_DRAW)
# Step4: 指定解析方式 并启用顶点属性
# 顶点位置属性
glEnableVertexAttribArray(0)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, vertices.itemsize * 8, ctypes.c_void_p(0))
# 顶点颜色属性
glEnableVertexAttribArray(1)
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, vertices.itemsize * 8, ctypes.c_void_p(12))
# 顶点纹理属性
glEnableVertexAttribArray(2)
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, vertices.itemsize * 8, ctypes.c_void_p(24))
texture = glGenTextures(1)
glBindTexture(GL_TEXTURE_2D, texture)
# Set the texture wrapping parameters
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT)
# Set texture filtering parameters
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR)
# load image
image = Image.open("brick.jpg")
image = image.transpose(Image.FLIP_TOP_BOTTOM)
img_data = image.convert("RGBA").tobytes()
# img_data = np.array(image.getdata(), np.uint8) # second way of getting the raw image data
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, image.width, image.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, img_data)
glUseProgram(shader)
glClearColor(0, 0.1, 0.1, 1)
glEnable(GL_DEPTH_TEST)
glEnable(GL_BLEND)
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)
model = pyrr.matrix44.create_from_translation(pyrr.Vector3([0.0, 0.0, 0]))
rotation_loc = glGetUniformLocation(shader, "rotation")
# the main application loop
while not glfw.window_should_close(window):
glfw.poll_events()
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT)
# 绘制第一个矩形
glUniformMatrix4fv(rotation_loc, 1, GL_FALSE, model)
glDrawElements(GL_TRIANGLES, len(indices), GL_UNSIGNED_INT, None)
glfw.swap_buffers(window)
# terminate glfw, free up allocated resources
glfw.terminate()
六、参考资料
1、大龙10的简书：https://www.jianshu.com/p/49dec482a291
2、The fool的博客：https://blog.csdn.net/wangdingqiaoit/article/details/51457675
