PhiloGL學習（5）——神說要有光，便有了光

前言

上一篇文章中介紹了如何創建三維對象及加載皮膚，本文為大家介紹如何為場景添加光源。

一、 原理分析

光在任何地方都是非常重要的，無論在哪里都說是要發光發熱，光和熱也是分不開的。光線分為點光源和線光源，所謂點光源和線光源也是個相對的概念，站在地球上我們可以認為太陽光是線光源，其實從更大的尺度來看太陽光也是個點光源，只是我們站在地球上來看光線基本上是平行的了，所以可以認為是線光源。所有問題，站在不同的角度來看就會發生變化。

光線還有另外幾個概念，環境光（ambient light）、漫反射光（diffuse light）、鏡面反射光（specular light）。所謂環境光是指入射光均勻地從周圍環境入射至景物表面并等量地向各個方向反射出去，通常物體表面還會受到從周圍環境來的反射光（地面、天空、墻壁等）的照射，這些統稱為環境光。漫反射光表示特定光源在景物表面的反射光中那些向空間各方向均勻反射出去的光。鏡面反射光為朝一定方向的反射光，如點光源照射一個金屬球時會在表面形成一塊特定亮的區域，它是光源在金屬球面上產生的鏡面反射光，鏡面反射光與物體的光滑程度有關系。

對于3D也是一樣，我這幾年搞的比較多的是地理信息系統，那么為什么還要學習3D以及之前的大數據等技術呢？首先我對學習充滿了無限熱情，碰到新技術就想學一下，當然這不見得是個好事情，因為一個人不可能把什么都學會，必須要有所取舍，否則就會像我一樣導致什么都略懂但都不精通。其次任何知識都是有用的，不知道哪天就會用到，比如Hadoop集群，剛開始感覺很高大上就學了一點，后面果然需要使用這種分布式計算技術來處理遙感影像，于是Geotrellis很快就上手了，關于3D我認為也是同樣如此，這個說不定就會在將來的工作中用到，比如傾斜攝影以及點云等等技術。

騷年們，讓我們開始今天的學習吧。

二、 創建光源

首先，我們必須清楚，光源是加在整個場景中的而不是某個對象，就像太陽光打到地球上，是整個環境都有了光，而不是說只是某個對象有了光。對待PhiloGL也是一樣，直接從場景中獲取光線設置信息，并對其進行設置。

2.1 場景配置

所以在onLoad事件中添加如下代碼：

var scene = app.scene
var lightConfig = scene.config.lights;
lightConfig.enable = true;

lightConfig就是對整個場景光源設置的變量。首先設置其enbale屬性為true，表示使用光源。上面分析的幾種光源均可以添加或者不添加在特定場景中，并可以任意設置其光源位置及顏色分量等。

2.2 線光源

設置lightConfig屬性的directional的direction和color屬性。

lightConfig.directional.direction = {x: +light.x,y: +light.y,z: +light.z
};
lightConfig.directional.color = {r: +light.r,g: +light.g,b: +light.b
};

其中direction表示光線方向，color表示光線顏色。

• 坐標系

此處需要補充一個之前早已涉及但被我忽略的問題——坐標系。坐標系是任何圖形學的基礎，居然遺漏了此問題。

WEbGL同樣采用笛卡爾左手坐標系，其Z軸正向為從屏幕指向用戶的方向，X軸正向為從屏幕中央指向屏幕右側的方向，Y軸正向為從屏幕中央指向屏幕上側的方向。

此處light是我定義的變量，存儲了光線的上述信息，注意此處變量前的+，此符號在js中的意義為將其他類型的數據轉換為number，此處因為可以直接定義成number類型，所以不寫也可。

此處還有一個問題，經過我實際測試，線光源的x、y、z為反向，即真正光線的向量方向為(-x,-y,-z)。當然此處可能是由于我對坐標系理解有誤或者實驗有誤，如果如此，歡迎批評指正。

2.3 點光源

點光源直接設置lightConfig的points屬性。

lightConfig.points = {diffuse: { // 散射光r: +light.dr,g: +light.dg,b: +light.db},specular: { // 反射光r: +light.sr,g: +light.sg,b: +light.sb},position: {x: +light.x,y: +light.y,z: +light.z}
};

其中diffuse表示散射光，specular表示散射光，position表示點光源的位置，此處位置為實際的光源點的位置。

2.4 環境光

設置lightConfig的ambient屬性。

lightConfig.ambient = {r: +ambient.r,g: +ambient.g,b: +ambient.b
};

環境光不需要設置位置，無論物體處在何處以及哪一面均會被射上此光。

2.5 另外一種寫法

采用上面的寫法的好處在于我們可以改變光線的值或者光線的位置，其方法如同在第二篇文章中講述的動畫，直接改變light的值即可。當然如果為固定我們還可以直接寫在PhiloGL的配置中，如下：

PhiloGL('test1', {scene: {lights: {directional: {color: {r: 1, g: 1, b: 1},direction: {x: 0, y: 0, z: 0}}}},
})

這是線光源的設置方法，可以看出兩種方式寫法實質相同。點光源寫法相同。

三、 總結

本文簡單介紹了如何設置光源。到這里PhiloGL的基礎以及WebGL的基礎我們已經基本全部掌握了，下一篇文章介紹一個案例，做一個自轉的地球及圍繞其公轉的地球。