eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-16 21:39:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Added some documentation, cleaned up some code, fleshed out the remaining work to make the project a little easier for newcomers to approach

Browse Source
This commit is contained in:
Rezmason
2021-10-20 21:01:32 -07:00
parent b4bece1264
commit 4c6ff879fd
12 changed files with 156 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
js/main.js
View File

@@ -1,5 +1,7 @@
import { makeFullScreenQuad, makePipeline } from "./utils.js";
import makeConfig from "./config.js";
import makeConfig from "./config.js"; // The settings of the effect, specified in the URL query params
import makeRain from "./rainPass.js";
import makeBloomPass from "./bloomPass.js";
import makePalettePass from "./palettePass.js";
@@ -34,12 +36,10 @@ const effects = {
};
const config = makeConfig(window.location.search);
const resolution = config.resolution;
const effect = config.effect in effects ? config.effect : "plain";
const resize = () => {
canvas.width = Math.ceil(canvas.clientWidth * resolution);
canvas.height = Math.ceil(canvas.clientHeight * resolution);
canvas.width = Math.ceil(canvas.clientWidth * config.resolution);
canvas.height = Math.ceil(canvas.clientHeight * config.resolution);
};
window.onresize = resize;
resize();
@@ -49,12 +49,11 @@ const dimensions = { width: 1, height: 1 };
document.body.onload = async () => {
// All this takes place in a full screen quad.
const fullScreenQuad = makeFullScreenQuad(regl);
const bloomPass = effect === "none" ? null : makeBloomPass;
const pipeline = makePipeline([makeRain, bloomPass, effects[effect]], (p) => p.outputs, regl, config);
const uniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
const drawToScreen = regl({ uniforms });
await Promise.all(pipeline.map(({ ready }) => ready));
const effectName = config.effect in effects ? config.effect : "plain";
const pipeline = makePipeline([makeRain, makeBloomPass, effects[effectName]], (p) => p.outputs, regl, config);
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) {