Material【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Materials.html&label=All

效果如下图所示：

示例代码如下：

注：

1. Sandcastle.declare()方法：用于在 Sandcastle 的代码编辑器中高亮显示指定的函数，
   以便于用户在交互式代码示例中更容易理解和调试代码。它是 Sandcastle 提供的一种辅助功能，旨在增强代码的可视化和交互性。
2. new Cesium.Material(options):材质通过漫反射、镜面反射、法线、发射和透明度组件的组合定义表面外观。这些值使用称为 Fabric 的 JSON 模式指定，并在后台解析并组装成 glsl 着色器代码。具体教程请参考：https://github.com/CesiumGS/cesium/wiki/Fabric 。

let rectangle;
let worldRectangle;
let polyline;

/**
 * 为 Cesium 中的一个图元（primitive）应用一个基于 AlphaMap 材质的渲染效果。
 * 具体来说，它使用一张图片（Cesium_Logo_Color.jpg）的红色通道（r）作为透明度（alpha）值，来控制图元的透明效果。
 */
function applyAlphaMapMaterial(primitive, scene) {
  Sandcastle.declare(applyAlphaMapMaterial);
  primitive.appearance.material = new Cesium.Material({
    //材质是通过 fabric 对象定义的，fabric 是 Cesium 材质系统的一种描述方式，允许开发者定义复杂的着色逻辑。
    fabric: {
      materials: {
        //alphaMaterial 定义了一个基于图片红色通道(r)的透明度材质
        alphaMaterial: {
          type: "AlphaMap",
          uniforms: {
            image: "../images/Cesium_Logo_Color.jpg",
            channel: "r",
          },
        },
      },
      //components定义了材质的渲染属性：材质的最终效果是白色表面，透明度由图片的红色通道控制。
      components: {
        diffuse: "vec3(1.0)",//表示材质的漫反射颜色为纯白色（vec3(1.0, 1.0, 1.0)）
        alpha: "alphaMaterial.alpha",
      },
    },
  });
}

/**
 * 为 Cesium 中的一个图元（primitive）应用一个结合了 
 * 漫反射贴图（DiffuseMap） 和 凹凸贴图（BumpMap） 的材质效果。
 */
function applyBumpMapMaterial(primitive, scene) {
  Sandcastle.declare(applyBumpMapMaterial);
  primitive.appearance.material = new Cesium.Material({
    fabric: {
      materials: {
        //DiffuseMap:使用一张图片（bumpmap.png）定义图元的漫反射颜色（即表面基础颜色）。
        diffuseMaterial: {
          type: "DiffuseMap",
          uniforms: {
            image: "../images/bumpmap.png",
          },
        },
        //BumpMap:使用同一张图片（bumpmap.png）作为凹凸贴图，模拟表面法线变化，增强光照效果的立体感。
        bumpMaterial: {
          type: "BumpMap",
          uniforms: {
            image: "../images/bumpmap.png",
            strength: 0.8,
          },
        },
      },
      components: {
        diffuse: "diffuseMaterial.diffuse",
        specular: 0.01,
        normal: "bumpMaterial.normal",
      },
    },
  });
}

function applyCheckerboardMaterial(primitive, scene) {
  Sandcastle.declare(applyCheckerboardMaterial);
  primitive.appearance.material = Cesium.Material.fromType("Checkerboard");
}

function applyColorMaterial(primitive, scene) {
  Sandcastle.declare(applyColorMaterial);
  primitive.appearance.material = Cesium.Material.fromType("Color");
}

/**
 * 为 Cesium 中的图元（primitive）应用一个复杂的 自定义复合材质。
 */
function applyCompositeMaterial(primitive, scene) {
  Sandcastle.declare(applyCompositeMaterial);
  primitive.appearance.material = new Cesium.Material({
    fabric: {
      uniforms: {
        image: "../images/earthspec1k.jpg",//镜面贴图，用于控制透明度（alpha）。
        heightField: "../images/earthbump1k.jpg",//高度场贴图，用于计算漫反射颜色和镜面反射。
      },
      materials: {
        bumpMap: {
          type: "BumpMap",
          uniforms: {//使用 earthbump1k.jpg 作为凹凸贴图，生成法线信息，增强光照立体感。
            image: "../images/earthbump1k.jpg",
          },
        },
      },
      //source属性值是一个自定义 GLSL 片段着色器，覆盖 Cesium 默认的材质处理逻辑
      source: `
        czm_material czm_getMaterial(czm_materialInput materialInput) {
            czm_material material = czm_getDefaultMaterial(materialInput);
            vec4 color;
            float heightValue = texture(heightField, materialInput.st).r;
            color.rgb = mix(vec3(0.2, 0.6, 0.2), vec3(1.0, 0.5, 0.2), heightValue);
            color.a = (1.0 - texture(image, materialInput.st).r) * 0.7;
            color = czm_gammaCorrect(color);
            material.diffuse = color.rgb;
            material.alpha = color.a;
            material.normal = bumpMap.normal;
            material.specular = step(0.1, heightValue);  // Specular mountain tops
            material.shininess = 8.0;  // Sharpen highlight
            return material;
        }
        `,
    },
  });
}

function applyDotMaterial(primitive, scene) {
  Sandcastle.declare(applyDotMaterial);
  primitive.appearance.material = Cesium.Material.fromType("Dot");
}

/**
 * 为 Cesium 中的图元（primitive）应用一个 DiffuseMap 材质。
 * 该材质使用一张图片（Cesium_Logo_Color.jpg）作为漫反射贴图，定义图元的表面颜色。
 */
function applyDiffuseMaterial(primitive, scene) {
  Sandcastle.declare(applyDiffuseMaterial);
  primitive.appearance.material = new Cesium.Material({
    fabric: {
      type: "DiffuseMap",
      uniforms: {
        image: "../images/Cesium_Logo_Color.jpg",
      },
    },
  });
}

function applyEmissionMapMaterial(primitive, scene) {
  Sandcastle.declare(applyEmissionMapMaterial);
  primitive.appearance.material = new Cesium.Material({
    fabric: {
      materials: {
        /**
         * DiffuseMap：使用 Cesium_Logo_Color.jpg 作为漫反射贴图，
         * 定义图元在光照下的表面颜色。
         */
        diffuseMaterial: {
          type: "DiffuseMap",
          uniforms: {
            image: "../images/Cesium_Logo_Color.jpg",
          },
        },
        /**
         * EmissionMap：使用 checkerboard.png 作为发光贴图，
         * 模拟自发光效果（不受光照影响的颜色），并通过 repeat 属性控制纹理平铺，
         * 强度降低到 20%（* 0.2）。 该材质使图元表面既有基于光照的漫反射颜色，
         * 又有局部的发光效果，适合模拟发光区域（如灯光、屏幕或夜间城市效果）。
         */
        emissionMaterial: {
          type: "EmissionMap",
          uniforms: {
            image: "../images/checkerboard.png",
            /**
             * repeat: { x: 1, y: 0.5 }: 控制纹理的平铺方式：
             *  x: 1：水平方向（U 坐标）重复 1 次，即不平铺。
             *  y: 0.5：垂直方向（V 坐标）重复 0.5 次，即纹理在垂直方向被压缩，显示半个棋盘格的高度。
             */
            repeat: {
              x: 1,
              y: 0.5,
            },
          },
        },
      },
      components: {
        diffuse: "diffuseMaterial.diffuse",
        emission: "emissionMaterial.emission * 0.2",
      },
    },
  });
}

/**
 * 为 Cesium 中的图元（primitive）应用一个 Water 材质，用于模拟水面的视觉效果。
 * 该材质通过 Cesium 内置的 Water 类型材质，结合镜面贴图（specularMap）、
 * 法线贴图（normalMap）以及动态参数（frequency、animationSpeed、amplitude），
 * 实现逼真的水面效果，包括波浪、光照反射和镜面反射。
 * 效果类似流动的水面，适合用于模拟海洋、湖泊或河流。
 */
function applyWaterMaterial(primitive, scene) {
  Sandcastle.declare(applyWaterMaterial);

  primitive.appearance.material = new Cesium.Material({
    fabric: {
      type: "Water",
      uniforms: {
        specularMap: "../images/earthspec1k.jpg",
        normalMap: Cesium.buildModuleUrl("Assets/Textures/waterNormals.jpg"),
        frequency: 10000.0,
        animationSpeed: 0.01,
        amplitude: 1.0,
      },
    },
  });
}

function applyGridMaterial(primitive, scene) {
  Sandcastle.declare(applyGridMaterial);
  primitive.appearance.material = Cesium.Material.fromType("Grid");
}

function applyImageMaterial(primitive, scene) {
  Sandcastle.declare(applyImageMaterial);
  primitive.appearance.material = new Cesium.Material({
    fabric: {
      type: "Image",
      uniforms: {
        image: "../images/Cesium_Logo_Color.jpg",
      },
    },
  });
}

/**
 * 为 Cesium 中的图元（primitive）应用一个 Image 材质，
 * 使用压缩纹理文件（Cesium_Logo_ETC1S.ktx2，采用 ETC1S 压缩格式）作为图元的表面纹理。
 * 该材质将压缩纹理的颜色直接映射到图元表面，
 * 主要用于优化纹理加载和渲染性能，特别适合移动设备或需要低内存占用的场景。
 */
function applyETC1SCompressedTextureMaterial(primitive, scene) {
  Sandcastle.declare(applyETC1SCompressedTextureMaterial);

  const compressedImageUrl = "../images/Cesium_Logo_ETC1S.ktx2";

  primitive.appearance.material = new Cesium.Material({
    fabric: {
      type: "Image",
      uniforms: {
        image: compressedImageUrl,
      },
    },
  });
}

//同上，采用UASTC压缩格式
function applyUASTCCompressedTextureMaterial(primitive, scene) {
  Sandcastle.declare(applyUASTCCompressedTextureMaterial);

  const compressedImageUrl = "../images/Cesium_Logo_UASTC.ktx2";

  primitive.appearance.material = new Cesium.Material({
    fabric: {
      type: "Image",
      uniforms: {
        image: compressedImageUrl,
      },
    },
  });
}

function applyNormalMapMaterial(primitive, scene) {
  Sandcastle.declare(applyNormalMapMaterial); // For highlighting in Sandcastle.
  primitive.appearance.material = new Cesium.Material({
    fabric: {
      materials: {
        // DiffuseMap:使用一张图片（bumpmap.png）定义图元的漫反射颜色（即表面基础颜色）。
        diffuseMaterial: {
          type: "DiffuseMap",
          uniforms: {
            image: "../images/bumpmap.png",
          },
        },
        //使用 normalmap.png 作为法线贴图，模拟表面法线变化，增强光照的立体感（例如，模拟粗糙表面的光影效果）。
        normalMap: {
          type: "NormalMap",
          uniforms: {
            image: "../images/normalmap.png",
            strength: 0.6,
          },
        },
      },
      components: {
        diffuse: "diffuseMaterial.diffuse",
        specular: 0.01,
        normal: "normalMap.normal",
      },
    },
  });
}

/**
 * 为 Cesium 中的图元（primitive）应用一个 SpecularMap 材质。
 * 该材质使用一张图片（Cesium_Logo_Color.jpg）的红色通道（r）来控制图元表面的镜面反射强度（specular intensity）。
 */
function applySpecularMapMaterial(primitive, scene) {
  Sandcastle.declare(applySpecularMapMaterial);
  primitive.appearance.material = new Cesium.Material({
    fabric: {
      type: "SpecularMap",
      uniforms: {
        image: "../images/Cesium_Logo_Color.jpg",
        channel: "r",
      },
    },
  });
}

function applyStripeMaterial(primitive, scene) {
  Sandcastle.declare(applyStripeMaterial);
  primitive.appearance.material = Cesium.Material.fromType("Stripe");
}

function applyRimLightingMaterial(primitive, scene) {
  Sandcastle.declare(applyRimLightingMaterial);
  primitive.appearance.material = Cesium.Material.fromType("RimLighting");
}

function applyPolylineArrowMaterial(primitive, scene) {
  Sandcastle.declare(applyPolylineArrowMaterial);
  const material = Cesium.Material.fromType("PolylineArrow");
  primitive.material = material;
}

function applyPolylineGlowMaterial(primitive, scene) {
  Sandcastle.declare(applyPolylineGlowMaterial);
  const material = Cesium.Material.fromType("PolylineGlow", {
    color: Cesium.Color.CRIMSON,
    glowPower: 0.2,
    taperPower: 0.4,
  });
  primitive.material = material;
}

function applyPolylineOutlineMaterial(primitive, scene) {
  Sandcastle.declare(applyPolylineOutlineMaterial);
  const material = Cesium.Material.fromType("PolylineOutline", {
    outlineWidth: primitive.width / 2.0,
  });
  primitive.material = material;
}

function createButtons(scene) {
  function toggleRectangleVisibility() {
    rectangle.show = true;
    worldRectangle.show = false;
    polyline.show = false;
  }

  function toggleWorldRectangleVisibility() {
    worldRectangle.show = true;
    rectangle.show = false;
    polyline.show = false;
  }

  function togglePolylineVisibility() {
    polyline.show = true;
    worldRectangle.show = false;
    rectangle.show = false;
  }

  Sandcastle.addToolbarMenu([
    {
      text: "常见材质",
    },
    {
      text: "颜色",
      onselect: function () {
        toggleRectangleVisibility();
        applyColorMaterial(rectangle, scene);
        Sandcastle.highlight(applyColorMaterial);
      },
    },
    {
      text: "图片",
      onselect: function () {
        toggleRectangleVisibility();
        applyImageMaterial(rectangle, scene);
        Sandcastle.highlight(applyImageMaterial);
      },
    },
    {
      text: "ETC1S压缩格式的图片",
      onselect: function () {
        if (!Cesium.FeatureDetection.supportsBasis(scene)) {
          window.alert(
            "此浏览器不支持 Basis Universal 压缩纹理"
          );
        }
        toggleRectangleVisibility();
        applyETC1SCompressedTextureMaterial(rectangle, scene);
        Sandcastle.highlight(applyETC1SCompressedTextureMaterial);
      },
    },
    {
      text: "UASTC压缩格式的图片",
      onselect: function () {
        if (!Cesium.FeatureDetection.supportsBasis(scene)) {
          window.alert(
            "此浏览器不支持 Basis Universal 压缩纹理"
          );
        }
        toggleRectangleVisibility();
        applyUASTCCompressedTextureMaterial(rectangle, scene);
        Sandcastle.highlight(applyUASTCCompressedTextureMaterial);
      },
    },
  ]);

  Sandcastle.addToolbarMenu([
    {
      text: "程序化纹理",//指通过算法或程序生成的内容，而不是预先制作的静态资源。
    },
    {
      text: "棋盘格",
      onselect: function () {
        toggleRectangleVisibility();
        applyCheckerboardMaterial(rectangle, scene);
        Sandcastle.highlight(applyCheckerboardMaterial);
      },
    },
    {
      text: "点状图案",
      onselect: function () {
        toggleRectangleVisibility();
        applyDotMaterial(rectangle, scene);
        Sandcastle.highlight(applyDotMaterial);
      },
    },
    {
      text: "网格",
      onselect: function () {
        toggleRectangleVisibility(rectangle, worldRectangle);
        applyGridMaterial(rectangle, scene);
        Sandcastle.highlight(applyGridMaterial);
      },
    },
    {
      text: "条纹",
      onselect: function () {
        toggleRectangleVisibility();
        applyStripeMaterial(rectangle, scene);
        Sandcastle.highlight(applyStripeMaterial);
      },
    },
  ]);

  Sandcastle.addToolbarMenu([
    {
      text: "基础材质",
    },
    {
      text: "透明度贴图",
      onselect: function () {
        toggleRectangleVisibility();
        applyAlphaMapMaterial(rectangle, scene);
        Sandcastle.highlight(applyAlphaMapMaterial);
      },
    },
    {
      text: "凹凸(Bump)贴图",
      onselect: function () {
        toggleRectangleVisibility();
        applyBumpMapMaterial(rectangle, scene);
        Sandcastle.highlight(applyBumpMapMaterial);
      },
    },
    {
      text: "漫反射(Diffuse)贴图",
      onselect: function () {
        toggleRectangleVisibility();
        applyDiffuseMaterial(rectangle, scene);
        Sandcastle.highlight(applyDiffuseMaterial);
      },
    },
    {
      text: "发光(Emission)贴图",
      onselect: function () {
        toggleRectangleVisibility();
        applyEmissionMapMaterial(rectangle, scene);
        Sandcastle.highlight(applyEmissionMapMaterial);
      },
    },
    {
      text: "法线(Normal)贴图",
      onselect: function () {
        toggleRectangleVisibility();
        applyNormalMapMaterial(rectangle, scene);
        Sandcastle.highlight(applyNormalMapMaterial);
      },
    },
    {
      text: "镜面反射(Specular)贴图",
      onselect: function () {
        toggleRectangleVisibility();
        applySpecularMapMaterial(rectangle, scene);
        Sandcastle.highlight(applySpecularMapMaterial);
      },
    },
  ]);

  Sandcastle.addToolbarMenu([
    {
      text: "混合(Misc)材质",
    },
    {
      text: "Rim Lighting(边缘光)",
      onselect: function () {
        toggleWorldRectangleVisibility();
        applyRimLightingMaterial(worldRectangle, scene);
        Sandcastle.highlight(applyRimLightingMaterial);
      },
    },
    {
      text: "Water(水面效果)",
      onselect: function () {
        toggleWorldRectangleVisibility();
        applyWaterMaterial(worldRectangle, scene);
        Sandcastle.highlight(applyWaterMaterial);
      },
    },
  ]);

  Sandcastle.addToolbarMenu([
    {
      text: "复合材质示例",
    },
    {
      text: "复合示例",
      onselect: function () {
        toggleWorldRectangleVisibility();
        applyCompositeMaterial(worldRectangle, scene);
        Sandcastle.highlight(applyCompositeMaterial);
      },
    },
  ]);

  Sandcastle.addToolbarMenu([
    {
      text: "多线段材质",
    },
    {
      text: "带箭头的多线段",
      onselect: function () {
        togglePolylineVisibility();
        applyPolylineArrowMaterial(polyline, scene);
        Sandcastle.highlight(applyPolylineArrowMaterial);
      },
    },
    {
      text: "发光的多线段",
      onselect: function () {
        togglePolylineVisibility();
        applyPolylineGlowMaterial(polyline, scene);
        Sandcastle.highlight(applyPolylineGlowMaterial);
      },
    },
    {
      text: "有轮廓的多线段",
      onselect: function () {
        togglePolylineVisibility();
        applyPolylineOutlineMaterial(polyline, scene);
        Sandcastle.highlight(applyPolylineOutlineMaterial);
      },
    },
  ]);

  document.getElementById("toolbar").style.width = "10%";
}

function createPrimitives(scene) {
  rectangle = scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.RectangleGeometry({
          rectangle: Cesium.Rectangle.fromDegrees(-120.0, 20.0, -60.0, 40.0),
          vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
        }),
      }),
      appearance: new Cesium.EllipsoidSurfaceAppearance({
        aboveGround: false,
      }),
    })
  );

  worldRectangle = scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.RectangleGeometry({
          rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
          vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
        }),
      }),
      appearance: new Cesium.EllipsoidSurfaceAppearance({
        aboveGround: false,
      }),
      show: false,
    })
  );

  const polylines = scene.primitives.add(new Cesium.PolylineCollection());
  polyline = polylines.add({
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        -110.0, 42.0, -85.0, 36.0, -100.0, 25.0, -77.0, 12.0,
      ]),
    }),
    width: 10.0,
    show: false,
  });
}

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
  terrain: Cesium.Terrain.fromWorldTerrain(),
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const scene = viewer.scene;

createPrimitives(scene);
createButtons(scene);