更好的螢幕讓網站有更多瑕疵？

你有沒有換過一支更好的手機，或者接上一台更好的螢幕，然後開始注意到一些以前沒發現的東西？像是某個 app 的圖示邊緣有鋸齒，或是某張存了很久的照片，突然看起來糊糊的。

你可能想過「是不是我變得太挑剔了」，或是「這台螢幕該不會有問題吧」。

其實都不是，是因為你的螢幕變好了，Retina、解析度、像素密度，這些在發表會上聽起來很抽象的名詞，在這些情況下具象化了！

在不同螢幕上效果呈現不一樣

有天我發現這個狀況，是我在做我的作品集的 shader 畫面，他是電腦即時運算的光團，會隨著滑鼠互動而變化光影效果。

一樣的效果在 Windows 上面跟在 Mac 上面跑起來，畫面看起來差很多，而且是在 Windows 上面好看柔和很多，我一開始以為是效能的問題，但後來發現效能在兩台電腦上都沒有爆掉，都還有很多空間。

後來來回測試，才發現是因為螢幕的燈點密度不同（也就是同樣一塊面積，裡面塞了幾顆實體的發光點），在 Windows 上被淡化柔和掉的瑕疵和邊緣銳利的鈍角，其實一直都存在，只是 Windows 沒有顯示出來。

在現實生活中也會發生

其實有些現實生活中會發生的狀況，也跟這個概念相同，像是一直以為遠處那塊招牌寫的是某某某，配了眼鏡之後才發現，上面有個錯字。或是同一張解析度很低的照片，在老舊的電視上顯示，你不會覺得有什麼問題；但在高畫質的液晶螢幕上，馬賽克就一目了然。

繞了很久才發現的問題

這次寫的 shader 是讓程式碼在實際繪製光團的時候，會只先畫一個小小的圖，再放大鋪滿畫面，這樣可以讓算圖的速度快很多，但問題就出在這裡，因為 Mac 的螢幕比較細緻，放大後光團的同一個大小的格子，他會用 6.7 顆螢幕發光點去畫，密度更高，相比 Windows 螢幕只用了 3.3 顆，所以 Windows 螢幕自己的粗糙度剛好把格子的邊界糊掉了。而 Mac 夠細緻，它把那個邊界清清楚楚地畫了出來。

一開始我的處理方式，是調整解析度，這樣 Mac 的呈現就不會這麼銳利，調整後 Mac 畫面確實變柔了，但在 Windows 上面因而看起來移動變得更跳，邊緣開始出現鋸齒，因為我調的東西根本不對，解析度是取樣率，柔和度是訊號本身的內容，用前者去換後者，結果在 Windows 螢幕上面呈現出假花紋加跳格的鋸齒。為了修鋸齒我把解析度調回去，但在 Mac 上面柔和度就又沒了。我就這樣一直在這個死亡迴圈裡面跳針，一直找不到正確的處理方式。

後來發現，正確的方向應該是讓光團被畫得更細，細到不管在哪個顯示器上面，放大後的細節都是一樣的，不會因為螢幕光點呈現的密度而有所不同。

結論

這次的經驗讓我學到，要先搞懂成因，才知道哪些方法根本不可能成立。發現畫面太銳利後，一開始我很直覺地去降低解析度，繞了很久才發現那個方向本來就走不通，真正該調整的是光團本身的細緻度，是一次很混亂但也很好玩的學習經驗～

PS：以上的 Mac 跟 Windows 的螢幕不代表所有的 Mac 跟 Windows 作業系統的螢幕狀況，只是剛好我這兩個作業系統的螢幕有這樣不同的顯示，所以就以 Mac 跟 Windows 代稱～另外你可能也發現，背景線條的明亮度在四支影片裡看起來都不一樣，至於為什麼有的影片線條比較明顯，那又是另外一個故事了⋯⋯