How to handle line joints in gradient lines?

[lianzhao]

I want to draw a gradient line like this

Here's my code so far

class MyExtension extends LayerExtension {
  public getShaders = () => {
    return {
      inject: {
        "fs:DECKGL_FILTER_COLOR": `
          color = vec4(1,0,0,-geometry.uv.x * 0.5);
        `,
      },
    };
  };
}


const linesLayer = new GeoJsonLayer({
      data: myLInes,
     // ...
      extensions: [new MyExtension({})],
    });

It works well for the straight lines, but looks wired on the line joints...

How to handle the joints properly?

[AdriSolid]

An additive blending could work:

parameters: {
   blendFunc: [0x0302, 0x0304], // GL.SRC_ALPHA, GL.DST_ALPHA
   blendEquation: 0x8006 // GL.FUNC_ADD
}

So you get something like:

[lianzhao]

Thank you! Blending works for me!

[sorodrigo]

Is there a way to achieve this gradient blur in both sides of the line? Currently it only displays on the right side

[sorodrigo]

I found a way to do that:

The changes I did were:

class GlowExtension extends LayerExtension {
  getShaders() {
    return {
      inject: {
        'fs:DECKGL_FILTER_COLOR': `
          // Use the distance to the center to create a glow effect
          // The 0.5 is the center of the geometry cause it goes from 0 to 1
          // we want to make the glow effect stronger the closer we are to the center so we use abs(x - 0.5)
          float distanceToCenter = abs(geometry.uv.x - 0.5);

          // and we want a bigger area than just the center so we exclude the range from 0.25 to 0.75
          float alpha = distanceToCenter < 0.25 ? 1.0 : 1.0 - distanceToCenter;

          // Set the color with red and use the calculated alpha
          color = vec4(color.r, color.g, color.b, alpha);
      `,
      },
    };
  }
}