Skip to content

Commit 6084097

Browse files
author
Manfred Cheung
committed
feat: add option to change behaviour of point classes
1 parent 89e2f95 commit 6084097

File tree

5 files changed

+62
-9
lines changed

5 files changed

+62
-9
lines changed

src/data/GraphPoints.ts

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11
import PicoGL, {App, Framebuffer, Texture} from 'picogl';
22
import pointsVS from './shaders/GraphPoints.vs.glsl';
33
import pointsFS from './shaders/GraphPoints.fs.glsl';
4-
import {GLDataTypes} from '../renderer/Renderable';
4+
import {GLDataTypes, setDrawCallUniforms} from '../renderer/Renderable';
55
import {DataMappings, concatenateData, packData} from './DataTools';
66
import {vec2, vec3} from 'gl-matrix';
77
import {DataTexture} from '../renderer/DataTexture';
88

9+
export enum ClassModes {
10+
NONE,
11+
ADD,
12+
}
13+
14+
export interface PointOptions {
15+
positionClassMode?: ClassModes
16+
radiusClassMode?: ClassModes
17+
}
18+
919
export interface PointData {
1020
id?: number | string;
1121
class?: number | string;
@@ -58,13 +68,31 @@ export class GraphPoints extends DataTexture {
5868
private _pointView: DataView;
5969
private _pointTexture: Texture;
6070

71+
private _localUniforms = {
72+
uPositionClassMode: ClassModes.ADD,
73+
uRadiusClassMode: ClassModes.NONE,
74+
};
6175
private _dataArrayBuffer: Float32Array;
6276

6377
private _length: number = 0;
6478
public get length(): number {
6579
return this._length;
6680
}
6781

82+
public get positionClassMode(): ClassModes {
83+
return this._localUniforms.uPositionClassMode;
84+
}
85+
public set positionClassMode(value: ClassModes) {
86+
this._localUniforms.uPositionClassMode = value;
87+
}
88+
89+
public get radiusClassMode(): ClassModes {
90+
return this._localUniforms.uRadiusClassMode;
91+
}
92+
public set radiusClassMode(value: ClassModes) {
93+
this._localUniforms.uRadiusClassMode = value;
94+
}
95+
6896
private map: Map<number | string, number>;
6997
protected dirty: boolean = false;
7098

@@ -288,11 +316,13 @@ export class GraphPoints extends DataTexture {
288316
.depthMask(false);
289317

290318
// create and initiate draw call
291-
context.createDrawCall(program, pointsVAO)
292-
.primitive(PicoGL.TRIANGLE_STRIP)
293-
.texture('uPointTexture', this._pointTexture)
294-
.texture('uClassTexture', this._classTexture)
295-
.draw();
319+
const drawCall = context.createDrawCall(program, pointsVAO)
320+
.primitive(PicoGL.TRIANGLE_STRIP);
321+
setDrawCallUniforms(drawCall, Object.assign({}, this._localUniforms, {
322+
uPointTexture: this._pointTexture,
323+
uClassTexture: this._classTexture,
324+
}));
325+
drawCall.draw();
296326

297327
// read points texture into stored buffer for point coordinates readback
298328
this.readTextureAsync(this._frameBuffer.colorAttachments[0]).then(texArrayBuffer => {

src/data/shaders/GraphPoints.fs.glsl

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ out vec4 fragColor;
99
uniform sampler2D uPointTexture;
1010
uniform isampler2D uClassTexture;
1111

12+
uniform uint uPositionClassMode;
13+
uniform uint uRadiusClassMode;
14+
1215
#pragma glslify: import(../../renderer/shaders/valueForIndex.glsl)
16+
#pragma glslify: import(./classMode.glsl)
1317

1418
void main() {
1519
vec2 texSize = vec2(textureSize(uPointTexture, 0).xy);
@@ -19,7 +23,13 @@ void main() {
1923
int i = 0;
2024
int classIndex = texelFetch(uClassTexture, coords, 0).x;
2125
while(classIndex != -1 && i++ < 500) {
22-
fragColor += valueForIndex(uPointTexture, classIndex);
26+
vec4 point = valueForIndex(uPointTexture, classIndex);
27+
if(uPositionClassMode == MODE_ADD) {
28+
fragColor.xyz += point.xyz;
29+
}
30+
if(uRadiusClassMode == MODE_ADD) {
31+
fragColor.w += point.w;
32+
}
2333
classIndex = ivalueForIndex(uClassTexture, classIndex).x;
2434
}
2535
}

src/data/shaders/classMode.glsl

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
#define MODE_NONE 0u
2+
#define MODE_ADD 1u

src/grafer/GraferController.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Viewport, ViewportOptions} from '../renderer/Viewport';
2-
import {PointDataMappings} from '../data/GraphPoints';
2+
import {PointOptions, PointDataMappings} from '../data/GraphPoints';
33
import {nodes as GraphNodes, edges as GraphEdges, labels as GraphLabels, Graph} from '../graph/mod';
44
import {Layer} from '../graph/Layer';
55
import {DragTruck} from '../UX/mouse/drag/DragTruck';
@@ -31,6 +31,7 @@ export type GraferLabelsType = keyof typeof GraphLabels.types;
3131
export interface GraferDataInput<T> {
3232
data: unknown[],
3333
mappings?: Partial<T>,
34+
options?: PointOptions,
3435
}
3536

3637
export type GraferPointsData = GraferDataInput<PointDataMappings>;
@@ -413,6 +414,16 @@ export class GraferController extends EventEmitter {
413414
const mappings = Object.assign({}, pointsRadiusMapping, data.points.mappings);
414415
this._viewport.graph = new Graph(this._viewport.context, data.points.data, mappings);
415416
this._viewport.graph.picking = new PickingManager(this._viewport.context, this._viewport.mouseHandler);
417+
418+
if ('options' in data.points) {
419+
const options = data.points.options;
420+
const keys = Object.keys(options);
421+
for (const key of keys) {
422+
if (key in this._viewport.graph) {
423+
this._viewport.graph[key] = options[key];
424+
}
425+
}
426+
}
416427
}
417428
}
418429

src/graph/Graph.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {Renderable, RenderMode, RenderUniforms} from '../renderer/Renderable';
22
import {App} from 'picogl';
33
import {mat4, quat, vec3} from 'gl-matrix';
44
import {Layer} from './Layer';
5-
import {GraphPoints, PointData, PointDataMappings} from '../data/GraphPoints';
5+
import {GraphPoints, PointData, PointDataMappings, PointOptions} from '../data/GraphPoints';
66
import {PickingManager} from '../UX/picking/PickingManager';
77
import {EventEmitter} from '@dekkai/event-emitter/build/lib/EventEmitter';
88

0 commit comments

Comments
 (0)