Cesium高级教程-深度图-场景深度图

Cesium高级教程-深度图-场景深度图

场景深度支持

在Cesium应用中，可以通过scene.context.depthTexture属性来判断是否支持深度图

 function Context(canvas, options) {
     ...
     Object.defineProperties(Context.prototype, {
         /**
         * <code>true</code> if WEBGL_depth_texture is supported.  This extension provides
         * access to depth textures that, for example, can be attached to framebuffers for shadow mapping.
         * @memberof Context.prototype
         * @type {boolean}
         * @see {@link http://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/|WEBGL_depth_texture}
         */
         depthTexture: {
             get: function () {
                 return this._depthTexture || this._webgl2;
             },
         },
         ...
     })
 }   

深度图是一个Texture类型，也就是一张纹理图，只是存储的是深度信息。

 this._depthStencilTexture = new Texture({
   context: context,
   width: width,
   height: height,
   pixelFormat: PixelFormat.DEPTH_STENCIL,
   pixelDatatype: PixelDatatype.UNSIGNED_INT_24_8,
   sampler: Sampler.NEAREST,
 });

场景深度纹理

Cesium并没有提供场景深度纹理的访问接口，因为这个深度纹理是在渲染过程中会根据指定的条件获取，并不固定，并且在整个渲染生命周期结束后，可能就将深度图就被清空了，所以在外面即使能获取到也没有什么用，具体可见Scene类中render等方法，重点可以看resolveFramebuffers方法。

Scene.prototype.resolveFramebuffers = function (passState) {
  const context = this._context;
  const environmentState = this._environmentState;
  const view = this._view;
  const { globeDepth, translucentTileClassification } = view;
  if (defined(globeDepth)) {
    globeDepth.prepareColorTextures(context);
  }

  const {
    useOIT,
    useGlobeDepthFramebuffer,
    usePostProcess,
    originalFramebuffer,
  } = environmentState;

  const globeFramebuffer = useGlobeDepthFramebuffer
    ? globeDepth.colorFramebufferManager
    : undefined;
  const sceneFramebuffer = view.sceneFramebuffer._colorFramebuffer;
  const idFramebuffer = view.sceneFramebuffer.idFramebuffer;

  if (useOIT) {
    passState.framebuffer = usePostProcess
      ? sceneFramebuffer.framebuffer
      : originalFramebuffer;
    view.oit.execute(context, passState);
  }

  if (
    translucentTileClassification.hasTranslucentDepth &&
    translucentTileClassification.isSupported()
  ) {
    translucentTileClassification.execute(this, passState);
  }

  if (usePostProcess) {
    view.sceneFramebuffer.prepareColorTextures(context);
    let inputFramebuffer = sceneFramebuffer;
    if (useGlobeDepthFramebuffer && !useOIT) {
      inputFramebuffer = globeFramebuffer;
    }

    const postProcess = this.postProcessStages;
    const colorTexture = inputFramebuffer.getColorTexture(0);
    const idTexture = idFramebuffer.getColorTexture(0);
    const depthTexture = defaultValue(
      globeFramebuffer,
      sceneFramebuffer,
    ).getDepthStencilTexture();
    postProcess.execute(context, colorTexture, depthTexture, idTexture);
    postProcess.copy(context, originalFramebuffer);
  }

  if (!useOIT && !usePostProcess && useGlobeDepthFramebuffer) {
    passState.framebuffer = originalFramebuffer;
    globeDepth.executeCopyColor(context, passState);
  }
};

在将场景渲染结果交给后处理程序进行处理时，传入了对应的深度纹理

 const depthTexture = defaultValue(
    globeFramebuffer,
    sceneFramebuffer,
  ).getDepthStencilTexture();
 postProcess.execute(context, colorTexture, depthTexture, idTexture);

更多内容见 Cesium高级教程-教程简介