@tolokoban/tgd
Version:
ToloGameDev library for WebGL2
98 lines • 8.72 kB
JavaScript
import { TgdDataset } from "./../../../dataset/index.js";
import { TgdPainter } from "./../../../painter/painter.js";
import { TgdProgram } from "./../../../program/index.js";
import { TgdTexture2D } from "./../../../texture/index.js";
import { tgdCanvasCreateWithContext2D } from "./../../../utils/index.js";
import { TgdVertexArray } from "./../../../vao/index.js";
import { FRAG } from "./shader.frag.js";
import { VERT } from "./shader.vert.js";
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlwcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jYW52YXMvZ2l6bW8vcGFpbnRlci90aXBzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDekMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ2pELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUMzQyxPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDekQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLFVBQVUsQ0FBQTtBQUV6QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sZUFBZSxDQUFBO0FBQ3BDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxlQUFlLENBQUE7QUFFcEMsTUFBTSxPQUFPLFdBQVksU0FBUSxVQUFVO0lBS3ZDLFlBQTRCLE9BQW1CO1FBQzNDLEtBQUssRUFBRSxDQUFBO1FBRGlCLFlBQU8sR0FBUCxPQUFPLENBQVk7UUFFM0MsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLFlBQVksQ0FBQyxPQUFPLENBQUM7YUFDbkMsVUFBVSxDQUFDLGdCQUFnQixFQUFFLENBQUM7YUFDOUIsU0FBUyxDQUFDO1lBQ1AsU0FBUyxFQUFFLFFBQVE7WUFDbkIsU0FBUyxFQUFFLFFBQVE7U0FDdEIsQ0FBQzthQUNELGNBQWMsRUFBRSxDQUFBO1FBQ3JCLE1BQU0sSUFBSSxHQUFHLElBQUksVUFBVSxDQUFDO1lBQ3hCLE1BQU0sRUFBRSxNQUFNO1lBQ2QsS0FBSyxFQUFFLE1BQU07U0FDaEIsQ0FBQyxDQUFBO1FBQ0Ysa0JBQWtCO1FBQ2xCLElBQUksQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLElBQUksWUFBWSxDQUFDO1lBQ2hDLENBQUMsRUFBRSxD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