I have started a new updated serie of tutorials on OpenGL ES 2.0 for android. Check them out at: OpenGL ES 2.0
Last tutorial we worked a bit more on meshes and we have also talked about adding colors to our mesh. The most common way of adding colors to your mesh is to add a texture. There is a couple of different steps involved with adding a texture to the mesh I will try to go through them all and explain the basics about them.
First step would be to get a bitmap to generate a texture from. You can get hold of a bitmap in many different ways from downloading, generating or simply just load one from the resources. I’m going with the simplest one for this example witch is loading from the resources.
One other thing about textures is that some hardware requires that the height and width are in the power of 2 (1, 2, 4, 8, 16, 32, 64…). If you run a texture with a size of 30x30pixels on a hardware that don’t support it you will just get a white square (unless you change the default color).
Generating a texture
After we have loaded the bitmap we need to tell OpenGL to actually create the texture.
First thing we need to do is to let OpenGL generate some texture id’s that we will use as handles to the textures later on. In this example we will only have one texture.
With the same parameters you can delete the textures:
Now when the texture id’s are generated we need to just like everything else tell OpenGL what to work with. With textures we use the command glBindTexture:
From this point all commands we call on regarding textures will be applied on to your texture with the generated id.
There is a couple of parameters we need to set on the texture, the first one is to tell OpenGL what to do if the texture need to be shrunk or magnified to match the rendered image.
If the texture is smaller it needs to be magnified that is done with the magnification function:
And how to scale if the texture needs to be scaled down using the minification function.
You need to pass an argument to these functions. I’m only going to show you two of them the rest you can investigate your self ;)
If you want a crisp and clean rendering like this image you need to use the GL10.GL_NEAREST parameter.
If you rather want a blurred image you should use the GL10.GL_LINEAR parameter.
We will also need to tell OpenGL how to map this image onto the mesh this is done in two steps, fist we need to assign UV coordinates
UV mapping is the way we map the pixels on the bitmap to the vertices in our mesh. The UV coordinates are 0,0 in the upper left and 1,1 is the bottom right, like the left image below. The right image below illustrates how our plane is built. To get the texture mapped correctly we need to map the lower left part of the texture (0,1) to the lower left vertex (0) in our plane and we need to map the the bottom right (1,1) in the texture to the bottom right (1) to the bottom right in our plane and… you get the idea.
We put this mapping into a float array like this:
If we instead used 0.5 instead of 1.0 like this:
The texture will be mapped so the plane will have the upper left part of it.
Back to the glTexParameterf, if we go the other way and uses values higher then 1.0 like this:
We actually tell OpenGL to use part of the texture that does not exist so we need to tell OpenGL what to do with the part that does not exist.
We use the glTexParameterf function to tell OpenGL what to do with the texture. By default OpenGL uses something called GL_REPEAT.
GL_REPEAT means that OpenGL should repeat the texture beyond 1.0.
GL_CLAMP_TO_EDGE means that OpenGL only will draw the image once and after that just repeat the last pixel line the rest of the image.
Since we are working with a 2D texture so we need to tell OpenGL what to do in two directions: GL_TEXTURE_WRAP_S and GL_TEXTURE_WRAP_T.
Below you see a chart with the 4 combinations of GL_REPEAT and GL_CLAMP_TO_EDGE.
This is how we use the glTexParameterf function:
The last thing we need to do is to bind the bitmap we loaded to the texture id we created.
Using the texture
To be able to use the texture we need just like with everything else create a byte buffer with the UV coordinates:
Putting it all together
I’m using a modified version of the code from the previous tutorial. The different is mostly that I renamed some variables and functions and added more comments and all code is now under Apache License. To make the code easier to understand I removed the previous plane and added a new easier one called SimplePlane.
Updating the Mesh class
The first thing we need to do is to update the Mesh class (se.jayway.opengl.tutorial.mesh.Mesh). We need to add the functionality to load and render a texture.
We need to be able to set and store the UV coordinates.
We also need to add functions to set the bitmap and create the texture.
And finally we need to add the call to the texture loading and to actually tell OpenGL to render with this texture. I removed some code so the page would not be so long but you will find the code complete in the attached zip file.
Creating the SimplePlane class
We also need to create the SimplePlane.java. The code is pretty simple and self-explaining if you have read my previous tutorials. The new element is the textureCoordinates variable.
Previous tutorial: OpenGL ES Tutorial for Android – Part V – More on Meshes
출처 : https://blog.jayway.com/2010/12/30/opengl-es-tutorial-for-android-part-vi-textures/