WebGL关于着色器传值的几种方式总结

Posted 2022-02-26 hpugisers

最近两周都在看WebGL，至于为什么要看WebGL？？?我是想看Cesium源码，发现要想看懂Cesium的源码。需要WebGL知识储备，因为Cesium是基于WebGL开发的三维api封装，但是如果想完全弄懂Cesium,仅靠学习WebGL是无法做到的，需要了解OpenGL、计算机图形学、数字地球等。关于webgis发展认为未来三维GIS应该比较火，二维方面的发展已经相当成熟了，虽然三维现在发展也不错。但是和二维的比还差点意思，说的有点多了，关于WebGL我推荐《WebGL编程指南》这本书，对于入门WebGL这本书可以说做的非常。每个函数参数都给你解释的明明白白，其中也穿插一些GLSLES、线性代数、向量一些知识，可以说我觉得WebGL初级必备。下面讲单个值传入和多个值的传值：

一、三个变量限定词的概念
1、Attribute
用途：传输那些和顶点数据有关的数据（例如，顶点位置、法向量、顶点颜色<每个顶点都对应一个颜色>）
2、uniform
用途：传输那些对于所有顶点都相同（或者与顶点无关数据）=》例如：旋转、平移、缩放的矩阵，每个顶点位置都要用到同样的矩阵来获取变换的位置，对于每一个顶点该矩阵都一样，或者光线的颜色，压根和顶点没有关系
3、varying
用途：从顶点着色器，像片源着色器传递数据 。例如：纹理坐标等，一般通过attribute传给varying
以上三个变量限定词都是全局属性。
二、单值传入（分别以顶点、入射光颜色）
（attribute 传值）
1、声明变量

//顶点着色器代码
var VSHADER_SOURCE = 
  'attribute vec4 a_Position;\\n' + // attribute variable
  'void main() \\n' +
  '  gl_Position = a_Position;\\n' +
  '  gl_PointSize = 10.0;\\n' +
  '\\n

2、获取attribute变量存储地址

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

3、将顶点传给attribute变量（vertexAttrib3f为组函数）

gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

(uniform 传值)
1、声明变量

'uniform vec3 u_LightColor;\\n'

2、获取uniform变量存储地址

var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');

3、将入射光颜色传给uniform（这里uniform3f也是组函数）

gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);

（varying 传值）

三、多值传入
（attribute 传值）
1、声明变量

'attribute vec4 a_Position;\\n' 

2、创建缓冲区对象

var vertexBuffer = gl.createBuffer();

3、绑定缓冲区对象

 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

4、将数据写入缓冲区对象

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

5、获取attribute变量存储地址

 var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

6、将缓冲区对象分配给attribute变量

gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

7、开启attribute变量

gl.enableVertexAttribArray(a_Position);

(uniform 传值)
将第六步改成下面代码，第七步去掉即可

 gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix.elements);