hsv白色h值是多少_ShaderToy系列:HSV
![](/assets/blank.gif)
前言
这次呢,继续再来看一个iq大神的简单作品,作品虽简单,但是却包含了很多知识点,先放上最终效果:
![](/assets/blank.gif)
ShaderToy地址:https://www.shadertoy.com/view/MsS3Wc
不过本篇改动较大,最终效果与ShaderToy上的已不太一致,这点请注意,不要因此产生困扰,本篇的核心主要在于探讨几种不同的HSV转换到RGB的方法。
色彩模式
色彩模式有很多种,每一种都有各自的用途,比如RGB用于计算机显示器的显示,CMYK用于纸张的印刷等等。
- RGB
RGB色彩模式是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
- HSV/HSL
但是,RGB的方式对于人类来说,并不友好,比如我问你R(104)G(185)B(166)是个什么颜色,可能你需要想很久,甚至最后也不一定能正确回答出来,这不怪你,都是RGB的错〜
于是呢,计算机图形学研究人员在20世纪70年代设计出了一种更符合人类感知的色彩模式,这就是HSV与HSL,这两者类似但又有些区别。
HSV有时也被叫做HSB,其中的V与B表示的是亮度的意思。
![](/assets/blank.gif)
共同点:
- 两者的色彩模型都可以用一个圆柱体来表示
- 每个色调的颜色(色相)被排列在圆柱中呈放射状的圆形横截面上
- 以圆柱中心为轴,从下到上为黑色到白色的过渡
不同点:
- HSV表示法模拟了不同颜色混合在一起的方式,Saturation(饱和度)类似于当前颜色纯度与最大纯度的比值,范围[0,1],0时为灰色,Value(亮度)则是表示颜色与不同数量的黑色或白色的混合物。
- HSL模型尝试类似于更感性的颜色模型,例如Natural Color System(NCS)或Munsell color system颜色系统,将完全饱和的颜色置于亮度值为1/2的圆周围,其中亮度值0或1分别为完全黑色或白色。
本文的重点,HSV,即H(hue色相)S(saturation饱和度)V(value亮度),通过定义一个颜色的色相,然后饱和度多少,最后亮度又是多少,即可得到我们所想要的颜色值。
有人问了,那既然HSV更符合人类感知,那为什么还要用RGB呢,能不能把RGB去掉呢?
那肯定是不能啦,因为显示器本身的硬件是通过RGB(红绿蓝)三色发光极来生成色彩的,HSV就相当于为了使我们人类更易懂而产生的一种中间语言!
效果实现
顶点着色器
顶点着色器,一始既往,没什么好说的,仅仅正确显示模型以及获取UV值即可。
v2f
片断着色器
fixed4
这个实例的片断着色器还是比较清晰易懂的,大体分析如下:
- 通过uv定义出hsv
- 分别利用此hsv实现三种HSV2RGB的效果
- 注释了前面两个,仅显示最后一个效果
HSV UV
大致理清思路后,我们来看细节实现
fixed3
定义三维向量hsv,返回的值是由屏幕uv坐标组合而来HSV
- H=i.uv.x
- S=1
- V=i.uv.y
也就是说屏幕的横向坐标表示的是色相H,垂直坐标表示的是亮度V,而饱和度S假设都是1的情况。
这个我们可以打开Unity中的拾色器,将色板切换到HSV模式下就可以直观的感受到这样分UV的用途了。
![](/assets/blank.gif)
HSV2RGB(标准版)
fixed3
根据我们上面的大体分析,这里主要是将我们的hsv通过自定义的函数hsv2rgb_01来转换成RGB颜色后的效果。
Wiki上的公式:
https://en.wikipedia.org/wiki/HSL_and_HSV
首先需先满足条件:
H ∈ [0º,360º]
S ∈ [0,1]
V ∈ [0,1]
然后直接上公式:
![](/assets/blank.gif)
翻译后的Shader代码如下:
fixed3
注:公式中的h/60在代码中变成了h*6,原因是因为我们传进来的h并不是[0º,360º],而是[0,1],所以才需要*6来限定最终的结果在[0,5]之间.
注:switch仅支持#pragma target 3.5及以上
hsv2rgb_01返回的结果如下:
![](/assets/blank.gif)
效果刚好与我们上面在拾色器中看到的一样,横向表示色相,竖向表示亮度,而饱合度是1的情况。
HSV2RGB(替代版)
以上的版本虽然效果实现上没有问题,但是会产生一些性能与兼容性的问题,于是,在Wiki上还有一种替代方案,公式如下:
![](/assets/blank.gif)
套用公式,翻译成js语言:
function
转换成shader后的代码:
fixed3
返回的效果如下:
![](/assets/blank.gif)
与hsv2rgb_01效果一致,但是运算量更少,支持更低的SM版本。
HSV2RGB(优化版)
然而,我在ASE中发现了一版更优的版本,效果同样一致,运算量更少,代码如下:
float3
总结
那么HSV转换RGB功能我们可以用在什么地方呢?
比如,我们可以用在后处理上,暴露HSV参数来方便直观的调节,然后内部转换成RGB,同样也可以用在一些角色材质的换色上等等。
最后
欢迎大家关注更多干货的公众号:Unity技术美术 ( ID:gh_8b69cca044dc )
![](/assets/blank.gif)
Unity技术美术QQ交流分享群:19470667(1群已满)、763506271
![](/assets/blank.gif)
hsv白色h值是多少_ShaderToy系列:HSV相关推荐
- hsv白色h值是多少_使用Global Mapper给建筑轮廓SHP数据赋予高程值
如果想看到三维城市的效果,就需要把建筑轮廓SHP数据转换成三维白模.三维白模有多种格式和方法,但是均需要先给建筑轮廓矢量赋予高程值. 1.首先把SHP格式的建筑轮廓加载到GM中: 由于建筑轮廓数据存储 ...
- smzdm 扫地机器人_堪称米家最值!米家系列扫地机器人选购须知
堪称米家最值!米家系列扫地机器人选购须知 2018-05-14 17:34:44 102点赞 354收藏 81评论 本篇内容来自#全民分享季#第三季活动,本周选题#分享你的生活记录#,共同瓜分5000 ...
- python二值化特征_OpenCV-Python系列之轮廓特征高阶
在之前的教程中,我们谈到了轮廓的一些基本特征,包括有图像的矩.轮廓区域的面积.轮廓的周长.轮廓的外接图形等等.今天我们仍然讨论几种轮廓的特征,它们将很具有实战意义,我们将从综合方面讲述. 轮廓近似 通 ...
- 基于hsv的亮度调整算法_改变HSV的H和V部分(比如可以增加图像亮度)
程序: 效果:增加图像亮度 代码: #include "cv.h" #include "cxcore.h" #include "highgui.h&q ...
- c++类指针赋值表达式必须是可修改的左值_C++进阶教程系列:全面理解C++中的类...
原标题:C++进阶教程系列:全面理解C++中的类 关注Linux公社 最近刷了一些题,也面试了一些公司,把关于C++中关于类的一些概念总结了一下. 在这里也反思一下,面试前信心满满自以为什么都懂,毫无 ...
- 13代酷睿移动端处理器:HX、H、P和U系列区别是什么?
13代酷睿处理器出来了,特别是移动端的处理器已经出现在新款笔记本上了.而新款处理器里面,相对于AMD的奇特命名方式外,英特尔酷睿移动端稍微简单一些.不过看起来还是挺复杂的,感觉比上一代复杂很多. 当然 ...
- 函数周期表丨值丨数学函数系列
数学函数系列 数学函数系列,顾名思义,是一些我们在学生时代经常使用的数学算法在PowerBI中的应用. 同样,本期的内容与上期的三角函数差不多,可以作为查询使用. 用途:一些特定的数学逻辑运算. AB ...
- 函数周期表丨时间智能丨值丨TOTAL函数系列(修订)
TOTAL函数系列 TOTAL函数系列共包含三个函数:TOTALMTD函数,TOTALQTD函数,TOTALYTD函数. 隶属于"值函数",用途相对于DATESMTD系列函数更为直 ...
- oracle 让人抓狂的错误之 null值 与 无值(无结果)-开发系列(一)
近期.在做开发.写存过的时候碰到一些问题,找了好长时间才发现原因.并且是曾经不知道的. 所以在这给记下来 给自己备忘和大家參考. 一 .null值 以下举个最简单的样例.寻常工作其中肯定比这个sql复 ...
最新文章
- 国内首个深度学习工程师认证标准发布
- 免费教材丨第51期:数学基础课程----概率论教程、机器学习中的数学基础
- c++ cuda拷贝内存
- ECShop显示某商品销售累计
- C语言实现最大堆max_heap(附完整源码)
- 刷新页面 数组轮播
- 《Algorithms》Comparable 实现快速排序三向切分的快速排序
- 盖瑞特金属探测门受多个严重漏洞影响,可遭篡改
- 郴州大数据产业招商会在深举行,中琛源科技签约智慧水务项目
- (day 12 - 双指针)剑指 Offer 22. 链表中倒数第k个节点
- 电脑投屏电视怎么设置_教程 | 小米VR一体机投屏到电视/电脑/手机
- Java编程:贪心算法
- 科研_今天,我们怎么做科研?
- matlab 画图直接存储_Matlab通过图文件找原始数据
- Python 电子书下载列表
- 致敬学习者丨黑马2020年度TOP榜视频教程,一键领!
- 如何在Visio中旋转图形
- 初中数学503个必考知识点_高考数学必考知识点高中数学重点知识归纳
- 微信公众号开发之使用eclipse创建微信web工程并发布到BAE测试
- 什么是蛮力攻击,您能做什么来防止这些攻击的发生?
热门文章
- android studio背景模糊_[Android翻译]CameraX:过去、现在和未来的一瞥
- java nio socket长连接_nio实现Socket长连接和心跳
- Oracle约数,Oracle约束简介
- C++ 高级数据类型(四)—— 动态内存分配
- Shell 脚本中如何使用make命令
- MyBatis Generator配置文件翻译
- [Linux] undefined reference to `itoa'
- Java 结构体之 JavaStruct 使用教程二 JavaStruct 用例分析
- Taro+react开发(89):封装为一个函数渲染
- 前端学习(3144):react-hello-react之对比新旧周期