diff --git a/.npmignore b/.npmignore index e3b88f8933..fd527239c4 100755 --- a/.npmignore +++ b/.npmignore @@ -70,8 +70,11 @@ test *.un~ .idea bin +bundler demos docs +lib +src temp webpack-dev.config.js webpack.config.js diff --git a/package.json b/package.json index a7004447ea..01f457cb7e 100755 --- a/package.json +++ b/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", diff --git a/src/core/engine/picking/picking.js b/src/core/engine/picking/picking.js index e70912ac16..b4b3f46b87 100755 --- a/src/core/engine/picking/picking.js +++ b/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, diff --git a/src/core/scene.js b/src/core/scene.js index d9229a2512..b85ba35a5a 100644 --- a/src/core/scene.js +++ b/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); diff --git a/src/geom/material/polygonMaterial.js b/src/geom/material/polygonMaterial.js index d47eb72065..da8a598122 100644 --- a/src/geom/material/polygonMaterial.js +++ b/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; } } diff --git a/src/geom/shader/common.glsl b/src/geom/shader/common.glsl new file mode 100644 index 0000000000..09462af13e --- /dev/null +++ b/src/geom/shader/common.glsl @@ -0,0 +1,2 @@ +#define PI 3.14159265359 +#define TWO_PI 6.28318530718 \ No newline at end of file diff --git a/src/geom/shader/index.js b/src/geom/shader/index.js index 525a698d2d..fffbfda42a 100644 --- a/src/geom/shader/index.js +++ b/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 }); +} diff --git a/src/geom/shader/point_frag.glsl b/src/geom/shader/point_frag.glsl index 238c972638..eecea0605c 100644 --- a/src/geom/shader/point_frag.glsl +++ b/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; diff --git a/src/geom/shader/project_vert.glsl b/src/geom/shader/project_vert.glsl new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/layer/pointLayer.js b/src/layer/pointLayer.js index 02acff004f..7acbdfbf53 100644 --- a/src/layer/pointLayer.js +++ b/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 diff --git a/src/util/shaderModule.js b/src/util/shaderModule.js new file mode 100644 index 0000000000..b0a354194f --- /dev/null +++ b/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]; +} diff --git a/src/worker/main.worker.js b/src/worker/main.worker.js index 97321b3ed1..bdefe02116 100644 --- a/src/worker/main.worker.js +++ b/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); }); diff --git a/test/unit/shader-module/base-spec.js b/test/unit/shader-module/base-spec.js new file mode 100644 index 0000000000..8f2b35c079 --- /dev/null +++ b/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(''); + }); + +});