/**
* 将任意一个像元色设置为粉红
*/
void main() {
gl_FragColor = vec4(1.0, // R
0.0, // G
1.0, // B
1.0); // A
}
这就是全部了。如果现在直接运行的话，你就可以在屏幕上看到一个“无光”的粉红色形体。不是很复杂，是吗？
在顶点着色器中，我们通过Three.js传入了一些uniforms变量。有两个4×4的矩阵uniforms变量：模型视图矩阵和投影矩阵。你并不需要太了解这两个矩阵是怎么工作的。简单地说，这两个矩阵描述了三维点坐标如何投影成为二维屏幕上的坐标。
事实上，我只介绍了这两段简短的代码段。Three.js在你自己的着色器代码前已经将它们加进来了，所以你不必担心。实话说，Three.js还加了很多东西在你的代码前面，比如光照数据、节点颜色和节点法向量等等。如果没有Three.js你要亲自创建并设置这些对象，真的。
6.使用着色器材质
复制代码 代码如下:
/**
* 假设我们可以使用JQuery
* 将着色器的代码文本从DOM中抽取出来
*/
var vShader = $('vertexshader');
var fShader = $('fragmentshader');
var shaderMaterial =
new THREE.ShaderMaterial({
vertexShader: vShader.text(),
fragmentShader: fShader.text()
});
从这儿开始，Three.js将会编译并运行你的着色器，将其连接在你创建的材质上，材质又依附于你创建的mesh上。它并没有变得比真的更容易。也许是这样吧，但我们在考虑浏览器3D编程，我想你应该预期，这个话题是有一定复杂性的。
我们还可以像着色器材质添加另外两种属性：uniforms和attributes。他们可以是向量、整数或者浮点数，但是如我之前所说，uniforms变量在计算所有点的过程中保持不变，所以它们更加可能是单一的值，而attributes变量是对每个顶点而言的，所以他们应当是数组。在一个mesh中，attribute变量和顶点应当是一一对应的。
7.小结
这篇教程就到这里了，实际上我已经讲得很多了，但是在许多方面我都只是一掠而过。在下一篇教程中我会提供一个复杂的着色器，通过它我将传入一些attributes变量和uniforms变量来做一些模拟光照效果。
我将这篇教程的源码打包了，你可以下载下来作为参考
您可能感兴趣的文章: