HelloPoint2--使用变量赋值_给point2i赋值-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>HelloPoint2--使用变量赋值</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/HelloPoint2.js"></script>
<script>
</script>
</body>
</html>

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

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

//WebGL程序可以将顶点的位置坐标从JavaScript传到着色器程序中，然后在对应位置上将点绘制出来。
//将位置信息从JavaScript程序中传给顶点着色器。有两种方式：attribute变量和uniform变量。使用
//哪一个变量取决于需传输的数据本身，attribute变量传输的是那些与顶点相关的数据，
//而uniform变量传输的是那些对于所有顶点都相同（或与顶点无关）的数据。
//attribute变量是一种GLSL ES变量，被用来从外部向顶点着色器内传输数据，只有顶点着色器能使用它。
//变量的声明必须按照以下的格式：<存储限定符><类型><变量名>（attribute vec4 a_Position）；

//每个变量都具有一个存储地址，以便通过存储地址向变量传输数据。
//使用gl.gl.getAttribLocation()来获取attribute变量的地址。

//同族函数：
//WebGL函数命名规范：<基础函数名：vertexAttrib><参数个数：1，2，3，4><参数类型：f浮点数，i整数>
//gl.vertexAttrib1f(localhost, v0);第二三个分量将被设为0.0，第四个分量设为1.0
//gl.vertexAttrib2f(localhost, v0, v1);齐次坐标：变量赋值自动补全了第四分量：1.0
//gl.vertexAttrib3f(localhost, v0, v1, v2);
//gl.vertexAttrib4f(localhost, v0, v1, v2, v3);
//gl.vertexAttrib4fv();如果函数名后面跟着一个v，表示函数也可以接收数组作为参数