码迷，mamicode.com
首页 > 移动开发 > 详细

OpenglES2.0 for Android:来画个三角形吧

时间：2016-06-02 14:51:56      阅读：490      评论：0      收藏：0      [点我收藏+]

标签：

OpenglES2.0 for Android:来画个三角形吧


先看看我们的整个流程：


技术分享

理解坐标系：


技术分享

左侧是Opengl默认的坐标系，右边是典型的android设备屏幕的坐标系。左侧的瘦瘦的三角形映射到android屏幕上就变成了胖胖的三角形（屏幕横向的时候），我们可以使用
camera和投影解决这个问题，具体怎么解决这里就先不累述了。这里我们只需要知道屏幕的左上角是（-1.0,1.0）横向向右为X轴正向，纵向向下为Y轴
负向，其范围都是从 -1到 +1。

定义三角形顶点：

我们在第一个android的小demo的工程里新建一个包shape，然后新建一个类 Triangle 。然后我们在该类中定义三角形的三个顶点的数据：
此时该类如下（Triangle.java）：

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

import android.content.Context;

public class Triangle {
	
	private Context context;
	// 数组中每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 2;
	// 每个顶点的坐标数  	X ,  Y 
    static float triangleCoords[] = { 0.0f,  0.5f ,   // top
                                     -0.5f, -0.5f ,   // bottom left
                                      0.5f, -0.5f };   // bottom right
    
    public Triangle(Context context){
    	this.context = context;
    }
}</span>

我们在该类中定义的float类型的数据并不能直接被opengl使用，float[ ]是属于虚拟机环境的，而Opengl作为本地系统库直接运行在硬件上，所以我们需要将float[ ] 转化为
FloatBuffer以使数据可以被opengl使用，此时该类如下（Triangle.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 Triangle {
	
	private Context context;
	
	private static final int BYTES_PER_FLOAT = 4;
	private FloatBuffer vertexBuffer;
	
	// 数组中每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 2;
	// 每个顶点的坐标数  	X ,  Y 
    static float triangleCoords[] = { 0.0f,  0.5f ,   // top
                                     -0.5f, -0.5f ,   // bottom left
                                      0.5f, -0.5f };   // bottom right
    
    public Triangle(Context context){
    	this.context = context;
    	
    	vertexBuffer = ByteBuffer
    			.allocateDirect(triangleCoords.length * BYTES_PER_FLOAT)
    			.order(ByteOrder.nativeOrder())
    			.asFloatBuffer();
    	// 把坐标们加入FloatBuffer中
        vertexBuffer.put(triangleCoords);
        // 设置buffer，从第一个坐标开始读
        vertexBuffer.position(0);
    }
}</span>

编写着色器：

着色器语言（shading language）是opengl es2.0 比opengl es 1.X 新增的内容，使我们更加自由的实现自己想要的效果，该语言基于C/C++。该语言的具体类型等等这里不详细说明。

我们需要两个着色器——顶点着色器和片段着色器，顾名思义顶点着色器是用于处理顶点坐标的（不要与屏幕的像素点混淆），而片段着色器用于处理片段，所谓片段简单理解就是顶点着色器处理后的一堆顶点形成的片段。

现在我们来编写这两个顶点着色器：在 res 目录下新建一个文件夹 raw 在该文件夹下新建一个文件simple_vertex_shader.glsl ，其内容如下：

<span style="font-size:14px;">attribute vec4 a_Position;   
  		
void main()                    
{                              
    gl_Position = a_Position;
}   </span>

gl_Position即opengl定义的顶点的坐标，我们目的就是通过这个来告诉opengl我们的顶点数据。vec4是着色器语言中的向量类型的一种，包含了四个浮点数的向量。

接下来在raw文件夹内新建文件 simple_fragment_shader.glsl ，其内容如下：

<span style="font-size:14px;">precision mediump float; 
      	 								
uniform vec4 u_Color;     							
  
void main()                    		
{                              	
    gl_FragColor = u_Color;                                  		
}</span>

这里我们只传入一个颜色信息。这里注意一下 上面顶点着色器的 限定符 attribute 和 uniform 。attribute 一般用于每个顶点各不相同的量，如顶点位置等，后者一般用于
同一组顶点组成的相同的量，如光源位置，一组颜色等。


编译着色器及绘制：

接下来我们进行最后一步，编译着色器以及绘制三角形，这里我们来写一个工具类用于加载着色器程序以及编译着色器。
首先新建一个包utils ,此时目录结构如下图所示：

技术分享
在utils包下新建类 LoggerConfig 用于管理我们的日志（是否输出Logcat的信息），代码如下（LoggerConfig.java）：

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

public class LoggerConfig {
    public static final boolean ON = true;
}</span>

再在该包下新建类ShaderHelper 用于加载着色器程序以及编译着色器：

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

import static android.opengl.GLES20.GL_COMPILE_STATUS;
import static android.opengl.GLES20.GL_FRAGMENT_SHADER;
import static android.opengl.GLES20.GL_LINK_STATUS;
import static android.opengl.GLES20.GL_VALIDATE_STATUS;
import static android.opengl.GLES20.GL_VERTEX_SHADER;
import static android.opengl.GLES20.glAttachShader;
import static android.opengl.GLES20.glCompileShader;
import static android.opengl.GLES20.glCreateProgram;
import static android.opengl.GLES20.glCreateShader;
import static android.opengl.GLES20.glDeleteProgram;
import static android.opengl.GLES20.glDeleteShader;
import static android.opengl.GLES20.glGetProgramInfoLog;
import static android.opengl.GLES20.glGetProgramiv;
import static android.opengl.GLES20.glGetShaderInfoLog;
import static android.opengl.GLES20.glGetShaderiv;
import static android.opengl.GLES20.glLinkProgram;
import static android.opengl.GLES20.glShaderSource;
import static android.opengl.GLES20.glValidateProgram;
import android.util.Log;

public class ShaderHelper {
	
    private static final String TAG = "ShaderHelper";

    /**
     * 加载并编译顶点着色器，返回得到的opengl id
     * @param shaderCode
     * @return
     */
    public static int compileVertexShader(String shaderCode) {
        return compileShader(GL_VERTEX_SHADER, shaderCode);
    }

    /**
     * 加载并编译片段着色器，返回opengl id
     * @param shaderCode
     * @return
     */
    public static int compileFragmentShader(String shaderCode) {
        return compileShader(GL_FRAGMENT_SHADER, shaderCode);
    }

    /**
     * 加载并编译着色器，返回opengl id
     * @param type
     * @param shaderCode
     * @return
     */
    private static int compileShader(int type, String shaderCode) {
        // 建立新的着色器对象
        final int shaderObjectId = glCreateShader(type);

        if (shaderObjectId == 0) {
            if (LoggerConfig.ON) {
                Log.w(TAG, "不能创建新的着色器.");
            }

            return 0;
        }

        // 传递着色器资源代码.
        glShaderSource(shaderObjectId, shaderCode);

        //编译着色器
        glCompileShader(shaderObjectId);

        // 获取编译的状态
        final int[] compileStatus = new int[1];
        glGetShaderiv(shaderObjectId, GL_COMPILE_STATUS,
            compileStatus, 0);

        if (LoggerConfig.ON) {
        	//打印log
            Log.v(TAG, "代码编译结果:" + "\n" + shaderCode
                + "\n:" + glGetShaderInfoLog(shaderObjectId));
        }

        // 确认编译的状态
        if (compileStatus[0] == 0) {
            // 如果编译失败，则删除该对象
            glDeleteShader(shaderObjectId);

            if (LoggerConfig.ON) {
                Log.w(TAG, "编译失败!.");
            }

            return 0;
        }

        // 返回着色器的opengl id
        return shaderObjectId;
    }

    /**
     * 链接顶点着色器和片段着色器成一个program
     * 并返回这个pragram的opengl id
     * @param vertexShaderId
     * @param fragmentShaderId
     * @return
     */
    public static int linkProgram(int vertexShaderId, int fragmentShaderId) {

        // 新建一个program对象
        final int programObjectId = glCreateProgram();

        if (programObjectId == 0) {
            if (LoggerConfig.ON) {
                Log.w(TAG, "不能新建一个 program");
            }

            return 0;
        }

        // Attach the vertex shader to the program.
        glAttachShader(programObjectId, vertexShaderId);

        // Attach the fragment shader to the program.
        glAttachShader(programObjectId, fragmentShaderId);

        // 将两个着色器连接成一个program
        glLinkProgram(programObjectId);

        // 获取连接状态
        final int[] linkStatus = new int[1];
        glGetProgramiv(programObjectId, GL_LINK_STATUS,
            linkStatus, 0);

        if (LoggerConfig.ON) {
            // Print the program info log to the Android log output.
            Log.v(
                TAG,
                "Results of linking program:\n"
                    + glGetProgramInfoLog(programObjectId));
        }

        // 验证连接状态
        if (linkStatus[0] == 0) {
            // If it failed, delete the program object.
            glDeleteProgram(programObjectId);

            if (LoggerConfig.ON) {
                Log.w(TAG, "连接 program 失败!.");
            }

            return 0;
        }

        // Return the program object ID.
        return programObjectId;
    }

    /**
     * Validates an OpenGL program. Should only be called when developing the
     * application.
     */
    public static boolean validateProgram(int programObjectId) {
        glValidateProgram(programObjectId);
        final int[] validateStatus = new int[1];
        glGetProgramiv(programObjectId, GL_VALIDATE_STATUS,
            validateStatus, 0);
        Log.v(TAG, "Results of validating program: " + validateStatus[0]
            + "\nLog:" + glGetProgramInfoLog(programObjectId));

        return validateStatus[0] != 0;
    }

    /**
     * /**
     * 编译，连接 ，返回 program 的 ID
     * @param vertexShaderSource
     * @param fragmentShaderSource
     * @return
     */
    public static int buildProgram(String vertexShaderSource,
        String fragmentShaderSource) {
        int program;

        // Compile the shaders.
        int vertexShader = compileVertexShader(vertexShaderSource);
        int fragmentShader = compileFragmentShader(fragmentShaderSource);

        // Link them into a shader program.
        program = linkProgram(vertexShader, fragmentShader);

        if (LoggerConfig.ON) {
            validateProgram(program);
        }
        return program;
    }
}</span>

上面整个过程如图所示：


技术分享

以后我们就可以很方便的一直使用该工具类来加载编译着色器了。只需要调用buildProgram，传入两个着色器的String文本就可以获得program的id是不是很方便。
我们似乎遗忘了什么，对的我们的两个着色器的文本内容该怎么活的呢，我们再在该目录下定义一个工具类TextResourceReader类来获得文本的内容，返回String类型
代码如下（TextResourceReader.java）：

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

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import android.content.Context;
import android.content.res.Resources;

public class TextResourceReader {
    /**
     * Reads in text from a resource file and returns a String containing the
     * text.
     */
    public static String readTextFileFromResource(Context context,
        int resourceId) {
        StringBuilder body = new StringBuilder();

        try {
            InputStream inputStream = 
                context.getResources().openRawResource(resourceId);
            InputStreamReader inputStreamReader = 
                new InputStreamReader(inputStream);
            BufferedReader bufferedReader = new BufferedReader(inputStreamReader);

            String nextLine;

            while ((nextLine = bufferedReader.readLine()) != null) {
                body.append(nextLine);
                body.append('\n');
            }
        } catch (IOException e) {
            throw new RuntimeException(
                "Could not open resource: " + resourceId, e);
        } catch (Resources.NotFoundException nfe) {
            throw new RuntimeException("Resource not found: " + resourceId, nfe);
        }

        return body.toString();
    }
}</span>

OK ,接下来就让我们来使用者两个工具类获得program的id吧，先回到 前面定义的 Triangle 类：
我们来定义一个私有方法getProgram 并在构造函数中调用 ，此时代码如下 （Triangle.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 Triangle {
	
	private Context context;
	
	private static final int BYTES_PER_FLOAT = 4;
	private FloatBuffer vertexBuffer;
	
	// 数组中每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 2;
	// 每个顶点的坐标数  						X ,  Y 
    static float triangleCoords[] = { 0.0f,  0.5f ,   // top
                                     -0.5f, -0.5f ,   // bottom left
                                      0.5f, -0.5f };   // bottom right
    
    private int program;
    
    public Triangle(Context context){
    	this.context = context;
    	
    	vertexBuffer = ByteBuffer
    			.allocateDirect(triangleCoords.length * BYTES_PER_FLOAT)
    			.order(ByteOrder.nativeOrder())
    			.asFloatBuffer();
    	// 把坐标们加入FloatBuffer中
        vertexBuffer.put(triangleCoords);
        // 设置buffer，从第一个坐标开始读
        vertexBuffer.position(0);
        
        getProgram();
        
    }
    
    //获取program的id
    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>

至此我们已经胜利在望了，接下来思考一下，我们应该做哪些工作？显然我们需要将定义的数据传入着色器中来使用。详细的步骤见下面的代码（Triangle.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 Triangle {
	
	private Context context;
	
	private static final int BYTES_PER_FLOAT = 4;
	private FloatBuffer vertexBuffer;
	
	//---------第四步:定义坐标元素的个数，这里有三个顶点
	private static final int POSITION_COMPONENT_COUNT = 3;
	
	// 数组中每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 2;
	// 每个顶点的坐标数  						X ,  Y 
    static float triangleCoords[] = { 0.0f,  0.5f ,   // top
                                     -0.5f, -0.5f ,   // bottom left
                                      0.5f, -0.5f };   // bottom right
    
    private int program;
    
    
    //------------第一步 : 定义两个标签，分别于着色器代码中的变量名相同, 
    //------------第一个是顶点着色器的变量名，第二个是片段着色器的变量名
	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;
	
    public Triangle(Context context){
    	this.context = context;
    	
    	vertexBuffer = ByteBuffer
    			.allocateDirect(triangleCoords.length * BYTES_PER_FLOAT)
    			.order(ByteOrder.nativeOrder())
    			.asFloatBuffer();
    	// 把坐标们加入FloatBuffer中
        vertexBuffer.put(triangleCoords);
        // 设置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);
    }
    
    //----------第七步:绘制
    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中使用即可，此时MyRender代码（这里在构造函数中引入了Context上下文环境，因为需要我们的Triangle对象的构造函数需要Context），
如下（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.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;
	
	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);
	}

	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();
	}
}</span>


运行结果如下：

技术分享







OpenglES2.0 for Android:来画个三角形吧

标签：

原文地址：http://blog.csdn.net/cassiepython/article/details/51540194
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！