Variable width path

Here is a working fiddle with an example of multi-coloured paths, where each coordinate has a different colour, and each segment of the path gets two colours.

Here’s a snippet of the code

class MultiColouredPathLayer extends deck.PathLayer {
  
    initializeState() {
      super.initializeState();           
      this.state.attributeManager.addInstanced({
        colors: {
          size: this.props.colorFormat.length,
          vertexOffset: 0,
          type: 0x1401,  // UNSIGNED_BYTE
          normalized: true,
          accessor: 'getColor',
          transition: ATTRIBUTE_TRANSITION,
          defaultValue: DEFAULT_COLOR,
          shaderAttributes: {
            instanceFirstColour: {
              vertexOffset: 0
            },
            instanceLastColour: {
              vertexOffset: 1
            }
          }
        }
      });
    }
  
    getShaders() {
      return {
        ...super.getShaders(),
        inject: {
          'vs:#decl': `          
          attribute vec4 instanceFirstColour;
          attribute vec4 instanceLastColour; 
          
          varying vec4 firstColour;
          varying vec4 lastColour;
          `,
          'vs:#main-end':`
          firstColour = vec4( instanceFirstColour.rgb, instanceFirstColour.a * opacity );
          lastColour = vec4( instanceLastColour.rgb, instanceLastColour.a * opacity );

          vColor = mix( firstColour, lastColour, positions.x );          
          `
        }
      }
    };
  }

I’ve tried to extend this where each coordinate also gets its own width

widths: {
          size: 1,
          vertexOffset: 0,
          type: 0x140a, // DOUBLE
          //normalized: true,
          accessor: 'getWidth',
          //transition: ATTRIBUTE_TRANSITION,
          defaultValue: 1,
          shaderAttributes: {
            instanceFirstWidth: {
              vertexOffset: 0
            },
            instanceLastWidth: {
              vertexOffset: 1
            }
          }
        }

but I can’t see how to inject into the vertex shader these Instance Width values so the vec2 widthPixels variable uses them.

So my question is, is it possible to have a segment where either end has a different width, and if so, how do I inject these values into the shader?

[Pessimistress]

This issue can serve as the feature request.

[Pessimistress]

For loops you need to repeat two vertices’ worth of colors/widths to match the internal positions attribute structure:

path: [
        [-0.3,0.3],    // top-left
        [0.3,0.3],     // top-right
        [0.3,-0.3],    // bottom-right
        [-0.3,-0.3],    // bottom-left
        [-0.3,0.3],
      ],
colour: [
        [255,0,0,255],  // Red
        [0,255,0,255],  // Green
        [0,0,255,255],  // Blue
        [0,0,0,255],     // Black
        [255,0,0,255],
        [0,255,0,255]
      ],
width: [
        2000,
        4000,
        6000,
        8000,
        2000,
        4000,
      ]

It has to do with each join requiring 3 vertices (before, current, after) to render correctly.