diff --git a/demos/01_point_distribute.html b/demos/01_point_distribute.html index 2d5267344c..140377a278 100644 --- a/demos/01_point_distribute.html +++ b/demos/01_point_distribute.html @@ -29,7 +29,7 @@ const scene = new L7.Scene({ window.scene = scene; scene.on('loaded', () => { // ./data/mUQPWCYaxOfiSznuANvG.txt - $.get('./data/00.csv', data => { + $.get('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt', data => { scene.PointLayer({ zIndex: 2 }) diff --git a/demos/great_circle.html b/demos/great_circle.html index 41c8cb4646..23defa6d8b 100644 --- a/demos/great_circle.html +++ b/demos/great_circle.html @@ -33,7 +33,8 @@ scene.on('loaded', () => { $.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', data => { scene.LineLayer({ - zIndex: 2 + zIndex: 2, + blending:'additive' }) .source(data, { parser:{ @@ -50,6 +51,7 @@ scene.on('loaded', () => { .color('rgb(13,64,140)') .style({ opacity:1., + blending:'additive' }) .animate({ enable: true, diff --git a/package.json b/package.json index 017a9f20b8..f372f7ef5f 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "1.3.5-beta.1", + "version": "1.3.5-beta.2", "description": "Large-scale WebGL-powered Geospatial Data Visualization", "main": "build/L7.js", "homepage": "https://github.com/antvis/l7", diff --git a/src/geom/material/material.js b/src/geom/material/material.js index e82331cf88..6caac6357e 100644 --- a/src/geom/material/material.js +++ b/src/geom/material/material.js @@ -1,13 +1,6 @@ import * as THREE from '../../core/three'; - - export default class Material extends THREE.ShaderMaterial { - static blendingEnum = { - normal: 'NormalBlending', - additive: 'AdditiveBlending', - subtractive: 'SubtractiveBlending' - } setUniformsValue(name, value) { if (!this.uniforms[name]) { return; } this.uniforms[name].value = value; @@ -34,6 +27,12 @@ export default class Material extends THREE.ShaderMaterial { } } setBending(type) { - this.blending = THREE[this.blendingEnum[type]] || THREE.NormalBlending; + this.blending = THREE[Material.blendingEnum[type]] || THREE.NormalBlending; } } +Material.blendingEnum = { + normal: 'NormalBlending', + additive: 'AdditiveBlending', + subtractive: 'SubtractiveBlending' +}; + diff --git a/src/geom/material/normal_point.js b/src/geom/material/normal_point.js index a2ded73e5c..0c4557e2a2 100644 --- a/src/geom/material/normal_point.js +++ b/src/geom/material/normal_point.js @@ -27,7 +27,8 @@ export default class PointMaterial extends Material { this.vertexShader = vs; this.fragmentShader = fs; this.transparent = true; - - this.blending = THREE.AdditiveBlending; + if (_uniforms) { + this.blending = THREE[Material.blendingEnum[_uniforms.blending]]; + } } } diff --git a/src/geom/material/pointMaterial.js b/src/geom/material/pointMaterial.js index 7627a82c1a..10d88507fd 100644 --- a/src/geom/material/pointMaterial.js +++ b/src/geom/material/pointMaterial.js @@ -27,6 +27,7 @@ export default class PointMaterial extends Material { this.vertexShader = vs; this.fragmentShader = fs; this.transparent = true; + this.blending = THREE[Material.blendingEnum[_uniforms.blending]]; if (!this.uniforms.shape) { this.blending = THREE.AdditiveBlending; } if (this.uniforms.u_texture) { this.defines.TEXCOORD_0 = true; diff --git a/src/layer/render/line/drawArc.js b/src/layer/render/line/drawArc.js index 8ab9ba2ae4..0ef665d86a 100644 --- a/src/layer/render/line/drawArc.js +++ b/src/layer/render/line/drawArc.js @@ -26,11 +26,11 @@ export default function DrawArcLine(layerData, layer, buffer) { u_opacity: style.opacity, u_zoom: layer.scene.getZoom(), activeColor: activeOption.fill, - shapeType: layer.shapeType + shapeType: layer.shapeType, + blending: style.blending }, { SHAPE: false }); - const animateOptions = layer.get('animateOptions'); if (animateOptions.enable) { layer.scene.startAnimate(); diff --git a/src/layer/render/line/drawMeshLine.js b/src/layer/render/line/drawMeshLine.js index ffa8dc42de..f8f8abad4a 100644 --- a/src/layer/render/line/drawMeshLine.js +++ b/src/layer/render/line/drawMeshLine.js @@ -40,15 +40,14 @@ export default function DrawLine(layerData, layer, buffer) { u_dash_ratio: style.dashRatio, activeColor: activeOption.fill, u_pattern_spacing: style.patternSpacing || 0, - u_texture: hasPattern ? layer.scene.image.texture : null + u_texture: hasPattern ? layer.scene.image.texture : null, + blending: style.blending }, { SHAPE: false, ANIMATE: false, DASHLINE: style.lineType === 'dash', TEXTURE: hasPattern }); - lineMaterial.setBending(style.blending); - const lineMesh = new THREE.Mesh(geometry, lineMaterial); if (animateOptions.enable) { layer.scene.startAnimate(); diff --git a/src/layer/render/point/drawFill.js b/src/layer/render/point/drawFill.js index 4bd5583095..737b87a072 100644 --- a/src/layer/render/point/drawFill.js +++ b/src/layer/render/point/drawFill.js @@ -26,6 +26,7 @@ export default function DrawFill(layerData, layer) { u_opacity: style.opacity, u_activeColor: activeOption.fill, u_zoom: layer.scene.getZoom(), + blending: style.blending, ...generateLightingUniforms(style.lights) }, { SHAPE: true, diff --git a/src/layer/render/point/drawNormal.js b/src/layer/render/point/drawNormal.js index 1f5ade88be..8708e7ddf1 100644 --- a/src/layer/render/point/drawNormal.js +++ b/src/layer/render/point/drawNormal.js @@ -17,7 +17,8 @@ export default function DrawNormal(layerData, layer) { geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1)); const material = new PointMaterial({ u_opacity: opacity, - u_activeColor: activeOption.fill + u_activeColor: activeOption.fill, + blending: style.blending }, { }, style); const strokeMesh = new THREE.Points(geometry, material);