暗部 / 亮部

今天來介紹暗部( shadow )、亮部( hightLight )的調整。

暗部亮部的調整相較於其他前面幾個介紹的濾鏡來說有點不同，像是對比度、飽和度都比較像是針對整張照片一起做出調整，而這個則是針對某片特別區域來做。

通常在影像軟體中還會有第三個是中間調 ( Midtone )

挑一張比較明顯的照片來說好了，大概畫一下

在左半邊的一部分很明顯是屬於亮部而且已經過曝，而其餘地方則是比較偏暗，而接下來亮部跟暗部的調整只會針對那些特定區域。

我們之前已經轉換成 HSL 的模型，接下來我們就可以使用這個模型來判別目前這個區域屬於暗部或者亮部，做出進一步的亮度調整。

說到亮度調整，其實一開始的曝光度調整也可以透過使用 HSL 模型增加亮度來做哦！

實作

一樣先設定一個闕值，低於這個闕值的亮度才會進行增減，所以透過之前轉變的 HSL 模型可以很輕易的做出這件事情。

export const shadow = (imageData, amount) => {
  const pixelData = imageData.data
  const shadowThreshold = 40
  for (let i = 0; i < pixelData.length; i += 4) {
    const [r, g, b] = [pixelData[i], pixelData[i + 1], pixelData[i + 2]]
    const hsl = rgbToHsl([r, g, b])
    if (hsl[2] < shadowThreshold) {
      hsl[2] = clamp(hsl[2] + convertRange(amount, [-10, 10]), 0, 100)
    }
    const finalRgb = hslToRgb(hsl)
    pixelData[i] = finalRgb[0]
    pixelData[i + 1] = finalRgb[1]
    pixelData[i + 2] = finalRgb[2]
  }
  return imageData
}

這邊的調整把輸入轉換成 -10 ~ 10 的範圍，因為對於暗部調整來說，細微的調整對於感受度來說會相對亮部的感受度強烈，其實亮度調整在這系列中都是使用線性增加的方式調整，但其實人對於光的感受度是會依據亮度而有不同感受的，舉例來說，當亮度從 0 增加到 10 的時候，會讓你感覺增加很明顯，但相較之下，從 80 增加到 90 的時候，增加的幅度感跟從 0 增加到 10 的時候是不會一樣的。也就是說人眼對於暗部的變化會比較明顯，在調整的時候其實也應該用一個函數去做調整會比用線性調整比較好。

推薦這篇 文章，簡單來說，假如把黑到白對應成 0 ~ 1，我們人眼感覺到的中性灰，相當於 0.2，並不是 0.5，所以也出現了校正的方式讓顏色更看起來像是真實。

同理亮部的實作也跟上面幾乎是一樣，只是差別在於闕值的設定是高於某一個值，各位可以嘗試看看把輸入轉換成 -10 ~ 10，然後一樣進行亮度調整，在原本亮部跟暗部的地方都調整成一樣的數值，來觀看是不是覺得兩者畫面感受度變化不同。

小結

這張是在山區的遊牧民族帳篷，外皮是用氂牛皮做的，話說大家可能沒有聽過這個地方，但應該都有聽過喀什米爾羊毛吧，就是來自這些遊牧民族在放牧的羊唷！

其實暗部跟亮部的調整除了亮度之外，有了這個概念加上之前提到的濾鏡可以延伸到其他地方。例如說配合色相，就可以做出在暗部、亮部、中間調中每個主要顏色通道的飽和度或亮度等等，對於想要做出獨特風格的相片非常有幫助。像是目前主流電影系列的配色都大概是以亮部偏暖色系( 橙黃 ) 暗部偏冷色系 ( 藍綠為主 )，所以下次除了觀看劇情外，也可以了解一些之前沒注意的細節唷！