opengles（二）画个三角型

最新推荐文章于 2023-06-06 19:10:55 发布
最新推荐文章于 2023-06-06 19:10:55 发布
阅读量385 收藏
点赞数 1
分类专栏： opengles 文章标签： opengl es
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jackyqiziheng/article/details/72599052
版权

首先我们需要知道opengles在屏幕上的坐标，即中间坐标点是x=0,y=0; x轴往右是正，往左是负，y轴往上是正，往下是负，且x, y的范围都是-1到1；所以我们先定义坐标数组，顺序是逆时针方向：

private static final float[] TRIANGLE_VERTEX_COORD = {0, 0.5f,
            -0.5f, -0.5f,
            0.5f, -0.5f};

为了最大限度地提高效率，我们可以将这些坐标写入FloatBuffer，然后将其传递给OpenGL ES图形管道进行处理:

    private FloatBuffer mTriangleCoordBuffer;

    public Triangle() {
        // 数组转化为buffer，提高opengles性能
        mTriangleCoordBuffer = ByteBuffer.allocateDirect(TRIANGLE_VERTEX_COORD.length * 4)
                .order(ByteOrder.nativeOrder()).asFloatBuffer();
        mTriangleCoordBuffer.put(TRIANGLE_VERTEX_COORD);

        // 设置从第一位开始读
        mTriangleCoordBuffer.position(0);
    }

现在我们要把这些坐标数据传给opengles图形管道,那么我们怎么传呢，这里需要用到shader，即是着色器，opengles里分为两种shader，一种是vertex shader(我们的顶点坐标就是传到这里), 另一种是fragment shader(我们的颜色数据传到这)，并且由opengles特有的语言把这两种shader组织起来，下面我们来看看例子：

private static final String VERTEX_SHADER_SOURCE = "attribute vec4 vPosition;" +
            "void main() {" +
            "   gl_Position = vPosition;" +
            "}";

    private static final String FRAGMENT_SHADER_SOURCE = "uniform vec4 vColor;" +
            "void main() {" +
            "   gl_FragColor = vColor;" +
            "}";

它们的写法类似于C语言，叫做GLES语言，当有一些自己独有的东西；
attribute仅在vertex shader中使用，常用于指出vertex shader的输入数据;
vec4代表这个向量里有四个float型的数据；
vPosition是我们自己起的一个变量名；
gl_Position是opengles的特有名词，指的是顶点的坐标；
uniform用于存储shader需要的各种数据，例如转换矩阵、光线参数和颜色等。可以被vertex shader 和 fragment shader 共享使用；
gl_FragColor也是opengles特有的名词，指的是颜色;

好了，写完GLES代码，我们需要把代码编译后传给opengles，下面看下该怎么做：
我们先写一个加载shader的方法

    private int getShader(int type, String source) {
        int shader = GLES20.glCreateShader(type);
        GLES20.glShaderSource(shader, source);
        GLES20.glCompileShader(shader);

        // 获取编译的状态
        final int[] compileStatus = new int[1];
        GLES20.glGetShaderiv(shader, GLES20.GL_COMPILE_STATUS,
                compileStatus, 0);

        Log.v(TAG, "代码编译结果:" + "\n" + source
                    + "\n:" + GLES20.glGetShaderInfoLog(shader));

        if (compileStatus[0] == 0) {
            Log.w(TAG, "编译失败!.");
            return 0;
        }

        return shader;
    }

接着把得到的shader和program连接，这样opengles就知道该怎么处理我们的着色逻辑了；

private int mVertexShader, mFragmentShader;

public Triangle() {
        // ...
        // 得到编译后的shader
        mVertexShader = getShader(GLES20.GL_VERTEX_SHADER, VERTEX_SHADER_SOURCE);
        mFragmentShader = getShader(GLES20.GL_FRAGMENT_SHADER, FRAGMENT_SHADER_SOURCE);

        // 创建并连接program
        int program = GLES20.glCreateProgram();
        GLES20.glAttachShader(program, mVertexShader);
        GLES20.glAttachShader(program, mFragmentShader);
        GLES20.glLinkProgram(program);
        GLES20.glUseProgram(program);
}

我们之前定义好的顶点buffer该怎么传进去给opengles呢，这里我们就需要先找到对应的变量的locaction:

    private static final String POSITION_NAME = "vPosition";
    private static final String COLOR_NAME = "vColor";

    public Triangle() {
        // ...
        // 找到对应变量的index
        mPositionLocation = GLES20.glGetAttribLocation(program, POSITION_NAME);
        mFragColorLocation = GLES20.glGetUniformLocation(program, COLOR_NAME);
    }

传入数据，就可以基本完成我们的绘图了：

    public void draw() {
        // 由于性能方面的考虑，opengles默认读取不到缓冲区里的数据，需要先enable后再读
        GLES20.glEnableVertexAttribArray(mPositionLocation);
        GLES20.glVertexAttribPointer(mPositionLocation, COORDS_PER_VERTEX,
                GLES20.GL_FLOAT, false, 0, mTriangleCoordBuffer);

        GLES20.glUniform4f(mFragColorLocation, 0, 0.5f, 0, 1.0f);

        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, VERTEX_SIZE);

        // 调用完glDrawArrays后才能disable；
        GLES20.glDisableVertexAttribArray(mPositionLocation);
    }

这里给出较完整的代码：

public class MyRenderer implements GLSurfaceView.Renderer {

    private Triangle mTriangle;

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        GLES20.glClearColor(0.5f, 0.5f, 0.5f, 1.0f);

        mTriangle = new Triangle();
    }

    @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);
        mTriangle.draw();
    }
}
public class Triangle {
    private static final String TAG = "Triangle";

    // 三角形的三个顶点
    private static final float[] TRIANGLE_VERTEX_COORD = {0, 0.5f,
            -0.5f, -0.5f,
            0.5f, -0.5f};

    private static final int VERTEX_SIZE = 3;
    private static final int COORDS_PER_VERTEX = TRIANGLE_VERTEX_COORD.length / VERTEX_SIZE;

    private FloatBuffer mTriangleCoordBuffer;

    private static final String VERTEX_SHADER_SOURCE = "attribute vec4 vPosition;" +
            "void main() {" +
            "   gl_Position = vPosition;" +
            "}";

    private static final String FRAGMENT_SHADER_SOURCE = "uniform vec4 vColor;" +
            "void main() {" +
            "   gl_FragColor = vColor;" +
            "}";

    private int mVertexShader, mFragmentShader;

    private static final String POSITION_NAME = "vPosition";
    private static final String COLOR_NAME = "vColor";

    private int mPositionLocation, mFragColorLocation;

    public Triangle() {
        // 数组转化为buffer，提高opengles性能
        mTriangleCoordBuffer = ByteBuffer.allocateDirect(TRIANGLE_VERTEX_COORD.length * 4)
                .order(ByteOrder.nativeOrder()).asFloatBuffer();
        mTriangleCoordBuffer.put(TRIANGLE_VERTEX_COORD);
        // 设置从第一位开始读
        mTriangleCoordBuffer.position(0);

        // 得到编译后的shader
        mVertexShader = getShader(GLES20.GL_VERTEX_SHADER, VERTEX_SHADER_SOURCE);
        mFragmentShader = getShader(GLES20.GL_FRAGMENT_SHADER, FRAGMENT_SHADER_SOURCE);

        // 创建并连接program
        int program = GLES20.glCreateProgram();
        GLES20.glAttachShader(program, mVertexShader);
        GLES20.glAttachShader(program, mFragmentShader);
        GLES20.glLinkProgram(program);
        GLES20.glUseProgram(program);

        // 找到对应变量的index
        mPositionLocation = GLES20.glGetAttribLocation(program, POSITION_NAME);
        mFragColorLocation = GLES20.glGetUniformLocation(program, COLOR_NAME);
    }

    private int getShader(int type, String source) {
        int shader = GLES20.glCreateShader(type);
        GLES20.glShaderSource(shader, source);
        GLES20.glCompileShader(shader);

        // 获取编译的状态
        final int[] compileStatus = new int[1];
        GLES20.glGetShaderiv(shader, GLES20.GL_COMPILE_STATUS,
                compileStatus, 0);

        Log.v(TAG, "代码编译结果:" + "\n" + source
                    + "\n:" + GLES20.glGetShaderInfoLog(shader));

        if (compileStatus[0] == 0) {
            Log.w(TAG, "编译失败!.");
            return 0;
        }

        return shader;
    }

    public void draw() {
        // 由于性能方面的考虑，opengles默认读取不到缓冲区里的数据，需要先enable后再读
        GLES20.glEnableVertexAttribArray(mPositionLocation);
        GLES20.glVertexAttribPointer(mPositionLocation, COORDS_PER_VERTEX,
                GLES20.GL_FLOAT, false, 0, mTriangleCoordBuffer);

        GLES20.glUniform4f(mFragColorLocation, 0, 0.5f, 0, 1.0f);

        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, VERTEX_SIZE);

        GLES20.glDisableVertexAttribArray(mPositionLocation);
    }

}

运行后的结果：
这里写图片描述

不过我们的三角型有点变形，我们定义的明明是等边三角型，但实际画出来的不是，这里是因为opengles的坐标和实际屏幕的坐标是不对应的，opengles的长和宽都是一样的，就是-1到1，实际屏幕的长和宽肯定不一样，没有正方形的手机屏吧，该如何解决呢？这里我们需要用到矩阵，下节再说。

OpenGLES系列demo之(一)：绘制三角形
分享音视频技术
07-29 1341
在上一篇文章中，我们先介绍了框架，本文基于这个框架上，简述使用openGL ES绘制一个三角形的大致步骤。
OpenGLES 绘制三角形
weixin_36812659的博客
03-23 192
需要用到OpenGLES ，所以在安卓开发的指导文档里学习。但是在学习第一个绘制三角形时，一切流程似乎都是对的，但是就是不能够正常绘制三角形，前后卡了快三个钟，一开始对照官方文档每行代码一一排查都没有找到，休息了快两个钟，然后在CSDN找了一篇类似的教程Android OpenGL ES2.0(一):详细讲解如何绘制一个三角形，再一次鼓起勇气一一同样对比排查。终于发现原因所在：将着色器的类型设置错...
Opengl ES之三角形绘制
u012944685的专栏
09-07 1597
Opengl ES实战-三角形绘制
OpenGLES2.0（二）实战之绘制三角形
吧主
01-11 1195
转自 ：http://blog.csdn.net/junzia/article/details/52801772 一、前言 选择绘制三角形作为OpenGL ES 2.0的第一个实例，是因为前文中提到的，点、线、三角形是OpenGL ES世界的图形基础。无论多么复杂的几何物体，在OpenGL ES的世界里都可以用三角形拼成。关于Android OpenGL ES 三角形的绘制，在Android官
【OpenGL ES】绘制彩色三角形
11-07
使用 OpenGL ES 绘制彩色三角形，包含三个彩色点、三角形边、三角形块
Android平台 OpenGL ES3.0绘制点、线、三角形实现源码
12-10
Android平台，OpenGL ES3.0 点、线、三角形绘制方式源码实现举例。 相关绘制方式文章讲解请参考： https://xiaxl.blog.csdn.net/article/details/8873002
android openGL ES 2.0画等边三角形，正方形
08-02
android openGL ES 2.0画等边三角形，正方形
Linux代码画正三角形,OpenGLES 之 绘制三角形 (一)
weixin_28771631的博客
05-13 884
一、OpenGL ESOpenGL是一个供运行在Linux、Unix、Mac和Windows的桌面系统使用的跨平台标准的API，OpenGL ES是以手持和嵌入式设备为目标的高级3D图形应用程序编程接口。即OpenGLES是OpenGL的子集，去除了复杂的不常用的功能，专门为PDA等为目标的图形API。OpenGLES经常用在对图片、视频、相机、游戏等方面。它是使用了GPU的计算的，从而解放CPU...
android opengles2.0画三角形
11-16
对应博客链接 http://write.blog.csdn.net/postedit/53190971
OpenGLES（二）绘制三角形
麦芽的博客
01-14 620
OpenGLES 绘制三角形
OpenGLES demo - 4. GL中的三角形
06-24
个人博客中讲解opengles的文章中第4篇讲解opengles的三角形
opengles绘制旋转的三角形
07-27
opengles绘制旋转的三角形
OpenGL ES2之Android&iOS跨平台开发教程（三）绘制三角形
屠龍之技的专栏
06-22 1041
前面介绍完了OpenGL ES在Android&iOS端的构建，这一篇我们用OpenGL ES画个三角形，得益于前面的工作，现在我们只要写C++代码就可以能跨平台运行了。
Learn OpenGLES：画三角形
jinghouxiang的专栏
07-26 2174
上一贴我们简单的搭建了一个OpenGL的运行窗口，也简单的对这个窗口进行绘制。  这一贴，我们将介绍OpenGL如何将CPU中的内存数据送到GPU的内存中，Shader又是如何找到这些数据，并进行绘制的。 我们将通过绘制三角形这一简单的例子，为大家简单的介绍下OpenGL的管线流程，以及如何渲染颜色，颜色渐变动画等知识。 #介绍OpenGL的管线 Opengl 中所有的事物，都是由点来
OpenGLES学习第一步：绘制三角形
Tonny_007的IT家园
11-04 336
1.创建render类 ** * 绘制三角形 * Created by hxk on 2018/10/10. */ public class TriangleRenderer implements GLSurfaceView.Renderer { private final Context context; private final FloatBuffer vertexData; private static final int POSITION_COMPONENT_C
OpenglES2.0 for Android:来画个三角形吧
cassiePython的专栏
05-30 6224
OpenglES2.0 for Android:来画个三角形吧 先看看我们的整个流程： 理解坐标系： 左侧是Opengl默认的坐标系，右边是典型的android设备屏幕的坐标系。左侧的瘦瘦的三角形映射到android屏幕上就变成了胖胖的三角形（屏幕横向的时候），我们可以使用 camera和投影解决这个问题，具体怎么解决这里就先不累述了
1-OpenGLES基础&三角形绘制
itzyjr的专栏
07-12 543
public class MyActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); MyGLSurfaceView view = new MyGLSurfaceView(this); MyRenderer render = new MyRenderer(); view.setRende...
三、opengles画三角形
zw1996的博客
06-06 644
在安卓上使用opengles画三角形
OpenGL基础（03）三角形 源码 & 显示效果
wangdsh的博客
07-13 584
目的：显示2个三角形，一个橘色，一个黄色，分别在中点的左右。运行效果如下所示：功能很简单重，主要是通过实战 理解整个openGL绘制图形的基本流程。
qt上使用opengles画一个三角形
最新发布
06-08
在Qt中使用OpenGLES画一个三角形的步骤如下： 1. 创建一个新的Qt Quick项目。 2. 在项目文件夹中创建一个新的源文件，命名为“main.cpp”。 3. 在“main.cpp”文件中添加以下代码： ```c++ #include #include ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值