feat: add option to change behaviour of point classes

Author: Manfred Cheung

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;
 
@@ -73,10 +101,12 @@ export class GraphPoints extends DataTexture {
     public bbDiagonal: number;
 
     constructor(context: App, data: PointData[]);
-    constructor(context: App, data: unknown[], mappings: Partial<PointDataMappings>);
-    constructor(context: App, data: unknown[], mappings: Partial<PointDataMappings> = {}) {
+    constructor(context: App, data: unknown[], mappings: Partial<PointDataMappings>, options: PointOptions);
+    constructor(context: App, data: unknown[], mappings: Partial<PointDataMappings> = {}, options: PointOptions = {}) {
         super(context, data.length);
 
+        this._localUniforms = Object.assign({}, this._localUniforms, options);
+
         this.map = new Map();
         this.bb = {
             min: vec3.fromValues(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, Number. MAX_SAFE_INTEGER),
@@ -288,11 +318,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>;
@@ -411,7 +412,7 @@ export class GraferController extends EventEmitter {
     private loadPoints(data: GraferControllerData, pointsRadiusMapping: { radius: (entry: any) => number; }): void {
         if (data.points) {
             const mappings = Object.assign({}, pointsRadiusMapping, data.points.mappings);
-            this._viewport.graph = new Graph(this._viewport.context, data.points.data, mappings);
+            this._viewport.graph = new Graph(this._viewport.context, data.points.data, mappings, data.points.options);
             this._viewport.graph.picking = new PickingManager(this._viewport.context, this._viewport.mouseHandler);
         }
     }

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';
 
@@ -55,9 +55,9 @@ export class Graph extends EventEmitter.mixin(GraphPoints) implements Renderable
     }
 
     constructor(context: App, data: PointData[]);
-    constructor(context: App, data: unknown[], mappings: Partial<PointDataMappings>);
-    constructor(context: App, data: unknown[], mappings: Partial<PointDataMappings> = {}) {
-        super(context, data, mappings);
+    constructor(context: App, data: unknown[], mappings: Partial<PointDataMappings>, options: PointOptions);
+    constructor(context: App, data: unknown[], mappings: Partial<PointDataMappings> = {}, options: PointOptions = {}) {
+        super(context, data, mappings, options);
         this._layers = [];
         this._rotation = quat.create();
         this._translation = vec3.create();