3DWalker

• 链接：http://120.25.238.161/webGL/3DWalker.html

目录结构

• 所有添加或修改的源代码在src目录下。

开发环境

• Chrome + Html5 + JS

运行方法

• 打开服务器，通过本地服务器访问src目录下的3DWalker.html文件即可。

亮点

• 只用了一个shader，避免切换带来的性能影响；
• 代码比较清晰，重用率高；
• 对每个需要绘制的对象进行了很好地封装，避免反复创建、初始化buffer。
• 为贴图增加了光照，使得更加真实；
• 为整个场景所有模型增加了镜面反射的高亮效果；
• 对所用的对象都采用了phong shading，效果更好（这里我修改了objLoader.js的代码）；
• Mip Map防走样。

遇到的问题及解决

• 遇到的最主要的问题就是对加载的资源的是否完成判断上，尝试了很久，最后采用的方式如下：维护一个表示正在加载的资源的数目的整数值，在onload回调函数中，每加载完一个后将该值减小1。在渲染前不断地去检查这个值，知道该值为0时，表示资源加载完时才开始render。这里主要的问题是如何让加载与检查的工作同时进行又不会阻塞，我先调用了一次requestAnimationFrame来开始一个空的动画，但是这个动画里只进行检查，当检查到所有的资源加载完之后，cancel这个动画，然后开始进行真正的动画渲染。

缺陷

• Mip Map模糊问题。
• 未增加阴影

效果