mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-14 12:29:30 -07:00
103 lines
3.1 KiB
JavaScript
103 lines
3.1 KiB
JavaScript
import { makeFullScreenQuad, makePipeline } from "./utils.js";
|
|
|
|
import makeRain from "./rainPass.js";
|
|
import makeBloomPass from "./bloomPass.js";
|
|
import makePalettePass from "./palettePass.js";
|
|
import makeStripePass from "./stripePass.js";
|
|
import makeImagePass from "./imagePass.js";
|
|
import makeResurrectionPass from "./resurrectionPass.js";
|
|
import makeQuiltPass from "./quiltPass.js";
|
|
import makeRipplesPass from "./ripplesPass.js";
|
|
import getLKG from "./lkgHelper.js";
|
|
|
|
const effects = {
|
|
none: null,
|
|
plain: makePalettePass,
|
|
customStripes: makeStripePass,
|
|
stripes: makeStripePass,
|
|
pride: makeStripePass,
|
|
transPride: makeStripePass,
|
|
trans: makeStripePass,
|
|
image: makeImagePass,
|
|
resurrection: makeResurrectionPass,
|
|
resurrections: makeResurrectionPass,
|
|
ripples: makeRipplesPass,
|
|
};
|
|
|
|
const dimensions = { width: 1, height: 1 };
|
|
|
|
const loadJS = (src) =>
|
|
new Promise((resolve, reject) => {
|
|
const tag = document.createElement("script");
|
|
tag.onload = resolve;
|
|
tag.onerror = reject;
|
|
tag.src = src;
|
|
document.body.appendChild(tag);
|
|
});
|
|
|
|
export default async (canvas, config) => {
|
|
await Promise.all([loadJS("lib/regl.js"), loadJS("lib/gl-matrix.js")]);
|
|
|
|
const resize = () => {
|
|
canvas.width = Math.ceil(canvas.clientWidth * config.resolution);
|
|
canvas.height = Math.ceil(canvas.clientHeight * config.resolution);
|
|
};
|
|
window.onresize = resize;
|
|
// if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
|
|
// window.onclick = () => {
|
|
// if (document.fullscreenElement == null) {
|
|
// if (canvas.webkitRequestFullscreen != null) {
|
|
// canvas.webkitRequestFullscreen();
|
|
// } else {
|
|
// canvas.requestFullscreen();
|
|
// }
|
|
// } else {
|
|
// document.exitFullscreen();
|
|
// }
|
|
// };
|
|
// }
|
|
resize();
|
|
|
|
window.ripples = [0,0,0]
|
|
window.onclick = (e) => { // ripple init
|
|
console.log(e)
|
|
window.ripples = [Date.now(), e.clientX, e.clientY]
|
|
console.log(ripples)
|
|
|
|
}
|
|
|
|
|
|
const regl = createREGL({
|
|
canvas,
|
|
extensions: ["OES_texture_half_float", "OES_texture_half_float_linear"],
|
|
// These extensions are also needed, but Safari misreports that they are missing
|
|
optionalExtensions: ["EXT_color_buffer_half_float", "WEBGL_color_buffer_float", "OES_standard_derivatives"],
|
|
});
|
|
|
|
const lkg = await getLKG(config.useHoloplay, true);
|
|
|
|
// All this takes place in a full screen quad.
|
|
const fullScreenQuad = makeFullScreenQuad(regl);
|
|
const effectName = config.effect in effects ? config.effect : "plain";
|
|
const pipeline = makePipeline({ regl, config, lkg }, [makeRain, makeBloomPass, effects[effectName], makeQuiltPass]);
|
|
const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
|
|
const drawToScreen = regl({ uniforms: screenUniforms });
|
|
await Promise.all(pipeline.map((step) => step.ready));
|
|
const tick = regl.frame(({ viewportWidth, viewportHeight }) => {
|
|
// tick.cancel();
|
|
if (dimensions.width !== viewportWidth || dimensions.height !== viewportHeight) {
|
|
dimensions.width = viewportWidth;
|
|
dimensions.height = viewportHeight;
|
|
for (const step of pipeline) {
|
|
step.setSize(viewportWidth, viewportHeight);
|
|
}
|
|
}
|
|
fullScreenQuad(() => {
|
|
for (const step of pipeline) {
|
|
step.execute();
|
|
}
|
|
drawToScreen();
|
|
});
|
|
});
|
|
};
|