OpenGL纹理UV动画

http://www.codesampler.com/oglsrc.htm

OpenGL纹理UV动画

分类： C++ OpenGL 随想&&感想 2013-07-08 15:34  162人阅读  评论(0)  收藏  举报

opengl 动画 UV动画

OpenGL纹理动画，常见做法是将一个视频离散成一系列静态帧图像，逐个图像上传到OpenGL生成纹理资源，保持四边形的位置、纹理坐标数据不变，动态绑定不同纹理从而实现播放视频效果。这种做法通常不是最优的，可以从两个地方改进：
1. 采用glTexSubImage2D函数，保持纹理Id不变情况下，动态替换纹理内容
2. 如果图像很小，可以将一系列图像打包到一张图片中去，通过纹理UV索引不同子图像

本文通过UV坐标直接操作图像实现动画效果。

1. 纹理坐标空间

如下图为Nate　Robin教程中的texture截图：

纹理空间视图，s轴为U坐标，t轴为V坐标。 u=1,v=1切好取到一张完整的图片，u=2, v=2如下图，取了四张完整的图片作为贴图：

OpenGL中有纹理矩阵堆栈，理论上可以通过矩阵操作纹理，但是没有实例。基于上面的尝试，我尝试通过动态修改纹理坐标实现一个精灵动画。

2. 贴图准备

图片是TGA格式的，黑色部分alpha通道值为0。 开启alpha融合以后，黑色部分最终显示为背景色，只有白色箭头可见。

通过控制纹理V坐标实现箭头流动动画。

3. 程序实现

初始化 指定纹理坐标：

[cpp]  view plain copy print ?

1. struct Vertex  
2. {  
3.     float tu, tv;  
4.     float x, y, z;  
5. };  
6.   
7. int g_vertexCount = 4;  
8. float g_quadWid = 0.2f;  
9. float g_quadHgh = 2.0f;  
10. float g_textureU = 1.0f;  
11. float g_textureV = 2.0f;  
12. float g_arrowSpeed = 0.01f;  
13.   
14. Vertex g_quadVertices[] =  
15. {  
16.     { 0.0f,0.0f, -g_quadWid/2,-g_quadHgh/2, 0.0f },  
17.     { g_textureU,0.0f,  g_quadWid/2,-g_quadHgh/2, 0.0f },  
18.     { g_textureU,g_textureV,  g_quadWid/2, g_quadHgh/2, 0.0f },  
19.     { 0.0f,g_textureV, -g_quadWid/2, g_quadHgh/2, 0.0f }  
20. };  

在每帧绘制函数中：

1）保持纹理Id不变

2）修改纹理坐标，

3）将位置，纹理数据传给opengl绘制。

[cpp]  view plain copy print ?

1. for (int i=0; i<g_vertexCount; i++)  
2. {  
3.     g_quadVertices[i].tv += g_arrowSpeed;  
4. }  
5.   
6. glBindTexture( GL_TEXTURE_2D, g_textureID );  
7. glInterleavedArrays( GL_T2F_V3F, 0, g_quadVertices );  
8. glDrawArrays( GL_QUADS, 0, g_vertexCount );  

4. 效果

gif效果如下：

哦哦，csdn不支持gif播放了。

源码下载：http://download.youkuaiyun.com/detail/dizuo/5720151

5. 参考

1. OpenGL经典教程：Nate Robin可视化教程

2. CodeSampler: http://www.codesampler.com/oglsrc.htm