前言

這次呢，繼續再來看一個iq大神的簡單作品，作品雖簡單，但是卻包含了很多知識點，先放上最終效果：

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表示的是亮度的意思。

共同點：

• 兩者的色彩模型都可以用一個圓柱體來表示
• 每個色調的顏色（色相）被排列在圓柱中呈放射狀的圓形橫截面上
• 以圓柱中心為軸，從下到上為黑色到白色的過渡

不同點：

• 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的用途了。

HSV2RGB(標準版)

fixed3

根據我們上面的大體分析，這里主要是將我們的hsv通過自定義的函數hsv2rgb_01來轉換成RGB顏色后的效果。

Wiki上的公式：

https://en.wikipedia.org/wiki/HSL_and_HSV

首先需先滿足條件:

H ∈ [0o,360o]

S ∈ [0,1]

V ∈ [0,1]

然后直接上公式：

翻譯后的Shader代碼如下：

fixed3 注：公式中的h/60在代碼中變成了h*6,原因是因為我們傳進來的h并不是[0o,360o]，而是[0,1]，所以才需要*6來限定最終的結果在[0,5]之間.
注：switch僅支持#pragma target 3.5及以上

hsv2rgb_01返回的結果如下：

效果剛好與我們上面在拾色器中看到的一樣，橫向表示色相，豎向表示亮度，而飽合度是1的情況。

HSV2RGB(替代版)

以上的版本雖然效果實現上沒有問題，但是會產生一些性能與兼容性的問題，于是，在Wiki上還有一種替代方案，公式如下:

套用公式，翻譯成js語言:

function

轉換成shader后的代碼：

fixed3

返回的效果如下：

與hsv2rgb_01效果一致，但是運算量更少，支持更低的SM版本。

HSV2RGB（優化版）

然而，我在ASE中發現了一版更優的版本，效果同樣一致，運算量更少，代碼如下：

float3

---

總結

那么HSV轉換RGB功能我們可以用在什么地方呢？

比如，我們可以用在后處理上，暴露HSV參數來方便直觀的調節，然后內部轉換成RGB，同樣也可以用在一些角色材質的換色上等等。

最后

歡迎大家關注更多干貨的公眾號：Unity技術美術 ( ID:gh_8b69cca044dc )

Unity技術美術QQ交流分享群：19470667(1群已滿）､763506271

總結

以上是生活随笔為你收集整理的hsv白色h值是多少_ShaderToy系列：HSV的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。