webGL中把数组中包含顶点位置坐标数据传给顶点着色器中attribute关键字声明的变量apos

Question

初次学习webGL在看代码示例的时候实在是没搞明白，声明的data数组是怎么通过存入缓冲区然后传递给apos的。
去查看了gl.vertexAttribPointer()的api也没想明白apos怎么通过缓冲区得到data数据的。
有没有大佬可以说明一下具体传递的过程，简单描述也行，详细描述一下也行，或者指个明路在哪里可以那弄清楚这个过程也行。
以下是源码，主要就是从创建缓冲区对象之后，想不明白这个问题。

<script>
       var canvasElement=document.getElementById('webgl');
       var gl=canvasElement.getContext('webgl');
       //顶点着色器源码
       var vertexShaderSource = '' +
           //attribute声明vec4类型变量apos
           'attribute vec4 apos;'+
           'void main(){' +
           //顶点坐标apos赋值给内置变量gl_Position
           '   gl_Position =apos;' +
           '}';
       //片元着色器源码
       var fragShaderSource = '' +
           'void main(){' +
           '   gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
           '}';
       //初始化着色器
       var program = initShader(gl,vertexShaderSource,fragShaderSource);
       //获取顶点着色器的位置变量apos              ，即aposLocation指向apos变量。
       var aposLocation = gl.getAttribLocation(program,'apos');
   
       //类型数组构造函数Float32Array创建顶点数组
       var data=new Float32Array([0.6,0.6,-0.6,0.6,-0.6,-0.6,0.6,-0.6]);
   
       //创建缓冲区对象
       var buffer=gl.createBuffer();
       //绑定缓冲区对象
       gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
       //顶点数组data数据传入缓冲区
       gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);
       //缓冲区中的数据按照一定的规律传递给位置变量apos
       gl.vertexAttribPointer(aposLocation,2,gl.FLOAT,false,0,0);
       //允许数据传递
       gl.enableVertexAttribArray(aposLocation);
   
       //开始绘制图形
       gl.drawArrays(gl.LINE_LOOP,0,4);
   
       //声明初始化着色器函数
       function initShader(gl,vertexShaderSource,fragmentShaderSource){
           var vertexShader = gl.createShader(gl.VERTEX_SHADER);
           var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
           gl.shaderSource(vertexShader,vertexShaderSource);
           gl.shaderSource(fragmentShader,fragmentShaderSource);
           gl.compileShader(vertexShader);
           gl.compileShader(fragmentShader);
           var program = gl.createProgram();
           gl.attachShader(program,vertexShader);
           gl.attachShader(program,fragmentShader);
           gl.linkProgram(program);
           gl.useProgram(program);
           return program;
       }
   </script>

Answer 1

你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答

本次提问扣除的有问必答次数，将会以问答VIP体验卡（1次有问必答机会、商城购买实体图书享受95折优惠）的形式为您补发到账户。

​​​​因为有问必答VIP体验卡有效期仅有1天，您在需要使用的时候【私信】联系我，我会为您补发。