implement custom style layers

mapbox · Sep 6, 2018 · 2309d63 · 2309d63
1 parent d97474c
commit 2309d63
Show file tree

Hide file tree

Showing 32 changed files with 1,440 additions and 170 deletions.
diff --git a/debug/.eslintrc b/debug/.eslintrc
@@ -18,7 +18,7 @@
     "prefer-template": "off"
   },
   "env": {
-    "es6": false,
+    "es6": true,
     "browser": true
   },
   "globals": {

diff --git a/debug/custom3d.html b/debug/custom3d.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+<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">
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script>
+
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 1.69,
+    center: [-9.4, -26.8],
+    bearing: 131,
+    pitch: 60,
+    style: 'mapbox://styles/mapbox/light-v9',
+    hash: true
+});
+
+class Custom {
+    constructor() {
+        this.id = 'mycustomlayer';
+        this.type = 'custom';
+        this.renderingMode = '3d';
+    }
+
+    onAdd(map, gl) {
+
+        const vertexSource = `
+
+        attribute vec3 aPos;
+        uniform mat4 uMatrix;
+
+        void main() {
+            gl_Position = uMatrix * vec4(aPos, 1.0);
+        }
+        `;
+
+        const fragmentSource = `
+        void main() {
+            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+        }
+        `;
+
+        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(vertexShader, vertexSource);
+        gl.compileShader(vertexShader);
+        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        gl.shaderSource(fragmentShader, fragmentSource);
+        gl.compileShader(fragmentShader);
+
+        this.program = gl.createProgram();
+        gl.attachShader(this.program, vertexShader);
+        gl.attachShader(this.program, fragmentShader);
+        gl.linkProgram(this.program);
+        gl.validateProgram(this.program);
+
+        this.program.aPos = gl.getAttribLocation(this.program, "aPos");
+        this.program.uMatrix = gl.getUniformLocation(this.program, "uMatrix");
+
+        const x = 0.5;
+        const y = 0.5;
+        const z = 0.125;
+        const d = 0.125;
+
+        const vertexArray = new Float32Array([
+            x, y, 0,
+            x + d, y, 0,
+            x, y + d, z,
+            x + d, y + d, z,
+            x, y + d + d, 0,
+            x + d, y + d + d, 0]);
+        const indexArray = new Uint16Array([
+            0, 1, 2,
+            1, 2, 3,
+            2, 3, 4,
+            3, 4, 5
+        ]);
+
+        this.vertexBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, vertexArray, gl.STATIC_DRAW);
+        this.indexBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexArray, gl.STATIC_DRAW);
+    }
+
+    render(gl, matrix) {
+        gl.useProgram(this.program);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+        gl.enableVertexAttribArray(this.program.a_pos);
+        gl.vertexAttribPointer(this.program.aPos, 3, gl.FLOAT, false, 0, 0);
+        gl.uniformMatrix4fv(this.program.uMatrix, false, matrix);
+        gl.drawElements(gl.TRIANGLES, 12, gl.UNSIGNED_SHORT, 0);
+    }
+}
+
+map.on('load', function() {
+    map.addLayer(new Custom());
+});
+
+</script>
+</body>
+</html>
diff --git a/debug/threejs.html b/debug/threejs.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<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">
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
+<script src='/debug/access_token_generated.js'></script>
+<script>
+
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 16.5,
+    center: [-79.390307, 43.658956],
+    bearing: 20,
+    pitch: 60,
+    style: 'mapbox://styles/mapbox/light-v9',
+    hash: true
+});
+
+const THREE = window.THREE;
+
+class ThreeJSCube {
+    constructor() {
+        this.id = 'mycustomlayer';
+        this.type = 'custom';
+        this.renderingMode = '3d';
+
+        this.translate = [0.279471, 0.364935, 0.0000025];
+        this.scale = 0.000003;
+
+        this.camera = new THREE.Camera();
+        this.scene = new THREE.Scene();
+
+        var geometry = new THREE.BoxGeometry(1, 1, 1);
+        var material = new THREE.MeshPhongMaterial({ color: 0xeeeeff });
+        this.cube = new THREE.Mesh(geometry, material);
+        this.scene.add(this.cube);
+
+        const directionalLight = new THREE.DirectionalLight(0xffffff);
+        directionalLight.position.set(0, -70, 100).normalize();
+        this.scene.add(directionalLight);
+    }
+
+    onAdd(map, gl) {
+        this.map = map;
+
+        this.renderer = new THREE.WebGLRenderer({
+            canvas: map.getCanvas(),
+            context: gl
+        });
+
+        this.renderer.autoClear = false;
+    }
+
+    render(gl, matrix) {
+        const m = new THREE.Matrix4().fromArray(matrix);
+        const l = new THREE.Matrix4().makeTranslation(this.translate[0], this.translate[1], this.translate[2])
+            .scale(new THREE.Vector3(this.scale, -this.scale, this.scale));
+        this.cube.rotation.x += 0.01;
+        this.cube.rotation.y += 0.01;
+
+        this.camera.projectionMatrix.elements = matrix;
+        this.camera.projectionMatrix = m.multiply(l);
+        this.renderer.state.reset();
+        this.renderer.render(this.scene, this.camera);
+        this.map.triggerRepaint();
+    }
+}
+
+map.on('load', function() {
+    map.addLayer({
+        'id': '3d-buildings',
+        'source': 'composite',
+        'source-layer': 'building',
+        'filter': ['==', 'extrude', 'true'],
+        'type': 'fill-extrusion',
+        'minzoom': 15,
+        'paint': {
+            'fill-extrusion-color': '#ccc',
+            'fill-extrusion-height': ["get", "height"]
+        }
+    });
+
+    map.addLayer(new ThreeJSCube());
+});
+</script>
+</body>
+</html>
diff --git a/docs/documentation.yml b/docs/documentation.yml
@@ -8,6 +8,7 @@ toc:
   - CameraOptions
   - PaddingOptions
   - RequestParameters
+  - CustomLayerInterface
   - name: Geography & Geometry
     description: |
       `LngLat` and `LngLatBounds` represent points and rectanges in geographic

diff --git a/docs/pages/example/custom-style-layer.html b/docs/pages/example/custom-style-layer.html
@@ -0,0 +1,52 @@
+<div id='map'></div>
+<script>
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 4,
+    center: [0, 0],
+    style: 'mapbox://styles/mapbox/light-v9',
+    hash: true
+});
+
+
+var nullIslandLayer = {
+    id: 'null-island',
+    type: 'custom',
+
+    onAdd: function (map, gl) {
+        var vertexSource = "" +
+        "uniform mat4 u_matrix;" +
+        "void main() {" +
+        "    gl_Position = u_matrix * vec4(0.5, 0.5, 0.0, 1.0);" +
+        "    gl_PointSize = 100.0;" +
+        "}";
+
+        var fragmentSource = "" +
+        "void main() {" +
+        "    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
+        "}";
+
+        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(vertexShader, vertexSource);
+        gl.compileShader(vertexShader);
+        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        gl.shaderSource(fragmentShader, fragmentSource);
+        gl.compileShader(fragmentShader);
+
+        this.program = gl.createProgram();
+        gl.attachShader(this.program, vertexShader);
+        gl.attachShader(this.program, fragmentShader);
+        gl.linkProgram(this.program);
+    },
+
+    render: function(gl, matrix) {
+        gl.useProgram(this.program);
+        gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);
+        gl.drawArrays(gl.POINTS, 0, 1);
+    }
+};
+
+map.on('load', function() {
+    map.addLayer(nullIslandLayer);
+});
+</script>
diff --git a/docs/pages/example/custom-style-layer.js b/docs/pages/example/custom-style-layer.js
@@ -0,0 +1,10 @@
+/*---
+title: Add a custom style layer
+description: Use a custom style layer to add custom gl rendering.
+tags:
+  - layers
+pathname: /mapbox-gl-js/example/custom-style-layer/
+---*/
+import Example from '../../components/example';
+import html from './custom-style-layer.html';
+export default Example(html);
diff --git a/src/geo/transform.js b/src/geo/transform.js
@@ -30,6 +30,7 @@ class Transform {
     zoomFraction: number;
     pixelsToGLUnits: [number, number];
     cameraToCenterDistance: number;
+    mercatorMatrix: Array<number>;
     projMatrix: Float64Array;
     alignedProjMatrix: Float64Array;
     pixelMatrix: Float64Array;
@@ -464,6 +465,10 @@ class Transform {
         return cache[posMatrixKey];
     }
 
+    customLayerMatrix(): Array<number> {
+        return this.mercatorMatrix.slice();
+    }
+
     _constrain() {
         if (!this.center || !this.width || !this.height || this._constraining) return;
 
@@ -560,6 +565,10 @@ class Transform {
         mat4.rotateZ(m, m, this.angle);
         mat4.translate(m, m, [-x, -y, 0]);
 
+        // The mercatorMatrix can be used to transform points from mercator coordinates
+        // ([0, 0] nw, [1, 1] se) to GL coordinates.
+        this.mercatorMatrix = mat4.scale([], m, [this.worldSize, this.worldSize, this.worldSize]);
+
         // scale vertically to meters per pixel (inverse of ground resolution):
         // worldSize / (circumferenceOfEarth * cos(lat * π / 180))
         const verticalScale = this.worldSize / (2 * Math.PI * 6378137 * Math.abs(Math.cos(this.center.lat * (Math.PI / 180))));