软光栅
King.W.
这个作者很懒,什么都没留下…
展开
-
从零开始实现3D软光栅渲染器 (5-1) 3D渲染流水线(上)
什么是渲染流水线把大象放冰箱,需要几步?打开冰箱放入大象关上冰箱再放一个呢?打开冰箱放入大象关上冰箱这就是流水线。渲染流水线(装逼的就叫渲染管线),其实解决了2个问题:把3D物体显示到2D屏幕,3D空间的物体显示在屏幕上什么地方?物体该显示成什么样子?玻璃应该显示成透明的吧?放在玻璃后面的物体应该能看到吧?水泥地面,草地,墙面看起来应该不一样吧?总之,你显示的东...原创 2020-04-26 14:59:51 · 906 阅读 · 0 评论 -
从零开始实现3D软光栅渲染器 (4) 三维空间变换
世界是3D的,显示器是2D,将三维空间的物体变换到二维空间,再到最终屏幕上成像的过程,在图形学中叫做3D渲染流水线。这个过程着实有点复杂了,让我们慢慢来,本节我们先介绍一些基本的空间变换知识。这部分知识点非常重要,不管以后做游戏、仿真项目,还是其他图形应用,物体的空间变换是必须要理解的,因为很多实际的需求需要你自己分析,再去实现。就Unity来说吧,它已经把图形学中的矩阵、向量运算封装的相当易用...原创 2020-04-17 23:35:39 · 478 阅读 · 7 评论 -
从零开始实现3D软光栅渲染器 (3) 绘制直线
简介上一节中我们在canvas中绘制了点,这一节我们来绘制直线。计算机图形学中,绘制直线的算法很多,比如:DDA算法,中点画线算法…今天我们来讲一个经典的算法:Bresenham算法。经典之所以是经典,因为它既保证了绘制直线的效率,而且也能绘制圆弧、抛物线等。大家都知道,显示器屏幕像素是由像素组成的,我们看到画面的过程,其实就是每个像素填充不同的颜色罢了。简单说,不就是一个二维数组嘛,只不...原创 2020-04-05 21:19:12 · 448 阅读 · 0 评论 -
从零开始实现3D软光栅渲染器 (2) 绘制点
canvas简介 是HTML5新增的2D绘图标签,并为用户提供了一系列绘图命令,类似于windows中的GDI接口。我们的软渲染器就是要把图形绘制到canvas上,大家可以通过这个来了解下canvas的基本用法。在本教程中,我们仅使用canvas很少的几个接口,用到的时候我们再介绍。框架搭建我们首先在VS Code中建立如下目录结构:Device.js 用来封装在canvas的一些操作...原创 2020-03-21 14:30:27 · 483 阅读 · 0 评论 -
从零开始实现3D软光栅渲染器 (1) 简介
如何在2D屏幕上表示3D物体?这是学习3D编程必须要搞明白的事情。大家都知道,调用OpenGL的函数,给定三角形的3个顶点位置,颜色,就能在屏幕上画一个三角形,再加载一幅图片,就可以给这个三角形附上纹理,还能让这个三角形绕某个坐标轴发生旋转… 这些看似简单的问题的背后,实则是3D编程的内功。大家都知道,学武之人,拼的是内力,花里胡哨的招式的确很博人眼球,但是从长远来看,收益远没有修炼内力高。而一...原创 2020-03-20 23:52:36 · 2051 阅读 · 0 评论