其实最开始接触3d我是惶恐，觉得3d这么高大上的东西，一点思路都没有，但计算机之所以是们一门伟大的产品就在于可以站在巨人的肩膀上奋力攀爬，只有在把你感觉根基不稳的时候才需要去了解底层原理。
我们知道越是底层的东西越是抽象，理解起来越是困难，所以作为入门并且作为一个前端，我选择了three.js这个框架来了解3d的成像原理。
我们先缕清这之间的联系，计算机图形学作为原理通过显卡GPU渲染实现，其中显卡的实现指令主要有2套实现框架
1，Microsoft 的Direct3D
2，Open GL
Direct3D拥有的Microsoft原罪属性注定它只能在Windows上运行，所以OpenGL成为了传播较广的一个。
然后大神们将OpenGL简化成是OpenGL ES并加上javascript使之成功移植到了web端。这也就是webgl的由来，又然后在webgl的基础上封装而来了three.js,，一个由javascript为工具在web端运行直接操作显卡的3d渲染框架。
封装了这一层又一层后，three.js的上手难度已经变的简单了许多，然而封装在过程中，暴露的api越来越简单功能也就越来越不灵活，想要写出那些api没有暴露的复杂特效就需要研究底层的框架。
Three.js之所以受欢迎是因为它提供了比较生活化的对象概念，提供了比较基础的封装好了的几何对象，对于复杂的模型也支持外部导入以及自定义着色器(shader)。
制作3d，首先，我们需要一个场景(Scene)，场景里面需要有我们要显示的物体(Mesh,Line)，然后还需要光源(Light)去照射物体,最后场景是无限大的，不可能去获取整个场景的信息，这个时候就需要摄像机(Camera)去取景获取一定范围内的信息，取得了需要显示的信息后就需要通过渲染器(renderer),把3d的场景信息投影在浏览器的2d窗口上，这样就形成了一帧的3d画面渲染，假如还需要动态的3d动画，那就需要利用requestAnimationFrame函数进行帧循环动画渲染，在GPU性能充足的情况下大概是60帧每秒，这样也可以利用人眼的视觉停留形成动画效果。
网友评论