光影在視覺中扮演重要的角色。在看一般的圖像時,因為缺少深度資訊,因此我們的腦其實是藉由影子來判斷深度。就像下圖,左邊有影子,所以感覺有站在地面上,右邊的則看起來像飛起來似的(難以判斷在實際空間中的位置)
有沒有影子,差別很大! |
因此當我開始做一些 AR 小專案時,就發現這件事情非常重要。這篇文章會稍微解說如何使用 Unity 在 Vuforia 中如何實作出光影。不過這個概念應該也可套用到其他的 SDK 裡面。
問題 - 3D 的 Rendering
在 Unity 中,如果你想要有影子,就一定要有一塊 Mesh。但在 AR 中,如果我們加上 Mesh,就看不到攝影機拍到的畫面。
當在底部放上 Plane 後,就看不到實際的桌面了 |
我也嘗試使用半透明的材質,但發現 Unity 內建的 Shader 並沒辦法在半透明的 Mesh 上產生影子。
使用半透明材質,就看不到投出來的影子了 |
嘗試 - 分開計算光影的 Render
想到要分開運算,我第一個就想到類似 Multiply 或 Additive 這類的效果。如果可以另外產生一張只有光影的圖片,然後再用 post effect 把光影疊上去,應該就能產生不錯的效果。
我把東西分成 3 個 Layer -- Background、Light and Shadow、3D Object Layer,分別用不同 Camera 畫出來後,再合成它們。
Background Layer,只有手機鏡頭拍到的畫面 |
Light and Shadow Layer,只畫出光和影子 |
3D Object layer,只有模型物件 |
最後 3 個圖層混在一起的結果 |
最後的結果就像上圖一樣,不過因為桌面顏色很深,所以光影有點不明顯。下面這個 Demo 影片會比較清楚:
影片教學
一步一步圖文教太累了,這邊就列出一些關鍵重點,你可以用你自己的方法實做看看。如果不清楚的話,最下面有一個從頭到尾的操作影片,可以參考看看。
- 在影片中有用到一些自己寫的 Script,可以在我的 Github 中下載:
https://github.com/newyellow/Unity-Vuforia-AR-Tools - 你需要 3 個 Camera 來分別畫出 3 個 Layer,這 3 個 Camera 的視角必須要和 Vuforia 的 ARCamera 一模一樣。可以用 CopyCameraData.cs 這支程式
- 由於目前 Unity 無法做到把一個物件的影子 render 到另一個 layer 上,所以你需要把所有物件都拷貝一份,並把影子那個 layer 的 Mesh Renderer 的 cast shadow 選項設為 "Shadow Only"
- 把圖疊在一起部分,我使用 Colorful FX 的 blend。你也可以使用其他 Post-Effect 的程式
- 如果你買了 Colorful FX,影片中還有用到 RenderTextureToBlend.cs 這支程式。但如果你是用其他 Post-Effect 外掛的話,這支就不適用
以上,遇到問題歡迎發問唷!
留言
張貼留言