webgl glsl

 GLSL是什么?

1. GLSL是运行在GPU上的着色器语言

2. 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的性能。