效果图
源码
AwesomeMedia
包括了Audio和Video以及OpenGLES等一系列音视频开发内容(持续更新中)
配置环境
我们使用的都是OpenGLES2.0，所有需要在AndroidManifest.xml中添加如下代码：
<uses-feature
android:glEsVersion="0x00020000"
android:required="true" />
注意：加入的位置和<application>同级
开发步骤
- 新建View和Renderer
- 编写ShaderCode
- 获取Shader
- 链接Program
- 设置顶点坐标
- 设置颜色参数
- 传入顶点坐标
- 传入颜色参数
- 绘制
1、新建View和Renderer
1.1、新建TriangleRenderer，实现GLSurfaceView.Renderer接口
这个是最重要的类，关于绘制的步骤一般都在这里编写，总的有三个回调接口
onSurfaceCreated(GL10 gl, EGLConfig config)
在初始化的时候进行回调，可以在这里做Shader和Program还有顶点颜色的初始化工作onSurfaceChanged(GL10 gl, int width, int height)
这里是窗口大小变化的时候进行的回调onDrawFrame(GL10 gl)
我们的绘制工作就是这里面进行，比如传入顶点值，颜色，开始绘制等等
里面的参数我们可以暂时不管，先记住三者的用途就可以了
import android.opengl.GLSurfaceView;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
public class TriangleRenderer implements GLSurfaceView.Renderer {
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
GLES20.glClearColor(0, 0, 0, 1);// 设置背景颜色为黑色
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int height) {
GLES20.glViewport(0, 0, width, height);// 设置窗口
}
@Override
public void onDrawFrame(GL10 gl) {
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);// 清屏
}
}
1.1、新建TriangleView，继承于GLSurfaceView
用以显示我们绘制的三角形，可以看到我们在初始化的做了三件事
setEGLContextClientVersion(2);
设置版本，我们用的是OpenGLES2.0，那么我们就传入2setRenderer(renderer);
将我们新建的TriangleRenderer初始化，并通过setRenderer方法传入setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
设置渲染模式为GLSurfaceView.RENDERMODE_WHEN_DIRTY被动渲染
渲染模式有两种
GLSurfaceView.RENDERMODE_WHEN_DIRTY被动渲染GLSurfaceView.RENDERMODE_CONTINUOUSLY主动渲染
现在我们先设置为被动渲染，之后到会具体讲两者的区别和用途
import android.content.Context;
import android.opengl.GLSurfaceView;
import android.util.AttributeSet;
import com.yk.video.opengles2.renderer.TriangleRenderer;
public class TriangleView extends GLSurfaceView {
private TriangleRenderer renderer;
public TriangleView(Context context) {
this(context, null);
}
public TriangleView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
setEGLContextClientVersion(2);
renderer = new TriangleRenderer();
setRenderer(renderer);
setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
}
}
设置好了View和Renderer后，我们之后的工作大部分都是在Renderer里了，所有接下来我们重点关注Renderer里需要如何编写
2、编写ShaderCode
首先，我们需要编写顶点着色器和片元着色器的代码
我们使用GLSL语言编写
- 顶点着色器
我们定义了一个四维向量aPos，表示的是这个点的x、y、z坐标，这时候你可以能会问了，不是四维向量吗，为什么只有xyz，其实还是有一个，那个值默认为1，所有我们一般只考虑前面三个变量xyz，这个就是我们之后要传入的顶点坐标，而gl_Position是内置的变量，用来确定顶点最终的位置
attribute vec4 aPos;
void main(){
gl_Position = aPos;
}
- 片元着色器
我们首先声明浮点数的精度precision mediump float;，然后定义了一个四维向量uColor，颜色的四维就比较好理解，因为一个片元的颜色对应有四个值R（红）、G（绿）、B（蓝）、A（透明度），这个也是我们之后会传入的，gl_FragColor也是内置变量，用来确定片元的最终颜色
precision mediump float;
uniform vec4 uColor;
void main(){
gl_FragColor = uColor;
}
3、获取Shader
我们编写了ShaderCode后，就需要获取对于的Shader
首先，我们来编写获取Shader的函数
private int loadShader(int type, String code) {
int shader = GLES20.glCreateShader(type);
GLES20.glShaderSource(shader, code);
GLES20.glCompileShader(shader);
return shader;
}
然后在onSurfaceCreated中获取对应的Shader
private static final String vertexShaderCode = "" +
"attribute vec4 aPos;\n" +
"uniform mat4 uMatrix;\n" +
"void main(){\n" +
" gl_Position = uMatrix * aPos;\n" +
"}";
private static final String fragShaderCode = "" +
"precision mediump float;\n" +
"uniform vec4 uColor;\n" +
"void main(){\n" +
" gl_FragColor = uColor;\n" +
"}";
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
GLES20.glClearColor(0, 0, 0, 1);
int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
int fragShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragShaderCode);
}
4、链接Program
我们获取了Shader之后，那么就要去创建和链接一个Program，它是将顶点着色器和片元着色器链接的一起的小程序
首先，我们先来编写链接Program的方法
private int linkProgram(int vertexShader, int fragShader) {
int program = GLES20.glCreateProgram();
GLES20.glAttachShader(program, vertexShader);
GLES20.glAttachShader(program, fragShader);
GLES20.glLinkProgram(program);
return program;
}
然后还是在onSurfaceCreate中添加如下代码
private int program;
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
GLES20.glClearColor(0, 0, 0, 1);
int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
int fragShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragShaderCode);
program = linkProgram(vertexShader, fragShader);
}
5、设置顶点坐标
我们在设置完Shader和Program后，那么就需要来设置顶点坐标了，我们可以根据OpenGLES的坐标系来设置三角形的三个顶点
private final float[] vertexData = {
0.0f, 0.5f, // 上顶点
-0.5f, -0.5f, // 左下角
0.5f, -0.5f // 右下角
};
你可能注意到了，我们的每个顶点只有两个数据，其实这两个数据仅代表x和y的坐标，那么为什么不传入z的值呢，因为我们现在显示的平面图像，所以就只设置x和y，我们传入顶点值的时候，如果没传z的值，那么z就默认是0，再加上第四个值始终是1，所以当我们传入（0.0f, 0.5f）时，最终传入的就是（0.0f, 0.5f, 0.0f, 1.0f）
我们设置完顶点数组后，我们可以使用FloatBuffer来存放顶点数据，之后就可以从FloatBuffer进行传递
我们现在编写数组转化成buffer的方法
private FloatBuffer createFloatBuffer(float[] data) {
FloatBuffer buffer = ByteBuffer.allocateDirect(data.length * 4)
.order(ByteOrder.nativeOrder())
.asFloatBuffer();
buffer.put(data, 0, data.length).position(0);
return buffer;
}
然后在onSurfaceCreated中进行转化
private FloatBuffer vertextBuffer;
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
GLES20.glClearColor(0, 0, 0, 1);
vertextBuffer = createFloatBuffer(vertexData);
int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
int fragShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragShaderCode);
program = linkProgram(vertexShader, fragShader);
}
6、设置颜色参数
设置完顶点，可以来设置颜色，我们之前将背景设置成了黑色，那么我们就可以将三角形设置为白色，当然，你也可以设置成任意你喜欢的颜色
private final float[] colorData = {1.0f, 1.0f, 1.0f, 1.0f};
7、启用Program
我们之前创建了Program，现在我们需要在onDrawFrame中启用Program，告诉OpenGLES我们将要使用我们创建的Program
@Override
public void onDrawFrame(GL10 gl) {
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
GLES20.glUseProgram(program);
}
8、传入顶点坐标
进过上面的一系列步骤，我们已经做好了初始化的工作，接下来就是开始正式绘制了
首先获取刚才用GLSL语言编写的顶点着色器里对应的变量的位置
接着启用顶点数组，最后传入对应的值
@Override
public void onDrawFrame(GL10 gl) {
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
GLES20.glUseProgram(program);
// 传入顶点坐标
aPosLocation = GLES20.glGetAttribLocation(program, "aPos");
GLES20.glEnableVertexAttribArray(aPosLocation); // 启用顶点数组
GLES20.glVertexAttribPointer(aPosLocation, 2, GLES20.GL_FLOAT, false, 0, vertextBuffer); // 传入顶点坐标
}
9、传入颜色参数
上面传入了顶点坐标，接下来就是传入颜色值
@Override
public void onDrawFrame(GL10 gl) {
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
GLES20.glUseProgram(program);
// 传入顶点坐标
aPosLocation = GLES20.glGetAttribLocation(program, "aPos");
GLES20.glEnableVertexAttribArray(aPosLocation);
GLES20.glVertexAttribPointer(aPosLocation, 2, GLES20.GL_FLOAT, false, 0, vertextBuffer);
// 传入颜色
uColorLocation = GLES20.glGetUniformLocation(program, "uColor");
GLES20.glUniform4fv(uColorLocation, 1, colorData, 0);
}
10、绘制
我们传入了对应的顶点和颜色后，最后一步就是绘制了
@Override
public void onDrawFrame(GL10 gl) {
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
GLES20.glUseProgram(program);
// 传入顶点坐标
aPosLocation = GLES20.glGetAttribLocation(program, "aPos");
GLES20.glEnableVertexAttribArray(aPosLocation);
GLES20.glVertexAttribPointer(aPosLocation, 2, GLES20.GL_FLOAT, false, 0, vertextBuffer);
// 传入颜色
uColorLocation = GLES20.glGetUniformLocation(program, "uColor");
GLES20.glUniform4fv(uColorLocation, 1, colorData, 0);
// 绘制
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);
}
使用TriangleView
我们使用TriangleView就想使用普通的View一样，可以在代码中动态加入，也可以在xml中定义，我们就在xml中定义，看看效果
在xml中加入TriangleView
<com.yk.video.opengles2.view.TriangleView
android:id="@+id/fragment_graph_triangle_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
然后在代码中直接获取对应的TriangleView就可以了，其他工作不需要做，你的屏幕就会显示出来一个黑色背景的白色三角形了
小结
此时你可以能发现了，我们绘制出来的三角形的边长可能和我们设置的顶点坐标有些不对，我们设置的三个顶点分别是
(0.0f, 0.5f) 上顶点
(-0.5f, -0.5f) 左下角
(0.5f, -0.5f) 右下角
按道理说，绘制出来的三角形应该比实际绘制出来的三角形“矮一点，胖一点”才对呀，这个就涉及到之后要将的相机和投影了，我们会在之后将如何绘制出和我们预期一致的图形
