【造轮子 光栅化渲染器】如何只用一个画点的函数画出3D图像——javascript光栅化渲染器的实现

如果我们只有一个画像素点的接口

canvas.fillRect(x,y,1,1) //在屏幕的(x,y)处填充一个像素

我们能画出些什么？

演示地址：http://changjiuxiong.gitee.io/canvas3drenderer-nowebgl/demo/index.html#demo_gltf

源码地址：https://gitee.com/changjiuxiong/Canvas3DRenderer-noWebGL

成果图：

答案是：任何东西。（如果你有模型文件或者手撸模型的话）

一个最基本的光栅化渲染器要实现的功能有：

• 背面剔除（把背面朝向屏幕的三角形剔除掉）
• 三角形切割（把一个三角形切割成两个平底或平顶的三角形）
• 深度检测（去掉被遮住的像素）
• 像素填充（纹理坐标插值，纹理采样，填充像素）

后续更新各部分的原理和算法