riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 57 Pull requests Projects 1 Activity

removing server-side brush rendering

Browse source 
brush rendering is now completely client-side.
the server only receives edits the client would like to do, in the form of PNG images of chunks, that are then composited onto the wall

known issue: it is possible to brush up against the current 256 chunk edit limit pretty easily.
I'm not sure it can be solved very easily though. the perfect solution would involve splitting up the interaction into multiple edits, and I tried to do that, but there's a noticable stutter for some reason that I haven't managed to track down yet.
so it'll be kinda crap for the time being.
This commit is contained in:
りき萌 2025-06-30 00:48:49 +02:00
parent 15a1bf8036
commit bff899c9c0
24 changed files with 613 additions and 1170 deletions
Download patch file Download diff file Expand all files Collapse all files

44
static/online-users.js
View file

@ -1,5 +1,6 @@
import { ContKind, Haku } from "rkgk/haku.js";
import { renderToChunksInArea, dotterRenderArea } from "rkgk/painter.js";
import { Layer } from "rkgk/wall.js";
export class User {
nickname = "";
@ -9,19 +10,22 @@ export class User {
isBrushOk = false;
simulation = null;
scratchLayer = null;
constructor(wallInfo, nickname) {
this.nickname = nickname;
this.haku = new Haku(wallInfo.hakuLimits);
}
destroy() {
console.info("destroying user", this.nickname);
this.haku.destroy();
}
setBrush(brush) {
console.groupCollapsed("setBrush", this.nickname);
let compileResult = this.haku.setBrush(brush);
console.log("compiling brush complete", compileResult);
console.info("compiling brush complete", compileResult);
console.groupEnd();
this.isBrushOk = compileResult.status == "ok";
@ -32,14 +36,14 @@ export class User {
renderBrushToChunks(wall, x, y) {
console.groupCollapsed("renderBrushToChunks", this.nickname);
let result = this.painter.renderBrushToWall(this.haku, x, y, wall);
console.log("rendering brush to chunks complete");
console.info("rendering brush to chunks complete");
console.groupEnd();
return result;
}
simulate(wall, interactions) {
console.group("simulate");
console.group("simulate", this.nickname);
for (let interaction of interactions) {
if (interaction.kind == "setBrush") {
this.simulation = null;
@ -48,7 +52,7 @@ export class User {
if (this.isBrushOk) {
if (this.simulation == null) {
console.log("no simulation -- beginning brush");
console.info("no simulation -- beginning brush");
this.simulation = { renderArea: { left: 0, top: 0, right: 0, bottom: 0 } };
this.haku.beginBrush();
}
@ -67,13 +71,13 @@ export class User {
if (interaction.kind == "scribble" && this.#expectContKind(ContKind.Scribble)) {
renderToChunksInArea(
wall,
this.getScratchLayer(wall),
this.simulation.renderArea,
(pixmap, translationX, translationY) => {
return this.haku.contScribble(pixmap, translationX, translationY);
},
);
console.log("ended simulation");
console.info("ended simulation");
this.simulation = null;
}
}
@ -100,6 +104,34 @@ export class User {
memoryMax: wallInfo.hakuLimits.memory,
};
}
getScratchLayer(wall) {
if (this.scratchLayer == null) {
this.scratchLayer = wall.addLayer(
new Layer({
name: `scratch ${this.nickname}`,
chunkSize: wall.chunkSize,
chunkLimit: wall.maxEditSize,
}),
);
}
return this.scratchLayer;
}
// Returns the scratch layer committed to the wall, so that the caller may do additional
// processing with the completed layer (i.e. send to the server.)
// The layer has to be .destroy()ed once you're done working with it.
commitScratchLayer(wall) {
if (this.scratchLayer != null) {
wall.mainLayer.compositeAlpha(this.scratchLayer);
wall.removeLayer(this.scratchLayer);
let scratchLayer = this.scratchLayer;
this.scratchLayer = null;
return scratchLayer;
} else {
console.error("commitScratchLayer without an active scratch layer", this.nickname);
}
}
}
export class OnlineUsers extends EventTarget {