Merge branch 'master' of https://github.com/maptalks/maptalks.biglayer

gulpfile.js

@@ -7,29 +7,52 @@ const gulp = require('gulp'),
     BundleHelper = require('maptalks-build-helpers').BundleHelper;
 const bundleHelper = new BundleHelper(pkg);
 
+// https://github.com/mrdoob/three.js/blob/dev/rollup.config.js#L1
+function glsl() {
+    return {
+        transform(code, id) {
+            if (/\.glsl$/.test(id) === false) return undefined;
+
+            const transformedCode = 'export default ' + JSON.stringify(
+                code
+                .replace(/[ \t]*\/\/.*\n/g, '') // remove //
+                .replace(/[ \t]*\/\*[\s\S]*?\*\//g, '') // remove /* */
+                .replace(/\n{2,}/g, '\n') // # \n+ to \n
+            ) + ';';
+
+            return {
+                code: transformedCode,
+                map: {
+                    mappings: ''
+                }
+            };
+        }
+    };
+}
+
 gulp.task('build', () => {
-    return bundleHelper.bundle('src/maptalks.webgl.js');
+    const config = bundleHelper.getDefaultRollupConfig();
+    config.plugins.unshift(glsl());
+    return bundleHelper.bundle('src/index.js', config);
 });
 
 gulp.task('minify', ['build'], () => {
     bundleHelper.minify();
 });
 
 gulp.task('watch', () => {
-    //gulp.watch(['src/**/*.js'], ['build']);
     const config = bundleHelper.getDefaultRollupConfig();
-    config.input = 'src/maptalks.webgl.js';
+    config.plugins.unshift(glsl());
+    config.input = 'src/index.js';
     const year = new Date().getFullYear();
     const banner = `/*!\n * ${pkg.name} v${pkg.version}\n * LICENSE : ${pkg.license}\n * (c) 2016-${year} maptalks.org\n */`;
     config.banner = banner;
-    config.output = [
-        {
-            file: `dist/${pkg.name}.js`,
-            format: 'umd',
-            name: 'maptalks',
-            extend : true
-        }
-    ];
+    config.output = [{
+        file: `dist/${pkg.name}.js`,
+        format: 'umd',
+        name: 'maptalks',
+        extend: true
+    }];
     const watcher = rollup.watch(config);
     watcher.on('event', e => {
         if (e.code === 'START') {
@@ -55,4 +78,3 @@ gulp.task('connect', ['watch'], () => {
 });
 
 gulp.task('default', ['connect']);
-

package.json

@@ -8,8 +8,8 @@
     "url": "https://github.com/maptalks/maptalks.biglayer.git"
   },
   "main": "dist/maptalks.biglayer.js",
-  "module": "src/maptalks.biglayer.es.js",
-  "jsnext:main": "src/maptalks.biglayer.es.js",
+  "module": "dist/maptalks.biglayer.es.js",
+  "jsnext:main": "dist/maptalks.biglayer.es.js",
   "scripts": {
     "preversion": "npm run lint",
     "version": "gulp minify && git add -A dist",

src/Renderer.js

@@ -375,7 +375,9 @@ export default class WebglRenderer extends maptalks.renderer.CanvasRenderer {
             // doesn't need to flip Y with headless-gl, unknown reason
             mat4.scale(m, m, [1, -1, 1]);
         }
+        // m1: projection matrix
         mat4.copy(m1, m);
+        // m2: view matrix
         const m2 = this._getLookAtMat();
         mat4.multiply(m, m1, m2);
         return m;

src/index.js

@@ -1,5 +1,7 @@
-export { default as WebglRenderer } from './Renderer';
+// export renderer and painters with package 'webgl'.
+import * as webgl from './webgl';
 
-export * from './painter';
+export { webgl };
 
-export { default as Shader } from './shader/Shader';
+// export layers as maptalks.Big*Layer
+export * from './layer';

src/shader/Shader.js

@@ -1,27 +1,38 @@
-import lineFragment from './line.fragment';
-import lineVertex from './line.vertex';
-import pointFragment from './point.fragment';
-import pointVertex from './point.vertex';
-import polygonFragment from './polygon.fragment';
-import polygonVertex from './polygon.vertex';
-import extrudeFragment from './extrude.fragment';
-import extrudeVertex from './extrude.vertex';
+import { maxUniformLength } from './common';
+import lineFragment from './line.fragment.glsl';
+import lineVertex from './line.vertex.glsl';
+import pointFragment from './point.fragment.glsl';
+import pointVertex from './point.vertex.glsl';
+import polygonFragment from './polygon.fragment.glsl';
+import polygonVertex from './polygon.vertex.glsl';
+import extrudeFragment from './extrude.fragment.glsl';
+import extrudeVertex from './extrude.vertex.glsl';
 
-export default {
-    'line': {
-        'fragmentSource' : lineFragment,
-        'vertexSource' : lineVertex
+const shaders = {
+    line: {
+        fragmentSource: lineFragment,
+        vertexSource: lineVertex
     },
-    'point': {
-        'fragmentSource' : pointFragment,
-        'vertexSource' : pointVertex
+    point: {
+        fragmentSource: pointFragment,
+        vertexSource: pointVertex
     },
-    'polygon' : {
-        'fragmentSource' : polygonFragment,
-        'vertexSource' : polygonVertex
+    polygon: {
+        fragmentSource: polygonFragment,
+        vertexSource: polygonVertex
     },
-    'extrude' : {
-        'fragmentSource' : extrudeFragment,
-        'vertexSource' : extrudeVertex
+    extrude: {
+        fragmentSource: extrudeFragment,
+        vertexSource: extrudeVertex
     }
 };
+
+const re = /maxUniformLength/g;
+
+for (const name in shaders) {
+    const program = shaders[name];
+    program.fragmentSource = program.fragmentSource.replace(re, maxUniformLength);
+    program.vertexSource = program.vertexSource.replace(re, maxUniformLength);
+}
+
+export default shaders;

src/shader/extrude.fragment.js → src/shader/extrude.fragment.glsl

@@ -1,5 +1,3 @@
-export default
-`
 precision mediump float;
 
 varying vec4 v_texcoord;
@@ -8,4 +6,4 @@ varying float v_opacity;
 
 void main() {
     gl_FragColor = v_texcoord * v_opacity;
-}`;
+}

src/shader/extrude.vertex.js → src/shader/extrude.vertex.glsl

@@ -1,6 +1,4 @@
-import { maxUniformLength } from './common';
-export default
-`attribute vec4 a_pos;
+attribute vec4 a_pos;
 attribute vec4 a_normal;
 //tex_idx * 100 + opacity * 10
 attribute float a_fill_style;
@@ -12,7 +10,7 @@ uniform lowp float u_lightintensity;
 // uniform vec3 u_ambientlight;
 
 uniform mat4 u_matrix;
-uniform float u_fill_styles[${maxUniformLength}];
+uniform float u_fill_styles[maxUniformLength];
 
 varying float v_opacity;
 varying vec4 v_texcoord;
@@ -75,4 +73,4 @@ void main() {
   // // }
 
   // v_lighting.rgb += clamp(directional * u_lightcolor, mix(vec3(0.0), vec3(0.3), 1.0 - u_lightcolor), vec3(1.0));
-}`;
+}

src/shader/line.fragment.js → src/shader/line.fragment.glsl

@@ -1,5 +1,4 @@
-export default
-`#ifdef GL_ES
+#ifdef GL_ES
 precision mediump float;
 #else
 #define lowp
@@ -41,4 +40,4 @@ void main() {
 #ifdef OVERDRAW_INSPECTOR
     gl_FragColor = vec4(1.0);
 #endif
-}`;
+}

src/shader/line.vertex.js → src/shader/line.vertex.glsl

@@ -1,6 +1,4 @@
-import { maxUniformLength } from './common';
-export default
-`#ifdef GL_ES
+#ifdef GL_ES
 precision highp float;
 #else
 #define lowp
@@ -18,7 +16,7 @@ attribute float a_style;
 
 uniform mat4 u_matrix;
 uniform float u_scale;
-uniform float u_styles[${maxUniformLength}];
+uniform float u_styles[maxUniformLength];
 
 varying vec2 v_linenormal;
 varying float v_linewidth;
@@ -60,5 +58,4 @@ void main() {
         //
         v_texture_normal = sign(a_normal.y);
     }
-
-}`;
+}

src/shader/point.fragment.js → src/shader/point.fragment.glsl

@@ -1,8 +1,6 @@
-export default
-`
 precision mediump float;
 uniform sampler2D u_sampler;
 varying vec3 v_texCoord;
 void main() {
     gl_FragColor = texture2D(u_sampler, vec2(v_texCoord[0] + gl_PointCoord[0] * v_texCoord[1], 1.0 + gl_PointCoord[1] * v_texCoord[2]));
-}`;
+}

src/shader/point.vertex.js → src/shader/point.vertex.glsl

@@ -1,6 +1,3 @@
-import { maxUniformLength } from './common';
-export default
-`
 // marker's 2d point at max zoom
 attribute vec4 a_pos;
 
@@ -16,7 +13,7 @@ uniform float u_scale;
 // a sprite has 6 integers:
 // 0 : northwest's x, 1 : width, 2: height, 3: sprite size, 4: offset x, 5: offset y
 // array's length is not dynamic, support maximum count / 6 sprites
-uniform float u_sprite[${maxUniformLength}];
+uniform float u_sprite[maxUniformLength];
 
 varying vec3 v_texCoord;
 
@@ -33,4 +30,4 @@ void main() {
 
   // texture coord
   v_texCoord = vec3(u_sprite[idx], u_sprite[idx + 1], u_sprite[idx + 2]);
-}`;
+}

src/shader/polygon.fragment.js → src/shader/polygon.fragment.glsl

@@ -1,9 +1,7 @@
-export default
-`
 precision mediump float;
 
 varying vec4 v_texcoord;
 varying float v_opacity;
 void main() {
     gl_FragColor = v_texcoord * v_opacity;
-}`;
+}

src/shader/polygon.vertex.js → src/shader/polygon.vertex.glsl

@@ -1,11 +1,9 @@
-import { maxUniformLength } from './common';
-export default
-`attribute vec4 a_pos;
+attribute vec4 a_pos;
 //tex_idx * 100 + opacity * 10
 attribute float a_fill_style;
 
 uniform mat4 u_matrix;
-uniform float u_fill_styles[${maxUniformLength}];
+uniform float u_fill_styles[maxUniformLength];
 
 varying float v_opacity;
 varying vec4 v_texcoord;
@@ -16,4 +14,4 @@ void main() {
   v_texcoord = vec4(u_fill_styles[tex_idx], u_fill_styles[tex_idx + 1], u_fill_styles[tex_idx + 2], u_fill_styles[tex_idx + 3]);
 
   gl_Position = u_matrix * a_pos;
-}`;
+}

src/webgl.js

@@ -0,0 +1,5 @@
+export { default as WebglRenderer } from './Renderer';
+
+export * from './painter';
+
+export { default as Shader } from './shader/Shader';