Add rgba support for multiple layers (visgl#161)

docs/attribute-management.md

@@ -99,13 +99,14 @@ Takes a map of attribute descriptor objects
 * attribute.instanced=0 - is this is an instanced attribute (a.k.a. divisor)
 * attribute.noAlloc=false - if this attribute should not be allocated
 
-```
-attributeManager.add({
-  positions: {size: 2, update: calculatePositions}
-  colors: {size: 3, update: calculateColors}
-});
-```
-
+    attributeManager.add({
+      positions: {size: 2, update: calculatePositions}
+      colors: {
+        size: 4,
+        type: GL.UNSIGNED_BYTE,
+        update: calculateColors
+      }
+    });
 
 ### AttributeManager.setLogFunctions
 

docs/layers/arc-layer.md

@@ -31,14 +31,16 @@ Method called to retrieve the target position of each object.
 
 - Default: `object => object.color`
 
-Method called to determine the color of the source.
+Method called to determine the rgba color of the source. If the alpha parameter
+is not provided, it will be set to `255`.
 
-If the method does not return a value for the given object, fallback to `[0, 0, 255]`.
+If the method does not return a value for the given object, fallback to `[0, 0, 255, 255]`.
 
 ##### `getTargetColor` (Function, optional)
 
 - Default `object => object.color`
 
-Method called to determine the color of the source.
+Method called to determine the rgba color of the source. If the alpha parameter
+is not provided, it will be set to `255`.
 
-If the method does not return a value for the given object, fallback to `[0, 0, 255]`.
+If the method does not return a value for the given object, fallback to `[0, 0, 255, 255]`.

docs/layers/choropleth-layer.md

@@ -27,8 +27,10 @@ Provides selected choropleth properties along with mouse event when the chorople
 
 By supplying a GeoJson `FeatureCollection` you can add multiple polygons.
 Each Feature has an optional "properties" object. The layer will look for an
-optional property "color", which is expected to be a 3 element array of values
-between 0 and 255, representing the RGB values for the color of that `Feature`
+optional property `color`, which is expected to be a 4 element array of values
+between 0 and 255, representing the rgba values for the color of that `Feature`.
+
+If not provided, the default rgba will be `[0, 0, 255, 255]`.
 
 
     {
@@ -48,7 +50,7 @@ between 0 and 255, representing the RGB values for the color of that `Feature`
             ]
           },
           "properties": {
-            "color": [255, 0, 0],
+            "color": [255, 0, 0, 255],
             "prop1": 0.0
           }
         },
@@ -61,7 +63,7 @@ between 0 and 255, representing the RGB values for the color of that `Feature`
             ]
           },
           "properties": {
-            "color": [255, 255, 0],
+            "color": [255, 255, 0, 255],
             "prop1": {"application": "defined"}
           }
         }

docs/layers/line-layer.md

@@ -31,6 +31,8 @@ Method called to retrieve the target position of each object.
 
 - Default: `object => object.color`
 
-Method called to determine the color of the source.
+Method called to determine the rgba color of the source. If the alpha parameter
+is not provided, it will be set to `255`.
 
-If the method does not return a value for the given object, fallback to `[0, 0, 255]`.
+If the method does not return a value for the given object, fallback to
+`[0, 0, 255, 255]`.

docs/layers/scatterplot-layer.md

@@ -42,6 +42,8 @@ Method called to retrieve the radius of each object.
 
 - Default: `object => object.color`
 
-Method called to retrieve the color of each object.
+Method called to retrieve the rgba color of each object. If the alpha parameter
+is not provided, it will be set to `255`.
 
-Fallback to `[255, 0, 255]` if the object doesn't have a color property
+If the method does not return a value for the given object, fallback to
+`[255, 0, 255, 255]`.

src/layers/core/arc-layer/arc-layer-vertex.glsl

@@ -26,8 +26,8 @@
 const float N = 49.0;
 
 attribute vec3 positions;
-attribute vec3 instanceSourceColors;
-attribute vec3 instanceTargetColors;
+attribute vec4 instanceSourceColors;
+attribute vec4 instanceTargetColors;
 attribute vec4 instancePositions;
 attribute vec3 instancePickingColors;
 
@@ -63,7 +63,11 @@ void main(void) {
 
   gl_Position = project(vec4(p, 1.0));
 
-  vec4 color = vec4(mix(instanceSourceColors, instanceTargetColors, segmentRatio) / 255.0, opacity);
-  vec4 pickingColor = vec4(instancePickingColors / 255.0, 1.);
-  vColor = mix(color, pickingColor, renderPickingBuffer);
+  vec4 color = mix(instanceSourceColors, instanceTargetColors, segmentRatio) / 255.;
+
+  vColor = mix(
+    vec4(color.rgb, color.a * opacity),
+    vec4(instancePickingColors / 255., 1.),
+    renderPickingBuffer
+  );
 }

src/layers/core/arc-layer/arc-layer.js

@@ -24,7 +24,7 @@ import {GL, Model, Geometry} from 'luma.gl';
 
 const glslify = require('glslify');
 
-const DEFAULT_COLOR = [0, 0, 255];
+const DEFAULT_COLOR = [0, 0, 255, 255];
 
 const defaultGetSourcePosition = x => x.sourcePosition;
 const defaultGetTargetPosition = x => x.targetPosition;
@@ -66,8 +66,16 @@ export default class ArcLayer extends Layer {
     const {attributeManager} = this.state;
     attributeManager.addInstanced({
       instancePositions: {size: 4, update: this.calculateInstancePositions},
-      instanceSourceColors: {size: 3, update: this.calculateInstanceSourceColors},
-      instanceTargetColors: {size: 3, update: this.calculateInstanceTargetColors}
+      instanceSourceColors: {
+        type: GL.UNSIGNED_BYTE,
+        size: 4,
+        update: this.calculateInstanceSourceColors
+      },
+      instanceTargetColors: {
+        type: GL.UNSIGNED_BYTE,
+        size: 4,
+        update: this.calculateInstanceTargetColors
+      }
     });
   }
 
@@ -125,6 +133,7 @@ export default class ArcLayer extends Layer {
       value[i + 0] = color[0];
       value[i + 1] = color[1];
       value[i + 2] = color[2];
+      value[i + 3] = isNaN(color[3]) ? DEFAULT_COLOR[3] : color[3];
       i += size;
     }
   }
@@ -138,6 +147,7 @@ export default class ArcLayer extends Layer {
       value[i + 0] = color[0];
       value[i + 1] = color[1];
       value[i + 2] = color[2];
+      value[i + 3] = isNaN(color[3]) ? DEFAULT_COLOR[3] : color[3];
       i += size;
     }
   }

src/layers/core/choropleth-layer/choropleth-layer-vertex.glsl

@@ -24,7 +24,7 @@
 // #pragma glslify: project = require(../../../../shaderlib/project)
 
 attribute vec3 positions;
-attribute vec3 colors;
+attribute vec4 colors;
 attribute vec3 pickingColors;
 
 uniform float opacity;
@@ -51,8 +51,11 @@ vec4 picking_setNormalAndPickColors(vec4 color, vec3 pickingColor) {
 // }
 
 void main(void) {
+
+  vec4 color = vec4(colors.rgb, colors.a * opacity) / 255.;
+
   picking_setNormalAndPickColors(
-    vec4(colors.rgb / 255., opacity),
+    color,
     pickingColors / 255.
   );
 

src/layers/core/choropleth-layer/choropleth-layer.js

@@ -28,7 +28,7 @@ import earcut from 'earcut';
 import flattenDeep from 'lodash.flattendeep';
 import normalize from 'geojson-normalize';
 
-const DEFAULT_COLOR = [0, 0, 255];
+const DEFAULT_COLOR = [0, 0, 255, 255];
 
 const defaultGetColor = feature => feature.properties.color;
 
@@ -59,7 +59,7 @@ export default class ChoroplethLayer extends Layer {
       positions: {size: 3, update: this.calculatePositions},
       colors: {
         type: GL.UNSIGNED_BYTE,
-        size: 3,
+        size: 4,
         update: this.calculateColors
       },
       // Instanced attributes
@@ -168,6 +168,11 @@ export default class ChoroplethLayer extends Layer {
       (choropleth, choroplethIndex) => {
         const feature = features[choropleth.featureIndex];
         const color = getColor(feature) || DEFAULT_COLOR;
+
+        if (isNaN(color[3])) {
+          color[3] = DEFAULT_COLOR[3];
+        }
+
         return choropleth.map(polygon =>
           polygon.map(vertex => color)
         );

src/layers/core/line-layer/line-layer-vertex.glsl

@@ -24,7 +24,7 @@
 // #pragma glslify: project = require(../../../../shaderlib/project)
 
 attribute vec3 positions;
-attribute vec3 instanceColors;
+attribute vec4 instanceColors;
 attribute vec4 instancePositions;
 attribute vec3 instancePickingColors;
 
@@ -43,7 +43,12 @@ void main(void) {
 
   gl_Position = project(vec4(p, 0., 1.));
 
-  vec4 color = vec4(instanceColors / 255.0, opacity);
-  vec4 pickingColor = vec4(instancePickingColors / 255.0, 1.);
-  vColor = mix(color, pickingColor, renderPickingBuffer);
+  vec4 color = vec4(instanceColors.rgb, instanceColors.a * opacity) / 255.;
+  vec4 pickingColor = vec4(instancePickingColors / 255., 1.);
+
+  vColor = mix(
+    color,
+    pickingColor,
+    renderPickingBuffer
+  );
 }

src/layers/core/line-layer/line-layer.js

@@ -23,7 +23,7 @@ import {GL, Model, Geometry} from 'luma.gl';
 
 const glslify = require('glslify');
 
-const DEFAULT_COLOR = [0, 255, 0];
+const DEFAULT_COLOR = [0, 255, 0, 255];
 
 const defaultGetSourcePosition = x => x.sourcePosition;
 const defaultGetTargetPosition = x => x.targetPosition;
@@ -63,7 +63,11 @@ export default class LineLayer extends Layer {
     const {attributeManager} = this.state;
     attributeManager.addInstanced({
       instancePositions: {size: 4, update: this.calculateInstancePositions},
-      instanceColors: {size: 3, update: this.calculateInstanceColors}
+      instanceColors: {
+        type: GL.UNSIGNED_BYTE,
+        size: 4,
+        update: this.calculateInstanceColors
+      }
     });
   }
 
@@ -118,6 +122,7 @@ export default class LineLayer extends Layer {
       value[i + 0] = color[0];
       value[i + 1] = color[1];
       value[i + 2] = color[2];
+      value[i + 3] = isNaN(color[3]) ? DEFAULT_COLOR[3] : color[3];
       i += size;
     }
   }

src/layers/core/scatterplot-layer/scatterplot-layer-vertex.glsl

@@ -22,7 +22,7 @@
 attribute vec3 positions;
 
 attribute vec4 instancePositions;
-attribute vec3 instanceColors;
+attribute vec4 instanceColors;
 attribute vec3 instancePickingColors;
 
 uniform float opacity;
@@ -37,7 +37,12 @@ void main(void) {
   gl_Position = project(vec4(center, 1.0)) +
                 project(vec4(vertex, 0.0));
 
-  vec4 color = vec4(instanceColors / 255.0, opacity);
-  vec4 pickingColor = vec4(instancePickingColors / 255.0, 1.);
-  vColor = mix(color, pickingColor, renderPickingBuffer);
-}
+  vec4 color = vec4(instanceColors.rgb, instanceColors.a * opacity) / 255.;
+  vec4 pickingColor = vec4(instancePickingColors / 255., 1.);
+
+  vColor = mix(
+    color,
+    pickingColor,
+    renderPickingBuffer
+  );
+}

src/layers/core/scatterplot-layer/scatterplot-layer.js

@@ -23,7 +23,7 @@ import {GL, Model, Geometry} from 'luma.gl';
 
 const glslify = require('glslify');
 
-const DEFAULT_COLOR = [255, 0, 255];
+const DEFAULT_COLOR = [255, 0, 255, 255];
 
 const defaultGetPosition = x => x.position;
 const defaultGetRadius = x => x.radius;
@@ -71,7 +71,7 @@ export default class ScatterplotLayer extends Layer {
       instancePositions: {size: 4, update: this.calculateInstancePositions},
       instanceColors: {
         type: GL.UNSIGNED_BYTE,
-        size: 3,
+        size: 4,
         update: this.calculateInstanceColors
       }
     });
@@ -149,6 +149,7 @@ export default class ScatterplotLayer extends Layer {
       value[i + 0] = color[0] || 0;
       value[i + 1] = color[1] || 0;
       value[i + 2] = color[2] || 0;
+      value[i + 3] = isNaN(color[3]) ? DEFAULT_COLOR[3] : color[3];
       i += size;
     }
   }

src/layers/core/screen-grid-layer/screen-grid-layer-vertex.glsl

@@ -44,9 +44,9 @@ void main(void) {
   vec4 color = mix(minColor, maxColor, instanceCount / maxCount) / 255.;
 
   vColor = mix(
-  	vec4(color.xyz, color.w * opacity),
-  	vec4(instancePickingColors / 255., 1.),
-  	renderPickingBuffer
+    vec4(color.rgb, color.a * opacity),
+    vec4(instancePickingColors / 255., 1.),
+    renderPickingBuffer
   );
 
   gl_Position = vec4(instancePositions + vertices * cellScale, 1.);

src/layers/fp64/arc-layer/arc-layer-vertex.glsl

@@ -23,8 +23,8 @@
 const float N = 49.0;
 
 attribute vec3 positions;
-attribute vec3 instanceSourceColors;
-attribute vec3 instanceTargetColors;
+attribute vec4 instanceSourceColors;
+attribute vec4 instanceTargetColors;
 attribute vec3 instancePickingColors;
 attribute vec4 instanceSourcePositionsFP64;
 attribute vec4 instanceTargetPositionsFP64;
@@ -71,7 +71,11 @@ void main(void) {
 
   gl_Position = project_to_clipspace_fp64(vertex_pos_modelspace);
 
-  vec4 color = vec4(mix(instanceSourceColors, instanceTargetColors, segmentRatio) / 255.0, opacity);
-  vec4 pickingColor = vec4(instancePickingColors / 255.0, 1.);
-  vColor = mix(color, pickingColor, renderPickingBuffer);
+  vec4 color = mix(instanceSourceColors, instanceTargetColors, segmentRatio) / 255.;
+
+  vColor = mix(
+    vec4(color.rgb, color.a * opacity),
+    vec4(instancePickingColors / 255., 1.),
+    renderPickingBuffer
+  );
 }