three.js 源碼注釋（四十八）Material /MeshBasicMaterial.js

標籤：webgl   3d   圖形   web3d   three.js   

商域無疆 (http://blog.csdn.net/omni360/)

本文遵循“署名-非商業用途-保持一致”創作公用協議

轉載請保留此句：商域無疆 -  本部落格專註於 敏捷開發及移動和物聯裝置研究：資料視覺效果、GOLANG、Html5、WEBGL、THREE.JS，否則，出自本部落格的文章拒絕轉載或再轉載，謝謝合作。

俺也是剛開始學,好多地兒肯定不對還請見諒.

以下代碼是THREE.JS 源碼檔案中Material/MeshBasicMaterial.js檔案的注釋.

更多更新在 : https://github.com/omni360/three.js.sourcecode

/** * @author mrdoob / http://mrdoob.com/ * @author alteredq / http://alteredqualia.com/ * * parameters = { *  color: <hex>, *  opacity: <float>, *  map: new THREE.Texture( <Image> ), * *  lightMap: new THREE.Texture( <Image> ), * *  specularMap: new THREE.Texture( <Image> ), * *  alphaMap: new THREE.Texture( <Image> ), * *  envMap: new THREE.TextureCube( [posx, negx, posy, negy, posz, negz] ), *  combine: THREE.Multiply, *  reflectivity: <float>, *  refractionRatio: <float>, * *  shading: THREE.SmoothShading, *  blending: THREE.NormalBlending, *  depthTest: <bool>, *  depthWrite: <bool>, * *  wireframe: <boolean>, *  wireframeLinewidth: <float>, * *  vertexColors: THREE.NoColors / THREE.VertexColors / THREE.FaceColors, * *  skinning: <bool>, *  morphTargets: <bool>, * *  fog: <bool> * } *//*///MeshBasicMaterial方法根據參數parameters建立mesh(網格)的基本材質類型,parameters參數的格式看上面.MeshBasicMaterial對象的功能函數採用/// 定義構造的函數原型對象來實現.大部分屬性方法繼承自材質的基類Material.*////<summary>MeshBasicMaterial</summary>///<param name ="parameters" type="String">string類型的JSON格式材質屬性參數</param>///<returns type="MeshBasicMaterial">返回MeshBasicMaterial,線段材質.</returns>THREE.MeshBasicMaterial = function ( parameters ) {THREE.Material.call( this );//調用Material對象的call方法,將原本屬於Material的方法交給當前對象MeshBasicMaterial來使用.this.color = new THREE.Color( 0xffffff ); // emissive//顏色屬性,自發光顏色,顏色值用十六進位數值,預設是0xffffffthis.map = null;//普通貼圖貼圖,預設為null/*********************************為什麼要用Lightmapping**************************************************************************參考:http://blog.sina.com.cn/s/blog_5b6cb9500101cplo.html1.為什麼要用Lightmapping?簡單來說就是即時燈光計算十分耗時，隨著光源越多會倍增計算耗時。使用Lightmap類比燈光帶來的效果，便不用去計算燈光，會帶來效能上的大大提升。當然你不用燈光效果也是沒問題的，具體還是看項目需求。最簡單的直接在3dmas或maya裡面烘培完貼圖頂點色也行。***************************************************************************************************************************/this.lightMap = null;//光照貼圖,預設為nullthis.specularMap = null;//高光貼圖,預設為nullthis.alphaMap = null;//透明通道提額度,預設為nullthis.envMap = null;//環境貼圖,預設為null// TEXTURE CONSTANTS//紋理常量,用來設定材質混合模式,有//THREE.MultiplyOperation,  相乘,photoshop中的圖層混合翻譯成正片疊底//THREE.MixOperation,   //混合模式//THREE.AddOperation,   //增加模式//參考: http://avnpc.com/pages/photoshop-layer-blending-algorithm//參考://TODO: 是不是還可以實現更多的模式?// Normal正常模式 // Dissolve溶解模式 // Dancing Dissolve動態溶解模式 // Darken變暗模式 // Multiply正片疊底模式 // Linear Burn線性加深模式 // Color Burn顏色加深模式 // Classic Color Burn為相容早版本的Color Burn模式 // Add增加模式 // Lighten變亮模式 // Screen螢幕模式 // Linear Dodge線性減淡模式 // Overlay疊加模式 // Soft Light柔光模式 // Hard Light強光模式 // Liner Light線性加光模式 // Vivid Light清晰加光模式 // Din Light阻光模式 // Hard Mix強光混合模式 // Difference差別模式 // Classic Difference相容老版本的差別模式 // Exclusion排除模式 // Hue色相模式 // Saturation飽和度模式 // Color顏色模式 // Luminosity高度模式。 // 上面所列的層模式，是通上下層的色彩通道混合產生影響變化，而下層的層模式則是通過層的Alpha通道影響混合變化。 // Stencil Alpha：Alpha通道模式 // Stencil Luma：亮度模式 // Slihouette Alpha：Alpha通道輪廓 // Slihouette Luma：亮度輪廓 // Alpha Add：Alpha添加 // Luminescent Premul：冷光模式。/****************混合模式公式***************************************************************************************************************Photoshop圖層混合模式計算公式大全 關於photoshop的圖層混合模式，大家一定都非常熟悉了，我在這裡把各種混合模式的計算公式都詳細的描述一便，希望能夠對大家理解圖層的混合模式有所協助，編寫倉促，不足之處請多批評指正。混合模式可以將兩個圖層的色彩值緊密結合在一起，從而創造出大量的效果。在這些效果的背後實際是一些簡單的數學公式在起作用。下面我將介紹photoshop cs2中所有混合模式的數學計算公式。另外還介紹了不透明度。下面所介紹的公式僅適用於RGB映像。對於Lab顏色映像而言，這些公式將不再適用。Opacity 不透明度C=d*A+(1-d)*B相對於不透明度而言，其反義就是透明度。這兩個術語之間的關係就類似於正負之間的關係：100%的不透明度就是0%的透明度。該混合模式相對來說比較簡單，在該混合模式下，如果兩個圖層的疊放順序不一樣，其結果也是不一樣的（當然50%透明除外）。該公式中，A代表了上面圖層像素的色彩值（A=像素值/255），d表示該層的透明度，B代表下面圖層像素的色彩值（B=像素值/255），C代表了混合像素的色彩值（真實的結果像素值應該為255*C）。該公式也應用於層蒙板，在這種情況下，d代表了蒙板圖層中給定位置像素的亮度，下同，不再敘述。Darken 變暗B<=A: C=BB>=A: C=A該模式通過比較上下層像素後取相對較暗的像素作為輸出，注意，每個不同的色彩通道的像素都是獨立的進行比較，色彩值相對較小的作為輸出結果，下層表示疊放次序位於下面的那個圖層，上層表示疊放次序位於上面的那個圖層，下同，不再敘述。Lighten 變亮B<=A: C=AB>A: C=B該模式和前面的模式是相似，不同的是取色彩值較大的（也就是較亮的）作為輸出結果。 Multiply 正片疊底C=A*B該效果將兩層像素的標準色彩值（基於0..1之間）相乘後輸出，其效果可以形容成：兩個投影片疊加在一起然後放映，透射光需要分別通過這兩個投影片，從而被削弱了兩次。Screen 濾色C=1-(1-A)*(1-B)也可以寫成 1-C=(1-A)*(1-B)該模式和上一個模式剛好相反，上下層像素的標準色彩值反相後相乘後輸出，輸出結果比兩者的像素值都將要亮（就好像兩台投影機分別對其中一個圖層進行投影后，然後投射到同一個螢幕上）。從第二個公式中我們可以看出，如果兩個圖層反相後，採用Multiply模式混合，則將和對這兩個圖層採用Screen模式混合後反相的結果完全一樣。Color Dodge 顏色減淡C=B/(1-A)該模式下，上層的亮度決定了下層的暴露程度。如果上層越亮，下層擷取的光越多，也就是越亮。如果上層是純黑色，也就是沒有亮度，則根本不會影響下層。如果上層是純白色，則下層除了像素為255的地方暴露外，其他地方全部為白色（也就是255，不暴露）。結果最黑的地方不會低於下層的像素值。Color Burn 顏色加深C=1-(1-B)/A該模式和上一個模式剛好相反。如果上層越暗，則下層擷取的光越少，如果上層為全黑色，則下層越黑，如果上層為全白色，則根本不會影響下層。結果最亮的地方不會高於下層的像素值。Linear Dodge 線形減淡C=A+B將上下層的色彩值相加。結果將更亮。Linear Burn 線形加深C=A+B-1如果上下層的像素值之和小於255，輸出結果將會是純黑色。如果將上層反相，結果將是純粹的數學減。Overlay 疊加B<=0.5: C=2*A*BB>0.5: C=1-2*(1-A)*(1-B)依據下層色彩值的不同，該模式可能是Multiply，也可能是Screen模式。上層決定了下層中間調位移的強度。如果上層為50%灰，則結果將完全為下層像素的值。如果上層比50%灰暗，則下層的中間調的將向暗地方位移，如果上層比50%灰亮，則下層的中間調的將向亮地方位移。對於上層比50%灰暗，下層中間調以下的色帶變窄（原來為0~2*0.4*0.5，現在為0~2*0.3*0.5），中間調以上的色帶變寬（原來為2*0.4*0.5~1，現在為2*0.3*0.5~1）。反之亦然。Hard Light 強光A<=0.5: C=2*A*BA>0.5: C=1-2*(1-A)*(1-B)該模式完全相對應於Overlay模式下，兩個圖層進行次序交換的情況。如過上層的顏色高於50%灰，則下層越亮，反之越暗。Soft Light 柔光A<=0.5: C=(2*A-1)*(B-B*B)+BA>0.5: C=(2*A-1)*(sqrt(B)-B)+B該模式類似上層以Gamma值範圍為2.0到0.5的方式來調製下層的色彩值。結果將是一個非常柔和的組合。Vivid Light 亮光A<=0.5: C=1-(1-B)/2*AA>0.5: C=B/(2*(1-A))該模式非常強烈的增加了對比，特別是在高亮和陰暗處。可以認為是陰暗處應用Color Burn和高亮處應用Color Dodge。Linear Light 線形光C=B+2*A-1相對於前一種模式而言，該模式增加的對比要弱些。其類似於Linear Burn,只不過是加深了上層的影響力。Pin Light 點光B<2*A-1: C=2*A-12*A-1<B<2*A: C=BB>2*A: C=2*A該模式結果就是導致中間調幾乎是不變的下層，但是兩邊是Darken和Lighte年模式的組合。Hard Mix 實色混合A<1-B: C=0A>1-B: C=1該模式導致了最終結果僅包含6種基本顏色，每個通道要麼就是0，要麼就是255。Difference 差值C=|A-B|上下層色調的絕對值。該模式主要用於比較兩個不同版本的圖片。如果兩者完全一樣，則結果為全黑。Exclusion 排除C=A+B-2*A*B亮的圖片地區將導致另一層的反相，很暗的地區則將導致另一層完全沒有改變。Hue 色相HcScYc =HASBYB輸出映像的色調為上層，飽和度和亮度保持為下層。對於灰色上層，結果為去色的下層。Saturation 飽和度HcScYc =HBSAYB輸出映像的飽和度為上層，色調和亮度保持為下層。Color 顏色HcScYc =HASAYB輸出映像的亮度為下層，色調和飽和度保持為上層。Luminosity 亮度HcScYc =HBSBYA輸出映像的亮度為上層，色調和飽和度保持為下層。Dissolve 溶解該模式根本不是真正的溶解，因此並不是適合Dissolve這個稱謂，其表現僅僅和Normal類似。其從上層中隨機抽取一些像素作為透明，使其可以看到下層，隨著上層透明度越低，可看到的下層地區越多。如果上層完全不透明，則效果和Normal不會有任何不同。******************************混合模式公式**************************************************************************************************/this.combine = THREE.MultiplyOperation;//混合模式this.reflectivity = 1;//反射率,預設為1this.refractionRatio = 0.98;//折射率,預設為0.98this.fog = true;//霧效,預設開啟// shading// 著色處理/*********************著色方式**************************************************************************著色方式         絕大多數的3D物體是由多邊形（polygon）所構成的，它們都必須經過某些著色處理的手續，才不會以線結構（wireframe）的方式顯示。         這些著色處理方式有差到好，依次主要分為FlatShading、GouraudShading、PhoneShading、ScanlineRenderer、Ray-Traced。        FlatShading（平面著色）            也叫做“恒量著色”，平面著色是最簡單也是最快速的著色方法，每個多邊形都會被指定一個單一且沒有變化的顏色。這種方法雖然會產生出不真實            的效果，不過它非常適用於快速成像及其它要求速度重於細緻度的場合，如：產生預覽動畫。        GouraudShading（高洛德著色/Gouraud Shading）            這種著色的效果要好得多，也是在遊戲中使用最廣泛的一種著色方式。它可對3D模型各頂點的顏色進行平滑、融合處理，將每個多邊形上的每個點            賦以一組色調值，同時將多邊形著上較為順滑的漸層色，使其外觀具有更強烈的即時感和立體動感，不過其著色速度比平面著色慢得多。        PhoneShading（補色著色）            首先，找出每個多邊形頂點，然後根據插入值的方法，算出頂點間算連線上像素的光影值，接著再次運用線性插值處理，算出其他所有像素高氏著            色在取樣計算時，只顧及每個多邊形頂點的光影效果，而補色著色卻會把所有的點都計算進去。        ScanlineRenderer（掃描線著色）            這是3ds Max的預設渲染方式，它是一種基於一組連續水平線的著色方式，由於它渲染速度較快，一般被使用在預覽情境中。        Ray-Traced（光線跟蹤著色）            光線跟蹤是真實按照物理照射光線的入射路徑投射在物體上，最終反射回攝象機所得到每一個像素的真實值的著色演算法，由於它計算精確，所得到的            圖象效果優質，因此製作CG一定要使用該選項。        Radiosity（輻射著色）            這是一種類似光線跟蹤的特效。它通過制定在情境中光線的來源並且根據物體的位置和反射情況來計算從觀察者到光源的整個路徑上的光影效果。在            這條線路上，光線受到不同物體的相互影響，如：反射、吸收、折射等情況都被計算在內。        glShadeModel( GLenum mode )可以設定的著色模型有：GL_SMOOTH和GL_FLAT            GL_FLAT恒定著色：對點，直線或多邊形採用一種顏色進行繪製，整個圖元的顏色就是它的任何一點的顏色。            GL_SMOOTH平滑著色：用多種顏色進行繪製，每個頂點都是單獨進行處理的，各頂點和各圖元之間採用均勻插值。*********************著色方式**************************************************************************/this.shading = THREE.SmoothShading;//著色方式,THREE.SmoothShading平滑著色：用多種顏色進行繪製，每個頂點都是單獨進行處理的，各頂點和各圖元之間採用均勻插值。//還有以下幾種THREE.NoShading = 0;    //不著色???? //THREE.FlatShading = 1;  //GL_FLAT恒定著色：對點，直線或多邊形採用一種顏色進行繪製，整個圖元的顏色就是它的任何一點的顏色。this.wireframe = false;//以線框方式渲染幾何體.預設為falsethis.wireframeLinewidth = 1;//線框的寬度.this.wireframeLinecap = 'round';//線框的線段端點的樣式,預設為round,和html的canvas裡的屬性一樣也有"butt", "round", "square"this.wireframeLinejoin = 'round';//線框的線段邊角的類型，當兩條線交匯時,預設為round,和html的canvas裡的屬性一樣也有"round", "bevel", "miter"//TODO: 要給線框設定線型怎麼辦?this.vertexColors = THREE.NoColors;//頂點顏色,預設初始化為THREE.NoColors.當然還可以有THREE.NoColors / THREE.VertexColors / THREE.FaceColors等選項,這裡顯示出了javascript的靈活性了.this.skinning = false;//定義材質是否使用蒙皮,預設初始化為falsethis.morphTargets = false;//定義材質是否設定目標變形動畫,預設為falsethis.setValues( parameters );//調用Material類的setValues方法,將參數parameters賦值給當前LineBasicMaterial材質的屬性.};/*****************************************************************下面是MeshBasicMaterial對象的方法屬性定義,繼承自Material*************************************************************/THREE.MeshBasicMaterial.prototype = Object.create( THREE.Material.prototype );/*clone方法///clone方法複製MeshBasicMaterial對象,*////<summary>clone</summary>///<param name ="material" type="MeshBasicMaterial">MeshBasicMaterial對象,可有可無.</param>///<returns type="MeshBasicMaterial">返回複製的MeshBasicMaterial對象</returns>THREE.MeshBasicMaterial.prototype.clone = function () {//以下是將材質的屬性一一進行複製var material = new THREE.MeshBasicMaterial();THREE.Material.prototype.clone.call( this, material );material.color.copy( this.color );material.map = this.map;material.lightMap = this.lightMap;material.specularMap = this.specularMap;material.alphaMap = this.alphaMap;material.envMap = this.envMap;material.combine = this.combine;material.reflectivity = this.reflectivity;material.refractionRatio = this.refractionRatio;material.fog = this.fog;material.shading = this.shading;material.wireframe = this.wireframe;material.wireframeLinewidth = this.wireframeLinewidth;material.wireframeLinecap = this.wireframeLinecap;material.wireframeLinejoin = this.wireframeLinejoin;material.vertexColors = this.vertexColors;material.skinning = this.skinning;material.morphTargets = this.morphTargets;return material;//返回複製的MeshBasicMaterial對象};

商域無疆 (http://blog.csdn.net/omni360/)

本文遵循“署名-非商業用途-保持一致”創作公用協議

轉載請保留此句：商域無疆 -  本部落格專註於 敏捷開發及移動和物聯裝置研究：資料視覺效果、GOLANG、Html5、WEBGL、THREE.JS，否則，出自本部落格的文章拒絕轉載或再轉載，謝謝合作。

以下代碼是THREE.JS 源碼檔案中Material/MeshBasicMaterial.js檔案的注釋.

更多更新在 : https://github.com/omni360/three.js.sourcecode

three.js 源碼注釋（四十八）Material /MeshBasicMaterial.js