fix blending

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
     })

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,

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",

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

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

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;

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();

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();

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,

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);