这是一个使用typescript编写的3D光栅化渲染器,核心渲染代码不超过1000行, 核心部分不会使用任何已有的图形引擎和任何硬件相关的接口。
大家可以使用这份代码进行图形学基础的学习, 也可以利用它自己写一些图形效果做一些调试。
目前支持的核心功能有
- 三角形光栅化
- 透视贴图
- 视锥裁剪
- 边缘剔除
- 深度缓冲
- 纹理双线性插值
- 2x2的MSAA
- 可灵活定制顶点着色/片元着色, 提供接口和vary插值列表
例子中支持的非核心功能:
- obj模型显示/png纹理读取
- 基本光照(blinn-phong)
- 通过鼠标缩放,旋转摄像机
后继计划:
- 支持切线空间的法线纹理
- 阴影
- mipmap
这个是一些渲染截图:
一. 运行
npm install
run
注意 : 运行依赖模块主要是electron + typescript
二. 修改ts代码后如何编译
执行tsc即可
三. 常见问题
- 为什么使用typescript, 而不是常用的c++?
typescript更容易上手, 毕竟是学习用途, 不是为了真正商用, 不需要太多考虑性能上的问题。
- 为什么不直接渲染出图片, 而是嵌入到网页上做实时渲染?
放到网页上做实时渲染确实更费事(需要把framebuffer当做贴图通过webgl的方式渲染到canvas上), 但是实时渲染可以方便做一些简单的人机交互(比如旋转摄像机)