以上就是我们如何计算镜面反射贡献的亮度，然后我们再来看看漫发射贡献的亮度。我们还是用之前的逻辑（这里我们用本地变量来储存归一化的法线向量）。

JavaScript Code复制内容到剪贴板

最后，我们将镜面反射的亮度、漫反射的亮度和环境光的颜色结合起来，计算出片元的总亮度。计算方法是我们之前使用的方法的扩展。

JavaScript Code复制内容到剪贴板

完成了以上工作，我们就可以使用与第13课中完全相同的代码来计算，基于当前纹理，每个片元的颜色。

JavaScript Code复制内容到剪贴板

到这里，片元着色器就工作完毕。

再往下看看，你会发现下一个与第13课不同的地方，位于initShaders函数中，这个函数又回到了更早之前的老样子，非常简单。其中只创建了一个program，然后理所当然的，为新增加的镜面高光初始化了一两个新的uniform地址。再往下一点，initTextures函数载入了地球纹理和电镀金属纹理，而不是什么月球和木质的板条箱了。再往下，在setMatrixUniforms函数中，和initShaders一样，又回到的原来的样子，只涉及到一个program，而不是多个。再往下，我们就到了本节课中另一个比较有趣的地方了。

我们不再使用initBuffers函数来创建包含不同的顶点属性用于定义茶壶外观的WebGL数组对象了，我们有了两个新朋友，handleLoadedTeapot和loadTeapot函数。代码的模式看起来很像第10课中载入世界的代码，但是还是值得再重新看一遍的。让我们先来看看loadTeapot函数（虽然在代码中它是其中第二个函数）。

JavaScript Code复制内容到剪贴板

代码的总体结构看起来和第10课很像，我们创建了一个新的XMLHttpRequest对象，然后用它来载入Teapot.json文件。因为是异步加载，所以我们还加入了一个回调函数，它会在载入文件过程中的不同阶段被触发，然后当readyState等于4时，也就是说文件被完全载入了，我们做一下相应的处理。

接下来发生的事情非常有意思。我们载入的文件是JSON格式的，基本上也就是说，它是已经用Javascript写好的，打开这个文件看看你就明白我说的意思了。文件描述了一个Javascript对象，其中的列表储存了组成茶壶所需的顶点位置、法线、纹理坐标和顶点索引。我们当然可以将这些代码直接写到index.html里面，但是当你构建更复杂的模型时，尤其是由不同的独立模型的物体组成的，你最好还是把它们都放到一个单独的文件中。

至于具体使用什么样的格式来储存模型，这是个很值得探讨的问题。你可以在任何你喜欢的软件中建模，这些软件可以将模型导出为不同的格式，比如3DsMax中的.obj文件。在未来，也许一些软件能够将模型导出为在Javascript中可以直接使用的格式，就好像我们这节课中用来储存茶壶模型的JSON文件。那下面，你应当将本教程仅仅作为一个示例，展示了如何载入一个预先设计好的JSON模型文件，而不是一个最好的典范。

JavaScript Code复制内容到剪贴板

这些代码里实在是没有什么好强调的东西。就是从载入的JSON对象中提取不同的列表，然后放到WebGL的数组对象中，然后推送到显卡端。在这之后，我们清空了HTML中的div标签，和第10课一样，它用来告诉用户模型正在载入中。

好了，模型载入完毕了，还有什么要说的嘛？好吧，还有drawScene函数。在确认模型已经载入之后，我们要在一个合适的角度来绘制茶壶，这里没什么新东西。看一下代码，确认你知道其中发生了什么（如果有任何不明白的地方，请留下评论），不过我想你应该找不出什么让你吃惊的地方。

这之后，animate函数里也有一些琐碎的改变，用来让茶壶旋转而不是什么月亮和箱子；webGLStart函数调用了loadTeapot而不是initBuffers。最后，当载入模型时，HTML里的div标签中会显示“Loading world…”，还有相应的CSS样式。当然，还新增加了一个文本域用来输入新的镜面高光的相关参数的。

好了，本节课到这里就结束了。你学会了如何实现镜面高光，如何载入一个储存在JSON文件中预先制作好的模型。下节课我们将会学习一个稍微有点高端的东西，这是一种不同的、更加有趣的使用纹理的方式——高光贴图。