webgl--顶点缓存 VBO

507 阅读1分钟

这篇主要是通过VBO对象存储多个顶点数据,绘制多个点。

OpenGL(入门笔记)--图形渲染管线Graphics Pipeline文章中,我们了解到使用VBO对象的好处。

- 学习目标:

  • VBO对象的创建和使用; 注:VBO的生成需要使用一维数组;

在webgl中VBO创建和使用

  • 关键函数:
    1. gl.createBuffer(); --创建buffer对象;

    2. gl.bindBuffer(gl.ARRAY_BUFFER,VBO); -- 绑定顶点缓冲 --ARRAY_BUFFER是顶点缓冲类型;

    3. gl.bufferData(gl.ARRAY_BUFFER,sizeof); 配置当前绑定的缓冲VBO; -- 把用户定义的数据 复制到 当前绑定缓冲的函数。

      参数:

      • 目标缓冲类型;

      • 传输数据的大小(字节为单位);

      • 实际数据;

      • 指定显卡如何管理给定的数据;

        • GL_STATIC_DRAW:数据几乎不变;
        • GL_DYNAMIC_DRAW:数据会被改变很多;
        • GL_STREAM_DRAW:数据每次 绘制时都会改变;

        -- 顶点数据储存在显卡的内存--

    4. 链接顶点属性 gl.vertexAttribPointer();

    5. 开启顶点缓存对象 gl.enableVertexAttribArray(0);

      function webgl() {
               const canvas = document.getElementById('canvas');
               const gl = canvas.getContext('webgl');
               if (!gl) {
                   return;
               }
      
               //顶点数据 --VBO对象
               const vertexData = new Float32Array([
                   0.0, 0.0,
                   0.5, 0.0,
                   0.0, 0.5
               ])
      
      
               const buffer = gl.createBuffer();
               gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
               gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW); 
      
               // vec4 向量浮点数
               const VertexSource = `
               attribute vec4 a_pos;
               void main(){
                   gl_Position=a_pos;
                   gl_PointSize=10.0;
               }
               `;
      
               //在片段着色器上,float没有默认的精度限定符
               //precision 指定默认精度
               const FragmentSource = `
               precision lowp float;
               uniform vec4 u_color;
               void main(){
                   gl_FragColor=vec4(u_color);
               }
               `;
      
               const shaderProgram = initShaders(gl, VertexSource, FragmentSource);
               
                //--激活着色器程序(使用着色器程序 )
               gl.useProgram(shaderProgram);
      
               //通知WEBGL那个VBO和那个attribute变量相关联
               const a_pos = gl.getAttribLocation(shaderProgram, "a_pos");
               gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0.0, 0.0); 
               gl.enableVertexAttribArray(0);//开启 -- 顶点缓存对象
               
               const u_color = gl.getUniformLocation(shaderProgram, "u_color");
               gl.uniform4fv(u_color, [0.0, 1.0, 0.0, 1.0]);
      
               //绘制 --指定图元 
               gl.drawArrays(gl.TRIANGLES, 0, 3);
      
           }
        webgl();