準備工作

使用Amplify Shader Editor自帶的模型和貼圖搭建了一個簡單的場景:

搭建的簡單場景

把周圍的面片設置為靜態對象,然後在場景中添加反射探針,為後邊製作的玻璃提供反射。

反射探針烘焙出來的環境反射

實現邏輯

獲取模型在屏幕上的坐標,然後通過法線貼圖與屏幕坐標相加得出新的採樣坐標,使用新的採樣坐標對渲染的屏幕圖像進行紋理採樣,以實現折射效果。

換句話說,就是把渲染的圖像通過一張法線貼圖進行扭曲之後再顯示出來。

shader設置

玻璃材質更適合使用Specular工作流,所以shader的Light Model設置為 Standard Specular。

因為最終顯示的是扭曲之後的渲染圖像,並不是真正的透明折射效果,所以shader的Render Type仍然是Opaque。

而我們想等場景裏所有不透明的物體都渲染完了之後再渲染這此物體,確保截取的渲染圖像裏包含場景中完整的不透明物體,所以把shader的Render Queue設置為Transparent。

進入正題

創建一個名為Specular的顏色屬性,和一個名為Smoothness的屬性,分別連到shader對應的輸入通道

保存之後的材質效果:

使用Grab Screen Position獲取屏幕坐標,然後使用Component Mask縮小維度,只保留X和Y,然後鏈接到Grab Screen Color節點,對截取屏幕渲染的圖像進行採樣,然後鏈接給Albedo通道。

到此為止,我們實現了把截圖的屏幕圖像再顯示出來的效果:

使用Texture Object載入一張法線貼圖,然後被兩個Texture Sample引用(多次引用同一張貼圖,而不是使用兩張貼圖,更節省性能)。

Map1與屏幕坐標相加,得到的結果重新對屏幕圖像進行採樣,從而對圖像產生扭曲。添加一個名為Distortion的屬性(除以一個數值是為了縮小數值範圍,我這裡縮小了100倍),連到Map1的Scale,從而控制扭曲的強度。

Map2輸入到shader的Normal通道,添加一個名為Bumpiness的屬性,連到Map2的Scale,控制法線的強度。

屏幕渲染圖像鏈接到Albedo之前再乘以一個顏色屬性,方便對色彩進行控制。

效果演示

按照如下材質面板的設置,最終效果就是題圖的樣子了

Inspect
最終效果

玻璃扭曲動態展示效果:

扭曲動態效果

推薦閱讀:
相關文章