11. 깃발효과(파도치는 텍스처)

HYBRID님이 번역중


This tutorial code brought to you by Bosco. The same guy that created the totally cool mini demo called worthless. He enjoyed everyones reaction to his demo, and decided to go one step further and explain how he does the cool effect at the end of his demo. This tutorial builds on the code from lesson 6. By the end of the tutorial you should be able to bend fold and manipulate textures of your own. It's definitely a nice effect, and alot better than flat non moving textures. If you enjoy the tutorial, please email bosco and let him know. 


Well greetings all. For those of you that want to see what we are doing here, you can check it out at the end of my demo/hack Worthless! I am bosco and I will do my best to teach you guys how to do the animated, sine-wave picture. This tutorial is based on NeHe's tutorial #6 and you should have at least that much knowledge. You should download the source package and place the bitmap I've included in a directory called data where your source code is. Or use your own texture if it's an appropriate size to be used as a texture with OpenGL. 

First things first. Open Tutorial #6 in Visual C++ and add the following include statement right after the other #include statements. The #include below allows us to work with complex math such as sine and cosine.
#include <math.h> // For The Sin() Function
We'll use the array points to store the individual x, y & z coordinates of our grid. The grid is 45 points by 45 points, which in turn makes 44 quads x 44 quads. wiggle_count will be used to keep track of how fast the texture waves. Every second frame looks pretty good, and the variable hold will store a floating point value to smooth out the waving of the flag. These lines can be added at the top of the program, somewhere under the last #include line, and before the GLuint texture[1] line.
float points[ 45 ][ 45 ][3]; // The Array For The Points On The Grid Of Our "Wave"
int wiggle_count = 0; // Counter Used To Control How Fast Flag Waves
GLfloat hold; // Temporarily Holds A Floating Point Value
Move down to the LoadGLTextures() procedure. We want to use the texture called Tim.bmp. Find LoadBMP("Data/NeHe.bmp") and replace it with LoadBMP("Data/Tim.bmp").
if (TextureImage[0]=LoadBMP("Data/Tim.bmp")) // Load The Bitmap
Now add the following code to the bottom of the InitGL() function before return TRUE.
glPolygonMode( GL_BACK, GL_FILL ); // Back Face Is Filled In
glPolygonMode( GL_FRONT, GL_LINE ); // Front Face Is Drawn With Lines
These simply specify that we want back facing polygons to be filled completely and that we want front facing polygons to be outlined only. Mostly personal preference at this point. Has to do with the orientation of the polygon or the direction of the vertices. See the Red Book for more information on this. Incidentally, while I'm at it, let me plug the book by saying it's one of the driving forces behind me learning OpenGL, not to mention NeHe's site! Thanks NeHe. Buy The Programmer's Guide to OpenGL from Addison-Wesley. It's an invaluable resource as far as I'm concerned. Ok, back to the tutorial. Right below the code above, and above return TRUE, add the following lines.
// Loop Through The X Plane
for(int x=0; x<45; x++)
// Loop Through The Y Plane
for(int y=0; y<45; y++)
// Apply The Wave To Our Mesh
Thanks to Graham Gibbons for suggesting an integer loop to get rid of the spike in the ripple. 

The two loops above initialize the points on our grid. I initialize variables in my loop to localize them in my mind as merely loop variables. Not sure it's kosher. We use integer loops to prevent odd graphical glitches that appear when floating point calculations are used. We divide the x and y variables by 5 ( i.e. 45 / 9 = 5 ) and subtract 4.5 from each of them to center the "wave". The same effect could be accomplished with a translate, but I prefer this method. 

The final value points[x][y][2] statement is our sine value. The sin() function requires radians. We take our degree value, which is our float_x multiplied by 40.0f. Once we have that, to convert to radians we take the degree, divide by 360.0f, multiply by pi, or an approximation and then multiply by 2.0f. 

I'm going to re-write the DrawGLScene function from scratch so clean it out and it replace with the following code.
int DrawGLScene(GLvoid) // Draw Our GL Scene
int x, y; // Loop Variables
float float_x, float_y, float_xb, float_yb; // Used To Break The Flag Into Tiny Quads
Different variables used for controlling the loops. See the code below but most of these serve no "specific" purpose other than controlling loops and storing temporary values.
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Clear The Screen And Depth Buffer
glLoadIdentity(); // Reset The Current Matrix

glTranslatef(0.0f,0.0f,-12.0f); // Translate 12 Units Into The Screen

glRotatef(xrot,1.0f,0.0f,0.0f); // Rotate On The X Axis
glRotatef(yrot,0.0f,1.0f,0.0f); // Rotate On The Y Axis  
glRotatef(zrot,0.0f,0.0f,1.0f); // Rotate On The Z Axis

glBindTexture(GL_TEXTURE_2D, texture[0]); // Select Our Texture
You've seen all of this before as well. Same as in tutorial #6 except I merely push my scene back away from the camera a bit more.
glBegin(GL_QUADS); // Start Drawing Our Quads
for( x = 0; x < 44; x++ ) // Loop Through The X Plane (44 Points)
for( y = 0; y < 44; y++ ) // Loop Through The Y Plane (44 Points)
 Merely starts the loop to draw our polygons. I use integers here to keep from having to use the int() function as I did earlier to get the array reference returned as an integer.
float_x = float(x)/44.0f; // Create A Floating Point X Value
float_y = float(y)/44.0f; // Create A Floating Point Y Value
float_xb = float(x+1)/44.0f; // Create A Floating Point Y Value+0.0227f
float_yb = float(y+1)/44.0f; // Create A Floating Point Y Value+0.0227f
 We use the four variables above for the texture coordinates. Each of our polygons (square in the grid), has a 1/44 x 1/44 section of the texture mapped on it. The loops will specify the lower left vertex and then we just add to it accordingly to get the other three ( i.e. x+1 or y+1 ).
glTexCoord2f( float_x, float_y); // First Texture Coordinate (Bottom Left)
glVertex3f( points[x][y][0], points[x][y][1], points[x][y][2] );
glTexCoord2f( float_x, float_yb ); // Second Texture Coordinate (Top Left)
glVertex3f( points[x][y+1][0], points[x][y+1][1], points[x][y+1][2] );
glTexCoord2f( float_xb, float_yb ); // Third Texture Coordinate (Top Right)
glVertex3f( points[x+1][y+1][0], points[x+1][y+1][1], points[x+1][y+1][2] );
glTexCoord2f( float_xb, float_y ); // Fourth Texture Coordinate (Bottom Right)
glVertex3f( points[x+1][y][0], points[x+1][y][1], points[x+1][y][2] );
glEnd(); // Done Drawing Our Quads
The lines above merely make the OpenGL calls to pass all the data we talked about. Four separate calls to each glTexCoord2f() and glVertex3f(). Continue with the following. Notice the quads are drawn clockwise. This means the face you see initially will be the back. The back is filled in. The front is made up of lines. 

If you drew in a counter clockwise order the face you'd initially see would be the front face, meaning you would see the grid type texture instead of the filled in face.
if( wiggle_count == 2 ) // Used To Slow Down The Wave (Every 2nd Frame Only)
If we've drawn two scenes, then we want to cycle our sine values giving us "motion".
for( y = 0; y < 45; y++ ) // Loop Through The Y Plane
hold=points[0][y][2]; // Store Current Value One Left Side Of Wave
for( x = 0; x < 44; x++) // Loop Through The X Plane
// Current Wave Value Equals Value To The Right
points[x][y][2] = points[x+1][y][2];
points[44][y][2]=hold; // Last Value Becomes The Far Left Stored Value
wiggle_count = 0; // Set Counter Back To Zero
wiggle_count++; // Increase The Counter
What we do here is store the first value of each line, we then move the wave to the left one, causing the image to wave. The value we stored is then added to the end to create a never ending wave across the face of the texture. Then we reset the counter wiggle_count to keep our animation going. 

The above code was modified by NeHe (Feb 2000), to fix a flaw in the ripple going across the surface of the texture. The ripple is now smooth.
xrot+=0.3f; // Increase The X Rotation Variable
yrot+=0.2f; // Increase The Y Rotation Variable
zrot+=0.4f; // Increase The Z Rotation Variable

return TRUE; // Jump Back
Standard NeHe rotation values. :) And that's it folks. Compile and you should have a nice rotating bitmapped "wave". I'm not sure what else to say except, whew.. This was LONG! But I hope you guys can follow it/get something out of it. If you have any questions, want me to clear something up or tell me how god awful, lol, I code, then send me a note. 

This was a blast, but very energy/time consuming. It makes me appreciate the likes of NeHe ALOT more now. Thanks all. 

Jeff Molofee (NeHe) 

소스코드 다운로드

이 강좌의 소스코드를 다운받으실 수 있습니다. 자신의 환경에 맞는 파일을 받아 사용하세요.

  • Visual C++

  • Borland C++ Builder 6 ( 제공: Christian Kindahl )
  • C# ( 제공: Brian Holley )
  • Code Warrior 5.3 ( 제공: Scott Lupton )
  • Cygwin ( 제공: Stephan Ferraro )
  • Delphi ( 제공: Michal Tucek )
  • Dev C++ ( 제공: Dan )
  • Euphoria ( 제공: Evan Marshall )
  • Game GLUT ( 제공: Milikas Anastasios )
  • Irix ( 제공: Rob Fletcher )
  • Java ( 제공: Jeff Kirby )
  • Jedi-SDL ( 제공: Dominique Louis )
  • JoGL ( 제공: Pepijn Van Eeckhoudt )
  • LCC Win32 ( 제공: Robert Wishlaw )
  • Linux ( 제공: Richard Campbell )
  • Linux/GLX ( 제공: Mihael Vrbanec )
  • Linux/SDL ( 제공: Ti Leggett )
  • LWJGL ( 제공: Mark Bernard )
  • Mac OS ( 제공: Anthony Parker )
  • Mac OS X/Cocoa ( 제공: Bryan Blackburn )
  • MASM ( 제공: Nico (Scalp) )
  • Visual C++ / OpenIL ( 제공: Denton Woods )
  • Power Basic ( 제공: Angus Law )
  • Pelles C ( 제공: Pelle Orinius )
  • Visual Basic ( 제공: Ross Dawson )
  • Visual Studio .NET ( 제공: Grant James )

원문 정보

번역문 정보

  • 초벌번역: 

현재 상태

  • 초벌번역시작