Give up on gradient blending in trajectories for now

Author: felixpalmer

modules/carto/src/layers/edged-layers.ts

@@ -23,15 +23,18 @@ function patchShaders(shaders: any, outline: string): void {
   // Interpolate colors between vertices
   shaders.inject = {
     ...shaders.inject,
-    'vs:#decl': `${shaders.inject['vs:#decl']}in vec4 instanceEndColors;`
+    'vs:#decl': `${shaders.inject['vs:#decl']}\nin vec4 instanceEndColors;\nout vec4 vEndColor;`,
+    'fs:#decl': `${shaders.inject['fs:#decl']}\nin vec4 vEndColor;`,
+    'vs:#main-end': `${shaders.inject['vs:#main-end']}\nvEndColor = vec4(instanceEndColors.rgb, instanceEndColors.a * layer.opacity);`
   };
-  shaders.vs = shaders.vs.replace(
+
+  shaders.fs = shaders.fs.replace(
     /* glsl */ `
-'vColor = vec4(instanceColors.rgb, instanceColors.a * layer.opacity);
+  fragColor = vColor;
 `,
     /* glsl */ `
-vec4 color = mix(instanceColors, instanceEndColors, positions.x);
-vColor = vec4(color.rgb, color.a * layer.opacity);
+  float f = clamp(vPathPosition.y, 0.0, 1.0);
+  fragColor = mix(vColor, vEndColor, f);
 `
   );
 
@@ -49,9 +52,11 @@ function patchInstanceColors(attributeManager: AttributeManager): void {
   attributeManager.addInstanced({
     instanceColors: {
       ...instanceColors.settings,
+      // Sort of works, but end caps introduce aritfacts
+      vertexOffset: 1,
       shaderAttributes: {
-        instanceColors: {vertexOffset: 0},
-        instanceEndColors: {vertexOffset: 1}
+        instanceColors: {vertexOffset: 1},
+        instanceEndColors: {vertexOffset: 2}
       }
     }
   });

modules/carto/src/layers/trajectory-tile-layer.ts

@@ -169,8 +169,8 @@ export default class TrajectoryTileLayer<
       _subLayerProps: {
         ...props._subLayerProps,
         linestrings: {
-            type: EdgedTripsLayer,
-            getTimestamps: (d: any, info: any) => info.index,
+            //type: EdgedTripsLayer,
+            type: TripsLayer,
             currentTime: showTrips ? normalizedCurrentTime : totalTimeSpan,
             trailLength: showTrips ? props.trailLength : totalTimeSpan,
             parameters: {depthTest: false},

test/apps/carto-trajectories/app.tsx

@@ -6,7 +6,7 @@ import {MapboxOverlay} from '@deck.gl/mapbox';
 
 import {DeckProps } from '@deck.gl/core';
 import {trajectoryQuerySource, trajectoryTableSource} from '@carto/api-client';
-import {TrajectoryTileLayer, colorContinuous} from '@deck.gl/carto';
+import {TrajectoryTileLayer, colorCategories, colorContinuous} from '@deck.gl/carto';
 import {normalizeTimestamp} from '@deck.gl/carto/layers/trajectory-utils';
 
 import RangeInput from './range-input';
@@ -296,16 +296,38 @@ export default function App() {
       data: dataSource,
       renderMode: showTrips ? 'trips' : 'paths',
       uniqueIdProperty: 'trajectoryId', // TODO internalize this
-      // Example: Use speed-based coloring with CARTO palette
+
+      // Color entire line by trajectoryId
+      //_getLineColor: colorContinuous({
+      //  attr: 'trajectoryId',
+      //  domain: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
+      //  colors: palette
+      //}),
+      getLineColor: (d: any, info: any) => {
+        //return [255 * Math.random(), 255 * Math.random(), 255 * Math.random(), 255];
+        const { data, index } = info;
+        const nVertices = data.startIndices[index + 1] - data.startIndices[index];
+        const colors = new Array(nVertices).fill(0).map((_, i) => {
+          return [255 * Math.random(), 255 * Math.random(), 255 * Math.random(), 255];
+        });
+
+        // Return an array to color each vertex
+        return colors;
+      },
+
+
+      // Alternative API, dedicated accessor: Color each vertex by speed
       getVertexColor: colorContinuous({
         attr: (d: any) => d.speed,
         domain: [5, 7, 9, 11, 13, 15],
         colors: palette
       }),
 
       // Alternative examples:
-      // getVertexColor: ({speed}) => speed > 10 ? [255, 0, 0, 255] : [0, 255, 0, 255], // Red/Green based on speed
-      // getVertexColor: ({speed}, {index}) => [Math.min(255, speed * 20), 100, 200, 255], // Speed-based red intensity
+      // getVertexColor: (d: any) => {
+
+      //  return d.speed > 10 ? [255, 0, 0, 255] : [0, 255, 0, 255]; // Red/Green based on speed
+      //},
       currentTime,
       trailLength,
       getWidth: lineWidth,