9804915566

Committed 05 Jul 2024 07:47AM UTC coverage: 89.273% (+0.02%) from 89.253%

Build # 9804915566

Build Type

Pull #9008

github

Committed by

web-flow

Commit Message

Merge 212100eac into f8723cb97

Pull Request Pull Request #9008: WIP: Layers UBO

Run Details

6523 of 7161 branches covered (91.09%)

Branch coverage included in aggregate %.

258 of 259 new or added lines in 16 files covered. (99.61%)

3 existing lines in 1 file now uncovered.

54119 of 60768 relevant lines covered (89.06%)

6361.83 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

94.21

/modules/layers/src/line-layer/line-layer.ts

// 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,
  LayerProps,
  LayerDataSource,
  Unit,
  Position,
  Accessor,
  Color,
  UpdateParameters,
  DefaultProps
} from '@deck.gl/core';
import {Geometry} from '@luma.gl/engine';
import {Model} from '@luma.gl/engine';

import vs from './line-layer-vertex.glsl';
import fs from './line-layer-fragment.glsl';

const DEFAULT_COLOR: [number, number, number, number] = [0, 0, 0, 255];

const defaultProps: DefaultProps<LineLayerProps> = {
  getSourcePosition: {type: 'accessor', value: (x: any) => x.sourcePosition},
  getTargetPosition: {type: 'accessor', value: (x: any) => 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}
};

/** All properties supported by LineLayer. */
export type LineLayerProps<DataT = unknown> = _LineLayerProps<DataT> & LayerProps;

/** Properties added by LineLayer. */
type _LineLayerProps<DataT> = {
  data: LayerDataSource<DataT>;
  /**
   * The units of the line width, one of `'meters'`, `'common'`, and `'pixels'`.
   * @default 'pixels'
   */
  widthUnits?: Unit;

  /**
   * The scaling multiplier for the width of each line.
   * @default 1
   */
  widthScale?: number;

  /**
   * The minimum line width in pixels.
   * @default 0
   */
  widthMinPixels?: number;

  /**
   * The maximum line width in pixels.
   * @default Number.MAX_SAFE_INTEGER
   */
  widthMaxPixels?: number;

  /**
   * Source position of each object.
   * @default object => object.sourcePosition
   */
  getSourcePosition?: Accessor<DataT, Position>;

  /**
   * Target position of each object.
   * @default object => object.targetPosition
   */
  getTargetPosition?: Accessor<DataT, Position>;

  /**
   * The rgba color is in the format of `[r, g, b, [a]]`.
   * @default [0, 0, 0, 255]
   */
  getColor?: Accessor<DataT, Color>;

  /**
   * Width of each object
   * @default 1
   */
  getWidth?: Accessor<DataT, number>;
};

/**
 * A layer that renders straight lines joining pairs of source and target coordinates.
 */
export default class LineLayer<DataT = any, ExtraProps extends {} = {}> extends Layer<
  ExtraProps & Required<_LineLayerProps<DataT>>
> {
  static layerName = 'LineLayer';
  static defaultProps = defaultProps;

  state!: {
    model?: Model;
  };

  getBounds(): [number[], number[]] | null {
    return this.getAttributeManager()?.getBounds([
      'instanceSourcePositions',
      'instanceTargetPositions'
    ]);
  }

  getShaders() {
    return super.getShaders({vs, fs, modules: [project32, picking]});
  }

  // This layer has its own wrapLongitude logic
  get wrapLongitude(): boolean {
    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: UpdateParameters<this>): void {
    super.updateState(params);

    if (params.changeFlags.extensionsChanged) {
      this.state.model?.destroy();
      this.state.model = this._getModel();
      this.getAttributeManager()!.invalidateAll();
    }
  }

  draw({uniforms}): void {
    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);
    }
  }

  protected _getModel(): Model {
    /*
     *  (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
    });
  }
}

1	// Copyright (c) 2015 - 2017 Uber Technologies, Inc.	1✔
2	//	1✔
3	// Permission is hereby granted, free of charge, to any person obtaining a copy	1✔
4	// of this software and associated documentation files (the "Software"), to deal	1✔
5	// in the Software without restriction, including without limitation the rights	1✔
6	// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell	1✔
7	// copies of the Software, and to permit persons to whom the Software is	1✔
8	// furnished to do so, subject to the following conditions:	1✔
9	//	1✔
10	// The above copyright notice and this permission notice shall be included in	1✔
11	// all copies or substantial portions of the Software.	1✔
12	//	1✔
13	// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR	1✔
14	// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,	1✔
15	// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE	1✔
16	// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER	1✔
17	// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,	1✔
18	// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN	1✔
19	// THE SOFTWARE.	1✔
20		1✔
21	import {	1✔
22	Layer,	1✔
23	project32,	1✔
24	picking,	1✔
25	UNIT,	1✔
26	LayerProps,	1✔
27	LayerDataSource,	1✔
28	Unit,	1✔
29	Position,	1✔
30	Accessor,	1✔
31	Color,	1✔
32	UpdateParameters,	1✔
33	DefaultProps	1✔
34	} from '@deck.gl/core';	1✔
35	import {Geometry} from '@luma.gl/engine';	1✔
36	import {Model} from '@luma.gl/engine';	1✔
37		1✔
38	import vs from './line-layer-vertex.glsl';	1✔
39	import fs from './line-layer-fragment.glsl';	1✔
40		1✔
41	const DEFAULT_COLOR: [number, number, number, number] = [0, 0, 0, 255];	1✔
42		1✔
43	const defaultProps: DefaultProps<LineLayerProps> = {	1✔
44	getSourcePosition: {type: 'accessor', value: (x: any) => x.sourcePosition},	1✔
45	getTargetPosition: {type: 'accessor', value: (x: any) => x.targetPosition},	1✔
46	getColor: {type: 'accessor', value: DEFAULT_COLOR},	1✔
47	getWidth: {type: 'accessor', value: 1},	1✔
48		1✔
49	widthUnits: 'pixels',	1✔
50	widthScale: {type: 'number', value: 1, min: 0},	1✔
51	widthMinPixels: {type: 'number', value: 0, min: 0},	1✔
52	widthMaxPixels: {type: 'number', value: Number.MAX_SAFE_INTEGER, min: 0}	1✔
53	};	1✔
54		1✔
55	/** All properties supported by LineLayer. */	1✔
56	export type LineLayerProps<DataT = unknown> = _LineLayerProps<DataT> & LayerProps;	1✔
57		1✔
58	/** Properties added by LineLayer. */	1✔
59	type _LineLayerProps<DataT> = {	1✔
60	data: LayerDataSource<DataT>;	1✔
61	/**	1✔
62	* The units of the line width, one of `'meters'`, `'common'`, and `'pixels'`.	1✔
63	* @default 'pixels'	1✔
64	*/	1✔
65	widthUnits?: Unit;	1✔
66		1✔
67	/**	1✔
68	* The scaling multiplier for the width of each line.	1✔
69	* @default 1	1✔
70	*/	1✔
71	widthScale?: number;	1✔
72		1✔
73	/**	1✔
74	* The minimum line width in pixels.	1✔
75	* @default 0	1✔
76	*/	1✔
77	widthMinPixels?: number;	1✔
78		1✔
79	/**	1✔
80	* The maximum line width in pixels.	1✔
81	* @default Number.MAX_SAFE_INTEGER	1✔
82	*/	1✔
83	widthMaxPixels?: number;	1✔
84		1✔
85	/**	1✔
86	* Source position of each object.	1✔
87	* @default object => object.sourcePosition	1✔
88	*/	1✔
89	getSourcePosition?: Accessor<DataT, Position>;	1✔
90		1✔
91	/**	1✔
92	* Target position of each object.	1✔
93	* @default object => object.targetPosition	1✔
94	*/	1✔
95	getTargetPosition?: Accessor<DataT, Position>;	1✔
96		1✔
97	/**	1✔
98	* The rgba color is in the format of `[r, g, b, [a]]`.	1✔
99	* @default [0, 0, 0, 255]	1✔
100	*/	1✔
101	getColor?: Accessor<DataT, Color>;	1✔
102		1✔
103	/**	1✔
104	* Width of each object	1✔
105	* @default 1	1✔
106	*/	1✔
107	getWidth?: Accessor<DataT, number>;	1✔
108	};	1✔
109		1✔
110	/**	1✔
111	* A layer that renders straight lines joining pairs of source and target coordinates.	1✔
112	*/	1✔
113	export default class LineLayer<DataT = any, ExtraProps extends {} = {}> extends Layer<	1✔
114	ExtraProps & Required<_LineLayerProps<DataT>>	1✔
115	> {	1✔
116	static layerName = 'LineLayer';	1✔
117	static defaultProps = defaultProps;	1✔
118		1✔
119	state!: {	1✔
120	model?: Model;	1✔
121	};	1✔
122		1✔
123	getBounds(): [number[], number[]] \| null {	1✔
UNCOV 124	return this.getAttributeManager()?.getBounds([	×
125	'instanceSourcePositions',	×
126	'instanceTargetPositions'	×
127	]);	×
128	}	×
129		1✔
130	getShaders() {	1✔
131	return super.getShaders({vs, fs, modules: [project32, picking]});	2✔
132	}	2✔
133		1✔
134	// This layer has its own wrapLongitude logic	1✔
135	get wrapLongitude(): boolean {	1✔
136	return false;	14✔
137	}	14✔
138		1✔
139	initializeState() {	1✔
140	const attributeManager = this.getAttributeManager()!;	2✔
141		2✔
142	/* eslint-disable max-len */	2✔
143	attributeManager.addInstanced({	2✔
144	instanceSourcePositions: {	2✔
145	size: 3,	2✔
146	type: 'float64',	2✔
147	fp64: this.use64bitPositions(),	2✔
148	transition: true,	2✔
149	accessor: 'getSourcePosition'	2✔
150	},	2✔
151	instanceTargetPositions: {	2✔
152	size: 3,	2✔
153	type: 'float64',	2✔
154	fp64: this.use64bitPositions(),	2✔
155	transition: true,	2✔
156	accessor: 'getTargetPosition'	2✔
157	},	2✔
158	instanceColors: {	2✔
159	size: this.props.colorFormat.length,	2✔
160	type: 'unorm8',	2✔
161	transition: true,	2✔
162	accessor: 'getColor',	2✔
163	defaultValue: [0, 0, 0, 255]	2✔
164	},	2✔
165	instanceWidths: {	2✔
166	size: 1,	2✔
167	transition: true,	2✔
168	accessor: 'getWidth',	2✔
169	defaultValue: 1	2✔
170	}	2✔
171	});	2✔
172	/* eslint-enable max-len */	2✔
173	}	2✔
174		1✔
175	updateState(params: UpdateParameters<this>): void {	1✔
176	super.updateState(params);	13✔
177		13✔
178	if (params.changeFlags.extensionsChanged) {	13✔
179	this.state.model?.destroy();	2!
180	this.state.model = this._getModel();	2✔
181	this.getAttributeManager()!.invalidateAll();	2✔
182	}	2✔
183	}	13✔
184		1✔
185	draw({uniforms}): void {	1✔
186	const {widthUnits, widthScale, widthMinPixels, widthMaxPixels, wrapLongitude} = this.props;	14✔
187	const model = this.state.model!;	14✔
188		14✔
189	model.setUniforms(uniforms);	14✔
190	model.setUniforms({	14✔
191	widthUnits: UNIT[widthUnits],	14✔
192	widthScale,	14✔
193	widthMinPixels,	14✔
194	widthMaxPixels,	14✔
195	useShortestPath: wrapLongitude ? 1 : 0	14!
196	});	14✔
197	model.draw(this.context.renderPass);	14✔
198		14✔
199	if (wrapLongitude) {	14!
200	// Render a second copy for the clipped lines at the 180th meridian	×
NEW 201	model.setUniforms({	×
202	useShortestPath: -1	×
203	});	×
UNCOV 204	model.draw(this.context.renderPass);	×
UNCOV 205	}	×
206	}	14✔
207		1✔
208	protected _getModel(): Model {	1✔
209	/*	2✔
210	* (0, -1)-------------_(1, -1)	2✔
211	* \| _,-" \|	2✔
212	* o _,-" o	2✔
213	* \| _,-" \|	2✔
214	* (0, 1)"-------------(1, 1)	2✔
215	*/	2✔
216	const positions = [0, -1, 0, 0, 1, 0, 1, -1, 0, 1, 1, 0];	2✔
217		2✔
218	return new Model(this.context.device, {	2✔
219	...this.getShaders(),	2✔
220	id: this.props.id,	2✔
221	bufferLayout: this.getAttributeManager()!.getBufferLayouts(),	2✔
222	geometry: new Geometry({	2✔
223	topology: 'triangle-strip',	2✔
224	attributes: {	2✔
225	positions: {size: 3, value: new Float32Array(positions)}	2✔
226	}	2✔
227	}),	2✔
228	isInstanced: true	2✔
229	});	2✔
230	}	2✔
231	}	1✔

visgl / deck.gl / 9804915566

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous