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

扫一扫,访问微社区

开发者专栏

关注:1623

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

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

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

[李剑英] 剑英陪你玩转图形学2

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

34

主题

181

帖子

1207

积分

Rank: 9Rank: 9Rank: 9

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

认证开发者

发表于 2015-9-5 14:08:21 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 admin 于 2014-9-5 15:28 编辑

图片1.png 今天的主题是颜色 图片2.jpg 开篇废话
今天看到蛮牛把干货区放上了主页,居然还能看到我的帖子,让我很不好意思。
各位同学对不起,我来晚了。
今天的李总是因为姓李,又总是迟到,所以叫做李总。
今天还是讲图形学,为人不识武藤....,咳咳,最近好像扫黄,不能说这个,大家都知道,关键是不搞软渲染,你就枉然了。软渲染我们上次已经玩过了,知道所以然,了解渲染是怎么一件事,目标就已经达到了。
渲染这条路上还有很多东西,今天我们到unity3d里面去玩。图形相关要聊的事情太多了,从头讲到做一个引擎出来,估计这个系列以后你可以和孩子一起看,我们用unity3d这个引擎,在他的基础上再继续去讲图形,还赶得上制造下一代。
首先开篇之前,先来检查一下作业。
请跟我一起问自己几个问题
1. 怎么从模型到像素,我大概理解了吗?
2. 关于顶点和矩阵,我真的知其所以然了吗?
3. 空间与变换我理解了吗?
如果这几个问题还存在疑问,我建议你还是回到第一弹去再玩一遍,我不会告诉你所有的答案,但是我提供给你所有的关键字,你得自己补补课了。
记住,我们是一个高端业务(zhuangbi)技巧系列,我们理清楚关键思路,基础还得自己补。

快速提高班

现在教大家一些快速提高自己业务(zhuangbi)水平的方法。
要提高自己的业务水平,第二个要诀是:持。
持这个概念,没有忍那么好理解,你可以把他理解为选择,你要选择那些你有把握的地方去回答。
一旦出口,就是准确的。
这次不用模拟问答,因为你已经不会破功( zhuangbi shibai)了
今天使用,我先告诉你一些Unity的小技巧,以后体现业务(zhuangbi)水平用得着。
首先Unity可以简单的用两句话讲清楚
图片3.png    图片4.png
1.这个Hierarchy面板,他体现的是场景管理中的场景图概念。如果有必要,记住他的英文SceneGraph
场景图是什么呢?说起来也很简单,就是把场景中的元素,以树的形式组织起来。看上面第二张图,什么都不用说了
2.场景图中的节点,在Unity中称为GameObjectGameObject上面可以挂接各种各样的Component
Unity主要的开发思想便是通过自定义脚本组件来进行开发
好了,Unity3D是怎么回事呢,Unity这玩意就是操作场景图,场景图节点上是一个组件模型,组件可以自定义脚本来编写。
记住这个,你也可以两句话把Unity3D讲透

但是,我们在这里主要是讲图形光透是不行的我们还得分析Unity3D的渲染设计
Unity3D的渲染设计呢,在顶点这个层面上是非常传统的三矩阵设计。
DirectX OpenGL 在固定管线时代就一直沿用这个设计,也是图形学里面搞了几十年的经典设计。
三矩阵是
世界矩阵、视矩阵、投影矩阵。
世界矩阵,就是表达模型在世界空间中的具体位置。对应到unity结构就是Transform. localToWorldMatrix.
由于场景图是有父子关系的,子物体的localToWorldMatrix,是子物体的localMatrix*父物体的worldMatrix得到。
Unity并没有直接提供localMatrix的结构,而是由一组localPositon localScale localRotate localRuleAngle 来描述
总之他是表示位置的
视矩阵,决定摄像机的位置和方向,最后能看到什么东西。
投影矩阵,决定摄像机的视角,远近裁剪面这些东西,视矩阵和投影矩阵都有摄像机的位置和参数来决定。
这三个矩阵最终被合成为一个,共同决定顶点出现在屏幕上的位置。

好了,提高到这里就可以了,今天我们不深入这个话题
计算机的颜色

今天专门来讲计算机的颜色,这个问题又浅又深,听我慢慢道来

RGB模型
图片5.png
R=Red,G=Green,B=Blue
三原色,这个东西大家都很熟悉,rgb模型是用亮度来表示的
0表示完全黑,1表示完全亮。
0,0,0 是黑色
1,1,1 是白色
0.5,0.5,0.5是灰色
0 和 1, 0表示没有,1 表示全部,这个表示法在计算机图形这块到处都是,你会慢慢体会到。

索引色,高彩色,真彩色
在早期的计算机处理能力还很低的时候,同屏幕显示很多颜色很困难,比如小霸王,只能显示16色。后来机能好一些了,可以显示256种颜色了。
图片6.jpg
16色效果
图片7.jpg
256色效果
在这个阶段都有调色板的设计,因为一个像素点就用了一个字节来表示,这个字节表示用的是第几种颜色。另外有一张色表,记录第几种颜色具体是什么颜色。时至今日,调色板依然健在,因为调色板具有一个很有趣的特性,一些游戏依然在使用。就是不改变图片,仅改变色表,就能产生不同的效果。
比如街霸2里面的可以选出不同颜色的角色,都是改调色板的结果。
图片8.jpg
为何如此吝啬,一个像素只用一个字节存?
试想盖子大神的名言,个人电脑只要640k内存就够了。可是一张1024 768的图片,256调色板,一个像素一字节,640k都放不下。时代在进步,盖子大神遥想当年,怕也得俨然一笑。
那个时代机能各方面都很捉襟见肘。小霸王的分辨率是256 240,只能同时使用16种颜色。后来进化到256色的机器本质还是调色板,原理一样。

后来机能提高到了一个新的高度。允许用更多的内存,更高的发色数。就产生了15bit颜色 16bit高彩色,24bit真彩色,30bit颜色等等。其中15bit是rgb各用5bit表示0-1怎么用5bit表示呢?5bit的最小值0表示0,5bit的最大值31表示1
颜色的表示法都是一样的,用这种表示法可以用任意位长表示rgb颜色。
15bit颜色就是 313131 为白色
24bit颜色就是 255255255 为白色,24bit表示最为常用,所以很多小伙伴可能都比较熟悉这个255
30bit颜色就是 102310231023为白色。
而实际上15bit 每个原色分量只有 32个颜色,尤其以人眼为绿色最敏感,在绿色的表现上非常糟糕。
后来就以16bit更常用,16bit是不对称的,白色值为 316331,对绿色专门进行了加强。
如下图就是24bit图片和16bit的对比,在细节观察时,还是能发现右边16bit的图片过渡较生硬,因为他只能表达出64中纯绿色
图片9.png    
16bit颜色通常被称为高彩色。还是在那个内存寸土寸金的时代,16bit颜色在色彩表现上已经足够好。
所以还是流行了很长的一段时间。

再后来,内存已经不是问题,很多硬件甚至直接抛弃了16bit模式。
24bit被称为true color(真彩色),除了特别挑剔的眼睛,在照片显示上,已经很难看出颜色的跳跃过渡。
除非你专门搞一个绿色过渡图,盯着看,很难看出24bit的瑕疵。
但就是还有那么一些挑剔的人,觉得24bit毕竟过渡不算完美,就有了30bit,不过30bit至今任然是曲高和寡,仅在专业领域有所展露。

而我们常说的32bit颜色,并不是指发色数,而是24bit+8bit透明通道,32bit就是24bit。

颜色的数学意义
Rgb有基本的数学意义
Rgb三值差距越大,颜色的色彩越强烈,rgb三值差距越小,颜色的色彩越黯淡,这个叫做彩度。又叫饱和度。
Rgb三值数值越高,颜色越明亮,数值越小,颜色越昏暗,这个叫做亮度。
Rgb三值视为一个三角形,值越接近谁,颜色就越接近谁。这个叫色调。
图片11.png
由于RGB并不够直观,所以按照上面的数学意义,又建立了HSV色彩模型
图片12.jpg     图片13.png     图片14.png    图片15.png
无论你用何种绘图软件,你总能找到如上图中的调色器,他们都是基于同一个东西来设计的
就是HSV色彩模型的色调。
色调就是首先画一个三角形,RGB各作为一个点。然后越接近哪个点,就越接近哪个颜色。
看看上图中,除了把色环拉成一条线的那个,你都能找到一个RGB三角形
然后把三角形变成六角形,RG之间插入rg混出的黄色,以此类推。
可以用从三角形到圆型的任意形状表达色调。
颜色本来是难以捉摸的,诗人们,词人们都倾向于这样认为。从对彩虹的描写可见一斑。
我的世界从此以后多了一个你,有时天晴有时雨
颜色是难以捉摸的,那是以前,赤橙黄绿蓝靛紫,再看看色调,是不是发现,原来色调就是彩虹,彩虹就是色调。
图片16.png
然后再加上彩度,和亮度,HSV色彩模型可以表示成一个圆锥,越接近顶面中点彩度越低,越接近尖锥亮度越低。

HSV是一个直观模型,直观的东西意味着你不需要花力气去记什么东西,亮度、饱和度、色调这些东西都是直观可见的东西。
李总之前就告诉过各位,图形学里面,看得见摸得着的东西很多,都是土得掉渣的,不要被洋气的名字吓到了。

介绍这些东西是为了对RGB进行改变的时候知道你在干什么。

变化RGB的值
RGB的取值范围0~1,如果操作出了出界的值,就取边界
变化RGB的值是为了产生各种效果,为了保持直观,我们会在Unity里面编写Shader来说明。
首先我们一起来建立测试环境
图片17.png

图片18.png


新建场景,搞个quad。新建一个mat,新建一个shader,挂上去。
然后找两张色彩鲜艳,看着舒服的图片来测试
图片19.png



我把Shader简单修改了一下,不要怕Shader,我们第一弹已经告诉你,Shader,不过如此。
图片20.png

好现在把图片拖上去,这个Shader不受光照影响,会把图片原原本本的呈现出来

图片21.jpg


加法
   RGB的加法,表示颜色的叠加,颜色越加越亮。
(1,0,0) + (010=110) 红加绿等于黄
(0.5,0,0)+(0.7,0,0)=(1.200)=(1,0,0);两个暗红相加就是更亮的红色,超出1.0的就作为1.0,到顶了再加还是红色
对图片来说,加法会不规则的改变原来的颜色,有不协调感,像是加了一层上去。
一般只有光效才会采用加法混合,就是为了不协调。
我们先来做一个颜色叠加
图片22.png



图片23.jpg




调节AddColor参数的值,颜色就会被直接加到图片上,超过1的部分取边界,这个现象叫过曝,过分曝光,有的时候就会追求这个效果。
然后我们把两张图加到一起

图片24.png



图片25.jpg



很不协调,记得我们前面说过,只有光效适合叠加
图片26.png

换上光照图
图片27.jpg



乘法
   RGB的乘法,表示对亮度的改变,对三个分量乘以相同的值,则三个分量一起变化亮度,色调不变。
对三个分量乘以不同的值,则三个分量分别变化,色调会改变。
对图片来说,图片乘以图片没有什么意义,一般采用图片乘以一个颜色值,可以表示对整个图片的亮度进行修改。

图片28.png



图片29.jpg



AlphaBlend
  透明混合 是加法和乘法的组合运用。
  NewColor =SrcColor*(1-Alpha)+Color*Alpha;
将底图的颜色根据当前图的(1-alpha)降低亮度
将当前图的颜色根据当前图的alpha 降低亮度,再合并到一起。
alpha越低,底图的亮度降低的越少。若alpha越高,当前图的亮度降低的越少。

图片30.png 先弄一张有Alpha通道的图片

图片31.png



图片32.jpg



去色
        去色就是把饱和度拉下来,让图片看起来是黑白的
我们前面讲过,rgb三分量差距越小,则饱和度越低,三分量相等,就是黑白的。
由于人眼对绿色最为敏感,所以有个简单的方法,让rgb全部都等于绿色的值。
图片33.png



图片34.jpg




对于色彩鲜艳的图片你完全可以这样做,不过这个方法有个缺陷,如果图片绿色成分太少,就会很糟糕。
图片35.png     图片36.jpg
红色明亮的部分也都很昏暗,沙发和背景完全无法区分了
更准确的方式是按照人眼的敏感度求权出亮度

图片37.png



图片38.jpg



好了,我们已经说明了几种最常用的变化方式和他的意义,记住。
做图形,最重要的是空间想象(脑补)能力

再会。

未完持续





unity3d quad是什么;unity 混合树2d;quad unity;unity 5黑色主题;unity摄像机叠加;unity3d干什么的;unity 32位 64位;unity 画线2d;unity是干什么的;unity3d quad;unity 2d混合树;unity quad 是什么;unity 黑色主题;unity 多摄像机叠加;unity3d干什么;unity 5 32位与64位;unity 2d画线;unity 干什么

评分

参与人数 9鲜花 +42 收起 理由
CADUO + 2 神马都是浮云
烈氏妖焰 + 20 受益~!
munan008 + 2 很给力!
北极 + 2 很给力!
098 + 2 很给力!
回到梦境境境境 + 5 对我有帮助.
灵魂重新 + 5 真传一句话哇,最多评5分,都给你了.
foxmol + 2 赞一个!
kaipau + 2 很给力!

查看全部评分

本帖被以下淘专辑推荐:


回复

使用道具 举报

5熟悉之中
773/1000
排名
2358
昨日变化
5

0

主题

108

帖子

773

积分

Rank: 5Rank: 5

UID
7972
好友
1
蛮牛币
1539
威望
0
注册时间
2013-11-13
在线时间
251 小时
最后登录
2015-4-16

社区QQ达人

发表于 2015-9-5 14:40:40 | 显示全部楼层
八错八错,点个赞。。。。希望继续更新。。。。坐等

回复

使用道具 举报

2初来乍到
101/150
排名
27742
昨日变化
21

0

主题

30

帖子

101

积分

Rank: 2Rank: 2

UID
40182
好友
0
蛮牛币
8
威望
0
注册时间
2014-8-16
在线时间
65 小时
最后登录
2017-3-22
发表于 2015-9-5 14:46:21 | 显示全部楼层
sofa!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

回复

使用道具 举报

3偶尔光临
220/300
排名
7173
昨日变化
7

0

主题

81

帖子

220

积分

Rank: 3Rank: 3Rank: 3

UID
32083
好友
0
蛮牛币
530
威望
0
注册时间
2014-7-1
在线时间
29 小时
最后登录
2015-5-29
发表于 2015-9-5 14:51:56 | 显示全部楼层
{:104:}{:104:}{:104:}

回复

使用道具 举报

排名
2498
昨日变化
1

0

主题

54

帖子

526

积分

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

UID
32909
好友
1
蛮牛币
2142
威望
0
注册时间
2014-7-7
在线时间
84 小时
最后登录
2016-7-6

认证开发者

发表于 2015-9-5 15:11:15 | 显示全部楼层
受益匪浅,感谢分享,您的教程深入浅出,非常受用!

回复

使用道具 举报

4四处流浪
475/500
排名
4504
昨日变化
8

0

主题

71

帖子

475

积分

Rank: 4

UID
22719
好友
1
蛮牛币
805
威望
0
注册时间
2014-4-24
在线时间
196 小时
最后登录
2016-3-15
发表于 2015-9-5 15:26:18 | 显示全部楼层
形象到爆,这是理解到一定境界了啊,大神

回复

使用道具 举报

7日久生情
1605/5000
排名
784
昨日变化

2

主题

137

帖子

1605

积分

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

UID
14172
好友
3
蛮牛币
2810
威望
0
注册时间
2014-2-12
在线时间
578 小时
最后登录
2017-3-15
发表于 2015-9-5 15:33:23 | 显示全部楼层
这个妹子是谁啊?~                             

回复

使用道具 举报

排名
33356
昨日变化
113

0

主题

23

帖子

84

积分

Rank: 2Rank: 2

UID
43634
好友
0
蛮牛币
140
威望
0
注册时间
2014-9-4
在线时间
58 小时
最后登录
2017-1-11
发表于 2015-9-5 16:00:44 | 显示全部楼层
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

回复

使用道具 举报

排名
33356
昨日变化
113

0

主题

23

帖子

84

积分

Rank: 2Rank: 2

UID
43634
好友
0
蛮牛币
140
威望
0
注册时间
2014-9-4
在线时间
58 小时
最后登录
2017-1-11
发表于 2015-9-5 16:01:06 | 显示全部楼层
没视频了。~~~~~~~!!!!!!!!!!!!!!!
[发帖际遇]: 一个袋子砸在了 hohoho002 头上,hohoho002 赚了 1 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

5熟悉之中
960/1000
排名
1588
昨日变化

3

主题

71

帖子

960

积分

Rank: 5Rank: 5

UID
24367
好友
1
蛮牛币
8718
威望
0
注册时间
2014-5-9
在线时间
230 小时
最后登录
2016-10-11
发表于 2015-9-5 16:10:26 | 显示全部楼层
liudq__ 发表于 2014-9-5 15:33
这个妹子是谁啊?~

苍老师{:87:{:87:}{:87:}{:87:}

回复

使用道具 举报

7日久生情
1885/5000
排名
266
昨日变化
2

0

主题

114

帖子

1885

积分

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

UID
30751
好友
0
蛮牛币
4725
威望
0
注册时间
2014-6-22
在线时间
437 小时
最后登录
2016-12-14

活力之星

发表于 2015-9-5 19:30:46 | 显示全部楼层
图形白痴表示完全看不懂。。

回复

使用道具 举报

5熟悉之中
543/1000
排名
3010
昨日变化
3

5

主题

134

帖子

543

积分

Rank: 5Rank: 5

UID
35794
好友
3
蛮牛币
1258
威望
0
注册时间
2014-7-23
在线时间
100 小时
最后登录
2017-1-24
发表于 2015-9-5 21:02:49 | 显示全部楼层
哇,又见大神,学习了!!!

回复

使用道具 举报

6蛮牛粉丝
1011/1500
排名
1511
昨日变化
1

1

主题

233

帖子

1011

积分

Rank: 6Rank: 6Rank: 6

UID
10324
好友
0
蛮牛币
1652
威望
0
注册时间
2013-12-15
在线时间
176 小时
最后登录
2017-3-17
发表于 2015-9-5 21:44:28 | 显示全部楼层
用unity的Surface Shader真的是方便多了,我还是第一次看到用自发光的Emission来显示贴图颜色做AlphaBlend的,不过多亏黑色它不会发光啊

回复

使用道具 举报

排名
9107
昨日变化
6

34

主题

181

帖子

1207

积分

Rank: 9Rank: 9Rank: 9

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

认证开发者

 楼主| 发表于 2015-9-5 22:21:31 | 显示全部楼层
akb48apc 发表于 2014-9-5 21:44
用unity的Surface Shader真的是方便多了,我还是第一次看到用自发光的Emission来显示贴图颜色做AlphaBlend ...

感谢吐槽,不过你貌似没有关注对重点。

回复

使用道具 举报

5熟悉之中
543/1000
排名
3010
昨日变化
3

5

主题

134

帖子

543

积分

Rank: 5Rank: 5

UID
35794
好友
3
蛮牛币
1258
威望
0
注册时间
2014-7-23
在线时间
100 小时
最后登录
2017-1-24
发表于 2015-9-6 00:13:33 | 显示全部楼层
非常好,

回复

使用道具 举报

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

本版积分规则

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