Cesium開發(fā)高級篇 | 02材質設置

無論是通過Entity類，還是通過Primitive類添加的空間幾何數(shù)據(jù)，Cesium都提供了對應的方法或材質相關類對材質進行修改。在講解材質設置之前，首先我們先簡單地介紹下什么是材質。比較粗淺的理解是，材質可以是幾何對象表面的任意一種著色（Cesium.Color）、可以是貼在其表面的一張圖片、也可以是一個紋理或圖案，比如下圖中的條形或棋盤形的圖案。


針對于兩種方式（Entity和Primitive）繪制的幾何對象，Cesium也提供了Material類和MaterialProperty類，分別對通過Primitive和Entity兩種方式生成的幾何對象的material屬性進行賦值。這里特別要注意，Primitive的appearance（或繼承類）的material屬性為Material類型，Entity的xxxGraphics的material屬性為MaterialProperty或Color類型，請大家不要記混。


Primitive.appearance.material
Entity.xxxGraphics.material
Cesium中的material屬性設置

Material類

Material類專為Appearance類而生，用于修改Primitive的幾何對象材質。同時，Apperance也有自己的繼承類，通過修改部分繼承類的material屬性，也可實現(xiàn)Primitive幾何對象材質的修改。Appearance的繼承類如下圖所示，其中橘黃色背景的子類，能修改其material屬性。


通過Material類修改材質相對來說比較復雜，需要對OpenGL以及底層渲染機制進行了解。Cesium中的Material類的內部機制是通過一種json格式的Fabric對象來表達物體的外觀特征，而這些外觀特征是由漫反射(diffuse)、鏡面反射(specular)、法向量(normal)、自發(fā)光(emission)以及透明度（alpha）組合（即一個Components）而成。詳細可查看Cesium對Fabric的解說https://github.com/CesiumGS/cesium/wiki/Fabric。

Cesium為我們提供了23種現(xiàn)成的Material類型，可通過Material.fromType方法和Fabric兩種方式去獲取并設置幾何對象材質。如下是通過Material類的兩種方式實現(xiàn)著色的示例：

// Create a color material with fromType:
polygon.material = Cesium.Material.fromType('Color');
polygon.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0);

// Create the default material:
polygon.material = new Cesium.Material();
// Create a color material with full Fabric notation:
polygon.material = new Cesium.Material({
    fabric : {
        type : 'Color',
        uniforms : {
            color : new Cesium.Color(1.0, 1.0, 0.0, 1.0)
        }
    }
});

具體可查閱Material類文檔說明：http://127.0.0.1:5500/Build/Documentation/Material.html?classFilter=material，以及Material的沙盒示例：https://sandcastle.cesium.com/index.html?src=Materials.html。

從Material的Fabric對象組成來看，要想創(chuàng)建一個新的Material，用戶只需要指定type、uniforms、compontents三個屬性，構建一個Fabric的JSON對象。如果想寫一些自定義的shader，則需要再指定source屬性。


MaterialProperty類

MaterialProperty類專為Entity而生，它是一個抽象類，我們無法對它進行實例化。要使用該類對材質進行設置，需要實例化其子類。MaterialProperty類的繼承類，如下圖所示：


1.ColorMaterialProperty 顏色材質
ColorMaterialProperty類相對來說比較簡單，你可以直接使用Cesium.Color替換它，兩個類實現(xiàn)的效果最終是一樣的，都是給幾何對象直接著色。

var color = Cesium.Color.BLUE.withAlpha(0.5);
    var colorMaterial = new Cesium.ColorMaterialProperty(color);
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-55.0, 40.0, 100000.0),
      ellipse: {
        semiMajorAxis: 300000.0, // 長半軸距離
        semiMinorAxis: 200000.0, // 短半軸距離
        height: 20000.0,
        material: colorMaterial,
      },
    });

2.ImageMaterialProperty 貼圖材質
ImageMaterialProperty類可以給幾何對象表面貼上一張圖片。

var imgUrl = "./images/bumpmap.png";
    var imgMaterial = new Cesium.ImageMaterialProperty({
      image: imgUrl,
      repeat: new Cesium.Cartesian2(4, 4),
      color: Cesium.Color.BLUE,
    });
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-65.0, 40.0, 100000.0),
      ellipse: {
        semiMajorAxis: 300000.0, // 長半軸距離
        semiMinorAxis: 200000.0, // 短半軸距離
        height: 20000.0,
        material: imgMaterial,
      },
    });

3.CheckerboardMaterialProperty 棋盤紋理

var checkerboardMaterial = new Cesium.CheckerboardMaterialProperty({
      evenColor: Cesium.Color.WHITE,
      oddColor: Cesium.Color.BLACK,
      repeat: new Cesium.Cartesian2(4, 4),
    });
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-75.0, 40.0, 100000.0),
      ellipse: {
        semiMajorAxis: 300000.0, // 長半軸距離
        semiMinorAxis: 200000.0, // 短半軸距離
        height: 20000.0,
        material: checkerboardMaterial,
      },
    });

4.StripeMaterialProperty 條紋紋理

var stripeMaterial = new Cesium.StripeMaterialProperty({
      orientation: Cesium.StripeOrientation.VERTICAL,
      evenColor: Cesium.Color.WHITE,
      oddColor: Cesium.Color.BLACK,
      repeat: 16,
    });
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-85.0, 40.0, 100000.0),
      ellipse: {
        semiMajorAxis: 300000.0, // 長半軸距離
        semiMinorAxis: 200000.0, // 短半軸距離
        height: 20000.0,
        material: stripeMaterial,
      },
    });

5.GridMaterialProperty 網格

 var gripMaterial = new Cesium.GridMaterialProperty({
      color: Cesium.Color.YELLOW,
      cellAlpha: 0.5,
      lineCount: new Cesium.Cartesian2(8, 8),
      lineThickness: new Cesium.Cartesian2(2.0, 2.0),
      lineOffset: new Cesium.Cartesian2(0.0, 0.0),
    });
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
      ellipse: {
        semiMajorAxis: 300000.0, // 長半軸距離
        semiMinorAxis: 200000.0, // 短半軸距離
        height: 20000.0,
        material: gripMaterial,
      },
    });

6.PolylineGlowMaterialProperty 發(fā)光材質

var glowingLine = viewer.entities.add({
      name: "Glowing blue line on the surface",
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),
        width: 10,
        material: new Cesium.PolylineGlowMaterialProperty({
          glowPower: 0.8,
          taperPower: 0.5,
          color: Cesium.Color.CORNFLOWERBLUE,
        }),
      },
    });

7.PolylineOutlineMaterialProperty 外輪廓材質

var orangeOutlined = viewer.entities.add({
      name:
        "Orange line with black outline at height and following the surface",
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
          -75,
          39,
          250000,
          -125,
          39,
          250000,
        ]),
        width: 5,
        material: new Cesium.PolylineOutlineMaterialProperty({
          color: Cesium.Color.ORANGE,
          outlineWidth: 5,
          outlineColor: Cesium.Color.BLACK,
        }),
      },
    });

8.PolylineArrowMaterialProperty 帶有箭頭的線

var purpleArrow = viewer.entities.add({
      name: "Purple straight arrow at height",
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
          -75,
          43,
          500000,
          -125,
          43,
          500000,
        ]),
        width: 10,
        arcType: Cesium.ArcType.NONE,
        material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE),
      },
    });

9.PolylineDashMaterialProperty 虛線

var dashedLine = viewer.entities.add({
      name: "Blue dashed line",
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
          -75,
          45,
          500000,
          -125,
          45,
          500000,
        ]),
        width: 4,
        material: new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.CYAN,
        }),
      },
    });

上述9種方式生成的效果圖如下所示：


?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容