开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:1623

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 10866|回复: 84

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

  [复制链接]  [移动端链接]
抢楼 抢楼 本帖为抢楼帖,欢迎抢楼! 
排名
9101
昨日变化
8

34

主题

181

帖子

1207

积分

Rank: 9Rank: 9Rank: 9

UID
18367
好友
40
蛮牛币
1977
威望
0
注册时间
2014-3-20
在线时间
121 小时
最后登录
2016-10-24

认证开发者

发表于 2015-8-24 17:06:34 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
本帖最后由 lights 于 2014-8-26 18:30 编辑

为节省大家时间,视频放在前面

这是一个尝试的系列,突发奇想觉得有声音可能会更有趣,这个系列Blog都会出视频有声版。
这个系列主要是为了玩一玩代码。
我觉得呢,写程序是一件很有意思的事情,没有必要搞得那么苦大仇深。但是,却总有那么一些人、那么一些资料,非要把写代码搞成一件高山仰止的事情,搞成是非精英屌丝不可完成的任务。搞成是非要你上辈子就注定是个屌丝,这辈子投胎转世还是个屌丝才能够从事的职业。
简单的事情复杂化,具体的东西抽象化,抽象的东西再把它神化。这就是很多资料对你所做的事,他们,只是把你的大脑搞乱,然后让你觉得,只有成为屌丝,才能写好程序。
我想搞出一些不一样的声音。
241633060492542.png
大家好,我叫李剑英。
我姓李,又总是一副屌丝的样子,圈内人称李总。
不要百度搜索我的名字,你搜不到,我说的是朋友圈。


快速提高班
现在教大家一些快速提高自己业务(zhuangbi)水平的方法。
要提高自己的业务水平,第一个要诀是:忍。等到别人问你问题,不要主动去说。

问:图形学中什么最重要
标准答案:首先得轻叹一口气,注意轻叹一口气的时机非常重要,在思考两到三秒后(其实是故作姿态),然后叹一口气。
哎,学问中哪来的高低贵贱,你想要了解什么,你就问吧。

问:什么是Shader
标准答案:请注意,在回答这种问题的时候,仅仅叹气已经不能体现你的业务水平了。一定要微微抬起头,转向一个没有人的方向,盯着天花板或者天空(取决于你所在的环境),眼神空灵,表情空洞。
表现出一副若有所思,若有所悟的样子,停顿两三秒种之后,微微叹一口气。
哎,shader,不过是管线式渲染体系GPU中的异构子程。

问:那什么又是异构子程呢
答:异构与同构,乃是哲学中研究主客体关系的一种概念。(其实很简单,必须要扯上哲学,才能凸显出业务水平)

被人这样打破砂锅问到底,你会不会觉得快要破功了,那,跟着李总一起学点真东西吧。
什么是真东西
这个问题早有公论:
241633079095142.png
怎么学真东西
241633068316712.png 阿基米德说:给我一个支点,我就能撬动地球
241633070811256.jpg 卡马克说:给我一个像素,我就能弄一个3D引擎
241633072218999.png 李总说,一个像素也不用,我们现在就弄一个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行代码内,开发一个基础的渲染引擎。
241633082063699.png

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

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


241633090039342.png
运行起来是这样的。
3D引擎的本质就是在屏幕上画三角形,我们做到了,96行代s码。
在屏幕上画三角型就叫做光栅化,现在你已经可以深刻的研究,什么是光栅化。

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

我用了在三角形的AABB碰撞盒范围内按照字符(像素)进行扫描的方法,扫描时判断每个点在不在三角形内。
这里用了一种叫做同向法的方法来判断,这个专题不讨论这种对业务(zhuangbi)水平没有帮助的基础问题,如果有基础知识的空缺,需要自己搜索补充一下。
接下去,我们要让个模型动起来。
在DX OGL的固定管线设计中,设计了三个矩阵去对顶点进行T&L操作,变换与光照。
在可编程管线中,就一个矩阵,传递给VertexShader,去做变换与光照。
矩阵是可以摸得着,看的见的东西,他并不神秘,接着往下看。
我们也会做一个VertexShader,Shader也并不神秘,往下做你自己就明白了
241633095962159.png
先来休息一下,回顾一下,把这张图缩小一点,是不是三角形变的清晰起来了
你可以从这里取得源代码。
https://github.com/lightszero/BlockFun/tree/master/win/havefun
稍微研究一下,你会有一种感觉
3D引擎不过如此
空间变换
为了让模型动起来,我们要对模型做空间变换,听上去好高大上,其实空间就是坐标系。
控制台屏幕,左上角0,0。右下角80,25,这就是屏幕空间。
而模型为了方便使用,一般会以模型的中点为零点,向三方向扩展描述一个模型的坐标系。
比如
y轴向上,x轴向右制作模型,让模型的脚底作为零点,让模型的高度为10
至少需要这些条件才能描述清楚一个坐标系
而模型的零点在他自己的坐标系中永远是零,而当他要在其他坐标系中出现的时候,他需要一个位置。
若要问在控制台屏幕上,我们的模型零点在哪?这就是空间变换。
模型是由顶点描述的,只要变换了每一个顶点,就变换了整个模型。
矩阵
241633098622473.png



为了对顶点做变换,我们加入了矩阵,用了一个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
然后运行一下
241635262531473.gif

是不是很有趣呢,旋转跳跃我闭着眼,用你强大的空间想象(脑补)能力把它想象成师洋在跳舞娘,简直停不下来啊。
旋转是通过改行列式的值
241633102681531.png

M14 M24 是XY的偏移,如果你渐进的改编他们,就可以获得跳跃的效果
M11 M22 的修改可以产生缩放,我们也让他动起来,像眯眯眼一样。
旋转、跳跃、我闭着眼。
最终就变成了这样
241633104711060.png

矩阵建议你自己玩一玩,这里只要建立起矩阵能干什么,怎么做到的这个基本的概念。
知道矩阵的合成,剩下就可以交给那些数学库去完成了,没要必要什么都自己算。
搞图形,最重要的是空间想象(脑补)能力
Shader
Shader简单到什么程度呢,你如果读到这里,在havefun1的源码中早就窥透了Shader
241633107688616.png

所谓Shader,就是把顶点变换,和像素输出,两个步骤,抽象成为了两个函数,再配合一些参数。
Shader就是程序,还记得我们是在哪里破功的么
问:那什么又是异构子程呢
答:异构与同构,乃是哲学中研究主客体关系的一种概念。(其实很简单,必须要扯上哲学,才能凸显出业务水平)
我们这个不足200行的引擎中的Shader 是和引擎一样用C#编写的,同构子程序。
而GPU中执行的Shader要用专门的语言编写,hlsl cg glsl,和引擎编写的程序不同,异构子程序。
区别,仅仅就是这样。



经过这一次和李总一起玩代码,你再也不会在图形学业务方面破功(zhuangbi shibai)了。
祝大家业务(zhuangbi)水平蒸蒸日上,源源不绝。
两条毛腿肩上扛,再会。

点评

赞!  发表于 2014-9-9 15:40

评分

参与人数 24蛮牛币 +50 鲜花 +73 收起 理由
sveqtuerfh + 2 很给力!
yhy137084 + 5 很给力!
lj5611302 + 2 赞一个!
mishimumu + 2 神马都是浮云
sc12131415 + 2 赞一个!
北极 + 2 再赞一个……
glight2000 + 2 很给力!
冰糖葫芦 + 5 很给力!
大脚丫 + 5 赞一个!
fishyjr + 2
kaipau + 2 赞一个!
卒偶 + 2 哈哈哈哈哈两条毛腿肩上扛!
黑翼∮天使 + 5 赞一个!
LiuHanxu + 2 很给力!
ykl0617 + 5
li810954821 + 2 赞一个!
lxy2013 + 5 赞一个!
ldragon + 5 赞一个!
tinyfog + 2 太强大了,32个赞!
jscstc007 + 2 赞一个!

查看全部评分

本帖被以下淘专辑推荐:


回复

使用道具 举报

6蛮牛粉丝
1353/1500
排名
708
昨日变化
1

2

主题

231

帖子

1353

积分

Rank: 6Rank: 6Rank: 6

UID
3935
好友
1
蛮牛币
3118
威望
0
注册时间
2013-9-16
在线时间
190 小时
最后登录
2017-1-11

社区QQ达人

发表于 2015-8-24 18:14:34 | 显示全部楼层
支持李总,呜哈哈!
[发帖际遇]: 一个袋子砸在了 nianhua2008 头上,nianhua2008 赚了 1 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

排名
827
昨日变化
1

6

主题

285

帖子

1530

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
19444
好友
1
蛮牛币
3466
威望
0
注册时间
2014-3-29
在线时间
373 小时
最后登录
2017-3-23
发表于 2015-8-25 11:57:29 | 显示全部楼层
哇塞,牛人,能给个博客时时瞻仰不?

回复

使用道具 举报

5熟悉之中
900/1000
排名
1923
昨日变化
3

0

主题

180

帖子

900

积分

Rank: 5Rank: 5

UID
24721
好友
0
蛮牛币
1143
威望
0
注册时间
2014-5-12
在线时间
222 小时
最后登录
2016-4-8
QQ
发表于 2015-8-25 12:08:54 | 显示全部楼层
牛逼,跪拜,不仅仅业务牛逼,文章也是吊炸天

回复

使用道具 举报

排名
1032
昨日变化
1

35

主题

329

帖子

1542

积分

Rank: 9Rank: 9Rank: 9

UID
54
好友
22
蛮牛币
3252
威望
30
注册时间
2013-5-29
在线时间
372 小时
最后登录
2016-11-10

社区QQ达人

QQ
发表于 2015-8-25 16:31:14 | 显示全部楼层
怒给32个赞哇! 写的很清晰易懂 还很有趣
[发帖际遇]: 繁华盡落. 发帖时在路边捡到 1 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

回复

使用道具 举报

7日久生情
3103/5000
排名
1630
昨日变化
1

75

主题

475

帖子

3103

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
3573
好友
72
蛮牛币
16213
威望
0
注册时间
2013-9-10
在线时间
506 小时
最后登录
2017-3-11

社区QQ达人游戏蛮牛QQ群会员蛮牛哥活力之星

QQ
发表于 2015-8-25 17:58:57 | 显示全部楼层
怒赞!!!~向李总学习!

Ayanami Rei
回复

使用道具 举报

4四处流浪
428/500
排名
3765
昨日变化
4

0

主题

53

帖子

428

积分

Rank: 4

UID
35683
好友
0
蛮牛币
520
威望
0
注册时间
2014-7-22
在线时间
117 小时
最后登录
2017-3-12
发表于 2015-8-25 18:47:24 | 显示全部楼层
很强大{:90:}{:90:}{:90:}{:90:}{:90:}{:90:}{:90:}{:90:}

回复

使用道具 举报

排名
1573
昨日变化
2

18

主题

445

帖子

2196

积分

Rank: 9Rank: 9Rank: 9

UID
31561
好友
47
蛮牛币
118
威望
0
注册时间
2014-6-27
在线时间
381 小时
最后登录
2017-1-24

七夕浪漫情人认证开发者

QQ
发表于 2015-8-26 10:34:15 | 显示全部楼层
李总,好NB。。一直关注中。。

回复

使用道具 举报

2初来乍到
138/150
排名
10324
昨日变化
8

0

主题

58

帖子

138

积分

Rank: 2Rank: 2

UID
40963
好友
0
蛮牛币
107
威望
0
注册时间
2014-8-20
在线时间
24 小时
最后登录
2017-1-3
发表于 2015-8-26 10:51:39 | 显示全部楼层
1992年7月SGI发布OpenGL 1.0;1995年11月6日,第一块voodoo卡问世

回复

使用道具 举报

排名
9101
昨日变化
8

34

主题

181

帖子

1207

积分

Rank: 9Rank: 9Rank: 9

UID
18367
好友
40
蛮牛币
1977
威望
0
注册时间
2014-3-20
在线时间
121 小时
最后登录
2016-10-24

认证开发者

 楼主| 发表于 2015-8-26 10:54:48 | 显示全部楼层
pengchw 发表于 2014-8-26 10:51
1992年7月SGI发布OpenGL 1.0;1995年11月6日,第一块voodoo卡问世

嗯,很好很强大,被你发现了。干的漂亮

回复

使用道具 举报

排名
797
昨日变化
3

5

主题

159

帖子

2002

积分

Rank: 9Rank: 9Rank: 9

UID
25769
好友
20
蛮牛币
3062
威望
0
注册时间
2014-5-19
在线时间
610 小时
最后登录
2017-3-23

专栏作家

发表于 2015-8-26 11:04:48 | 显示全部楼层
李总好,学习学习~

回复

使用道具 举报

5熟悉之中
904/1000
排名
1334
昨日变化
1

0

主题

69

帖子

904

积分

Rank: 5Rank: 5

UID
12059
好友
0
蛮牛币
1977
威望
0
注册时间
2014-1-8
在线时间
187 小时
最后登录
2017-2-21
发表于 2015-8-26 11:05:12 | 显示全部楼层
持续关注 最近看到的最棒的文章了 喜欢这种通俗易懂深入浅出的东西

回复

使用道具 举报

2初来乍到
138/150
排名
10324
昨日变化
8

0

主题

58

帖子

138

积分

Rank: 2Rank: 2

UID
40963
好友
0
蛮牛币
107
威望
0
注册时间
2014-8-20
在线时间
24 小时
最后登录
2017-1-3
发表于 2015-8-26 11:06:42 | 显示全部楼层
lights 发表于 2014-8-26 10:54
嗯,很好很强大,被你发现了。干的漂亮

写的很好,有深入浅出的感觉,赞一个

回复

使用道具 举报

7日久生情
2164/5000
排名
408
昨日变化
2

2

主题

250

帖子

2164

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
38772
好友
8
蛮牛币
1192
威望
0
注册时间
2014-8-8
在线时间
754 小时
最后登录
2017-3-23
QQ
发表于 2015-8-26 11:23:28 | 显示全部楼层
{:90:}{:90:}{:90:}{:90:}{:90:}{:90:}{:90:}{:90:}{:90:}

回复

使用道具 举报

7日久生情
2239/5000
排名
491
昨日变化
2

9

主题

595

帖子

2239

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
11224
好友
5
蛮牛币
4239
威望
0
注册时间
2013-12-26
在线时间
556 小时
最后登录
2017-3-9

VIP

发表于 2015-8-26 11:33:08 | 显示全部楼层
很好很强大啊     

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表