merge

.npmignore

@@ -70,8 +70,11 @@ test
 *.un~
 .idea
 bin
+bundler
 demos
 docs
+lib
+src
 temp
 webpack-dev.config.js
 webpack.config.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "build/l7.js",
   "browser": "build/l7.js",

src/core/engine/picking/picking.js

@@ -9,10 +9,7 @@ class Picking {
     this._camera = camera;
     this._raycaster = new THREE.Raycaster();
     this.scene = scene;
-    this._envents = [];
-
-    // TODO: Match this with the line width used in the picking layers
-    this._raycaster.linePrecision = 3;
+    this._raycaster.linePrecision = 10;
     this._pickingScene = PickingScene;
     const size = this._renderer.getSize();
     this._width = size.width;
@@ -21,7 +18,7 @@ class Picking {
       magFilter: THREE.LinearFilter,
       format: THREE.RGBAFormat,
       stencilBuffer: false,
-      depthBuffer: false
+      depthBuffer: true
     };
 
     this._pickingTexture = new THREE.WebGLRenderTarget(this._width, this._height, parameters);
@@ -35,37 +32,14 @@ class Picking {
   _initEvents() {
     this._resizeHandler = this._resizeTexture.bind(this);
     window.addEventListener('resize', this._resizeHandler, false);
-
-    // this._mouseUpHandler = this._onMouseUp.bind(this);
-    // this._world._container.addEventListener('mouseup', this._mouseUpHandler, false);
-    // this._world._container.addEventListener('mousemove', this._mouseUpHandler, false);
-    // this._world._container.addEventListener('mousemove', this._onWorldMove.bind(this), false);
   }
   pickdata(event) {
-    const point = { x: event.offsetX, y: event.offsetY, type: event.type };
+    const point = { x: event.pixel.x, y: event.pixel.y, type: event.type };
     const normalisedPoint = { x: 0, y: 0 };
     normalisedPoint.x = (point.x / this._width) * 2 - 1;
     normalisedPoint.y = -(point.y / this._height) * 2 + 1;
     this._pickAllObject(point, normalisedPoint);
   }
-  _onMouseUp(event) {
-    // Only react to main button click
-    // if (event.button !== 0) {
-    //   return;
-    // }
-    const point = { x: event.clientX, y: event.clientY, type: event.type };
-    const normalisedPoint = { x: 0, y: 0 };
-    normalisedPoint.x = (point.x / this._width) * 2 - 1;
-    normalisedPoint.y = -(point.y / this._height) * 2 + 1;
-    this._pickAllObject(point, normalisedPoint);
-    // this._pick(point, normalisedPoint);
-  }
-  _onWorldMove() {
-
-    this._needUpdate = true;
-  }
-
-  // TODO: Ensure this doesn't get out of sync issue with the renderer resize
   _resizeTexture() {
     const size = this._renderer.getSize();
 
@@ -79,28 +53,11 @@ class Picking {
   _update(point) {
 
     const texture = this._pickingTexture;
-   // if (this._needUpdate) {
     this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
-      // this._needUpdate = false;
-    // }
     this.pixelBuffer = new Uint8Array(4);
     this._renderer.readRenderTargetPixels(texture, point.x, this._height - point.y, 1, 1, this.pixelBuffer);
 
 
-  }
-  // 添加dom事件 支持 mousedown ,mouseenter mouseleave mousemove mouseover mouseout mouse up
-  on(type) {
-
-    this._mouseUpHandler = this._onMouseUp.bind(this);
-    this._world._container.addEventListener(type, this._mouseUpHandler, false);
-    this._envents.push([ type, this._mouseUpHandler ]);
-  }
-  off(type, hander) {
-    this._world._container.removeEventListener(type, this._mouseUpHandler, false);
-    this._envents = this._envents.filter(item => {
-      return item[0] === 'type' && hander === item[1];
-    });
-
   }
   _filterObject(id) {
     this._pickingScene.children.forEach((object, index) => {
@@ -123,9 +80,7 @@ class Picking {
 
   _pick(point, normalisedPoint, layerId) {
     this._update(point);
-    // Interpret the pixel as an ID
     let id = (this.pixelBuffer[2] * 255 * 255) + (this.pixelBuffer[1] * 255) + (this.pixelBuffer[0]);
-    // Skip if ID is 16646655 (white) as the background returns this
     if (id === 16646655 || this.pixelBuffer[3] === 0) {
       id = -999;
       // return;
@@ -133,9 +88,6 @@ class Picking {
 
     this._raycaster.setFromCamera(normalisedPoint, this._camera);
 
-    // Perform ray intersection on picking scene
-    //
-    // TODO: Only perform intersection test on the relevant picking mesh
     const intersects = this._raycaster.intersectObjects(this._pickingScene.children, true);
     const _point2d = { x: point.x, y: point.y };
 
@@ -143,11 +95,6 @@ class Picking {
     if (intersects.length > 0) {
       _point3d = intersects[0].point;
     }
-
-    // Pass along as much data as possible for now until we know more about how
-    // people use the picking API and what the returned data should be
-    //
-    // TODO: Look into the leak potential for passing so much by reference here
     const item = {
       layerId,
       featureId: id - 1,

src/core/scene.js

@@ -6,6 +6,7 @@ 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;
@@ -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) {
@@ -94,11 +96,12 @@ export default class Scene extends Base {
       'mousedown',
       'mouseleave',
       'mouseup',
+      'rightclick',
       'click',
       'dblclick'
     ];
     events.forEach(event => {
-      this._container.addEventListener(event, e => {
+      this.map.on(event, e => {
         // 要素拾取
         this._engine._picking.pickdata(e);
       }, false);

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
-  }
-};
-// for (const programName in shaderslib) {
-//   const program = shaderslib[programName];
-//   program.fragment = ShaderFactory.parseIncludes(program.fragment);
-//   program.vertex = ShaderFactory.parseIncludes(program.vertex);
-// }
-export default shaderslib;
+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 });
+}

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/layer/pointLayer.js

@@ -7,7 +7,6 @@ import TextBuffer from '../geom/buffer/text';
 import TextMaterial from '../geom/material/textMaterial';
 import * as PointBuffer from '../geom/buffer/point/index';
 
-
 /**
  * point shape 2d circle, traingle text,image
  * shape 3d   cube，column, sphere

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];
+}

src/worker/main.worker.js

@@ -17,6 +17,5 @@ self.addEventListener('message', e => {
   }
 });
 self.addEventListener('error', function(e) {
-  /* eslint-disable */
-  console.log('filename:' + e.filename + '\nmessage:' + e.message + '\nline:' + e.lineno);
+  console.error('filename:' + e.filename + '\nmessage:' + e.message + '\nline:' + e.lineno);
 });

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('');
+  });
+
+});