2022年8月22日 星期一

Viewport豆知識:Untiy Vs Unreal

今天在Unreal把MousePosition映射到NDC

(Editor Mode)

-1 < Xn < 1

-1 < Yn < 1


再從NDC映射到Camera的近平面上的點P時

Field of View = θ

ratio = screen width / screen height


scaleU = Xn * tan(θ/2) * ratio

scaleV = Yn * tan(θ/2) 

P = CameraPos + CameraX

 + CameraY * scaleU

 + CameraZ * scaleV

(Unreal的Camera是X軸和近平面垂直)

發現不管怎麼結果都很奇怪


後來先把ratio拿掉

scaleU = Xn * tan(θ/2) 

scaleV = Yn * tan(θ/2) 

才看出Unreal和Unity處理NDC到P的做法是不一樣的


Unreal使用的是

scaleU = Xn * tan(θ/2) 

scaleV = Yn * tan(θ/2) /ratio

假設 ratio = 2、θ = π/2 (90度)

當 Yn = 0.5, 有 scalueV = 1 


Unity使用的是

scaleU = Xn * tan(θ/2) * ratio

scaleV = Yn * tan(θ/2) 

假設 ratio = 2、θ = π/2 (90度)

當 Xn = 1, 有 scalueU = 2 


這代表,在Unity裡

你把Screen Width拉長時

水平方向會看到更多的東西


而在Unreal裡

當你把Screen Width拉長時

水平方向看到的範圍不變

但垂直方向看到的東西會變少


乘下的2個Case

在Unity裡, 把Screen Height拉長時


在Unreal裡, 把Screen Height拉長時


2022年6月3日 星期五

色碼表

到底色碼表裡的值,是sRGB(Gamma)還是raw(Linear)呢?

raw(Linear) ➡️ 本色
sRGB(Gamma) ➡️ 提亮後的本色

為什麼要提亮
因為銀幕輸出時存在著衰減

就是1個後面出了包
前面只好跟著上補丁的概念
欸?

前置作業

打開色碼表

好 就決定是你了

在網路上找一張照片

好 就決定是你了

Texture 101

建立測試環境


建1個Texture Node,連到FragmentOutput Node

你知道的 一般的照片都是sRGB(Gamma)
我們讓它回到raw(Linear)

raw(弱)

因為raw用銀幕輸出會變暗
所以我們再把FragmentOutput做Gamma
亮回來

開始測試

#EBD3E8
aka rgb(234, 209, 231)
我們為它拉一個Color3 Node


整個實驗的邏輯是這樣的

假如 input 是 Raw(弱)
做了gamma (增強)
output 就會正常


現在我們讓
#EBD3E8
aka rgb(234, 209, 231)
變成input

可以發現output比原圖亮

這代表 ➡️
#EBD3E8
aka rgb(234, 209, 231)
不是Raw
是「提亮」過的數值

變換回raw後,output的結果就正常了

提亮 VS 本色

#EBD3E8
在sRGB界 aka rgb(234, 209, 231)

rgb(234, 209, 231)

但是在raw界
它是 rgb(211, 165, 205)

右邊是經螢幕衰減後看到的raw 

rgb(211, 165, 205)

🧐

加碼

PBRMetallicRoughness Node的結果
應該是Linear space

小畫家是你餵什麼給它
它就直接用銀幕輸出什麼
(HTML5也是這樣)

但一般遊戲都會在Linear 計算光照結果
最後輸出時再做提亮
(WebGL也需要這樣)

結語

色碼表的值是sRGB