@tolokoban/tgd
Version:
ToloGameDev library for WebGL2
122 lines • 9.82 kB
JavaScript
import { TgdDataset } from "./../../dataset/dataset.js";
import { TgdProgram } from "./../../program/index.js";
import { TgdTexture2D } from "./../../texture/index.js";
import { webglPresetBlend, webglPresetCull, webglPresetDepth } from "./../../utils/index.js";
import { TgdVertexArray } from "./../../vao/index.js";
import { TgdPainterClear } from "../clear.js";
import { TgdPainterFramebuffer } from "../framebuffer.js";
import { TgdPainter } from "../painter.js";
import { TgdPainterState } from "../state/index.js";
import { FRAG } from "./background.frag.js";
import { VERT } from "./background.vert.js";
/**
* Complex backgrounds can be long to render. If we use a fixed camera,
* we just need to render it once, store the image and the depth buffer and re-use them.
*
* Assuming you already have an image of the complex background (maybe you rendered it
* in Ray tracing in Blender), this painter will help you cache the depth buffer.
*
* The children must output a special color that will encode a 24 bits depth for each fragment.
* Here is the formula you can use (GLSL code):
*
* ```glsl
* int z = int(float(0xFFFFFF) * gl_FragCoord.z);
* float r = float(z & 0xFF) / 255.0;
* z >>= 8;
* float g = float(z & 0xFF) / 255.0;
* z >>= 8;
* float b = float(z & 0xFF) / 255.0;
* return vec4(r, g, b, 1);
* ```
*
* The material [TgdMaterialDepth](./TgdMaterialDepth.html) does just that.
*
* @see TgdMaterialDepth
*/
export class TgdPainterBackgroundWithDepth extends TgdPainter {
constructor(context, { background, children }) {
super();
this.context = context;
this.lastWidth = -1;
this.lastHeight = -1;
const { gl } = context;
const fb = gl.createFramebuffer();
if (!fb)
throw new Error("Unable to create a WebGL2 Frame buffer!");
this.textureDepth = new TgdTexture2D(context).setParams({
wrapS: "MIRRORED_REPEAT",
wrapT: "MIRRORED_REPEAT",
magFilter: "NEAREST",
minFilter: "NEAREST",
});
this.framebuffer = new TgdPainterFramebuffer(context, {
textureColor0: this.textureDepth,
depthBuffer: true,
children: [
new TgdPainterState(context, {
children: [
new TgdPainterClear(context, {
color: [1, 1, 1, 1],
depth: 1,
}),
...children,
],
depth: webglPresetDepth.less,
}),
],
});
this.textureColor = background.setParams({
wrapS: "MIRRORED_REPEAT",
wrapT: "MIRRORED_REPEAT",
magFilter: "LINEAR",
minFilter: "LINEAR",
});
this.program = new TgdProgram(context.gl, {
vert: VERT,
frag: FRAG,
});
const dataset = new TgdDataset({
attPoint: "vec2",
attUV: "vec2",
});
dataset.set("attPoint", new Float32Array([-1, +1, +1, +1, -1, -1, +1, -1]));
dataset.set("attUV", new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]));
this.vao = new TgdVertexArray(context.gl, this.program, [dataset]);
}
delete() {
const { vao, framebuffer, textureDepth: texture } = this;
framebuffer.delete();
texture.delete();
vao.delete();
}
paint(time, delta) {
const { context, vao, program, textureDepth, textureColor, framebuffer } = this;
const { gl, width, height } = context;
if (width !== this.lastWidth || height !== this.lastHeight) {
framebuffer.paint(time, delta);
this.lastWidth = width;
this.lastHeight = height;
}
program.use();
const scale = this.getScale();
program.uniform1f("uniScale", scale);
textureColor.activate(0, program, "uniTexture");
textureDepth.activate(1, program, "uniTextureDepth");
vao.bind();
TgdPainterState.do(this.context, {
cull: webglPresetCull.off,
depth: webglPresetDepth.always,
blend: webglPresetBlend.off,
action: () => gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4),
});
vao.unbind();
}
getScale() {
const { textureColor, context } = this;
const { drawingBufferWidth: width, drawingBufferHeight: height } = context.gl;
const ratioTexture = textureColor.width / textureColor.height;
const ratioScreen = width / height;
return ratioScreen / ratioTexture;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFja2dyb3VuZC13aXRoLWRlcHRoLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3BhaW50ZXIvYmFja2dyb3VuZC13aXRoLWRlcHRoL2JhY2tncm91bmQtd2l0aC1kZXB0aC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0JBQXNCLENBQUE7QUFDakQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUV6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQzNDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxlQUFlLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDaEYsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLFVBQVUsQ0FBQTtBQUN6QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sVUFBVSxDQUFBO0FBQzFDLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGdCQUFnQixDQUFBO0FBQ3RELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDdkMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLFVBQVUsQ0FBQTtBQUMxQyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBT3hDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXVCRztBQUNILE1BQU0sT0FBTyw2QkFBOEIsU0FBUSxVQUFVO0lBU3pELFlBQ29CLE9BQW1CLEVBQ25DLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBd0M7UUFFOUQsS0FBSyxFQUFFLENBQUE7UUFIUyxZQUFPLEdBQVAsT0FBTyxDQUFZO1FBSi9CLGNBQVMsR0FBRyxDQUFDLENBQUMsQ0FBQTtRQUNkLGVBQVUsR0FBRyxDQUFDLENBQUMsQ0FBQTtRQU9uQixNQUFNLEVBQUUsRUFBRSxFQUFF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