// Copyright (c) 2015 - 2017 Uber Technologies, Inc. // // Permission is hereby granted, free of charge, to any person obtaining a copy // of this software and associated documentation files (the "Software"), to deal // in the Software without restriction, including without limitation the rights // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell // copies of the Software, and to permit persons to whom the Software is // furnished to do so, subject to the following conditions: // // The above copyright notice and this permission notice shall be included in // all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. import { Layer, project32, picking, UNIT } from '@deck.gl/core'; import { Geometry } from '@luma.gl/engine'; import { Model } from '@luma.gl/engine'; import vs from "./line-layer-vertex.glsl.js"; import fs from "./line-layer-fragment.glsl.js"; const DEFAULT_COLOR = [0, 0, 0, 255]; const defaultProps = { getSourcePosition: { type: 'accessor', value: (x) => x.sourcePosition }, getTargetPosition: { type: 'accessor', value: (x) => x.targetPosition }, getColor: { type: 'accessor', value: DEFAULT_COLOR }, getWidth: { type: 'accessor', value: 1 }, widthUnits: 'pixels', widthScale: { type: 'number', value: 1, min: 0 }, widthMinPixels: { type: 'number', value: 0, min: 0 }, widthMaxPixels: { type: 'number', value: Number.MAX_SAFE_INTEGER, min: 0 } }; /** * A layer that renders straight lines joining pairs of source and target coordinates. */ class LineLayer extends Layer { getBounds() { return this.getAttributeManager()?.getBounds([ 'instanceSourcePositions', 'instanceTargetPositions' ]); } getShaders() { return super.getShaders({ vs, fs, modules: [project32, picking] }); } // This layer has its own wrapLongitude logic get wrapLongitude() { return false; } initializeState() { const attributeManager = this.getAttributeManager(); /* eslint-disable max-len */ attributeManager.addInstanced({ instanceSourcePositions: { size: 3, type: 'float64', fp64: this.use64bitPositions(), transition: true, accessor: 'getSourcePosition' }, instanceTargetPositions: { size: 3, type: 'float64', fp64: this.use64bitPositions(), transition: true, accessor: 'getTargetPosition' }, instanceColors: { size: this.props.colorFormat.length, type: 'unorm8', transition: true, accessor: 'getColor', defaultValue: [0, 0, 0, 255] }, instanceWidths: { size: 1, transition: true, accessor: 'getWidth', defaultValue: 1 } }); /* eslint-enable max-len */ } updateState(params) { super.updateState(params); if (params.changeFlags.extensionsChanged) { this.state.model?.destroy(); this.state.model = this._getModel(); this.getAttributeManager().invalidateAll(); } } draw({ uniforms }) { const { widthUnits, widthScale, widthMinPixels, widthMaxPixels, wrapLongitude } = this.props; const model = this.state.model; model.setUniforms(uniforms); model.setUniforms({ widthUnits: UNIT[widthUnits], widthScale, widthMinPixels, widthMaxPixels, useShortestPath: wrapLongitude ? 1 : 0 }); model.draw(this.context.renderPass); if (wrapLongitude) { // Render a second copy for the clipped lines at the 180th meridian model.setUniforms({ useShortestPath: -1 }); model.draw(this.context.renderPass); } } _getModel() { /* * (0, -1)-------------_(1, -1) * | _,-" | * o _,-" o * | _,-" | * (0, 1)"-------------(1, 1) */ const positions = [0, -1, 0, 0, 1, 0, 1, -1, 0, 1, 1, 0]; return new Model(this.context.device, { ...this.getShaders(), id: this.props.id, bufferLayout: this.getAttributeManager().getBufferLayouts(), geometry: new Geometry({ topology: 'triangle-strip', attributes: { positions: { size: 3, value: new Float32Array(positions) } } }), isInstanced: true }); } } LineLayer.layerName = 'LineLayer'; LineLayer.defaultProps = defaultProps; export default LineLayer;