剑英陪你玩转图形学彩虹

author author     2022-09-16     721

关键词:

1.

今天的主题是颜色技术分享

开篇废话

今天看到蛮牛把干货区放上了主页,居然还能看到我的帖子,让我很不好意思。

各位同学对不起,我来晚了。

今天的李总是因为姓李,又总是迟到,所以叫做李总。

今天还是讲图形学,为人不识武藤....,骇骇,最近好像扫黄,不能说这个,大家都知道,关键是不搞软渲染,你就枉然了。软渲染我们上次已经玩过了,知道所以然,了解渲染是怎么一件事,目标就已经达到了。

渲染这条路上还有很多东西,今天我们到unity3d里面去玩。图形相关要聊的事情太多了,从头讲到做一个引擎出来,估计这个系列以后你可以和孩子一起看,我们用unity3d这个引擎,在他的基础上再继续去讲图形,还赶得上制造下一代。

首先开篇之前,先来检查一下作业。

请跟我一起问自己几个问题:

  1. 怎么从模型到像素,我大概理解了吗?
  2. 关于顶点和矩阵,我真的知其所以然了吗?
  3. 空间与变换我理解了吗?

如果这几个问题还存在疑问,我建议你还是回到第一弹去再玩一遍,我不会告诉你所有的答案,但是我提供给你所有的关键字,你得自己补补课了。

记住,我们是一个高端业务(zhuangbi)技巧系列,我们理清楚关键思路,基础还得自己补。

快速提高班

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

要提高自己的业务水平,第二个要诀是:持。

持这个概念,没有忍那么好理解,你可以把他理解为选择,你要选择那些你有把握的地方去回答。

一旦出口,就是准确的。

这次不用模拟问答,因为你已经不会破功( zhuangbi shibai)了。

今天使用Unity3D,我先告诉你一些Unity的小技巧,以后体现业务(zhuangbi)水平用得着。

首先, Unity可以简单的用两句话讲清楚

技术分享 技术分享

1.这个Hierarchy面板,他体现的是场景管理中的场景图概念。如果有必要,记住他的英文SceneGraph。

场景图是什么呢?说起来也很简单,就是把场景中的元素,以树的形式组织起来。看上面第二张图,什么都不用说了

2.场景图中的节点,在Unity中称为GameObject,GameObject上面可以挂接各种各样的Component

Unity主要的开发思想便是通过自定义脚本组件来进行开发

好了,Unity3D是怎么回事呢,Unity这玩意就是操作场景图,场景图节点上是一个组件模型,组件可以自定义脚本来编写。

记住这个,你也可以两句话把Unity3D讲透。

 

但是,我们在这里主要是讲图形,光透是不行的,我们还得分析Unity3D的渲染设计。

Unity3D的渲染设计呢,在顶点这个层面上是非常传统的三矩阵设计。

DirectX OpenGL 在固定管线时代就一直沿用这个设计,也是图形学里面搞了几十年的经典设计。

三矩阵是

世界矩阵、视矩阵、投影矩阵。

世界矩阵,就是表达模型在世界空间中的具体位置。对应到unity结构就是Transform. localToWorldMatrix.

由于场景图是有父子关系的,子物体的localToWorldMatrix,是子物体的localMatrix*父物体的worldMatrix得到。

Unity并没有直接提供localMatrix的结构,而是由一组localPositon localScale localRotate localRuleAngle 来描述。

总之他是表示位置的

视矩阵,决定摄像机的位置和方向,最后能看到什么东西。

投影矩阵,决定摄像机的视角,远近裁剪面这些东西,视矩阵和投影矩阵都有摄像机的位置和参数来决定。

这三个矩阵最终被合成为一个,共同决定顶点出现在屏幕上的位置。

 

好了,提高到这里就可以了,今天我们不深入这个话题。

计算机的颜色

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

RGB模型

技术分享

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种颜色了。

技术分享16色效果

技术分享256色效果

在这个阶段都有调色板的设计,因为一个像素点就用了一个字节来表示,这个字节表示用的是第几种颜色。另外有一张色表,记录第几种颜色具体是什么颜色。时至今日,调色板依然健在,因为调色板具有一个很有趣的特性,一些2d游戏依然在使用。就是不改变图片,仅改变色表,就能产生不同的效果。

比如街霸2里面的可以选出不同颜色的角色,都是改调色板的结果。

技术分享

为何如此吝啬,一个像素只用一个字节存?

试想盖子大神的名言,个人电脑只要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颜色就是 31,31,31 为白色

24bit颜色就是 255,255,255 为白色,24bit表示最为常用,所以很多小伙伴可能都比较熟悉这个255

30bit颜色就是 1023,1023,1023为白色。

而实际上15bit 每个原色分量只有 32个颜色,尤其以人眼为绿色最敏感,在绿色的表现上非常糟糕。

后来就以16bit更常用,16bit是不对称的,白色值为 31,63,31,对绿色专门进行了加强。

如下图就是24bit图片和16bit的对比,在细节观察时,还是能发现右边16bit的图片过渡较生硬,因为他只能表达出64中纯绿色

技术分享

16bit颜色通常被称为高彩色。还是在那个内存寸土寸金的时代,16bit颜色在色彩表现上已经足够好。

所以还是流行了很长的一段时间。

 

再后来,内存已经不是问题,很多硬件甚至直接抛弃了16bit模式。

24bit被称为true color(真彩色),除了特别挑剔的眼睛,在照片显示上,已经很难看出颜色的跳跃过渡。

除非你专门搞一个绿色过渡图,盯着看,很难看出24bit的瑕疵。

但就是还有那么一些挑剔的人,觉得24bit毕竟过渡不算完美,就有了30bit,不过30bit至今任然是曲高和寡,仅在专业领域有所展露。

 

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

颜色的数学意义

Rgb有基本的数学意义

Rgb三值差距越大,颜色的色彩越强烈,rgb三值差距越小,颜色的色彩越黯淡,这个叫做彩度。又叫饱和度。

Rgb三值数值越高,颜色越明亮,数值越小,颜色越昏暗,这个叫做亮度。

Rgb三值视为一个三角形,值越接近谁,颜色就越接近谁。这个叫色调。

技术分享

由于RGB并不够直观,所以按照上面的数学意义,又建立了HSV色彩模型

技术分享技术分享技术分享技术分享

无论你用何种绘图软件,你总能找到如上图中的调色器,他们都是基于同一个东西来设计的

就是HSV色彩模型的色调。

色调就是首先画一个三角形,RGB各作为一个点。然后越接近哪个点,就越接近哪个颜色。

看看上图中,除了把色环拉成一条线的那个,你都能找到一个RGB三角形

然后把三角形变成六角形,RG之间插入rg混出的黄色,以此类推。

可以用从三角形到圆型的任意形状表达色调。

颜色本来是难以捉摸的,诗人们,词人们都倾向于这样认为。从对彩虹的描写可见一斑。

我的世界从此以后多了一个你,有时天晴有时雨

颜色是难以捉摸的,那是以前,赤橙黄绿蓝靛紫,再看看色调,是不是发现,原来色调就是彩虹,彩虹就是色调。

技术分享

然后再加上彩度,和亮度,HSV色彩模型可以表示成一个圆锥,越接近顶面中点彩度越低,越接近尖锥亮度越低。

 

HSV是一个直观模型,直观的东西意味着你不需要花力气去记什么东西,亮度、饱和度、色调这些东西都是直观可见的东西。

李总之前就告诉过各位,图形学里面,看得见摸得着的东西很多,都是土得掉渣的,不要被洋气的名字吓到了。

 

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

变化RGB的值

RGB的取值范围0~1,如果操作出了出界的值,就取边界

变化RGB的值是为了产生各种效果,为了保持直观,我们会在Unity里面编写Shader来说明。

首先我们一起来建立测试环境

技术分享 技术分享

新建场景,搞个quad。新建一个mat,新建一个shader,挂上去。

然后找两张色彩鲜艳,看着舒服的图片来测试

技术分享

 

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

技术分享

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

技术分享

加法

RGB的加法,表示颜色的叠加,颜色越加越亮。

  1. + (0,1,0)=(1,1,0) 红加绿等于黄

(0.5,0,0)+(0.7,0,0)=(1.2,0,0)=(1,0,0);两个暗红相加就是更亮的红色,超出1.0的就作为1.0,到顶了再加还是红色

对图片来说,加法会不规则的改变原来的颜色,有不协调感,像是加了一层上去。

一般只有光效才会采用加法混合,就是为了不协调。

我们先来做一个颜色叠加

技术分享

技术分享

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

然后我们把两张图加到一起

技术分享

技术分享

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

技术分享换上光照图

技术分享

乘法

RGB的乘法,表示对亮度的改变,对三个分量乘以相同的值,则三个分量一起变化亮度,色调不变。

对三个分量乘以不同的值,则三个分量分别变化,色调会改变。

对图片来说,图片乘以图片没有什么意义,一般采用图片乘以一个颜色值,可以表示对整个图片的亮度进行修改。

技术分享

技术分享

AlphaBlend

透明混合 是加法和乘法的组合运用。

NewColor =SrcColor*(1-Alpha)+Color*Alpha;

将底图的颜色根据当前图的(1-alpha)降低亮度

将当前图的颜色根据当前图的alpha 降低亮度,再合并到一起。

若alpha越低,底图的亮度降低的越少。若alpha越高,当前图的亮度降低的越少。

技术分享,先弄一张有Alpha通道的图片

技术分享

技术分享

去色

    去色就是把饱和度拉下来,让图片看起来是黑白的

我们前面讲过,rgb三分量差距越小,则饱和度越低,三分量相等,就是黑白的。

由于人眼对绿色最为敏感,所以有个简单的方法,让rgb全部都等于绿色的值。

技术分享 技术分享

对于色彩鲜艳的图片你完全可以这样做,不过这个方法有个缺陷,如果图片绿色成分太少,就会很糟糕。

技术分享 技术分享红色明亮的部分也都很昏暗,沙发和背景完全无法区分了

更准确的方式是按照人眼的敏感度求权出亮度

技术分享

技术分享

好了,我们已经说明了几种最常用的变化方式和他的意义,记住。

做图形,最重要的是空间想象(脑补)能力

 

再会。

 

未完持续

手把手带你玩转spark机器学习-使用spark进行文本处理(代码片段)

系列文章目录手把手带你玩转Spark机器学习-专栏介绍手把手带你玩转Spark机器学习-问题汇总手把手带你玩转Spark机器学习-Spark的安装及使用手把手带你玩转Spark机器学习-使用Spark进行数据处理和数据转换手把手带你玩转Spark机器学... 查看详情

手把手带你玩转spark机器学习-使用spark构建分类模型

系列文章目录手把手带你玩转Spark机器学习-专栏介绍手把手带你玩转Spark机器学习-问题汇总[持续更新]手把手带你玩转Spark机器学习-Spark的安装及使用手把手带你玩转Spark机器学习-使用Spark进行数据处理和数据转换手把手带你玩转... 查看详情

带你玩转jquery

一、简介定义  jQuery创始人是美国JohnResig,是优秀的Javascript框架;  jQuery是一个轻量级、快速简洁的javaScript库。源码戳这jQuery对象  jQuery产生的对象时jQuery独有的,只能自己调用书写规则  支持链式操作;(对同一元... 查看详情

python数据分析基础008-利用pandas带你玩转excel表格(中下篇)(代码片段)

文章要点🍺前言🍁(一)利用pandas将excel中的数据绘制成可视化图形🔥1.在excel中实现🔥2.在pandas中实现🍁(二)利用pandas实现多表联合🔥1.在excel中实现🔥2.在pandas中实现🍁&# 查看详情

21|移动测试神器:带你玩转appium

以ios为例。iOS环境搭建首先,下载安装Xcode;然后,在Xcode中下载iOS的模拟器;接着,使用Xcode编译打包被测试App;最后,在iOS的模拟器中尝试手工执行这两个测试用例。Appium测试环境搭建其实自己可百度解决。AppiumInspector的使用... 查看详情

ios教你玩转uitableviewcontroller和tableview

iphone和Ipad开发中UITableViewController和TableView应该是用得比較多得控件。可是你是会由于写这些控件写得多了而厌烦。全部怎么让这个控件一直能用。怎么让这个控件写起来简单。是非常必须。特别是UITableViewController把dataSouce的业... 查看详情

带你玩转visualstudio——带你新建一个工程

接着上一篇文章带你玩转VisualStudio——开篇介绍继续讲这个主题,现在我们从创建一个新的工程开始。一步一步创建项目依次选择菜单:File\\New\\Project,打开NewProject对话框。<1>.选择项目类型:Win32ConsoleApplicat... 查看详情

纯干货:21天带你玩转容器

纯干货:21天带你玩转容器可能有些人已经使用过容器,但考虑知识体系的完整性,我们还是从最基本的容器知识开始带大家进入容器的世界。首先介绍一下什么是容器?Docker是一种轻量级的操作系统虚拟化解决方案,它想达到... 查看详情

两句命令教你玩转《黑客帝国》中的“代码雨”

1在系统中安装cmatrix$sudo apt-getupdate;sudoapt-getinstallcmatrix2执行命令$cmatrix 查看详情

30分钟带你玩转正则表达式

...bsp;          30分钟带你玩转正则表达式 定义:正则表达式说白了就是有普通字符、以及特殊字符组成的文子模式。{匹配模式标准}正则表达式将会作为一个模板与所搜索的字符串进行匹配... 查看详情

一文彻底教会你玩转java动态代理(代码片段)

第一步:定义接口//第一步:定义接口interfacetestIProxyvoidhello();第二步:实现InvocationHandler接口classmyInvocationHandlerimplementsInvocationHandler@OverridepublicObjectinvoke(Objectproxy,Methodmeth 查看详情

一文彻底教会你玩转java动态代理(代码片段)

第一步:定义接口//第一步:定义接口interfacetestIProxyvoidhello();第二步:实现InvocationHandler接口classmyInvocationHandlerimplementsInvocationHandler@OverridepublicObjectinvoke(Objectproxy,Methodmeth 查看详情

九爷带你玩转bigdata

BigData(大数据)技术简析BigData是近来的一个技术热点,但从名字就能判断它并不是什么新词。毕竟,大是一个相对概念。历史上,数据库、数据仓库、数据集市等信息管理领域的技术,很大程度上也是为了解决大规模数据的问... 查看详情

带你玩转visualstudio——调用约定与(动态)库(代码片段)

上一篇文章带你玩转VisualStudio——调用约定__cdecl、__stdcall和__fastcall中已经讲述了__cdecl、__stdcall和__fastcall几种调用约定的主要区别。这一章将进一步深入了解不同调用约定对编译后函数修饰名的影响,及调用约定对库函数的... 查看详情

带你玩转mha高可用集群

一、简介MHA(Master HighAvailability)目前在MySQL高可用方面是一个相对成熟的解决方案,现在很多大型的电商网站都采用此解决方案例如:某宝、某东、某会,是一套优秀的作为MySQL高可用性环境下故障切换和主从提升的高可用... 查看详情

九爷带你玩转docker五大监控

轻量级虚拟化容器Docker,自发布以来便广受业界关注,在开源界和企业界掀起了一阵风。Docker容器相对于VM有以下几个优势:启动速度快;资源利用率高;性能开销小。650)this.width=650;"src="https://segmentfault.com/image?src=http://news.oneapm.... 查看详情

九大工具助你玩转java性能优化

在这篇文章中,我会带着大家一起看一下9个可以帮助我们优化Java性能的工具。有一些我们已经在IDRSolutions中使用了,而另外一些有可能在个人项目中使用。NetBeansProfilerNetBeansprofiler是一个NetBeansIDE插件,主要为NetBeansIDE提供性能... 查看详情

一张图教你玩转阿里云双11上云狂欢节

一年一度的双11狂欢节已经开启啦!下面一张图教你如何玩转阿里云双11上云狂欢节!双11主会场地址:http://click.aliyun.com/m/1000305076/  查看详情