OpenglES2.0 for Android:来画个矩形吧

原创 2016年06月01日 15:16:46

OpenglES2.0 for Android:来画个矩形吧


上一节中我们绘制了一个三角形,我们在上一节的基础上来完成矩形的绘制 。

OK,开始动手做吧,首先在上一节的项目中的shape目录下新建一个类——Square (Square.java),然后定义矩形的四个顶点的坐标,此时代码如下(Square.java):

<span style="font-size:14px;">package com.cumt.shape;

public class Square {

	//float类型的字节数
	private static final int BYTES_PER_FLOAT = 4;
	// 数组中每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 2;
	//矩形顶点坐标
	static float squareCoords[] = { -0.5f,  0.5f ,   // top left
        -0.5f, -0.5f ,   // bottom left
         0.5f, -0.5f ,   // bottom right
         0.5f,  0.5f }; // top right
}</span>

和上一节一样,我们需要将float[ ]的数据转换为 floatbuffer ,此时代码如下 (Square.java):

<span style="font-size:14px;">package com.cumt.shape;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import android.content.Context;

public class Square {
	
	private Context context;

	//float类型的字节数
	private static final int BYTES_PER_FLOAT = 4;
	// 数组中每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 2;
	//矩形顶点坐标
	static float squareCoords[] = { -0.5f,  0.5f ,   // top left
        -0.5f, -0.5f ,   // bottom left
         0.5f, -0.5f ,   // bottom right
         0.5f,  0.5f }; // top right
	
	private FloatBuffer vertexBuffer;
	
	public Square(Context context) {
		this.context = context;
		vertexBuffer = ByteBuffer
    			.allocateDirect(squareCoords.length * BYTES_PER_FLOAT)
    			.order(ByteOrder.nativeOrder())
    			.asFloatBuffer();
    	// 把坐标们加入FloatBuffer中
        vertexBuffer.put(squareCoords);
        // 设置buffer,从第一个坐标开始读
        vertexBuffer.position(0);
	}
}</span>

接下来就是着色器的编写,读取与编译,链接,获取program ID的操作,我们仍然使用上一节的着色器就好,其他的过程也与上一节相同,这里就不再说明了,
copy一下拿来用吧~~,当然你想进一步封装一下着色器的操作更好。现在的代码(Square.java):

<span style="font-size:14px;">package com.cumt.shape;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import com.cumt.openglestwo_test_one.R;
import com.cumt.utils.ShaderHelper;
import com.cumt.utils.TextResourceReader;
import android.content.Context;
import android.opengl.GLES20;

public class Square {
	
	private Context context;

	//float类型的字节数
	private static final int BYTES_PER_FLOAT = 4;
	// 数组中每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 2;
	//矩形顶点坐标
	static float squareCoords[] = { -0.5f,  0.5f ,   // top left
        -0.5f, -0.5f ,   // bottom left
         0.5f, -0.5f ,   // bottom right
         0.5f,  0.5f }; // top right
	
	private FloatBuffer vertexBuffer;
	
	//------------第一步 : 定义两个标签,分别于着色器代码中的变量名相同, 
    //------------第一个是顶点着色器的变量名,第二个是片段着色器的变量名
	private static final String A_POSITION = "a_Position";
	private static final String U_COLOR = "u_Color";
	
	//------------第二步: 定义两个ID,我们就是通ID来实现数据的传递的,这个与前面
	//------------获得program的ID的含义类似的
	private int uColorLocation;
	private int aPositionLocation;
	
	private int program;//保存program的id
	
	public Square(Context context) {
		this.context = context;
		vertexBuffer = ByteBuffer
    			.allocateDirect(squareCoords.length * BYTES_PER_FLOAT)
    			.order(ByteOrder.nativeOrder())
    			.asFloatBuffer();
    	// 把坐标们加入FloatBuffer中
        vertexBuffer.put(squareCoords);
        // 设置buffer,从第一个坐标开始读
        vertexBuffer.position(0);
        
        getProgram();
        
      //----------第三步: 获取这两个ID ,是通过前面定义的标签获得的
        uColorLocation = GLES20.glGetUniformLocation(program, U_COLOR);
		aPositionLocation = GLES20.glGetAttribLocation(program, A_POSITION);
		
		//---------第五步: 传入数据
		GLES20.glVertexAttribPointer(aPositionLocation, COORDS_PER_VERTEX,
				GLES20.GL_FLOAT, false, 0, vertexBuffer);
		GLES20.glEnableVertexAttribArray(aPositionLocation);
	}
	
	//获取program
    private void getProgram(){
    	//获取顶点着色器文本
    	String vertexShaderSource = TextResourceReader
				.readTextFileFromResource(context, R.raw.simple_vertex_shader);
    	//获取片段着色器文本
		String fragmentShaderSource = TextResourceReader
				.readTextFileFromResource(context, R.raw.simple_fragment_shader);
		//获取program的id
		program = ShaderHelper.buildProgram(vertexShaderSource, fragmentShaderSource);
		GLES20.glUseProgram(program);
    }
}</span>

接下来就是绘制了,这是我们这一节的重点,我们应该如何绘制一个矩形呢? 我们知道在OpenglES中支持的绘制方式有3 类 :点 ,线 , 三角形 ,每一类又有一种或多种绘制方式。 那我们来绘制一个矩形 ,其绘制方式是不是也有多种呢 ?答案是肯定的 。我们先用线段的方式来绘制这个矩形 。

线段的几种绘制方式:

GL_LINES : 将传入的顶点按照顺序,两两组织成线段进行绘制,若顶点个数为奇数,则会自动忽略掉最后一个顶点。

GL_LINE_STRIP:将传入的顶点按照顺序依次连接进行绘制

GL_LINE_LOOP:将传入的顶点按照顺序依次连接进行绘制,但是最后一个顶点会与第一个连接,形成线段环



我们就按照 GL_LINE_LOOP 的方式来绘制这个矩形,添加draw方式,此时代码如下 (Square.java):

<span style="font-size:14px;">package com.cumt.shape;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

import com.cumt.openglestwo_test_one.R;
import com.cumt.utils.ShaderHelper;
import com.cumt.utils.TextResourceReader;
import android.content.Context;
import android.opengl.GLES20;

public class Square {
	
	private Context context;

	//float类型的字节数
	private static final int BYTES_PER_FLOAT = 4;
	// 数组中每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 2;
	//矩形顶点坐标
	static float squareCoords[] = { -0.5f,  0.5f ,   // top left
        -0.5f, -0.5f ,   // bottom left
         0.5f, -0.5f ,   // bottom right
         0.5f,  0.5f }; // top right
	
	private FloatBuffer vertexBuffer;
	
	//------------第一步 : 定义两个标签,分别于着色器代码中的变量名相同, 
    //------------第一个是顶点着色器的变量名,第二个是片段着色器的变量名
	private static final String A_POSITION = "a_Position";
	private static final String U_COLOR = "u_Color";
	
	//------------第二步: 定义两个ID,我们就是通ID来实现数据的传递的,这个与前面
	//------------获得program的ID的含义类似的
	private int uColorLocation;
	private int aPositionLocation;
	
	private int program;//保存program的id
	
	//---------第四步:定义坐标元素的个数,这里有三个顶点
	private static final int POSITION_COMPONENT_COUNT = 4;
		
	
	public Square(Context context) {
		this.context = context;
		vertexBuffer = ByteBuffer
    			.allocateDirect(squareCoords.length * BYTES_PER_FLOAT)
    			.order(ByteOrder.nativeOrder())
    			.asFloatBuffer();
    	// 把坐标们加入FloatBuffer中
        vertexBuffer.put(squareCoords);
        // 设置buffer,从第一个坐标开始读
        vertexBuffer.position(0);
        
        getProgram();
        
      //----------第三步: 获取这两个ID ,是通过前面定义的标签获得的
        uColorLocation = GLES20.glGetUniformLocation(program, U_COLOR);
		aPositionLocation = GLES20.glGetAttribLocation(program, A_POSITION);
		
		//---------第五步: 传入数据
		GLES20.glVertexAttribPointer(aPositionLocation, COORDS_PER_VERTEX,
				GLES20.GL_FLOAT, false, 0, vertexBuffer);
		GLES20.glEnableVertexAttribArray(aPositionLocation);
	}
	
	//获取program
    private void getProgram(){
    	//获取顶点着色器文本
    	String vertexShaderSource = TextResourceReader
				.readTextFileFromResource(context, R.raw.simple_vertex_shader);
    	//获取片段着色器文本
		String fragmentShaderSource = TextResourceReader
				.readTextFileFromResource(context, R.raw.simple_fragment_shader);
		//获取program的id
		program = ShaderHelper.buildProgram(vertexShaderSource, fragmentShaderSource);
		GLES20.glUseProgram(program);
    }
    
    //以GL_LINE_LOOP方式绘制
    public void draw(){
		GLES20.glUniform4f(uColorLocation, 0.0f, 0.0f, 1.0f, 1.0f);		
		GLES20.glDrawArrays(GLES20.GL_LINE_LOOP, 0, POSITION_COMPONENT_COUNT);
    }
}</span>

最后在MyRender中创建对象,调用draw来绘制 ,代码如下 (MyRender.java):

<span style="font-size:14px;">package com.cumt.render;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import com.cumt.shape.Square;
import com.cumt.shape.Triangle;

import android.content.Context;
import android.opengl.GLSurfaceView.Renderer;
import android.util.Log;
import static android.opengl.GLES20.glClear;
import static android.opengl.GLES20.glClearColor;
import static android.opengl.GLES20.glViewport;
import static android.opengl.GLES20.GL_COLOR_BUFFER_BIT;

public class MyRender implements Renderer {
	
	private Context context;
	
	public MyRender(Context context){
		this.context = context;
	}
	
	//定义三角形对象
	Triangle triangle;
	Square square;
	
	public void onSurfaceCreated(GL10 gl, EGLConfig config) {
		Log.w("MyRender","onSurfaceCreated");
		// TODO Auto-generated method stub
		//First:设置清空屏幕用的颜色,前三个参数对应红绿蓝,最后一个对应alpha
		glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
//		triangle = new Triangle(context);
		square = new Square(context);
	}

	public void onSurfaceChanged(GL10 gl, int width, int height) {
		Log.w("MyRender","onSurfaceChanged");
		// TODO Auto-generated method stub
		//Second:设置视口尺寸,即告诉opengl可以用来渲染的surface大小
		glViewport(0,0,width,height);
	}

	public void onDrawFrame(GL10 gl) {
		Log.w("MyRender","onDrawFrame");
		// TODO Auto-generated method stub
		//Third:清空屏幕,擦除屏幕上所有的颜色,并用之前glClearColor定义的颜色填充整个屏幕
		glClear(GL_COLOR_BUFFER_BIT);
		//绘制三角形
//		triangle.draw();
		square.draw();
	}
}</span>

运行结果:



好吧,貌似看不太清楚,我们把背景颜色改为白色,把 MyRender.java 中 onSurfaceCreated 方法的glClearColor(0.0f, 0.0f, 0.0f, 0.0f)  改为  glClearColor(1.0f, 1.0f, 1.0f, 0.0f);

再运行一下:


看到我们实际上画出了一个矩形框,中间是没有着色的。下面我们来使用三角形的方式来绘制。

三角形的几种绘制方式:

GL_TRIANGGLES :将传入的顶点按照没3个一组组成一个三角形进行绘制 

GL_TRIANGLE_TRIP:将传入的顶点按照顺序三个一组组成三角形进行,前面三个顶点的后两个顶点做为下一个三角形的前两个顶点,
    比如 有v0 v1 v2 v3 四个顶点顺序排列,则v0 v1 v2组成一个三角形,v1,v2,v3组成一个三角形。

GL_TRIANGLE_FAN:三角形扇的形式,将传入的顶点数据的第一个顶点做为中心点,其他点做为边缘点绘制一系列组成扇形的相邻三角形。






我们先使用第一种方式来画这个矩形,此时我们需要画两个三角形,所以需要6个顶点数据,我们copy一下Square.java,重命名为Square2.java,
首先 修改顶点数据 ,然后修改绘制方式 ,代码及步骤(见代码中 /* */注释的内容 ) 如下 (Square2.java):

<span style="font-size:14px;">package com.cumt.shape;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

import com.cumt.openglestwo_test_one.R;
import com.cumt.utils.ShaderHelper;
import com.cumt.utils.TextResourceReader;

import android.content.Context;
import android.opengl.GLES20;

public class Square2 {
	
	private Context context;

	//float类型的字节数
	private static final int BYTES_PER_FLOAT = 4;
	// 数组中每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 2;
    
    /*------------------第一步: 修改顶点数据-------------------------*/
	//矩形顶点坐标
	static float squareCoords[] = { -0.5f,  0.5f ,   // top left
		 0.5f,  0.5f ,   // top right
		-0.5f, -0.5f ,   // bottom left
		-0.5f, -0.5f ,   // bottom left
         0.5f, -0.5f ,   // bottom right
         0.5f,  0.5f }; // top right
	
	private FloatBuffer vertexBuffer;
	
    //------------第一个是顶点着色器的变量名,第二个是片段着色器的变量名
	private static final String A_POSITION = "a_Position";
	private static final String U_COLOR = "u_Color";
	
	//------------获得program的ID的含义类似的
	private int uColorLocation;
	private int aPositionLocation;
	
	private int program;//保存program的id
	
	/*------------------第二步: 修改顶点个数-------------------------*/
	private static final int POSITION_COMPONENT_COUNT = 6;
		
	
	public Square2(Context context) {
		this.context = context;
		vertexBuffer = ByteBuffer
    			.allocateDirect(squareCoords.length * BYTES_PER_FLOAT)
    			.order(ByteOrder.nativeOrder())
    			.asFloatBuffer();
    	// 把坐标们加入FloatBuffer中
        vertexBuffer.put(squareCoords);
        // 设置buffer,从第一个坐标开始读
        vertexBuffer.position(0);
        
        getProgram();
        
        uColorLocation = GLES20.glGetUniformLocation(program, U_COLOR);
		aPositionLocation = GLES20.glGetAttribLocation(program, A_POSITION);
		
		GLES20.glVertexAttribPointer(aPositionLocation, COORDS_PER_VERTEX,
				GLES20.GL_FLOAT, false, 0, vertexBuffer);
		GLES20.glEnableVertexAttribArray(aPositionLocation);
	}
	
	//获取program
    private void getProgram(){
    	//获取顶点着色器文本
    	String vertexShaderSource = TextResourceReader
				.readTextFileFromResource(context, R.raw.simple_vertex_shader);
    	//获取片段着色器文本
		String fragmentShaderSource = TextResourceReader
				.readTextFileFromResource(context, R.raw.simple_fragment_shader);
		//获取program的id
		program = ShaderHelper.buildProgram(vertexShaderSource, fragmentShaderSource);
		GLES20.glUseProgram(program);
    }
    
    //以GL_LINE_LOOP方式绘制
    public void draw(){
		GLES20.glUniform4f(uColorLocation, 0.0f, 0.0f, 1.0f, 1.0f);		
		
		/*------------------第三步: 修改绘制方式-------------------------*/
		GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, POSITION_COMPONENT_COUNT);
    }
}</span>

然后在MyRender类中就可以new 该对象并调用其draw方法绘制了 ,运行效果:



虽然这种方式满足了我们的需求,但是造成了数据的冗余,我们可以使用后两种绘制方式来解决这个问题。这里给出后两者方式的数据和draw方法:


GL_TRIANGLE_STRIP方式 :
<span style="font-size:14px;">//GL_TRIANGLE_STRIP
    static float squareCoords[] = { -0.5f,  0.5f ,   // top left
    	 0.5f,  0.5f  , // top right
        -0.5f, -0.5f  ,   // bottom left
         0.5f, -0.5f  }; // bottom right
    private static final int POSITION_COMPONENT_COUNT = 4;
    
    public void draw(){
		GLES20.glUniform4f(uColorLocation, 0.0f, 0.0f, 1.0f, 1.0f);		
		
		GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, POSITION_COMPONENT_COUNT);
    }</span>

GL_TRIANGLE_FAN方式:

<span style="font-size:14px;"> //GL_TRIANGLE_FAN 要注意点的顺序问题 (试试将 bottom right和bottom left交换位置看看绘制的是否还是矩形)
    static float squareCoords[] = { -0.5f,  0.5f ,   // top left
    	 0.5f,  0.5f  , // top right
    	 0.5f, -0.5f  , // bottom right
        -0.5f, -0.5f  };  // bottom left
    private static final int POSITION_COMPONENT_COUNT = 4;
    
    public void draw(){
		GLES20.glUniform4f(uColorLocation, 0.0f, 0.0f, 1.0f, 1.0f);		
		GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 0 , POSITION_COMPONENT_COUNT);
    }</span>

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android OpenGLES2.0(二)——绘制一个三角形

选择绘制三角形作为OpenGL ES 2.0的第一个实例,是因为前文中提到的,点、线、三角形是OpenGL ES世界的图形基础。无论多么复杂的几何物体,在OpenGL ES的世界里都可以用三角形拼成。...
  • junzia
  • junzia
  • 2016年10月12日 22:50
  • 5222

OpenGLES2.0(二)实战之绘制三角形

转自 :http://blog.csdn.net/junzia/article/details/52801772 一、前言 选择绘制三角形作为OpenGL ES 2.0的第一个实例,是因为前文中提...
  • xiaole0313
  • xiaole0313
  • 2018年01月11日 19:43
  • 51

OpenGL ES2.0入门之Android篇(一)——绘制三角形

OpenGL ES简介 OpenGL ES是一个为便携式或嵌入式设备例如:移动电话、监视器等发展的3D绘图API。 在Android框架中有两个基础类用于使用OpenGL ES创建和处理图形 GLS...
  • lb377463323
  • lb377463323
  • 2016年08月06日 15:22
  • 4520

OpenGLES---画一个矩形

RectShader   RectWin  窗口 -- RectShader #include #include typedef int uniform; typedef ...
  • GameCocos2dx
  • GameCocos2dx
  • 2016年05月24日 15:15
  • 2496

OpenGL ES零基础入门四矩形的绘制

绘制矩形在上一篇文章 OpenGL ES零基础入门—-(2)绘制三角形 中,使用OpenGLES绘制了基本的三角形,从绘制三角形中,我们也大概了解了OpenGL的基本使用,包括设置 CAEAGLLay...
  • Mr_zhangrmwork
  • Mr_zhangrmwork
  • 2017年05月23日 23:20
  • 488

OpenglES2.0 for Android:再谈纹理映射

OpenglES2.0 for Android:再谈纹理映射 上一节我们实现了一个简单的纹理映射的例子——一个简单的贴图,这节我们来做一些稍微复杂一点的例子,最后再使用我们前面实现的立方体来做一个...
  • cassiePython
  • cassiePython
  • 2016年06月13日 17:35
  • 4498

android opengl es基本操作,画线,三角形,正方形,颜色设置

上篇文章讲了opengl es的基本知识,GLSurfaceView的创建,画点等内容,这篇文章将opengl es另外的一些基本操作,比如画线,画三角形,正方形等,以及这些例子中涉及到了相关的知识点...
  • u012761326
  • u012761326
  • 2017年02月21日 14:32
  • 2338

android自动拉伸位图即.9图

支持各种屏幕尺寸通常意味着您的图片资源还必须能适应各种尺寸。例如,无论要应用到什么形状的按钮上,按钮背景都必须能适应。 如果在可以更改尺寸的组件上使用了简单的图片,您很快就会发现显示效果多少有些不太...
  • qq_32955807
  • qq_32955807
  • 2016年11月30日 20:56
  • 254

android opengles2.0画三角形

  • 2016年11月16日 20:08
  • 25.31MB
  • 下载

IOS OpenGLES2.0 入门02 绘制三角形

IOS OpenGLES2.0 绘制三角形需要以下步骤 1.初始化OpenGL相关的CAEAGLLayer和EAGLContext 2.创建OpenGL program + Vertex Shad...
  • u010963658
  • u010963658
  • 2016年09月28日 16:28
  • 277
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:OpenglES2.0 for Android:来画个矩形吧
举报原因:
原因补充:

(最多只允许输入30个字)