33. OpenGL Animating Textures
Some of you might be wondering about animating your textures. Well I have
some bad news for you. OpenGL does not support texture animation. So you
will have no luck loading in a Gif or Movie file into your application and
rendering it straight to your shape. But I also have some good news. There are
ways around this. And I am going to show you the way that I know.
Now my way consists of creating a different image file for every frame in your
animation. If you have a gif file, you can probably find an exporter through a
quick search on the internet to render out every frame from your animation.
So why don’t we get started.
I am only adding one extra variable which will control which frame we are
currently displaying for our animation. You will probably need another
variable for each animation you wish you use. And this variable is simple
enough to call. I am just using:
double frame;
Now we don’t have to set our frame to 0 at the start of our application
because if we do not set a value, it will default to 0.
So far so good?
After that I am then loading every frame when the application loads as a
new part of the texture array. There are 9 files in total, so I am loading
them as 0-8 in my array.
texture[0] = LoadTexture( “textures/1.raw”, 256, 256 );
texture[1] = LoadTexture( “textures/2.raw”, 256, 256 );
texture[2] = LoadTexture( “textures/3.raw”, 256, 256 );
texture[3] = LoadTexture( “textures/4.raw”, 256, 256 );
texture[4] = LoadTexture( “textures/5.raw”, 256, 256 );
texture[5] = LoadTexture( “textures/6.raw”, 256, 256 );
texture[6] = LoadTexture( “textures/7.raw”, 256, 256 );
texture[7] = LoadTexture( “textures/8.raw”, 256, 256 );
texture[8] = LoadTexture( “textures/9.raw”, 256, 256 );
Now if we go to our display function, this is where we are going to set the
texture to our quad. I am simply calling our Texture array as the texture, with
the array number being which frame of the animation we are on. The (int) is to
set our frame to an integer.
glBindTexture( GL_TEXTURE_2D, texture[(int)frame] );
Then I am going to add at the bottom of our display function, the code
that will update which frame we are currently on for the current animation.
So our function will look like:
Here we are increasing which frame of the animation we are on each pass of the
display function. Changing this number will change the speed of the animation.
frame+=0.2;
Now I am checking to see if the frame is above the maximum, and if it is,
change it back to the first frame for a steady loop.
if (frame > 8)
{
frame = 1;
}
And if you run this you will have an animation of a man whose arms spin around.
Well, have fun, but keep in mind that this can be time consuming. And I don’t
really see a use for it at this point in time.
If you have any questions, email me at swiftless@gmail.com.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118. 119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 136. 137. 138. 139. 140. 141. 142. 143. 144. 145. 146. 147. 148. 149. 150. 151. 152. 153. 154. 155. 156. 157. 158. 159. 160. 161. 162. 163. 164. 165. 166. 167. 168. 169. 170. 171. 172. 173. 174. 175. 176. 177. 178. 179. 180. 181. 182. 183. 184. 185. 186. 187. 188. 189. 190. 191. 192. 193. 194. 195. 196. 197. 198. 199. 200. 201. 202. 203. 204. 205. 206. 207. 208. 209. 210. 211. 212. 213. 214. 215. 216. 217. 218. 219. 220. 221. 222. 223. 224. 225. 226. 227. 228. 229. 230. 231. 232. |
// Some of you might be wondering about animating your textures. Well I have // some bad news for you. OpenGL does not support texture animation. So you // will have no luck loading in a Gif or Movie file into your application and // rendering it straight to your shape. But I also have some good news. There are // ways around this. And I am going to show you the way that I know. // Now my way consists of creating a different image file for // So why don’t we get started. // I am only adding one extra variable which will control which // Now we don’t have to set our frame to 0 at the start of our // So far so good? // After that I am then loading every frame when the application // Now if we go to our display function, this is where we are // Then I am going to add at the bottom of our display function, // So our function will look like: // And if you run this you will have an animation of a man whose // Well, have fun, but keep in mind that this can be time consuming. // If you have any questions, email me at swiftless@gmail.com. #include <GL/gl.h> GLuint texture[8]; double frame; GLuint LoadTexture( const char * filename, int width, int //The following code will read in our RAW file glGenTextures( 1, &texture ); //generate the texture with //here we are setting what textures to use and when. The MIN //The qualities are (in order from worst to best) //And if you go and use extensions, you can use Anisotropic //Here we are setting the parameter to repeat the texture //Generate the texture with mipmaps void FreeTexture( GLuint texture ) void cube (void) { void display (void) { void init (void) { int main (int argc, char **argv) { |
sir,
your program does not gives the actual color of images………… please let me know how we get the original imag color
i cant see any output. just only a white box
You must delete the blank spaces in teh method init(). When I load the code in my IDE it was like this:
texture[0] = LoadTexture(“textures / 1.raw”, 256, 256);
and after correct it:
texture[0] = LoadTexture(“textures/1.raw”, 256, 256);
See you!
hey can u pls help me out , i m not able to see the output of this code , I m using codeblocks to run this code and i have placed the texture file in bin directory of the project.
and i can see only the white cube in the output . I guess the raw files are not getting read.
Hello Swiftless,
First let me say great tutorials and thanks for making the effort to create them. I had a question about the texture memory thing above because in my project I am using a sprite sheet method. Is there anyway to check how large of a texture a card will support in my code and then maybe use an alternate method? I know it would be easier to just do either or, but I was just wondering. Thanks!
where to save the texture file so that we can link with program??
Hi Pankaj,
You can save the texture file wherever you like, as long as the source code is pointing to that file. In this example, I have them in a folder called “textures” which is in the same directory as the application.
Cheers,
Swiftless
Hum.. Why not use a single texture file and then change the texture uv coordinates of each vertex? Usually an animated image goes to a cardboard which has only 4 vertexes. There won’t be much impact of changing those coords on the fly. Better then having 100s of images on disk…
Hi Limanima,
You could do that, and it is perfectly valid if you have a small 2D game and already have the sprite maps.
The problem with doing this in a larger game is that if you have a large file you will run out of texture memory extremely quickly. A lot of graphics cards don’t support textures with a size greater than 2048×2048.
Also, if you look at files such as movie files, or gifs, then you have no choice usually but to load it in frame by frame as that is how the file format is stored.
Cheers,
Swiftless