Skip to content

Commit 6cfc795

Browse files
codewithkylecodewithkyle
authored
Merge pull request #32 from codewithkyle/webgl-rewrite
Perf improvements
2 parents 1526386 + 14f8ab8 commit 6cfc795

File tree

4 files changed

+35
-58
lines changed

4 files changed

+35
-58
lines changed

‎client/src/pages/tabletop-page/tabletop-component/table-canvas/table-canvas.ts‎

Lines changed: 32 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,6 @@ export default class TableCanvas extends SuperComponent<ITableCanvas> {
357357
let width = this.image.width;
358358
let height = this.image.height;
359359
if (this.image.height > 8000 || this.image.width > 8000) {
360-
console.log("too big, doing resize");
361360
const scaleFactor = 8000 / Math.max(this.image.width, this.image.height);
362361
width = Math.floor(this.image.width * scaleFactor);
363362
height = Math.floor(this.image.height * scaleFactor);
@@ -369,8 +368,6 @@ export default class TableCanvas extends SuperComponent<ITableCanvas> {
369368
const ctx = canvas.getContext('2d');
370369
ctx.drawImage(this.image, 0, 0, width, height);
371370

372-
console.log("switched to canvas", width, height);
373-
374371
this.image.width = width;
375372
this.image.height = height;
376373
}
@@ -496,28 +493,24 @@ export default class TableCanvas extends SuperComponent<ITableCanvas> {
496493
this.drawGrid();
497494
}
498495

499-
this.lastFogCount = this.fogOfWarShapes.length;
500496
this.updateFog = false;
501497
this.updateGrid = false;
502498
this.doMove = false;
503499
this.animationId = window.requestAnimationFrame(this.nextFrame.bind(this));
504500
}
505501

506502
private buildFogMask() {
503+
if (this.lastFogCount === this.fogOfWarShapes.length) return;
504+
507505
this.gl.useProgram(this.maskProgram.get_program());
508506
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.maskProgram.get_fbo());
509507
this.gl.viewport(0, 0, this.image.width, this.image.height);
510508
this.gl.clearColor(0.0, 0.0, 0.0, 0.0);
511509
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
512-
513-
//if (this.lastFogCount === this.fogOfWarShapes.length) {
514-
//return;
515-
//}
516-
517-
// Mask
518-
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.maskProgram.get_buffer("verticies"));
519510
this.gl.bindTexture(this.gl.TEXTURE_2D, this.maskProgram.get_texture());
520-
511+
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.maskProgram.get_buffer("verticies"));
512+
// Mask
513+
let allVertices = [];
521514
for (let shape of this.fogOfWarShapes) {
522515
let vertices = [];
523516

@@ -540,13 +533,10 @@ export default class TableCanvas extends SuperComponent<ITableCanvas> {
540533
const br = this.world_to_clip(xMax, yMin, this.image.width, this.image.height); // bottom-right
541534
const tr = this.world_to_clip(xMax, yMax, this.image.width, this.image.height); // top-right
542535

543-
// Create an array of vertices (using TRIANGLE_STRIP order):
544-
vertices = [
545-
bl[0], bl[1],
546-
tl[0], tl[1],
547-
br[0], br[1],
548-
tr[0], tr[1],
549-
];
536+
vertices.push(
537+
bl[0], bl[1], br[0], br[1], tr[0], tr[1], // Triangle 1
538+
bl[0], bl[1], tr[0], tr[1], tl[0], tl[1] // Triangle 2
539+
);
550540
}
551541
break;
552542
case "poly":
@@ -557,45 +547,31 @@ export default class TableCanvas extends SuperComponent<ITableCanvas> {
557547
flatVertices.push(clip[0], clip[1]);
558548
});
559549

560-
// Triangulate the polygon using earcut.
561-
// Since there are no holes, the second parameter is an empty array.
562-
const indices = earcut(flatVertices, /* holeIndices */ []);
563-
564-
// Now, create a vertices array that lists triangles:
565-
// (You can either use indices with an ELEMENT_ARRAY_BUFFER or expand them.)
566-
let verticesTriangles = [];
567-
indices.forEach(idx => {
568-
verticesTriangles.push(flatVertices[2 * idx], flatVertices[2 * idx + 1]);
569-
});
570-
571-
vertices = verticesTriangles;
550+
const indices = earcut(flatVertices);
551+
for (let i = 0; i < indices.length; i++) {
552+
const idx = indices[i];
553+
vertices.push(flatVertices[2 * idx], flatVertices[2 * idx + 1]);
554+
}
572555
}
573556
break;
574557
}
575558

576-
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(vertices), this.gl.STATIC_DRAW);
559+
allVertices.push(...vertices);
560+
}
577561

578-
this.gl.enableVertexAttribArray(this.maskProgram.get_attribute("a_position"));
579-
this.gl.vertexAttribPointer(
580-
this.maskProgram.get_attribute("a_position"),
581-
2,
582-
this.gl.FLOAT,
583-
false,
584-
0,
585-
0
586-
);
562+
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(allVertices), this.gl.STATIC_DRAW);
587563

588-
switch(shape.type) {
589-
case "rect":
590-
this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
591-
break;
592-
case "poly":
593-
this.gl.drawArrays(this.gl.TRIANGLES, 0, vertices.length / 2);
594-
break;
595-
default:
596-
break;
597-
}
598-
}
564+
this.gl.enableVertexAttribArray(this.maskProgram.get_attribute("a_position"));
565+
this.gl.vertexAttribPointer(
566+
this.maskProgram.get_attribute("a_position"),
567+
2,
568+
this.gl.FLOAT,
569+
false,
570+
0,
571+
0
572+
);
573+
this.gl.drawArrays(this.gl.TRIANGLES, 0, allVertices.length / 2);
574+
this.lastFogCount = this.fogOfWarShapes.length;
599575

600576
// reset
601577
this.gl.bindTexture(this.gl.TEXTURE_2D, null);
@@ -615,11 +591,12 @@ export default class TableCanvas extends SuperComponent<ITableCanvas> {
615591
this.gl.uniform2f(this.fogProgram.get_uniform("u_resolution"), this.w, this.h);
616592
this.gl.uniform2f(this.fogProgram.get_uniform("u_translation"), this.pos.x, this.pos.y);
617593
this.gl.uniform2f(this.fogProgram.get_uniform("u_scale"), this.tabletop.zoom, this.tabletop.zoom);
618-
let color = "#fafafaFF"
594+
let r = 0.98, g = 0.98, b = 0.98, a = 1;
619595
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
620-
color = "#09090bFF"
596+
r = 0.0;
597+
g = 0.0;
598+
b = 0.0;
621599
}
622-
const [r,g,b,a] = this.hex_to_rgbaf(color);
623600
this.gl.uniform4f(this.fogProgram.get_uniform("u_color"), r, g, b, a);
624601
this.gl.uniform1i(this.fogProgram.get_uniform("u_isGM"), room.isGM ? 1 : 0);
625602

‎client/src/styles/core.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ body{
2020
color: var(--grey-700);
2121

2222
@media (prefers-color-scheme: dark){
23-
background-color: var(--grey-950);
23+
background-color: #000;
2424
color: var(--grey-300);
2525
}
2626
}

‎server/views/layouts/main.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
66

7-
<title>Tabletopper v0.7.1</title>
7+
<title>Tabletopper v0.7.2</title>
88
<meta name="description" content="Jump into a D&D tabletop session with your friends, hassle free.">
99

1010
<link rel="icon" href="/static/favicon.png" sizes="any">

‎server/views/layouts/vtt.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
66

7-
<title>Tabletopper v0.7.1</title>
7+
<title>Tabletopper v0.7.2</title>
88
<meta name="description" content="Jump into a D&D tabletop session with your friends, hassle free.">
99

1010
<link rel="icon" href="/static/favicon.png" sizes="any">

0 commit comments

Comments
 (0)