@deck.gl/arcgis 9.0.0-alpha.7 → 9.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/commons.d.ts +26 -0
  2. package/dist/commons.d.ts.map +1 -0
  3. package/dist/commons.js +120 -0
  4. package/dist/deck-layer-view-2d.d.ts +2 -0
  5. package/dist/deck-layer-view-2d.d.ts.map +1 -0
  6. package/dist/deck-layer-view-2d.js +44 -0
  7. package/dist/deck-layer.d.ts +2 -0
  8. package/dist/deck-layer.d.ts.map +1 -0
  9. package/dist/deck-layer.js +27 -0
  10. package/dist/deck-props.d.ts +2 -0
  11. package/dist/deck-props.d.ts.map +1 -0
  12. package/dist/deck-props.js +53 -0
  13. package/dist/deck-renderer.d.ts +14 -0
  14. package/dist/deck-renderer.d.ts.map +1 -0
  15. package/dist/deck-renderer.js +49 -0
  16. package/dist/dist.dev.js +1860 -4952
  17. package/dist/index.cjs +360 -0
  18. package/dist/index.cjs.map +7 -0
  19. package/dist/index.d.ts +14 -0
  20. package/dist/index.d.ts.map +1 -0
  21. package/dist/{esm/index.js → index.js} +7 -6
  22. package/dist/load-modules.d.ts +9 -0
  23. package/dist/load-modules.d.ts.map +1 -0
  24. package/dist/load-modules.js +46 -0
  25. package/dist.min.js +11 -140
  26. package/package.json +21 -11
  27. package/src/commons.ts +98 -46
  28. package/src/{deck-layer-view-2d.js → deck-layer-view-2d.ts} +15 -17
  29. package/src/deck-renderer.ts +65 -0
  30. package/src/{load-modules.js → load-modules.ts} +20 -9
  31. package/dist/es5/commons.js +0 -95
  32. package/dist/es5/commons.js.map +0 -1
  33. package/dist/es5/deck-layer-view-2d.js +0 -62
  34. package/dist/es5/deck-layer-view-2d.js.map +0 -1
  35. package/dist/es5/deck-layer.js +0 -31
  36. package/dist/es5/deck-layer.js.map +0 -1
  37. package/dist/es5/deck-props.js +0 -98
  38. package/dist/es5/deck-props.js.map +0 -1
  39. package/dist/es5/deck-renderer.js +0 -78
  40. package/dist/es5/deck-renderer.js.map +0 -1
  41. package/dist/es5/index.js +0 -46
  42. package/dist/es5/index.js.map +0 -1
  43. package/dist/es5/load-modules.js +0 -109
  44. package/dist/es5/load-modules.js.map +0 -1
  45. package/dist/esm/commons.js +0 -96
  46. package/dist/esm/commons.js.map +0 -1
  47. package/dist/esm/deck-layer-view-2d.js +0 -45
  48. package/dist/esm/deck-layer-view-2d.js.map +0 -1
  49. package/dist/esm/deck-layer.js +0 -27
  50. package/dist/esm/deck-layer.js.map +0 -1
  51. package/dist/esm/deck-props.js +0 -64
  52. package/dist/esm/deck-props.js.map +0 -1
  53. package/dist/esm/deck-renderer.js +0 -52
  54. package/dist/esm/deck-renderer.js.map +0 -1
  55. package/dist/esm/index.js.map +0 -1
  56. package/dist/esm/load-modules.js +0 -51
  57. package/dist/esm/load-modules.js.map +0 -1
  58. package/src/deck-renderer.js +0 -56
  59. /package/src/{deck-layer.js → deck-layer.ts} +0 -0
  60. /package/src/{deck-props.js → deck-props.ts} +0 -0
  61. /package/src/{index.js → index.ts} +0 -0
package/package.json CHANGED
@@ -2,7 +2,8 @@
2
2
  "name": "@deck.gl/arcgis",
3
3
  "description": "Use deck.gl as a custom ArcGIS API for JavaScript layer",
4
4
  "license": "MIT",
5
- "version": "9.0.0-alpha.7",
5
+ "type": "module",
6
+ "version": "9.0.0-beta.10",
6
7
  "publishConfig": {
7
8
  "access": "public"
8
9
  },
@@ -16,12 +17,17 @@
16
17
  "type": "git",
17
18
  "url": "https://github.com/visgl/deck.gl.git"
18
19
  },
19
- "main": "dist/es5/index.js",
20
- "module": "dist/esm/index.js",
20
+ "main": "dist/index.cjs",
21
+ "module": "dist/index.js",
22
+ "exports": {
23
+ ".": {
24
+ "import": "./dist/index.js",
25
+ "require": "./dist/index.cjs"
26
+ }
27
+ },
21
28
  "files": [
22
29
  "dist",
23
30
  "src",
24
- "typed",
25
31
  "dist.min.js"
26
32
  ],
27
33
  "sideEffects": false,
@@ -29,15 +35,19 @@
29
35
  "build-bundle": "ocular-bundle ./bundle.ts",
30
36
  "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
31
37
  },
38
+ "dependencies": {
39
+ "@luma.gl/constants": "^9.0.4",
40
+ "@luma.gl/webgl": "^9.0.4",
41
+ "esri-loader": "^3.3.0"
42
+ },
32
43
  "peerDependencies": {
33
44
  "@arcgis/core": "^4.0.0",
34
- "@deck.gl/core": "^9.0.0-alpha",
35
- "@luma.gl/core": "9.0.0-alpha.53",
36
- "@luma.gl/engine": "9.0.0-alpha.53"
45
+ "@deck.gl/core": "^9.0.0-beta",
46
+ "@luma.gl/core": "^9.0.4",
47
+ "@luma.gl/engine": "^9.0.4"
37
48
  },
38
- "dependencies": {
39
- "@babel/runtime": "^7.0.0",
40
- "esri-loader": "^3.3.0"
49
+ "devDependencies": {
50
+ "@arcgis/core": "^4.21.0"
41
51
  },
42
- "gitHead": "de061268077ab74e163792162efbc07be95d10f5"
52
+ "gitHead": "6c44f602069374cd21268ff279c5bf818c905ff7"
43
53
  }
package/src/commons.ts CHANGED
@@ -1,49 +1,82 @@
1
1
  /* eslint-disable no-invalid-this */
2
2
 
3
- import type {Device} from '@luma.gl/core';
4
- import {Model} from '@luma.gl/engine';
5
3
  import {GL} from '@luma.gl/constants';
6
- import {withGLParameters} from '@luma.gl/webgl';
7
-
4
+ import {Model, Geometry} from '@luma.gl/engine';
8
5
  import {Deck} from '@deck.gl/core';
6
+ import type {Device, Texture, Framebuffer} from '@luma.gl/core';
7
+ import type {WebGLDevice} from '@luma.gl/webgl';
8
+
9
+ interface Renderer {
10
+ redraw: () => void;
11
+ }
9
12
 
10
- export function initializeResources(device: Device) {
11
- // What is `this` referring to this function???
12
- this.buffer = device.createBuffer(new Int8Array([-1, -1, 1, -1, -1, 1, 1, 1]));
13
+ export type RenderResources = {
14
+ deck: Deck;
15
+ texture: Texture;
16
+ model: Model;
17
+ fbo: Framebuffer;
18
+ };
19
+
20
+ export function initializeResources(this: Renderer, device: Device): RenderResources {
21
+ const texture = device.createTexture({
22
+ format: 'rgba8unorm',
23
+ width: 1,
24
+ height: 1,
25
+ sampler: {
26
+ minFilter: 'linear',
27
+ magFilter: 'linear',
28
+ addressModeU: 'clamp-to-edge',
29
+ addressModeV: 'clamp-to-edge'
30
+ }
31
+ });
13
32
 
14
- this.model = new Model(device, {
33
+ const model = new Model(device, {
15
34
  vs: `\
16
35
  #version 300 es
17
- in vec2 a_pos;
36
+ in vec2 pos;
18
37
  out vec2 v_texcoord;
19
38
  void main(void) {
20
- gl_Position = vec4(a_pos, 0.0, 1.0);
21
- v_texcoord = (a_pos + 1.0) / 2.0;
39
+ gl_Position = vec4(pos, 0.0, 1.0);
40
+ v_texcoord = (pos + 1.0) / 2.0;
22
41
  }
23
42
  `,
24
43
  fs: `\
25
44
  #version 300 es
26
45
  precision mediump float;
27
- uniform sampler2D u_texture;
46
+ uniform sampler2D deckglTexture;
28
47
  in vec2 v_texcoord;
29
48
  out vec4 fragColor;
49
+
30
50
  void main(void) {
31
- vec4 rgba = texture(u_texture, v_texcoord);
32
- rgba.rgb *= rgba.a;
33
- fragColor = rgba;
51
+ vec4 imageColor = texture(deckglTexture, v_texcoord);
52
+ imageColor.rgb *= imageColor.a;
53
+ fragColor = imageColor;
34
54
  }
35
55
  `,
36
- attributes: {
37
- // eslint-disable-next-line camelcase
38
- a_pos: this.buffer
56
+ bindings: {
57
+ deckglTexture: texture
58
+ },
59
+ parameters: {
60
+ depthWriteEnabled: true,
61
+ depthCompare: 'less-equal'
39
62
  },
40
- vertexCount: 4,
41
- drawMode: GL.TRIANGLE_STRIP
63
+ geometry: new Geometry({
64
+ topology: 'triangle-strip',
65
+ attributes: {
66
+ pos: {size: 2, value: new Int8Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, 1, 1, -1])}
67
+ }
68
+ }),
69
+ vertexCount: 6
42
70
  });
43
71
 
44
- this.deckFbo = device.createFramebuffer({width: 1, height: 1});
72
+ const fbo = device.createFramebuffer({
73
+ id: 'deckfbo',
74
+ width: 1,
75
+ height: 1,
76
+ colorAttachments: [texture]
77
+ });
45
78
 
46
- this.deckInstance = new Deck({
79
+ const deckInstance = new Deck({
47
80
  // The view state will be set dynamically to track the MapView current extent.
48
81
  viewState: {},
49
82
 
@@ -51,7 +84,7 @@ void main(void) {
51
84
  controller: false,
52
85
 
53
86
  // We use the same WebGL context as the ArcGIS API for JavaScript.
54
- gl: device.gl,
87
+ device,
55
88
 
56
89
  // We need depth testing in general; we don't know what layers might be added to the deck.
57
90
  parameters: {
@@ -59,7 +92,7 @@ void main(void) {
59
92
  },
60
93
 
61
94
  // This deck renders into an auxiliary framebuffer.
62
- _framebuffer: this.deckFbo,
95
+ _framebuffer: fbo,
63
96
 
64
97
  // To disable canvas resizing, since the FBO is owned by the ArcGIS API for JavaScript.
65
98
  width: null,
@@ -67,49 +100,68 @@ void main(void) {
67
100
 
68
101
  _customRender: redrawReason => {
69
102
  if (redrawReason === 'arcgis') {
70
- this.deckInstance._drawLayers(redrawReason);
103
+ deckInstance._drawLayers(redrawReason);
71
104
  } else {
72
105
  this.redraw();
73
106
  }
74
107
  }
75
108
  });
109
+
110
+ return {deck: deckInstance, texture, fbo, model};
76
111
  }
77
112
 
78
- export function render({gl, width, height, viewState}) {
79
- const screenFbo = gl.getParameter(gl.FRAMEBUFFER_BINDING);
113
+ export function render(
114
+ resources: RenderResources,
115
+ viewport: {
116
+ width: number;
117
+ height: number;
118
+ longitude: number;
119
+ latitude: number;
120
+ zoom: number;
121
+ altitude?: number;
122
+ pitch: number;
123
+ bearing: number;
124
+ }
125
+ ) {
126
+ const {model, deck, fbo} = resources;
127
+ const device = model.device;
128
+ const screenFbo = (device as WebGLDevice).getParametersWebGL(GL.FRAMEBUFFER_BINDING);
129
+ const {width, height, ...viewState} = viewport;
80
130
 
81
131
  /* global window */
82
132
  const dpr = window.devicePixelRatio;
83
- width = Math.round(width * dpr);
84
- height = Math.round(height * dpr);
133
+ const pixelWidth = Math.round(width * dpr);
134
+ const pixelHeight = Math.round(height * dpr);
85
135
 
86
- this.deckFbo.resize({width, height});
136
+ fbo.resize({width: pixelWidth, height: pixelHeight});
87
137
 
88
- this.deckInstance.setProps({viewState});
138
+ deck.setProps({viewState});
89
139
  // redraw deck immediately into deckFbo
90
- this.deckInstance.redraw('arcgis');
140
+ deck.redraw('arcgis');
91
141
 
92
142
  // We overlay the texture on top of the map using the full-screen quad.
93
- withGLParameters(
94
- gl,
143
+
144
+ const textureToScreenPass = device.beginRenderPass({
145
+ framebuffer: screenFbo,
146
+ parameters: {viewport: [0, 0, pixelWidth, pixelHeight]},
147
+ clearColor: [0, 0, 0, 0],
148
+ clearDepth: 1
149
+ });
150
+
151
+ device.withParametersWebGL(
95
152
  {
96
153
  blend: true,
97
- blendFunc: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA],
98
- framebuffer: screenFbo,
99
- viewport: [0, 0, width, height]
154
+ blendFunc: [GL.ONE, GL.ONE_MINUS_SRC_ALPHA]
100
155
  },
101
156
  () => {
102
- // eslint-disable-next-line camelcase
103
- this.model.setUniforms({u_texture: this.deckFbo}).draw(this.context.renderPass);
157
+ model.draw(textureToScreenPass);
104
158
  }
105
159
  );
106
160
  }
107
161
 
108
- export function finalizeResources() {
109
- this.deckInstance?.finalize();
110
- this.deckInstance = null;
111
-
112
- this.model?.delete();
113
- this.buffer?.delete();
114
- this.deckFbo?.delete();
162
+ export function finalizeResources(resources: RenderResources) {
163
+ resources.deck.finalize();
164
+ resources.model.destroy();
165
+ resources.fbo.destroy();
166
+ resources.texture.destroy();
115
167
  }
@@ -1,12 +1,10 @@
1
+ import {WebGLDevice} from '@luma.gl/webgl';
1
2
  import {initializeResources, render, finalizeResources} from './commons';
2
3
 
3
4
  export default function createDeckLayerView2D(BaseLayerViewGL2D) {
4
5
  return BaseLayerViewGL2D.createSubclass({
5
6
  properties: {
6
- deckgl: {},
7
- deckFbo: {},
8
- model: {},
9
- buffer: {}
7
+ resources: null
10
8
  },
11
9
 
12
10
  // Attach is called as soon as the layer view is ready to start rendering.
@@ -14,13 +12,15 @@ export default function createDeckLayerView2D(BaseLayerViewGL2D) {
14
12
  // We use a full-screen quad and shaders to composite the frame rendered
15
13
  // with deck.gl on top of the MapView. Composition uses the MapView context.
16
14
  const gl = this.context;
17
- initializeResources.call(this, gl);
15
+ const device = WebGLDevice.attach(gl);
16
+
17
+ this.resources = initializeResources.call(this, device);
18
18
 
19
19
  // Update deck props
20
- this.layer.deck.on('change', props => this.deckInstance.setProps(props));
20
+ this.layer.deck.on('change', props => this.resources.deck.setProps(props));
21
21
 
22
22
  // We need to start drawing the deck.gl layer immediately.
23
- this.deckInstance.setProps(this.layer.deck.toJSON());
23
+ this.resources.deck.setProps(this.layer.deck.toJSON());
24
24
  },
25
25
 
26
26
  redraw() {
@@ -29,7 +29,8 @@ export default function createDeckLayerView2D(BaseLayerViewGL2D) {
29
29
 
30
30
  // Called when the layer must be destroyed.
31
31
  detach() {
32
- finalizeResources.call(this);
32
+ finalizeResources(this.resources);
33
+ this.resources = null;
33
34
  },
34
35
 
35
36
  // Called every time that the layer view must be rendered.
@@ -38,17 +39,14 @@ export default function createDeckLayerView2D(BaseLayerViewGL2D) {
38
39
  // The view state must be kept in-sync with the MapView of the ArcGIS API.
39
40
  const state = renderParameters.state;
40
41
 
41
- render.call(this, {
42
- gl: renderParameters.context,
42
+ render(this.resources, {
43
43
  width,
44
44
  height,
45
- viewState: {
46
- latitude: this.view.center.latitude,
47
- longitude: this.view.center.longitude,
48
- zoom: this.view.featuresTilingScheme.scaleToLevel(state.scale),
49
- bearing: -state.rotation,
50
- pitch: 0
51
- }
45
+ latitude: this.view.center.latitude,
46
+ longitude: this.view.center.longitude,
47
+ zoom: this.view.featuresTilingScheme.scaleToLevel(state.scale),
48
+ bearing: -state.rotation,
49
+ pitch: 0
52
50
  });
53
51
  }
54
52
  });
@@ -0,0 +1,65 @@
1
+ /* eslint-disable no-invalid-this */
2
+ import {WebGLDevice} from '@luma.gl/webgl';
3
+ import {initializeResources, render, finalizeResources, RenderResources} from './commons';
4
+
5
+ import SceneView from '@arcgis/core/views/SceneView';
6
+ import type {DeckProps} from '@deck.gl/core';
7
+
8
+ /** Convert ArcGIS FOV to WebMercatorViewport altitude */
9
+ function arcgisFOVToDeckAltitude(fov: number, aspectRatio: number): number {
10
+ // ArcGIS fov is corner-to-corner
11
+ const D = Math.sqrt(1 + aspectRatio ** 2);
12
+ const halfFOV = (fov / 2 / 180) * Math.PI;
13
+ return D / 2 / Math.tan(halfFOV);
14
+ }
15
+
16
+ export default function createDeckRenderer(DeckProps, externalRenderers) {
17
+ class DeckRenderer {
18
+ view: SceneView;
19
+ deck: any;
20
+ resources: RenderResources | null = null;
21
+
22
+ constructor(view: SceneView, props: DeckProps) {
23
+ this.view = view;
24
+ this.deck = new DeckProps(props);
25
+ }
26
+
27
+ setup(context) {
28
+ const gl = context.gl;
29
+ const device = WebGLDevice.attach(gl);
30
+ const resources = initializeResources.call(this, device);
31
+
32
+ this.deck.on('change', props => resources.deck.setProps(props));
33
+
34
+ resources.deck.setProps(this.deck.toJSON());
35
+ this.resources = resources;
36
+ }
37
+
38
+ dispose() {
39
+ if (this.resources) {
40
+ finalizeResources(this.resources);
41
+ }
42
+ }
43
+
44
+ redraw() {
45
+ externalRenderers.requestRender(this.view);
46
+ }
47
+
48
+ render() {
49
+ const [width, height] = this.view.size;
50
+
51
+ render(this.resources!, {
52
+ width,
53
+ height,
54
+ latitude: this.view.center.latitude,
55
+ longitude: this.view.center.longitude,
56
+ altitude: arcgisFOVToDeckAltitude(this.view.camera.fov, width / height),
57
+ zoom: this.view.zoom,
58
+ bearing: this.view.camera.heading,
59
+ pitch: this.view.camera.tilt
60
+ });
61
+ }
62
+ }
63
+
64
+ return DeckRenderer;
65
+ }
@@ -2,11 +2,20 @@ import createDeckProps from './deck-props';
2
2
  import createDeckLayer from './deck-layer';
3
3
  import createDeckLayerView2D from './deck-layer-view-2d';
4
4
  import createDeckRenderer from './deck-renderer';
5
- import {loadModules as esriLoaderLoadModules} from 'esri-loader';
5
+ import {loadModules as esriLoaderLoadModules, ILoadScriptOptions} from 'esri-loader';
6
6
 
7
- let arcGIS = null;
7
+ type LoadedModules = {
8
+ DeckLayer: any;
9
+ DeckRenderer: any;
10
+ modules?: unknown[];
11
+ };
8
12
 
9
- export async function loadArcGISModules(modules, loadScriptOptions) {
13
+ let arcGIS: LoadedModules;
14
+
15
+ export async function loadArcGISModules(
16
+ modules: string[],
17
+ loadScriptOptions: ILoadScriptOptions
18
+ ): Promise<LoadedModules> {
10
19
  const namespace = Array.isArray(modules) ? null : modules;
11
20
  await loadArcGISModule(namespace, loadScriptOptions);
12
21
 
@@ -18,7 +27,10 @@ export async function loadArcGISModules(modules, loadScriptOptions) {
18
27
  return arcGIS;
19
28
  }
20
29
 
21
- function loadArcGISModule(esri, loadScriptOptions) {
30
+ async function loadArcGISModule(
31
+ esri,
32
+ loadScriptOptions: ILoadScriptOptions
33
+ ): Promise<LoadedModules> {
22
34
  if (arcGIS) {
23
35
  // Already loaded
24
36
  return arcGIS;
@@ -34,7 +46,7 @@ function loadArcGISModule(esri, loadScriptOptions) {
34
46
  return initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers);
35
47
  }
36
48
 
37
- return esriLoaderLoadModules(
49
+ const [Layer, Accessor, BaseLayerViewGL2D, externalRenderers] = await esriLoaderLoadModules(
38
50
  [
39
51
  'esri/layers/Layer',
40
52
  'esri/core/Accessor',
@@ -42,12 +54,11 @@ function loadArcGISModule(esri, loadScriptOptions) {
42
54
  'esri/views/3d/externalRenderers'
43
55
  ],
44
56
  loadScriptOptions
45
- ).then(([Layer, Accessor, BaseLayerViewGL2D, externalRenderers]) => {
46
- return initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers);
47
- });
57
+ );
58
+ return initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers);
48
59
  }
49
60
 
50
- function initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers) {
61
+ function initialize(Layer, Accessor, BaseLayerViewGL2D, externalRenderers): LoadedModules {
51
62
  const DeckProps = createDeckProps(Accessor);
52
63
  const DeckLayerView2D = createDeckLayerView2D(BaseLayerViewGL2D);
53
64
  const DeckLayer = createDeckLayer(DeckProps, Layer, DeckLayerView2D);
@@ -1,95 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.initializeResources = initializeResources;
7
- exports.render = render;
8
- exports.finalizeResources = finalizeResources;
9
-
10
- var _engine = require("@luma.gl/engine");
11
-
12
- var _constants = require("@luma.gl/constants");
13
-
14
- var _webgl = require("@luma.gl/webgl");
15
-
16
- var _core = require("@deck.gl/core");
17
-
18
- function initializeResources(device) {
19
- var _this = this;
20
-
21
- this.buffer = device.createBuffer(new Int8Array([-1, -1, 1, -1, -1, 1, 1, 1]));
22
- this.model = new _engine.Model(device, {
23
- vs: "#version 300 es\nin vec2 a_pos;\nout vec2 v_texcoord;\nvoid main(void) {\n gl_Position = vec4(a_pos, 0.0, 1.0);\n v_texcoord = (a_pos + 1.0) / 2.0;\n}\n ",
24
- fs: "#version 300 es\nprecision mediump float;\nuniform sampler2D u_texture;\nin vec2 v_texcoord;\nout vec4 fragColor;\nvoid main(void) {\n vec4 rgba = texture(u_texture, v_texcoord);\n rgba.rgb *= rgba.a;\n fragColor = rgba;\n}\n ",
25
- attributes: {
26
- a_pos: this.buffer
27
- },
28
- vertexCount: 4,
29
- drawMode: 5
30
- });
31
- this.deckFbo = device.createFramebuffer({
32
- width: 1,
33
- height: 1
34
- });
35
- this.deckInstance = new _core.Deck({
36
- viewState: {},
37
- controller: false,
38
- gl: device.gl,
39
- parameters: {
40
- depthTest: true
41
- },
42
- _framebuffer: this.deckFbo,
43
- width: null,
44
- height: null,
45
- _customRender: function _customRender(redrawReason) {
46
- if (redrawReason === 'arcgis') {
47
- _this.deckInstance._drawLayers(redrawReason);
48
- } else {
49
- _this.redraw();
50
- }
51
- }
52
- });
53
- }
54
-
55
- function render(_ref) {
56
- var _this2 = this;
57
-
58
- var gl = _ref.gl,
59
- width = _ref.width,
60
- height = _ref.height,
61
- viewState = _ref.viewState;
62
- var screenFbo = gl.getParameter(36006);
63
- var dpr = window.devicePixelRatio;
64
- width = Math.round(width * dpr);
65
- height = Math.round(height * dpr);
66
- this.deckFbo.resize({
67
- width: width,
68
- height: height
69
- });
70
- this.deckInstance.setProps({
71
- viewState: viewState
72
- });
73
- this.deckInstance.redraw('arcgis');
74
- (0, _webgl.withGLParameters)(gl, {
75
- blend: true,
76
- blendFunc: [1, 771],
77
- framebuffer: screenFbo,
78
- viewport: [0, 0, width, height]
79
- }, function () {
80
- _this2.model.setUniforms({
81
- u_texture: _this2.deckFbo
82
- }).draw(_this2.context.renderPass);
83
- });
84
- }
85
-
86
- function finalizeResources() {
87
- var _this$deckInstance, _this$model, _this$buffer, _this$deckFbo;
88
-
89
- (_this$deckInstance = this.deckInstance) === null || _this$deckInstance === void 0 ? void 0 : _this$deckInstance.finalize();
90
- this.deckInstance = null;
91
- (_this$model = this.model) === null || _this$model === void 0 ? void 0 : _this$model.delete();
92
- (_this$buffer = this.buffer) === null || _this$buffer === void 0 ? void 0 : _this$buffer.delete();
93
- (_this$deckFbo = this.deckFbo) === null || _this$deckFbo === void 0 ? void 0 : _this$deckFbo.delete();
94
- }
95
- //# sourceMappingURL=commons.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/commons.ts"],"names":["initializeResources","device","buffer","createBuffer","Int8Array","model","Model","vs","fs","attributes","a_pos","vertexCount","drawMode","deckFbo","createFramebuffer","width","height","deckInstance","Deck","viewState","controller","gl","parameters","depthTest","_framebuffer","_customRender","redrawReason","_drawLayers","redraw","render","screenFbo","getParameter","dpr","window","devicePixelRatio","Math","round","resize","setProps","blend","blendFunc","framebuffer","viewport","setUniforms","u_texture","draw","context","renderPass","finalizeResources","finalize","delete"],"mappings":"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","sourcesContent":["/* eslint-disable no-invalid-this */\n\nimport type {Device} from '@luma.gl/core';\nimport {Model} from '@luma.gl/engine';\nimport {GL} from '@luma.gl/constants';\nimport {withGLParameters} from '@luma.gl/webgl';\n\nimport {Deck} from '@deck.gl/core';\n\nexport function initializeResources(device: Device) {\n // What is `this` referring to this function???\n this.buffer = device.createBuffer(new Int8Array([-1, -1, 1, -1, -1, 1, 1, 1]));\n\n this.model = new Model(device, {\n vs: `\\\n#version 300 es\nin vec2 a_pos;\nout vec2 v_texcoord;\nvoid main(void) {\n gl_Position = vec4(a_pos, 0.0, 1.0);\n v_texcoord = (a_pos + 1.0) / 2.0;\n}\n `,\n fs: `\\\n#version 300 es\nprecision mediump float;\nuniform sampler2D u_texture;\nin vec2 v_texcoord;\nout vec4 fragColor;\nvoid main(void) {\n vec4 rgba = texture(u_texture, v_texcoord);\n rgba.rgb *= rgba.a;\n fragColor = rgba;\n}\n `,\n attributes: {\n // eslint-disable-next-line camelcase\n a_pos: this.buffer\n },\n vertexCount: 4,\n drawMode: GL.TRIANGLE_STRIP\n });\n\n this.deckFbo = device.createFramebuffer({width: 1, height: 1});\n\n this.deckInstance = new Deck({\n // The view state will be set dynamically to track the MapView current extent.\n viewState: {},\n\n // Input is handled by the ArcGIS API for JavaScript.\n controller: false,\n\n // We use the same WebGL context as the ArcGIS API for JavaScript.\n gl: device.gl,\n\n // We need depth testing in general; we don't know what layers might be added to the deck.\n parameters: {\n depthTest: true\n },\n\n // This deck renders into an auxiliary framebuffer.\n _framebuffer: this.deckFbo,\n\n // To disable canvas resizing, since the FBO is owned by the ArcGIS API for JavaScript.\n width: null,\n height: null,\n\n _customRender: redrawReason => {\n if (redrawReason === 'arcgis') {\n this.deckInstance._drawLayers(redrawReason);\n } else {\n this.redraw();\n }\n }\n });\n}\n\nexport function render({gl, width, height, viewState}) {\n const screenFbo = gl.getParameter(gl.FRAMEBUFFER_BINDING);\n\n /* global window */\n const dpr = window.devicePixelRatio;\n width = Math.round(width * dpr);\n height = Math.round(height * dpr);\n\n this.deckFbo.resize({width, height});\n\n this.deckInstance.setProps({viewState});\n // redraw deck immediately into deckFbo\n this.deckInstance.redraw('arcgis');\n\n // We overlay the texture on top of the map using the full-screen quad.\n withGLParameters(\n gl,\n {\n blend: true,\n blendFunc: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA],\n framebuffer: screenFbo,\n viewport: [0, 0, width, height]\n },\n () => {\n // eslint-disable-next-line camelcase\n this.model.setUniforms({u_texture: this.deckFbo}).draw(this.context.renderPass);\n }\n );\n}\n\nexport function finalizeResources() {\n this.deckInstance?.finalize();\n this.deckInstance = null;\n\n this.model?.delete();\n this.buffer?.delete();\n this.deckFbo?.delete();\n}\n"],"file":"commons.js"}
@@ -1,62 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = createDeckLayerView2D;
9
-
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
-
12
- var _commons = require("./commons");
13
-
14
- function createDeckLayerView2D(BaseLayerViewGL2D) {
15
- return BaseLayerViewGL2D.createSubclass({
16
- properties: {
17
- deckgl: {},
18
- deckFbo: {},
19
- model: {},
20
- buffer: {}
21
- },
22
- attach: function attach() {
23
- var _this = this;
24
-
25
- var gl = this.context;
26
-
27
- _commons.initializeResources.call(this, gl);
28
-
29
- this.layer.deck.on('change', function (props) {
30
- return _this.deckInstance.setProps(props);
31
- });
32
- this.deckInstance.setProps(this.layer.deck.toJSON());
33
- },
34
- redraw: function redraw() {
35
- this.requestRender();
36
- },
37
- detach: function detach() {
38
- _commons.finalizeResources.call(this);
39
- },
40
- render: function render(renderParameters) {
41
- var _this$view$state$size = (0, _slicedToArray2.default)(this.view.state.size, 2),
42
- width = _this$view$state$size[0],
43
- height = _this$view$state$size[1];
44
-
45
- var state = renderParameters.state;
46
-
47
- _commons.render.call(this, {
48
- gl: renderParameters.context,
49
- width: width,
50
- height: height,
51
- viewState: {
52
- latitude: this.view.center.latitude,
53
- longitude: this.view.center.longitude,
54
- zoom: this.view.featuresTilingScheme.scaleToLevel(state.scale),
55
- bearing: -state.rotation,
56
- pitch: 0
57
- }
58
- });
59
- }
60
- });
61
- }
62
- //# sourceMappingURL=deck-layer-view-2d.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/deck-layer-view-2d.js"],"names":["createDeckLayerView2D","BaseLayerViewGL2D","createSubclass","properties","deckgl","deckFbo","model","buffer","attach","gl","context","initializeResources","call","layer","deck","on","props","deckInstance","setProps","toJSON","redraw","requestRender","detach","finalizeResources","render","renderParameters","view","state","size","width","height","viewState","latitude","center","longitude","zoom","featuresTilingScheme","scaleToLevel","scale","bearing","rotation","pitch"],"mappings":";;;;;;;;;;;AAAA;;AAEe,SAASA,qBAAT,CAA+BC,iBAA/B,EAAkD;AAC/D,SAAOA,iBAAiB,CAACC,cAAlB,CAAiC;AACtCC,IAAAA,UAAU,EAAE;AACVC,MAAAA,MAAM,EAAE,EADE;AAEVC,MAAAA,OAAO,EAAE,EAFC;AAGVC,MAAAA,KAAK,EAAE,EAHG;AAIVC,MAAAA,MAAM,EAAE;AAJE,KAD0B;AAStCC,IAAAA,MATsC,oBAS7B;AAAA;;AAGP,UAAMC,EAAE,GAAG,KAAKC,OAAhB;;AACAC,mCAAoBC,IAApB,CAAyB,IAAzB,EAA+BH,EAA/B;;AAGA,WAAKI,KAAL,CAAWC,IAAX,CAAgBC,EAAhB,CAAmB,QAAnB,EAA6B,UAAAC,KAAK;AAAA,eAAI,KAAI,CAACC,YAAL,CAAkBC,QAAlB,CAA2BF,KAA3B,CAAJ;AAAA,OAAlC;AAGA,WAAKC,YAAL,CAAkBC,QAAlB,CAA2B,KAAKL,KAAL,CAAWC,IAAX,CAAgBK,MAAhB,EAA3B;AACD,KApBqC;AAsBtCC,IAAAA,MAtBsC,oBAsB7B;AACP,WAAKC,aAAL;AACD,KAxBqC;AA2BtCC,IAAAA,MA3BsC,oBA2B7B;AACPC,iCAAkBX,IAAlB,CAAuB,IAAvB;AACD,KA7BqC;AAgCtCY,IAAAA,MAhCsC,kBAgC/BC,gBAhC+B,EAgCb;AACvB,+DAAwB,KAAKC,IAAL,CAAUC,KAAV,CAAgBC,IAAxC;AAAA,UAAOC,KAAP;AAAA,UAAcC,MAAd;;AAEA,UAAMH,KAAK,GAAGF,gBAAgB,CAACE,KAA/B;;AAEAH,sBAAOZ,IAAP,CAAY,IAAZ,EAAkB;AAChBH,QAAAA,EAAE,EAAEgB,gBAAgB,CAACf,OADL;AAEhBmB,QAAAA,KAAK,EAALA,KAFgB;AAGhBC,QAAAA,MAAM,EAANA,MAHgB;AAIhBC,QAAAA,SAAS,EAAE;AACTC,UAAAA,QAAQ,EAAE,KAAKN,IAAL,CAAUO,MAAV,CAAiBD,QADlB;AAETE,UAAAA,SAAS,EAAE,KAAKR,IAAL,CAAUO,MAAV,CAAiBC,SAFnB;AAGTC,UAAAA,IAAI,EAAE,KAAKT,IAAL,CAAUU,oBAAV,CAA+BC,YAA/B,CAA4CV,KAAK,CAACW,KAAlD,CAHG;AAITC,UAAAA,OAAO,EAAE,CAACZ,KAAK,CAACa,QAJP;AAKTC,UAAAA,KAAK,EAAE;AALE;AAJK,OAAlB;AAYD;AAjDqC,GAAjC,CAAP;AAmDD","sourcesContent":["import {initializeResources, render, finalizeResources} from './commons';\n\nexport default function createDeckLayerView2D(BaseLayerViewGL2D) {\n return BaseLayerViewGL2D.createSubclass({\n properties: {\n deckgl: {},\n deckFbo: {},\n model: {},\n buffer: {}\n },\n\n // Attach is called as soon as the layer view is ready to start rendering.\n attach() {\n // We use a full-screen quad and shaders to composite the frame rendered\n // with deck.gl on top of the MapView. Composition uses the MapView context.\n const gl = this.context;\n initializeResources.call(this, gl);\n\n // Update deck props\n this.layer.deck.on('change', props => this.deckInstance.setProps(props));\n\n // We need to start drawing the deck.gl layer immediately.\n this.deckInstance.setProps(this.layer.deck.toJSON());\n },\n\n redraw() {\n this.requestRender();\n },\n\n // Called when the layer must be destroyed.\n detach() {\n finalizeResources.call(this);\n },\n\n // Called every time that the layer view must be rendered.\n render(renderParameters) {\n const [width, height] = this.view.state.size;\n // The view state must be kept in-sync with the MapView of the ArcGIS API.\n const state = renderParameters.state;\n\n render.call(this, {\n gl: renderParameters.context,\n width,\n height,\n viewState: {\n latitude: this.view.center.latitude,\n longitude: this.view.center.longitude,\n zoom: this.view.featuresTilingScheme.scaleToLevel(state.scale),\n bearing: -state.rotation,\n pitch: 0\n }\n });\n }\n });\n}\n"],"file":"deck-layer-view-2d.js"}
@@ -1,31 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = createDeckLayer;
7
-
8
- function createDeckLayer(DeckProps, Layer, DeckLayerView2D) {
9
- return Layer.createSubclass({
10
- properties: {
11
- deck: {},
12
- blendMode: {},
13
- effect: {}
14
- },
15
- constructor: function constructor() {
16
- this.deck = new DeckProps();
17
- },
18
- createLayerView: function createLayerView(view) {
19
- if (view.type === '2d') {
20
- return new DeckLayerView2D({
21
- view: view,
22
- layer: this
23
- });
24
- }
25
-
26
- console.error('DeckLayer does not support SceneView at the moment. Use DeckRenderer instead.');
27
- return null;
28
- }
29
- });
30
- }
31
- //# sourceMappingURL=deck-layer.js.map