OpenGL ES 3.0绘制基础图形-点、线、三角

时间  2019-11-08
标签 opengl 3.0 绘制 基础 图形 三角 繁體版
原文   原文链接

开始正式学习OpenGL ES开发！java

本博客是我在学习过程当中作的记录，也但愿和各位分享个人学习过程，若有错误，欢迎留言指正，共同窗习。编程

定义输入坐标

开始绘制图形以前，咱们必须先给OpenGL输入一些顶点数据。OpenGL是一个3D图形库，因此咱们在OpenGL中指定的全部坐标都是3D坐标（x、y和z）。OpenGL不是简单地把全部的3D坐标变换为屏幕上的2D像素；OpenGL仅当3D坐标在3个轴（x、y和z）上都为-1.0到1.0的范围内时才处理它。全部在所谓的标准化设备坐标(Normalized Device Coordinates)范围内的坐标才会最终呈如今屏幕上（在这个范围之外的坐标都不会显示）。数组

因为咱们但愿渲染一个三角形，咱们一共要指定三个顶点，每一个顶点都有一个3D位置。咱们会将它们以标准化设备坐标的形式（OpenGL的可见区域）定义为一个float数组。ide

private float[] vertexPoints = new float[]{
        0.0f, 0.5f, 0.0f,
        -0.5f, -0.5f, 0.0f,
        0.5f, -0.5f, 0.0f
};
复制代码

因为OpenGL是在3D空间中工做的，而咱们渲染的是一个2D三角形，咱们将它顶点的z坐标设置为0.0。这样子的话三角形每一点的深度都是同样的，从而使它看上去像是2D的。学习

定义这样的顶点数据之后，咱们会把它做为输入发送给图形渲染管线的第一个处理阶段：顶点着色器。它会在GPU上建立内存用于储存咱们的顶点数据，还要配置OpenGL如何解释这些内存，而且指定其如何发送给显卡。顶点着色器接着会处理咱们在内存中指定数量的顶点。this

一旦你的顶点坐标已经在顶点着色器中处理过，它们就应该是标准化设备坐标了，标准化设备坐标是一个x、y和z值在-1.0到1.0的一小段空间。任何落在范围外的坐标都会被丢弃/裁剪，不会显示在你的屏幕上。下面你会看到咱们定义的在标准化设备坐标中的三角形(忽略z轴)：spa

与一般的屏幕坐标不一样，y轴正方向为向上，(0, 0)坐标是这个图像的中心，而不是左上角。最终你但愿全部(变换过的)坐标都在这个坐标空间中，不然它们就不可见了。3d

分配本地内存

由于OpenGL做为本地系统库运行在系统中，虚拟机须要分配本地内存，供其存取。code

public SimpleRenderer() {
    //分配内存空间,每一个浮点型占4字节空间
    vertexBuffer = ByteBuffer.allocateDirect(vertexPoints.length * 4)
            .order(ByteOrder.nativeOrder())
            .asFloatBuffer();
    //传入指定的坐标数据
    vertexBuffer.put(vertexPoints);
    vertexBuffer.position(0);
}
复制代码

顶点着色器

/** * 顶点着色器 */
private String vertextShader =
        "#version 300 es\n" +
        "layout (location = 0) in vec4 vPosition;\n" +
        "void main() {\n" +
        " gl_Position = vPosition;\n" + //
        " gl_PointSize = 10.0;\n" +
        "}\n";
复制代码

输入属性的数组(一个名为vPosition的4份量向量)，layout (location = 0)表示这个变量的位置是顶点属性0。orm

将vPosition输入属性拷贝到名为gl_Position的特殊输出变量。

将浮点数据10.0拷贝到gl_PointSize的变量中。

片断着色器

/** * 片断着色器 */
private String fragmentShader =
        "#version 300 es\n" +
        "precision mediump float;\n" +
        "out vec4 fragColor;\n" +
        "void main() {\n" +
        " fragColor = vec4(1.0,1.0,1.0,1.0);\n" +
        "}\n";
复制代码

声明着色器中浮点变量的默认精度。

着色器声明一个输出变量fragColor，这个是一个4份量的向量。

表示将颜色值(1.0,1.0,1.0,1.0)，输出到颜色缓冲区。

编译着色器

/** * 编译 * * @param type 顶点着色器:GLES30.GL_VERTEX_SHADER * 片断着色器:GLES30.GL_FRAGMENT_SHADER */
private static int compileShader(int type, String shaderCode) {
    //建立一个着色器
    final int shaderId = GLES30.glCreateShader(type);
    if (shaderId != 0) {
        //加载到着色器
        GLES30.glShaderSource(shaderId, shaderCode);
        //编译着色器
        GLES30.glCompileShader(shaderId);
        //检测状态
        final int[] compileStatus = new int[1];
        GLES30.glGetShaderiv(shaderId, GLES30.GL_COMPILE_STATUS, compileStatus, 0);
        if (compileStatus[0] == 0) {
            String logInfo = GLES30.glGetShaderInfoLog(shaderId);
            System.err.println(logInfo);
            //建立失败
            GLES30.glDeleteShader(shaderId);
            return 0;
        }
        return shaderId;
    } else {
        //建立失败
        return 0;
    }
}
复制代码

建立 OpenGL 程序和着色器连接

/** * 连接 * * @param vertexShaderId 顶点着色器 * @param fragmentShaderId 片断着色器 */
public static int linkProgram(int vertexShaderId, int fragmentShaderId) {
    final int programId = GLES30.glCreateProgram();
    if (programId != 0) {
        //将顶点着色器加入到程序
        GLES30.glAttachShader(programId, vertexShaderId);
        //将片元着色器加入到程序中
        GLES30.glAttachShader(programId, fragmentShaderId);
        //连接着色器程序
        GLES30.glLinkProgram(programId);
        final int[] linkStatus = new int[1];
        //验证OpenGL程序是否可用
        GLES30.glGetProgramiv(programId, GLES30.GL_LINK_STATUS, linkStatus, 0);
        if (linkStatus[0] == 0) {
            String logInfo = GLES30.glGetProgramInfoLog(programId);
            System.err.println(logInfo);
            GLES30.glDeleteProgram(programId);
            return 0;
        }
        return programId;
    } else {
        //建立失败
        return 0;
    }
}
复制代码

绘制

准备工做结束，下来就开始绘制图形了。

public class SimpleRenderer implements GLSurfaceView.Renderer 复制代码

实现GLSurfaceView.Renderer接口

onSurfaceCreated

@Override
public void onSurfaceCreated(GL10 gl10, EGLConfig eglConfig) {
    //设置背景颜色
    GLES30.glClearColor(0.5f, 0.5f, 0.5f, 0.5f);

    // 编译顶点着色器
    final int vertexShaderId = compileShader(GLES30.GL_VERTEX_SHADER, vertextShader);
    // 编译片断着色器
    final int fragmentShaderId = compileShader(GLES30.GL_FRAGMENT_SHADER, fragmentShader);
    //在OpenGLES环境中使用程序
    GLES30.glUseProgram(linkProgram(vertexShaderId, fragmentShaderId));
}
复制代码

onSurfaceChanged

@Override
public void onSurfaceChanged(GL10 gl10, int width, int height) {
     //设置视图窗口
    GLES30.glViewport(0, 0, width, height);
}
复制代码

onDrawFrame

@Override
    public void onDrawFrame(GL10 gl10) {
        //把颜色缓冲区设置为咱们预设的颜色
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT);

        //准备坐标数据
        GLES30.glVertexAttribPointer(0, 3, GLES30.GL_FLOAT, false, 0, vertexBuffer);
        //启用顶点的句柄
        GLES30.glEnableVertexAttribArray(0);
        
        //绘制三个点
// GLES30.glDrawArrays(GLES30.GL_POINTS, 0, 3);

        //绘制直线
// GLES30.glDrawArrays(GLES30.GL_LINE_STRIP, 0, 2);
// GLES30.glLineWidth(10);

        //绘制三角形
        GLES30.glDrawArrays(GLES30.GL_TRIANGLES, 0, 3);

        //禁止顶点数组的句柄
        GLES30.glDisableVertexAttribArray(0);
    }
复制代码
点 GLES30.GL_POINTS

线 GLES30.GL_LINE_STRIP

三角形 GLES30.GL_TRIANGLES

经过glDrawArrays方法来执行最后的绘制，GL_POINTS表明绘制的类型（图元类型），而参数0，1则表明绘制的点的范围，它是一个左闭右开的区间。

经常使用图元类型

图元类型 描述
GL_POINTS 点精灵图元，对指定的每一个顶点进行绘制。
GL_LINES 绘制一系列不相连的线段。
GL_LINE_STRIP 绘制一系列相连的线段。
GL_LINE_LOOP 绘制一系列相连的线段，首尾相连。
GL_TRIANGLES 绘制一系列单独的三角形。
GL_TRIANGLE_STRIP 绘制一系列相互链接的三角形。
GL_TRIANGLE_FAN 绘制一系列相互链接的三角形

完整代码

public class SimpleRenderer implements GLSurfaceView.Renderer {
    private float[] vertexPoints = new float[]{
            0.0f, 0.5f, 0.0f,
            -0.5f, -0.5f, 0.0f,
            0.5f, -0.5f, 0.0f
    };
    private final FloatBuffer vertexBuffer;
    /** * 顶点着色器 */
    private String vertextShader =
            "#version 300 es\n" +
                    "layout (location = 0) in vec4 vPosition;\n" +
                    "void main() {\n" +
                    " gl_Position = vPosition;\n" +
                    " gl_PointSize = 10.0;\n" +
                    "}\n";

    /** * 片断着色器 */
    private String fragmentShader =
            "#version 300 es\n" +
                    "precision mediump float;\n" +
                    "out vec4 fragColor;\n" +
                    "void main() {\n" +
                    " fragColor = vec4(1.0,1.0,1.0,1.0);\n" +
                    "}\n";


    public SimpleRenderer() {
        //分配内存空间,每一个浮点型占4字节空间
        vertexBuffer = ByteBuffer.allocateDirect(vertexPoints.length * 4)
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer();
        //传入指定的坐标数据
        vertexBuffer.put(vertexPoints);
        vertexBuffer.position(0);
    }


    @Override
    public void onSurfaceCreated(GL10 gl10, EGLConfig eglConfig) {
        GLES30.glClearColor(0f, 0f, 0f, 0f);

        final int vertexShaderId = compileShader(GLES30.GL_VERTEX_SHADER, vertextShader);
        final int fragmentShaderId = compileShader(GLES30.GL_FRAGMENT_SHADER, fragmentShader);
        GLES30.glUseProgram(linkProgram(vertexShaderId, fragmentShaderId));
    }

    @Override
    public void onSurfaceChanged(GL10 gl10, int width, int height) {
        GLES30.glViewport(0, 0, width, height);
    }

    @Override
    public void onDrawFrame(GL10 gl10) {
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT);
        //准备坐标数据
        GLES30.glVertexAttribPointer(0, 3, GLES30.GL_FLOAT, false, 0, vertexBuffer);
        //启用顶点的句柄
        GLES30.glEnableVertexAttribArray(0);
        //绘制三个点
        GLES30.glDrawArrays(GLES30.GL_LINE_LOOP, 0, 3);

        //绘制直线
// GLES30.glDrawArrays(GLES30.GL_LINE_STRIP, 0, 2);
// GLES30.glLineWidth(10);

        //绘制三角形
// GLES30.glDrawArrays(GLES30.GL_TRIANGLES, 0, 3);
        //禁止顶点数组的句柄
        GLES30.glDisableVertexAttribArray(0);
    }


    /** * 编译 */
    private static int compileShader(int type, String shaderCode) {
        //建立一个着色器
        final int shaderId = GLES30.glCreateShader(type);
        if (shaderId != 0) {
            //加载到着色器
            GLES30.glShaderSource(shaderId, shaderCode);
            //编译着色器
            GLES30.glCompileShader(shaderId);
            //检测状态
            final int[] compileStatus = new int[1];
            GLES30.glGetShaderiv(shaderId, GLES30.GL_COMPILE_STATUS, compileStatus, 0);
            if (compileStatus[0] == 0) {
                String logInfo = GLES30.glGetShaderInfoLog(shaderId);
                System.err.println(logInfo);
                //建立失败
                GLES30.glDeleteShader(shaderId);
                return 0;
            }
            return shaderId;
        } else {
            //建立失败
            return 0;
        }
    }

    /** * 连接 */
    public static int linkProgram(int vertexShaderId, int fragmentShaderId) {
        final int programId = GLES30.glCreateProgram();
        if (programId != 0) {
            //将顶点着色器加入到程序
            GLES30.glAttachShader(programId, vertexShaderId);
            //将片元着色器加入到程序中
            GLES30.glAttachShader(programId, fragmentShaderId);
            //连接着色器程序
            GLES30.glLinkProgram(programId);
            final int[] linkStatus = new int[1];
            GLES30.glGetProgramiv(programId, GLES30.GL_LINK_STATUS, linkStatus, 0);
            if (linkStatus[0] == 0) {
                String logInfo = GLES30.glGetProgramInfoLog(programId);
                System.err.println(logInfo);
                GLES30.glDeleteProgram(programId);
                return 0;
            }
            return programId;
        } else {
            //建立失败
            return 0;
        }
    }

}

public class MainActivity extends AppCompatActivity {
    private GLSurfaceView mGLSurfaceView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setupViews();
    }

    private void setupViews() {
        mGLSurfaceView = new GLSurfaceView(this);
        setContentView(mGLSurfaceView);
        mGLSurfaceView.setEGLContextClientVersion(3);
        GLSurfaceView.Renderer renderer = new SimpleRenderer();
        mGLSurfaceView.setRenderer(renderer);
    }
}

复制代码

参考：

《OpenGL ES 3.0 编程指南第2版》

《OpenGL 编程指南》（原书第八版）

《OpenGL ES应用开发实践指南Android卷》

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程