Pass color coord instead of id

Author: dy

circle-vert.glsl

@@ -2,7 +2,7 @@ precision highp float;
 
 attribute vec2 position, positionFract;
 attribute float size, borderSize;
-attribute float colorId, borderColorId;
+attribute vec2 colorId, borderColorId;
 
 uniform vec2 scale, scaleFract, translate, translateFract;
 uniform float pixelRatio;
@@ -20,6 +20,12 @@ vec2 paletteCoord(float id) {
     (floor(id / paletteSize.x) + .5) / paletteSize.y
   );
 }
+vec2 paletteCoord(vec2 id) {
+  return vec2(
+    (id.x + .5) / paletteSize.x,
+    (id.y + .5) / paletteSize.y
+  );
+}
 
 void main() {
   vec4 color = texture2D(palette, paletteCoord(colorId));

index.js

@@ -165,13 +165,13 @@ function Scatter (regl, options) {
 			} : {constant: [Math.round(prop.borderSize * 255 / maxSize)]},
 			colorId: (ctx, prop) => prop.color.length ? {
 				buffer: colorBuffer,
-				stride: 4,
+				stride: 8,
 				offset: 0
 			} : {constant: [prop.color]},
 			borderColorId: (ctx, prop) => prop.borderColor.length ? {
 				buffer: colorBuffer,
-				stride: 4,
-				offset: 2
+				stride: 8,
+				offset: 4
 			} : {constant: [prop.borderColor]}
 		},
 
@@ -443,7 +443,9 @@ function Scatter (regl, options) {
 		scatter2d.groups = groups = options.map((options, i) => {
 			let group = groups[i]
 
-			if (!options) return group
+			if (options === undefined) return group
+
+			if (options === null) options = { positions: null }
 			else if (typeof options === 'function') options = {after: options}
 			else if (typeof options[0] === 'number') options = {positions: options}
 
@@ -461,6 +463,9 @@ function Scatter (regl, options) {
 				viewport: 'viewport viewBox',
 				opacity: 'opacity alpha'
 			})
+
+			if (options.positions === null) options.positions = []
+
 			if (!group) {
 				groups[i] = group = {
 					id: i,
@@ -702,22 +707,31 @@ function Scatter (regl, options) {
 		}
 
 		if (color) {
-			let colorData = new Uint16Array(len * 2)
+			let colorData = new Uint16Array(len * 4)
 
 			groups.forEach((group, i) => {
 				if (!group) return
 				let {count, offset, color, borderColor} = group
 				if (!count) return
 
 				if (color.length || borderColor.length) {
-					let colorIds = new Uint16Array(count*2)
+					let colorIds = new Uint16Array(count * 4)
 					for (let i = 0; i < count; i++) {
-						colorIds[i*2] = color[i] == null ? color : color[i]
-						colorIds[i*2 + 1] = borderColor[i] == null ? borderColor : borderColor[i]
+						if (color[i] != null) {
+							colorIds[i*4] = color[i] % maxColors
+							colorIds[i*4 + 1] = Math.floor(color[i] / maxColors)
+						}
+						if (borderColor[i] != null) {
+							colorIds[i*4 + 2] = borderColor[i] % maxColors
+							colorIds[i*4 + 3] = Math.floor(borderColor[i] / maxColors)
+						}
 					}
-					colorData.set(colorIds, offset * 2)
+
+					colorData.set(colorIds, offset * 4)
 				}
 			})
+
+
 			colorBuffer(colorData)
 		}
 	}

marker-vert.glsl

@@ -2,7 +2,7 @@ precision mediump float;
 
 attribute vec2 position, positionFract;
 attribute float size, borderSize;
-attribute float colorId, borderColorId;
+attribute vec2 colorId, borderColorId;
 
 uniform vec2 scale, scaleFract, translate, translateFract, paletteSize;
 uniform float pixelRatio;
@@ -21,6 +21,12 @@ vec2 paletteCoord(float id) {
     (floor(id / paletteSize.x) + .5) / paletteSize.y
   );
 }
+vec2 paletteCoord(vec2 id) {
+  return vec2(
+    (id.x + .5) / paletteSize.x,
+    (id.y + .5) / paletteSize.y
+  );
+}
 
 void main() {
   vec4 color = texture2D(palette, paletteCoord(colorId));

test.js

@@ -98,8 +98,10 @@ scatter(Array(passes).fill(null).map((x, i) => {
 
 		size:  Array(pos.length).fill(100).map(x => Math.random() * 5 + 5),
 		// size: 10,
+
 		color: Array(pos.length).fill(0).map(() => colors[Math.floor(Math.random() * colors.length)]),
-		// color: 'rgba(0, 0, 0, .5)',
+		// color: 'rgba(0, 0, 255, .5)',
+		// borderColor: 'rgba(255, 0, 0, .5)',
 
 		// marker: markers[i],
 		// marker: Array(pos.length).fill(0).map(() => markers[Math.floor(Math.random() * markers.length)]),