01.webgl入门

1.创建webgl标签
2.得到canvas element
3.得到上下文对象 context
4.编写顶点着色器源代码、实际绘制的代码，GPU：描述一个顶点的大小、位置（3d坐标）
5.片元着色器源代码：描述一个点的颜色
6.创建着色器对象
7.把source导入着色器对象
8.对着色器对象进行编译compile
9.创建一个program,webgl分两个运行部分，一个是js环境，另一个是webgl内部硬件运行部分。着色器代码运行在内部。
10.把着色器附着在program上。
11.链接program
12.使用program
13.设置背景色
14.绘制

1.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cmd_webgl_study1</title>
</head>
<body>

    <!--    1.创建webgl标签 
            2.得到canvas element
            3.得到上下文对象 context
            4.编写顶点着色器源代码、实际绘制的代码，GPU：描述一个顶点的大小、位置（3d坐标）            
            5.片元着色器源代码：描述一个点的颜色
            6.创建着色器对象
            7.把source导入着色器对象
            8.对着色器对象进行编译compile
            9.创建一个program,webgl分两个运行部分，一个是js环境，另一个是webgl内部硬件运行部分。着色器代码运行在内部。
            10.把着色器附着在program上。
            11.链接program
            12.使用program
            13.设置背景色
            14.绘制
    -->

    <!-- 1.创建webgl标签 -->
    <canvas id="webgl" width="500" height="500"></canvas>
    <script type="shader" id="vertex">
        void main(){
            gl_PointSize = 20.0;
            gl_Position = vec4(-0.9,0.9,0.0,1.0);
        }
    </script>
    <script type="shader" id="fragment">
        void main(){
            gl_FragColor = vec4(0.0,1.0,0.0,1.0);
        }
    </script>
    <script src="./libs/webgl_libs.js"></script>
    <script>
        // 2.得到canvas element
        let canvas = document.getElementById('webgl');
        // 3.得到上下文对象 context
        let cxt = canvas.getContext('webgl');

        //4.编写顶点着色器源代码、实际绘制的代码，GPU：描述一个顶点的大小、位置（3d坐标） 顶点着色器
        let vertex_shader_source = document.getElementById("vertex").innerHTML;

        //5.片元着色器源代码：描述一个点的颜色 片元着色器
        let fragment_shader_source = document.getElementById("fragment").innerHTML;
        
         //6-12 在libs中处理了
        let program = create_program(cxt,vertex_shader_source,fragment_shader_source);

        // 13.设置背景色
        cxt.clearColor(1.0,0.0,0.0,1.0);
        cxt.clear(cxt.COLOR_BUFFER_BIT);

        // 14.绘制
        /*
        gl.drawArrays(mode, first, count)
        mode: 需要绘制的图像形状
        *   gl.POINTS: 绘制一个点。
        *   gl.LINE_STRIP: 绘制一条直线到下一个顶点。
        *   gl.LINE_LOOP: 绘制一条首尾相连的线。
        *   gl.LINES: 绘制一条线。
        *   gl.TRIANGLES: 绘制一个三角形。
        first: 绘制的开始点
        count: 需要绘制的图形个数
        */
        cxt.drawArrays(cxt.POINTS,0,1);
        
    </script>
</body>
</html>

libs.js:

function create_program(cxt,vertex_shader_source,fragment_shader_source) {
    //6.创建顶点着色器
    let vertex_sharer = cxt.createShader(cxt.VERTEX_SHADER);

    //创建片元着色器
    let fragment_sharer = cxt.createShader(cxt.FRAGMENT_SHADER);

    //7.把source 导入着色器对象
    cxt.shaderSource(vertex_sharer,vertex_shader_source);
    cxt.shaderSource(fragment_sharer,fragment_shader_source);

    //8.对着色器对象进行编译compile
    cxt.compileShader(vertex_sharer);
    cxt.compileShader(fragment_sharer);

    //9.创建一个program,webgl分两个运行部分，一个是js环境，另一个是webgl内部硬件运行部分。着色器代码运行在内部。
    let program = cxt.createProgram();

    //10.把着色器附着在program上。
    cxt.attachShader(program,vertex_sharer);
    cxt.attachShader(program,fragment_sharer);

    //11.链接program
    cxt.linkProgram(program);

    //12.使用program
    cxt.useProgram(program);
}

最后编辑于：2020.03.09 17:29:53