<!--
* @Author: 苹果园dog
* @Date: 2020-11-16 23:33:54
* @LastEditTime: 2020-11-17 10:27:58
* @LastEditors: Please set LastEditors
* @Description: 以下内容从webgl编程指南抄录
我们的目标是，将位置信息从JavaScript程序传给顶点着色器，有两种方式可以做到这点：attribute变量和uniform变量。
使用哪一个变量取决于需传输 的数据本身，attribute变量传输的是那些与顶点相关的数据，
而uniform变量传输的是那些对于所有顶点都相同（或与顶点无关）的数据。本例将使用attribute变量来传输
顶点坐标，显然不同的顶点通常具有不同的坐标。
attribute变量是一种GLSL ES变量，被用来从外部向顶点着色器内传输数据，只有顶点着色器能使用它。
为了使用attribute变量，示例程序需包含以下步骤：
1、在顶点着色器中，声明attribute变量；
2、将attribute变量赋值给gl_Position变量；
3、向attribute变量传输数据。
我们在js中指定一个点的坐标，然后在该坐标画了一个点。
* @FilePath: \web\webgl\study\helloPoint2.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="main()">
<!--
如果不给 <canvas> 设置 widht、height 属性时，
则默认 width为300、height 为 150，单位是 px。
-->
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script>
//顶点着色器
var VSHADER_SOURCE = `
attribute vec4 a_Position;
void main(){
gl_Position=a_Position;
gl_PointSize=15.0;
}
`;
//片元着色器
var FSHADER_SOURCE = `
void main(){
gl_FragColor=vec4(1.0, 0.0, 0.0, 1.0);
}
`;
function main() {
//获取<canvas>元素
var canvas = document.getElementById('webgl');
//获取WebGL上下文
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('获取WebGL绘图上下文失败!');
return;
}
//初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('初始化着色器失败！');
return;
}
//获取attribute变量的存储位置
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('获取a_Position变量的存储位置失败！');
return;
}
//将顶点位置传给attribute变量
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
//设置canvas背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//清除canvas
gl.clear(gl.COLOR_BUFFER_BIT);
//绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
/*
* attribute vec4 a_Position;
* 在这一行中，关键词attribute被称为存储限定符（storage qualifier）,它表示接下来的变量是一个attribute变量，attribute变量必须声明
* 成全局变量，数据将从着色器外部传给该变量。变量的声明必须按照以下格式：
* <存储限定符><类型><变量名>
* attribute变量a_Position的类型是vec4。
* 我们使用辅助函数initShaders()在WebGL系统中建立了顶点着色器。
* 然后，WebGL就会对着色器进行解析，辨识出着色器具有的attribute变量，每个变量都具有一个存储地址，以便通过存储地址向变量传输数据。
* 比如，当你想要向顶点着色器的a_Position变量传输数据时，首先需要向WebGL系统请求该变量的存储地址。
* 我们使用gl.getAttribLocation()来获取attribute变量的地址。
* gl.vertexAttrib3f(a_Positon,0.0,0.0,0.0);
* 一旦将attribute变量的存储地址保存在js变量a_Position中，就需要使用该变量向着色器传入值
* 该函数的第一个参数是attribute变量的存储地址，第2，3，4个参数是三个浮点型数值，即x，y，z坐标值。函数被调用后，这三个值被一起传给
* 顶点着色器中的a_Position变量。
*/
}
</script>
</body>
</html>
