2gis · Kuznecoff · Feb 6, 2023 · Feb 6, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,6 @@
 .idea/
 node_modules/
 .vscode/
-dist/
 .DS_Store
 npm-debug.log
 yarn.lock
diff --git a/demo/index.ts b/demo/index.ts
@@ -13,7 +13,7 @@ const map = new mapgl.Map('container', {
     key: '4970330e-7f1c-4921-808c-0eb7c4e63001',
 });
 
-const deck = new Deck(initDeck2gisProps(map));
+const deck = new Deck(initDeck2gisProps(map, { skipResizeRenderer: true }));
 map.once('ready', () => {
     initDeckGL();
 });

diff --git a/dist/deck2gislayer.js b/dist/deck2gislayer.js
diff --git a/dist/demo.js b/dist/demo.js
diff --git a/dist/docs.json b/dist/docs.json
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>MapGL deckgl layer example</title>
+        <style>
+            html,
+            body,
+            #container {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="container"></div>
+        <script src="https://mapgl.2gis.com/api/js"></script>
+        <script src="demo.js"></script>
+    </body>
+</html>
diff --git a/dist/types/deckgl2gisLayer.d.ts b/dist/types/deckgl2gisLayer.d.ts
@@ -0,0 +1,66 @@
+import type { Deck, Layer } from '@deck.gl/core/typed';
+import { CustomRenderProps, DeckCustomLayer } from './types';
+import type { Map } from '@2gis/mapgl/types';
+/**
+ * Any Layer class from deck.gl.
+ */
+export type DeckLayer = any;
+/**
+ * Deck2gisLayer required props.
+ */
+export interface Deck2gisLayerProps {
+    id: string;
+    renderingMode?: '2d' | '3d';
+    deck: Deck;
+    type: DeckLayer;
+    antialiasing?: boolean;
+}
+/**
+ * LayerProps is type extends from Layer:
+ * https://deck.gl/docs/api-reference/core/layer
+ */
+export type LayerProps<LayerT extends Layer> = Deck2gisLayerProps & Partial<LayerT['props']>;
+/**
+ * A class that provides rendering any deck.gl layer inside the MapGl canvas / WebGL context.
+ */
+export declare class Deck2gisLayer<LayerT extends Layer> implements DeckCustomLayer {
+    id: string;
+    type: 'custom';
+    renderingMode: '2d' | '3d';
+    map: Map | null;
+    deck: Deck | null;
+    props: LayerProps<LayerT>;
+    gl?: WebGLRenderingContext | WebGL2RenderingContext;
+    antialiasing: boolean;
+    /**
+     * Initializes deck.gl properties for working with the MapGL map.
+     * @param map The map instance.
+     * @param deckProps CustomRenderProps initialization options.
+     */
+    static initDeck2gisProps: (map: Map, deckProps?: CustomRenderProps) => import("@deck.gl/core/typed").DeckProps;
+    private frameBuffer?;
+    private program?;
+    private vao?;
+    /**
+     * Example:
+     * ```js
+     * const deckLayer = new mapgl.Deck2gisLayer(map, {
+     *     id: 'deckLayer',
+     *     deck,
+     *     type: HexagonLayer,
+     *     data,
+     *     getPosition: (d) => [d.point.lon, d.point.lat]
+     * });
+     *
+     * map.addLayer(deckLayer);
+     * ```
+     * @param map The map instance.
+     * @param options Deck2gisLayer initialization options.
+     */
+    constructor(props: LayerProps<LayerT>);
+    /**
+     * Sets layer properties and updates the layer.
+     * @param props deck.gl layer properties.
+     */
+    setProps(props: Partial<LayerProps<LayerT>>): void;
+}
diff --git a/dist/types/index.d.ts b/dist/types/index.d.ts
@@ -0,0 +1,3 @@
+import { Deck2gisLayer } from './deckgl2gisLayer';
+import { initDeck2gisProps } from './utils';
+export { Deck2gisLayer, initDeck2gisProps };
diff --git a/dist/types/optimized.fsh.d.ts b/dist/types/optimized.fsh.d.ts
@@ -0,0 +1,2 @@
+declare const _default: "precision mediump float;\n#define GLSLIFY 1\nvarying vec2 v_rgbNW;\nvarying vec2 v_rgbNE;\nvarying vec2 v_rgbSW;\nvarying vec2 v_rgbSE;\nvarying vec2 v_rgbM;\nvarying vec2 vUv;\nuniform vec2 iResolution;\nuniform sampler2D iChannel0;\nuniform bool enabled;\n#ifndef FXAA_REDUCE_MIN\n    #define FXAA_REDUCE_MIN   (1.0/ 128.0)\n#endif\n#ifndef FXAA_REDUCE_MUL\n    #define FXAA_REDUCE_MUL   (1.0 / 8.0)\n#endif\n#ifndef FXAA_SPAN_MAX\n    #define FXAA_SPAN_MAX     8.0\n#endif\nvec4 fxaa_1_0(sampler2D tex, vec2 fragCoord, vec2 resolution,\n            vec2 v_rgbNW, vec2 v_rgbNE, \n            vec2 v_rgbSW, vec2 v_rgbSE, \n            vec2 v_rgbM) {\n    vec4 color;\n    mediump vec2 inverseVP = vec2(1.0 / resolution.x, 1.0 / resolution.y);\n    vec3 rgbNW = texture2D(tex, v_rgbNW).xyz;\n    vec3 rgbNE = texture2D(tex, v_rgbNE).xyz;\n    vec3 rgbSW = texture2D(tex, v_rgbSW).xyz;\n    vec3 rgbSE = texture2D(tex, v_rgbSE).xyz;\n    vec4 texColor = texture2D(tex, v_rgbM);\n    vec3 rgbM  = texColor.xyz;\n    vec3 luma = vec3(0.299, 0.587, 0.114);\n    float lumaNW = dot(rgbNW, luma);\n    float lumaNE = dot(rgbNE, luma);\n    float lumaSW = dot(rgbSW, luma);\n    float lumaSE = dot(rgbSE, luma);\n    float lumaM  = dot(rgbM,  luma);\n    float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));\n    float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));\n    \n    mediump vec2 dir;\n    dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));\n    dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));\n    \n    float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) *\n                          (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);\n    \n    float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);\n    dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX),\n              max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),\n              dir * rcpDirMin)) * inverseVP;\n    \n    vec3 rgbA = 0.5 * (\n        texture2D(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz +\n        texture2D(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);\n    vec3 rgbB = rgbA * 0.5 + 0.25 * (\n        texture2D(tex, fragCoord * inverseVP + dir * -0.5).xyz +\n        texture2D(tex, fragCoord * inverseVP + dir * 0.5).xyz);\n    float lumaB = dot(rgbB, luma);\n    if ((lumaB < lumaMin) || (lumaB > lumaMax))\n        color = vec4(rgbA, texColor.a);\n    else\n        color = vec4(rgbB, texColor.a);\n    return color;\n}\nvoid main() {\n  \n  mediump vec2 fragCoord = vUv * iResolution; \n  vec4 color;\n  if (enabled) {\n      color = fxaa_1_0(iChannel0, fragCoord, iResolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM);\n  } else {\n      color = texture2D(iChannel0, vUv);\n  }\n  gl_FragColor = color;\n}\n";
+export default _default;
diff --git a/dist/types/optimized.vsh.d.ts b/dist/types/optimized.vsh.d.ts
@@ -0,0 +1,2 @@
+declare const _default: "precision mediump float;\n#define GLSLIFY 1\nvarying vec2 v_rgbNW;\nvarying vec2 v_rgbNE;\nvarying vec2 v_rgbSW;\nvarying vec2 v_rgbSE;\nvarying vec2 v_rgbM;\nuniform vec2 iResolution;\nattribute vec2 position;\nvarying vec2 vUv;\nvoid texcoords_1_0(vec2 fragCoord, vec2 resolution,\nout vec2 v_rgbNW, out vec2 v_rgbNE,\nout vec2 v_rgbSW, out vec2 v_rgbSE,\nout vec2 v_rgbM) {\nvec2 inverseVP = 1.0 / resolution.xy;\nv_rgbNW = (fragCoord + vec2(-1.0, -1.0)) * inverseVP;\nv_rgbNE = (fragCoord + vec2(1.0, -1.0)) * inverseVP;\nv_rgbSW = (fragCoord + vec2(-1.0, 1.0)) * inverseVP;\nv_rgbSE = (fragCoord + vec2(1.0, 1.0)) * inverseVP;\nv_rgbM = vec2(fragCoord * inverseVP);\n}\nvoid main(void) {\n   gl_Position = vec4(position, 1.0, 1.0);\n   \n   \n   vUv = (position + 1.0) * 0.5;\n   vUv.y = vUv.y;\n   vec2 fragCoord = vUv * iResolution;\n   texcoords_1_0(fragCoord, iResolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM);\n}";
+export default _default;
diff --git a/dist/types/types.d.ts b/dist/types/types.d.ts
@@ -0,0 +1,19 @@
+import { DeckProps } from '@deck.gl/core/typed';
+export interface DeckCustomLayer {
+    type: 'custom';
+    id: string;
+    render: (gl: WebGLRenderingContext) => void;
+    props: any;
+}
+/**
+ * CustomRenderProps is type extends from DeckProps:
+ * https://deck.gl/docs/api-reference/core/deck#properties
+ */
+export type CustomRenderProps = Partial<DeckProps> & CustomRenderInternalProps;
+/**
+ * RenderProps is type extends from DeckProps:
+ * https://deck.gl/docs/api-reference/core/deck#properties
+ */
+export type RenderProps = Partial<DeckProps> & {
+    skipResizeRenderer?: boolean;
+};
diff --git a/dist/types/utils.d.ts b/dist/types/utils.d.ts
@@ -0,0 +1,9 @@
+import type { Map } from '@2gis/mapgl/types';
+import { CustomRenderProps, RenderProps } from './types';
+import { DeckProps } from '@deck.gl/core/typed';
+/**
+ * Initializes deck.gl properties for working with the MapGL map.
+ * @param map The map instance.
+ * @param deckProps CustomRenderProps initialization options.
+ */
+export declare function initDeck2gisProps(map: Map, deckProps?: RenderProps | CustomRenderProps): DeckProps;
diff --git a/dist/types/viewport.d.ts b/dist/types/viewport.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/src/deckgl2gisLayer.ts b/src/deckgl2gisLayer.ts
@@ -178,8 +178,7 @@ export class Deck2gisLayer<LayerT extends Layer> implements DeckCustomLayer {
         ) {
             return;
         }
-        const { _2gisData } = this.deck.props as CustomRenderProps;
-        _2gisData._2gisCurrentViewport = undefined;
+        const { _2gisData, skipResizeRenderer } = this.deck.props as CustomRenderProps;
         const gl = this.gl;
         this.frameBuffer.bind(gl);
         gl.clearColor(1, 1, 1, 0);
@@ -192,28 +191,34 @@ export class Deck2gisLayer<LayerT extends Layer> implements DeckCustomLayer {
         }
 
         this.frameBuffer.unbind(gl);
-        drawLayer(this.deck, this.map, this);
-
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         const mapSize = this.map.getSize();
-        const texture = this.frameBuffer.getTexture();
-        texture.enable(gl, 0);
-        this.program.enable(gl);
-        this.program.bind(gl, {
-            iResolution: [
-                mapSize[0] * window.devicePixelRatio,
-                mapSize[1] * window.devicePixelRatio,
-            ],
-            iChannel0: 0,
-            enabled: Number(this.antialiasing),
-        });
-
-        this.vao.bind({
-            gl,
-            extensions: { OES_vertex_array_object: gl.getExtension('OES_vertex_array_object') },
-        });
-
-        gl.disable(gl.CULL_FACE);
-        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        if (
+            !skipResizeRenderer ||
+            (this.deck.width === mapSize[0] && this.deck.height === mapSize[1])
+        ) {
+            drawLayer(this.deck, this.map, this);
+
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            const texture = this.frameBuffer.getTexture();
+
+            texture.enable(gl, 0);
+            this.program.enable(gl);
+            this.program.bind(gl, {
+                iResolution: [
+                    mapSize[0] * window.devicePixelRatio,
+                    mapSize[1] * window.devicePixelRatio,
+                ],
+                iChannel0: 0,
+                enabled: Number(this.antialiasing),
+            });
+
+            this.vao.bind({
+                gl,
+                extensions: { OES_vertex_array_object: gl.getExtension('OES_vertex_array_object') },
+            });
+
+            gl.disable(gl.CULL_FACE);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+        }
     };
 }
diff --git a/src/types.ts b/src/types.ts
@@ -41,10 +41,17 @@ export type CustomRenderInternalProps = {
     _2gisFramestart: boolean;
     _customRender: (reason: string) => void;
     _2gisData?: any;
+    skipResizeRenderer?: boolean
 };
 
 /**
  * CustomRenderProps is type extends from DeckProps:
  * https://deck.gl/docs/api-reference/core/deck#properties
  */
 export type CustomRenderProps = Partial<DeckProps> & CustomRenderInternalProps;
+
+/**
+ * RenderProps is type extends from DeckProps:
+ * https://deck.gl/docs/api-reference/core/deck#properties
+ */
+export type RenderProps = Partial<DeckProps> & { skipResizeRenderer?: boolean };
diff --git a/src/utils.ts b/src/utils.ts
@@ -12,7 +12,7 @@ import Shader from '2gl/Shader';
 
 import fill_fsh from './optimized.fsh';
 import fill_vsh from './optimized.vsh';
-import { CustomRenderProps } from './types';
+import { CustomRenderProps, RenderProps } from './types';
 import { DeckProps } from '@deck.gl/core/typed';
 
 /**
@@ -81,6 +81,10 @@ export function prepareDeckInstance({
         return null;
     }
     // todo use public methods after done TILES-4753
+    (map as any)._impl.on(
+        'frameend',
+        () => ((deckInstance as any).props._2gisData._2gisCurrentViewport = null),
+    );
     (map as any)._impl.on(
         'framestart',
         () => ((deck.props as CustomRenderProps)._2gisData._2gisFramestart = true),
@@ -121,18 +125,18 @@ export function updateLayer(deck: Deck, _layer: Deck2gisLayer<any>): void {
  * @internal
  */
 export function drawLayer(deck: Deck, map: Map, layer: Deck2gisLayer<any>): void {
+    if (!(deck as any).layerManager) {
+        return;
+    }
+
     let currentViewport = (deck.props as CustomRenderProps)._2gisData._2gisCurrentViewport;
+
     if (!currentViewport) {
         // This is the first layer drawn in this render cycle.
         // Generate viewport from the current map state.
         currentViewport = getViewport(map);
         (deck.props as CustomRenderProps)._2gisData._2gisCurrentViewport = currentViewport;
     }
-
-    if (!(deck as any).layerManager) {
-        return;
-    }
-
     stateBinder(map, layer);
 
     deck._drawLayers('2gis-repaint', {
@@ -202,7 +206,7 @@ function updateLayers(deck: Deck): void {
  * @param map The map instance.
  * @param deckProps CustomRenderProps initialization options.
  */
-export function initDeck2gisProps(map: Map, deckProps?: CustomRenderProps): DeckProps {
+export function initDeck2gisProps(map: Map, deckProps?: RenderProps | CustomRenderProps): DeckProps {
     const gl = map.getWebGLContext();
     const deck2gisProps: any = {
         ...deckProps,