From 49774266456bf4845785247f2a37ad1b66518e2d Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 15 Jul 2019 11:35:07 +0800 Subject: [PATCH] feat(line): greatCircle --- demos/greatcircle.html | 53 ++++++++++++ src/core/layer.js | 6 -- src/core/scene.js | 4 +- src/geom/buffer/line.js | 57 +------------ src/geom/material/lineMaterial.js | 13 +-- src/geom/shader/arcline_vert.glsl | 15 ++-- src/geom/shader/great_circle_line_vert.glsl | 95 +++++++++++++++++++++ src/geom/shader/index.js | 10 +++ src/geom/shader/meshline_vert.glsl | 1 - src/geom/shader/shaderChunks/project.glsl | 35 ++++++++ src/geom/shape/line.js | 8 +- src/layer/render/index.js | 1 + src/layer/render/line/drawArc.js | 9 +- 13 files changed, 226 insertions(+), 81 deletions(-) create mode 100644 demos/greatcircle.html create mode 100644 src/geom/shader/great_circle_line_vert.glsl create mode 100644 src/geom/shader/shaderChunks/project.glsl diff --git a/demos/greatcircle.html b/demos/greatcircle.html new file mode 100644 index 0000000000..b2d1fe28f5 --- /dev/null +++ b/demos/greatcircle.html @@ -0,0 +1,53 @@ + + + + + + 弧线图 + + + +
+ + + + + + + + + diff --git a/src/core/layer.js b/src/core/layer.js index 3fb043fccd..668e9756b2 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -136,12 +136,6 @@ export default class Layer extends Base { cfg.mapType = this.scene.mapType; cfg.zoom = this.scene.getZoom(); this.layerSource = new source(cfg); - // this.scene.workerPool.runTask({ - // command: 'geojson', - // data: cfg - // }).then(data => { - // console.log(data); - // }); return this; } color(field, values) { diff --git a/src/core/scene.js b/src/core/scene.js index c49352f42b..fb5ccf75d9 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -25,8 +25,8 @@ export default class Scene extends Base { _initEngine(mapContainer) { this._engine = new Engine(mapContainer, this); - this.registerMapEvent(); - // this._engine.run(); + // this.registerMapEvent(); + this._engine.run(); // this.workerPool = new WorkerPool(); compileBuiltinModules(); } diff --git a/src/geom/buffer/line.js b/src/geom/buffer/line.js index e5b3ed7932..f552d00d43 100644 --- a/src/geom/buffer/line.js +++ b/src/geom/buffer/line.js @@ -3,11 +3,7 @@ import { lineShape } from '../shape'; export default class LineBuffer extends BufferBase { geometryBuffer() { - const layerData = this.get('layerData'); const shapeType = this.shapeType = this.get('shapeType'); - const positions = []; - const positionsIndex = []; - const instances = []; if (shapeType === 'line') { this.attributes = this._getMeshLineAttributes(); return; @@ -15,22 +11,6 @@ export default class LineBuffer extends BufferBase { this.attributes = this._getArcLineAttributes(); return; } - layerData.forEach((item, index) => { - const props = item; - const attrData = this._getShape(item.coordinates, props, index); - positions.push(...attrData.positions); - positionsIndex.push(...attrData.indexes); - if (attrData.hasOwnProperty('instances')) { - instances.push(...attrData.instances); - } - }); - this.bufferStruct.style = layerData; - this.bufferStruct.verts = positions; - this.bufferStruct.indexs = positionsIndex; - if (instances.length > 0) { - this.bufferStruct.instances = instances; - } - this.attributes = this._toAttributes(this.bufferStruct); } _getShape(geo, props, index) { @@ -55,6 +35,7 @@ export default class LineBuffer extends BufferBase { const indexArray = []; const sizes = []; const instances = []; + const pickingIds = []; layerData.forEach(item => { const props = item; const positionCount = positions.length / 3; @@ -64,8 +45,10 @@ export default class LineBuffer extends BufferBase { indexArray.push(...attrData.indexArray); instances.push(...attrData.instances); sizes.push(...attrData.sizes); + pickingIds.push(...attrData.pickingIds); }); return { + pickingIds, positions, colors, indexArray, @@ -111,38 +94,4 @@ export default class LineBuffer extends BufferBase { attrDashArray }; } - - _toAttributes(bufferStruct) { - const vertCount = bufferStruct.verts.length; - const vertices = new Float32Array(vertCount * 3); - const pickingIds = new Float32Array(vertCount); - const inposs = new Float32Array(vertCount * 4); - const colors = new Float32Array(vertCount * 4); - for (let i = 0; i < vertCount; i++) { - const index = bufferStruct.indexs[i]; - const color = bufferStruct.style[index].color; - const id = bufferStruct.style[index].id; - vertices[i * 3] = bufferStruct.verts[i][0]; - vertices[i * 3 + 1] = bufferStruct.verts[i][1]; - vertices[i * 3 + 2] = bufferStruct.verts[i][2]; - colors[i * 4] = color[0]; - pickingIds[i] = id; - colors[i * 4 + 1] = color[1]; - colors[i * 4 + 2] = color[2]; - colors[i * 4 + 3] = color[3]; - if (bufferStruct.instances) { // 弧线 - inposs[i * 4] = bufferStruct.instances[i][0]; - inposs[i * 4 + 1] = bufferStruct.instances[i][1]; - inposs[i * 4 + 2] = bufferStruct.instances[i][2]; - inposs[i * 4 + 3] = bufferStruct.instances[i][3]; - } - - } - return { - pickingIds, - vertices, - colors, - inposs - }; - } } diff --git a/src/geom/material/lineMaterial.js b/src/geom/material/lineMaterial.js index 68754d0762..8ff74a6a78 100644 --- a/src/geom/material/lineMaterial.js +++ b/src/geom/material/lineMaterial.js @@ -1,8 +1,6 @@ import * as THREE from '../../core/three'; import Material from './material'; import { getModule, wrapUniforms } from '../../util/shaderModule'; -import arcline_frag from '../shader/arcline_frag.glsl'; -import arcline_vert from '../shader/arcline_vert.glsl'; import merge from '@antv/util/lib/deep-mix'; export function LineMaterial(options) { @@ -23,17 +21,22 @@ export function LineMaterial(options) { return material; } export function ArcLineMaterial(options) { + let moduleName = 'arcline'; + if (options.shapeType === 'greatCircle') { + moduleName = 'greatcircle'; + } + const { vs, fs } = getModule(moduleName); const material = new Material({ uniforms: { u_opacity: { value: options.u_opacity || 1.0 }, - segmentNumber: { value: 49 }, + segmentNumber: { value: 29 }, u_time: { value: 0 }, u_zoom: { value: options.u_zoom || 10 }, u_activeId: { value: options.activeId || 0 }, u_activeColor: { value: options.activeColor || [ 1.0, 0, 0, 1.0 ] } }, - vertexShader: arcline_vert, - fragmentShader: arcline_frag, + vertexShader: vs, + fragmentShader: fs, transparent: true, blending: THREE.AdditiveBlending }); diff --git a/src/geom/shader/arcline_vert.glsl b/src/geom/shader/arcline_vert.glsl index 209306ddd4..1b0289ca13 100644 --- a/src/geom/shader/arcline_vert.glsl +++ b/src/geom/shader/arcline_vert.glsl @@ -4,6 +4,8 @@ attribute vec4 a_instance; attribute float a_size; uniform float u_zoom; uniform float u_time; +uniform float u_activeId : 0; +uniform vec4 u_activeColor : [ 1.0, 0, 0, 1.0 ]; uniform mat4 matModelViewProjection; uniform float segmentNumber; varying vec4 v_color; @@ -42,7 +44,6 @@ vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { void main() { - float visindex =mod(u_time *10.,segmentNumber); mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; vec2 source = a_instance.rg; vec2 target = a_instance.ba; @@ -55,13 +56,11 @@ void main() { vec3 next = getPos(source, target, nextSegmentRatio); vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, position.y); gl_Position =matModelViewProjection * vec4(vec3(curr + vec3(offset, 0.0)),1.0); - // float apha = 0.; - // if( position.x> 0. && position.x