WebGL-二维平移

平移就是普通意义的“移动”物体。 用第一篇文章中的代码,你可以改变传递给 setRectangle 的值,移动矩形的位置。这里有个例子基于前一个例子。

首先我们来定义一些变量存储矩形的平移,宽,高和颜色。

然后定义一个方法重绘所有东西,我们可以在更新变换之后调用这个方法。

到目前为止还不错!但是想象一下如果对一个更复杂的图形做类似操作怎么办。

假设我们想绘制一个由六个三角形组成的 ‘F’ ,像这样:

接着当前的代码我们需要修改setRectangle,像这样:

你可能发现这样做可能并不好,如果我们想绘制一个含有成百上千个线条的几何图形, 将会有很复杂的代码。最重要的是,每次绘制JavaScript都要更新所有点。

这里有个简单的方式,上传几何体然后在着色器中进行平移。

这是新的着色器:

重构一下代码,首先我们只需要设置一次几何体。

然后我们只需要在绘制前更新u_translation为期望的平移量。

注意到setGeometry只调用了一次,它不在drawScene内部了。

现在当我们绘制时,WebGL几乎做了所有事情,我们做的仅仅是设置平移然后让它绘制, 即使我们的几何体有成千上万个点,主要的代码还是保持不变。