天天看点

【造轮子 光栅化渲染器】如何只用一个画点的函数画出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

成果图:

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

答案是:任何东西。(如果你有模型文件或者手撸模型的话)

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

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

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

继续阅读