四边形的绘制在Opengl ES是很重要的一项技巧，比如做视频播放器时视频的渲染就需要使用到Opengl ES绘制四边形的相关知识。然而在Opengl ES却没有直接提供
绘制四边形的相关函数，那么如何实现四边形的绘制呢？

在Opengl ES的世界中所有的元素都是由点、线和三角形组成的。众所周知，四边形可以拆分成两个三角形，因此四边形的绘制在Opengl ES的世界中可以分解成绘制两个三角形的任务。

关于三角形的绘制请参考之前的文章：OpenglEs之三角形绘制

代码准备

为了使得项目代码更好地展现我们的demo效果，我们先来将之前的代码抽象起来，做了个简单的封装，统一一个BaseGlActivity：

public class BaseGlActivity extends AppCompatActivity {protected BaseOpengl baseOpengl;private MyGLSurfaceView myGLSurfaceView;@Overrideprotected 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() {@Overridepublic void onDrawFrame() {baseOpengl.onGlDraw();}});}}@Overrideprotected void onDestroy() {if(null != baseOpengl){baseOpengl.release();}super.onDestroy();}// 子类返回具体的Opelg实体即可public BaseOpengl createOpengl() {return null;}}

其他代码，例如BaseOpengl和MyGLSurfaceView和以前的一样。

然后在Java层和C++都新建一个RectOpengl类，用来表示绘制四边形。

RectOpengl.javapublic 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组成一个三角形。

具体看图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D0qc2fYC-1662517679671)(https://flyer-blog.oss-cn-shenzhen.aliyuncs.com/%E4%B8%89%E8%A7%92%E5%BD%A2%E5%B8%A6%E7%9F%A9%E5%BD%A2.png)]

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);// 这个不需要glEnableVertexAttribArrayglVertexAttrib4fv(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{@Overridepublic BaseOpengl createOpengl() {return new RectOpengl();}
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XsOtnjPG-1662517679672)(https://flyer-blog.oss-cn-shenzhen.aliyuncs.com/%E7%BB%98%E5%88%B6%E5%9B%9B%E6%96%B9%E5%BD%A2%E8%BF%90%E8%A1%8C%E7%BB%93%E6%9E%9C.png)]

往期笔记

Opengl ES之EGL环境搭建
Opengl ES之着色器
Opengl ES之三角形绘制

关注我，一起进步，人生不止coding！！！

Opegnl ES之四边形绘制相关推荐

OpenGL ES for Android 绘制旋转的地球
No 图 No Code,我们先来欣赏下旋转的地球: 是不是很酷炫,要想绘制出上面酷炫的效果需要3个步骤: 计算球体顶点数据地球纹理贴图通过MVP矩阵旋转地球计算球体顶点数据我们知道OpenG ...
【OpenGL】十七、OpenGL 绘制四边形 ( 绘制 GL_QUAD_STRIP 模式四边形 )
文章目录一.绘制 GL_QUAD_STRIP 四边形二.绘制四边形点分析三.相关资源一.绘制 GL_QUAD_STRIP 四边形 GL_QUAD_STRIP 绘制规则 : 在 glBegin ...
android平台下OpenGL ES 3.0绘制圆点、直线和三角形
OpenGL ES 3.0学习实践 android平台下OpenGL ES 3.0从零开始 android平台下OpenGL ES 3.0绘制纯色背景 android平台下OpenGL ES 3.0绘 ...
android平台下OpenGL ES 3.0绘制纯色背景
OpenGL ES 3.0学习实践 android平台下OpenGL ES 3.0从零开始 android平台下OpenGL ES 3.0绘制纯色背景 android平台下OpenGL ES 3.0绘 ...
android平台下OpenGL ES 3.0绘制立方体的几种方式
OpenGL ES 3.0学习实践 android平台下OpenGL ES 3.0从零开始 android平台下OpenGL ES 3.0绘制纯色背景 android平台下OpenGL ES 3.0绘 ...
【OpenGL】十六、OpenGL 绘制四边形 ( 绘制 GL_QUADS 四边形 )
文章目录一.绘制 GL_QUADS 四边形二.绘制多个四边形三.相关资源一.绘制 GL_QUADS 四边形四边形绘制时 , 在 glBegin 方法中传入 GL_QUADS 参数 , 其绘制 ...
OpenGL ES for Android 绘制立方体
立方体有6个面,8个顶点,因此绘制立方体其实就是绘制6个面. 顶点shader attribute vec4 a_Position; attribute vec4 a_color; varying v ...
Android中用OpenGL ES Tracer分析绘制过程
Tracer for OpenGL ES(http://developer.android.com/tools/help/gltracer.html)是Android SDK中新增加的开发工具,可逐帧 ...
Opengl ES之三角形绘制
在前面我们已经在NDK层搭建好了EGL环境,也介绍了一些着色器相关的理论知识,那么这次我们就使用已经搭配的EGL绘制一个三角形吧. 在Opengl ES的世界中,无论多复杂的形状都是由点.线或三角形组 ...

Opegnl ES之四边形绘制

代码准备

六点顶点绘制四边形

四个顶点绘制四边形

往期笔记

Opegnl ES之四边形绘制相关推荐

最新文章

热门文章