OpenGL ES教程VI之纹理贴图(原文对照) - 疯狂程序员|Crazy Coder - ITeye博客
博客分类：
OpenGL ES Tutorial for Android – Part VI – Textures
December 30th, 2010 by
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.
上一教程我们生成了一些模型，而且我们已经知道如何给模型着色。但最常用的着色方式还是添加纹理。给模型添加纹理有几个不同的操作步骤。下面我将一一展开。
Loading bitmaps
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.
第一步，我们需要得到贴图的图片，这有许多方式。你可以下载，生成，或是简单地从资源中加载，我使用了最后一种：从一个资源文件中加载。
Bitmap bitmap = BitmapFactory.decodeResource(contect.getResources(),
R.drawable.icon);
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).
需要注意的是，在某些硬件上，贴图需要的图片尺寸必须是2的n次方（1,2,4,8,16,32…）。如果你的图片是30X30的话，而且硬件不支持的话，那么你只能看到一个白色的方框（除非，你更改了默认颜色）
Generating a texture
After we have loaded the bitmap we need to tell OpenGL to actually create the texture.
图片加载之后，就可以告诉OpenGL 来产生纹理了。
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.
首先要做的是让OpenGL产生纹理ID，这些ID将在后面用到。例子中我们只有一个纹理。
// Create an int array with the number of textures we want,
// in this case 1.
int[] textures = new int[1];
// Tell OpenGL to generate textures.
gl.glGenTextures(1, textures, 0);
With the same parameters you can delete the textures:
// Delete a texture.
gl.glDeleteTextures(1, textures, 0)
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:
ID产生之后，我们需要将这些ID使用glBindTexture方式进行绑定
gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
From this point all commands we call on regarding textures will be applied on to your texture with the generated id.
那么在此之后，我们后面将使用产生的ID来调用纹理
glTexParameter
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.
在纹理映射，我们需要设置几个参数，第一个是告诉OpenGL在渲染图片时，怎么缩小或放大以适合大小。If the texture is smaller it needs to be magnified that is done with the magnification function:
如果贴图小的话，那我们需要使用放大函数进行放大操作。
// Scale up if the texture if smaller.
gl.glTexParameterf(GL10.GL_TEXTURE_2D,
GL10.GL_TEXTURE_MAG_FILTER,
GL10.GL_LINEAR);
And how to scale if the texture needs to be scaled down using the minification function.
类似，在贴图过多时，使用压缩函数进行缩小。
// scale linearly when image smalled than texture
gl.glTexParameterf(GL10.GL_TEXTURE_2D,
GL10.GL_TEXTURE_MIN_FILTER,
GL10.GL_LINEAR);
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.
如果你想要清晰的渲染效果，你可以使用GL10.GL_NEAREST。
If you rather want a blurred image you should use the GL10.GL_LINEAR parameter.
如果你喜欢模糊一点，应该使用GL10.GL_LINEAR
UV Mapping
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
下面我们需要告诉OpenGL怎样将图片映射到模型上，有两个步骤。首先我们指定一个UV坐标
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.
我们使用UV映射将图片的每一像素映射到模型的顶点上。UV坐标中，左上角为0,0，右下角为1,1，请看下图的左半部分。右半部分是我们要创建的平面。为保证映射正确，我们将纹理左下角映射到左下角顶点0，右下角映射到顶点1…依此类推。
注：在OpenGL教程里讲道，图片左下角为0，0坐标。不过我们这里是Android的OpenGL ES。或许Android在接口封装上，有些许改动吧。
We put this mapping into a float array like this:
纹理坐标数组的定义如下：
float textureCoordinates[] = {0.0f, 1.0f,
1.0f, 1.0f,
0.0f, 0.0f,
1.0f, 0.0f };
If we instead used 0.5 instead of 1.0 like this:
float textureCoordinates[] = {0.0f, 0.5f,
0.5f, 0.5f,
0.0f, 0.0f,
0.5f, 0.0f };
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:
请回想一下glTexParameterf函数。如果我们将1.0放大到2.0
float textureCoordinates[] = {0.0f, 2.0f,
2.0f, 2.0f,
0.0f, 0.0f,
2.0f, 0.0f };
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.
那么超过图片的位置，OpenGL该如何处理呢？这正是下面我们讨论的。
We use the glTexParameterf function to tell OpenGL what to do with the texture. By default OpenGL uses something called GL_REPEAT.
我们使用glTexParameterf函数来告诉OpenGL该如何进行贴图，默认使用的参数项为GL_REPEAT
GL_REPEAT means that OpenGL should repeat the texture beyond 1.0.
GL_REPEAT意味着OpenGL应该重复纹理超过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.
GL_CLAMP_TO_EDGE表示OpenGL只画图片一次，剩下的部分将使用图片最后一行像素重复
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.
对于一个2D纹理，我们还需要告诉它们的方向。
Below you see a chart with the 4 combinations of GL_REPEAT and GL_CLAMP_TO_EDGE.
下面请看它们的四种组合（第三种组合对应的图片错了。）
WRAP_S: GL_REPEATWRAP_T: GL_REPEAT
WRAP_S: GL_REPEATWRAP_T: GL_CLAMP_TO_EDGE
WRAP_S: GL_REPEATWRAP_T: GL_CLAMP_TO_EDGE
WRAP_S: GL_CLAMP_TO_EDGEWRAP_T: GL_CLAMP_TO_EDGE
This is how we use the glTexParameterf function:
gl.glTexParameterf(GL10.GL_TEXTURE_2D,
GL10.GL_TEXTURE_WRAP_S,
GL10.GL_REPEAT);
gl.glTexParameterf(GL10.GL_TEXTURE_2D,
GL10.GL_TEXTURE_WRAP_T,
GL10.GL_REPEAT);
The last thing we need to do is to bind the bitmap we loaded to the texture id we created.
GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
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:
对于UV坐标，我们同样使用字节缓冲
FloatBuffer byteBuf = ByteBuffer.allocateDirect(texture.length * 4);
byteBuf.order(ByteOrder.nativeOrder());
textureBuffer = byteBuf.asFloatBuffer();
textureBuffer.put(textureCoordinates);
textureBuffer.position(0);
// Telling OpenGL to enable textures.
gl.glEnable(GL10.GL_TEXTURE_2D);
// Tell OpenGL where our texture is located.
gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
// Tell OpenGL to enable the use of UV coordinates.
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
// Telling OpenGL where our UV coordinates are.
gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer);
// ... here goes the rendering of the mesh ...
// Disable the use of UV coordinates.
gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
// Disable the use of textures.
gl.glDisable(GL10.GL_TEXTURE_2D);
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.
// Our UV texture buffer.
private FloatBuffer mTextureB
* Set the texture coordinates.
* @param textureCoords
protected void setTextureCoordinates(float[] textureCoords) {
// float is 4 bytes, therefore we multiply the number if
// vertices with 4.
ByteBuffer byteBuf = ByteBuffer.allocateDirect(
textureCoords.length * 4);
byteBuf.order(ByteOrder.nativeOrder());
mTextureBuffer = byteBuf.asFloatBuffer();
mTextureBuffer.put(textureCoords);
mTextureBuffer.position(0);
We also need to add functions to set the bitmap and create the texture.
// Our texture id.
private int mTextureId = -1;
// The bitmap we want to load as a texture.
private Bitmap mB
* Set the bitmap to load into a texture.
* @param bitmap
public void loadBitmap(Bitmap bitmap) {
this.mBitmap =
mShouldLoadTexture = true;
* Loads the texture.
* @param gl
private void loadGLTexture(GL10 gl) {
// Generate one texture pointer...
int[] textures = new int[1];
gl.glGenTextures(1, textures, 0);
mTextureId = textures[0];
// ...and bind it to our array
gl.glBindTexture(GL10.GL_TEXTURE_2D, mTextureId);
// Create Nearest Filtered Texture
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER,
GL10.GL_LINEAR);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER,
GL10.GL_LINEAR);
// Different possible texture parameters, e.g. GL10.GL_CLAMP_TO_EDGE
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S,
GL10.GL_CLAMP_TO_EDGE);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T,
GL10.GL_REPEAT);
// Use the Android GLUtils to specify a two-dimensional texture image
// from our bitmap
GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, mBitmap, 0);
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.
// Indicates if we need to load the texture.
private boolean mShouldLoadTexture = false;
* Render the mesh.
* @param gl
the OpenGL context to render to.
public void draw(GL10 gl) {
// Smooth color
if (mColorBuffer != null) {
// Enable the color array buffer to be used during rendering.
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
gl.glColorPointer(4, GL10.GL_FLOAT, 0, mColorBuffer);
if (mShouldLoadTexture) {
loadGLTexture(gl);
mShouldLoadTexture = false;
if (mTextureId != -1 && mTextureBuffer != null) {
gl.glEnable(GL10.GL_TEXTURE_2D);
// Enable the texture state
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
// Point to our buffers
gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, mTextureBuffer);
gl.glBindTexture(GL10.GL_TEXTURE_2D, mTextureId);
gl.glTranslatef(x, y, z);
// Point out the where the color buffer is.
gl.glDrawElements(GL10.GL_TRIANGLES, mNumOfIndices,
GL10.GL_UNSIGNED_SHORT, mIndicesBuffer);
if (mTextureId != -1 && mTextureBuffer != null) {
gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
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.
package se.jayway.opengl.tutorial.mesh;
* SimplePlane is a setup class for Mesh that creates a plane mesh.
* @author Per-Erik Bergman (per-erik.)
public class SimplePlane extends Mesh {
* Create a plane with a default with and height of 1 unit.
public SimplePlane() {
this(1, 1);
* Create a plane.
* @param width
the width of the plane.
* @param height
the height of the plane.
public SimplePlane(float width, float height) {
// Mapping coordinates for the vertices
float textureCoordinates[] = { 0.0f, 2.0f, //
2.0f, 2.0f, //
0.0f, 0.0f, //
2.0f, 0.0f, //
short[] indices = new short[] { 0, 1, 2, 1, 3, 2 };
float[] vertices = new float[] { -0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.5f, 0.0f,
0.5f, 0.5f, 0.0f };
setIndices(indices);
setVertices(vertices);
setTextureCoordinates(textureCoordinates);
References
The info used in this tutorial is collected from:
You can download the source for this tutorial here: You can also checkout the code from:
Previous tutorial:
Consultant at
浏览: 101001 次
来自: 南京
不错。。eclipse 4 都能运行。。 官网反而成功安装后没 ...
不错，可以使用
melord 写道loogson 写道麻烦问一下，你的Cone ...
loogson 写道麻烦问一下，你的Cone类测试了没有，我使 ...
麻烦问一下，你的Cone类测试了没有，我使用你的Cone测试不 ...这里记录下自己学习的小总结吧，前段时间常常看见有人问怎么为一个物体的每一面贴，我这里给出为一个为形状四面贴不同纹理图的例子，有需要的朋友可以看看。下面上代码：
第一步： Main.java，在入口Activity中定义一个内部类，用于获取Bitmap用的。
class BitGL {
public static B
public static void init(Resources resources) {
bitmap = BitmapFactory.decodeResource(resources, R.drawable.walla);
第二步：在MySurfaceView.java中的onSurfaceCreated()方法中初始化类，并赋相应的值。
py = new Pyramid(gl,15.0f, 2.6f, 5.0f, 0, mContext); // 初始化金子塔
绘制的时候在onDrawFrame()方法中调用py.drawSlef(gl); 画
第三步：然后就是画并贴图了，注意，这是一个单独的类。
public class Pyramid {
Context mContext =
private int one = 0x10000;
public float mAngleX;
public float mAngleY;
private IntBuffer mVertexB
private FloatBuffer mTexB
FloatBuffer lightDiffuse = FloatBuffer.wrap(new float[] { 0.5f, 0.5f, 0.5f, 1.0f });
FloatBuffer specularParams = FloatBuffer.wrap(new float[] { 0.5f, 1.0f, 0.5f, 1.0f });
FloatBuffer lightPosition = FloatBuffer.wrap(new float[] { 0.3f, 0.0f, 2.0f, 1.0f });
int vertices[] = { 0, one, 0, -one, -one, one, one, -one, one,
0, one, 0, one, -one, one, one, -one, -one,
0, one, 0, one, -one, -one, -one, -one, -one,
0, one, 0, -one, -one, -one, -one, -one, one };
private int[] texCoords = { 0, one, one, one, 0, 0, one, 0 };
float x, y,
boolean isY =
private int[] textureids =
private IntBuffer texB
private Bitmap[] bit = new Bitmap[4];
public Pyramid(GL10 gl, float x, float y, float z, float rot, Context context) {
this.mContext =
ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);
vbb.order(ByteOrder.nativeOrder());
mVertexBuffer = vbb.asIntBuffer();
mVertexBuffer.put(vertices);
mVertexBuffer.position(0);
textureids = new int[4];
bit[0] = BitmapFactory.decodeResource(mContext.getResources(),
R.drawable.walla);
bit[1] = BitmapFactory.decodeResource(mContext.getResources(),
R.drawable.wallb);
bit[2] = BitmapFactory.decodeResource(mContext.getResources(),
R.drawable.walld);
bit[3] = BitmapFactory.decodeResource(mContext.getResources(),
R.drawable.wallf);
// 实例化bitmap
bitmap = BitGL.
ByteBuffer tbbs = ByteBuffer.allocateDirect(texCoords.length * 3 * 4);
tbbs.order(ByteOrder.nativeOrder());
texBuffer = tbbs.asIntBuffer();
// 为每一个面贴上纹理
for (int i = 0; i
mAngleY = mAngleY - 0.01f;
if (mAngleY
下面是Pyramid.java类的下载，有些多余的调试代码可以删掉。1532人阅读
android 3D（7）
当opengl对一个四方形进行贴图时，会定义纹理贴图坐标，一串数组，相信初学openggl es者看到后会很头疼，不知道写得是什么东西。现在就将我的研究成果与大家分享下！
当纹理映射启动后绘图时，你必须为OpenGL ES提供其他数据，即顶点数组中各顶点的纹理坐标。纹理坐标定义了图像的哪一部分将被映射到多边形。它的工作方式有点奇怪。
下面看下在android平台下Opengl纹理系统坐标，左下角为原点。
我们现在讨论怎样使用这些纹理坐标。当我们指定顶点数组中的顶点时，我们需要在另一个数组中提供纹理坐标，它称为纹理坐标数组。这里需要注意定义坐标数组顺序，这很关键。
texCoords[] = new float[] {
&&&&&&& // FRONT
&&&&&&& 0.0f, 0.0f,
&&&&&&& 1.0f, 0.0f,
&&&&&&& 0.0f, 1.0f,
&&&&&&& 1.0f, 1.0f,
效果如下：
如果我们想截取图片有上角不分做纹理，按照上面方法可获的数组
texCoords[] = new float[] {
&& // FRONT
&&&&&&&&&& 0.5f, 0.5f,
&&&&&&&&& 1f, 0.5f,
&&&&&&&&& 0.5f, 1f,
&&&&&&&&& 1f, 1f
效果如下：
我们看下贴图的原始文件
你会发现截屏中的图片y轴是颠倒的，其实这是android图像坐标系统与Opengl
es 坐标系统不一致导致的。最简单的修正办法将原始图片用工具翻转过来，这样会比用程序翻转节省很多性能，资源是宝贵的。
三角形纹理映射，只要按照我们的映射规则，便可以顺利完成映射。
texCoords[] = new float[] {&&
&&&& 0.0f, 0.0f,
&&&& 1.0f, 0.0f,
&&&& 0.5f, 1.0f,
看到这里应该知道纹理坐标数组规则定义的意义了吧。
平铺与箔拉
我们的纹理坐标系统在两个轴上都是从0.0
到 1.0，如果设置超出此范围的值会怎么样？根据视图的设置方式有两种选择。
平铺（也叫重复）
一种选择是平铺纹理。按OpenGL的术语，也叫“重复”。如果我们将第一个纹理坐标数组的所有1.0改为2.0：
&&& static const GLfloat texCoords[] = {
&&&&&&& 0.0, 2.0,
&&&&&&& 2.0, 2.0,
&&&&&&& 0.0, 0.0,
&&&&&&& 2.0, 0.0
我们可以通过glTexParameteri()函数设置。
glTexParameterf(GL_TEXTURE_2D,
GL_TEXTURE_WRAP_S, GL10.GL_REPEAT);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL10.GL_REPEAT);
另一种可能的选择是让OpenGL ES简单地将超过1.0的值限制为1.0，任何低于0.0的值限制为 0.0。这实际会引起边沿像素重复。
我们可以通过glTexParameteri()函数设置。
glTexParameterf(GL_TEXTURE_2D,
GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：284177次
积分：3802
积分：3802
排名：第8210名
原创：47篇
转载：42篇
译文：45篇
评论：41条
(2)(1)(2)(4)(1)(3)(1)(1)(2)(2)(1)(1)(7)(2)(2)(4)(1)(1)(1)(3)(4)(2)(1)(1)(16)(1)(7)(1)(5)(7)(8)(2)(8)(4)(1)(1)(1)(1)(1)(1)(2)(2)(15)}