iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 12
0
Modern Web

WebGL 與 Three.js 初探系列 第 12

[Day12] 寫在 Three.js 之前 (2) - 光源淺談

  • 分享至 

  • xImage
  •  

要讓一個 3D 的場景更為逼真,除了材質之外,最重要的就是適當的光線了。

光線到達物體時,會因為物體的形狀反射部分的光線回來,所以才會有曲面的效果,並且依照材質的反射率不同,反射回來光線也會有變化。

主要的光源大致上分為三種:

  • 平行光:發出的光線是平行的,可以將太陽光想像成一種平行光
  • 環境光:環境的光線,散步在環境當中
  • 點光源:例如檯燈的光線就可以想像成一種點光源,會從一個點開始向所有的環境輻射。

環境光計算

最簡單的方式就是將物體的顏色跟環境光的顏色做分量相乘。

平行光

法向量(normal vector)

垂直於表面的向量,我們稱做法向量。當平行光水平照射的時候,光的強度會越強,如果不平行的話,則是依照入射角衰減,而垂直於平行光的亮度會最小。

我們可以用一個公式表達
http://ithelp.ithome.com.tw/upload/images/20161226/20103565IxgMkf7LVk.png

事實上這就是朗伯餘弦定理

計算平行光最重要的事情是找出頂點的法向量,這在多邊形或是不規則的形狀時,需要不少的運算,用 webGL 實現需要非常多程式碼。不過有 three.js 的幫忙我們可以很簡單就套用光源。

點光源

跟平行光唯一的差別在於我們需要計算點光源跟頂點的位置來決定強度。

這兩天的介紹,說明了光源以及透視轉換的原理,不過並沒有提到在 webGL 中是如何實現的。如果對實作有興趣的話,可以參考 learning opengl 這篇文章,雖然裡頭的內容是講 openGL,不過實現方式基本上都是相同的。

有了投影、光源基礎後,明天我們會開始介紹 three.js 以及基本的 API。


上一篇
[Day11 聖誕節特輯] Three.js - 畫一棵幾何聖誕樹吧!
下一篇
[Da13] Three.js API 簡介
系列文
WebGL 與 Three.js 初探30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言