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