跳到主要內容

發表文章

AR 中產生光影效果 - Projector 法

在我之前的文章 AR 中運算光影 - Unity & Vuforia  中講到關於用 Unity 和 Vuforia,要在 AR 中產生光影效果的問題,還有實作的方法。那篇文章中使用 Post-Effect 來把光影另外疊到畫面中。 之前那個方法雖然可以用,但是有一個很討人厭的事情:由於 Unity 沒辦法把物件和它的影子 Render 到不同 Layer,所以要產生光影的話,物件需要額外拷貝一份,再指派給不同 Layer。一方面效能很差(其實我沒測過,但應該很差 XD),但最主要還是管理起來非常麻煩,Hierarchy 會很混亂。 因此,就嘗試研究其他的方法,後來便發現了使用 Unity 內建的 Projector 的方法。而這個方法也是我 A Week A Project 的作品中持續使用的方法(之前的 Post-Effect 法只在 Paper House Demo 中使用過)。 這個方法的實作非常簡單,只要製作環境的 3D Model,再新增一個跟 AR Camera 視角一模一樣的 Projector,把真實畫面的影像給投上去即可。 Week 6 - Door 使用 Projector 法的實際配置情況 光聽文字敘述可能有點模糊,可以參考下面的操作示範,裡面附有說明文字。這個操作還有幾個重點: 教學裡面用到的程式你都可以在我的 Github 專案 Unity Vuforia AR Tools 裡面找到 Projector 的 Shader 有 Light、Additive、Multiply 等,使用不同的 Shader,用來當作地板的顏色也要改變,比如說用 Additive 就要用深色地板、Multiply 就要用淺色地板 Additive Shader 好像不在 Unity 的 Standard Assets 裡面,我是查 Google 找到修改方法的,我上面提供的 Github 專案裡面有包含這個 Shader 要用 Projector 有效產生光影,要注意周圍光源的控制,還有作為環境的 Mesh 顏色。比如說用 Multiply 法,如果地板是純白色,會發現光打不上去,因為純白已經是最亮的顏色,無法再更亮。所以通常我都會把周圍環境設定為灰色,這樣光影就會比較漂亮,但有一個小缺點是整體看起來會相當灰
最近的文章

AR 中運算光影 - Unity & Vuforia

光影在視覺中扮演重要的角色。在看一般的圖像時,因為缺少深度資訊,因此我們的腦其實是藉由影子來判斷深度。就像下圖,左邊有影子,所以感覺有站在地面上,右邊的則看起來像飛起來似的(難以判斷在實際空間中的位置) 有沒有影子,差別很大! 因此當我開始做一些 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 個