美文网首页
《WebGL编程指南》学习笔记19——绘制三个点且颜色不同

《WebGL编程指南》学习笔记19——绘制三个点且颜色不同

作者: 小鸟游露露 | 来源:发表于2021-05-08 10:16 被阅读0次

    本系列仅作为本人学习《WebGL编程指南》这本书的笔记所用

    顶点着色器和片元着色器中有类型和命名都相同的varying变量时,那么顶点着色器赋给varying变量的值会自动传入片元着色器中。


    image.jpeg
    image.jpeg
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>17绘制三个点-修改颜色</title>
    
        <script src="./lib/cuon-matrix.js"></script>
        <script src="./lib/cuon-utils.js"></script>
        <script src="./lib/webgl-debug.js"></script>
        <script src="./lib/webgl-utils.js"></script>
      </head>
      <body onload="main()">
        <canvas id="webgl" width="400" height="400">
          不支持canvas的浏览器会展示这段文字
        </canvas>
    
        <script>
          // ============👇
          // 顶点着色器程序
          let VSHADER_SOURCE = `
            attribute vec4 a_Position;
            attribute vec4 a_Color;
            varying vec4 v_Color; // varying变量
            void main() {
              gl_Position = a_Position;
              gl_PointSize = 10.0;
              v_Color = a_Color; // 将数据传给片元着色器
            }
        `;
          // 片元着色器程序
          let FSHADER_SOURCE = `
            precision mediump float; // 精度限定词-来指定变量的范围和精度,这里是中等精度
            varying vec4 v_Color;
            void main() {
              gl_FragColor = v_Color; // 从顶点着色器接收数据
            }
        `;
          // ============👆
    
          // 主程序
          function main() {
            let canvas = document.getElementById("webgl");
    
            // 获取WebGL绘图上下文
            let gl = getWebGLContext(canvas);
            if (!gl) {
              console.error("无法使用WebGL");
              return;
            }
    
            // 初始化着色器
            if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
              console.error("无法使用着色器");
              return;
            }
    
            // ===============👇
            // 设置顶点坐标
            let n = initVertexColorBuffers(gl);
            if (n < 0) {
              console.log("无法设置点的位置");
              return;
            }
            // 设置顶点的颜色
            gl.drawArrays(gl.POINTS, 0, n);
            // ===============👆
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.POINTS, 0, n);
          }
          function initVertexColorBuffers(gl) {
            // ===============👇
            // 定义顶点坐标和颜色
            let verticesColors = new Float32Array([
              0.0, 0.5, 1.0, 0.0, 0.0,
              -0.5, -0.5, 0.0, 1.0, 0.0,
              0.5, -0.5, 0.0, 0.0, 1.0,
            ]); 
            // 5个元素代表1个点,共3个点。坐标占2个元素,间隔0开始算。颜色占3个元素,间隔2个开始算。
            // 参数1:类型。 参数2:占几个元素。 参数3:单位类型。 参数4:固定。 参数5:5个元素代表1个点。 参数6:间隔2个元素开始算
            // gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*5, 0);
            // gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*5, FSIZE*2);
            // ===============👆
            let n = 3; // 顶点数量
    
            // 1.创建缓冲区对象
            let vertexColorBuffer = gl.createBuffer();
            if (!vertexColorBuffer) {
              console.log("不能创建缓冲区对象");
              return -1;
            }
    
            // 2.将缓冲区对象绑定到目标
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
    
            // 3.向缓冲区对象写入数据,不能直接向缓冲区写入数据,只能向绑定的目标输入数据
            gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
    
            // ===============👇
            let FSIZE = verticesColors.BYTES_PER_ELEMENT;
    
            // 获取a_Position变量的存储位置,分配缓冲区并开启
            let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            if (a_Position < 0) {
              console.log("无法获取 a_Position");
              return -1;
            }
    
            // 4.将缓冲区对象分配给attribute变量--所有点数据一次性传入
            gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*5, 0);
    
            // 5.连接a_Position变量与分配给它的缓冲区对象,开启attribute变量
            gl.enableVertexAttribArray(a_Position); // 开启缓冲区分配
    
            // 获取a_Color的存储位置,分配缓冲区并开启
            let a_Color = gl.getAttribLocation(gl.program, 'a_Color');
    
            gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*5, FSIZE*2);
            gl.enableVertexAttribArray(a_Color); // 开启缓冲区分配
    
            // ===============👆
            return n; // 返回待绘制顶点的数量, 函数内部发生错误后返回-1
          }
        </script>
      </body>
    </html>
    

    未完待续。。。

    相关文章

      网友评论

          本文标题:《WebGL编程指南》学习笔记19——绘制三个点且颜色不同

          本文链接:https://www.haomeiwen.com/subject/wyhqkltx.html