diff --git a/js/main.js b/js/main.js index ce5bb25..f22a17a 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,6 @@ import { makeFullScreenQuad, makePipeline } from "./utils.js"; import makeConfig from "./config.js"; -import makeMatrixRenderer from "./renderer.js"; +import makeRain from "./rainPass.js"; import makeBloomPass from "./bloomPass.js"; import makePalettePass from "./palettePass.js"; import makeStripePass from "./stripePass.js"; @@ -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 pipeline = makePipeline([makeMatrixRenderer, effect === "none" ? null : makeBloomPass, effects[effect]], (p) => p.outputs, regl, config); - const drawToScreen = regl({ - uniforms: { - tex: pipeline[pipeline.length - 1].outputs.primary, - }, - }); + + 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 tick = regl.frame(({ viewportWidth, viewportHeight }) => { // tick.cancel(); diff --git a/js/renderer.js b/js/rainPass.js similarity index 94% rename from js/renderer.js rename to js/rainPass.js index 73c5e18..300cc6c 100644 --- a/js/renderer.js +++ b/js/rainPass.js @@ -35,10 +35,10 @@ export default (regl, config) => { const uniforms = { ...extractEntries(config, [ - // rain general + // general "glyphHeightToWidth", "glyphTextureColumns", - // rain update + // compute "animationSpeed", "brightnessMinimum", "brightnessMix", @@ -55,9 +55,9 @@ export default (regl, config) => { "rippleSpeed", "rippleThickness", "resurrectingCodeRatio", - // rain render vertex + // render vertex "forwardSpeed", - // rain render fragment + // render fragment "glyphEdgeCrop", "isPolar", ]), @@ -94,7 +94,7 @@ export default (regl, config) => { const output = makePassFBO(regl, config.useHalfFloat); - const updateFrag = loadText("../shaders/update.frag"); + const updateFrag = loadText("../shaders/compute.frag"); const update = regl({ frag: regl.prop("frag"), uniforms: { @@ -114,8 +114,8 @@ export default (regl, config) => { ); // We render the code into an FBO using MSDFs: https://github.com/Chlumsky/msdfgen - const renderVert = loadText("../shaders/render.vert"); - const renderFrag = loadText("../shaders/render.frag"); + const renderVert = loadText("../shaders/rain.vert"); + const renderFrag = loadText("../shaders/rain.frag"); const render = regl({ blend: { enable: true, diff --git a/shaders/update.frag b/shaders/compute.frag similarity index 100% rename from shaders/update.frag rename to shaders/compute.frag diff --git a/shaders/render.frag b/shaders/rain.frag similarity index 100% rename from shaders/render.frag rename to shaders/rain.frag diff --git a/shaders/render.vert b/shaders/rain.vert similarity index 100% rename from shaders/render.vert rename to shaders/rain.vert