@tolokoban/tgd
Version:
ToloGameDev library for WebGL2
98 lines • 8.68 kB
JavaScript
import { TgdDataset } from "./../../../dataset/index.js";
import { TgdPainter } from "./../../../painter/painter.js";
import { tgdCanvasCreateWithContext2D } from "./../../../utils/index.js";
import { TgdVertexArray } from "./../../../vao/index.js";
import { TgdTexture2D } from "./../../../texture/index.js";
import { TgdProgram } from "./../../../program/index.js";
import FRAG from "./shader.frag";
import VERT from "./shader.vert";
export class TipsPainter extends TgdPainter {
constructor(context) {
super();
this.context = context;
this.texture = new TgdTexture2D(context)
.loadBitmap(createTipsCanvas())
.setParams({
minFilter: "LINEAR",
magFilter: "LINEAR",
})
.generateMipmap();
const data = new TgdDataset({
attPos: "vec3",
attUV: "vec2",
});
// prettier-ignore
data.set("attPos", new Float32Array([
1, 0, 0,
0, 1, 0,
0, 0, 1,
-1, 0, 0,
0, -1, 0,
0, 0, -1,
]));
const X = 1 / 3;
const Y = 1 / 2;
// prettier-ignore
data.set("attUV", new Float32Array([
0, 0,
X, 0,
2 * X, 0,
0, Y,
X, Y,
2 * X, Y,
]));
const prg = new TgdProgram(context.gl, { vert: VERT, frag: FRAG });
const vao = new TgdVertexArray(context.gl, prg, [data]);
this.prg = prg;
this.vao = vao;
}
delete() {
this.vao.delete();
}
paint() {
const { context, prg, vao } = this;
const { gl, camera } = context;
prg.use();
this.texture.activate(0);
prg.uniform1i("uniTexture", 0);
prg.uniform1f("uniScreenHeight", context.height);
prg.uniformMatrix4fv("uniModelViewMatrix", camera.matrixModelView);
prg.uniformMatrix4fv("uniProjectionMatrix", camera.matrixProjection);
vao.bind();
gl.drawArrays(gl.POINTS, 0, 6);
}
}
function createTipsCanvas() {
const SIZE = 256;
const { canvas, ctx } = tgdCanvasCreateWithContext2D(SIZE * 3, SIZE * 2);
paintDisk(ctx, 0, 0, SIZE, "X", "#f00", "#fff");
paintDisk(ctx, 1, 0, SIZE, "Y", "#0f0", "#000");
paintDisk(ctx, 2, 0, SIZE, "Z", "#00f", "#fff");
paintDisk(ctx, 0, 1, SIZE, "", "#f00", "#500");
paintDisk(ctx, 1, 1, SIZE, "", "#0f0", "#050");
paintDisk(ctx, 2, 1, SIZE, "", "#00f", "#005");
return canvas;
}
function paintDisk(context, col, row, size, text, colorBack, colorText = "#fff") {
const x = (col + 0.5) * size;
const y = (row + 0.5) * size;
const r = size * 0.45;
context.fillStyle = colorBack;
context.beginPath();
context.ellipse(x, y, r, r, 0, 0, 2 * Math.PI);
context.fill();
if (text) {
context.font = `bold ${size * 0.5}px sans-serif`;
context.fillStyle = colorText;
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(text, x, y);
}
else {
context.fillStyle = colorText;
context.beginPath();
context.ellipse(x, y, r * 0.8, r * 0.8, 0, 0, 2 * Math.PI);
context.fill();
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlwcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jYW52YXMvZ2l6bW8vcGFpbnRlci90aXBzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDekMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ2pELE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUN6RCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sVUFBVSxDQUFBO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDM0MsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUV6QyxPQUFPLElBQUksTUFBTSxlQUFlLENBQUE7QUFDaEMsT0FBTyxJQUFJLE1BQU0sZUFBZSxDQUFBO0FBRWhDLE1BQU0sT0FBTyxXQUFZLFNBQVEsVUFBVTtJQUt2QyxZQUE2QixPQUFtQjtRQUM1QyxLQUFLLEVBQUUsQ0FBQTtRQURrQixZQUFPLEdBQVAsT0FBTyxDQUFZO1FBRTVDLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxZQUFZLENBQUMsT0FBTyxDQUFDO2FBQ25DLFVBQVUsQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO2FBQzlCLFNBQVMsQ0FBQztZQUNQLFNBQVMsRUFBRSxRQUFRO1lBQ25CLFNBQVMsRUFBRSxRQUFRO1NBQ3RCLENBQUM7YUFDRCxjQUFjLEVBQUUsQ0FBQTtRQUNyQixNQUFNLElBQUksR0FBRyxJQUFJLFVBQVUsQ0FBQztZQUN4QixNQUFNLEVBQUUsTUFBTTtZQUNkLEtBQUssRUFBRSxNQUFNO1NBQ2hCLENBQUMsQ0FBQTtRQUNGLGtCQUFrQjtRQUNsQixJQUFJLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxJQUFJLFlBQVksQ0FBQztZQUMvQixDQUFDLEVBQUcsQ0FBQyxFQUFHLENBQUM7WUFDVCxDQUFDLEVBQUcsQ0FBQyxFQUFHLENBQUM7WUFDVCxDQUFDLEVBQUcsQ0FBQyxFQUFHLENBQUM7WUFDVixDQUFDLENBQUMsRUFBRyxDQUFDLEVBQUcsQ0FBQztZQUNULENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRyxDQUFDO1lBQ1QsQ0FBQyxFQUFHLENBQUMsRUFBRSxDQUFDLENBQUM7U0FDYixDQUFDLENBQUMsQ0FBQTtRQUNILE1BQU0sQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUE7UUFDZixNQUFNLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFBO1FBQ2Ysa0JBQWtCO1FBQ2xCLElBQUksQ0FBQyxHQUFHLENBQUMsT0FBTyxFQUFFLElBQUksWUFBWSxDQUFDO1lBQzdCLENBQUMsRUFBRSxDQUFDO1lBQ0osQ0FBQyxFQUFFLENBQUM7WUFDTixDQUFDLEdBQUMsQ0FBQyxFQUFFLENBQUM7WUFDSixDQUFDLEVBQUUsQ0FBQztZQUNKLENBQUMsRUFBRSxDQUFDO1lBQ04sQ0FBQyxHQUFDLENBQUMsRUFBRSxDQUFDO1NBQ1QsQ0FBQyxDQUFDLENBQUE7UUFDSCxNQUFNLEdBQUcsR0FBRyxJQUFJLFVBQVUsQ0FBQyxPQUFPLENBQUMsRUFBRSxFQUFFLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQTtRQUNsRSxNQUFNLEdBQUcsR0FBRyxJQUFJLGNBQWMsQ0FBQyxPQUFPLENBQUMsRUFBRSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUE7UUFDdkQsSUFBSSxDQUFDLEdBQUcsR0FBRyxHQUFHLENBQUE7UUFDZCxJQUFJLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQTtJQUNsQixDQUFDO0lBRUQsTUFBTTtRQUNGLElBQUksQ0FBQyxHQUFHLENBQUMsTUFBTSxFQUFFLENBQUE7SUFDckIsQ0FBQztJQUVELEtBQUs7UUFDRCxNQUFNLEVBQUUsT0FBTyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUE7UUFDbEMsTUFBTSxFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUUsR0FBRyxPQUFPLENBQUE7UUFDOUIsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFBO1FBQ1QsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUE7UUFDeEIsR0FBRyxDQUFDLFNBQVMsQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDLENBQUE7UUFDOUIsR0FBRyxDQUFDLFNBQVMsQ0FBQyxpQkFBaUIsRUFBRSxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUE7UUFDaEQsR0FBRyxDQUFDLGdCQUFnQixDQUFDLG9CQUFvQixFQUFFLE1BQU0sQ0FBQyxlQUFlLENBQUMsQ0FBQTtRQUNsRSxHQUFHLENBQUMsZ0JBQWdCLENBQUMscUJBQXFCLEVBQUUsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUE7UUFDcEUsR0FBRyxDQUFDLElBQUksRUFBRSxDQUFBO1FBQ1YsRUFBRSxDQUFDLFVBQVUsQ0FBQyxFQUFFLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQTtJQUNsQyxDQUFDO0NBQ0o7QUFFRCxTQUFTLGdCQUFnQjtJQUNyQixNQUFNLElBQUksR0FBRyxHQUFHLENBQUE7SUFDaEIsTUFBTSxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsR0FBRyw0QkFBNEIsQ0FBQyxJQUFJLEdBQUcsQ0FBQyxFQUFFLElBQUksR0FBRyxDQUFDLENBQUMsQ0FBQTtJQUN4RSxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsTUFBTSxDQUFDLENBQUE7SUFDL0MsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLE1BQU0sQ0FBQyxDQUFBO0lBQy9DLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxNQUFNLENBQUMsQ0FBQTtJQUMvQyxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsSUFBSSxFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUUsTUFBTSxDQUFDLENBQUE7SUFDOUMsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLE1BQU0sQ0FBQyxDQUFBO0lBQzlDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsRUFBRSxFQUFFLE1BQU0sRUFBRSxNQUFNLENBQUMsQ0FBQTtJQUM5QyxPQUFPLE1BQU0sQ0FBQTtBQUNqQixDQUFDO0FBRUQsU0FBUyxTQUFTLENBQ2QsT0FBaUMsRUFDakMsR0FBVyxFQUNYLEdBQVcsRUFDWCxJQUFZLEVBQ1osSUFBWSxFQUNaLFNBQWlCLEVBQ2pCLFNBQVMsR0FBRyxNQUFNO0lBRWxCLE1BQU0sQ0FBQyxHQUFHLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQTtJQUM1QixNQUFNLENBQUMsR0FBRyxDQUFDLEdBQUcsR0FBRyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUE7SUFDNUIsTUFBTSxDQUFDLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQTtJQUNyQixPQUFPLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQTtJQUM3QixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUE7SUFDbkIsT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFBO0lBQzlDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQTtJQUNkLElBQUksSUFBSSxFQUFFLENBQUM7UUFDUCxPQUFPLENBQUMsSUFBSSxHQUFHLFFBQVEsSUFBSSxHQUFHLEdBQUcsZUFBZSxDQUFBO1FBQ2hELE9BQU8sQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFBO1FBQzdCLE9BQU8sQ0FBQyxTQUFTLEdBQUcsUUFBUSxDQUFBO1FBQzVCLE9BQU8sQ0FBQyxZQUFZLEdBQUcsUUFBUSxDQUFBO1FBQy9CLE9BQU8sQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQTtJQUNoQyxDQUFDO1NBQU0sQ0FBQztRQUNKLE9BQU8sQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFBO1FBQzdCLE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQTtRQUNuQixPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxHQUFHLEdBQUcsRUFBRSxDQUFDLEdBQUcsR0FBRyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQTtRQUMxRCxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUE7SUFDbEIsQ0FBQztBQUNMLENBQUMifQ==