昨天学习了如果初始化着色器,费了半天劲,并且裤子都脱了,才绘制出一个点,还是个静止的点。我们前端要做就做交互,不能动态的交互的东西,恕我直言,都是辣鸡...好了不开玩笑了,开始让WebGL动起来了吧...动词大词...

无论什么方法,第一步都是获取 GLSL 中定义的变量的位置,方法就是从程序对象那里取得

var programObj = gl.createProgram();
... gl.linkProgram() & gl.useProgram();

var aVertexPosition = gl.getAttribLocation( programObj  ,'aVertexPosition');

这样就可以获取到 aVertexPosition 这个变量的位置了,然后可以利用这个变量位置操作 GLSL 中的变量了

方法一:

 gl.vertexAttrib3f(aVertexPosition, x, y , 0.0);

这种方法每次只能改变一个变量,如果想要画多个点就要改变一次 gl.drawArrays() 一次,并且我发现,凡是回调的调用 gl.drawArrays 整个的canvas都会刷新,不知道为什么,如果想要画非常复杂的 3D 图形怎么办呢,这种方法肯定不行,这就要用到缓冲区对象了,利用 Javascript 中的类型数组可以一次传入大量数据给缓冲区,然后再进行图形绘制

方法二:流程如图

enter image description here

当然流程稍微复杂,与着色器初始化那种环环相扣不一样,这个流程中很多调用看起来并没有什么关系,那么WebGL在开始渲染图形前到底做了些什么?暂时还不是很了解,不过这样就可以简化复杂数据的传入,而且还可以用同一个类型数组传入多种数据。

后面很多都要用到缓冲区对象。