JavaFX 3D（3）PhongMaterial 貼圖處理

JavaFX 3D（2）基本3D物件 << 前情

本文將繼續介紹JavaFX 3D如何處理貼圖。

JavaFX使用Phong Shading著色法，又稱為Phong Interpolation或Normal-Vector Interpolation Shading，是由美國越南裔學者Bùi Tường Phong所發明，1973年發表於博士論文 “Illumination of Computer-Generated Images", Department of Computer Science, University of Utah, UTEC-CSs-73-129, July 1973，因此以其姓氏Phong (裴)命名。

Phong Reflection Model是由Ambient Light (環境光)、Diffuse Light (漫射光) 與Specular Light (反射光) 三者所組成。

JavaFX以PhongMaterial類別處理Phong Material，並細分為Bump Map, Diffuse Map, Self Illumination Map, Specular Map, Diffuse Color, Specular Color, 與Specular Power，前四者Map用以設定貼圖、接著Color用以設定著色、最後Power用以設定強度。

Bump Mapping譯為凹凸貼圖或皺面貼圖，是由James F. Blinn於1978年發表於Computer Graphics的Simulation of Wrinkled Surfaces論文中所提出，為一種模擬凹凸與皺紋的技術，在處理待渲染物體的照明計算（Lighting Calculation）之前，加上擾動（Perturb）處理，讓表面更加豐富與細緻呈現，使物體更加接近原有物體的模樣，其中法線貼圖（Normal Mapping）是Bump Mapping常用的技術之一。

Diffuse Mapping譯為漫射貼圖或擴散貼圖，是3D軟體最常使用的貼圖技術之一，Diffuse Mapping將貼圖圖像直接包覆於3D物體的表面上，並顯示圖像原有的顏色。

Self Illumination Mapping譯為自體發光貼圖，將貼圖之後的3D物體調高其明亮度，產生在不受光的情況之下也能發光的效果，如同自體發光一般。

Specular Mapping譯為反射貼圖或鏡面貼圖，用以表現物體反射光的強度與材質高光部份的顏色，主要用於特殊效果。在處理反射貼圖時，越白的部份表示材質顯示越強烈的光澤。

Diffuse Color與Specular Color分別對應於Diffuse Mapping與Specular Mapping，用以設定漫射光與反射光的顏色。

Specular Power則是設定反射光的強度。

PhongMaterial類別定義以下屬性：

• bumpMap：定義凹凸貼圖。
• diffuseColor：定義漫射光的顏色。
• diffuseMap：定義漫射貼圖。
• selfIlluminationMap：定義自體發光貼圖。
• specularColor：定義反射光的顏色。
• specularMap：定義反射貼圖。
• specularPower：定義反射光的強度。

請參考以下範例分別示範以各種不同的組合所產生的效果。以下範例示範以setBumpMap()方法設定Bump Map貼圖：

// 建立Sphere物件
Sphere sphere = new Sphere(200); 
sphere.setTranslateX(200); 
sphere.setTranslateY(200); 

// 建立PhongMaterial物件
PhongMaterial material = new PhongMaterial(); 
// 設定Bump Map貼圖
material.setBumpMap(new Image(getClass().getResourceAsStream(  
  "images/earth_normal_map.jpg"), 512, 256, true, true)); 

sphere.setMaterial(material); 
...

【執行結果】

以下範例示範以setDiffuseMap()方法設定Difffuse Map貼圖：

// 建立Sphere物件
Sphere sphere = new Sphere(200); 
sphere.setTranslateX(200); 
sphere.setTranslateY(200); 

// 建立PhongMaterial物件
PhongMaterial material = new PhongMaterial(); 
// 設定Difffuse Map貼圖
material.setDiffuseMap(new Image(getClass().getResourceAsStream(
  "images/earth_diffuse_map.jpg"), 512, 256, true, true)); 

sphere.setMaterial(material); 
...

【執行結果】

以下範例示範以setSpecularMap()方法設定Specular Map貼圖：

// 建立Sphere物件
Sphere sphere = new Sphere(200); 
sphere.setTranslateX(200); 
sphere.setTranslateY(200); 

// 建立PhongMaterial物件
PhongMaterial material = new PhongMaterial(); 
// 設定Specular Map貼圖
material.setSpecularMap(new Image(getClass().getResourceAsStream(
  "images/earth_specular_map.jpg"), 512, 256, true, true));

sphere.setMaterial(material); 
...

【執行結果】

以下為同時設定三種貼圖，產生立體的效果：

// 建立Sphere物件
Sphere sphere = new Sphere(200); 
sphere.setTranslateX(200); 
sphere.setTranslateY(200); 

// 建立PhongMaterial物件
PhongMaterial material = new PhongMaterial(); 
// 設定Bump Map貼圖
material.setBumpMap(new Image(getClass().getResourceAsStream(  
  "images/earth_normal_map.jpg"), 512, 256, true, true)); 
// 設定Difffuse Map貼圖
material.setDiffuseMap(new Image(getClass().getResourceAsStream(
  "images/earth_diffuse_map.jpg"), 512, 256, true, true)); 
// 設定Specular Map貼圖
material.setSpecularMap(new Image(getClass().getResourceAsStream(
  "images/earth_specular_map.jpg"), 512, 256, true, true));

sphere.setMaterial(material); 
...

【執行結果】

以下範例示範以setDiffuseColor()方法設定Diffuse Color：

// 建立Sphere物件
Sphere sphere = new Sphere(200); 
// 以填滿方式呈現
sphere.setDrawMode(DrawMode.FILL); 
// 省略背面
sphere.setCullFace(CullFace.BACK); 
sphere.setTranslateX(200); 
sphere.setTranslateY(200); 

// 建立PhongMaterial物件
PhongMaterial material = new PhongMaterial(); 
// 設定Diffuse Color
material.setDiffuseColor(Color.AQUA);

sphere.setMaterial(material); 
...

【執行結果】

以下範例示範以setSpecularColor()方法設定Specular Color：

// 建立Sphere物件
Sphere sphere = new Sphere(200); 
// 以填滿方式呈現
sphere.setDrawMode(DrawMode.FILL); 
// 省略背面
sphere.setCullFace(CullFace.BACK); 
sphere.setTranslateX(200); 
sphere.setTranslateY(200); 

// 建立PhongMaterial物件
PhongMaterial material = new PhongMaterial(); 
// 設定Specular Color
material.setSpecularColor(Color.AQUA);

sphere.setMaterial(material); 
...

【執行結果】

以下為同時設定兩種著色的效果：

// 建立Sphere物件
Sphere sphere = new Sphere(200); 
// 以填滿方式呈現
sphere.setDrawMode(DrawMode.FILL); 
// 省略背面
sphere.setCullFace(CullFace.BACK); 
sphere.setTranslateX(200); 
sphere.setTranslateY(200); 

// 建立PhongMaterial物件
PhongMaterial material = new PhongMaterial(); 
// 設定Diffuse Color
material.setDiffuseColor(Color.AQUA);
// 設定Specular Color
material.setSpecularColor(Color.AQUA);

sphere.setMaterial(material); 
...

【執行結果】

最後是同時設定以上五種效果：

// 建立Sphere物件
Sphere sphere = new Sphere(200); 
// 以填滿方式呈現
sphere.setDrawMode(DrawMode.FILL); 
// 省略背面
sphere.setCullFace(CullFace.BACK); 
sphere.setTranslateX(200); 
sphere.setTranslateY(200); 

// 建立PhongMaterial物件
PhongMaterial material = new PhongMaterial(); 
// 設定Bump Map貼圖
material.setBumpMap(new Image(getClass().getResourceAsStream(  
  "images/earth_normal_map.jpg"), 512, 256, true, true)); 
// 設定Difffuse Map貼圖
material.setDiffuseMap(new Image(getClass().getResourceAsStream( 
  "images/earth_diffuse_map.jpg"), 512, 256, true, true)); 
// 設定Specular Map貼圖
material.setSpecularMap(new Image(getClass().getResourceAsStream(
  "images/earth_specular_map.jpg"), 512, 256, true, true));
// 設定Diffuse Color
material.setDiffuseColor(Color.AQUA);
// 設定Specular Color
material.setSpecularColor(Color.AQUA);

sphere.setMaterial(material); 
...

【執行結果】

【參考資料】

[1] Java Official Web Site：http://www.oracle.com/technetwork/java/index.html
[2] JavaFX：http://www.oracle.com/technetwork/java/javafx
[3] JavaFX 8.0 API Specification.
[4] Java Platform, Standard Edition 8 API Specification.
[5] JDK 8 Certified System Configurations

後續 >> JavaFX特效（2）漸層（Gradient）處理