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