如何在没有图形基础的情况下搭建WebGL数据可视化应用

Asterank.com 的开发者 Ian Webster 回顾了他建设这个用于展示太阳系小行星价值的视觉展示网站的历程，他是如何从一个对 3D 图形和 WebGL 完全不懂的门外汉到开发完成的。

 1. 选一个 WebGL 库

因为要处理大量的模型，因此选一个 WebGL 库应该是第一步。目前市面上有很多不同的库，很那说哪个是最好的。最后 Ian 选了 Three.js 因为它能够回滚到 HTML5 Canvas 2D 模式。

 2. 开始学习 Three.js

可以从基础教程开始看起，理解编程中要遇到的基本概念，比如场景、网格、材质、光照，以及如何通过循环渲染来制作动画效果。

Three.js 的官方示例对一些基础知识的学习有一定的帮助，但总的来说帮助不大。

 3. 填充知识库

Three.js 的文档非常稀缺，并且对于刚刚开始 3D 编程的人来说并不实用。它的官网文档实际上的主要作用是可以链接到关键类的源代码页面。这就进入了一个死循环 —— 实际上还是要去阅读和理解 Three.js 的源代码才可以。

目前 Three.js 的官网支持站点是 StackOverFlow 网站。在 mr.doob 决定把问答支持放到 StackOverFlow 之前，github 上也有不少问题和答案。

 4. 挑战和教训

① 轨道：这个问题是因为我要做的项目比较特殊，我阅读了大量的天文学书籍来理解如何正确的绘制行星轨道。

② 修改 TrackballControls 支持滚轮操作：这并不太难，只不过需要修改 Three.js 其中的源代码。另外记得要留意不同浏览器的兼容性。

③ 优化性能：还有很多浏览器和硬件配置交叉的机器不能很好的处理 WebGL 和 Canvas，因此要不断的优化性能。

④ 永远使用弧度制：这个不用多说，尤其是天文学方面的应用使用角度制时偶尔会发生错误。

 结论

终于可以不用 Java applet 写 3D 网页程序了！我会继续下去创作更多的科普教育类的应用。

最后，要说的是：其实在浏览器中写图形非常容易，你也应该试试！