@tolokoban/tgd
Version:
ToloGameDev library for WebGL2
105 lines • 9.1 kB
JavaScript
import { TgdPainter } from "../painter.js";
import { TgdDataset } from "./../../dataset/dataset.js";
import { TgdVertexArray } from "./../../vao/index.js";
import { TgdProgram } from "./../../program/index.js";
import VERT from "./background.vert";
import FRAG from "./background.frag";
export class TgdPainterBackground extends TgdPainter {
constructor(context, { texture, x = 0, y = 0, z = 0.999999, zoom = 1, scaleX = 1, scaleY = 1, mode = "cover", } = {}) {
super();
this.context = context;
/**
* With a zoom of **1**, the image will have the smaller size to cover
* the whole scene.
*/
this.zoom = 1;
this.x = 0;
this.y = 0;
this.z = 1;
this.mode = "cover";
this.texture = texture;
this.mode = mode;
this.x = x;
this.y = y;
this.z = z;
this.zoom = zoom;
this.texture = texture;
this.program = new TgdProgram(context.gl, {
vert: VERT,
frag: FRAG,
});
const dataset = new TgdDataset({
attPoint: "vec2",
attUV: "vec2",
});
dataset.set("attPoint", new Float32Array([
-1 * scaleX,
+1 * scaleY,
+1 * scaleX,
+1 * scaleY,
-1 * scaleX,
-1 * scaleY,
+1 * scaleX,
-1 * scaleY,
]));
dataset.set("attUV", new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]));
this.vao = new TgdVertexArray(context.gl, this.program, [dataset]);
}
delete() {
const { program, vao } = this;
program.delete();
vao.delete();
}
paint() {
const { gl } = this.context;
const { vao, program, texture, zoom, x, y, z, mode } = this;
program.use();
const { scaleX, scaleY } = mode === "cover"
? this.getScaleForCover()
: this.getScaleForContain();
program.uniform2f("uniScale", scaleX, scaleY);
program.uniform2f("uniScroll", x, y);
program.uniform1f("uniZoom", 1 / zoom);
program.uniform1f("uniZ", z);
texture === null || texture === void 0 ? void 0 : texture.activate(0, program, "uniTexture");
gl.disable(gl.CULL_FACE);
vao.bind();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
getScaleForCover() {
const { texture, context } = this;
if (!texture)
return { scaleX: 1, scaleY: 1 };
const { drawingBufferWidth: width, drawingBufferHeight: height } = context.gl;
const horizontal = texture.width * height > texture.height * width;
const scaleX = horizontal
? (texture.width * height) / (width * texture.height)
: 1;
const scaleY = horizontal
? 1
: (texture.height * width) / (height * texture.width);
return { scaleX, scaleY };
}
getScaleForContain() {
const { texture, context } = this;
if (!texture)
return { scaleX: 1, scaleY: 1 };
const { drawingBufferWidth: width, drawingBufferHeight: height } = context.gl;
const aspectRatio = width / height;
const aspectRatioTexture = texture.width / texture.height;
const sx = width / texture.width;
const sy = height / texture.height;
if (sx > sy) {
// We took all vertical space and have void on right an left.
return {
scaleX: aspectRatioTexture / aspectRatio,
scaleY: 1,
};
}
return {
scaleX: 1,
scaleY: aspectRatio / aspectRatioTexture,
};
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFja2dyb3VuZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWludGVyL2JhY2tncm91bmQvYmFja2dyb3VuZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3ZDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUNqRCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sVUFBVSxDQUFBO0FBR3pDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFekMsT0FBTyxJQUFJLE1BQU0sbUJBQW1CLENBQUE7QUFDcEMsT0FBTyxJQUFJLE1BQU0sbUJBQW1CLENBQUE7QUE0QnBDLE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxVQUFVO0lBZ0JoRCxZQUNxQixPQUF1QyxFQUN4RCxFQUNJLE9BQU8sRUFDUCxDQUFDLEdBQUcsQ0FBQyxFQUNMLENBQUMsR0FBRyxDQUFDLEVBQ0wsQ0FBQyxHQUFHLFFBQVEsRUFDWixJQUFJLEdBQUcsQ0FBQyxFQUNSLE1BQU0sR0FBRyxDQUFDLEVBQ1YsTUFBTSxHQUFHLENBQUMsRUFDVixJQUFJLEdBQUcsT0FBTyxNQUN3QixFQUFFO1FBRTVDLEtBQUssRUFBRSxDQUFBO1FBWlUsWUFBTyxHQUFQLE9BQU8sQ0FBZ0M7UUFYNUQ7OztXQUdHO1FBQ0ksU0FBSSxHQUFHLENBQUMsQ0FBQTtRQUNSLE1BQUMsR0FBRyxDQUFDLENBQUE7UUFDTCxNQUFDLEdBQUcsQ0FBQyxDQUFBO1FBQ0wsTUFBQyxHQUFHLENBQUMsQ0FBQTtRQUNMLFNBQUksR0FBd0IsT0FBTyxDQUFBO1FBZ0J0QyxJQUFJLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQTtRQUN0QixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQTtRQUNoQixJQUFJLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQTtRQUNWLElBQUksQ0FBQyxDQUFD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