ClassificationPrimitive 内部原理

发明 ClassificationPrimitive的真是个天才。其原理是利用 webgl 的模板缓冲区实现。

渲染两次, 首先是绘制模板, 然后绘制真正的内容。

示意图:

function createClass() {
  const { program, uniforms } = WebGLProgram.buildPrograms(gl, shaders).plane;
  const geometry = new Geometry(getCubeGeometry(gl))
  geometry.scale.set(2, 2, 4)
  geometry.position.y = -0.5;
  geometry.rotation.x = -Math.PI / 2;

  // 首先是绘制模板
  classCommandStencilDepth = new DrawCommand({
    gl,
    camera,
    geometry: geometry,
    program: program,
    uniforms: uniforms,
    uniformsData: {
      uColor: {
        type: 'vec4f',
        value: [0.0, 0.2, 0.8, 0.5]
      }
    },
    renderState: new RenderState({
      colorMask: {
        red: false,
        green: false,
        blue: false,
        alpha: false,
      },
      stencilTest: {
        enabled: true,
        frontFunction: StencilFunction.ALWAYS,
        frontOperation: {
          fail: StencilOperation.KEEP,
          zFail: StencilOperation.DECREMENT_WRAP,
          zPass: StencilOperation.KEEP,
        },
        backFunction: StencilFunction.ALWAYS,
        backOperation: {
          fail: StencilOperation.KEEP,
          zFail: StencilOperation.INCREMENT_WRAP,
          zPass: StencilOperation.KEEP,
        },
        reference: StencilConstants.CESIUM_3D_TILE_MASK,
        mask: StencilConstants.CESIUM_3D_TILE_MASK,
      },
      stencilMask: StencilConstants.CLASSIFICATION_MASK,
      depthTest: {
        enabled: true,
        func: DepthFunction.LESS_OR_EQUAL,
      },
      depthMask: false,
    })
  })

  // 最终颜色
  classCommandColor = new DrawCommand({
    gl,
    camera,
    geometry: geometry,
    program: program,
    uniforms: uniforms,
    renderState: new RenderState({
      stencilTest: {
        enabled: true,
        frontFunction: StencilFunction.NOT_EQUAL,
        frontOperation: {
          fail: StencilOperation.ZERO,
          zFail: StencilOperation.ZERO,
          zPass: StencilOperation.ZERO,
        },
        backFunction: StencilFunction.NOT_EQUAL,
        backOperation: {
          fail: StencilOperation.ZERO,
          zFail: StencilOperation.ZERO,
          zPass: StencilOperation.ZERO,
        },
        reference: 0,
        mask: StencilConstants.CLASSIFICATION_MASK,
      },
      stencilMask: StencilConstants.CLASSIFICATION_MASK,
      depthTest: {
        enabled: false,
      },
      depthMask: false,
      blending: BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,
    })
  })
}