devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

opengl大作业_Android游戏开发– OpenGL纹理映射

作者：你好赵伟 | 2024-02-16 06:55:03

赞

踩

游戏开发中坐标的映射
opengl大作业

opengl大作业

在前两篇文章(第1条和第2条)中，我试图介绍android上的OpenGL ES。 现在，让我们更进一步，并在此基础上进一步发展。 在本文中，我们将创建一个广告牌(正方形)，并在其上应用纹理。 纹理只不过是位图图像。 在2D模式下工作时，我们将Z坐标设置为0。稍后我们将介绍3D模式。 这对于在2D游戏中使用非常有用，并且是使用OpenGL显示图像的首选方式。 确实非常快。

在前面的文章中，我们设法显示了三角形。 那么如何显示正方形呢？ 一个正方形由2个三角形组成。

下图显示了这一点：

三角形的正方形

这里有一件有趣的事情要注意。 正方形是ABDC，而不是通常的ABCD 。 这是为什么？ 因为OpenGL如何将三角形链接在一起。

您在这里看到的是一个三角带。 三角形带是一系列连接的三角形，在我们的例子中是2个三角形。

OpenGL使用顶点按以下顺序绘制以下三角形带(即正方形)：

三角形1： V1-> V2-> V3

三角形2： V3-> V2-> V4

三角带

它使用顶点按顺序绘制第一个三角形，然后从上一个三角形获取最后一个顶点，并使用该三角形的最后一面作为新三角形的基础。

这也有好处：我们从内存中消除了冗余数据。

抓住上一篇文章中的项目，并创建一个名为Square的新类。

如果将Square类与Triangle类进行比较，您会发现只有一个区别： 

  1. package net.obviam.opengl;
  2.  
  3. import java.nio.ByteBuffer;
  4. import java.nio.ByteOrder;
  5. import java.nio.FloatBuffer;
  6.  
  7. import javax.microedition.khronos.opengles.GL10;
  8.  
  9. public class Square {
  10.  
  11. 	private FloatBuffer vertexBuffer;	// buffer holding the vertices
  12.  
  13. 	private float vertices[] = {
  14. 			-1.0f, -1.0f,  0.0f,		// V1 - bottom left
  15. 			-1.0f,  1.0f,  0.0f,		// V2 - top left
  16. 			 1.0f, -1.0f,  0.0f,		// V3 - bottom right
  17. 			 1.0f,  1.0f,  0.0f			// V4 - top right
  18. 	};
  19.  
  20. 	public Square() {
  21. 		// a float has 4 bytes so we allocate for each coordinate 4 bytes
  22. 		ByteBuffer vertexByteBuffer = ByteBuffer.allocateDirect(vertices.length * 4);
  23. 		vertexByteBuffer.order(ByteOrder.nativeOrder());
  24.  
  25. 		// allocates the memory from the byte buffer
  26. 		vertexBuffer = vertexByteBuffer.asFloatBuffer();
  27.  
  28. 		// fill the vertexBuffer with the vertices
  29. 		vertexBuffer.put(vertices);
  30.  
  31. 		// set the cursor position to the beginning of the buffer
  32. 		vertexBuffer.position(0);
  33. 	}
  34.  
  35. 	/** The draw method for the square with the GL context */
  36. 	public void draw(GL10 gl) {
  37. 		gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
  38.  
  39. 		// set the colour for the square
  40. 		gl.glColor4f(0.0f, 1.0f, 0.0f, 0.5f);
  41.  
  42. 		// Point to our vertex buffer
  43. 		gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
  44.  
  45. 		// Draw the vertices as triangle strip
  46. 		gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, vertices.length / 3);
  47.  
  48. 		//Disable the client state before leaving
  49. 		gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
  50. 	}
  51. }

区别在于突出显示的行(13-18)。 没错，我们在顶点数组中又添加了一个顶点。

现在更改GlRenderer，以便使用Square代替Triangle 。 

  1. package net.obviam.opengl;
  2.  
  3. import javax.microedition.khronos.egl.EGLConfig;
  4. import javax.microedition.khronos.opengles.GL10;
  5.  
  6. import android.opengl.GLU;
  7. import android.opengl.GLSurfaceView.Renderer;
  8.  
  9. public class GlRenderer implements Renderer {
  10.  
  11. 	private Square 		square;		// the square
  12.  
  13. 	/** Constructor to set the handed over context */
  14. 	public GlRenderer() {
  15. 		this.square		= new Square();
  16. 	}
  17.  
  18. 	@Override
  19. 	public void onDrawFrame(GL10 gl) {
  20. 		// clear Screen and Depth Buffer
  21. 		gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
  22.  
  23. 		// Reset the Modelview Matrix
  24. 		gl.glLoadIdentity();
  25.  
  26. 		// Drawing
  27. 		gl.glTranslatef(0.0f, 0.0f, -5.0f);		// move 5 units INTO the screen
  28. 												// is the same as moving the camera 5 units away
  29. 		square.draw(gl);						// Draw the triangle
  30.  
  31. 	}
  32.  
  33. 	@Override
  34. 	public void onSurfaceChanged(GL10 gl, int width, int height) {
  35. 		if(height == 0) { 						//Prevent A Divide By Zero By
  36. 			height = 1; 						//Making Height Equal One
  37. 		}
  38.  
  39. 		gl.glViewport(0, 0, width, height); 	//Reset The Current Viewport
  40. 		gl.glMatrixMode(GL10.GL_PROJECTION); 	//Select The Projection Matrix
  41. 		gl.glLoadIdentity(); 					//Reset The Projection Matrix
  42.  
  43. 		//Calculate The Aspect Ratio Of The Window
  44. 		GLU.gluPerspective(gl, 45.0f, (float)width / (float)height, 0.1f, 100.0f);
  45.  
  46. 		gl.glMatrixMode(GL10.GL_MODELVIEW); 	//Select The Modelview Matrix
  47. 		gl.glLoadIdentity(); 					//Reset The Modelview Matrix
  48. 	}
  49.  
  50. 	@Override
  51. 	public void onSurfaceCreated(GL10 gl, EGLConfig config) {
  52. 	}
  53. }

运行此命令将产生以下结果：

三角带形成一个正方形

对此进行检查， Square类中的draw()方法现在应该有意义。

  1. public void draw(GL10 gl) {
  2. 		gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
  3.  
  4. 		// set the colour for the square
  5. 		gl.glColor4f(0.0f, 1.0f, 0.0f, 0.5f);
  6.  
  7. 		// Point to our vertex buffer
  8. 		gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
  9.  
  10. 		// Draw the vertices as triangle strip
  11. 		gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, vertices.length / 3);
  12.  
  13. 		//Disable the client state before leaving
  14. 		gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
  15. 	}

首先，我们使OpenGL使用顶点数组进行渲染。 我们的顶点数组包含正方形的顶点。

gl.glVertexPointer (第5行)告诉opengl渲染器从何处获取顶点以及顶点的类型。

第一个参数告诉一个顶点使用多少个坐标。 我们使用3(x，y，z)。 第二个参数表明值是float类型。

第三个参数是数组顶点之间的偏移量。 这就是所谓的冲突。 我们有一个紧密排列的数组，所以它是0 。

最后，最后一个参数告诉顶点在哪里。 当然是我们的缓冲区vertexBuffer 。

第11行中的gl.glDrawArrays告诉OpenGL绘制图元。 什么样的原始语？ 第一个参数中指定的一个： GL10.GL_TRIANGLE_STRIP 。 它从先前设置的顶点缓冲区中提取顶点，并且遵循前面描述的三角形条的规则。

第二个参数指定数组中顶点的起始索引。

第3个参数告诉OpenGL，要渲染的多边形要使用多少个顶点。 因为在上一条语句( gl.glVertexPointer )中我们指定了3个坐标定义一个顶点，所以我们将提供顶点数组的长度除以3。在数组中有9个元素定义了3个顶点。

glDisableClientState(GL10.GL_VERTEX_ARRAY)禁用包含顶点的数组的渲染状态。

将glEnableClientState和glDisableClientState视为程序中的begin…end语句。 我们基本上在OpenGL渲染器中输入子例程。 输入例程后，我们将设置变量(顶点缓冲区，颜色等)，并执行其他子例程(绘制顶点)。 完成后，我们退出子例程。 我们在渲染器中隔离工作。

确保在此阶段运行应用程序，并了解发生了什么。

创建纹理

现在有趣的部分。 让我们加载图像并创建纹理。 纹理就是图像。

要了解如何在Android应用中加载图片，请参阅本文。

我们要使用Square类，因为我们想将纹理应用于正方形。

我们需要加载图像，告诉opengl渲染器我们要使用它作为纹理，最后我们将告诉渲染器在原始图元(正方形)上确切显示它的位置。

就像将箔纸放在窗户或墙壁上一样。 我为您提供了包含窗口大小图像的贴膜，并告诉您用它覆盖窗口，因此贴膜的左上角将位于窗口的左上角。 就是这样，让我们​​开始工作。

OpenGL使用顶点计算出放置内容的位置。 因此，我们需要为图像创建一个数组。 但是这次，这将是2D，因为位图就像一张纸，是一个平面。

添加纹理的坐标数组。

  1. private FloatBuffer textureBuffer;	// buffer holding the texture coordinates
  2. 	private float texture[] = {
  3. 			// Mapping coordinates for the vertices
  4. 			0.0f, 1.0f,		// top left		(V2)
  5. 			0.0f, 0.0f,		// bottom left	(V1)
  6. 			1.0f, 1.0f,		// top right	(V4)
  7. 			1.0f, 0.0f		// bottom right	(V3)
  8. 	};

我们需要以类似于vertexBuffer的方式创建textureBuffer 。 这发生在构造函数中，我们将只重用byteBuffer 。 检查新的构造函数：

  1. public Square() {
  2. 		ByteBuffer byteBuffer = ByteBuffer.allocateDirect(vertices.length * 4);
  3. 		byteBuffer.order(ByteOrder.nativeOrder());
  4. 		vertexBuffer = byteBuffer.asFloatBuffer();
  5. 		vertexBuffer.put(vertices);
  6. 		vertexBuffer.position(0);
  7.  
  8. 		byteBuffer = ByteBuffer.allocateDirect(texture.length * 4);
  9. 		byteBuffer.order(ByteOrder.nativeOrder());
  10. 		textureBuffer = byteBuffer.asFloatBuffer();
  11. 		textureBuffer.put(texture);
  12. 		textureBuffer.position(0);
  13. 	}

我们将向Square类添加一个重要的方法。 loadGLTexture方法。 启动时将从渲染器中调用它。 它发生在onSurfaceCreated方法中。 这将从磁盘加载图像并将其绑定到OpenGL存储库中的纹理。 基本上，它将为处理后的图像分配一个内部ID，并且OpenGL API将使用它在其他纹理中对其进行标识。

  1. /** The texture pointer */
  2. 	private int[] textures = new int[1];
  3.  
  4. 	public void loadGLTexture(GL10 gl, Context context) {
  5. 		// loading texture
  6. 		Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(),
  7. 				R.drawable.android);
  8.  
  9. 		// generate one texture pointer
  10. 		gl.glGenTextures(1, textures, 0);
  11. 		// ...and bind it to our array
  12. 		gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
  13.  
  14. 		// create nearest filtered texture
  15. 		gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST);
  16. 		gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
  17.  
  18. 		// Use Android GLUtils to specify a two-dimensional texture image from our bitmap
  19. 		GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
  20.  
  21. 		// Clean up
  22. 		bitmap.recycle();
  23. 	}

我们需要一个纹理指针数组。 OpenGL将在此处存储我们将在应用程序中使用的纹理的名称。 因为我们只有一个图像，所以我们将创建一个大小为1的数组。

第06行加载了以前复制到/ res / drawable-mdpi目录中的android位图，因此ID已生成。

有关此位图的说明。 鼓励正方形。 它对扩展很有帮助。 因此，请确保纹理的位图是正方形(6×6、12×12、128×128等)。 如果不是正方形，请确保宽度和高度为2的幂(2、4、8、16、32，…)。 您可以使用128×512的位图，它完全可用并且已优化。

第10行生成纹理的名称。 在我们的情况下，生成一个名称并将其存储在textures数组中。 即使显示名称，它实际上也会生成一个int值。 有点令人困惑，但事实就是如此。

第12行将纹理与新生成的名称(texture [0])绑定。 这意味着，在此子例程中使用纹理的任何东西都将使用绑定的纹理。 它实际上激活了纹理。 绑定纹理是活动纹理。 如果我们有多个纹理和多个正方形可以使用它们，那么在使用它们之前，必须为每个正方形绑定(激活)适当的纹理。第15和16行设置了一些用于纹理的滤镜。 我们刚刚告诉OpenGL需要缩小或扩展纹理以覆盖正方形时使用什么类型的滤镜。 我们选择了一些有关如何缩放图像的基本算法。 现在不必为此担心。

在第19行中，我们使用Android的实用程序为位图指定2D纹理图像。 它基于位图以内部格式在内部创建图像(纹理)。

在第22行中，我们释放了内存。 您不应忘记这一点，因为设备上的内存非常有限并且图像很大。

现在让我们看看如何修改draw()方法。

  1. public void draw(GL10 gl) {
  2. 		// bind the previously generated texture
  3. 		gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
  4.  
  5. 		// Point to our buffers
  6. 		gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
  7. 		gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
  8.  
  9. 		// Set the face rotation
  10. 		gl.glFrontFace(GL10.GL_CW);
  11.  
  12. 		// Point to our vertex buffer
  13. 		gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
  14. 		gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer);
  15.  
  16. 		// Draw the vertices as triangle strip
  17. 		gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, vertices.length / 3);
  18.  
  19. 		//Disable the client state before leaving
  20. 		gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
  21. 		gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
  22. 	}
  23. }

这不是上一篇文章的巨大修改。 这些增加已记录在案，并执行以下操作：

第03行使用存储在textures [0]中的名称(整数ID)绑定(激活)纹理。

第7行在当前OpenGL上下文中启用纹理映射。

第14行为OpenGL上下文提供了纹理坐标。用纹理绘制图元之后，我们将关闭纹理映射以及图元渲染。

重要– UV贴图

如果仔细查看，纹理映射坐标数组中的顶点顺序将不遵循正方形顶点坐标数组中的顺序。

此处对纹理映射坐标有很好的解释： http : //iphonedevelopment.blogspot.com/2009/05/opengl-es-from-ground-up-part-6_25.html 。

我将尽力快速解释它。 检查下图。

正方形和纹理坐标排序

正方形由2个三角形组成，并且顶点按以下顺序排列。

1 –左下

2 –右下

3 –左上方

4 –右上方

注意逆时针路径。

纹理坐标的顺序为：1-> 3-> 2-> 4

如果您从另一个角开始绘制形状，请记住此映射并旋转它。 要阅读UV映射，请查看Wikipedia条目或在网上搜索。

对于最后一部分，要使其工作，我们需要向渲染器提供上下文，以便在启动时加载纹理。

onSurfaceCreated方法将如下所示。

  1. public void onSurfaceCreated(GL10 gl, EGLConfig config) {
  2. 		// Load the texture for the square
  3. 		square.loadGLTexture(gl, this.context);
  4.  
  5. 		gl.glEnable(GL10.GL_TEXTURE_2D);			//Enable Texture Mapping ( NEW )
  6. 		gl.glShadeModel(GL10.GL_SMOOTH); 			//Enable Smooth Shading
  7. 		gl.glClearColor(0.0f, 0.0f, 0.0f, 0.5f); 	//Black Background
  8. 		gl.glClearDepthf(1.0f); 					//Depth Buffer Setup
  9. 		gl.glEnable(GL10.GL_DEPTH_TEST); 			//Enables Depth Testing
  10. 		gl.glDepthFunc(GL10.GL_LEQUAL); 			//The Type Of Depth Testing To Do
  11.  
  12. 		//Really Nice Perspective Calculations
  13. 		gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST);
  14. 	}

第03行加载纹理。 其余各行仅使用一些值配置渲染器。 您现在不必担心它们。

您将需要为Square对象提供应用程序上下文，因为对象本身会加载纹理，并且需要知道位图的路径。

只需在Run活动的onCreate方法( glSurfaceView.setRenderer(new GlRenderer(this)); )中为渲染器提供上下文即可。

确保渲染器具有通过构造函数声明和设置的上下文。

GlRendered类的节选。

  1. private Square 		square;		// the square
  2. 	private Context 	context;
  3.  
  4. 	/** Constructor to set the handed over context */
  5. 	public GlRenderer(Context context) {
  6. 		this.context = context;
  7.  
  8. 		// initialise the square
  9. 		this.square = new Square();
  10. 	}

如果运行代码，您应该会看到一个正方形，上面放着一个漂亮的机器人。

带有Android纹理的正方形

在此处下载源代码和项目(obviam.opengl.p03.tgz)。

参考： 纹理贴图–来自“反对谷物”博客的JCG合作伙伴Tamas Jano的OpenGL Android(使用OpenGL和Squares显示图像) 。

不要忘记查看我们的新Android游戏ArkDroid (以下屏幕截图) 。 您的反馈将大有帮助！
相关文章：

翻译自: https://www.javacodegeeks.com/2011/10/android-game-development-opengl-texture.html

opengl大作业

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/91632
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号