Merge pull request mapbox#1 from CartoDB/webgl-layer2

Using `setCustomWebGLDrawCallback` for custom-webgl layers
JpmGuides · Feb 8, 2018 · 398591a · 398591a
2 parents 470c7ec + 0822443
commit 398591a
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 21 deletions.
diff --git a/debug/custom_webgl_layer.html b/debug/custom_webgl_layer.html
@@ -3,7 +3,7 @@
 <head>
     <title>Mapbox GL JS debug page</title>
     <meta charset='utf-8'>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <link rel='stylesheet' href='/dist/mapbox-gl.css' />
     <style>
         body { margin: 0; padding: 0; }
@@ -18,7 +18,7 @@
 <script src='/debug/access_token_generated.js'></script>
 <script>
 
-var map = window.map = new mapboxgl.Map({
+var map = new mapboxgl.Map({
     container: 'map',
     zoom: 3,
     center: [-77.01866, 38.888],
@@ -29,18 +29,23 @@
 map.addControl(new mapboxgl.NavigationControl());
 map.addControl(new mapboxgl.GeolocateControl());
 
-window.callback = (gl)=>{
-    gl.clearColor(0, 0.5, 0, 1);
+map.setCustomWebGLDrawCallback('externallayer0', (gl, invalidate) => {
+    gl.clearColor(0, 1, 0, 0.1);
     gl.clear(gl.COLOR_BUFFER_BIT);
-}
+});
+map.setCustomWebGLDrawCallback('externallayer1', (gl, invalidate) => {
+    gl.clearColor(1, 1, 1, 0.1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+});
 
 map.on('load', function() {
     map.addLayer({
-        "id": "externalwebgl",
-        "type": "custom-webgl",
-        "layout": {
-            "callback": "callback",
-        }
+        "id": "externallayer0",
+        "type": "custom-webgl"
+    }, "marine-label-sm-ln");
+    map.addLayer({
+        "id": "externallayer1",
+        "type": "custom-webgl"
     }, "marine-label-sm-ln");
 });
 

diff --git a/src/render/draw_custom_webgl.js b/src/render/draw_custom_webgl.js
@@ -1,9 +1,5 @@
 // @flow
 
-const pattern = require('./pattern');
-const StencilMode = require('../gl/stencil_mode');
-const DepthMode = require('../gl/depth_mode');
-
 import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
 import type WebGLLayer from '../style/style_layer/custom_webgl_layer';
@@ -20,15 +16,22 @@ function drawCustomWebGL(painter: Painter, sourceCache: SourceCache, layer: WebG
         For example, if the external renderer receives some data from an AJAX request,
         it can upload data to the WebGL context asynchronously (regarding Mapbox GL rendering,
         it would synchronous respect WebGL) and call invalidateCurrentWebGLState afterwards
-         to ensure that in the next Mapbox GL rendering pass the WebGL tracked is not stale (which would produce rendering artifacts).
+        to ensure that in the next Mapbox GL rendering pass the WebGL tracked is not stale (which would produce rendering artifacts).
     */
     const invalidateCurrentWebGLState = () => {
-        const names = Object.keys(painter.context).filter(name => painter.context[name].current !== undefined);
-        names.map((name, index) => painter.context[name].current = {});
+        Object.keys(this.context).forEach((key) => {
+            if (this.context[key].current !== undefined) {
+                this.context[key].current = {};
+            }
+        });
     };
-    const callback = window[layer.layout._values.callback];
-    if (callback) {
-        callback(painter.context.gl, invalidateCurrentWebGLState);
-        invalidateCurrentWebGLState();
+
+    const drawCallbacks = painter.customWebGLDrawCallbacks;
+    if (drawCallbacks.hasOwnProperty(layer.id)) {
+        const callback = drawCallbacks[layer.id];
+        if (callback) {
+            callback(painter.context.gl, invalidateCurrentWebGLState);
+            invalidateCurrentWebGLState();
+        }
     }
 }
diff --git a/src/render/painter.js b/src/render/painter.js
@@ -102,6 +102,7 @@ class Painter {
         this.context = new Context(gl);
         this.transform = transform;
         this._tileTextures = {};
+        this.customWebGLDrawCallbacks = {};
 
         this.setup();
 
@@ -471,6 +472,17 @@ class Painter {
 
         return nextProgram;
     }
+
+    /**
+     * Store a DrawCallback used by a `custom-webgl` layer.
+     * This callback will be called by the function renderLayer -> drawWebGL.
+     *
+     * @param {string} id The ID of the `custom-webgl` layer.
+     * @param {Function} callback The callback to be stored.
+     */
+    setCustomWebGLDrawCallback(id: string, callback: Function) {
+        this.customWebGLDrawCallbacks[id] = callback;
+    }
 }
 
 module.exports = Painter;
diff --git a/src/ui/map.js b/src/ui/map.js
@@ -1579,6 +1579,16 @@ class Map extends Camera {
         }
     }
 
+    /**
+     * Store a DrawCallback used by a `custom-webgl` layer in the `painter`.
+     *
+     * @param {string} id The ID of the `custom-webgl` layer.
+     * @param {Function} callback The callback to be stored.
+     */
+    setCustomWebGLDrawCallback(id: string, callback: Function) {
+        this.painter.setCustomWebGLDrawCallback(id, callback);
+    }
+
     /**
      * Gets and sets a Boolean indicating whether the map will render an outline
      * around each tile. These tile boundaries are useful for debugging.