diff --git a/demos/01_circle.html b/demos/01_circle.html new file mode 100644 index 0000000000..c427571ff5 --- /dev/null +++ b/demos/01_circle.html @@ -0,0 +1,51 @@ + + + + + + 气泡图 + + + +
+ + + + + + + + diff --git a/demos/03_choropleths_polygon.html b/demos/03_choropleths_polygon.html index a9c6ba4da4..e141d1476c 100644 --- a/demos/03_choropleths_polygon.html +++ b/demos/03_choropleths_polygon.html @@ -96,7 +96,10 @@ scene.on('loaded', () => { }) //.render(); - console.log(citylayer); + + citylayer.on('mouseleave',(e)=>{ + console.log(e); + }) citylayer.on('click',(e)=>{ $("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'}); $("#info").html(`

${e.feature.properties.area || e.feature.properties.name }${e.feature.properties.pm2_5_24h || 0}

`); diff --git a/demos/08_arc_line.html b/demos/08_arc_line.html index 553b9a0d69..ff6eb262c0 100644 --- a/demos/08_arc_line.html +++ b/demos/08_arc_line.html @@ -31,47 +31,26 @@ const scene = new L7.Scene({ }); scene.on('loaded', () => { $.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', data => { - const rows = data.split('\n'); - var features =[]; - for(var i =1;i diff --git a/demos/json.html b/demos/json.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/meshline.html b/demos/meshline.html deleted file mode 100644 index 612c43868b..0000000000 --- a/demos/meshline.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - line demo - - - - -
- - - - - - - diff --git a/demos/polygon_jsondata.html b/demos/polygon_jsondata.html index cca750f0ca..036e5eb549 100644 --- a/demos/polygon_jsondata.html +++ b/demos/polygon_jsondata.html @@ -19,7 +19,7 @@ - + + + + + + + + diff --git a/src/core/controller/pick.js b/src/core/controller/pick.js index a27b79cde4..11d391978e 100644 --- a/src/core/controller/pick.js +++ b/src/core/controller/pick.js @@ -38,7 +38,8 @@ export default class PickContoller { } addPickMesh(mesh) { const pickmaterial = mesh.material.clone(); - pickmaterial.fragmentShader = pickingFragmentShader; + pickmaterial.defines.PICK = true; + // pickmaterial.fragmentShader = pickingFragmentShader; const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial); pickingMesh.name = mesh.name; pickingMesh.onBeforeRender = () => { diff --git a/src/core/engine/picking/pickingMaterial.js b/src/core/engine/picking/pickingMaterial.js index 49ded2d043..04dcd45d8d 100755 --- a/src/core/engine/picking/pickingMaterial.js +++ b/src/core/engine/picking/pickingMaterial.js @@ -7,6 +7,9 @@ export default function PickingMaterial(options) { uniforms: { u_zoom: { value: options.u_zoom || 1 } }, + defines: { + PICK: true + }, vertexShader: options.vs, fragmentShader: picking_frag, transparent: false diff --git a/src/core/layer.js b/src/core/layer.js index caa037f925..f5f5354b9b 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -39,7 +39,7 @@ export default class Layer extends Base { attrs: {}, // 样式配置项 styleOptions: { - stroke: 'none', + stroke: [ 1, 1, 1, 1 ], strokeWidth: 1.0, opacity: 1.0, strokeOpacity: 1.0, diff --git a/src/geom/buffer/buffer.js b/src/geom/buffer/buffer.js index 4639a946ab..95b08d231a 100644 --- a/src/geom/buffer/buffer.js +++ b/src/geom/buffer/buffer.js @@ -74,7 +74,14 @@ export default class BufferBase extends Base { this.attributes.pickingIds[start1 + i] = id; } if (feature.hasOwnProperty('size')) { - this.attributes.sizes[start1 + i ] = size[0] || size; + let size2 = size; + if (Array.isArray(size) && size.length === 2) { + size2 = [ size[0] ]; + } + if (!Array.isArray(size)) { + size2 = [ size ]; + } + this.attributes.sizes.set(size2, (start1 + i) * size2.length); } if (feature.hasOwnProperty('pattern')) { diff --git a/src/geom/buffer/bufferBase.js b/src/geom/buffer/bufferBase.js deleted file mode 100644 index 19837012b4..0000000000 --- a/src/geom/buffer/bufferBase.js +++ /dev/null @@ -1,377 +0,0 @@ -import Base from '../../core/base'; -// import * as from '../../core/three'; -import { Vector3 } from 'three/src/math/Vector3'; -import { Texture } from 'three/src/textures/Texture'; -import { faceNormals } from '../normals'; -import extrude from '../extrude'; - -export default class BufferBase extends Base { - constructor(cfg) { - super(cfg); - this.bufferStruct = { - }; - - this.geometryBuffer(); - } - geometryBuffer() { - } - _normals() { - const { position, indices, normals = [] } = this.bufferStruct; - - indices.forEach((index, i) => { - normals.push(faceNormals(index, position[i])); - }); - this.bufferStruct.normals = normals; - } - _extrude(coordinate, heightValue) { - const extrudeData = extrude(coordinate, heightValue); - return extrudeData; - } - _mergeAttributes(attributes) { - const lengths = {}; - - // Find array lengths - attributes.forEach(_attributes => { - for (const k in _attributes) { - if (!lengths[k]) { - lengths[k] = 0; - } - - lengths[k] += _attributes[k].length; - } - }); - - const mergedAttributes = {}; - - // Set up arrays to merge into - for (const k in lengths) { - mergedAttributes[k] = new Float32Array(lengths[k]); - } - - const lastLengths = {}; - - attributes.forEach(_attributes => { - for (const k in _attributes) { - if (!lastLengths[k]) { - lastLengths[k] = 0; - } - - mergedAttributes[k].set(_attributes[k], lastLengths[k]); - - lastLengths[k] += _attributes[k].length; - } - }); - - return mergedAttributes; - } - _toPolygonAttributes(polygon) { - - // Three components per vertex per face (3 x 3 = 9) - const { style, indices, position, indexCount } = polygon; - const vertices = new Float32Array(indexCount * 3); - const colors = new Float32Array(indexCount * 4); - const pickingIds = new Float32Array(indexCount); - let lastIndex = 0; - indices.forEach((indice, pIndex) => { - for (let i = 0; i < indice.length / 3; i++) { - let index = indice[i * 3]; - const color = style[pIndex].color; - const _pickingId = style[pIndex].id; - const ax = position[pIndex][index][0]; - const ay = position[pIndex][index][1]; - const az = position[pIndex][index][2]; - index = indice[i * 3 + 1]; - const bx = position[pIndex][index][0]; - const by = position[pIndex][index][1]; - const bz = position[pIndex][index][2]; - index = indice[i * 3 + 2]; - const cx = position[pIndex][index][0]; - const cy = position[pIndex][index][1]; - const cz = position[pIndex][index][2]; - vertices.set([ ax, ay, az, bx, by, bz, cx, cy, cz ], lastIndex * 9); - colors.set([ color[0], color[1], color[2], color[3], color[0], color[1], color[2], color[3], color[0], color[1], color[2], color[3] ], lastIndex * 12); - pickingIds.fill(_pickingId, lastIndex * 3 + 0, lastIndex * 3 + 3); - // vertices[lastIndex * 9 + 0] = ax; - // vertices[lastIndex * 9 + 1] = ay; - // vertices[lastIndex * 9 + 2] = az; - - // colors[lastIndex * 12 + 0] = color[0]; - // colors[lastIndex * 12 + 1] = color[1]; - // colors[lastIndex * 12 + 2] = color[2]; - // colors[lastIndex * 12 + 3] = color[3]; - - - // vertices[lastIndex * 9 + 3] = bx; - // vertices[lastIndex * 9 + 4] = by; - // vertices[lastIndex * 9 + 5] = bz; - - // colors[lastIndex * 12 + 4] = color[0]; - // colors[lastIndex * 12 + 5] = color[1]; - // colors[lastIndex * 12 + 6] = color[2]; - // colors[lastIndex * 12 + 7] = color[3]; - - // vertices[lastIndex * 9 + 6] = cx; - // vertices[lastIndex * 9 + 7] = cy; - // vertices[lastIndex * 9 + 8] = cz; - - // colors[lastIndex * 12 + 8] = color[0]; - // colors[lastIndex * 12 + 9] = color[1]; - // colors[lastIndex * 12 + 10] = color[2]; - // colors[lastIndex * 12 + 11] = color[3]; - - // pickingIds[lastIndex * 3 + 0] = _pickingId; - // pickingIds[lastIndex * 3 + 1] = _pickingId; - // pickingIds[lastIndex * 3 + 2] = _pickingId; - - lastIndex++; - - } - }); - console.timeEnd(indexCount+':buffer'); - const attributes = { - vertices, - colors, - pickingIds, - faceUv: new Float32Array(polygon.faceUv), - sizes: new Float32Array(polygon.sizes) - - }; - polygon = {}; - return attributes; - } - _toPointShapeAttributes(polygon) { - // Three components per vertex per face (3 x 3 = 9) - const { style, indices, position, indexCount, shapes, sizes } = polygon; - const vertices = new Float32Array(indexCount * 3); - const shapePositions = new Float32Array(indexCount * 3); - const a_size = new Float32Array(indexCount * 3); - const normals = new Float32Array(indexCount * 3); - const colors = new Float32Array(indexCount * 4); - const pickingIds = new Float32Array(indexCount); - const pA = new Vector3(); - const pB = new Vector3(); - const pC = new Vector3(); - - const cb = new Vector3(); - const ab = new Vector3(); - let lastIndex = 0; - indices.forEach((indice, pIndex) => { - for (let i = 0; i < indice.length / 3; i++) { - let index = indice[i * 3]; - const color = style[pIndex].color; - const coor1 = position[pIndex]; - const size = sizes[pIndex]; - const _pickingId = style[pIndex].id; - const ax = shapes[pIndex][index][0]; - const ay = shapes[pIndex][index][1]; - const az = shapes[pIndex][index][2]; - index = indice[i * 3 + 1]; - const bx = shapes[pIndex][index][0]; - const by = shapes[pIndex][index][1]; - const bz = shapes[pIndex][index][2]; - index = indice[i * 3 + 2]; - const cx = shapes[pIndex][index][0]; - const cy = shapes[pIndex][index][1]; - const cz = shapes[pIndex][index][2]; - - pA.set(ax, ay, az); - pB.set(bx, by, bz); - pC.set(cx, cy, cz); - - cb.subVectors(pC, pB); - ab.subVectors(pA, pB); - cb.cross(ab); - - cb.normalize(); - - const nx = cb.x; - const ny = cb.y; - const nz = cb.z; - - vertices[lastIndex * 9 + 0] = coor1[0]; - vertices[lastIndex * 9 + 1] = coor1[1]; - vertices[lastIndex * 9 + 2] = coor1[2]; - - shapePositions[lastIndex * 9 + 0] = ax; - shapePositions[lastIndex * 9 + 1] = ay; - shapePositions[lastIndex * 9 + 2] = az; - - a_size[lastIndex * 9 + 0] = size[0]; - a_size[lastIndex * 9 + 1] = size[1]; - a_size[lastIndex * 9 + 2] = size[2]; - - normals[lastIndex * 9 + 0] = nx; - normals[lastIndex * 9 + 1] = ny; - normals[lastIndex * 9 + 2] = nz; - - colors[lastIndex * 12 + 0] = color[0]; - colors[lastIndex * 12 + 1] = color[1]; - colors[lastIndex * 12 + 2] = color[2]; - colors[lastIndex * 12 + 3] = color[3]; - - - vertices[lastIndex * 9 + 3] = coor1[0]; - vertices[lastIndex * 9 + 4] = coor1[1]; - vertices[lastIndex * 9 + 5] = coor1[2]; - - shapePositions[lastIndex * 9 + 3] = bx; - shapePositions[lastIndex * 9 + 4] = by; - shapePositions[lastIndex * 9 + 5] = bz; - - a_size[lastIndex * 9 + 3] = size[0]; - a_size[lastIndex * 9 + 4] = size[1]; - a_size[lastIndex * 9 + 5] = size[2]; - - normals[lastIndex * 9 + 3] = nx; - normals[lastIndex * 9 + 4] = ny; - normals[lastIndex * 9 + 5] = nz; - - colors[lastIndex * 12 + 4] = color[0]; - colors[lastIndex * 12 + 5] = color[1]; - colors[lastIndex * 12 + 6] = color[2]; - colors[lastIndex * 12 + 7] = color[3]; - - vertices[lastIndex * 9 + 6] = coor1[0]; - vertices[lastIndex * 9 + 7] = coor1[1]; - vertices[lastIndex * 9 + 8] = coor1[2]; - - - a_size[lastIndex * 9 + 6] = size[0]; - a_size[lastIndex * 9 + 7] = size[1]; - a_size[lastIndex * 9 + 8] = size[2]; - - shapePositions[lastIndex * 9 + 6] = cx; - shapePositions[lastIndex * 9 + 7] = cy; - shapePositions[lastIndex * 9 + 8] = cz; - - normals[lastIndex * 9 + 6] = nx; - normals[lastIndex * 9 + 7] = ny; - normals[lastIndex * 9 + 8] = nz; - - colors[lastIndex * 12 + 8] = color[0]; - colors[lastIndex * 12 + 9] = color[1]; - colors[lastIndex * 12 + 10] = color[2]; - colors[lastIndex * 12 + 11] = color[3]; - - pickingIds[lastIndex * 3 + 0] = _pickingId; - pickingIds[lastIndex * 3 + 1] = _pickingId; - pickingIds[lastIndex * 3 + 2] = _pickingId; - - lastIndex++; - } - }); - - const attributes = { - vertices, - normals, - colors, - pickingIds, - shapePositions, - a_size, - faceUv: new Float32Array(polygon.faceUv) - - }; - - return attributes; - } - _toPolygonLineAttributes(polygonline) { - const { style, indices, position, indexCount } = polygonline; - const vertices = new Float32Array(indexCount * 3); - const colors = new Float32Array(indexCount * 4); - const pickingIds = new Float32Array(indexCount); - let lastIndex = 0; - indices.forEach((indice, pIndex) => { - for (let i = 0; i < indice.length; i++) { - const index = indice[i]; - const color = style[pIndex].color; - const _pickingId = style[pIndex].id; - vertices[lastIndex * 3] = position[pIndex][index][0]; - vertices[lastIndex * 3 + 1] = position[pIndex][index][1]; - vertices[lastIndex * 3 + 2] = position[pIndex][index][2]; - colors[lastIndex * 4] = color[0]; - colors[lastIndex * 4 + 1] = color[1]; - colors[lastIndex * 4 + 2] = color[2]; - colors[lastIndex * 4 + 3] = color[3]; - pickingIds[lastIndex] = _pickingId; - lastIndex++; - } - }); - const attributes = { - vertices, - colors, - pickingIds - }; - polygonline = {}; - return attributes; - } - - _toPointsAttributes(point) { - const { style, position } = point; - const count = position.length; - const vertices = new Float32Array(count * 3); - const colors = new Float32Array(count * 4); - const sizes = new Float32Array(count); - const shapes = new Float32Array(count); - const pickingIds = new Float32Array(count); - position.forEach((pos, index) => { - vertices[index * 3] = pos[0]; - vertices[index * 3 + 1] = pos[1]; - vertices[index * 3 + 2] = pos[2]; - colors[index * 4] = style[index].color[0]; - colors[index * 4 + 1] = style[index].color[1]; - colors[index * 4 + 2] = style[index].color[2]; - colors[index * 4 + 3] = style[index].color[3]; - pickingIds[index] = style[index].id; - sizes[index] = style[index].size * window.devicePixelRatio; - if (style[index].shape) { shapes[index] = style[index].shape; } - }); - const attributes = { - vertices, - colors, - sizes, - shapes, - pickingIds - - }; - point = {}; - return attributes; - } - _generateTexture() { - // build a small canvas 32x64 and paint it in white - const canvas = document.createElement('canvas'); - canvas.width = 32; - canvas.height = 64; - const context = canvas.getContext('2d'); - // plain it in white - context.fillStyle = '#ffffff'; - context.fillRect(0, 0, 32, 64); - // draw the window rows - with a small noise to simulate light variations in each room - for (let y = 8; y < 64; y += 8) { - for (let x = 0; x < 32; x += 2) { - const value = Math.floor(Math.random() * 64); - context.fillStyle = 'rgb(' + [ value, value, value ].join(',') + ')'; - context.fillRect(x, y, 2, 4); - } - } - context.fillStyle = '#105CB3'; - context.fillRect(0, 60, 32, 64); - // build a bigger canvas and copy the small one in it - // This is a trick to upscale the texture without filtering - const canvas2 = document.createElement('canvas'); - canvas2.width = 512; - canvas2.height = 1024; - const context2 = canvas2.getContext('2d'); - // disable smoothing - context2.imageSmoothingEnabled = false; - context2.webkitImageSmoothingEnabled = false; - context2.mozImageSmoothingEnabled = false; - // then draw the image - context2.drawImage(canvas, 0, 0, canvas2.width, canvas2.height); - // return the just built canvas2 - const texture = new Texture(canvas2); - // texture.anisotropy = renderer.getMaxAnisotropy(); - texture.needsUpdate = true; - - return texture; - } -} diff --git a/src/geom/buffer/heatmap/heatmap.js b/src/geom/buffer/heatmap/heatmap.js index dac3f1aca0..e59c43c8b4 100644 --- a/src/geom/buffer/heatmap/heatmap.js +++ b/src/geom/buffer/heatmap/heatmap.js @@ -1,10 +1,14 @@ -import BufferBase from '../bufferBase'; +// import BufferBase from '../bufferBase'; import { colorScales } from '../../../attr/colorscales'; import * as THREE from '../../../core/three'; +import Base from '../../../core/base'; - -export default class HeatmapBuffer extends BufferBase { - geometryBuffer() { +export default class HeatmapBuffer extends Base { + constructor(cfg) { + super(cfg); + this.init(); + } + init() { const data = this.get('data'); const positions = []; const dirs = []; diff --git a/src/geom/buffer/heatmap/hexagon.js b/src/geom/buffer/heatmap/hexagon.js deleted file mode 100644 index 2c30133ec1..0000000000 --- a/src/geom/buffer/heatmap/hexagon.js +++ /dev/null @@ -1,61 +0,0 @@ -import BufferBase from '../buffer'; -import Global from '../../../global'; -import { fillPolygon, extrude_Polygon } from '../../extrude'; -import { polygonPath } from '../../shape/path'; - -export default class Shape_3D extends BufferBase { - _buildFeatures() { - const layerData = this.get('layerData'); - this._offset = 0; - - layerData.forEach(feature => { - this._calculateFill(feature); - }); - } - _initAttributes() { - super._initAttributes(); - this.attributes.miters = new Float32Array(this.verticesCount * 3); - this.attributes.normals = new Float32Array(this.verticesCount * 3); - } - _calculateFeatures() { - this._calcultateGeometry(); - const layerData = this.get('layerData'); - const { positions, indexArray } = this.instanceGeometry; - const numFeature = layerData.length; - this.verticesCount = positions.length * numFeature / 3; - this.indexCount = indexArray.length * numFeature; - } - _calcultateGeometry() { - const shape = this.get('shapeType'); - const hexgonFill = this.getShapeFunction(shape)([ this._getPoints(6) ]); - this.instanceGeometry = hexgonFill; - } - _calculateFill(feature) { - - feature.bufferInfo = { verticesOffset: this._offset }; - const { coordinates } = feature; - const numPoint = this.instanceGeometry.positions.length / 3; - this._encodeArray(feature, numPoint); - this.attributes.miters.set(this.instanceGeometry.positions, this._offset * 3); - const indexArray = this.instanceGeometry.indexArray.map(v => { return v + this._offset; }); - this.indexArray.set(indexArray, this._offset); - if (this.instanceGeometry.normals) { - this.attributes.normals.set(this.instanceGeometry.normals, this._offset * 3); - } - const position = []; - for (let i = 0; i < numPoint; i++) { - position.push(...coordinates); - } - this.attributes.positions.set(position, this._offset * 3); - this._offset += numPoint; - } - _getPoints(num) { - return polygonPath(num, 1); - } - getShapeFunction(shape) { - const { pointShape } = Global; - if (pointShape['3d'].indexOf(shape) !== -1) return extrude_Polygon; - return fillPolygon; - - } -} diff --git a/src/geom/buffer/image.js b/src/geom/buffer/image.js index 5c69a4abf5..e9121c68cb 100644 --- a/src/geom/buffer/image.js +++ b/src/geom/buffer/image.js @@ -1,9 +1,13 @@ -import BufferBase from './bufferBase'; +// import BufferBase from './bufferBase'; import Util from '../../util'; import * as THREE from '../../core/three'; - -export default class ImageBuffer extends BufferBase { - geometryBuffer() { +import Base from '../../core/base'; +export default class ImageBuffer extends Base { + constructor(cfg) { + super(cfg); + this.init(); + } + init() { const layerData = this.get('layerData'); const coordinates = layerData[0].coordinates; const images = layerData[0].images; diff --git a/src/geom/buffer/index.js b/src/geom/buffer/index.js index fc4e009e51..fab4308559 100644 --- a/src/geom/buffer/index.js +++ b/src/geom/buffer/index.js @@ -4,6 +4,8 @@ import FillBuffer from './polygon/fill_buffer'; import LineBuffer from './polygon/line_buffer'; import ExtrudeBuffer from './polygon/extrude_buffer'; +// Point +import PointFillBuffer from './point/fill_buffer2'; // Line import MeshLineBuffer from './line/meshline'; @@ -15,10 +17,14 @@ import Grid3D from './heatmap/grid_3d'; import Hexagon3D from './heatmap/hexagon_3d'; // 3D Shape -import Shape_3D from './heatmap/hexagon'; +import Shape_3D from './point/extrude_buffer'; import { registerBuffer, getBuffer } from './factory'; +// Point +registerBuffer('point', 'fill', PointFillBuffer); + +// polygon registerBuffer('polygon', 'fill', FillBuffer); registerBuffer('polygon', 'extrude', ExtrudeBuffer); registerBuffer('polygon', 'line', LineBuffer); @@ -33,7 +39,7 @@ registerBuffer('line', 'greatCircle', ArcLineBuffer); // registerBuffer('heatmap', 'square', Grid3D); // registerBuffer('heatmap', 'squareColumn', Grid3D); registerBuffer('heatmap', 'shape', Hexagon3D); - +registerBuffer('point', 'shape', Hexagon3D); // 3D Shape registerBuffer('shape', 'extrude', Shape_3D); diff --git a/src/geom/buffer/line/meshline.js b/src/geom/buffer/line/meshline.js index 53b0420674..196e381e2c 100644 --- a/src/geom/buffer/line/meshline.js +++ b/src/geom/buffer/line/meshline.js @@ -19,11 +19,13 @@ export default class MeshLineBuffer extends BufferBase { } _calculateFeatures() { const layerData = this.get('layerData'); - // 计算长 layerData.forEach(feature => { const bufferInfo = {}; - const { coordinates } = feature; + let { coordinates } = feature; + if (Array.isArray(coordinates[0][0])) { + coordinates = coordinates[0]; + } const { normals, attrIndex, attrPos, attrDistance, miters } = getNormals(coordinates, false, this.verticesCount); bufferInfo.normals = normals; bufferInfo.arrayIndex = attrIndex; diff --git a/src/geom/buffer/point.js b/src/geom/buffer/point.js deleted file mode 100644 index 36b0aac3f1..0000000000 --- a/src/geom/buffer/point.js +++ /dev/null @@ -1,127 +0,0 @@ -import BufferBase from './bufferBase'; -import { regularShape } from '../shape/index'; -import * as polygonPath from '../shape/path'; -import * as polygonShape from '../shape/polygon'; -import * as lineShape from '../shape/line'; -import Global from '../../global'; -import Util from '../../util'; -const { pointShape } = Global; -export default class PointBuffer extends BufferBase { - geometryBuffer() { - const type = this.get('type'); - switch (type) { - case 'image' : this._imageBuffer(); - break; - case '2d': this._3dRegularBuffer(); - break; - case '3d': this._3dRegularBuffer(); - break; - case 'Model':this._ModelBuffer(); - break; - default: - this._sdfRegularBuffer(); - - } - } - _imageBuffer() { - const coordinates = this.get('coordinates'); - const properties = this.get('properties'); - const imagePos = this.get('imagePos'); - const uv = new Float32Array(properties.length * 2); - for (let i = 0; i < properties.length; i++) { - const { x, y } = imagePos[properties[i].shape]; - uv[i * 2] = x; - uv[i * 2 + 1] = y; - - } - this.bufferStruct.position = coordinates; - this.bufferStruct.uv = uv; - this.bufferStruct.style = properties; - this.attributes = this._toPointsAttributes(this.bufferStruct); - this.attributes.uvs = uv; - } - _sdfRegularBuffer() { - const coordinates = this.get('coordinates'); - const properties = this.get('properties'); - this.bufferStruct.position = coordinates; - this.bufferStruct.style = properties; - this.attributes = this._toPointsAttributes(this.bufferStruct); - } - _3dRegularBuffer() { - const lineAttribute = { - shapes: [], - normal: [], - miter: [], - indexArray: [], - sizes: [], - positions: [] - }; - const coordinates = this.get('coordinates'); - const properties = this.get('properties'); - const style = this.get('style'); - const type = this.get('type'); - const positions = []; - const shapes = []; - const sizes = []; - const uvs = []; - const positionsIndex = []; - let indexCount = 0; - this.bufferStruct.style = properties; - coordinates.forEach((geo, index) => { - let { size, shape } = properties[index]; - // let shapeType = ''; - - if (type === '2d' || (type === '3d' && size[2] === 0)) { - // let shapeType = 'fill'; - Util.isArray(size) || (size = [ size, size, 0 ]); - } else { - Util.isArray(size) || (size = [ size, size, size ]); - } - if (regularShape[shape] == null) { - uvs.push(0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0); - shape = 'square'; - } - properties[index].size = size; - - const [ vert, polygonLine ] = this._getShape(properties[index], style, lineAttribute.miter.length); - polygonLine.miter.forEach(() => { - lineAttribute.positions.push(...geo); - lineAttribute.sizes.push(...size); - }); - - lineAttribute.shapes.push(...polygonLine.positions); - lineAttribute.normal.push(...polygonLine.normal); - lineAttribute.miter.push(...polygonLine.miter); - lineAttribute.indexArray.push(...polygonLine.indexArray); - - shapes.push(vert.positions); - positions.push(geo); - sizes.push(size); - positionsIndex.push(vert.positionsIndex); - indexCount += vert.positionsIndex.length; - }); - this.bufferStruct.indices = positionsIndex; - this.bufferStruct.position = positions; - this.bufferStruct.indexCount = indexCount; - this.bufferStruct.shapes = shapes; - this.bufferStruct.sizes = sizes; - this.bufferStruct.faceUv = uvs; - this.attributes = this._toPointShapeAttributes(this.bufferStruct); - this.lineAttribute = lineAttribute; - } - _getShape(props, style, positionsIndex) { - const { shape } = props; - const { stroke, strokeWidth } = style; - const path = polygonPath[shape](); - let polygon = null; - let polygonLine = null; - if (pointShape['3d'].indexOf(shape) === -1) { - polygon = polygonShape.fill([ path ]); - polygonLine = lineShape.Line(path, { size: [ strokeWidth, 0 ], color: stroke }, positionsIndex); - } else { - polygon = polygonShape.extrude([ path ]); - } - return [ polygon, polygonLine ]; - } - -} diff --git a/src/geom/buffer/point/extrude_buffer.js b/src/geom/buffer/point/extrude_buffer.js new file mode 100644 index 0000000000..86e5a923bf --- /dev/null +++ b/src/geom/buffer/point/extrude_buffer.js @@ -0,0 +1,82 @@ +/** + * bufferGeometry的顶点组装方式 + */ +import BufferBase from '../buffer'; +import Global from '../../../global'; +import { fillPolygon, extrude_Polygon } from '../../extrude'; +import { polygonPath } from '../../shape/path'; +import * as shapePath from '../../shape/path'; +export default class ExtrudeBuffer extends BufferBase { + + _buildFeatures() { + const layerData = this.get('layerData'); + this._offset = 0; + this._indexOffset = 0; + + layerData.forEach(feature => { + this._calculateFill(feature); + }); + } + _initAttributes() { + super._initAttributes(); + this.attributes.miters = new Float32Array(this.verticesCount * 3); + this.attributes.normals = new Float32Array(this.verticesCount * 3); + this.attributes.sizes = new Float32Array(this.verticesCount * 3); + } + _calculateFeatures() { + const layerData = this.get('layerData'); + this.geometryMap = {}; + layerData.forEach(feature => { + const { shape } = feature; + const { positions, indexArray } = this.getShape(shape); + this.verticesCount += positions.length / 3; + this.indexCount += indexArray.length; + }); + } + _calcultateGeometry() { + const shape = this.get('shapeType'); + const hexgonFill = this.getShapeFunction(shape)([ this._getPoints(6) ]); + this.instanceGeometry = hexgonFill; + } + _calculateFill(feature) { + + feature.bufferInfo = { verticesOffset: this._offset }; + const { coordinates, shape } = feature; + const instanceGeometry = this.getShape(shape); + const numPoint = instanceGeometry.positions.length / 3; + this._encodeArray(feature, numPoint); + this.attributes.miters.set(instanceGeometry.positions, this._offset * 3); + const indexArray = instanceGeometry.indexArray.map(v => { return v + this._offset; }); + this.indexArray.set(indexArray, this._indexOffset); + if (instanceGeometry.normals) { + this.attributes.normals.set(instanceGeometry.normals, this._offset * 3); + } + const position = []; + for (let i = 0; i < numPoint; i++) { + position.push(...coordinates); + } + this.attributes.positions.set(position, this._offset * 3); + this._offset += numPoint; + this._indexOffset += indexArray.length; + } + _getPoints(num) { + return polygonPath(num, 1); + } + getShape(shape) { + const { pointShape } = Global; + + if (this.geometryMap[shape]) { + return this.geometryMap[shape]; + } + let geometry = null; + if (pointShape['3d'].indexOf(shape) !== -1) { + geometry = extrude_Polygon([ shapePath[shape]() ]); + } else if (pointShape['2d'].indexOf(shape) !== -1) { + geometry = fillPolygon([ shapePath[shape]() ]); + } else { + geometry = fillPolygon([ shapePath[shape]() ]); + } + this.geometryMap[shape] = geometry; + return geometry; + } +} diff --git a/src/geom/buffer/point/circleBuffer.js b/src/geom/buffer/point/fill_buffer.js similarity index 77% rename from src/geom/buffer/point/circleBuffer.js rename to src/geom/buffer/point/fill_buffer.js index 1a477b2dee..5b3591e2af 100644 --- a/src/geom/buffer/point/circleBuffer.js +++ b/src/geom/buffer/point/fill_buffer.js @@ -11,15 +11,17 @@ const LEFT_SHIFT21 = 2097152.0; const LEFT_SHIFT23 = 8388608.0; // const LEFT_SHIFT24 = 16777216.0; -export default function circleBuffer(layerData) { +export default function FillBuffer(data) { const index = []; const aPosition = []; const aPackedData = []; - + const { layerData } = data; layerData.forEach(({ size = 0, color, id, coordinates, shape }, i) => { - const shapeIndex = pointShape['2d'].indexOf(shape) || 0; - + let newCoord = coordinates; + if (coordinates.length === 1) { + newCoord = coordinates[0][0]; + } if (isNaN(size)) { size = 0; } @@ -46,14 +48,15 @@ export default function circleBuffer(layerData) { id ); }); - // TODO：如果使用相对瓦片坐标，还可以进一步压缩 - aPosition.push(...coordinates, ...coordinates, ...coordinates, ...coordinates); + aPosition.push(...newCoord, ...newCoord, ...newCoord, ...newCoord); index.push(...[ 0, 1, 2, 0, 2, 3 ].map(n => n + i * 4)); }); return { - aPosition, - index, - aPackedData + attributes: { + aPosition: new Float32Array(aPosition), + aPackedData: new Float32Array(aPackedData) + }, + indexArray: new Int32Array(index) }; } diff --git a/src/geom/buffer/point/fill_buffer2.js b/src/geom/buffer/point/fill_buffer2.js new file mode 100644 index 0000000000..119eed6682 --- /dev/null +++ b/src/geom/buffer/point/fill_buffer2.js @@ -0,0 +1,79 @@ +import BufferBase from '../buffer'; +import Global from '../../../global'; +import { fillPolygon, extrude_Polygon } from '../../extrude'; +import { polygonPath } from '../../shape/path'; +import * as shapePath from '../../shape/path'; +const { pointShape } = Global; +export default class PointFillBuffer extends BufferBase { + + _buildFeatures() { + const layerData = this.get('layerData'); + this._offset = 0; + this._indexOffset = 0; + + layerData.forEach(feature => { + this._calculateFill(feature); + }); + } + _initAttributes() { + super._initAttributes(); + this.attributes.miters = new Float32Array(this.verticesCount * 2); + this.attributes.sizes = new Float32Array(this.verticesCount); + this.attributes.shapes = new Float32Array(this.verticesCount); + } + _calculateFeatures() { + const layerData = this.get('layerData'); + this.verticesCount = layerData.length * 4; + this.indexCount = layerData.length * 6; + } + _calcultateGeometry() { + const shape = this.get('shapeType'); + const hexgonFill = this.getShapeFunction(shape)([ this._getPoints(6) ]); + this.instanceGeometry = hexgonFill; + } + _calculateFill(feature) { + + feature.bufferInfo = { verticesOffset: this._offset }; + const { coordinates, shape } = feature; + const shapeIndex = pointShape['2d'].indexOf(shape) || 0; + let newCoord = coordinates; + if (coordinates.length === 1) { + newCoord = coordinates[0][0]; + } + feature.bufferInfo = { + verticesOffset: this._offset + }; + this._encodeArray(feature, 4); + this.attributes.shapes.set([ shapeIndex, shapeIndex, shapeIndex, shapeIndex ], this._offset); + this.attributes.miters.set([ -1, -1, 1, -1, 1, 1, -1, 1 ], this._offset * 2); + const indexArray = [ 0, 1, 2, 0, 2, 3 ].map(n => n + this._offset); + this.indexArray.set(indexArray, this._offset * 1.5); + + const position = []; + for (let i = 0; i < 4; i++) { + position.push(...newCoord); + } + this.attributes.positions.set(position, this._offset * 3); + this._offset += 4; + } + _getPoints(num) { + return polygonPath(num, 1); + } + getShape(shape) { + const { pointShape } = Global; + + if (this.geometryMap[shape]) { + return this.geometryMap[shape]; + } + let geometry = null; + if (pointShape['3d'].indexOf(shape) !== -1) { + geometry = extrude_Polygon([ shapePath[shape]() ]); + } else if (pointShape['2d'].indexOf(shape) !== -1) { + geometry = fillPolygon([ shapePath[shape]() ]); + } else { + geometry = fillPolygon([ shapePath[shape]() ]); + } + this.geometryMap[shape] = geometry; + return geometry; + } +} diff --git a/src/geom/buffer/point/imageBuffer.js b/src/geom/buffer/point/image_buffer.js similarity index 100% rename from src/geom/buffer/point/imageBuffer.js rename to src/geom/buffer/point/image_buffer.js diff --git a/src/geom/buffer/point/index.js b/src/geom/buffer/point/index.js index cfc406f5bc..988a46cf22 100644 --- a/src/geom/buffer/point/index.js +++ b/src/geom/buffer/point/index.js @@ -1,5 +1,5 @@ export { default as FillBuffer } from './fillBuffer'; export { default as StrokeBuffer } from './strokeBuffer'; -export { default as ImageBuffer } from './imageBuffer'; +export { default as ImageBuffer } from './image_buffer'; export { default as NormalBuffer } from './normalBuffer'; -export { default as CircleBuffer } from './circleBuffer'; +export { default as CircleBuffer } from './fill_buffer'; diff --git a/src/geom/buffer/polygon-line.js b/src/geom/buffer/polygon-line.js deleted file mode 100644 index d426d85855..0000000000 --- a/src/geom/buffer/polygon-line.js +++ /dev/null @@ -1,35 +0,0 @@ -import { polygonShape } from '../shape/index'; -import BufferBase from './bufferBase'; -export default class polygonLineBuffer extends BufferBase { - - geometryBuffer() { - const coordinates = this.get('coordinates'); - const properties = this.get('properties'); - const shape = this.get('shape'); - const positions = []; - const positionsIndex = []; - let vertsCount = 0; - this.bufferStruct.style = properties; - const isExtrude = properties[0].hasOwnProperty('size'); - coordinates.forEach((geo, index) => { - const heightValue = properties[index].size; - let extrudeData = []; - if (isExtrude && shape === 'extrudeline') { - extrudeData = polygonShape.extrudeline(geo); - extrudeData.positions = extrudeData.positions.map(pos => { - pos[2] *= heightValue; - return pos; - }); - } else { - extrudeData = polygonShape.line(geo); - } - positions.push(extrudeData.positions); - positionsIndex.push(...extrudeData.positionsIndex.map(index => { return index + vertsCount; })); - - vertsCount += extrudeData.positions.length; - }); - this.bufferStruct.indexs = positionsIndex; - this.bufferStruct.verts = positions; - this.bufferStruct.vertsCount = vertsCount; - } -} diff --git a/src/geom/buffer/polygon.js b/src/geom/buffer/polygon.js deleted file mode 100644 index 16e826eb59..0000000000 --- a/src/geom/buffer/polygon.js +++ /dev/null @@ -1,62 +0,0 @@ -import { polygonShape } from '../shape'; -import BufferBase from './bufferBase'; -export default class PolygonBuffer extends BufferBase { - geometryBuffer() { - const layerData = this.get('layerData'); - const shape = this.get('shape'); - const needFaceUv = this.get('faceUv'); - const positions = []; - const faceUv = []; - const sizes = []; - const positionsIndex = []; - let indexCount = 0; - this.bufferStruct.style = layerData; - const isExtrude = layerData[0].hasOwnProperty('size'); - // indices, normals, colors, UVs - layerData.forEach(item => { - const heightValue = item.size; - let extrudeData = polygonShape[shape](item.coordinates); - if (isExtrude && shape === 'extrude') { - extrudeData = polygonShape.extrude(item.coordinates); - extrudeData.positions = extrudeData.positions.map(pos => { - pos[2] *= heightValue; - return pos; - }); - } - positions.push(extrudeData.positions); - - if (needFaceUv) { - // faceUv.push(...extrudeData.faceUv); - const count = extrudeData.faceUv.length / 2; - for (let i = 0; i < count; i++) { - // uv 系数生成等大小的窗户 - let x = extrudeData.faceUv[i * 2]; - let y = extrudeData.faceUv[i * 2 + 1]; - if (x !== -1) { - x = x * 0.1; - y = y * heightValue / 2000; - } - faceUv.push(x, y); - sizes.push((1.0 - extrudeData.faceUv[i * 2 + 1]) * heightValue); - } - - } - indexCount += extrudeData.positionsIndex.length; - positionsIndex.push(extrudeData.positionsIndex); - }); - this.bufferStruct.indices = positionsIndex; - this.bufferStruct.position = positions; - this.bufferStruct.indexCount = indexCount; - this.bufferStruct.style = layerData; - this.bufferStruct.faceUv = faceUv; - this.bufferStruct.sizes = sizes; - if (shape !== 'line') { - this.attributes = this._toPolygonAttributes(this.bufferStruct); - } else { - this.attributes = this._toPolygonLineAttributes(this.bufferStruct); - - } - } - - -} diff --git a/src/geom/buffer/raster.js b/src/geom/buffer/raster.js index 1cb9c17c3a..eea93d0227 100644 --- a/src/geom/buffer/raster.js +++ b/src/geom/buffer/raster.js @@ -1,8 +1,13 @@ -import BufferBase from './bufferBase'; +// import BufferBase from './bufferBase'; import { colorScales } from '../../attr/colorscales'; import * as THREE from '../../core/three'; -export class RasterBuffer extends BufferBase { - geometryBuffer() { +import Base from '../../core/base'; +export class RasterBuffer extends Base { + constructor(cfg) { + super(cfg); + this.init(); + } + init() { const layerData = this.get('layerData'); const { coordinates, width, data, height } = layerData.dataArray[0]; const positions = [ @@ -21,12 +26,12 @@ export class RasterBuffer extends BufferBase { const colors = this.get('rampColors'); const colorImageData = this.getColorRamp(colors); const colorTexture = this._getTexture(colorImageData); // 颜色纹理 - this.bufferStruct.position = positions; - this.bufferStruct.uv = imgPosUv; - this.bufferStruct.u_raster = texture;// - this.bufferStruct.u_extent = [ coordinates[0][0], coordinates[0][1], coordinates[1][0], coordinates[1][1] ]; - this.bufferStruct.u_colorTexture = colorTexture; // 颜色表‘= - const triangles = this._buildTriangles(width, height, size, this.bufferStruct.u_extent); + this.position = positions; + this.uv = imgPosUv; + this.u_raster = texture;// + this.u_extent = [ coordinates[0][0], coordinates[0][1], coordinates[1][0], coordinates[1][1] ]; + this.u_colorTexture = colorTexture; // 颜色表‘= + const triangles = this._buildTriangles(width, height, size, this.u_extent); const attributes = { vertices: new Float32Array(triangles.vertices), uvs: new Float32Array(triangles.uvs), diff --git a/src/geom/extrude copy.js b/src/geom/extrude copy.js deleted file mode 100644 index 85fc86cad9..0000000000 --- a/src/geom/extrude copy.js +++ /dev/null @@ -1,107 +0,0 @@ -import earcut from 'earcut'; - -/** - * 计算是否拉伸 - * @param {Array} points 点坐标数组 - * @param {boolean} extrude 是否拉伸 - * @return {object} 顶点坐标顶点索引 - */ -export default function extrudePolygon(points, extrude) { - // height += Math.random() * 100; // 解决 depth - const p1 = points[0][0]; - const p2 = points[0][points[0].length - 1]; - const faceUv = []; - if (p1[0] === p2[0] && p1[1] === p2[1]) { - points[0] = points[0].slice(0, points[0].length - 1); - } - const n = points[0].length; - const flattengeo = earcut.flatten(points); - const positions = []; - let cells = []; - const { dimensions } = flattengeo; - const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions); - cells = triangles; - - const pointCount = flattengeo.vertices.length / dimensions; - const { vertices } = flattengeo; - extrude ? full() : flat(); - - - function flat() { - for (let i = 0; i < pointCount; i++) { - positions.push([ vertices[ i * dimensions ], vertices[i * dimensions + 1 ], 0 ]); - } - } - function full() { - // 顶部纹理 - triangles.forEach(() => { - faceUv.push(-1, -1); - }); - // 顶部坐标 - - for (let i = 0; i < pointCount; i++) { - positions.push([ vertices[ i * dimensions ], vertices[i * dimensions + 1 ], 1 ]); - } - for (let i = 0; i < pointCount; i++) { - positions.push([ vertices[ i * dimensions ], vertices[i * dimensions + 1 ], 0 ]); - } - for (let i = 0; i < n; i++) { - if (i === (n - 1)) { - cells.push(i, n, i + n); - faceUv.push(1, 0, 0, 1, 1, 1); - cells.push(i, 0, n); - faceUv.push(1, 0, 0, 0, 0, 1); - } else { - cells.push(i + n, i, i + n + 1); - faceUv.push(1, 1, 1, 0, 0, 1); - cells.push(i, i + 1, i + n + 1); - faceUv.push(1, 0, 0, 0, 0, 1); - } - } - } - points = []; - return { - positions, - faceUv, - positionsIndex: cells - }; -} - -export function extrudePolygonLine(points, extrude) { - // height += Math.random() * 100; // 解决 depth - const p1 = points[0][0]; - const p2 = points[0][points[0].length - 1]; - if (p1[0] === p2[0] && p1[1] === p2[1]) { - points[0] = points[0].slice(0, points[0].length - 1); - } - - const n = points[0].length; - const flattengeo = earcut.flatten(points); - const positions = []; - let cells = []; - const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions); - cells = triangles.map(e => e); - extrude === 0 ? flat() : full(); - - function flat() { - points[0].forEach(p => { positions.push([ p[0], p[1], 0 ]); }); // top - } - function full() { - points[0].forEach(p => { positions.push([ p[0], p[1], 1 ]); }); // top - points[0].forEach(p => { positions.push([ p[0], p[1], 0 ]); }); // bottom - for (let i = 0; i < n; i++) { - if (i === (n - 1)) { - cells.push(i + n, n, i); - cells.push(0, i, n); - } else { - cells.push(i + n, i + n + 1, i); - cells.push(i + 1, i, i + n + 1); - } - } - } - points = []; - return { - positions, - positionsIndex: cells - }; -} diff --git a/src/geom/material/circleMaterial.js b/src/geom/material/circleMaterial.js index d042c91e75..71770262b4 100644 --- a/src/geom/material/circleMaterial.js +++ b/src/geom/material/circleMaterial.js @@ -1,9 +1,8 @@ import Material from './material'; import { getModule, wrapUniforms } from '../../util/shaderModule'; import merge from '@antv/util/lib/deep-mix'; - export default class CircleMaterial extends Material { - constructor(_uniforms, _defines, parameters) { + constructor(_uniforms, _defines = {}, parameters) { super(parameters); const { vs, fs, uniforms } = getModule('circle'); this.uniforms = wrapUniforms(merge(uniforms, _uniforms)); diff --git a/src/geom/material/normal_point.js b/src/geom/material/normal_point.js new file mode 100644 index 0000000000..a2ded73e5c --- /dev/null +++ b/src/geom/material/normal_point.js @@ -0,0 +1,33 @@ + +import Material from './material'; +import * as THREE from '../../core/three'; +import { getModule } from '../../util/shaderModule'; +export default class PointMaterial extends Material { + getDefaultParameters() { + return { + uniforms: { + u_opacity: { value: 1 }, + u_stroke: { value: [ 1.0, 1.0, 1.0, 1.0 ] }, + u_strokeWidth: { value: 1 }, + u_activeId: { value: 0 } + }, + defines: { + SHAPE: false, + TEXCOORD_0: false + } + }; + } + constructor(_uniforms, _defines, parameters) { + super(parameters); + const { uniforms, defines } = this.getDefaultParameters(); + const { vs, fs } = getModule('pointnormal'); + this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms)); + this.defines = Object.assign(defines, _defines); + this.type = 'PointMaterial'; + this.vertexShader = vs; + this.fragmentShader = fs; + this.transparent = true; + + this.blending = THREE.AdditiveBlending; + } +} diff --git a/src/geom/material/pointMaterial.js b/src/geom/material/pointMaterial.js index c4bd19bc0b..e2424627ed 100644 --- a/src/geom/material/pointMaterial.js +++ b/src/geom/material/pointMaterial.js @@ -1,6 +1,8 @@ import Material from './material'; +import * as THREE from '../../core/three'; import { getModule } from '../../util/shaderModule'; +import picking_frag from '../../core/engine/picking//picking_frag.glsl'; export default class PointMaterial extends Material { getDefaultParameters() { return { @@ -26,7 +28,8 @@ export default class PointMaterial extends Material { this.vertexShader = vs; this.fragmentShader = fs; this.transparent = true; - // if (!this.uniforms.shape) { this.blending = THREE.AdditiveBlending; } + + if (!this.uniforms.shape) { this.blending = THREE.AdditiveBlending; } if (this.uniforms.u_texture) { this.defines.TEXCOORD_0 = true; } diff --git a/src/geom/shader/arcline_frag.glsl b/src/geom/shader/arcline_frag.glsl index 8ecf99a911..8797501ca2 100644 --- a/src/geom/shader/arcline_frag.glsl +++ b/src/geom/shader/arcline_frag.glsl @@ -6,6 +6,7 @@ if(v_color.a == 0.){ discard; } + #pragma include "pick" gl_FragColor = v_color; gl_FragColor.a = v_color.a*u_opacity; diff --git a/src/geom/shader/arcline_vert.glsl b/src/geom/shader/arcline_vert.glsl index 1b0289ca13..fadecc72bc 100644 --- a/src/geom/shader/arcline_vert.glsl +++ b/src/geom/shader/arcline_vert.glsl @@ -61,6 +61,8 @@ void main() { if(pickingId == u_activeId) { v_color = u_activeColor; } + #ifdef PICK worldId = id_toPickColor(pickingId); + #endif } \ No newline at end of file diff --git a/src/geom/shader/circle_frag.glsl b/src/geom/shader/circle_frag.glsl index 82b8a77362..0e96cc50e0 100644 --- a/src/geom/shader/circle_frag.glsl +++ b/src/geom/shader/circle_frag.glsl @@ -11,7 +11,8 @@ varying float v_radius; #pragma include "sdf_2d" void main() { - int shape = int(floor(v_data.w + 0.5)); + // int shape = int(floor(v_data.w + 0.5)); + int shape = 0; lowp float antialiasblur = v_data.z; float antialiased_blur = -max(u_blur, antialiasblur); @@ -57,5 +58,6 @@ void main() { inner_df ); - gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity, color_t); + gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity * v_color.a, color_t); + #pragma include "pick" } \ No newline at end of file diff --git a/src/geom/shader/circle_vert.glsl b/src/geom/shader/circle_vert.glsl index f9382ad0aa..5255dc6e3e 100644 --- a/src/geom/shader/circle_vert.glsl +++ b/src/geom/shader/circle_vert.glsl @@ -1,4 +1,8 @@ -attribute vec4 a_packed_data; +// attribute vec4 a_packed_data; +attribute vec4 a_color; +attribute float a_size; +attribute float a_shape; +attribute vec2 miter; uniform float u_zoom : 1; uniform float u_stroke_width : 2; @@ -13,43 +17,47 @@ varying float v_radius; void main() { // unpack color(vec2) - v_color = decode_color(a_packed_data.xy); - // unpack picking_id - float picking_id = a_packed_data.w; - + // v_color = decode_color(a_packed_data.xy); + v_color = a_color; + // unpack pickingId + // float pickingId = a_packed_data.w; + // float pickingId = .w; + // unpack data(extrude(4-bit), radius(16-bit)) - float compressed = a_packed_data.z; + // float compressed = a_packed_data.z; - // extrude(4-bit) - vec2 extrude; - extrude.x = floor(compressed * SHIFT_RIGHT23); - compressed -= extrude.x * SHIFT_LEFT23; - extrude.x = extrude.x - 1.; + // // extrude(4-bit) + vec2 extrude = miter; + // extrude.x = floor(compressed * SHIFT_RIGHT23); + // compressed -= extrude.x * SHIFT_LEFT23; + // extrude.x = extrude.x - 1.; - extrude.y = floor(compressed * SHIFT_RIGHT21); - compressed -= extrude.y * SHIFT_LEFT21; - extrude.y = extrude.y - 1.; + // extrude.y = floor(compressed * SHIFT_RIGHT21); + // compressed -= extrude.y * SHIFT_LEFT21; + // extrude.y = extrude.y - 1.; - float shape_type = floor(compressed * SHIFT_RIGHT17); - compressed -= shape_type * SHIFT_LEFT17; + // float shape_type = floor(compressed * SHIFT_RIGHT17); + // compressed -= shape_type * SHIFT_LEFT17; // radius(16-bit) - float radius = compressed; + float radius = a_size; v_radius = radius; float zoom_scale = pow(2., 20. - u_zoom); - vec2 offset = extrude * (radius + u_stroke_width) * zoom_scale; + vec2 offset = miter * (radius + u_stroke_width) * zoom_scale; gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy + offset, 0.0, 1.0); // anti-alias float antialiasblur = 1.0 / (radius + u_stroke_width); // construct point coords - v_data = vec4(extrude, antialiasblur, shape_type); + v_data = vec4(extrude, antialiasblur, a_shape); // picking - if(picking_id == u_activeId) { + if(pickingId == u_activeId) { v_color = u_activeColor; } - worldId = id_toPickColor(picking_id); + #ifdef PICK + worldId = id_toPickColor(pickingId); + #endif } \ No newline at end of file diff --git a/src/geom/shader/great_circle_line_vert.glsl b/src/geom/shader/great_circle_line_vert.glsl index db4f7c7534..1fe36c7f2b 100644 --- a/src/geom/shader/great_circle_line_vert.glsl +++ b/src/geom/shader/great_circle_line_vert.glsl @@ -90,6 +90,8 @@ void main() { if(pickingId == u_activeId) { v_color = u_activeColor; } + #ifdef PICK worldId = id_toPickColor(pickingId); + #endif } \ No newline at end of file diff --git a/src/geom/shader/grid_frag.glsl b/src/geom/shader/grid_frag.glsl index 6fd41421b4..5a6677fb2f 100644 --- a/src/geom/shader/grid_frag.glsl +++ b/src/geom/shader/grid_frag.glsl @@ -2,4 +2,5 @@ varying vec4 v_color; void main() { gl_FragColor = v_color; + #pragma include "pick" } \ No newline at end of file diff --git a/src/geom/shader/grid_vert.glsl b/src/geom/shader/grid_vert.glsl index 35fba3dc04..6160379b85 100644 --- a/src/geom/shader/grid_vert.glsl +++ b/src/geom/shader/grid_vert.glsl @@ -31,5 +31,7 @@ void main() { gl_Position = matModelViewProjection * vec4(x, y, z, 1.0); - worldId = id_toPickColor(pickingId); + #ifdef PICK + worldId = id_toPickColor(pickingId); + #endif } \ No newline at end of file diff --git a/src/geom/shader/hexagon_frag.glsl b/src/geom/shader/hexagon_frag.glsl index 6fd41421b4..5a6677fb2f 100644 --- a/src/geom/shader/hexagon_frag.glsl +++ b/src/geom/shader/hexagon_frag.glsl @@ -2,4 +2,5 @@ varying vec4 v_color; void main() { gl_FragColor = v_color; + #pragma include "pick" } \ No newline at end of file diff --git a/src/geom/shader/hexagon_vert.glsl b/src/geom/shader/hexagon_vert.glsl index 3940da986e..204dd5de4b 100644 --- a/src/geom/shader/hexagon_vert.glsl +++ b/src/geom/shader/hexagon_vert.glsl @@ -37,5 +37,7 @@ void main() { gl_Position = matModelViewProjection * vec4(x, y, z, 1.0); - worldId = id_toPickColor(pickingId); + #ifdef PICK + worldId = id_toPickColor(pickingId); + #endif } \ No newline at end of file diff --git a/src/geom/shader/index.js b/src/geom/shader/index.js index 31af8e923d..d9e81c8e4e 100644 --- a/src/geom/shader/index.js +++ b/src/geom/shader/index.js @@ -13,6 +13,10 @@ import circle_vert from './circle_vert.glsl'; import point_line_frag from '../shader/point_meshLine_frag.glsl'; import point_line_vert from '../shader/point_meshLine_vert.glsl'; +// 原生点 +import normal_point_frag from './normal_point_frag.glsl'; +import normal_point_vert from './normal_point_vert.glsl'; + // 有宽度的线 import mesh_line_frag from '../shader/meshline_frag.glsl'; import mesh_line_vert from '../shader/meshline_vert.glsl'; @@ -59,6 +63,7 @@ import { registerModule } from '../../util/shaderModule'; import pick_color from './shaderChunks/pick_color.glsl'; import decode from './shaderChunks/decode.glsl'; import lighting from './shaderChunks/lighting.glsl'; +import pick from './shaderChunks/pick.glsl'; import sdf_2d from './shaderChunks/sdf_2d.glsl'; import project from './shaderChunks/project.glsl'; @@ -67,6 +72,7 @@ export function compileBuiltinModules() { registerModule('common', { vs: common, fs: common }); registerModule('decode', { vs: decode, fs: '' }); registerModule('lighting', { vs: lighting, fs: '' }); + registerModule('pick', { vs: '', fs: pick }); registerModule('sdf_2d', { vs: '', fs: sdf_2d }); registerModule('project', { vs: project, fs: '' }); registerModule('pick_color', { vs: pick_color, fs: pick_color }); @@ -75,6 +81,7 @@ export function compileBuiltinModules() { registerModule('grid', { vs: grid_vert, fs: grid_frag }); registerModule('hexagon', { vs: hexagon_vert, fs: hexagon_frag }); registerModule('pointline', { vs: point_line_vert, fs: point_line_frag }); + registerModule('pointnormal', { vs: normal_point_vert, fs: normal_point_frag }); registerModule('meshline', { vs: mesh_line_vert, fs: mesh_line_frag }); registerModule('arcline', { vs: arc_line_vert, fs: arc_line_frag }); registerModule('greatcircle', { vs: great_circle_line_vert, fs: arc_line_frag }); diff --git a/src/geom/shader/line_frag.glsl b/src/geom/shader/line_frag.glsl index c1478d4b29..9d7b1a04d1 100644 --- a/src/geom/shader/line_frag.glsl +++ b/src/geom/shader/line_frag.glsl @@ -11,4 +11,5 @@ color.a= color.a * vTime * 1.5; #endif gl_FragColor = color; + #pragma include "pick" } \ No newline at end of file diff --git a/src/geom/shader/line_vert.glsl b/src/geom/shader/line_vert.glsl index 74a5d3c134..7679787498 100644 --- a/src/geom/shader/line_vert.glsl +++ b/src/geom/shader/line_vert.glsl @@ -19,5 +19,7 @@ void main() { // vTime = 1.0- (28800. + mod(u_time* 10.,28800.)- position.z / 1000.) / 100.; #endif gl_Position = matModelViewProjection * vec4(position.xy, 10., 1.0); - worldId = id_toPickColor(pickingId); + #ifdef PICK + worldId = id_toPickColor(pickingId); + #endif } \ No newline at end of file diff --git a/src/geom/shader/meshline_frag.glsl b/src/geom/shader/meshline_frag.glsl index f07301978e..debc84c992 100644 --- a/src/geom/shader/meshline_frag.glsl +++ b/src/geom/shader/meshline_frag.glsl @@ -45,4 +45,5 @@ void main() { // anti-alias float blur = 1. - smoothstep(u_blur, 1., length(v_normal)); gl_FragColor.a *= blur; + #pragma include "pick" } diff --git a/src/geom/shader/meshline_vert.glsl b/src/geom/shader/meshline_vert.glsl index 3087744f61..f8031ad4e3 100644 --- a/src/geom/shader/meshline_vert.glsl +++ b/src/geom/shader/meshline_vert.glsl @@ -67,5 +67,7 @@ void main() { if(pickingId == u_activeId) { v_color = u_activeColor; } - worldId = id_toPickColor(pickingId); + #ifdef PICK + worldId = id_toPickColor(pickingId); + #endif } \ No newline at end of file diff --git a/src/geom/shader/normal_point_frag.glsl b/src/geom/shader/normal_point_frag.glsl new file mode 100644 index 0000000000..b1ee3c08cd --- /dev/null +++ b/src/geom/shader/normal_point_frag.glsl @@ -0,0 +1,5 @@ +precision highp float; +varying vec4 v_color; +void main(){ + gl_FragColor=v_color; +} \ No newline at end of file diff --git a/src/geom/shader/normal_point_vert.glsl b/src/geom/shader/normal_point_vert.glsl new file mode 100644 index 0000000000..e21fef3ab8 --- /dev/null +++ b/src/geom/shader/normal_point_vert.glsl @@ -0,0 +1,23 @@ +precision highp float; +attribute vec4 a_color; +attribute float a_size; +varying vec4 v_color; +uniform float u_activeId; +uniform vec4 u_activeColor; +uniform float u_opacity; + +void main(){ + mat4 matModelViewProjection=projectionMatrix*modelViewMatrix; + v_color=a_color; + v_color.a*=u_opacity; + if(pickingId==u_activeId){ + v_color=u_activeColor; + } + gl_Position=matModelViewProjection*vec4(position,1.); + gl_PointSize=a_size; + + #ifdef PICK + worldId = id_toPickColor(pickingId); + #endif +} + diff --git a/src/geom/shader/point_frag.glsl b/src/geom/shader/point_frag.glsl index 30ff5a6623..fdf2201ff7 100644 --- a/src/geom/shader/point_frag.glsl +++ b/src/geom/shader/point_frag.glsl @@ -12,64 +12,64 @@ varying vec2 v_rs; varying vec2 v_uv; varying vec4 v_color; varying float v_shape; -const float u_buffer = 0.75; +const float u_buffer=.75; // const float u_gamma = 2.0 * 1.4142 / 10.0; -const float u_gamma = 0.08; +const float u_gamma=.08; // const float u_scale = 128.0; -const vec3 halo = vec3( 1.0 ); -void main() { +const vec3 halo=vec3(1.); +void main(){ // 纹理坐标 #ifdef TEXCOORD_0 - vec2 pos = v_uv + gl_PointCoord / 512.0 * 64.0; - pos.y = 1.0 - pos.y; - vec4 textureColor = texture2D(u_texture, pos); - gl_FragColor =textureColor; - return; + vec2 pos=v_uv+gl_PointCoord/512.*64.; + pos.y=1.-pos.y; + vec4 textureColor=texture2D(u_texture,pos); + gl_FragColor=textureColor; + return; #endif - if(v_color.a == 0.) - discard; - vec4 pcolor = v_color; - float ro = v_rs.x; - float ri = v_rs.y; - float d = 0.0; - if(ro < 3.0) { - gl_FragColor = pcolor; - return; + if(v_color.a==0.) + discard; + vec4 pcolor=v_color; + float ro=v_rs.x; + float ri=v_rs.y; + float d=0.; + if(ro<3.){ + gl_FragColor=pcolor; + return; } - - // vec4 textureColor = texture2D(u_texture, gl_PointCoord); - vec2 st = gl_PointCoord * 2. - 1.; - float a = atan(st.x,st.y)+PI ; - float r = TWO_PI/ v_shape; - float ratio =1.0 + (1.1 - smoothstep(2.8, 6.0,v_shape)); - float dis2center = cos(floor(.5+a/r)*r-a)*length(st) * ro * ratio; - float alpha = smoothstep(ro,ro+0.1, dis2center); - if(alpha == 1.) { - discard; + // vec4 textureColor = texture2D(u_texture, gl_PointCoord); + vec2 st=gl_PointCoord*2.-1.; + float a=atan(st.x,st.y)+PI; + float r=TWO_PI/v_shape; + float ratio=1.+(1.1-smoothstep(2.8,6.,v_shape)); + float dis2center=cos(floor(.5+a/r)*r-a)*length(st)*ro*ratio; + float alpha=smoothstep(ro,ro+.1,dis2center); + + if(alpha==1.){ + discard; } - if(u_strokeWidth > 0.0){//有border - if(dis2center> ro- u_strokeWidth ){ - gl_FragColor = vec4(u_stroke.xyz,u_stroke.a*(ro- dis2center)); + if(u_strokeWidth>0.){//有border + if(dis2center>ro-u_strokeWidth){ + gl_FragColor=vec4(u_stroke.xyz,u_stroke.a*(ro-dis2center)); return; }else if(dis2center>ri){ - gl_FragColor= u_stroke; + gl_FragColor=u_stroke; return; } } - - if(dis2center > ri- u_strokeWidth){ - float factor = ri-dis2center;//填充色的百分比 - if (u_strokeWidth == 0.0) { - float a = pcolor.a*factor; - gl_FragColor = vec4(pcolor.rgb, a); - } else { - float a = u_stroke.a*(1.0-factor) +pcolor.a*factor; - gl_FragColor = vec4(u_stroke.rgb * (1.0-factor) + pcolor.rgb * factor, a); - } - } else{ - gl_FragColor= pcolor; + + if(dis2center>ri-u_strokeWidth){ + float factor=ri-dis2center;//填充色的百分比 + if(u_strokeWidth==0.){ + float a=pcolor.a*factor; + gl_FragColor=vec4(pcolor.rgb,a); + }else{ + float a=u_stroke.a*(1.-factor)+pcolor.a*factor; + gl_FragColor=vec4(u_stroke.rgb*(1.-factor)+pcolor.rgb*factor,a); } + }else{ + gl_FragColor=pcolor; + } } diff --git a/src/geom/shader/point_meshLine_frag.glsl b/src/geom/shader/point_meshLine_frag.glsl index dce0d13b09..0cdfe8fdf8 100644 --- a/src/geom/shader/point_meshLine_frag.glsl +++ b/src/geom/shader/point_meshLine_frag.glsl @@ -11,4 +11,5 @@ void main() { } #endif gl_FragColor = v_color; + #pragma include "pick" } diff --git a/src/geom/shader/point_meshLine_vert.glsl b/src/geom/shader/point_meshLine_vert.glsl index 023a75f17d..5839416904 100644 --- a/src/geom/shader/point_meshLine_vert.glsl +++ b/src/geom/shader/point_meshLine_vert.glsl @@ -30,6 +30,8 @@ if(v_pickingId == u_activeId) { //vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * pow(2.0,20.0-u_zoom) / 2.0 * a_miter); vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * scale / 2.0 * a_miter); gl_Position = matModelViewProjection * vec4(pointPos, 1.0); - worldId = id_toPickColor(pickingId); +#ifdef PICK +worldId = id_toPickColor(pickingId); +#endif } \ No newline at end of file diff --git a/src/geom/shader/point_vert.glsl b/src/geom/shader/point_vert.glsl index 874376fe9a..47bac07829 100644 --- a/src/geom/shader/point_vert.glsl +++ b/src/geom/shader/point_vert.glsl @@ -29,6 +29,8 @@ void main() { #ifdef SHAPE v_shape = a_shape; #endif + #ifdef PICK worldId = id_toPickColor(pickingId); + #endif } diff --git a/src/geom/shader/polygon_frag.glsl b/src/geom/shader/polygon_frag.glsl index 8f1780ce9a..fef65686d9 100644 --- a/src/geom/shader/polygon_frag.glsl +++ b/src/geom/shader/polygon_frag.glsl @@ -13,7 +13,7 @@ varying vec2 v_texCoord; #endif varying vec4 v_color; -varying vec4 worldId; + vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) { float s = step(hot, n); @@ -109,5 +109,6 @@ void main() { #else gl_FragColor = vec4(v_color.xyz , v_color.w); #endif + #pragma include "pick" } \ No newline at end of file diff --git a/src/geom/shader/polygon_vert.glsl b/src/geom/shader/polygon_vert.glsl index 86dc2aa18b..7628d60021 100644 --- a/src/geom/shader/polygon_vert.glsl +++ b/src/geom/shader/polygon_vert.glsl @@ -46,5 +46,7 @@ void main() { if(pickingId == u_activeId) { v_color = u_activeColor; } - worldId = id_toPickColor(pickingId); + #ifdef PICK + worldId = id_toPickColor(pickingId); + #endif } \ No newline at end of file diff --git a/src/geom/shader/shaderChunks/pick.glsl b/src/geom/shader/shaderChunks/pick.glsl new file mode 100644 index 0000000000..d1b088fc70 --- /dev/null +++ b/src/geom/shader/shaderChunks/pick.glsl @@ -0,0 +1,8 @@ +#ifdef PICK + if(worldId.x == 0. &&worldId.y == 0. && worldId.z==0.){ + discard; + return; + } + gl_FragColor = worldId; + return; +#endif \ No newline at end of file diff --git a/src/geom/shader/text_frag.glsl b/src/geom/shader/text_frag.glsl index 7fe59c4257..bbbb18548e 100644 --- a/src/geom/shader/text_frag.glsl +++ b/src/geom/shader/text_frag.glsl @@ -28,4 +28,5 @@ void main(){ } } + #pragma include "pick" } \ No newline at end of file diff --git a/src/geom/shader/text_vert.glsl b/src/geom/shader/text_vert.glsl index f4290df289..c6d7d26a15 100644 --- a/src/geom/shader/text_vert.glsl +++ b/src/geom/shader/text_vert.glsl @@ -21,6 +21,8 @@ void main(){ v_color=u_activeColor; } v_texcoord=uv/u_textTextureSize; - worldId=id_toPickColor(pickingId); + #ifdef PICK + worldId = id_toPickColor(pickingId); + #endif } diff --git a/src/layer/point_layer.js b/src/layer/point_layer.js index 6d0b0ed6d1..f1edb7aa46 100644 --- a/src/layer/point_layer.js +++ b/src/layer/point_layer.js @@ -10,10 +10,14 @@ const { pointShape } = Global; */ export default class PointLayer extends Layer { + constructor(scene, cfg) { + super(scene, cfg); + this.set('type', 'point'); + } draw() { this.type = 'point'; this.shapeType = this._getShape(); - const mesh = getRender(this.type, this.shapeType)(this.layerData, this, this.layerSource); + const mesh = getRender(this.type, this.shapeType)(this.layerData, this); this.add(mesh); } @@ -31,9 +35,9 @@ export default class PointLayer extends Layer { // 2D circle 特殊处理 if (pointShape['2d'].indexOf(shape) !== -1) { - return 'circle'; - } else if (pointShape['3d'].indexOf(shape) !== -1) { return 'fill'; + } else if (pointShape['3d'].indexOf(shape) !== -1) { + return 'extrude'; } else if (this.scene.image.imagesIds.indexOf(shape) !== -1) { return 'image'; } diff --git a/src/layer/raster_layer.js b/src/layer/raster_layer.js index 40075e54c0..5be05663eb 100644 --- a/src/layer/raster_layer.js +++ b/src/layer/raster_layer.js @@ -17,10 +17,10 @@ export default class RasterLayer extends Layer { this.initGeometry(buffer.attributes); const rasterConfig = source.data.dataArray[0]; const material = new RasterMaterial({ - u_texture: buffer.bufferStruct.u_raster, - u_colorTexture: buffer.bufferStruct.u_colorTexture, + u_texture: buffer.u_raster, + u_colorTexture: buffer.u_colorTexture, u_opacity: 1.0, - u_extent: buffer.bufferStruct.u_extent, + u_extent: buffer.u_extent, u_min: rasterConfig.min, u_max: rasterConfig.max, u_dimension: buffer.attributes.dimension diff --git a/src/layer/render/index.js b/src/layer/render/index.js index 4272da7ab9..410ec8c0df 100644 --- a/src/layer/render/index.js +++ b/src/layer/render/index.js @@ -19,26 +19,28 @@ registerRender('line', 'arc', DrawArcLine); registerRender('line', 'greatCircle', DrawArcLine); // point -import DrawPointFill from './point/drawFill'; +// import DrawPointFill from './point/drawFill'; import DrawPointImage from './point/drawImage'; import DrawPointNormal from './point/drawNormal'; import DrawPointStroke from './point/drawStroke'; import DrawPointText from './point/drawText'; import DrawPointCircle from './point/drawCircle'; +import DrawHexagon from './heatmap/hexagon'; -registerRender('point', 'fill', DrawPointFill); +// registerRender('point', 'fill', DrawPointFill); registerRender('point', 'image', DrawPointImage); registerRender('point', 'normal', DrawPointNormal); registerRender('point', 'stroke', DrawPointStroke); registerRender('point', 'text', DrawPointText); -registerRender('point', 'circle', DrawPointCircle); +registerRender('point', 'fill', DrawPointCircle); registerRender('point', 'shape', Draw3DShape); +registerRender('point', 'extrude', Draw3DShape); // heatmap import DrawGrid from './heatmap/gird'; import DrawHeatmap from './heatmap/heatmap'; -import DrawHexagon from './heatmap/hexagon'; + registerRender('heatmap', 'square', DrawGrid); registerRender('heatmap', 'squareColumn', DrawGrid); diff --git a/src/layer/render/point/drawCircle.js b/src/layer/render/point/drawCircle.js index dfc837bfa2..6fcd27979d 100644 --- a/src/layer/render/point/drawCircle.js +++ b/src/layer/render/point/drawCircle.js @@ -3,18 +3,33 @@ * 手动构建点阵坐标系，便于实现描边、反走样效果 */ import * as THREE from '../../../core/three'; -import * as PointBuffer from '../../../geom/buffer/point/index'; import CircleMaterial from '../../../geom/material/circleMaterial'; -export default function drawCircle(layerData, layer) { +import { getBuffer } from '../../../geom/buffer/'; +export default function drawCircle(layerData, layer, buffer) { const style = layer.get('styleOptions'); const activeOption = layer.get('activedOptions'); + if (!buffer) { + const geometryBuffer = getBuffer(layer.type, layer.shapeType); + buffer = new geometryBuffer({ + layerData + }); - const { aPosition, aPackedData, index } = PointBuffer.CircleBuffer(layerData, style); + } + // const { aPosition, aPackedData } = buffer.attributes; + const { attributes, indexArray } = buffer; const geometry = new THREE.BufferGeometry(); - geometry.setIndex(index); - geometry.addAttribute('position', new THREE.Float32BufferAttribute(aPosition, 3)); - geometry.addAttribute('a_packed_data', new THREE.Float32BufferAttribute(aPackedData, 4)); + if (buffer.indexArray) { + geometry.setIndex(new THREE.Uint32BufferAttribute(indexArray, 1)); + } + // geometry.addAttribute('position', new THREE.Float32BufferAttribute(aPosition, 3)); + geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3)); + geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4)); + geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1)); + geometry.addAttribute('miter', new THREE.Float32BufferAttribute(attributes.miters, 2)); + geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1)); + geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapes, 1)); + // geometry.addAttribute('a_packed_data', new THREE.Float32BufferAttribute(aPackedData, 4)); const material = new CircleMaterial({ u_opacity: style.opacity, u_activeColor: activeOption.fill, @@ -26,8 +41,5 @@ export default function drawCircle(layerData, layer) { material.depthTest = false; material.setBending(style.blending); const fillMesh = new THREE.Mesh(geometry, material); - aPosition.length = 0; - aPackedData.length = 0; - index.length = 0; return fillMesh; } diff --git a/src/layer/render/point/drawFill.js b/src/layer/render/point/drawFill.js index ec70856cea..4bd5583095 100644 --- a/src/layer/render/point/drawFill.js +++ b/src/layer/render/point/drawFill.js @@ -22,16 +22,6 @@ export default function DrawFill(layerData, layer) { geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapePositions, 3)); geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.a_size, 3)); - // const instancedGeometry = new THREE.InstancedBufferGeometry(); - - // instancedGeometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3)); - // instancedGeometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapePositions, 3)); - // // instanced attributes - // instancedGeometry.addAttribute('position', new THREE.InstancedBufferAttribute(new Float32Array(attributes.vertices), 3)); - // instancedGeometry.addAttribute('a_color', new THREE.InstancedBufferAttribute(new Float32Array(attributes.colors), 4)); - // instancedGeometry.addAttribute('pickingId', new THREE.InstancedBufferAttribute(new Float32Array(attributes.pickingIds), 1)); - // instancedGeometry.addAttribute('a_size', new THREE.InstancedBufferAttribute(new Float32Array(attributes.a_size), 3)); - const material = new PolygonMaterial({ u_opacity: style.opacity, u_activeColor: activeOption.fill, diff --git a/src/layer/render/point/drawNormal.js b/src/layer/render/point/drawNormal.js index 41d5d7d702..1f5ade88be 100644 --- a/src/layer/render/point/drawNormal.js +++ b/src/layer/render/point/drawNormal.js @@ -3,7 +3,7 @@ */ import * as THREE from '../../../core/three'; import * as PointBuffer from '../../../geom/buffer/point/index'; -import PointMaterial from '../../../geom/material/pointMaterial'; +import PointMaterial from '../../../geom/material/normal_point'; export default function DrawNormal(layerData, layer) { const geometry = new THREE.BufferGeometry(); @@ -19,10 +19,7 @@ export default function DrawNormal(layerData, layer) { u_opacity: opacity, u_activeColor: activeOption.fill }, { - SHAPE: false, - TEXCOORD_0: false }, style); - material.setBending(style.blending); const strokeMesh = new THREE.Points(geometry, material); return strokeMesh; } diff --git a/src/layer/render/point/draw_3d_shape.js b/src/layer/render/point/draw_3d_shape.js index 422e6e520d..6ea382c88d 100644 --- a/src/layer/render/point/draw_3d_shape.js +++ b/src/layer/render/point/draw_3d_shape.js @@ -1,13 +1,10 @@ import * as THREE from '../../../core/three'; -import GridMaterial from '../../../geom/material/hexagon'; import { getBuffer } from '../../../geom/buffer/'; +import PolygonMaterial from '../../../geom/material/polygonMaterial'; import { generateLightingUniforms } from '../../../util/shaderModule'; -export default function Draw3DShape(layerData, layer, source) { +export default function Draw3DShape(layerData, layer) { const style = layer.get('styleOptions'); - const { fill } = layer.get('activedOptions'); - const { radius } = source.data; - // const attributes = new hexagonBuffer(layerdata); - const { opacity, angle, coverage, lights } = style; + const activeOption = layer.get('activedOptions'); const geometryBuffer = getBuffer('shape', 'extrude'); const buffer = new geometryBuffer({ layerData, @@ -17,25 +14,24 @@ export default function Draw3DShape(layerData, layer, source) { const geometry = new THREE.BufferGeometry(); geometry.setIndex(new THREE.Uint32BufferAttribute(indexArray, 1)); geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3)); - geometry.addAttribute('miter', new THREE.Float32BufferAttribute(attributes.miters, 3)); geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4)); geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1)); geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3)); - geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1)); + geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.miters, 3)); + geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 3)); - - const material = new GridMaterial({ - u_opacity: opacity, - u_radius: radius, - u_angle: angle / 180 * Math.PI, - u_coverage: coverage, - u_activeColor: fill, - ...generateLightingUniforms(lights) + const material = new PolygonMaterial({ + u_opacity: style.opacity, + u_activeColor: activeOption.fill, + u_zoom: layer.scene.getZoom(), + ...generateLightingUniforms(style.lights) }, { - SHAPE: false, + SHAPE: true, LIGHTING: true }); - const hexgonMesh = new THREE.Mesh(geometry, material); - return hexgonMesh; + material.setDefinesvalue('SHAPE', true); + material.setBending(style.blending); + const fillMesh = new THREE.Mesh(geometry, material); + return fillMesh; } diff --git a/src/layer/render/polygon/drawAnimate.js b/src/layer/render/polygon/drawAnimate.js index 0742917d50..ea3efa99df 100644 --- a/src/layer/render/polygon/drawAnimate.js +++ b/src/layer/render/polygon/drawAnimate.js @@ -1,5 +1,4 @@ import * as THREE from '../../../core/three'; -import PolygonBuffer from '../../../geom/buffer/polygon'; import PolygonMaterial from '../../../geom/material/polygonMaterial'; import { getBuffer } from '../../../geom/buffer/'; import { generateLightingUniforms } from '../../../util/shaderModule'; diff --git a/src/layer/tile/vector_tile_mesh.js b/src/layer/tile/vector_tile_mesh.js index fcb35a575e..ae1687d89b 100644 --- a/src/layer/tile/vector_tile_mesh.js +++ b/src/layer/tile/vector_tile_mesh.js @@ -29,15 +29,15 @@ export default class VectorTileMesh { this._createMesh(data); } _createMesh(data) { - const layerData = data.layerData; - if (this.layer.get('type') === 'point') { - this.layer.shape = this.layer._getShape(layerData); - } - this.mesh = getRender(this.layer.get('type'), this.layer.shape)(null, this.layer, data.buffer); - // this._setTilePositon(); + this.mesh = getRender(this.layer.get('type'), data.shape)(null, this.layer, data.buffer); if (this.mesh.type !== 'composer') { // 热力图的情况 this.mesh.onBeforeRender = renderer => { this._renderMask(renderer); + const zoom = this.layer.scene.getZoom(); + updateObjecteUniform(this._object3D, { + u_time: this.layer.scene._engine.clock.getElapsedTime(), + u_zoom: zoom + }); }; this.mesh.onAfterRender = renderer => { const context = renderer.context; @@ -55,9 +55,9 @@ export default class VectorTileMesh { } _renderMask(renderer) { - // if (this.layer.get('layerType') === 'point') { // 点图层目前不需要mask - // return; - // } + if (this.layer.get('layerType') === 'point') { // 点图层目前不需要mask + return; + } const context = renderer.context; renderer.autoClear = false; renderer.clearDepth(); @@ -79,16 +79,6 @@ export default class VectorTileMesh { context.stencilFunc(context.EQUAL, 1, 0xffffffff); // draw if == 1 context.stencilOp(context.KEEP, context.KEEP, context.KEEP); } - _setTilePositon() { - const tr = this._tileLnglatBounds.getNorthWest(); - const zoom = this.layer.scene.getZoom(); - // const centerPoint = this.layer.scene.crs.lngLatToPoint(tr, 20); - const position = aProjectFlat([ tr.lng, tr.lat ]); - // this.mesh.position.x = position.x; - // this.mesh.position.y = position.y; - // this.mesh.scale.x = 2 << (20 - this._tile[2]); - // this.mesh.scale.y = 2 << (20 - this._tile[2]); - } _tileMaskMesh() { const tilebound = this._tileBounds; const bl = [ tilebound.getBottomLeft().x, tilebound.getBottomLeft().y, 0 ]; diff --git a/src/source/parser/json.js b/src/source/parser/json.js index 2f0f8fb029..d24d324aa1 100644 --- a/src/source/parser/json.js +++ b/src/source/parser/json.js @@ -1,5 +1,6 @@ import rewind from '@mapbox/geojson-rewind'; export default function json(data, cfg) { + const { x, y, x1, y1, coordinates } = cfg; const resultdata = []; data.forEach((col, featureIndex) => { @@ -11,11 +12,10 @@ export default function json(data, cfg) { if (coordinates) { const geometry = { type: 'Polygon', - coordinates: col[coordinates] + coordinates: [ ...col[coordinates] ] }; rewind(geometry, true); coords = geometry.coordinates; - delete col[coordinates]; } col._id = featureIndex + 1; diff --git a/src/source/parser/mvt.js b/src/source/parser/mvt.js index 94039416c8..a8976fa960 100644 --- a/src/source/parser/mvt.js +++ b/src/source/parser/mvt.js @@ -14,7 +14,6 @@ export default function mvt(data, cfg) { const geofeature = feature.toGeoJSON(cfg.tile[0], cfg.tile[1], cfg.tile[2]); features.push(geofeature); } - // console.log(features); const geodata = { type: 'FeatureCollection', features diff --git a/src/source/parser/vector.js b/src/source/parser/vector.js index 62da3f0552..e74cd363a6 100644 --- a/src/source/parser/vector.js +++ b/src/source/parser/vector.js @@ -13,7 +13,7 @@ export default function vector(data, cfg) { return [ x1, -y2, 0 ]; }); } - + let index = 0; for (let i = 0; i < data.length; i++) { const feature = data.feature(i); const coords = feature.loadGeometry(); @@ -23,7 +23,7 @@ export default function vector(data, cfg) { const value = properties[cfg.idField]; id = djb2hash(value) % 1000019; featureKeys[id] = { - index: i++, + index, idField: value }; } @@ -32,6 +32,7 @@ export default function vector(data, cfg) { const geo = geocoords[j].map(coord => { return covertP20(coord); }); + index++; resultdata.push({ ...properties, _id: feature.id || id, diff --git a/src/util/shaderModule.js b/src/util/shaderModule.js index a4078be0bd..0f4c363b61 100644 --- a/src/util/shaderModule.js +++ b/src/util/shaderModule.js @@ -10,7 +10,8 @@ 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 globalDefaultAttribute = 'attribute float pickingId;\n varying vec4 worldId;\n'; +const globalDefaultAttribute = 'attribute float pickingId;\n #ifdef PICK \n varying vec4 worldId; \n #endif \n'; +const globalFSDefaultAttribute = '#ifdef PICK \n varying vec4 worldId; \n #endif \n'; const globalDefaultInclude = '#pragma include "pick_color"\n'; const includeRegExp = /#pragma include (["^+"]?["\ "[a-zA-Z_0-9](.*)"]*?)/g; const uniformRegExp = /uniform\s+(bool|float|int|vec2|vec3|vec4|ivec2|ivec3|ivec4|mat2|mat3|mat4|sampler2D|samplerCube)\s+([\s\S]*?);/g; @@ -137,9 +138,10 @@ export function getModule(moduleName) { } let rawVS = rawContentCache[moduleName][SHADER_TYPE.VS]; - const rawFS = rawContentCache[moduleName][SHADER_TYPE.FS]; + let rawFS = rawContentCache[moduleName][SHADER_TYPE.FS]; rawVS = globalDefaultAttribute + globalDefaultInclude + rawVS; + rawFS = globalFSDefaultAttribute + rawFS; const { content: vs, includeList: vsIncludeList } = processModule(rawVS, [], SHADER_TYPE.VS); let { content: fs, includeList: fsIncludeList } = processModule(rawFS, [], SHADER_TYPE.FS); diff --git a/src/worker/workerTile.js b/src/worker/workerTile.js index 1b6a591445..6b922e8d41 100644 --- a/src/worker/workerTile.js +++ b/src/worker/workerTile.js @@ -1,6 +1,8 @@ import TileMapping from '../core/controller/tile_mapping'; import { getBuffer } from '../geom/buffer/index'; import Source from '../core/source'; +import Global from '../global'; +const { pointShape } = Global; export default class WorkerTile { constructor(params) { @@ -33,6 +35,9 @@ export default class WorkerTile { for (let i = 0; i < sourceStyle[sourcelayer].length; i++) { const style = sourceStyle[sourcelayer][i]; const tileMapping = new TileMapping(tileSource2, style); + if (style.type === 'point') { + style.shape = this._getPointShape(tileMapping); + } const geometryBuffer = getBuffer(style.type, style.shape); const buffer = new geometryBuffer({ layerData: tileMapping.layerData, @@ -45,6 +50,7 @@ export default class WorkerTile { }, // layerData: tileMapping.layerData, // sourceData: tileSource.data, + shape: style.shape, layerId: style.layerId, sourcelayer, tileId: this.tileID @@ -66,4 +72,28 @@ export default class WorkerTile { } return sourceStyles; } + _getPointShape(tileMapping) { + let shape = null; + if (!tileMapping.layerData[0].hasOwnProperty('shape')) { + return 'normal'; + } + for (let i = 0; i < tileMapping.layerData.length; i++) { + shape = tileMapping.layerData[i].shape; + if (shape !== undefined) { + break; + } + } + + // 2D circle 特殊处理 + if (pointShape['2d'].indexOf(shape) !== -1) { + return 'fill'; + } else if (pointShape['3d'].indexOf(shape) !== -1) { + return 'extrude'; + } + // TODO 图片支持 + // else if (this.scene.image.imagesIds.indexOf(shape) !== -1) { + // return 'image'; + // } + return 'text'; + } } diff --git a/src/worker/worker_pool.1.js b/src/worker/worker_pool.1.js deleted file mode 100644 index b051f02749..0000000000 --- a/src/worker/worker_pool.1.js +++ /dev/null @@ -1,54 +0,0 @@ -import WebWorker from './web_worker'; -export default class WorkerPool { - constructor(workerCount) { - this.workerCount = workerCount || Math.max(Math.floor(window.navigator.hardwareConcurrency / 2), 1); - this.workers = []; // worker线程池 - this.workerQueue = []; // 任务队列 - this._initWorker(); // 初始化线程池 - } - _initWorker() { - while (this.workers.length < this.workerCount) { - this.workers.push(new WebWorker()); - } - } - runTask(payload) { - return new Promise((resolve, reject) => { - if (this.workers.length > 0) { - const worker = this.workers.shift(); // 从线程池取出一个worker - worker.postMessage(payload); // 向线程发送数据 - const workerCallback = e => { - resolve(e.data); // 成功则返回数据 - // 移除事件监听 - worker.removeEventListener('message', workerCallback); - // 重新放回线程池 - this.workers.push(worker); - // 如果任务队列的数据还有则从任务队列继续取数据执行任务 - if (this.workerQueue.length > 0) { - const queueData = this.workerQueue.shift(); - this.runTask(queueData.payload).then(data => { - queueData.resolve(data); - }); - } - }; - // 监听worker事件 - worker.addEventListener('message', workerCallback); - worker.addEventListener('error', e => { - reject('filename:' + e.filename + '\nmessage:' + e.message + '\nlineno:' + e.lineno); - }); - } else { - // 如果线程池都被占用，则将数据丢入任务队列，并保存对应的resolve和reject - this.workerQueue.push({ - payload, - resolve, - reject - }); - } - }); - } - release() { - this.workers.forEach(worker => { - worker.terminate(); - }); - } -} -