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

implementing more chunk ops based on GPU

Browse source 
composing, toEdits
This commit is contained in:
りき萌 2025-09-08 22:10:55 +02:00
parent bb55e23979
commit 1bbf1b1d94
5 changed files with 259 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

28
static/canvas-renderer.js
View file

@ -81,9 +81,6 @@ class CanvasRenderer extends HTMLElement {
console.info("vendor", this.gl.getParameter(this.gl.VENDOR));
console.info("renderer", this.gl.getParameter(this.gl.RENDERER));
this.gl.enable(this.gl.BLEND);
this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
// Due to an ANGLE bug on Windows, we can only render around 64 rectangles in a batch.
//
// It seems that for DirectX it generates a horribly inefficient shader that the DirectX
@ -135,12 +132,25 @@ class CanvasRenderer extends HTMLElement {
precision highp float;
uniform sampler2D u_texture;
uniform int u_visAtlasIndex;
in vec2 vf_uv;
out vec4 f_color;
float goldNoise(vec2 xy, float seed) {
return fract(tan(distance(xy * 1.6180339, xy) * seed) * xy.x);
}
void main() {
vec4 color = texture(u_texture, vf_uv);
if (u_visAtlasIndex != 0) {
color = vec4(
goldNoise(vec2(float(u_visAtlasIndex), 0.0), 0.1),
goldNoise(vec2(float(u_visAtlasIndex), 0.0), 0.2),
goldNoise(vec2(float(u_visAtlasIndex), 0.0), 0.3),
1.0
);
}
f_color = color;
}
`,
@ -152,6 +162,7 @@ class CanvasRenderer extends HTMLElement {
u_projection: this.gl.getUniformLocation(renderChunksProgramId, "u_projection"),
u_view: this.gl.getUniformLocation(renderChunksProgramId, "u_view"),
u_texture: this.gl.getUniformLocation(renderChunksProgramId, "u_texture"),
u_visAtlasIndex: this.gl.getUniformLocation(renderChunksProgramId, "u_visAtlasIndex"),
ub_rects: this.gl.getUniformBlockIndex(renderChunksProgramId, "ub_rects"),
};
@ -209,13 +220,20 @@ class CanvasRenderer extends HTMLElement {
console.debug("GL error state", this.gl.getError());
console.groupEnd();
// Flag that prevents the renderer from exploding in case any part of
// initialisation throws an exception.
this.ok = true;
}
// Renderer
#render() {
if (!this.ok) return;
// NOTE: We should probably render on-demand only when it's needed.
requestAnimationFrame(() => this.#render());
this.atlasAllocator.tickDownloads();
this.#renderWall();
}
@ -228,6 +246,9 @@ class CanvasRenderer extends HTMLElement {
this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
this.gl.scissor(0, 0, this.canvas.width, this.canvas.height);
this.gl.enable(this.gl.BLEND);
this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
this.gl.clearColor(1, 1, 1, 1);
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
@ -271,6 +292,7 @@ class CanvasRenderer extends HTMLElement {
for (let [i, chunks] of batch) {
let atlas = this.atlasAllocator.atlases[i];
this.gl.bindTexture(this.gl.TEXTURE_2D, atlas.texture);
// this.gl.uniform1i(this.renderChunksProgram.u_visAtlasIndex, i + 1);
this.#resetRectBuffer();
for (let chunk of chunks) {