THREE.JS入门教程(2)着色器-上

2024-05-06 14:19:51

字体：大中小

来源：转载

供稿：网友

译序
Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。

0.简介
之前我已经给出了一篇《开始使用Three.js》。如果你还没有读过，你可能需要去读一下，本文的基础是在那一篇教程的基础上完成的。

我想讨论一下着色器。在Three.js帮助你免去了很多麻烦之前，原生WebGL就很优秀了。有的时候，你也许会想要完成一些特定的效果，或者想对呈现在你的屏幕上的东西钻研得更深入一些，那么着色器一定会进入你的视野。如果你像我一样，你也同样希望实现一些比上一篇教程中的基础更加有意思的东西。这篇教程中，我会讲解Three.js的基础，这些基础实际上为我们做了很多枯燥的工作。
在开始之前我还要说，这篇教程会有相当多的篇幅在解释着色器的代码，之后会有一篇教程会在着色器代码的基础上前进一点，利用着色器去做点什么。这是因为着色器shaders第一眼看上去并不易懂，需要一些解释。
1.两种着色器
WebGL没有固定的渲染管线，你无法直接使用一个黑盒子式的着色器（译者注：上个世纪的显卡基本都只支持固定渲染管线）；WebGL提供的是可编程的管线，这种方式更强大但也更难理解和使用。长话短说，可编程渲染管线意味着编写程序的人要自己负责获取顶点并将它绘制在屏幕上了。着色器是渲染管线的一部分，有两种着色器：
1.顶点着色器
2.片元着色器
你应当知道的是，这两种着色器都完全运行在显卡的GPU上，我们将需要它们处理的数据从CPU上卸下，装到GPU上，减轻了CPU的复旦。现代的GPU对着色器需要的调用的运算类型都做了大幅优化，这样做很值得。
2.顶点着色器
基元形状，比如一个球体，是由顶点构成的，是吧？顶点着色器被依次传入这些顶点中的一个顶点，然后处理它。如何处理每个顶点是可以自由定制的，但顶点着色器有一个必做的事，就是为一个名为 gl_Position 的变量赋值，该变量是一个4维数组，表示该顶点最终在屏幕上的位置。这本身是个有意思的过程，因为我们实际上在谈论如何将一个三维坐标（一个具有x、y、z值得顶点）转化为，或者说投影到二维的屏幕上。谢天谢地，要是我们使用Three.js之类的工具，我们能够如此方便地访问到 gl_Position 。
3.片元着色器
现在我们有包含顶点的三维物体了，现在要将物体投影到二维屏幕上了，但颜色哪里去了？纹理和光照呢？这正是片元着色器要处理的。
和顶点着色器类似，片元着色器有一项必须完成的任务：设置或消除变量 gl_FragColor ，另一个四维浮点变量，也就是片元点最终的颜色。什么是片元？想象一个具有三个顶点的三角形，片元就是经过这三个顶点计算后的，所有在三角形内部的点。因此，片元值由顶点的值内插生成。如果一个顶点的颜色是红色，相邻顶点的颜色是蓝色，那么我们可以观测到颜色从红色顶点附近渐变，由红色变成紫色，最终在蓝色顶点附近变成蓝色。

上一篇：js修改input的type属性及浏览器兼容问题探讨与解决

下一篇：重构Javascript代码示例(重构前后对比)