剑英陪你玩转图形学(一)打通任督二脉

这是一个尝试的系列，突发奇想觉得有声音可能会更有趣，这个系列Blog都会出视频有声版。

这个系列主要是为了玩一玩代码。

我觉得呢，写程序是一件很有意思的事情，没有必要搞得那么苦大仇深。但是，却总有那么一些人、那么一些资料，非要把写代码搞成一件高山仰止的事情，搞成是非精英屌丝不可完成的任务。搞成是非要你上辈子就注定是个屌丝，这辈子投胎转世还是个屌丝才能够从事的职业。

简单的事情复杂化，具体的东西抽象化，抽象的东西再把它神化。这就是很多资料对你所做的事，他们，只是把你的大脑搞乱，然后让你觉得，只有成为屌丝，才能写好程序。

我想搞出一些不一样的声音。

视频地址（Youku）

大家好，我叫李剑英。 我姓李，又总是一副屌丝的样子，圈内人称李总。 不要百度搜索我的名字，你搜不到，我说的是朋友圈。

  

快速提高班

现在教大家一些快速提高自己业务（zhuangbi）水平的方法。

要提高自己的业务水平，第一个要诀是：忍。等到别人问你问题，不要主动去说。

 

问：图形学中什么最重要

标准答案：首先得轻叹一口气，注意轻叹一口气的时机非常重要，在思考两到三秒后（其实是故作姿态），然后叹一口气。

哎，学问中哪来的高低贵贱，你想要了解什么，你就问吧。

 

问：什么是Shader

标准答案：请注意，在回答这种问题的时候，仅仅叹气已经不能体现你的业务水平了。一定要微微抬起头，转向一个没有人的方向，盯着天花板或者天空（取决于你所在的环境），眼神空灵，表情空洞。

表现出一副若有所思，若有所悟的样子，停顿两三秒种之后，微微叹一口气。

哎，shader，不过是管线式渲染体系GPU中的异构子程。

 

问：那什么又是异构子程呢

答：异构与同构，乃是哲学中研究主客体关系的一种概念。(其实很简单，必须要扯上哲学，才能凸显出业务水平)

 

被人这样打破砂锅问到底，你会不会觉得快要破功了，那，跟着李总一起学点真东西吧。

什么是真东西

这个问题早有公论：

怎么学真东西

阿基米德说：给我一个支点，我就能撬动地球

卡马克说：给我一个像素，我就能弄一个3D引擎

李总说，一个像素也不用，我们现在就弄一个3D引擎

伟人们告诉我们，从零单排就是最好的方式。

从零单排

接下来是一段历史介绍，也就是通常所说的尿点。有事情的同学可以去忙了。

很久以前，有一个屌丝在浴缸里想出了密度这个概念，那时候连阿拉伯数字都还没有，他叫阿基米德。

不久以前，有一个屌丝在浴缸里没事就在想怎么弄出更好3D效果，那时候连GPU都还没有，他叫约翰卡马克。

现在，有一个屌丝，他没有浴缸，准备陪你一起从零单排3D引擎。现在连一行代码都没有，他叫李总。

 

很久以前，在3D图形硬件还没走走上舞台的时候，3D画面，需要卡马克这样的人在自己的软件中开发出3D渲染功能。

所谓渲染，就是突出描写，对画画来说，就是精加工。

卡马克手里的工具就是像素，他写代码把一个个像素画成了3D画面，今天我们叫这个模块：渲染引擎。

软件中自己实现了渲染引擎，软渲染，就是这个意思。那个时代，渲染就是指软渲染。

 

后来3DFX搞出了Voodoo，GPU才真的普及了，OpenGL、DirectX这一个如雷贯耳的东东才一个个出现，开创了3D硬件加速时代的乱世纷争。

 

直到Nvidia吃掉了3Dfx,打败Trident的TNT、S3的野人，ATI也打响了镭这个品牌，整个世界仿佛在A卡N卡的光辉下，忘却了渲染本来就是程序。

从此以后，一谈渲染，必定是A卡N卡的硬件加速渲染。而过去的那个渲染，就叫软渲染。

 

历史说到这里为止。

不积跬步，无以至千里；不积小流，无以成江海。

不学说话，唱不了歌；不学算数，解不了方程。

软渲染，非学不可

开始开发地球上最简陋的软渲染引擎

我们将不使用一个像素，在100行代码内，开发一个基础的渲染引擎。

首先，新建一个控制台项目，我们说过的，不用像素，控制台程序不能绘图。

96行，展示了主循环，建立了一个六个顶点组成的模型，每帧清除画面，并绘制模型，这就是一个3D引擎了。

运行起来是这样的。

3D引擎的本质就是在屏幕上画三角形，我们做到了，96行代s码。

在屏幕上画三角型就叫做光栅化，现在你已经可以深刻的研究，什么是光栅化。

光栅化就是根据三角形，画出屏幕上的一个个像素，我用的方法并不为高效，而只为清晰易懂。

我用了在三角形的AABB碰撞盒范围内按照字符（像素）进行扫描的方法，扫描时判断每个点在不在三角形内。

这里用了一种叫做同向法的方法来判断，这个专题不讨论这种对业务(zhuangbi)水平没有帮助的基础问题，如果有基础知识的空缺，需要自己搜索补充一下。

接下去，我们要让个模型动起来。

在DX OGL的固定管线设计中，设计了三个矩阵去对顶点进行T&L操作，变换与光照。

在可编程管线中，就一个矩阵，传递给VertexShader，去做变换与光照。

矩阵是可以摸得着，看的见的东西，他并不神秘，接着往下看。

我们也会做一个VertexShader，Shader也并不神秘，往下做你自己就明白了

先来休息一下，回顾一下，把这张图缩小一点，是不是三角形变的清晰起来了

你可以从这里取得源代码。

https://github.com/lightszero/BlockFun/tree/master/win/havefun

稍微研究一下，你会有一种感觉

3D引擎不过如此

空间变换

为了让模型动起来，我们要对模型做空间变换，听上去好高大上，其实空间就是坐标系。

控制台屏幕，左上角0,0。右下角80,25，这就是屏幕空间。

而模型为了方便使用，一般会以模型的中点为零点，向三方向扩展描述一个模型的坐标系。

比如

y轴向上，x轴向右制作模型，让模型的脚底作为零点，让模型的高度为10

至少需要这些条件才能描述清楚一个坐标系

而模型的零点在他自己的坐标系中永远是零，而当他要在其他坐标系中出现的时候，他需要一个位置。

若要问在控制台屏幕上，我们的模型零点在哪？这就是空间变换。

模型是由顶点描述的，只要变换了每一个顶点，就变换了整个模型。

矩阵

为了对顶点做变换，我们加入了矩阵,用了一个3X4矩阵，这是3D变换中最常用的矩阵，有些数学库不提供3X4矩阵，用4X4可以兼容。

M11 m12 m13 m14

M21 m22 m23 m24

M31 m32 m33 m34

初看矩阵，会觉得这密密麻麻的数字，高深莫测。其实他却是最简单质朴，土的掉渣的数学工具。

矩阵就好像计算器，我们只写了一个顶点变换函数，输入顶点 xyz 由m11到m13功能决定输出的x，在加上m14.

矩阵的变换方法，仔细一看是非常简单的，就是用乘法和加法建立了关系。

对于算法，计算并不重要，计算所带来的意义才重要。就像小学生考数学必须手算，后来，考试就可以用计算器。

只要我们理解了算法的意义所在，知道何时应用一个算法能产生怎样的效果。

剩下的事情，交给计算器去做吧。

简单质朴，土的掉渣的矩阵可以做什么呢？蔡依林最懂。

旋转、跳跃、我闭着眼。

把那个行列式填成这样

1 0 0 0

0 1 0 0

0 0 1 0

你可以试算一下变换函数，随便输入一个顶点，输出结果没有变化。三点成一面，输入一个三角形就不会有变化。输入一个模型，也不会有变化。

你可以从这里取得源代码

https://github.com/lightszero/BlockFun/tree/master/win/havefun1

然后运行一下

是不是很有趣呢，旋转跳跃我闭着眼，用你强大的空间想象（脑补）能力把它想象成师洋在跳舞娘，简直停不下来啊。

旋转是通过改行列式的值

M14 M24 是XY的偏移，如果你渐进的改编他们，就可以获得跳跃的效果

M11 M22 的修改可以产生缩放，我们也让他动起来，像眯眯眼一样。

旋转、跳跃、我闭着眼。

最终就变成了这样

矩阵建议你自己玩一玩，这里只要建立起矩阵能干什么，怎么做到的这个基本的概念。

知道矩阵的合成，剩下就可以交给那些数学库去完成了，没要必要什么都自己算。

搞图形，最重要的是空间想象（脑补）能力

Shader

Shader简单到什么程度呢，你如果读到这里，在havefun1的源码中早就窥透了Shader

所谓Shader，就是把顶点变换，和像素输出，两个步骤，抽象成为了两个函数，再配合一些参数。

Shader就是程序，还记得我们是在哪里破功的么

问：那什么又是异构子程呢

答：异构与同构，乃是哲学中研究主客体关系的一种概念。(其实很简单，必须要扯上哲学，才能凸显出业务水平)

我们这个不足200行的引擎中的Shader 是和引擎一样用C#编写的，同构子程序。

而GPU中执行的Shader要用专门的语言编写，hlsl cg glsl，和引擎编写的程序不同，异构子程序。

区别，仅仅就是这样。

经过这一次和李总一起玩代码，你再也不会在图形学业务方面破功（zhuangbi shibai）了。

祝大家业务（zhuangbi）水平蒸蒸日上，源源不绝。

两条毛腿肩上扛，再会。