michael/pathfinder
michael
/
pathfinder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #45 from mbebenita/toggle 

Mesh Debugger Improvements
This commit is contained in:
Patrick Walton 2017-10-30 15:31:36 -07:00 committed by GitHub
parent 2717ac12cc 55f964001b
commit a6582aefb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 101 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
demo/client/src/mesh-debugger.ts
View File

@ -52,7 +52,9 @@ const SEGMENT_POINT_FILL_STYLE: string = "rgb(0, 0, 128)";
const LIGHT_STROKE_STYLE: string = "rgb(192, 192, 192)"; const LIGHT_STROKE_STYLE: string = "rgb(192, 192, 192)";
const LINE_STROKE_STYLE: string = "rgb(0, 128, 0)"; const LINE_STROKE_STYLE: string = "rgb(0, 128, 0)";
const CURVE_STROKE_STYLE: string = "rgb(128, 0, 0)"; const CURVE_STROKE_STYLE: string = "rgb(128, 0, 0)";
const SEGMENT_CONTROL_POINT_FILL_STYLE: string = "rgb(255, 255, 255)";
const SEGMENT_CONTROL_POINT_STROKE_STYLE: string = "rgb(0, 0, 128)"; const SEGMENT_CONTROL_POINT_STROKE_STYLE: string = "rgb(0, 0, 128)";
const SEGMENT_CONTROL_POINT_HULL_STROKE_STYLE: string = "rgba(128, 128, 128, 0.5)";
const NORMAL_STROKE_STYLES: NormalStyleParameter<string> = { const NORMAL_STROKE_STYLES: NormalStyleParameter<string> = {
bVertex: '#e6aa00', bVertex: '#e6aa00',
@ -223,6 +225,10 @@ class MeshDebuggerView extends PathfinderView {
private appController: MeshDebuggerAppController; private appController: MeshDebuggerAppController;
private drawControl: boolean = true;
private drawNormals: boolean = true;
private drawVertices: boolean = true;
constructor(appController: MeshDebuggerAppController) { constructor(appController: MeshDebuggerAppController) {
super(); super();
@ -232,6 +238,8 @@ class MeshDebuggerView extends PathfinderView {
this.camera.onPan = () => this.setDirty(); this.camera.onPan = () => this.setDirty();
this.camera.onZoom = () => this.setDirty(); this.camera.onZoom = () => this.setDirty();
window.addEventListener('keypress', event => this.onKeyPress(event), false);
this.resizeToFit(true); this.resizeToFit(true);
} }
@ -295,27 +303,28 @@ class MeshDebuggerView extends PathfinderView {
const lowerRightPosition = unwrapNull(getPosition(positions, lowerRightIndex)); const lowerRightPosition = unwrapNull(getPosition(positions, lowerRightIndex));
const lowerControlPointPosition = getPosition(positions, lowerControlPointIndex); const lowerControlPointPosition = getPosition(positions, lowerControlPointIndex);
drawVertexIfNecessary(context, if (this.drawVertices) {
drawnVertices, drawVertexIfNecessary(context,
upperLeftIndex, drawnVertices,
upperLeftPosition, upperLeftIndex,
invScaleFactor); upperLeftPosition,
drawVertexIfNecessary(context, invScaleFactor);
drawnVertices, drawVertexIfNecessary(context,
upperRightIndex, drawnVertices,
upperRightPosition, upperRightIndex,
invScaleFactor); upperRightPosition,
drawVertexIfNecessary(context, invScaleFactor);
drawnVertices, drawVertexIfNecessary(context,
lowerLeftIndex, drawnVertices,
lowerLeftPosition, lowerLeftIndex,
invScaleFactor); lowerLeftPosition,
drawVertexIfNecessary(context, invScaleFactor);
drawnVertices, drawVertexIfNecessary(context,
lowerRightIndex, drawnVertices,
lowerRightPosition, lowerRightIndex,
invScaleFactor); lowerRightPosition,
invScaleFactor);
}
context.beginPath(); context.beginPath();
context.moveTo(upperLeftPosition[0], -upperLeftPosition[1]); context.moveTo(upperLeftPosition[0], -upperLeftPosition[1]);
if (upperControlPointPosition != null) { if (upperControlPointPosition != null) {
@ -361,32 +370,59 @@ class MeshDebuggerView extends PathfinderView {
const lowerRightNormal = bVertexNormals[lowerRightIndex]; const lowerRightNormal = bVertexNormals[lowerRightIndex];
const upperLeftNormal = bVertexNormals[upperLeftIndex]; const upperLeftNormal = bVertexNormals[upperLeftIndex];
const upperRightNormal = bVertexNormals[upperRightIndex]; const upperRightNormal = bVertexNormals[upperRightIndex];
drawNormal(context, lowerLeftPosition, lowerLeftNormal, invScaleFactor, 'bVertex'); if (this.drawVertices && this.drawNormals) {
drawNormal(context, lowerRightPosition, lowerRightNormal, invScaleFactor, 'bVertex'); drawNormal(context, lowerLeftPosition, lowerLeftNormal, invScaleFactor,
drawNormal(context, upperLeftPosition, upperLeftNormal, invScaleFactor, 'bVertex'); 'bVertex');
drawNormal(context, upperRightPosition, upperRightNormal, invScaleFactor, 'bVertex'); drawNormal(context, lowerRightPosition, lowerRightNormal, invScaleFactor,
'bVertex');
drawNormal(context, upperLeftPosition, upperLeftNormal, invScaleFactor,
'bVertex');
drawNormal(context, upperRightPosition, upperRightNormal, invScaleFactor,
'bVertex');
}
} }
// Draw segments. // Draw segments.
drawSegmentVertices(context, if (this.drawVertices) {
new Float32Array(meshes.segmentLines), drawSegmentVertices(context,
new Float32Array(meshes.segmentLineNormals), new Float32Array(meshes.segmentLines),
meshes.segmentLineCount, new Float32Array(meshes.segmentLineNormals),
[0, 1], meshes.segmentLineCount,
null, [0, 1],
2, null,
invScaleFactor); 2,
drawSegmentVertices(context, invScaleFactor,
new Float32Array(meshes.segmentCurves), this.drawControl,
new Float32Array(meshes.segmentCurveNormals), this.drawNormals);
meshes.segmentCurveCount, drawSegmentVertices(context,
[0, 2], new Float32Array(meshes.segmentCurves),
1, new Float32Array(meshes.segmentCurveNormals),
3, meshes.segmentCurveCount,
invScaleFactor); [0, 2],
1,
3,
invScaleFactor,
this.drawControl,
this.drawNormals);
}
context.restore(); context.restore();
} }
private onKeyPress(event: KeyboardEvent): void {
if (event.key === "c") {
this.drawControl = !this.drawControl;
} else if (event.key === "n") {
this.drawNormals = !this.drawNormals;
} else if (event.key === "v") {
this.drawVertices = !this.drawVertices;
} else if (event.key === "r") {
// Reset
this.drawControl = true;
this.drawNormals = true;
this.drawVertices = true;
}
this.setDirty();
}
} }
function getPosition(positions: Float32Array, vertexIndex: number): glmatrix.vec2 | null { function getPosition(positions: Float32Array, vertexIndex: number): glmatrix.vec2 | null {
@ -417,7 +453,9 @@ function drawSegmentVertices(context: CanvasRenderingContext2D,
endpointOffsets: number[], endpointOffsets: number[],
controlPointOffset: number | null, controlPointOffset: number | null,
segmentSize: number, segmentSize: number,
invScaleFactor: number) { invScaleFactor: number,
drawControl: boolean,
drawNormals: boolean) {
for (let segmentIndex = 0; segmentIndex < segmentCount; segmentIndex++) { for (let segmentIndex = 0; segmentIndex < segmentCount; segmentIndex++) {
const positionStartOffset = segmentSize * 2 * segmentIndex; const positionStartOffset = segmentSize * 2 * segmentIndex;
const normalStartOffset = segmentSize * segmentIndex; const normalStartOffset = segmentSize * segmentIndex;
@ -447,15 +485,27 @@ function drawSegmentVertices(context: CanvasRenderingContext2D,
else else
normalControlPoint = null; normalControlPoint = null;
if (drawNormals) {
drawNormal(context, position0, normal0, invScaleFactor, 'edge');
drawNormal(context, position1, normal1, invScaleFactor, 'edge');
if (drawControl && controlPoint != null && normalControlPoint != null)
drawNormal(context, controlPoint, normalControlPoint, invScaleFactor, 'edge');
}
drawSegmentVertex(context, position0, invScaleFactor); drawSegmentVertex(context, position0, invScaleFactor);
drawSegmentVertex(context, position1, invScaleFactor); drawSegmentVertex(context, position1, invScaleFactor);
if (controlPoint != null) if (drawControl && controlPoint != null) {
context.save();
context.strokeStyle = SEGMENT_CONTROL_POINT_HULL_STROKE_STYLE;
context.setLineDash([2 * invScaleFactor, 2 * invScaleFactor]);
context.beginPath();
context.moveTo(position0[0], -position0[1]);
context.lineTo(controlPoint[0], -controlPoint[1]);
context.lineTo(position1[0], -position1[1]);
context.stroke();
context.restore();
drawSegmentControlPoint(context, controlPoint, invScaleFactor); drawSegmentControlPoint(context, controlPoint, invScaleFactor);
}
drawNormal(context, position0, normal0, invScaleFactor, 'edge');
drawNormal(context, position1, normal1, invScaleFactor, 'edge');
if (controlPoint != null && normalControlPoint != null)
drawNormal(context, controlPoint, normalControlPoint, invScaleFactor, 'edge');
} }
} }
@ -502,6 +552,7 @@ function drawSegmentControlPoint(context: CanvasRenderingContext2D,
invScaleFactor: number) { invScaleFactor: number) {
context.save(); context.save();
context.strokeStyle = SEGMENT_CONTROL_POINT_STROKE_STYLE; context.strokeStyle = SEGMENT_CONTROL_POINT_STROKE_STYLE;
context.fillStyle = SEGMENT_CONTROL_POINT_FILL_STYLE;
context.lineWidth = invScaleFactor * SEGMENT_CONTROL_POINT_STROKE_WIDTH; context.lineWidth = invScaleFactor * SEGMENT_CONTROL_POINT_STROKE_WIDTH;
context.beginPath(); context.beginPath();
context.arc(position[0], context.arc(position[0],
@ -509,6 +560,7 @@ function drawSegmentControlPoint(context: CanvasRenderingContext2D,
SEGMENT_POINT_RADIUS * invScaleFactor, SEGMENT_POINT_RADIUS * invScaleFactor,
0, 0,
2.0 * Math.PI); 2.0 * Math.PI);
context.fill();
context.stroke(); context.stroke();
context.restore(); context.restore();
} }