webgl glsl
GLSL是什么?
-
GLSL是运行在GPU上的着色器语言
-
GLSL有自己的语法,跟js有些不同.
GLSL是一个强类型的语言,所以在写着器语言时,必须要用强类型,强类型,强类型,强类型
GLSL是着色器语言, WebGL的全部内容就是创建不同的着色器，向着色器提供数据然后调用gl.drawArrays 或 gl.drawElements 让WebGL调用当前顶点着色器处理每个顶点，
GLSL不存在传统意义上的变量,但有缓存,可以把缓存当变量, 先创建缓存,然后绑定绑存，然后就可以操作缓存了
下面通过一些问量来一步一步的分析.
let positionBuffer = gl.createBuffer();
返回了一个变量，能直接操作它吗？
console.log(positionBuffer)会报错.不能直接用,因为缓存是gpu上的.
怎么用呢？
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new TypeArray()); TypeArray是举例,用强类型数组
注:bindBuffer时,不能随便绑定,这些都是枚举值，有含义的。
gl.ARRAY_BUFFER一般用于顶点数据,
gl.ELEMENT_ARRAY_BUFFER一般用于索引数据
数存的数据是绑定了,但是着色器语言中有很多变量的,这些变量是数据的.
gl.vertexAttribPointer(postion, size, type, normalize, stride, offset);
当然这只是顶点数据,还有全局数据,全局数据是程序提供的，此处省略
给着色器里的变量提供数据后，就可开始画三角形了，为什么画三角形, 不解释。
这样一步一步来，也就初步的理解了glsl.
下面提供下上传数据的三部曲,第一步中location是不会变的,一般在初始化着色器语言的时候进行
1)gl.enableVertexAttribArray(colorLocation); // 告诉glsl,我们想为该属性提供数据
2)gl.bindBuffer(glARRAY_BUFFER, colorBuffer); // 这个命令是将缓冲绑定到 ARRAY_BUFFER 绑定点，它是WebGL内部的一个全局变量。
// 告诉颜色属性如何从colorBuffer中提取数据 (ARRAY_BUFFER)
var size = 4; // 每次迭代使用四个单位数据
var type = gl.UNSIGNED_BYTE; // 数据类型是8位的 UNSIGNED_BYTE 类型。
var normalize = true; // 标准化数据
var stride = 0; // 0 = 移动距离 * 单位距离长度sizeof(type)
var offset = 0; // 从缓冲的起始处开始
3)gl.vertexAttribPointer(
colorLocation, size, type, normalize, stride, offset)
这个命令告诉WebGL从 ARRAY_BUFFER 绑定点当前绑定的缓冲获取数据。 每个顶点有几个单位的数据(1 - 4)，单位数据类型是什么(BYTE, FLOAT, INT, UNSIGNED_SHORT, 等等...)
stride 是从一个数据到下一个数据要跳过多少位，
offset 是数据在缓冲的什么位置。
单位个数永远是 1 到 4 之间。
如果每个类型的数据都用一个缓冲存储，stride 和 offset 都是 0 。 对 stride 来说 0 表示 “用符合单位类型和单位个数的大小”。 对 offset 来说 0 表示从缓冲起始位置开始读取。
它们使用 0 以外的值时会复杂得多，虽然这样会取得一些性能能上的优势， 但是一般情况下并不值得，除非你想充分压榨WebGL的性能。
