OpenGLES（壹）绘制三角形 OpenGLES（壹）绘制三角形

效果图
文章图片
三角形源码 AwesomeMedia
包括了Audio和Video以及OpenGLES等一系列音视频开发内容(持续更新中)
配置环境我们使用的都是OpenGLES2.0，所有需要在AndroidManifest.xml中添加如下代码：

注意：加入的位置和同级
开发步骤

新建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，那么我们就传入2
setRenderer(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 = https://www.it610.com/article/{ 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 = https://www.it610.com/article/{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、绘制 【OpenGLES（壹）绘制三角形】我们传入了对应的顶点和颜色后，最后一步就是绘制了

@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

然后在代码中直接获取对应的TriangleView就可以了，其他工作不需要做，你的屏幕就会显示出来一个黑色背景的白色三角形了

文章图片
三角形小结此时你可以能发现了，我们绘制出来的三角形的边长可能和我们设置的顶点坐标有些不对，我们设置的三个顶点分别是
(0.0f, 0.5f) 上顶点
(-0.5f, -0.5f) 左下角
(0.5f, -0.5f) 右下角
按道理说，绘制出来的三角形应该比实际绘制出来的三角形“矮一点，胖一点”才对呀，这个就涉及到之后要将的相机和投影了，我们会在之后将如何绘制出和我们预期一致的图形