【UE4】GAMES101 圖形學作業3：Blinn-Phong 模型與着色

總覽

• 在這次編程任務中，我們會進一步模擬現代圖形技術。我們在代碼中添加了Object Loader(用於加載三維模型), Vertex Shader 與Fragment Shader，並且支持了紋理映射。
• 而在本次實驗中，你需要完成的任務是:
  1. 修改函數rasterize_triangle(const Triangle& t) in rasterizer.cpp:
     在此處實現與作業2 類似的插值算法，實現法向量、顏色、紋理顏色的插值。
  2. 修改函數get_projection_matrix() in main.cpp:
     將你自己在之前的實驗中實現的投影矩陣填到此處，此時你可以運行./Rasterizer output.png normal來觀察法向量實現結果。
  3. 修改函數phong_fragment_shader() in main.cpp:
     實現Blinn-Phong 模型計算Fragment Color.
  4. 修改函數texture_fragment_shader() in main.cpp:
     在實現 Blinn-Phong 的基礎上，將紋理顏色視為公式中的kd，實現Texture Shading FragmentShader.
  5. 修改函數bump_fragment_shader() in main.cpp:
     在實現 Blinn-Phong 的基礎上，仔細閱讀該函數中的注釋，實現Bump mapping.
  6. 修改函數displacement_fragment_shader() in main.cpp:
     在實現Bump mapping 的基礎上，實現displacement mapping.

實現

• 版本 4.26.2
• 直接在UE4用材質實現。
• 原文地址

normal shader

• 材質代碼

  

Blinn-phong模型 phong_fragment_shader

• 計算公式

  

• HLSL 代碼

  • 注意模型放大后，相應系數也應該放大

  

Blinn-Phong模型 texture_fragment_shader

• 在 phong_fragment_shader 的基礎上，將 kd 改為貼圖輸入

• HLSL 代碼

  

Blinn-Phong模型 texture_fragment_shader （雙線性插值）

• 先水平方向上插值，再垂直方向上插值

  

• 將貼圖分辨率降低到 256x256 便於觀察和比較，並在 texture 設置中將 filter 方式改為 Neast

• 在texture_fragment_shader的上，對 texture 輸入進行自定義雙線性插值

• HLSL 代碼

  

Blinn-phong模型 bump_fragment_shader

• 直接代入公式，注意 y 和 z 的對換

• dU = kh * kn * (h(u+1/w,v)-h(u,v)) 中，h 代表范數（模長）

• HLSL 代碼

  

Blinn-phong模型 displacement_fragment_shader

• 將 bump_fragment_shader 中得到的法向量和位置作為光照計算公式的法向量和位置。

• HLSL 代碼

  

• 原博客地址

全家福