Merge branch 'dev-shadermodule' into 'master'

为 shader 增加模块化功能

为 shader 增加简单的模块化功能

详细使用方式：
https://yuque.antfin-inc.com/antv/l7/ui9wii

L7 内置模块的注册在 `src/geom/shader/index.js` 中进行。目前只注册了 common（定义一些常量）、point、polygon 三个模块。因此也只有 polygonMaterial 会使用模块生成的 shader 代码，目前没有任何影响。

See merge request !4

src/core/scene.js

@@ -1,11 +1,12 @@
 import Engine from './engine';
-import * as layers from '../layer';
+import { LAYER_MAP } from '../layer';
 import Base from './base';
 import LoadImage from './image';
 import WorkerPool from './worker';
 import { MapProvider } from '../map/provider';
 import GaodeMap from '../map/gaodeMap';
 import Global from '../global';
+import { compileBuiltinModules } from '../geom/shader';
 export default class Scene extends Base {
   getDefaultCfg() {
     return Global.scene;
@@ -13,7 +14,7 @@ export default class Scene extends Base {
   constructor(cfg) {
     super(cfg);
     this._initMap();
-    this._initAttribution();
+    // this._initAttribution(); // 暂时取消，后面作为组件去加载
     this.addImage();
     this._layers = [];
   }
@@ -22,6 +23,7 @@ export default class Scene extends Base {
     this._engine = new Engine(mapContainer, this);
     this._engine.run();
     this.workerPool = new WorkerPool();
+    compileBuiltinModules();
   }
     // 为pickup场景添加 object 对象
   addPickMesh(object) {
@@ -48,14 +50,14 @@ export default class Scene extends Base {
 
   }
   initLayer() {
-    for (const methodName in layers) {
-      this[methodName] = cfg => {
-        cfg ? cfg.mapType = this.mapType : cfg = { mapType: this.mapType };
-        const layer = new layers[methodName](this, cfg);
+    for (const key in LAYER_MAP) {
+      Scene.prototype[key] = cfg => {
+        const layer = new LAYER_MAP[key](this, cfg);
         this._layers.push(layer);
         return layer;
       };
     }
+
   }
   on(type, hander) {
     if (this.map) { this.map.on(type, hander); }

src/geom/material/polygonMaterial.js

@@ -1,6 +1,5 @@
-import polygon_frag from '../shader/polygon_frag.glsl';
-import polygon_vert from '../shader/polygon_vert.glsl';
 import Material from './material';
+import { getModule } from '../../util/shaderModule';
 // export default function PolygonMaterial(options) {
 //   const material = new Material({
 //     uniforms: {
@@ -48,8 +47,10 @@ export default class PolygonMaterial extends Material {
     this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
     this.type = 'PolygonMaterial';
     this.defines = Object.assign(defines, _defines);
-    this.vertexShader = polygon_vert;
-    this.fragmentShader = polygon_frag;
+
+    const { vs, fs } = getModule('polygon');
+    this.vertexShader = vs;
+    this.fragmentShader = fs;
     this.transparent = true;
   }
 }

src/geom/shader/common.glsl

@@ -0,0 +1,2 @@
+#define PI 3.14159265359
+#define TWO_PI 6.28318530718

src/geom/shader/index.js

@@ -1,14 +1,12 @@
 import point_frag from '../shader/point_frag.glsl';
 import point_vert from '../shader/point_vert.glsl';
-const shaderslib = {
-  pointShader: {
-    fragment: point_frag,
-    vertex: point_vert
+import polygon_frag from '../shader/polygon_frag.glsl';
+import polygon_vert from '../shader/polygon_vert.glsl';
+import common from './common.glsl';
+import { registerModule } from '../../util/shaderModule';
+
+export function compileBuiltinModules() {
+  registerModule('point', { vs: point_vert, fs: point_frag });
+  registerModule('common', { vs: common, fs: common });
+  registerModule('polygon', { vs: polygon_vert, fs: polygon_frag });
 }
-};
-// for (const programName in shaderslib) {
-//   const program = shaderslib[programName];
-//   program.fragment = ShaderFactory.parseIncludes(program.fragment);
-//   program.vertex = ShaderFactory.parseIncludes(program.vertex);
-// }
-export default shaderslib;

src/geom/shader/point_frag.glsl

@@ -1,7 +1,8 @@
 
 precision highp float;
-#define PI 3.14159265359
-#define TWO_PI 6.28318530718
+
+#pragma import "common"
+
 uniform float u_strokeWidth;
 uniform vec4 u_stroke;
 uniform float u_opacity;

src/geom/shader/polygon_vert.glsl

@@ -17,6 +17,7 @@ void main() {
    float scale = pow(2.0,(20.0 - u_zoom));
   mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
   vec3 newposition =  position;
+  // newposition.x -= 128.0;
    #ifdef SHAPE 
     newposition =position + a_size * scale* a_shape;
   #endif

src/layer/factory.js

@@ -0,0 +1,11 @@
+export const LAYER_MAP = {};
+export const getLayer = type => {
+  return LAYER_MAP[type.toLowerCase()];
+};
+export const registerLayer = (type, layer) => {
+  if (getLayer(type)) {
+    throw new Error(`Layer type '${type}' existed.`);
+  }
+  // 存储到 map 中
+  LAYER_MAP[type] = layer;
+};

src/layer/index.js

@@ -1,3 +1,17 @@
+import { registerLayer } from './factory';
+import PolygonLayer from './polygonLayer';
+import PointLayer from './pointLayer';
+import LineLayer from './lineLayer';
+import ImageLayer from './imageLayer';
+import RasterLayer from './rasterLayer';
+
+registerLayer('PolygonLayer', PolygonLayer);
+registerLayer('PointLayer', PointLayer);
+registerLayer('LineLayer', LineLayer);
+registerLayer('ImageLayer', ImageLayer);
+registerLayer('RasterLayer', RasterLayer);
+
+export { LAYER_MAP } from './factory';
 export { default as PolygonLayer } from './polygonLayer';
 export { default as PointLayer } from './pointLayer';
 export { default as LineLayer } from './lineLayer';

src/map/gaodeMap.js

@@ -26,6 +26,9 @@ export default class GaodeMap {
   setZoom(zoom) {
     return this.map.setZoom(zoom);
   }
+  setCenter(lnglat) {
+    return this.map.setCenter(lnglat);
+  }
   setBounds(bounds) {
     return this.map.setBounds(bounds);
   }

src/util/shaderModule.js

@@ -0,0 +1,59 @@
+const SHADER_TYPE = {
+  VS: 'vs',
+  FS: 'fs'
+};
+const moduleCache = {};
+const rawContentCache = {};
+const precisionRegExp = /precision\s+(high|low|medium)p\s+float/;
+const globalDefaultprecision = '#ifdef GL_FRAGMENT_PRECISION_HIGH\n precision highp float;\n #else\n precision mediump float;\n#endif\n';
+const includeRegExp = /#pragma include (["^+"]?["\ "[a-zA-Z_0-9](.*)"]*?)/g;
+
+function processModule(rawContent, includeList, type) {
+  return rawContent.replace(includeRegExp, (_, strMatch) => {
+    const includeOpt = strMatch.split(' ');
+    const includeName = includeOpt[0].replace(/"/g, '');
+
+    if (includeList.indexOf(includeName) > -1) {
+      return '';
+    }
+
+    let txt = rawContentCache[includeName][type];
+    includeList.push(includeName);
+
+    txt = processModule(txt, includeList, type);
+    return txt;
+  });
+}
+
+export function registerModule(moduleName, { vs, fs }) {
+  rawContentCache[moduleName] = {
+    [SHADER_TYPE.VS]: vs,
+    [SHADER_TYPE.FS]: fs
+  };
+}
+
+export function getModule(moduleName) {
+  if (moduleCache[moduleName]) {
+    return moduleCache[moduleName];
+  }
+
+  let vs = rawContentCache[moduleName][SHADER_TYPE.VS];
+  let fs = rawContentCache[moduleName][SHADER_TYPE.FS];
+
+  vs = processModule(vs, [], SHADER_TYPE.VS);
+  fs = processModule(fs, [], SHADER_TYPE.FS);
+
+  /**
+   * set default precision for fragment shader
+   * https://stackoverflow.com/questions/28540290/why-it-is-necessary-to-set-precision-for-the-fragment-shader
+   */
+  if (!precisionRegExp.test(fs)) {
+    fs = globalDefaultprecision + fs;
+  }
+
+  moduleCache[moduleName] = {
+    [SHADER_TYPE.VS]: vs.trim(),
+    [SHADER_TYPE.FS]: fs.trim()
+  };
+  return moduleCache[moduleName];
+}

test/unit/shader-module/base-spec.js

@@ -0,0 +1,32 @@
+import { expect } from 'chai';
+import { registerModule, getModule } from '../../../src/util/shaderModule';
+
+describe('test shader module', function() {
+
+  const vs = `
+    #define PI 3.14
+  `;
+
+  const commonModule = {
+    vs,
+    fs: vs
+  };
+
+  const module1 = {
+    vs: `
+      #pragma include "common"
+    `,
+    fs: ''
+  };
+
+  registerModule('common', commonModule);
+  registerModule('module1', module1);
+
+  it('should import a module correctly.', function() {
+    const { vs, fs } = getModule('module1');
+
+    expect(vs).eq('#define PI 3.14');
+    expect(fs).eq('');
+  });
+
+});