OpenGL精简案例一

案例一 绘制点线面

定义Renderer


import android.content.Context;
import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
import android.util.Log;

import com.guide.opengllib.R;
import com.guide.opengllib.simple.ShaderHelper;
import com.guide.opengllib.simple.TextResourceReader;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import static android.opengl.GLES20.GL_COLOR_BUFFER_BIT;
import static android.opengl.GLES20.GL_FLOAT;
import static android.opengl.GLES20.GL_LINES;
import static android.opengl.GLES20.GL_POINTS;
import static android.opengl.GLES20.GL_TRIANGLE_FAN;
import static android.opengl.GLES20.glClear;
import static android.opengl.GLES20.glClearColor;
import static android.opengl.GLES20.glDrawArrays;
import static android.opengl.GLES20.glEnableVertexAttribArray;
import static android.opengl.GLES20.glGetAttribLocation;
import static android.opengl.GLES20.glVertexAttribPointer;
import static android.opengl.GLES20.glViewport;

/**
 */
public class CRenderer implements GLSurfaceView.Renderer {

    private String TAG = "Qm";
    //缓冲区
    private final FloatBuffer vertexData;
    //上下文
    private Context context;
    //float buffer大小
    private static final int BYTES_PER_FLOAT = 4;
    //程序
    private int program;
    //颜色着色器引用
    private int aColorLocation;
    //顶点着色器引用
    private int aPositionLocation;
    //glsl 颜色着色器坐标
    private static final String A_COLOR = "a_Color";
    //glsl 顶点着色器坐标
    private static final String A_POSITION = "a_Position";
    //顶点着色器 每行点个数
    private static final int POSITION_COMOPNENT_COUNT = 2;
    //颜色着色器 每行颜色个数
    private static final int COLOR_COMPONENT_CONT = 3;
    //每行间隔
    private static final int STRIDE = (POSITION_COMOPNENT_COUNT + COLOR_COMPONENT_CONT) *
            BYTES_PER_FLOAT;

    /**
     * 1.添加坐标点; OpenGl中,只能绘制点,直线和三角形
     * 在定义三角形时,我们总是以逆时针的顺序排列顶点,这称为卷曲顺序。
     */
    float[] tableVertices = {
            // Order of coordinates: X, Y, R, G, B

            // Triangle Fan
            0f, 0f, 1f, 1f, 1f,
            -0.5f, -0.5f, 0.0f, 1.0f, 0.0f,
            0.5f, -0.5f, 0.0f, 1.0f, 0.0f,
            0.5f, 0.5f, 0.0f, 1.0f, 0.0f,
            -0.5f, 0.5f, 0.0f, 1.0f, 0.0f,
            -0.5f, -0.5f, 0.0f, 1.0f, 0.0f,

            // Line 1
            -0.5f, 0f, 1f, 0f, 0f,
            0.5f, 0f, 1f, 0f, 0f,

            // Mallets
            0f, -0.25f, 0f, 0f, 1f,
            0f, 0.25f, 1f, 0f, 0f
    };

    public CRenderer(Context context) {
        this.context = context;
        //ByteBuffer.allocateDirect 分配一块内存;参数是分配多少字节的内存块。
        //order 季节缓冲区按照本地字节序组织它的内容。
        vertexData = ByteBuffer.allocateDirect(tableVertices.length * BYTES_PER_FLOAT)
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer();
        vertexData.put(tableVertices);
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        Log.w(TAG, "onSurfaceCreated");
        //设置背景清除颜色为红色。
        //第一个分量是红色的,第二个是绿色的,第三个是蓝色的,最后一个分量是alpha。
        glClearColor(0.0f, 0.0f, 0.0f, 0.0f);

        //1.读取顶点着色器
        String vertexShaderSource = TextResourceReader.readTextFileFromResource(context, R.raw.c_vertex_shader);
        //读取片段着色器
        String fragmentShaderSource = TextResourceReader.readTextFileFromResource(context, R.raw.c_fragment_shader);
        Log.w(TAG, "onSurfaceCreated,第1步");

        //2.创建顶点着色器
        int vertexShader = ShaderHelper.compileVertexShader(vertexShaderSource);
        //创建片段着色器
        int fragmentShader = ShaderHelper.compileFragmentShader(fragmentShaderSource);
        Log.w(TAG, "onSurfaceCreated,第2步");

        //3.连接两个着色器
        program = ShaderHelper.linkProgram(vertexShader, fragmentShader);
        Log.w(TAG, "onSurfaceCreated,第3步");

        //4.验证该对象 program 是否可用
        ShaderHelper.validateProgram(program);
        Log.w(TAG, "onSurfaceCreated,第4步");

        //5.使用自定义的程序来绘制
        GLES20.glUseProgram(program);

        /**
         * 6.获取着色器并且为着色器赋值
         */
        aColorLocation = glGetAttribLocation(program, A_COLOR);
        //获取顶点着色器 a_Position 对象的指针
        aPositionLocation = glGetAttribLocation(program, A_POSITION);
        Log.w(TAG, "onSurfaceCreated,第5步");

        /**
         * 6.为着色器赋值
         */
        vertexData.position(0);//将位置设置在数据的开头处
        glVertexAttribPointer(aPositionLocation, POSITION_COMOPNENT_COUNT,
                GL_FLOAT, false, STRIDE, vertexData);
        //7.指定OpenGL在哪使用顶点数组
        glEnableVertexAttribArray(aPositionLocation);
        Log.w(TAG, "onSurfaceCreated,第6步");

        /**
         * 注释
         * 1.vertexData.position
         * vertexData将位置设置为2,因为读取颜色属性时,要从第一个颜色属性读取,而不是位置属性,
         * 而在原数据中,颜色属性的位置是2
         * 2.glVertexAttribPointer
         * 把颜色数据和着色器中的a_Color关联起来,STRIDE这个参数是跨距,这个值告诉OpenGL两个
         * 颜色属性质检的距离是多少,这样位置属性和颜色属性连接存储,就不会将位置属性当做颜色属性读
         * 3.glEnableVertexAttribArray
         * 指定OpenGL在哪使用顶点数组
         */
        vertexData.position(POSITION_COMOPNENT_COUNT);
        glVertexAttribPointer(aColorLocation, COLOR_COMPONENT_CONT, GL_FLOAT,
                false, STRIDE, vertexData);
        glEnableVertexAttribArray(aColorLocation);
        Log.w(TAG, "onSurfaceCreated,第7步");

    }

    /**
     * 当表面发生变化时,onSurfaceChanged被调用。
     * 这个函数在曲面初始化时至少被调用一次。
     * 请记住,Android通常会在旋转时重启一个活动,在这种情况下,渲染器将被销毁并创建一个新的。
     *
     * @param gl
     * @param width  新的宽度,以像素为单位。
     * @param height 新的高度,以像素为单位。
     */
    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        Log.w(TAG, "onSurfaceChanged");
        //设置OpenGL视口填充整个表面。
        glViewport(0, 0, width, height);
    }

    /**
     * 每当需要绘制一个新帧时,OnDrawFrame就会被调用。通常,这是在屏幕的刷新率下完成的。
     *
     * @param gl
     */
    @Override
    public void onDrawFrame(GL10 gl) {
        //清除渲染表面。
        glClear(GL_COLOR_BUFFER_BIT);

        /**
         * 8.绘制页面,画桌子,画线,点;
         * glUniform4f:第一个参数指定Uniform变量的值,后面是红绿蓝和透明值
         * glDrawArrays:第一个参数绘制三角形,第二个参数从数组开头开始读取顶点,第三个参数读到第六个点
         */
        glDrawArrays(GL_TRIANGLE_FAN, 0, 6);

        //绘制线
        glDrawArrays(GL_LINES, 6, 2);

        //画点
        glDrawArrays(GL_POINTS, 8, 1);
        glDrawArrays(GL_POINTS, 9, 1);
    }
}

顶点着色器

attribute vec4 a_Position;
attribute vec4 a_Color;

varying vec4 v_Color;

void main(){
    v_Color = a_Color;

    gl_Position = a_Position;
    gl_PointSize = 10.0;
}

片段着色器

precision mediump float;

varying vec4 v_Color;

void main(){
    gl_FragColor = v_Color;
}

以下为glsl语法中摘录的一部分,可以发现gl_FragColor gl_Position gl_PointSize 均为内部变量,且必须赋值

内置的特殊变量

glsl程序使用一些特殊的内置变量与硬件进行沟通.他们大致分成两种 一种是 input类型,他负责向硬件(渲染管线)发送数据.
另一种是output类型,负责向程序回传数据,以便编程时需要.

在 vertex Shader 中:

output 类型的内置变量:

变量说明单位
highp vec4 gl_Position;gl_Position 放置顶点坐标信息vec4
mediump float gl_PointSize;gl_PointSize 需要绘制点的大小,(只在gl.POINTS模式下有效)float

在 fragment Shader 中:

input 类型的内置变量:

变量说明单位
mediump vec4 gl_FragCoord;片元在framebuffer画面的相对位置vec4
bool gl_FrontFacing;标志当前图元是不是正面图元的一部分bool
mediump vec2 gl_PointCoord;经过插值计算后的纹理坐标,点的范围是0.0到1.0vec2

应用场景


import android.annotation.SuppressLint;
import android.opengl.GLSurfaceView;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import com.guide.opengllib.simple.c.CRenderer;

public class Simplectivity extends AppCompatActivity {

    private GLSurfaceView glSurfaceView;
    private GLSurfaceView.Renderer mRenderer;

    @SuppressLint("ClickableViewAccessibility")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        glSurfaceView = new GLSurfaceView(this);
        mRenderer = new CRenderer(this);
        
		glSurfaceView.setEGLContextClientVersion(2);
        glSurfaceView.setRenderer(mRenderer);
        
        setContentView(glSurfaceView);
    }


    @Override
    protected void onResume() {
        super.onResume();
        glSurfaceView.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
        glSurfaceView.onPause();
    }
}

工具ShaderHelper


import android.opengl.GLES20;
import android.util.Log;

import static android.opengl.GLES20.GL_COMPILE_STATUS;
import static android.opengl.GLES20.GL_FRAGMENT_SHADER;
import static android.opengl.GLES20.GL_LINK_STATUS;
import static android.opengl.GLES20.GL_VALIDATE_STATUS;
import static android.opengl.GLES20.GL_VERTEX_SHADER;
import static android.opengl.GLES20.glAttachShader;
import static android.opengl.GLES20.glCompileShader;
import static android.opengl.GLES20.glCreateProgram;
import static android.opengl.GLES20.glCreateShader;
import static android.opengl.GLES20.glDeleteProgram;
import static android.opengl.GLES20.glDeleteShader;
import static android.opengl.GLES20.glGetProgramiv;
import static android.opengl.GLES20.glGetShaderiv;
import static android.opengl.GLES20.glLinkProgram;
import static android.opengl.GLES20.glShaderSource;
import static android.opengl.GLES20.glValidateProgram;

/**
 */
public class ShaderHelper {
    private static final String TAG = "ShaderHelper";

    /** 加载和编译一个顶点着色器,返回OpenGL对象ID */
    public static int compileVertexShader(String shaderCode) {
        return compileShader(GL_VERTEX_SHADER, shaderCode);
    }

    /** 加载和编译一个片段着色器,返回OpenGL对象ID */
    public static int compileFragmentShader(String shaderCode) {
        return compileShader(GL_FRAGMENT_SHADER, shaderCode);
    }

    /** 编译一个着色器,返回OpenGL对象ID */
    private static int compileShader(int type, String shaderCode) {

        //创建一个新的着色器对象
        final int shaderObjectId = glCreateShader(type);

        if (shaderObjectId == 0) {
            Log.w(TAG, "ShaderHelper: Could not create new shader.");
        }

        //传入着色器源
        glShaderSource(shaderObjectId, shaderCode);

        //编译着色器
        glCompileShader(shaderObjectId);

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

        //验证编译状态
        if (compileStatus[0] == 0) {
            //如果失败,删除着色器对象
            glDeleteShader(shaderObjectId);
            Log.w(TAG, "ShaderHelper: Compilation of shader failed");
        }

        //返回着色器对象ID
        return shaderObjectId;
    }

    /** 将顶点着色器和片段着色器连接到OpenGL中,返回OpenGL对象ID,连接失败返回0 */
    public static int linkProgram(int vertexShaderId, int fragmentShaderId) {

        //创建一个新的程序对象
        final int programObjectId = glCreateProgram();

        if (programObjectId == 0) {
            Log.w(TAG, "ShaderHelper: Could not create new program");
        }

        //将顶点着色器附加到程序上
        glAttachShader(programObjectId, vertexShaderId);
        //将片段着色器附加到程序上
        glAttachShader(programObjectId, fragmentShaderId);

        //将两个着色器连接到一个程序中
        glLinkProgram(programObjectId);

        //获取连接状态
        final int[] linkStatus = new int[1];
        glGetProgramiv(programObjectId, GL_LINK_STATUS, linkStatus, 0);

        //验证链接状态
        if (linkStatus[0] == 0) {
            //如果失败,删除程序对象
            glDeleteProgram(programObjectId);
            Log.v(TAG, "Results of linking program:\n" + GLES20.glGetProgramInfoLog(programObjectId));
        }

        //返回程序对象ID
        return programObjectId;
    }

    /** 验证OpenGL程序,应该只在开始应用程序调用 */
    public static boolean validateProgram(int programObjectId) {
        glValidateProgram(programObjectId);

        final int[] validateStatus = new int[1];
        glGetProgramiv(programObjectId, GL_VALIDATE_STATUS, validateStatus, 0);

        return validateStatus[0] != 0;
    }

    public static int buildProgram(String vertexShaderSource, String fragmentShaderSource) {
        int program;
        int vertexShader = compileVertexShader(vertexShaderSource);
        int fragmentShader = compileFragmentShader(fragmentShaderSource);

        program = linkProgram(vertexShader, fragmentShader);

        validateProgram(program);
        return program;
    }
}

工具 TextResourceReader

public class TextResourceReader {
    public static String readTextFileFromResource(Context context, int resourceId) {
        StringBuilder body = new StringBuilder();

        try {
            InputStream inputStream = context.getResources().openRawResource(resourceId);
            InputStreamReader inputStreamReader = new InputStreamReader(inputStream);
            BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
            String nextLine;
            while ((nextLine = bufferedReader.readLine()) != null) {
                body.append(nextLine);
                body.append('\n');
            }
        } catch (IOException e) {
            throw new RuntimeException("Could not open resource:" + resourceId, e);
        } catch (Resources.NotFoundException nfe) {
            throw new RuntimeException("Resource not found :" + resourceId, nfe);
        }
        return body.toString();
    }
}

效果图如下

glDrawArrays(GL_TRIANGLE_FAN, 0,6);
在这里插入图片描述
我们不妨尝试将第三个参数修改,帮助我们理解gl的绘制原理
glDrawArrays(GL_TRIANGLE_FAN, 0, 1);
在这里插入图片描述

glDrawArrays(GL_TRIANGLE_FAN, 0, 2);
在这里插入图片描述

glDrawArrays(GL_TRIANGLE_FAN, 0, 3);
在这里插入图片描述

glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
在这里插入图片描述

glDrawArrays(GL_TRIANGLE_FAN, 0, 5);
在这里插入图片描述

结论

PS
1. GL_TRIANGLE_FAN绘制最少三个点
2. 绘制时为逆时针方向
3. 过程:读取顶点数据->执行顶点着色器->组装图元->光栅化图元->执行片段着色器->写入帧缓冲区->显示到屏幕;
4. 关于语法可参见 OpenGL手册

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值