UNPKG

@nebula.gl/layers

Version:

A suite of 3D-enabled data editing layers, suitable for deck.gl

133 lines (115 loc) 3.67 kB
import { PathLayer } from '@deck.gl/layers'; import GL from '@luma.gl/constants'; import { Framebuffer, Texture2D } from '@luma.gl/core'; import outline from '../../shaderlib/outline/outline'; // TODO - this should be built into assembleShaders function injectShaderCode({ source, code = '' }) { const INJECT_CODE = /}[^{}]*$/; return source.replace(INJECT_CODE, code.concat('\n}\n')); } const VS_CODE = `\ outline_setUV(gl_Position); outline_setZLevel(instanceZLevel); `; const FS_CODE = `\ gl_FragColor = outline_filterColor(gl_FragColor); `; const defaultProps = { getZLevel: { type: 'accessor', value: 0 }, }; export default class PathOutlineLayer extends PathLayer<any> { static layerName = 'PathOutlineLayer'; static defaultProps = defaultProps; // Override getShaders to inject the outline module getShaders() { const shaders = super.getShaders(); return Object.assign({}, shaders, { modules: shaders.modules.concat([outline]), vs: injectShaderCode({ source: shaders.vs, code: VS_CODE }), fs: injectShaderCode({ source: shaders.fs, code: FS_CODE }), }); } initializeState(context: any) { super.initializeState(context); // Create an outline "shadow" map // TODO - we should create a single outlineMap for all layers this.setState({ outlineFramebuffer: new Framebuffer(context.gl), dummyTexture: new Texture2D(context.gl), }); // Create an attribute manager this.state.attributeManager.addInstanced({ instanceZLevel: { size: 1, type: GL.UNSIGNED_BYTE, update: this.calculateZLevels, accessor: 'getZLevel', }, }); } // Override draw to add render module draw({ moduleParameters = {}, parameters, uniforms, context }) { // Need to calculate same uniforms as base layer const { rounded, miterLimit, widthScale, widthMinPixels, widthMaxPixels, dashJustified, } = this.props; uniforms = Object.assign({}, uniforms, { jointType: Number(rounded), alignMode: Number(dashJustified), widthScale, miterLimit, widthMinPixels, widthMaxPixels, }); // Render the outline shadowmap (based on segment z orders) const { outlineFramebuffer, dummyTexture } = this.state; outlineFramebuffer.resize(); outlineFramebuffer.clear({ color: true, depth: true }); this.state.model.updateModuleSettings({ outlineEnabled: true, outlineRenderShadowmap: true, outlineShadowmap: dummyTexture, }); this.state.model.draw({ uniforms: Object.assign({}, uniforms, { jointType: 0, widthScale: this.props.widthScale * 1.3, }), parameters: { depthTest: false, // Biggest value needs to go into buffer blendEquation: GL.MAX, }, framebuffer: outlineFramebuffer, }); // Now use the outline shadowmap to render the lines (with outlines) this.state.model.updateModuleSettings({ outlineEnabled: true, outlineRenderShadowmap: false, outlineShadowmap: outlineFramebuffer, }); this.state.model.draw({ uniforms: Object.assign({}, uniforms, { jointType: Number(rounded), widthScale: this.props.widthScale, }), parameters: { depthTest: false, }, }); } calculateZLevels(attribute) { const { getZLevel } = this.props; const { pathTesselator } = this.state; attribute.value = pathTesselator._updateAttribute({ target: attribute.value, size: 1, getValue: (object, index) => [getZLevel(object, index) || 0], }); } }