var canvas = document.getElementById('webgl');
var webgl = canvas.getContext('webgl'); // 获取webGL的context

// 清除背景并填充颜色
webgl.clearColor(0, 0, 0, 0.6);
webgl.clear(webgl.COLOR_BUFFER_BIT);

// 顶点着色器，主要用于描述顶点属性（大小，位置） GLSL ES语言
var VSHADER_SOURCE = 
`void main() {
	gl_Position = vec4(0.5, 0.5, 0, 1);
	gl_PointSize = 10.0;
}`;

// 片元着色器，决定片元的颜色等，GLSL ES语言
var FSHADER_SOURCE = 
`void main() {
	gl_FragColor = vec4(1, 0, 0, 1);
}`;

//初始化着色器，initShaders函数并非自带函数，需要调用createShader，compileShader等函数
// initShaders详见：https://github.com/MrZJD/webgl/blob/master/lib/base.js
initShaders( webgl, VSHADER_SOURCE, FSHADER_SOURCE)

//画点，0表示从第0个点开始绘制，1表示绘制1个点
webgl.drawArrays(webgl.POINTS, 0, 1);

// 顶点着色器程序
var VSHADER_SOURCE = 
`attribute vec4 a_Position; //声明attribute变量，存储限定符storage qualifier，必须声明成全局变量，从外部传入
attribute float a_PointSize;// 限定符 数据类型 变量名
void main() {
	gl_Position = a_Position;
	gl_PointSize = a_PointSize;
}`;

// 片元着色器程序
var FSHADER_SOURCE = 
`void main() {
	gl_FragColor = vec4(1, 0, 0, 1);
}`;

var canvas = document.getElementById('webgl');
var webgl = canvas.getContext('webgl');
initShaders( webgl, VSHADER_SOURCE, FSHADER_SOURCE)
// 获取attribute变量的地址
var a_Position = webgl.getAttribLocation(webgl.program, 'a_Position');
var a_PointSize = webgl.getAttribLocation(webgl.program, 'a_PointSize');

// 根据地址给attribute变量赋值
webgl.vertexAttrib3f(a_Position, 0.5, 0.5, 0.0); // 省略第四个参数，会默认赋值1.0
webgl.vertexAttrib1f(a_PointSize, 10.0);
// 还有vertexAttrib2f, vertexAttrib4f等函数
// 也可以用矢量版本：
// var position = new Float32Array([1.0, 2.0, 3.0, 1.0]);
// gl.vertextAttrib4fv(a_Position, position)

// 清空颜色缓冲区
webgl.clearColor(0, 0, 0, 0.6);
webgl.clear(webgl.COLOR_BUFFER_BIT);

// 画点
webgl.drawArrays(webgl.POINTS, 0, 1);