使用opengl和Pillow来显示图片。
如果你以前使用过python来处理图片的话,那你对PIL有一定的了解,PIL是python的一个第3方库,主要是用来做图片处理的,但从1.1.7版本开始就已经停止维护了。
而Pillow则是PIL的衍生分支,它支持PIL的API,使用方法都一样,到现在还在维护。
首先我们来创建一个QGLWidget
添加一些buffer(内存)对象
使用Pillow来加载图片
然后我们重写initializeGL方法来进行初始化
创建并编译shader
设置shader里的一些参数
设置平面的坐标和顶点循序
[img]http://dl2.iteye.com/upload/attachment/0095/9107/bedc95d9-b691-3db2-820b-8ff211e9ef97.png[/img]
然后将数据传送到显卡
在我们传送图片数据到显卡之前,我们需要从上向下反转图片,不然我们显示的图片就是上向下反转的图片
然后传送图片数据到显卡
这里你可以吧uv的坐标模式换一下
并把shader.vert里的uv坐标改成
你将会得到
[img]http://dl2.iteye.com/upload/attachment/0095/9125/7b516777-0128-3232-b439-6e759a889767.png[/img]
到这里我们就可以开始进行渲染绘制了
至于shader.vert和shader.frag,做的都是非常简单的事情
shader.vert负责接收顶点信息,并保存uv的坐标,最后把uv传递给shader.frag,然后它通过uv坐标来读取图片的像素并导出给硬件,最终硬件进行显示。
[img]http://dl2.iteye.com/upload/attachment/0095/9029/32af3768-9514-3135-91be-663f4ea3290c.png[/img]
完整的代码可以从这里获取
[url]https://github.com/mackst/opengl-samples/tree/master/displayImage[/url]
ps.图片需要你们自己添加
如果你以前使用过python来处理图片的话,那你对PIL有一定的了解,PIL是python的一个第3方库,主要是用来做图片处理的,但从1.1.7版本开始就已经停止维护了。
而Pillow则是PIL的衍生分支,它支持PIL的API,使用方法都一样,到现在还在维护。
首先我们来创建一个QGLWidget
class MyGLWidget(QGLWidget):
添加一些buffer(内存)对象
# buffer object ids
self.vaoID = None
self.vboVerticesID = None
self.vboIndicesID = None
self.textureID = None
self.sprogram = None
使用Pillow来加载图片
# chang this to load your image file
self.loadImage('Lenna.png')
然后我们重写initializeGL方法来进行初始化
def initializeGL(self):
创建并编译shader
# create shader from file
vshader = shaderFromFile(GL_VERTEX_SHADER, 'shader.vert')
fshader = shaderFromFile(GL_FRAGMENT_SHADER, 'shader.frag')
# compile shaders
self.sprogram = shaders.compileProgram(vshader, fshader)
设置shader里的一些参数
# get attribute and set uniform for shaders
glUseProgram(self.sprogram)
self.vertexAL = glGetAttribLocation(self.sprogram, 'pos')
self.tmUL = glGetUniformLocation(self.sprogram, 'textureMap')
glUniform1i(self.tmUL, 0)
glUseProgram(0)
设置平面的坐标和顶点循序
# two triangle to make a quad
self.vertices = np.array((0.0, 0.0,
1.0, 0.1,
1.0, 0.9,
0.0, 1.0), dtype=np.float32)
self.indices = np.array((0, 1, 2,
0, 2, 3), dtype=np.ushort)
[img]http://dl2.iteye.com/upload/attachment/0095/9107/bedc95d9-b691-3db2-820b-8ff211e9ef97.png[/img]
然后将数据传送到显卡
# set up vertex array
self.vaoID = glGenVertexArrays(1)
self.vboVerticesID = glGenBuffers(1)
self.vboIndicesID = glGenBuffers(1)
glBindVertexArray(self.vaoID)
glBindBuffer(GL_ARRAY_BUFFER, self.vboVerticesID)
# copy vertices data from memery to gpu memery
glBufferData(GL_ARRAY_BUFFER, self.vertices.nbytes, self.vertices, GL_STATIC_DRAW)
# tell opengl how to procces the vertices data
glEnableVertexAttribArray(self.vertexAL)
glVertexAttribPointer(self.vertexAL, 2, GL_FLOAT, GL_FALSE, 0, None)
# send the indice data too
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, self.vboIndicesID)
glBufferData(GL_ELEMENT_ARRAY_BUFFER, self.indices.nbytes, self.indices, GL_STATIC_DRAW)
在我们传送图片数据到显卡之前,我们需要从上向下反转图片,不然我们显示的图片就是上向下反转的图片
# flip the image in the Y axis
im = self.im.transpose(Image.FLIP_TOP_BOTTOM)
然后传送图片数据到显卡
# set up texture
self.textureID = glGenTextures(1)
glActiveTexture(GL_TEXTURE0)
glBindTexture(GL_TEXTURE_2D, self.textureID)
# set filters
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST)
# set uv coords mode
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP)
# send the image data to gpu memery
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, self.im.size[0], self.im.size[1],
0, GL_RGB, GL_UNSIGNED_BYTE, im.tostring())
这里你可以吧uv的坐标模式换一下
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_MIRRORED_REPEAT)
并把shader.vert里的uv坐标改成
uv = pos*2 - 1;
你将会得到
[img]http://dl2.iteye.com/upload/attachment/0095/9125/7b516777-0128-3232-b439-6e759a889767.png[/img]
到这里我们就可以开始进行渲染绘制了
def paintGL(self, *args, **kwargs):
# clear the buffers
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)
# active shader
glUseProgram(self.sprogram)
# draw triangles
glDrawElements(GL_TRIANGLES, self.indices.size, GL_UNSIGNED_SHORT, None)
glUseProgram(0)
至于shader.vert和shader.frag,做的都是非常简单的事情
shader.vert负责接收顶点信息,并保存uv的坐标,最后把uv传递给shader.frag,然后它通过uv坐标来读取图片的像素并导出给硬件,最终硬件进行显示。
[img]http://dl2.iteye.com/upload/attachment/0095/9029/32af3768-9514-3135-91be-663f4ea3290c.png[/img]
完整的代码可以从这里获取
[url]https://github.com/mackst/opengl-samples/tree/master/displayImage[/url]
ps.图片需要你们自己添加