OpenglES2.0 Android:画矩形

最新推荐文章于 2024-08-18 10:27:34 发布

AI算法网奇

最新推荐文章于 2024-08-18 10:27:34 发布

阅读量2.7k

点赞数

分类专栏： android开发

本文链接：https://blog.csdn.net/jacke121/article/details/102949641

版权

android开发专栏收录该内容

203 篇文章 9 订阅

订阅专栏

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

原文链接：https://blog.csdn.net/cassiePython/article/details/51553842

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

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);

}

}

接下来就是着色器的编写，读取与编译，链接，获取program ID的操作，我们仍然使用上一节的着色器就好，其他的过程也与上一节相同，这里就不再说明了，

copy一下拿来用吧~~，当然你想进一步封装一下着色器的操作更好。现在的代码（Square.java）：

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

线段的几种绘制方式：

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

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

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

我们就按照 GL_LINE_LOOP 的方式来绘制这个矩形，添加draw方式，此时代码如下（Square.java）：

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);

}

}

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);
}
}

最后在MyRender中创建对象，调用draw来绘制 ,代码如下（MyRender.java）：

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

运行结果：

好吧，貌似看不太清楚，我们把背景颜色改为白色，把 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）：

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);
}
}