MultiAttributeSize--外部传入点尺寸数据---创建两个缓冲区-CSDN博客

<!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, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>MultiAttributeSize--外部传入点尺寸数据---创建两个缓冲区</title>
</head>
<body οnlοad="main();">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script type="text/javascript" src="/WebGL/js/lib/webgl-utils.js"></script>
<script type="text/javascript" src="/WebGL/js/lib/webgl-debug.js"></script>
<script type="text/javascript" src="/WebGL/js/lib/cuon-utils.js"></script>
<script type="text/javascript" src="/WebGL/js/MultiAttributeSize.js"></script>
<script>
</script>
</body>
</html>

//顶点着色器程序
var VSHADER_SOURCE =
   'attribute vec4 a_Position;\n'+ //attribute被称为存储限定符，表示接下来的变量（a_Position）
   'attribute float a_PointSize;\n'+
   'void main() {\n' +
   'gl_Position = a_Position;\n' + //赋值设置坐标
   'gl_PointSize = a_PointSize;\n' + //设置尺寸 gl_PointSize为浮点型不然报错
   '}\n';

//片元着色器程序
var FSHADER_SOURCE =
   'void main() {\n' +
   'gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' + //设置颜色
   '}\n';

function main(){
   //获取<canvas>元素
   var canvas = document.getElementById('webgl');

   //获取WebGL绘图上下文
   var gl = getWebGLContext(canvas);
   if(!gl){
       console.log('Failed to get the rendering context for WebGL');
       return;
   }
   //初始化着色器
   if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
       console.log('Failed to initialize shaders');
       return;
   }
   //获取attribute变量的存储位置--地址
   var a_Position = gl.getAttribLocation(gl.program, 'a_Position');//参数1：程序对象；参数2：想要获取存储地址的attribute变量名称；
   var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');

   //检查
   if(a_Position < 0 || a_PointSize < 0){
       console.log('Failed to get the storage location of a_Position');
       return;
   }
   //设置顶点位置
   var n = initVertexBuffers(gl);
   if(n < 0){
       console.log('Failed to set the position of the vertices');
       return;
   }

   //设置<canvas>的背景颜色-----黑色
   gl.clearColor(0.0,0.0,0.0,1.0);
   //清空<canvas>
   gl.clear(gl.COLOR_BUFFER_BIT);

   //绘制三个点 draw绘制
   gl.drawArrays(gl.POINTS, 0, n);//n is 3
}

function initVertexBuffers(gl){
   //设置点的位置
   var vertices = new Float32Array([
       0.0, 0.5, -0.5, -0.5, 0.5, -0.5
   ]);

   //设置点的尺寸
   var sizes = new Float32Array([
       10.0, 20.0, 30.0
   ]);

   //创建点位置缓冲区对象
   var vertexBuffer = gl.createBuffer();
   if(!vertexBuffer){
       console.log('vertexBuffer Failed to create the buffer object');
       return -1;
   }

   //创建点尺寸缓冲区对象
   var sizeBuffer = gl.createBuffer();
   if(!sizeBuffer){
       console.log('sizeBuffer Failed to create the buffer object');
       return -1;
   }

   var n = 3;//点的个数


   //将缓冲区对象绑定到目标
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   //向缓冲区对象中写入数据
   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
   var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
   //将缓冲区对象分配给a_Position变量
   gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
   //连接a_Position变量与分配给它的缓冲区对象
   gl.enableVertexAttribArray(a_Position);

   gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
   gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STATIC_DRAW);
   var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
   gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0);
   gl.enableVertexAttribArray(a_PointSize);

   return n;
}
//流程图：
   //1.获取WebGL绘图上下文
   //2.初始化着色器
   //3.设置点的坐标信息
   //4.设置<canvas>背景色
   //5.清空<canvas>
   //6.绘制
//使用缓冲区对象向顶点着色器传入多个顶点数据，需要遵循以下五个步骤：
   //1.创建缓冲区对象 (gl.createBuffer());
   //2.绑定缓冲区对象 (gl.bindBuffer());
   //3.将数据写入缓冲区对象 (gl.bufferData());
   //4.将缓冲区对象分配给一个attribute变量 (gl.vertexAttribPointer());
   //5.开启attribute变量 (gl.enableVertexAttribArray());