MultiAttributeSize_Interleaved--外部传入点尺寸---交错组织--坐标&尺寸

最新推荐文章于 2022-06-22 18:21:56 发布

dg_2018

最新推荐文章于 2022-06-22 18:21:56 发布

阅读量91

点赞数

分类专栏： WebGL

WebGL 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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_Interleaved--外部传入点尺寸---交错组织--坐标&尺寸</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_Interleaved.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 initVertexBuffers(gl){
   //设置点的位置&尺寸
   var verticesSizes = new Float32Array([
       0.0, 0.5, 10.0,
       -0.5, -0.5, 20.0,
       0.5, -0.5, 30.0
   ]);

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

   var n = 3;//点的个数


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


   var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
   gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2);
   gl.enableVertexAttribArray(a_PointSize);
   return n;
}

//gl.vertexAttribPointer(localhost, size, type, normalized, stride, offset);的步进和偏移参数
//localhost:指定待分配attribute变量的存储位置。
//size:指定缓冲区中每个顶点的分量个数（1 到 4）。
//type:指定数据个数（列如，gl.Float）。
//normalize:true 或 false,表明是否将非浮点型的数据归一化到[0,1]或[-1,1]区间
//stride:指定相邻两个顶点间的字节数，默认为0
//offset:指定缓冲区对象中的偏移量（以字节为单位），既attribute变量从缓冲区中的何处开始存储。如果是从起始位置开始，该参数应设为0

//WebGl允许我们将顶点的坐标和尺寸数据打包到同一缓冲区对象中，并通过某种机制分别访问缓冲区对象中不同种类的数据：
//交错组织(interleaving) 将几种“逐顶点”的数据（坐标和尺寸）交叉存储在一个数组中，并将数组写入一个缓冲区对象。
//WebGL就需要有差别的从缓冲区中获取某种特定数据（坐标或尺寸），既使用gl.vertexAttribPointer()函数的第5个参数stride
//和第6个参数offset。

//var FSIZE = verticesSize.BYTES_PER_ELEMENT;
//将verticeSize数组中的每个元素的大小（字节数）存储到FSIZE中。类型化数组具有BYTES_PER_ELEMENT属性，
//可以从中获知数组中每个元素所占的字节数。

dg_2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MultiAttributeSize_Interleaved--外部传入点尺寸---交错组织--坐标&尺寸

<!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-...
复制链接

扫一扫

专栏目录