[Unity 教學] Shader Graph 使貼圖旋轉至指定角度

2024.09.08 / Unity 引擎
有時候我們會有要只旋轉貼圖而不旋轉模型的需求,當遇到這個狀況我們可以使用 URP/HDRP 的 Shader Graph 來輕易達成。本篇文章將帶給你於 Shader Graph 中的基礎操作「UV 旋轉」。

設置環境

  1. 開啟或建立一個 URP 或 HDRP 專案。
  2. 於 Assets 資料夾分別建立 Shaders 與 Textures 資料夾,用於存放渲染器和貼圖。
  3. 匯入一張測試貼圖至 Textures 資料夾。
  4. 於 Shaders 資料夾上滑鼠右鍵 > Create > Shader Graph > URP > Lit Shader Graph,建立 MyShader 渲染器。
  5. 雙點擊 MyShader 進入編輯介面。

建立基礎功能

  1. 建立 Texture2D 類型的欄位 MainTex。

  1. 將 MainTex 拖曳到畫面中間,並在後面建立並連接 Sample Texture 2D 的 Texture、Sample Texture 2D 的 RGBA 連接到渲染器的 Base Color,完成讓貼圖能夠顯示在測試模型上的設計。

建立貼圖旋轉功能

  1. 於空白處建立 UV 的 Rotate、Degrees To Radians 與另外建立一個 Float 欄位 (和建立 MainTex 的方法相同),Rotate 的 Out 連接到 Sample Texture 2D 的 UV、Degrees To Radians 的 Out 連接到 Rotate 的 Rotation、AngleRot 連接到 Degrees To Radians 的 In。

  1. 為了方便調整貼圖的旋轉角度,可將 AngleRot 的 Mode 調整為 Slider、Max 調整為 360 (轉一圈的角度)。

  1. 點擊左上角 Save Asset 儲存 MyShader 的編輯。
  2. 接下來在 MyShader 上點擊滑鼠右鍵 > Create > Material,建立 MyMat 材質球。

  1. 在場景中建立一個 Quad 來做為測試模型,並用 MyMat 取代預設的 Lit 材質球。

  1. 最後展開 Quad 下的 MyMat 材質球,將測試用貼圖指派到 MainTex 欄位,並試著滑動 AngleRot 的滑條,這時你應該就能自由調整貼圖的旋轉角度了!

相關文章

Ted Liou

雲科碩士在讀中,專注於 Unity C#、TouchDesigner 技術,常把技術筆記分享到部落格,偶爾還直接挪用文章來當教材的研究生。