研究了好几天基本的图形学,对于光栅化的大致过程有点了解了,很感谢网上的很多大牛的无私奉献,我就写一下这几天的总结,希望也能对网络上的知识做出一点点点的贡献。
屏幕有什么特点,无非是一排排的像素点,每个像素点只能用来显示一种颜色而已,所以可以理解为是一个表示颜色的二维数组。
如何在二维屏幕上显示3D世界,其实就是利用几何知识把3D坐标投影到2D坐标上。一个3D模型有很多顶点,把每个顶点投影到2D坐标上,保持原有的顶点连线,就是一个3D网格。具体的图形变换都是使用矩阵乘法来做的(有时也使用四元数表示旋转),具体的做法我就不说了。。
我们看到的3D世界也是通过颜色来辨别的,颜色就是纹理、材质、光照等叠加计算来的,不管怎么算,还是一个颜色而已。
所以我们要做的工作很明确了,就是修改一个初始化为背景色的二维颜色数组,使每个元素有各种颜色。
如何把这个二维颜色数组显示到我们的显示器上看一下呢,不同的平台有不同的做法,可以查看系统的API来了解。还可以把数组输出到一张图片(可以使用bmp、ppm等简单格式),使用图片浏览器打开查看。还可以使用html5的canvas绘制出来,使用浏览器查看。总之思路很简单。
我用js写了个html5的:https://github.com/Anti-Magic/3DSoftRenderer
其中的Device.js维护了一个二维颜色数组,Draw.js负责把颜色数组绘制到canvas上。除了Draw.js文件外,其他文件都是与html无关的,可以很容易的改写到其他平台上。