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

remove tiny-skia and replace chunk renderer with a GPU-based one

Browse source
This commit is contained in:
りき萌 2025-09-05 17:41:25 +02:00
parent 39632f56a7
commit b4c3260f49
10 changed files with 253 additions and 434 deletions
Download patch file Download diff file Expand all files Collapse all files

75
static/wall.js
View file

@ -1,29 +1,20 @@
import { Pixmap } from "rkgk/haku.js";
import { OnlineUsers } from "rkgk/online-users.js";
export class Chunk {
constructor(size) {
this.pixmap = new Pixmap(size, size);
this.canvas = new OffscreenCanvas(size, size);
this.ctx = this.canvas.getContext("2d");
this.renderDirty = false;
constructor(chunkAllocator) {
this.id = chunkAllocator.alloc();
}
destroy() {
this.pixmap.destroy();
destroy(chunkAllocator) {
chunkAllocator.dealloc(this.id);
}
syncFromPixmap() {
this.ctx.putImageData(this.pixmap.getImageData(), 0, 0);
upload(chunkAllocator, source) {
chunkAllocator.upload(this.id, source);
}
syncToPixmap() {
let imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
this.pixmap.getImageData().data.set(imageData.data, 0);
}
markModified() {
this.renderDirty = true;
download(chunkAllocator) {
return chunkAllocator.download(this.id);
}
}
@ -51,50 +42,52 @@ export class Layer {
return this.chunks.get(chunkKey(x, y))?.chunk;
}
getOrCreateChunk(x, y) {
getOrCreateChunk(chunkAllocator, x, y) {
let key = chunkKey(x, y);
if (this.chunks.has(key)) {
return this.chunks.get(key)?.chunk;
} else {
if (this.chunkLimit != null && this.chunks.size >= this.chunkLimit) return null;
let chunk = new Chunk(this.chunkSize);
let chunk = new Chunk(chunkAllocator);
this.chunks.set(key, { x, y, chunk });
return chunk;
}
}
compositeAlpha(src) {
for (let { x, y, chunk: srcChunk } of src.chunks.values()) {
srcChunk.syncFromPixmap();
let dstChunk = this.getOrCreateChunk(x, y);
if (dstChunk == null) continue;
dstChunk.ctx.globalCompositeOperation = "source-over";
dstChunk.ctx.drawImage(srcChunk.canvas, 0, 0);
dstChunk.syncToPixmap();
dstChunk.markModified();
}
// TODO
// for (let { x, y, chunk: srcChunk } of src.chunks.values()) {
// srcChunk.syncFromPixmap();
// let dstChunk = this.getOrCreateChunk(x, y);
// if (dstChunk == null) continue;
// dstChunk.ctx.globalCompositeOperation = "source-over";
// dstChunk.ctx.drawImage(srcChunk.canvas, 0, 0);
// dstChunk.syncToPixmap();
// dstChunk.markModified();
// }
}
async toEdits() {
let edits = [];
let start = performance.now();
// TODO
for (let { x, y, chunk } of this.chunks.values()) {
edits.push({
chunk: { x, y },
data: chunk.canvas.convertToBlob({ type: "image/png" }),
});
}
// let start = performance.now();
for (let edit of edits) {
edit.data = await edit.data;
}
// for (let { x, y, chunk } of this.chunks.values()) {
// edits.push({
// chunk: { x, y },
// data: chunk.canvas.convertToBlob({ type: "image/png" }),
// });
// }
let end = performance.now();
console.debug("toEdits done", end - start);
// for (let edit of edits) {
// edit.data = await edit.data;
// }
// let end = performance.now();
// console.debug("toEdits done", end - start);
return edits;
}