webGL编程指南第三章绘制四角形.helloQuadjs（加餐）

我会持续更新关于wegl的编程指南中的代码。

当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助

git代码地址

接着上一节接着做使用缓冲区赋值。

本节中我们还是使用4个顶点，放在一个数组中。然后去获取缓冲区中的数据，同时绘制矩形

在绘制的时候我们给它添加上颜色。

下面是代码

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <canvas id='canvas'></canvas>
    <script>
        let canvas = document.getElementById('canvas');
        let gl = canvas.getContext('webgl');

        let vertexShaderSource = `
            attribute vec3 a_Position;
            attribute vec3 a_Color; 
            varying vec3 v_Color;
            void main(){
                gl_Position = vec4(a_Position,1.0); 
                v_Color = a_Color;
            }
        `
        let fragmentShaderSouce = `
            precision mediump float; 
            varying vec3 v_Color;
            void main(){
                gl_FragColor =vec4(v_Color,1.0) ;
            }
        `
        // 创建顶点着色器
        let vertexShader = gl.createShader(gl.VERTEX_SHADER);
        // 绑定着色器源码
        gl.shaderSource(vertexShader, vertexShaderSource)
        // 编译着色器
        gl.compileShader(vertexShader)

        // 创建片段着色器
        let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        // 绑定着色器源码
        gl.shaderSource(fragmentShader, fragmentShaderSouce);
        // 编译着色器
        gl.compileShader(fragmentShader);

        //创建渲染程序
        let program = gl.createProgram();
        // 绑定渲染程序
        gl.attachShader(program, vertexShader);
        // 绑定渲染程序
        gl.attachShader(program, fragmentShader);
        // 链接渲染程序
        gl.linkProgram(program);
        //使用当前渲染程序
        gl.useProgram(program)
        
        //检测赋值是否有报错
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            throw gl.getProgramInfoLog(program);
        }
        // 设置顶点位置
        let positonArray = new Float32Array([ 
            -0.5, 0.5, 0,
            -0.5, -0.5, 0,
            0.5, 0.5, 0,
            0.5, -0.5, 0,
        ])
        //随机颜色数据
        let colorList = new Float32Array(12)
        for (let index = 0; index < 12; index++) {
            colorList[index] = Math.random()
        }

        //获取顶点变量
        let a_Position = gl.getAttribLocation(program, 'a_Position'); 
        // 获取颜色变量
        let a_Color = gl.getAttribLocation(program, 'a_Color')

        // 绑定颜色数据
        let buffer = gl.createBuffer();
        //绑定缓冲区
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        // 向缓冲区写入数据 
        gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW)
        // 设置顶点数据
         //buffer中已经存在数据了，现在将数据分配至给指定的变量
        //                      |将buffer中的数据分配给a_Position 
        //                                 |（因为我们设置的vec3并且positonArray中的变量一共12个）
        //                                      |（传入的是float值得类型）
        //                                               |不进行归一化操作
        //                                                       |变量需要的数据是3个字符为一套
        //                                                                                        |每一套数据中数据偏移为0
        //vertexAttribPointer : https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/vertexAttribPointer
        //赋值给a_Position的变量
        //一组需要3个字符(x,y,z)
        //传入的是float值得类型
        //不需要归一化
        //变量需要的数据是3个字符为一套 一个字符占4个字节
        //每一套数据中数据偏移为0
        gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 3 * positonArray.BYTES_PER_ELEMENT, 0);
        // 启用顶点数据
        gl.enableVertexAttribArray(a_Position);

        // 绑定颜色数据
        let colorBuffer = gl.createBuffer()
        //绑定缓冲区
        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
        // 向缓冲区写入数据 
        gl.bufferData(gl.ARRAY_BUFFER, colorList, gl.STATIC_DRAW);
        //同上述的解是
        //赋值给a_Color变量 
        //一个a_Color需要3个 
        //传入的是float值得类型 
        //不需要归一化 
        //变量需要的数据是3个字符为一套 一个字符占4个字节  
        //每一套数据中数据偏移为0
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 3 * colorList.BYTES_PER_ELEMENT, 0);
        // 启用顶点数据
        gl.enableVertexAttribArray(a_Color);
        //绘制
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        //清空颜色缓冲区
        gl.clear(gl.COLOR_BUFFER_BIT);
         //绘制图形
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)

        console.log(positonArray)


    </script>
</body>

</html>

webGL编程指南 第三章 绘制四角形.helloQuadjs（加餐）

webGL编程指南第三章绘制四角形.helloQuadjs（加餐）