42 vPosition
让我们再来看看Rm。这里原本应该是很麻烦的，但幸好我们有一个GLSL函数reflect，这就方便多了。这个函数是这样定义的：reflect (I, N)
其中I是入射向量，N是物体表面朝向，函数返回值是反射方向。
入射向量就是光线照在物体表面上的入射方向，也就是从片元到光线的方向的反方向，而片元到光线的方向我们已经有了，储存在lightDirection中。N，也就是物体表面朝向，实际上就是法线，我们也已经计算出了。这样，我们就可以很轻松的计算出反射方向。
43 lightDirection, normal);
好了，万事俱备，最后一步非常简单。
45 46 specularLightWeighting reflectionDirectionuMaterialShininess
以上就是我们如何计算镜面反射贡献的亮度，然后我们再来看看漫发射贡献的亮度。我们还是用之前的逻辑（这里我们用本地变量来储存归一化的法线向量）。
48 normal
最后，我们将镜面反射的亮度、漫反射的亮度和环境光的颜色结合起来，计算出片元的总亮度。计算方法是我们之前使用的方法的扩展。
49 50 51 52 lightWeighting = uAmbientColor + uPointLightingSpecularColor * specularLightWeighting + uPointLightingDiffuseColor * diffuseLightWeighting; }
完成了以上工作，我们就可以使用与第13课中完全相同的代码来计算，基于当前纹理，每个片元的颜色。
54 55 56 57 58 59 60 61 uUseTextures) { fragmentColor uSamplervTextureCoordvTextureCoordfragmentColor fragmentColorlightWeighting
到这里，片元着色器就工作完毕。再往下看看，你会发现下一个与第13课不同的地方，位于initShaders函数中，这个函数又回到了更早之前的老样子，非常简单。其中只创建了一个program，然后理所当然的，为新增加的镜面高光初始化了一两个新的uniform地址。再往下一点，initTextures函数载入了地球纹理和电镀金属纹理，而不是什么月球和木质的板条箱了。再往下，在setMatrixUniforms函数中，和initShaders一样，又回到的原来的样子，只涉及到一个program，而不是多个。再往下，我们就到了本节课中另一个比较有趣的地方了。
我们不再使用initBuffers函数来创建包含不同的顶点属性用于定义茶壶外观的WebGL数组对象了，我们有了两个新朋友，handleLoadedTeapot和loadTeapot函数。代码的模式看起来很像第10课中载入世界的代码，但是还是值得再重新看一遍的。让我们先来看看loadTeapot函数（虽然在代码中它是其中第二个函数）。
284 285 286 287 288 289 290 291 292 293 request request.request.request.handleLoadedTeapotrequest.
代码的总体结构看起来和第10课很像，我们创建了一个新的XMLHttpRequest对象，然后用它来载入Teapot.json文件。因为是异步加载，所以我们还加入了一个回调函数，它会在载入文件过程中的不同阶段被触发，然后当readyState等于4时，也就是说文件被完全载入了，我们做一下相应的处理。接下来发生的事情非常有意思。我们载入的文件是JSON格式的，基本上也就是说，它是已经用Javascript写好的，打开这个文件看看你就明白我说的意思了。文件描述了一个Javascript对象，其中的列表储存了组成茶壶所需的顶点位置、法线、纹理坐标和顶点索引。我们当然可以将这些代码直接写到index.html里面，但是当你构建更复杂的模型时，尤其是由不同的独立模型的物体组成的，你最好还是把它们都放到一个单独的文件中。
至于具体使用什么样的格式来储存模型，这是个很值得探讨的问题。你可以在任何你喜欢的软件中建模，这些软件可以将模型导出为不同的格式，比如3DsMax中的.obj文件。在未来，也许一些软件能够将模型导出为在Javascript中可以直接使用的格式，就好像我们这节课中用来储存茶壶模型的JSON文件。那下面，你应当将本教程仅仅作为一个示例，展示了如何载入一个预先设计好的JSON模型文件，而不是一个最好的典范。
250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 teapotVertexTextureCoordBuffer; var teapotVertexIndexBuffer; function handleLoadedTeapot(teapotData) { teapotVertexNormalBuffer gl.teapotVertexNormalBuffer); gl.Float32Arraygl.teapotVertexNormalBuffer.teapotVertexNormalBuffer. teapotVertexTextureCoordBuffer gl.teapotVertexTextureCoordBuffer); gl.Float32Arraygl.teapotVertexTextureCoordBuffer.teapotVertexTextureCoordBuffer. teapotVertexPositionBuffer gl.teapotVertexPositionBuffer); gl.Float32Arraygl.teapotVertexPositionBuffer.teapotVertexPositionBuffer. teapotVertexIndexBuffer gl.teapotVertexIndexBuffer); gl.Uint16Arraygl.teapotVertexIndexBuffer.teapotVertexIndexBuffer. document..
这些代码里实在是没有什么好强调的东西。就是从载入的JSON对象中提取不同的列表，然后放到WebGL的数组对象中，然后推送到显卡端。在这之后，我们清空了HTML中的div标签，和第10课一样，它用来告诉用户模型正在载入中。好了，模型载入完毕了，还有什么要说的嘛？好吧，还有drawScene函数。在确认模型已经载入之后，我们要在一个合适的角度来绘制茶壶，这里没什么新东西。看一下代码，确认你知道其中发生了什么（如果有任何不明白的地方，请留下评论），不过我想你应该找不出什么让你吃惊的地方。
这之后，animate函数里也有一些琐碎的改变，用来让茶壶旋转而不是什么月亮和箱子；webGLStart函数调用了loadTeapot而不是initBuffers。最后，当载入模型时，HTML里的div标签中会显示“Loading world…”，还有相应的CSS样式。当然，还新增加了一个文本域用来输入新的镜面高光的相关参数的。
好了，本节课到这里就结束了。你学会了如何实现镜面高光，如何载入一个储存在JSON文件中预先制作好的模型。下节课我们将会学习一个稍微有点高端的东西，这是一种不同的、更加有趣的使用纹理的方式——高光贴图。
相关文章
精彩导读
热门资讯
关注我们
