Globe Interior【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Globe%20Interior.html

效果如下视频所示：

示例代码如下：已将难懂的属性介绍放到代码注释中。

/**
 * 什么是 orderIndependentTranslucency？
 * 在 3D 图形渲染中，半透明（translucency）指的是物体允许光线部分透过，使其呈现出半透明的效果。
 * 然而，正确渲染多个半透明对象是一项挑战，因为它们的外观取决于绘制顺序。
 * 传统方法要求按照从后到前的深度顺序对半透明对象进行排序和渲染，以确保颜色正确混合。
 * 这种排序过程在动态场景中可能非常复杂且消耗性能。
 * 
 * Order Independent Translucency (OIT) 是一种无需根据深度排序即可渲染半透明对象的技术。
 * 通过使用 OIT，Cesium 能够在复杂的场景中更高效、准确地渲染半透明对象，而无需依赖传统的深度排序。
 * 
 * orderIndependentTranslucency 是一个布尔值属性，决定了 Cesium 是否使用 OIT 技术来渲染场景中的半透明对象：
 *  - 设置为 true：Cesium 将尝试使用 OIT 技术来渲染半透明对象。这种方法可以在多个半透明对象重叠时（例如玻璃窗或水面层叠），
 *    确保颜色混合正确，提升视觉质量，而无需手动排序。
 *  - 设置为 false：Cesium 将使用传统渲染方法，可能需要对半透明对象进行深度排序。
 *    如果排序不当，可能会出现视觉错误（如颜色混合不正确）。
 */

const viewer = new Cesium.Viewer("cesiumContainer", {
  //orderIndependentTranslucency属性:如果为真且配置支持，则使用无序的半透明效果。
  orderIndependentTranslucency: false,
  geocoder: Cesium.IonGeocodeProviderType.BING,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  timeline: false,
  animation: false,
  shouldAnimate: true,
});

viewer.cesiumWidget.creditContainer.style.display = "none";

const scene = viewer.scene;
const globe = scene.globe;
/**
 * viewer.scene.imageryLayers：在地球上渲染的影像(图像)图层集合
 * get(0)：给定索引处的影像图层，Cesium默认加载的是基础图层是必应地图的影像图层。
 */
const baseLayer = viewer.scene.imageryLayers.get(0);

/**
 * scene.screenSpaceCameraController:用于处理相机输入的控制器
 * enableCollisionDetection: 当禁用时(即设置为false时)，maximumZoomDistance 和 minimumZoomDistance 的值将被忽略。
 */
scene.screenSpaceCameraController.enableCollisionDetection = false;

function reset() {
  globe.showGroundAtmosphere = true;//显示地面大气
  globe.baseColor = Cesium.Color.BLUE;//设置在无影像可用时地球的颜色
  globe.translucency.enabled = false; //控制地球半透明度的属性，这里关闭了半透明属性
  globe.translucency.frontFaceAlpha = 1.0;//应用于地球正面的一个常量不透明度,默认值为1.0
  /**
   * undergroundColor:当相机在地下或地球透明时，渲染地球背面的颜色，根据相机的距离与地球颜色混合。
   * 要禁用地下着色，将 undergroundColor 设置为 undefined 。
   * 默认值就是Cesium.Color.BLACK
   */
  globe.undergroundColor = Cesium.Color.BLACK;
  //rectangle:指定一个 Rectangle ，用于将透明度限制在矩形区域内,默认值为Rectangle.MAX_VALUE
  globe.translucency.rectangle = undefined;
  baseLayer.colorToAlpha = undefined;//默认的基础影像图层应设置为透明的颜色值
}

/**
 *  使用半透明遮罩
 */
function useTranslucencyMask() {
  globe.showGroundAtmosphere = false;
  globe.baseColor = Cesium.Color.TRANSPARENT;
  globe.translucency.enabled = true;
  globe.undergroundColor = undefined;

  /**
   * colorToAlpha与colorToAlphaThreshold这两个属性通常用于从图像层中“抠除”特定颜色。
   * 例如，在天气图或卫星图像中，可以移除深蓝色海洋背景，以突出显示陆地特征。
   * 
   *  - colorToAlpha：设置要透明的颜色，这里可以将 Bing 基础层上的海洋(部分)设置为透明
   *  - colorToAlphaThreshold：设置颜色匹配的阈值，具体地，与colorToAlpha指定的颜色大体相近时都会被设置为透明，
   * 这个差异具体计算公式：Math.sqrt(Math.pow(r1-r2,2),Math.pow(g1-g2,2),Math.pow(b1-b2,2),Math.pow(a1-a2,2))
   */
  baseLayer.colorToAlpha = new Cesium.Color(0.0, 0.016, 0.059); 
  baseLayer.colorToAlphaThreshold = 0.2;//颜色转透明归一化阈值（范围为：0-1）
  
}

/**
 * 使用某矩形范围内透明
 */
function useTranslucencyRectangle() {
  globe.translucency.enabled = true;// 启用透明设置
  globe.undergroundColor = undefined;//禁用地下着色
  globe.translucency.frontFaceAlpha = 0.25;//将地球正面透明度设置为0.25
  //将透明度限制在矩形区域内
  globe.translucency.rectangle = Cesium.Rectangle.fromDegrees(
    -120.0,
    0.0,
    -30.0,
    45.0,
  );
}

Sandcastle.addToolbarMenu([
  {
    text: "半透明遮罩",
    onselect: function () {
      reset();
      useTranslucencyMask();
    },
  },
  {
    text: "矩形范围内半透明",
    onselect: function () {
      reset();
      useTranslucencyRectangle();
    },
  },
]);

const innerCoreRadius = 1250000;
const outerCoreRadius = 3450000;
const mantleRadius = 6300000.0;

const innerCore = viewer.entities.add({
  name: "(地球)内核",
  position: Cesium.Cartesian3.ZERO,
  ellipsoid: {
    radii: new Cesium.Cartesian3(
      innerCoreRadius,
      innerCoreRadius,
      innerCoreRadius,
    ),
    material: Cesium.Color.YELLOW,
  },
});

const outerCore = viewer.entities.add({
  name: "(地球)外核",
  position: Cesium.Cartesian3.ZERO,
  ellipsoid: {
    radii: new Cesium.Cartesian3(
      outerCoreRadius,
      outerCoreRadius,
      outerCoreRadius,
    ),
    material: Cesium.Color.ORANGE,
  },
});

const mantle = viewer.entities.add({
  name: "(地球)地幔",
  position: Cesium.Cartesian3.ZERO,
  ellipsoid: {
    radii: new Cesium.Cartesian3(mantleRadius, mantleRadius, mantleRadius),
    material: Cesium.Color.RED,
  },
});

innerCore.show = true;
outerCore.show = false;
mantle.show = false;

const options = [
  {
    text: "(地球)内核",
    onselect: function () {
      innerCore.show = true;
      outerCore.show = false;
      mantle.show = false;
    },
  },
  {
    text: "(地球)外核",
    onselect: function () {
      innerCore.show = false;
      outerCore.show = true;
      mantle.show = false;
    },
  },
  {
    text: "(地球)地幔",
    onselect: function () {
      innerCore.show = false;
      outerCore.show = false;
      mantle.show = true;
    },
  },
  {
    text: "无(都不显示)",
    onselect: function () {
      innerCore.show = false;
      outerCore.show = false;
      mantle.show = false;
    },
  },
];

Sandcastle.addToolbarMenu(options);