音视频开发系列(34) OpenGL ES 绘制平面图形

我们前两篇介绍了OpenGL ES 基本概念和GLSL及Shader的渲染流程，这篇我们开始实战，通过GLSurfaceView加载着色器，来绘制三角形、正方形和直线这些平面图形。在实践过程中遇到的问题有时候让人没有头绪，检查了一遍又一遍代码，发现流程没有问题，但屏幕就是一片漆黑。。通过近一个小时的排查，发现问题出在了这里。下面开始我们今天的学习时间之旅，希望对你也有帮助。

GLSL着色器的编写

如果对OpenGL的基本概念以及渲染流程不清晰的，建议看下前两篇文章，这些基本概念和流程要了解或者理解，否则后面实践之旅就是跳坑之旅。

我们先通过下面重要的二张图，快速回顾下

工欲善其事，必先利其器，如何方便的编写GLSL代码呐？AndoridStudio提供了“Support for GLSL”插件。VS Code也有比较强大的插件比如“Shader Toy
”和“Shader languages support for VS Code”。但是都不足之处，就是没有自动提示和补全的功能。所以编写GLSL代码是要细心。

关注+后台私信我，领取2022最新最全学习提升资料包+面试题，内容包括（C/C++，Linux，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，srs）等等

 

1.1 着色器代码的编写

首先我们来编写下顶点着色器和片元着色器

//vertex_shader.glsl 顶点着色器

attribute vec4 a_Position;
attribute vec4 a_Color;

varying vec4 v_Color;

void main() {
    v_Color = a_Color;
    gl_Position = a_Position;
}

上述代码简单语法回顾

attribute是修饰符 只能用于顶点着色器，用于修饰可变的参数
vec4: 浮点型向量

gl_Position：内置变量

varying：也是一个修饰符，用于顶点着色器和片元着色器的值传递。
注意：必须要在顶点着色器和片元着色器都定义同名同类型同varying修饰符的变量，才能正常传递。

//fragment_shader.glsl 片元着色器

precision mediump float;

varying vec4 v_Color;

void main() {
    gl_FragColor = v_Color;
}

这里对精度precision mediump 做下说明
用于修饰浮点型和整形，有三个等级 highp\mediump、lowp

1.2 着色器代码的读取

着色器代码通常放在assets目录下或者raw目录下，当然也见到过直接写在代码里。我们为了方便，采用比较通用的方式：把glsl代码文件放在了assets下，再加载前