[b]译序[/b] Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。 [b].简介[/b] 这是WebGL着色器教程的后半部分，如果你没看过前一篇，阅读这一篇教程可能会使你感到困惑，建议你翻阅前面的教程。 上一篇结束的时候，我们在屏幕中央画了一个好看的粉红色的球体。现在我要开始创建一些更加有意思的东西了。 在这一篇教程中，我们会先花点时间来加入一个动画循环，然后是顶点attributes变量和一个uniform变量。我们还要加一些varying变量，这样顶点着色器就可以向片元着色器传递信息了。最终的结果是哪个粉红色的球体会从顶部开始向两侧“点燃”，然后作有规律的运动。这有一点迷幻，但是会帮助你对着色器中的三种变量有更好的了解：他们互相联系，实现了整个集合体。当然我们会在Three.js的框架中做这些。 [b]1.模拟光照[/b] 让我们更新颜色吧，这样球体看起来就不会是个扁平晦暗的圆了。如果我们想看看Three.js是怎样处理光照的，我敢肯定你会发现这比我们需要的要复杂得多，所以我们先模拟光照吧。你应该浏览一下Three.js中那些奇妙的着色器，还有一些来自最近的一个 Chris Milk 和 Google, Rome 的WebGL项目。 回到着色器，我们要更新顶点着色器来向片元着色器传递顶点的法向量。利用一个varying变量：