Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add picking on other edge types #98

Merged
merged 1 commit into from
Aug 17, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/graph/edges/path/CurvedPath.picking.fs.glsl
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
#version 300 es
precision highp float;

flat in vec4 fPickingColor;

out vec4 fragColor;

void main() {
fragColor = fPickingColor;
}
34 changes: 31 additions & 3 deletions src/graph/edges/path/CurvedPath.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import edgeVS from './CurvedPath.vs.glsl';
import edgeFS from './CurvedPath.fs.glsl';
import pickingFS from './CurvedPath.picking.fs.glsl';
import dataVS from './CurvedPath.data.vs.glsl';

import {App, DrawCall, PicoGL, Program, VertexArray, VertexBuffer} from 'picogl';
Expand All @@ -14,7 +15,8 @@ import {
} from '../../../renderer/Renderable';
import {Edges} from '../Edges';
import {GraphPoints} from '../../../data/GraphPoints';
import {PickingManager} from '../../../UX/picking/PickingManager';
import {PickingColors, PickingEvent, PickingManager} from '../../../UX/picking/PickingManager';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

future: we should add some aliases so that we dont have these relative paths everywhere

import {MouseCallback} from '../../../UX/mouse/MouseHandler';
import {GraferContext} from '../../../renderer/GraferContext';

export interface CurvedPathEdgeData {
Expand Down Expand Up @@ -57,6 +59,12 @@ export class CurvedPath extends Edges<CurvedPathEdgeData, GLCurvedPathEdgeTypes>
protected program: Program;
protected drawCall: DrawCall;

protected pickingProgram: Program;
protected pickingDrawCall: DrawCall;
protected pickingColors: PickingColors;
protected pickingVBO: VertexBuffer;
protected pickingHandler: MouseCallback;

protected verticesVBO: VertexBuffer;
protected edgesVAO: VertexArray;

Expand Down Expand Up @@ -90,13 +98,23 @@ export class CurvedPath extends Edges<CurvedPathEdgeData, GLCurvedPathEdgeTypes>
}

this.verticesVBO = context.createVertexBuffer(PicoGL.FLOAT, 2, new Float32Array(segmentVertices));

this.pickingHandler = this.handlePickingEvent.bind(this);
this.pickingColors = this.pickingManager.allocatePickingColors(data.length);
this.pickingVBO = context.createVertexBuffer(PicoGL.UNSIGNED_BYTE, 4, this.pickingColors.colors);

this.edgesVAO = context.createVertexArray().vertexAttributeBuffer(0, this.verticesVBO);
this.configureTargetVAO(this.edgesVAO);
this.edgesVAO.instanceAttributeBuffer(7, this.pickingVBO);

const shaders = this.getDrawShaders();
this.program = context.createProgram(shaders.vs, shaders.fs);
this.drawCall = context.createDrawCall(this.program, this.edgesVAO).primitive(PicoGL.TRIANGLE_STRIP);

const pickingShaders = this.getPickingShaders();
this.pickingProgram = context.createProgram(pickingShaders.vs, pickingShaders.fs);
this.pickingDrawCall = context.createDrawCall(this.pickingProgram, this.edgesVAO).primitive(PicoGL.TRIANGLE_STRIP);

this.compute(context, {
uGraphPoints: this.dataTexture,
});
Expand All @@ -118,7 +136,10 @@ export class CurvedPath extends Edges<CurvedPathEdgeData, GLCurvedPathEdgeTypes>

switch (mode) {
case RenderMode.PICKING:
// this.pickingDrawCall.draw();
setDrawCallUniforms(this.pickingDrawCall, uniforms);
setDrawCallUniforms(this.pickingDrawCall, this.localUniforms);
this.pickingDrawCall.uniform('uPicking', true);
this.pickingDrawCall.draw();
break;

default:
Expand All @@ -137,7 +158,7 @@ export class CurvedPath extends Edges<CurvedPathEdgeData, GLCurvedPathEdgeTypes>
protected getPickingShaders(): RenderableShaders {
return {
vs: edgeVS,
fs: null, // pickingFS,
fs: pickingFS,
};
}

Expand Down Expand Up @@ -180,4 +201,11 @@ export class CurvedPath extends Edges<CurvedPathEdgeData, GLCurvedPathEdgeTypes>

return edgesMappings;
}

protected handlePickingEvent(event: PickingEvent, colorID: number): void {
if (this.picking && this.pickingColors.map.has(colorID)) {
const id = this.idArray[this.pickingColors.map.get(colorID)];
this.emit(event, id);
}
}
}
8 changes: 7 additions & 1 deletion src/graph/edges/path/CurvedPath.vs.glsl
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ layout(location=3) in vec3 iControl;
layout(location=4) in uint iColorA;
layout(location=5) in uint iColorB;
layout(location=6) in vec2 iColorMix;
layout(location=7) in uvec4 iPickingColor;

uniform bool uPicking;

uniform mat4 uViewMatrix;
uniform mat4 uSceneMatrix;
Expand All @@ -19,6 +22,7 @@ uniform float uLineWidth;
uniform float uSegments;

flat out float fLineWidth;
flat out vec4 fPickingColor;
out vec3 vColor;
out vec2 vProjectedPosition;
out float vProjectedW;
Expand All @@ -35,6 +39,8 @@ vec3 bezier(vec3 p0, vec3 p1, vec3 p2, float t) {
}

void main() {
fPickingColor = uPicking ? vec4(iPickingColor) / 255.0 : vec4(0.0);

// bezier works fine with 0 > t > 1
float t0 = aVertex.y / uSegments;
float t1 = (aVertex.y + 1.0) / uSegments;
Expand All @@ -57,7 +63,7 @@ void main() {
vec2 normal = vec2(-direction.y, direction.x);

// calculate the pixel offset
fLineWidth = uLineWidth * uPixelRatio;
fLineWidth = (uPicking ? uLineWidth * 8. : uLineWidth) * uPixelRatio;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why the multiplication by 8?

float offsetWidth = fLineWidth + 0.5;
vec4 offset = vec4(((aVertex.x * normal * offsetWidth) / uViewportSize) * b0Projected.w, 0.0, 0.0);

Expand Down
Loading