feat: add option to change behaviour of point classes

src/data/GraphPoints.ts

@@ -1,11 +1,21 @@
 import PicoGL, {App, Framebuffer, Texture} from 'picogl';
 import pointsVS from './shaders/GraphPoints.vs.glsl';
 import pointsFS from './shaders/GraphPoints.fs.glsl';
-import {GLDataTypes} from '../renderer/Renderable';
+import {GLDataTypes, setDrawCallUniforms} from '../renderer/Renderable';
 import {DataMappings, concatenateData, packData} from './DataTools';
 import {vec2, vec3} from 'gl-matrix';
 import {DataTexture} from '../renderer/DataTexture';
 
+export enum ClassModes {
+ NONE,
+ ADD,
+}
+
+export interface PointOptions {
+ positionClassMode?: ClassModes
+ radiusClassMode?: ClassModes
+}
+
 export interface PointData {
  id?: number | string;
  class?: number | string;
@@ -58,13 +68,31 @@ export class GraphPoints extends DataTexture {
  private _pointView: DataView;
  private _pointTexture: Texture;
 
+ private _localUniforms = {
+ uPositionClassMode: ClassModes.ADD,
+ uRadiusClassMode: ClassModes.NONE,
+ };
  private _dataArrayBuffer: Float32Array;
 
  private _length: number = 0;
  public get length(): number {
  return this._length;
  }
 
+ public get positionClassMode(): ClassModes {
+ return this._localUniforms.uPositionClassMode;
+ }
+ public set positionClassMode(value: ClassModes) {
+ this._localUniforms.uPositionClassMode = value;
+ }
+
+ public get radiusClassMode(): ClassModes {
+ return this._localUniforms.uRadiusClassMode;
+ }
+ public set radiusClassMode(value: ClassModes) {
+ this._localUniforms.uRadiusClassMode = value;
+ }
+
  private map: Map<number | string, number>;
  protected dirty: boolean = false;
 
@@ -288,11 +316,13 @@ export class GraphPoints extends DataTexture {
  .depthMask(false);
 
  // create and initiate draw call
- context.createDrawCall(program, pointsVAO)
- .primitive(PicoGL.TRIANGLE_STRIP)
- .texture('uPointTexture', this._pointTexture)
- .texture('uClassTexture', this._classTexture)
- .draw();
+ const drawCall = context.createDrawCall(program, pointsVAO)
+ .primitive(PicoGL.TRIANGLE_STRIP);
+ setDrawCallUniforms(drawCall, Object.assign({}, this._localUniforms, {
+ uPointTexture: this._pointTexture,
+ uClassTexture: this._classTexture,
+ }));
+ drawCall.draw();
 
  // read points texture into stored buffer for point coordinates readback
  this.readTextureAsync(this._frameBuffer.colorAttachments[0]).then(texArrayBuffer => {

src/data/shaders/GraphPoints.fs.glsl

@@ -9,7 +9,11 @@ out vec4 fragColor;
 uniform sampler2D uPointTexture;
 uniform isampler2D uClassTexture;
 
+uniform uint uPositionClassMode;
+uniform uint uRadiusClassMode;
+
 #pragma glslify: import(../../renderer/shaders/valueForIndex.glsl)
+#pragma glslify: import(./classMode.glsl)
 
 void main() {
  vec2 texSize = vec2(textureSize(uPointTexture, 0).xy);
@@ -19,7 +23,13 @@ void main() {
  int i = 0;
  int classIndex = texelFetch(uClassTexture, coords, 0).x;
  while(classIndex != -1 && i++ < 500) {
- fragColor += valueForIndex(uPointTexture, classIndex);
+ vec4 point = valueForIndex(uPointTexture, classIndex);
+ if(uPositionClassMode == MODE_ADD) {
+ fragColor.xyz += point.xyz;
+ }
+ if(uRadiusClassMode == MODE_ADD) {
+ fragColor.w += point.w;
+ }
  classIndex = ivalueForIndex(uClassTexture, classIndex).x;
  }
 }

src/data/shaders/classMode.glsl

@@ -0,0 +1,2 @@
+#define MODE_NONE 0u
+#define MODE_ADD 1u

src/grafer/GraferController.ts

@@ -1,5 +1,5 @@
 import {Viewport, ViewportOptions} from '../renderer/Viewport';
-import {PointDataMappings} from '../data/GraphPoints';
+import {PointOptions, PointDataMappings} from '../data/GraphPoints';
 import {nodes as GraphNodes, edges as GraphEdges, labels as GraphLabels, Graph} from '../graph/mod';
 import {Layer} from '../graph/Layer';
 import {DragTruck} from '../UX/mouse/drag/DragTruck';
@@ -31,6 +31,7 @@ export type GraferLabelsType = keyof typeof GraphLabels.types;
 export interface GraferDataInput<T> {
  data: unknown[],
  mappings?: Partial<T>,
+ options?: PointOptions,
 }
 
 export type GraferPointsData = GraferDataInput<PointDataMappings>;
@@ -413,6 +414,16 @@ export class GraferController extends EventEmitter {
  const mappings = Object.assign({}, pointsRadiusMapping, data.points.mappings);
  this._viewport.graph = new Graph(this._viewport.context, data.points.data, mappings);
  this._viewport.graph.picking = new PickingManager(this._viewport.context, this._viewport.mouseHandler);
+
+ if ('options' in data.points) {
+ const options = data.points.options;
+ const keys = Object.keys(options);
+ for (const key of keys) {
+ if (key in this._viewport.graph) {
+ this._viewport.graph[key] = options[key];
+ }
+ }
+ }
  }
  }
 

src/graph/Graph.ts

@@ -2,7 +2,7 @@ import {Renderable, RenderMode, RenderUniforms} from '../renderer/Renderable';
 import {App} from 'picogl';
 import {mat4, quat, vec3} from 'gl-matrix';
 import {Layer} from './Layer';
-import {GraphPoints, PointData, PointDataMappings} from '../data/GraphPoints';
+import {GraphPoints, PointData, PointDataMappings, PointOptions} from '../data/GraphPoints';
 import {PickingManager} from '../UX/picking/PickingManager';
 import {EventEmitter} from '@dekkai/event-emitter/build/lib/EventEmitter';