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,})})
}