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

这是一个尝试的系列,突发奇想觉得有声音可能会更有趣,这个系列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)水平蒸蒸日上,源源不绝。

两条毛腿肩上扛,再会。

posted @ 2014-08-24 10:55  疯光无线  阅读(...)  评论(...编辑  收藏