四边形的绘制在Opengl ES是很重要的一项技巧，比如做视频播放器时视频的渲染就需要使用到Opengl ES绘制四边形的相关知识。然而在Opengl ES却没有直接提供
绘制四边形的相关函数，那么如何实现四边形的绘制呢？
在Opengl ES的世界中所有的元素都是由点、线和三角形组成的。众所周知，四边形可以拆分成两个三角形，因此四边形的绘制在Opengl ES的世界中可以分解成绘制两个三角形的任务。
关于三角形的绘制请参考之前的文章：OpenglEs之三角形绘制
代码准备
为了使得项目代码更好地展现我们的demo效果，我们先来将之前的代码抽象起来，做了个简单的封装，统一一个BaseGlActivity：
public class BaseGlActivity extends AppCompatActivity {
protected BaseOpengl baseOpengl;
private MyGLSurfaceView myGLSurfaceView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_base_gl);
baseOpengl = createOpengl();
myGLSurfaceView = findViewById(R.id.my_gl_surface_view);
if(null != baseOpengl){
myGLSurfaceView.setBaseOpengl(baseOpengl);
myGLSurfaceView.setOnDrawListener(new MyGLSurfaceView.OnDrawListener() {
@Override
public void onDrawFrame() {
baseOpengl.onGlDraw();
}
});
}
}
@Override
protected void onDestroy() {
if(null != baseOpengl){
baseOpengl.release();
}
super.onDestroy();
}
// 子类返回具体的Opelg实体即可
public BaseOpengl createOpengl() {
return null;
}
}
其他代码，例如BaseOpengl和MyGLSurfaceView和以前的一样。
然后在Java层和C++都新建一个RectOpengl类，用来表示绘制四边形。
RectOpengl.java
public class RectOpengl extends BaseOpengl{
public RectOpengl() {
super(BaseOpengl.DRAW_TYPE_RECT);
}
}
RectOpengl.h
#ifndef NDK_OPENGLES_LEARN_RECTOPENGL_H
#define NDK_OPENGLES_LEARN_RECTOPENGL_H
#include "BaseOpengl.h"
class RectOpengl:public BaseOpengl {
public:
RectOpengl();
virtual ~RectOpengl();
virtual void onDraw();
private:
GLint positionHandle{-1};
GLint colorHandle{-1};
};
#endif //NDK_OPENGLES_LEARN_RECTOPENGL_H
六点顶点绘制四边形
这是所有人都能想到的最简单的方式了，每个三角形需要三个顶点，绘制两个三角形则需要六个顶点，通过调整顶点，将两个三角形紧挨着就组成了四边形。
因此，我们的顶点着色器和片段着色器都不需要修改，直接使用之前绘制三角形的那些着色器即可。
例如使用下面六个顶点绘制两个三角形：
// 使用绘制两个三角形组成一个矩形的形式 GL_TRIANGLES
//const static GLfloat VERTICES[] = {
// // 第一个三角形
// 0.5f,0.5f,
// -0.5f,0.5f,
// -0.5f,-0.5f,
// // 第二个三角形
// -0.5f,-0.5f,
// 0.5f,-0.5f,
// 0.5f,0.5f
//};
// 6个顶点绘制两个三角形组成矩形 GL_TRIANGLES
// glDrawArrays(GL_TRIANGLES,0,6);
这个理解起来比较简单，笔者就不画说明图了。
四个顶点绘制四边形
使用四个顶点绘制两个三角形主要是复用了部分顶点，然后在glDrawArrays函数中使用绘制三角形带的方式进行绘制。
// 4个顶点绘制两个三角形组成矩形
glDrawArrays(GL_TRIANGLE_STRIP,0,4);
GL_TRIANGLE_STRIP会复用前面的顶点，因为顶点复用，因此这种方式可以绘制出n-2个三角形（n是顶点的个数）。
例如使用三角形带的方式搭配以下的顶点坐标即可绘制出一个矩形：
const static GLfloat VERTICES[] = {
0.5f,-0.5f, // 右下
0.5f,0.5f, // 右上
-0.5f,-0.5f, // 左下
-0.5f,0.5f // 左上
};
假如有1、2、3、4这四个顶点坐标，那么GL_TRIANGLE_STRIP绘制三角形的的方式是顶点1、2、3组成一个三角形，顶点2、3、4组成一个三角形。
具体看图：
[图片上传失败...(image-9e857-1663898911617)]
RectOpengl完整代码：
#include "RectOpengl.h"
#include "../utils/Log.h"
// 顶点着色器
static const char *ver = "#version 300 es\n"
"in vec4 aColor;\n"
"in vec4 aPosition;\n"
"out vec4 vColor;\n"
"void main() {\n"
" vColor = aColor;\n"
" gl_Position = aPosition;\n"
"}";
// 片元着色器
static const char *fragment = "#version 300 es\n"
"precision mediump float;\n"
"in vec4 vColor;\n"
"out vec4 fragColor;\n"
"void main() {\n"
" fragColor = vColor;\n"
"}";
// 使用绘制两个三角形组成一个矩形的形式 GL_TRIANGLES
//const static GLfloat VERTICES[] = {
// // 第一个三角形
// 0.5f,0.5f,
// -0.5f,0.5f,
// -0.5f,-0.5f,
// // 第二个三角形
// -0.5f,-0.5f,
// 0.5f,-0.5f,
// 0.5f,0.5f
//};
// 使用绘制两个三角形组成一个矩形的形式(三角形带)
// 第一第二第三个点组成一个三角形，第二第三第四个点组成一个三角形
const static GLfloat VERTICES[] = {
0.5f,-0.5f, // 右下
0.5f,0.5f, // 右上
-0.5f,-0.5f, // 左下
-0.5f,0.5f // 左上
};
// rgba
const static GLfloat COLOR_ICES[] = {
0.0f,0.0f,1.0f,1.0f
};
RectOpengl::RectOpengl():BaseOpengl() {
initGlProgram(ver,fragment);
positionHandle = glGetAttribLocation(program,"aPosition");
colorHandle = glGetAttribLocation(program,"aColor");
LOGD("program:%d",program);
LOGD("positionHandle:%d",positionHandle);
LOGD("colorHandle:%d",colorHandle);
}
void RectOpengl::onDraw() {
// 清屏
glClearColor(0.0f, 1.0f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(program);
/**
* size 几个数字表示一个点，显示是两个数字表示一个点
* normalized 是否需要归一化，不用，这里已经归一化了
* stride 步长，连续顶点之间的间隔，如果顶点直接是连续的，也可填0
*/
glVertexAttribPointer(positionHandle,2,GL_FLOAT,GL_FALSE,0,VERTICES);
// 启用顶点数据
glEnableVertexAttribArray(positionHandle);
// 这个不需要glEnableVertexAttribArray
glVertexAttrib4fv(colorHandle, COLOR_ICES);
// 6个顶点绘制两个三角形组成矩形
// glDrawArrays(GL_TRIANGLES,0,6);
// 4个顶点绘制两个三角形组成矩形
glDrawArrays(GL_TRIANGLE_STRIP,0,4);
glUseProgram(0);
// 禁用顶点
glDisableVertexAttribArray(positionHandle);
if(nullptr != eglHelper){
eglHelper->swapBuffers();
}
}
RectOpengl::~RectOpengl() noexcept {
}
DrawRectActivity.java
public class DrawRectActivity extends BaseGlActivity{
@Override
public BaseOpengl createOpengl() {
return new RectOpengl();
}
}
[图片上传失败...(image-9e4b53-1663898911617)]
往期笔记
Opengl ES之EGL环境搭建
Opengl ES之着色器
Opengl ES之三角形绘制
关注我，一起进步，人生不止coding！！！
