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

Massive overhaul: the renderers are now classes that implement Renderer; replaced webpack and rollup with vite; converted bundle-contents to "core" and "full" bundle profiles; renamed "inclusions" to "staticAssets", which are "url" base64-encoded images and "raw" text strings; renamed the Matrix component module to the JSX extension; built out a test scaffold at tools/test/index.html to manually test the various deploy options.

Browse Source
This commit is contained in:
Rezmason
2025-05-23 12:49:10 -07:00
parent 658f07c6ab
commit 3b837c6f06
29 changed files with 2338 additions and 6918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
js/Matrix.js → js/Matrix.jsx
View File

@@ -107,14 +107,32 @@ import makeConfig from "./utils/config";
export const Matrix = memo((props) => {
const { style, className, ...rawConfigProps } = props;
const elProps = { style, className };
const matrix = useRef(null);
const [rCanvas, setCanvas] = useState(null);
const domElement = useRef(null);
const [rRenderer, setRenderer] = useState(null);
const [rRain, setRain] = useState(null);
const [rSize, setSize] = useState([1, 1]);
const [rConfig, setConfig] = useState(makeConfig({}));
const rendererClasses = {};
const configProps = Object.fromEntries(
Object.entries(rawConfigProps).filter(([_, value]) => value != null),
);
const resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
const contentBoxSize = entry.contentBoxSize[0];
setSize([contentBoxSize.inlineSize, contentBoxSize.blockSize]);
return;
}
});
useEffect(() => {
if (domElement.current == null) return;
resizeObserver.observe(domElement.current);
}, [domElement]);
useEffect(() => {
setConfig(makeConfig({
...Object.fromEntries(
Object.entries(rawConfigProps).filter(([_, value]) => value != null),
)
}));
}, [props]);
const supportsWebGPU = () => {
return (
@@ -125,62 +143,50 @@ export const Matrix = memo((props) => {
};
const cleanup = () => {
if (rCanvas != null) {
rCanvas.remove();
setCanvas(null);
}
if (rRain != null) {
rRenderer?.destroy(rRain);
setRain(null);
}
if (rRenderer != null) {
setRenderer(null);
}
if (rRenderer == null) return;
rRenderer.canvas.remove();
rRenderer.destroy();
setRenderer(null);
};
useEffect(() => {
const useWebGPU = supportsWebGPU() && ["webgpu"].includes(configProps.renderer?.toLowerCase());
const useWebGPU = supportsWebGPU() && rConfig.renderer === "webgpu";
const isWebGPU = rRenderer?.type === "webgpu";
if (rRenderer != null && useWebGPU === isWebGPU) {
return;
}
cleanup();
const canvas = document.createElement("canvas");
canvas.style.width = "100%";
canvas.style.height = "100%";
matrix.current.appendChild(canvas);
setCanvas(canvas);
const loadRain = async () => {
let renderer;
if (useWebGPU) {
renderer = await import("./webgpu/main.js");
rendererClasses.webgpu ??= (await import("./webgpu/renderer.js")).default;
renderer = new (rendererClasses.webgpu)();
} else {
renderer = await import("./regl/main.js");
rendererClasses.regl ??= (await import("./regl/renderer.js")).default;
renderer = new (rendererClasses.regl)();
}
setRenderer(renderer);
const rain = await renderer.init(canvas);
setRain(rain);
await renderer.ready;
const canvas = renderer.canvas;
canvas.style.width = "100%";
canvas.style.height = "100%";
domElement.current.appendChild(canvas);
};
loadRain();
if (rRenderer == null || useWebGPU !== isWebGPU) {
cleanup();
loadRain();
}
return cleanup;
}, [props.renderer]);
}, [rConfig.renderer]);
useEffect(() => {
if (rRain == null || rRain.destroyed) {
return;
}
const refresh = async () => {
await rRenderer.formulate(rRain, makeConfig(configProps));
};
refresh();
}, [props, rRain]);
if (rRenderer?.destroyed ?? true) return;
rRenderer.formulate(rConfig);
}, [rRenderer, rConfig]);
return <div ref={matrix} {...elProps}></div>;
useEffect(() => {
if (rRenderer?.destroyed ?? true) return;
rRenderer.size = rSize.map(n => n * rConfig.resolution);
}, [rRenderer, rConfig.resolution, rSize]);
return <div ref={domElement} {...elProps}></div>;
});

5
js/bundle-contents.js
View File

@@ -1,5 +0,0 @@
import { Matrix } from "./Matrix";
import inclusions from "./inclusions";
import * as reglRenderer from "./regl/main";
import * as webgpuRenderer from "./webgpu/main";
export { inclusions, reglRenderer, webgpuRenderer, Matrix };

6
js/bundles/core.js Normal file
View File

@@ -0,0 +1,6 @@
import { Matrix } from "../Matrix";
import staticAssets from "../staticAssets";
import makeConfig from "../utils/config";
import REGLRenderer from "../regl/renderer";
import WebGPURenderer from "../webgpu/renderer";
export { staticAssets, REGLRenderer, WebGPURenderer, Matrix, makeConfig };

6
js/bundles/full.js Normal file
View File

@@ -0,0 +1,6 @@
import { Matrix } from "../Matrix";
import staticAssets from "../staticAssets";
import makeConfig from "../utils/config";
import REGLRenderer from "../regl/renderer";
import WebGPURenderer from "../webgpu/renderer";
export { staticAssets, REGLRenderer, WebGPURenderer, Matrix, makeConfig };

8
js/fetchLibraries.js
View File

@@ -1,10 +1,10 @@
export default async () => {
let glMatrix, createREGL, inclusions;
let glMatrix, createREGL, staticAssets;
try {
glMatrix = await import("gl-matrix");
createREGL = (await import("regl")).default;
inclusions = (await import("./inclusions.js")).default;
staticAssets = (await import("./staticAssets.js")).default;
} catch {
const loadJS = (src) =>
new Promise((resolve, reject) => {
@@ -15,8 +15,8 @@ export default async () => {
await Promise.all([loadJS("lib/regl.min.js"), loadJS("lib/gl-matrix.js")]);
glMatrix = globalThis.glMatrix;
createREGL = globalThis.createREGL;
inclusions = [];
staticAssets = [];
}
return { glMatrix, createREGL, inclusions };
return { glMatrix, createREGL, staticAssets };
};

74
js/inclusions.js
View File

@@ -1,74 +0,0 @@
export default [
[
"import::shaders/glsl/bloomPass.highPass.frag.glsl",
() => import("../shaders/glsl/bloomPass.highPass.frag.glsl"),
],
[
"import::shaders/glsl/bloomPass.blur.frag.glsl",
() => import("../shaders/glsl/bloomPass.blur.frag.glsl"),
],
[
"import::shaders/glsl/bloomPass.combine.frag.glsl",
() => import("../shaders/glsl/bloomPass.combine.frag.glsl"),
],
["import::shaders/glsl/imagePass.frag.glsl", () => import("../shaders/glsl/imagePass.frag.glsl")],
[
"import::shaders/glsl/mirrorPass.frag.glsl",
() => import("../shaders/glsl/mirrorPass.frag.glsl"),
],
[
"import::shaders/glsl/palettePass.frag.glsl",
() => import("../shaders/glsl/palettePass.frag.glsl"),
],
[
"import::shaders/glsl/rainPass.intro.frag.glsl",
() => import("../shaders/glsl/rainPass.intro.frag.glsl"),
],
[
"import::shaders/glsl/rainPass.raindrop.frag.glsl",
() => import("../shaders/glsl/rainPass.raindrop.frag.glsl"),
],
[
"import::shaders/glsl/rainPass.symbol.frag.glsl",
() => import("../shaders/glsl/rainPass.symbol.frag.glsl"),
],
[
"import::shaders/glsl/rainPass.effect.frag.glsl",
() => import("../shaders/glsl/rainPass.effect.frag.glsl"),
],
["import::shaders/glsl/rainPass.vert.glsl", () => import("../shaders/glsl/rainPass.vert.glsl")],
["import::shaders/glsl/rainPass.frag.glsl", () => import("../shaders/glsl/rainPass.frag.glsl")],
[
"import::shaders/glsl/stripePass.frag.glsl",
() => import("../shaders/glsl/stripePass.frag.glsl"),
],
["import::assets/coptic_msdf.png", () => import("../assets/coptic_msdf.png")],
["import::assets/gothic_msdf.png", () => import("../assets/gothic_msdf.png")],
["import::assets/matrixcode_msdf.png", () => import("../assets/matrixcode_msdf.png")],
["import::assets/resurrections_msdf.png", () => import("../assets/resurrections_msdf.png")],
["import::assets/megacity_msdf.png", () => import("../assets/megacity_msdf.png")],
[
"import::assets/resurrections_glint_msdf.png",
() => import("../assets/resurrections_glint_msdf.png"),
],
["import::assets/huberfish_a_msdf.png", () => import("../assets/huberfish_a_msdf.png")],
["import::assets/huberfish_d_msdf.png", () => import("../assets/huberfish_d_msdf.png")],
[
"import::assets/gtarg_tenretniolleh_msdf.png",
() => import("../assets/gtarg_tenretniolleh_msdf.png"),
],
["import::assets/gtarg_alientext_msdf.png", () => import("../assets/gtarg_alientext_msdf.png")],
["import::assets/neomatrixology_msdf.png", () => import("../assets/neomatrixology_msdf.png")],
["import::assets/sand.png", () => import("../assets/sand.png")],
["import::assets/pixel_grid.png", () => import("../assets/pixel_grid.png")],
["import::assets/mesh.png", () => import("../assets/mesh.png")],
["import::assets/metal.png", () => import("../assets/metal.png")],
["import::shaders/wgsl/bloomBlur.wgsl", () => import("../shaders/wgsl/bloomBlur.wgsl")],
["import::shaders/wgsl/bloomCombine.wgsl", () => import("../shaders/wgsl/bloomCombine.wgsl")],
["import::shaders/wgsl/endPass.wgsl", () => import("../shaders/wgsl/endPass.wgsl")],
["import::shaders/wgsl/imagePass.wgsl", () => import("../shaders/wgsl/imagePass.wgsl")],
["import::shaders/wgsl/mirrorPass.wgsl", () => import("../shaders/wgsl/mirrorPass.wgsl")],
["import::shaders/wgsl/palettePass.wgsl", () => import("../shaders/wgsl/palettePass.wgsl")],
["import::shaders/wgsl/rainPass.wgsl", () => import("../shaders/wgsl/rainPass.wgsl")],
["import::shaders/wgsl/stripePass.wgsl", () => import("../shaders/wgsl/stripePass.wgsl")],
];

118
js/index.js
View File

@@ -1,118 +0,0 @@
import React, { useState } from "react";
import { unmountComponentAtNode } from "react-dom";
import { createRoot } from "react-dom/client";
import { Matrix } from "./Matrix";
const root = createRoot(document.getElementById("root"));
const versions = [
"classic",
"3d",
"resurrections",
"operator",
"megacity",
"nightmare",
"paradise",
"trinity",
"bugs",
"morpheus",
];
const effects = ["none", "plain", "palette", "stripes", "pride", "trans", "image", "mirror"];
const App = () => {
const [version, setVersion] = useState(versions[0]);
const [effect, setEffect] = useState("plain");
const [numColumns, setNumColumns] = useState(80);
const [cursorColor, setCursorColor] = useState(null);
const [backgroundColor, setBackgroundColor] = useState("0,0,0");
const [rendererType, setRendererType] = useState(null);
const [density, setDensity] = useState(2);
const [destroyed, setDestroyed] = useState(false);
const onVersionButtonClick = () => {
setVersion((s) => {
let index = versions.indexOf(version) + 1;
if (index === versions.length) {
index = 0;
}
const newVersion = versions[index];
console.log("version:", newVersion);
return newVersion;
});
setCursorColor(null);
setBackgroundColor(null);
};
const onEffectButtonClick = () => {
setEffect((s) => {
let index = effects.indexOf(effect) + 1;
if (index === effects.length) {
index = 0;
}
const newEffect = effects[index];
console.log("effect:", newEffect);
return newEffect;
});
setCursorColor(null);
setBackgroundColor(null);
};
const onRendererButtonClick = () => {
setRendererType(() => (rendererType === "webgpu" ? "regl" : "webgpu"));
};
const onDestroyButtonClick = () => {
setDestroyed(true);
};
return (
<div>
<h1>Rain</h1>
<button onClick={onVersionButtonClick}>Version: "{version}"</button>
<button onClick={onEffectButtonClick}>Effect: "{effect}"</button>
<button onClick={onRendererButtonClick}>Renderer: {rendererType ?? "default (regl)"}</button>
<button onClick={onDestroyButtonClick}>Destroy</button>
<label htmlFor="cursor-color">Cursor color: </label>
<input
name="cursor-color"
type="color"
onChange={(e) => {
const values = e.target.value
.match(/[\da-fA-F]{2}/g)
.map((s) => parseInt(s, 16) / 0xff)
.join(",");
setCursorColor(values);
}}
/>
<label htmlFor="background-color">Background color: </label>
<input
name="background-color"
type="color"
onChange={(e) => {
const values = e.target.value
.match(/[\da-fA-F]{2}/g)
.map((s) => parseInt(s, 16) / 0xff)
.join(",");
setBackgroundColor(values);
}}
/>
<label htmlFor="num-columns"># of columns:</label>
<input
name="num-columns"
type="range"
min="10"
max="160"
step="1"
onInput={(e) => setNumColumns(parseInt(e.target.value))}
/>
{!destroyed && (
<Matrix
style={{ width: "80vw", height: "45vh" }}
version={version}
effect={effect}
numColumns={numColumns}
renderer={rendererType}
cursorColor={cursorColor}
backgroundColor={backgroundColor}
density={2.0}
/>
)}
</div>
);
};
root.render(<App />);

27
js/main.js
View File

@@ -1,7 +1,5 @@
import makeConfig from "./utils/config.js";
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
document.addEventListener("touchmove", (e) => e.preventDefault(), {
passive: false,
});
@@ -25,12 +23,21 @@ document.body.onload = async () => {
const urlParams = new URLSearchParams(window.location.search);
const config = makeConfig(Object.fromEntries(urlParams.entries()));
const useWebGPU = (await supportsWebGPU()) && ["webgpu"].includes(config.renderer?.toLowerCase());
const solution = import(`./${useWebGPU ? "webgpu" : "regl"}/main.js`);
const rendererModule = import(`./${useWebGPU ? "webgpu" : "regl"}/renderer.js`);
const initialize = async (canvas, config) => {
const { init, formulate } = await solution;
const rain = await init(canvas);
await formulate(rain, config);
const initialize = async (config) => {
const Renderer = (await rendererModule).default;
const renderer = new Renderer();
await renderer.ready;
renderer.size = [window.innerWidth, window.innerHeight].map(n => n * (window.devicePixelRatio ?? 1) * config.resolution);
window.onresize = () => {
renderer.size = [window.innerWidth, window.innerHeight].map(n => n * (window.devicePixelRatio ?? 1) * config.resolution);
};
window.addEventListener("dblclick", () => {
renderer.fullscreen = !renderer.fullscreen;
});
document.body.appendChild(renderer.canvas);
await renderer.formulate(config);
};
if (isRunningSwiftShader() && !config.suppressWarnings) {
@@ -41,17 +48,15 @@ document.body.onload = async () => {
<button class="blue pill">Plug me in</button>
<a class="red pill" target="_blank" href="https://www.google.com/search?q=chrome+enable+hardware+acceleration">Free me</a>
`;
canvas.style.display = "none";
document.body.appendChild(notice);
document.querySelector(".blue.pill").addEventListener("click", async () => {
config.suppressWarnings = true;
urlParams.set("suppressWarnings", true);
history.replaceState({}, "", "?" + unescape(urlParams.toString()));
await initialize(canvas, config);
canvas.style.display = "unset";
await initialize(config);
document.body.removeChild(notice);
});
} else {
await initialize(canvas, config);
await initialize(config);
}
};

170
js/regl/main.js
View File

@@ -1,170 +0,0 @@
import { makeFullScreenQuad, makePipeline } from "./utils.js";
import fetchLibraries from "../fetchLibraries.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 makeMirrorPass from "./mirrorPass.js";
import { setupCamera, cameraCanvas, cameraAspectRatio } from "../utils/camera.js";
const effects = {
none: null,
plain: makePalettePass,
palette: makePalettePass,
customStripes: makeStripePass,
stripes: makeStripePass,
pride: makeStripePass,
transPride: makeStripePass,
trans: makeStripePass,
image: makeImagePass,
mirror: makeMirrorPass,
};
let createREGL, glMatrix, inclusions;
export const init = async (canvas) => {
const libraries = await fetchLibraries();
createREGL = libraries.createREGL;
glMatrix = libraries.glMatrix;
inclusions = libraries.inclusions;
const resize = () => {
const devicePixelRatio = window.devicePixelRatio ?? 1;
canvas.width = Math.ceil(canvas.clientWidth * devicePixelRatio * rain.resolution);
canvas.height = Math.ceil(canvas.clientHeight * devicePixelRatio * rain.resolution);
};
const doubleClick = () => {
if (!document.fullscreenEnabled && !document.webkitFullscreenEnabled) {
return;
}
if (document.fullscreenElement != null) {
document.exitFullscreen();
return;
}
if (canvas.webkitRequestFullscreen != null) {
canvas.webkitRequestFullscreen();
} else {
canvas.requestFullscreen();
}
};
const extensions = ["OES_texture_half_float", "OES_texture_half_float_linear"];
// These extensions are also needed, but Safari misreports that they are missing
const optionalExtensions = [
"EXT_color_buffer_half_float",
"WEBGL_color_buffer_float",
"OES_standard_derivatives",
];
const regl = createREGL({ canvas, pixelRatio: 1, extensions, optionalExtensions });
const cache = new Map(inclusions);
const rain = { canvas, resize, doubleClick, cache, regl, resolution: 1 };
window.addEventListener("dblclick", doubleClick);
window.addEventListener("resize", resize);
resize();
return rain;
};
export const formulate = async (rain, config) => {
if (rain.destroyed) {
throw new Error("Cannot formulate a destroyed rain instance.");
}
const { resize, canvas, cache, regl } = rain;
rain.resolution = config.resolution;
resize();
const dimensions = { width: 1, height: 1 };
if (config.useCamera) {
await setupCamera();
}
const cameraTex = regl.texture(cameraCanvas);
// All this takes place in a full screen quad.
const fullScreenQuad = makeFullScreenQuad(regl);
const effectName = config.effect in effects ? config.effect : "palette";
const context = { regl, cache, config, cameraTex, cameraAspectRatio, glMatrix };
const pipeline = makePipeline(context, [makeRain, makeBloomPass, effects[effectName]]);
const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
const drawToScreen = regl({ uniforms: screenUniforms });
await Promise.all(pipeline.map((step) => step.ready));
pipeline.forEach((step) => step.setSize(canvas.width, canvas.height));
dimensions.width = canvas.width;
dimensions.height = canvas.height;
const targetFrameTimeMilliseconds = 1000 / config.fps;
let last = NaN;
resetREGLTime: {
const reset = regl.frame((o) => {
o.time = 0;
o.tick = 0;
reset.cancel();
});
}
const tick = regl.frame(({ viewportWidth, viewportHeight }) => {
if (config.once) {
tick.cancel();
}
const now = regl.now() * 1000;
if (isNaN(last)) {
last = now;
}
const shouldRender =
config.fps >= 60 || now - last >= targetFrameTimeMilliseconds || config.once == true;
if (shouldRender) {
while (now - targetFrameTimeMilliseconds > last) {
last += targetFrameTimeMilliseconds;
}
}
if (config.useCamera) {
cameraTex(cameraCanvas);
}
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(shouldRender);
}
drawToScreen();
});
});
if (rain.tick != null) {
rain.tick.cancel();
}
rain.tick = tick;
};
export const destroy = (rain) => {
if (rain.destroyed) {
return;
}
const { regl, cache, resize, doubleClick, tick, canvas } = rain;
window.removeEventListener("resize", resize);
window.removeEventListener("dblclick", doubleClick);
cache.clear();
tick.cancel(); // stop RAF
regl.destroy(); // releases all GPU resources & event listeners
rain.destroyed = true;
};
export const type = "regl";

139
js/regl/renderer.js Normal file
View File

@@ -0,0 +1,139 @@
import Renderer from "../renderer.js";
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 makeMirrorPass from "./mirrorPass.js";
import { setupCamera, cameraCanvas, cameraAspectRatio } from "../utils/camera.js";
const effects = {
none: null,
plain: makePalettePass,
palette: makePalettePass,
customStripes: makeStripePass,
stripes: makeStripePass,
pride: makeStripePass,
transPride: makeStripePass,
trans: makeStripePass,
image: makeImagePass,
mirror: makeMirrorPass,
};
export default class REGLRenderer extends Renderer {
#tick;
#regl;
#glMatrix;
constructor() {
super("regl", async () => {
const libraries = await Renderer.libraries;
const extensions = ["OES_texture_half_float", "OES_texture_half_float_linear"];
// These extensions are also needed, but Safari misreports that they are missing
const optionalExtensions = [
"EXT_color_buffer_half_float",
"WEBGL_color_buffer_float",
"OES_standard_derivatives",
];
this.#regl = libraries.createREGL({ canvas: this.canvas, pixelRatio: 1, extensions, optionalExtensions });
this.#glMatrix = libraries.glMatrix;
});
}
async formulate(config) {
await super.formulate(config);
const canvas = this.canvas;
const cache = this.cache;
const regl = this.#regl;
const glMatrix = this.#glMatrix;
const dimensions = { width: 1, height: 1 };
if (config.useCamera) {
await setupCamera();
}
const cameraTex = regl.texture(cameraCanvas);
// All this takes place in a full screen quad.
const fullScreenQuad = makeFullScreenQuad(regl);
const effectName = config.effect in effects ? config.effect : "palette";
const context = { regl, cache, config, cameraTex, cameraAspectRatio, glMatrix };
const pipeline = makePipeline(context, [makeRain, makeBloomPass, effects[effectName]]);
const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
const drawToScreen = regl({ uniforms: screenUniforms });
await Promise.all(pipeline.map((step) => step.ready));
pipeline.forEach((step) => step.setSize(canvas.width, canvas.height));
dimensions.width = canvas.width;
dimensions.height = canvas.height;
const targetFrameTimeMilliseconds = 1000 / config.fps;
let last = NaN;
resetREGLTime: {
const reset = regl.frame((o) => {
o.time = 0;
o.tick = 0;
reset.cancel();
});
}
const tick = regl.frame(({ viewportWidth, viewportHeight }) => {
if (config.once) {
tick.cancel();
}
const now = regl.now() * 1000;
if (isNaN(last)) {
last = now;
}
const shouldRender =
config.fps >= 60 || now - last >= targetFrameTimeMilliseconds || config.once == true;
if (shouldRender) {
while (now - targetFrameTimeMilliseconds > last) {
last += targetFrameTimeMilliseconds;
}
}
if (config.useCamera) {
cameraTex(cameraCanvas);
}
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(shouldRender);
}
drawToScreen();
});
});
if (this.#tick != null) {
this.#tick.cancel();
}
this.#tick = tick;
}
destroy() {
if (this.destroyed) {
return;
}
this.#tick.cancel(); // stop RAF
this.#regl.destroy(); // releases all GPU resources & event listeners
super.destroy();
}
}

12
js/regl/utils.js
View File

@@ -60,8 +60,8 @@ const loadImage = (cache, regl, url, mipmap) => {
const data = new Image();
data.crossOrigin = "anonymous";
let imageURL;
if (typeof cache.get(`import::${url}`) === "function") {
imageURL = (await cache.get(`import::${url}`)()).default;
if (typeof cache.get(`url::${url}`) === "function") {
imageURL = (await cache.get(`url::${url}`)()).default;
} else {
imageURL = url;
}
@@ -103,13 +103,11 @@ const loadText = (cache, url) => {
},
loaded: (async () => {
if (url != null) {
let textURL;
if (typeof cache.get(`import::${url}`) === "function") {
textURL = (await cache.get(`import::${url}`)()).default;
if (typeof cache.get(`raw::${url}`) === "function") {
text = (await cache.get(`raw::${url}`)()).default;
} else {
textURL = url;
text = await (await fetch(url)).text();
}
text = await (await fetch(textURL)).text();
loaded = true;
}
})(),

92
js/renderer.js Normal file
View File

@@ -0,0 +1,92 @@
import fetchLibraries from "./fetchLibraries.js";
export default class Renderer {
static libraries = fetchLibraries();
#type;
#canvas;
#ready;
#width = 300;
#height = 150;
#fullscreen = false;
#cache = new Map();
#destroyed = false;
constructor(type, ready) {
this.#type = type;
this.#canvas = document.createElement("canvas");
this.#ready = Renderer.libraries.then(libraries => {
this.#cache = new Map(libraries.staticAssets);
}).then(ready);
}
get canvas() {
return this.#canvas;
}
get cache() {
return this.#cache;
}
get type () {
return this.#type;
}
get ready () {
return this.#ready;
}
get size() {
return [this.#width, this.#height];
}
set size([width, height]) {
[width, height] = [Math.ceil(width), Math.ceil(height)];
if (width === this.#width && height === this.#height) {
return;
}
[this.#canvas.width, this.#canvas.height] = [this.#width, this.#height] = [width, height];
}
get fullscreen() {
return this.#fullscreen;
}
set fullscreen(value) {
if (!!value === this.#fullscreen) {
return;
}
if (!document.fullscreenEnabled && !document.webkitFullscreenEnabled) {
return;
}
this.#fullscreen = value;
if (document.fullscreenElement != null) {
document.exitFullscreen();
}
if (this.#fullscreen) {
if (this.#canvas.webkitRequestFullscreen != null) {
this.#canvas.webkitRequestFullscreen();
} else {
this.#canvas.requestFullscreen();
}
}
}
async formulate(config) {
await this.ready;
if (this.destroyed) {
throw new Error("Cannot formulate a destroyed rain instance.");
}
}
get destroyed() {
return this.#destroyed;
}
destroy() {
this.#destroyed = true;
this.#cache.clear();
}
}

77
js/staticAssets.js Normal file
View File

@@ -0,0 +1,77 @@
export default [
[
"raw::shaders/glsl/bloomPass.highPass.frag.glsl",
() => import("../shaders/glsl/bloomPass.highPass.frag.glsl?raw"),
],
[
"raw::shaders/glsl/bloomPass.blur.frag.glsl",
() => import("../shaders/glsl/bloomPass.blur.frag.glsl?raw"),
],
[
"raw::shaders/glsl/bloomPass.combine.frag.glsl",
() => import("../shaders/glsl/bloomPass.combine.frag.glsl?raw"),
],
[
"raw::shaders/glsl/imagePass.frag.glsl",
() => import("../shaders/glsl/imagePass.frag.glsl?raw"),
],
[
"raw::shaders/glsl/mirrorPass.frag.glsl",
() => import("../shaders/glsl/mirrorPass.frag.glsl?raw"),
],
[
"raw::shaders/glsl/palettePass.frag.glsl",
() => import("../shaders/glsl/palettePass.frag.glsl?raw"),
],
[
"raw::shaders/glsl/rainPass.intro.frag.glsl",
() => import("../shaders/glsl/rainPass.intro.frag.glsl?raw"),
],
[
"raw::shaders/glsl/rainPass.raindrop.frag.glsl",
() => import("../shaders/glsl/rainPass.raindrop.frag.glsl?raw"),
],
[
"raw::shaders/glsl/rainPass.symbol.frag.glsl",
() => import("../shaders/glsl/rainPass.symbol.frag.glsl?raw"),
],
[
"raw::shaders/glsl/rainPass.effect.frag.glsl",
() => import("../shaders/glsl/rainPass.effect.frag.glsl?raw"),
],
["raw::shaders/glsl/rainPass.vert.glsl", () => import("../shaders/glsl/rainPass.vert.glsl?raw")],
["raw::shaders/glsl/rainPass.frag.glsl", () => import("../shaders/glsl/rainPass.frag.glsl?raw")],
[
"raw::shaders/glsl/stripePass.frag.glsl",
() => import("../shaders/glsl/stripePass.frag.glsl?raw"),
],
["url::assets/coptic_msdf.png", () => import("../assets/coptic_msdf.png")],
["url::assets/gothic_msdf.png", () => import("../assets/gothic_msdf.png")],
["url::assets/matrixcode_msdf.png", () => import("../assets/matrixcode_msdf.png")],
["url::assets/resurrections_msdf.png", () => import("../assets/resurrections_msdf.png")],
["url::assets/megacity_msdf.png", () => import("../assets/megacity_msdf.png")],
[
"url::assets/resurrections_glint_msdf.png",
() => import("../assets/resurrections_glint_msdf.png"),
],
["url::assets/huberfish_a_msdf.png", () => import("../assets/huberfish_a_msdf.png")],
["url::assets/huberfish_d_msdf.png", () => import("../assets/huberfish_d_msdf.png")],
[
"url::assets/gtarg_tenretniolleh_msdf.png",
() => import("../assets/gtarg_tenretniolleh_msdf.png"),
],
["url::assets/gtarg_alientext_msdf.png", () => import("../assets/gtarg_alientext_msdf.png")],
["url::assets/neomatrixology_msdf.png", () => import("../assets/neomatrixology_msdf.png")],
["url::assets/sand.png", () => import("../assets/sand.png")],
["url::assets/pixel_grid.png", () => import("../assets/pixel_grid.png")],
["url::assets/mesh.png", () => import("../assets/mesh.png")],
["url::assets/metal.png", () => import("../assets/metal.png")],
["raw::shaders/wgsl/bloomBlur.wgsl", () => import("../shaders/wgsl/bloomBlur.wgsl?raw")],
["raw::shaders/wgsl/bloomCombine.wgsl", () => import("../shaders/wgsl/bloomCombine.wgsl?raw")],
["raw::shaders/wgsl/endPass.wgsl", () => import("../shaders/wgsl/endPass.wgsl?raw")],
["raw::shaders/wgsl/imagePass.wgsl", () => import("../shaders/wgsl/imagePass.wgsl?raw")],
["raw::shaders/wgsl/mirrorPass.wgsl", () => import("../shaders/wgsl/mirrorPass.wgsl?raw")],
["raw::shaders/wgsl/palettePass.wgsl", () => import("../shaders/wgsl/palettePass.wgsl?raw")],
["raw::shaders/wgsl/rainPass.wgsl", () => import("../shaders/wgsl/rainPass.wgsl?raw")],
["raw::shaders/wgsl/stripePass.wgsl", () => import("../shaders/wgsl/stripePass.wgsl?raw")],
];

7
js/utils/config.js
View File

@@ -249,7 +249,6 @@ const versions = {
baseContrast: 1.5,
highPassThreshold: 0,
numColumns: 60,
cycleSpeed: 0.03,
bloomStrength: 0.7,
fallSpeed: 0.3,
palette: [
@@ -278,7 +277,6 @@ const versions = {
baseContrast: 1.5,
highPassThreshold: 0,
numColumns: 60,
cycleSpeed: 0.03,
bloomStrength: 0.7,
fallSpeed: 0.3,
palette: [
@@ -307,7 +305,6 @@ const versions = {
baseContrast: 1.5,
highPassThreshold: 0,
numColumns: 60,
cycleSpeed: 0.03,
bloomStrength: 0.7,
fallSpeed: 0.3,
palette: [
@@ -368,7 +365,7 @@ versions["2021"] = versions.resurrections;
const range = (f, min = -Infinity, max = Infinity) => Math.max(min, Math.min(max, f));
const nullNaN = (f) => (isNaN(f) ? null : f);
const isTrue = (s) => s.toLowerCase().includes("true");
const isTrue = (v) => (typeof v === "string" && v.toLowerCase().includes("true")) || v;
const parseColor = (isHSL) => (s) => ({
space: isHSL ? "hsl" : "rgb",
@@ -491,7 +488,7 @@ paramMapping.dropLength = paramMapping.raindropLength;
paramMapping.angle = paramMapping.slant;
paramMapping.colors = paramMapping.stripeColors;
export default (urlParams) => {
export default (urlParams = {}) => {
const validParams = Object.fromEntries(
Object.entries(urlParams)
.filter(([key]) => key in paramMapping)

217
js/webgpu/main.js
View File

@@ -1,217 +0,0 @@
import { structs } from "../../lib/gpu-buffer.js";
import { makeUniformBuffer, makePipeline } from "./utils.js";
import fetchLibraries from "../fetchLibraries.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 makeMirrorPass from "./mirrorPass.js";
import makeEndPass from "./endPass.js";
import { setupCamera, cameraCanvas, cameraAspectRatio, cameraSize } from "../utils/camera.js";
const effects = {
none: null,
plain: makePalettePass,
palette: makePalettePass,
customStripes: makeStripePass,
stripes: makeStripePass,
pride: makeStripePass,
transPride: makeStripePass,
trans: makeStripePass,
image: makeImagePass,
mirror: makeMirrorPass,
};
let glMatrix, inclusions;
export const init = async (canvas) => {
const libraries = await fetchLibraries();
glMatrix = libraries.glMatrix;
inclusions = libraries.inclusions;
const resize = () => {
const devicePixelRatio = window.devicePixelRatio ?? 1;
canvas.width = Math.ceil(canvas.clientWidth * devicePixelRatio * rain.resolution);
canvas.height = Math.ceil(canvas.clientHeight * devicePixelRatio * rain.resolution);
};
const doubleClick = () => {
if (!document.fullscreenEnabled && !document.webkitFullscreenEnabled) {
return;
}
if (document.fullscreenElement != null) {
document.exitFullscreen();
return;
}
if (canvas.webkitRequestFullscreen != null) {
canvas.webkitRequestFullscreen();
} else {
canvas.requestFullscreen();
}
};
const canvasContext = canvas.getContext("webgpu");
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const cache = new Map(inclusions);
const rain = {
canvas,
resize,
doubleClick,
cache,
canvasContext,
adapter,
device,
resolution: 1,
};
window.addEventListener("dblclick", doubleClick);
window.addEventListener("resize", resize);
resize();
return rain;
};
export const formulate = async (rain, config) => {
if (rain.destroyed) {
throw new Error("Cannot formulate a destroyed rain instance.");
}
const { resize, canvas, cache, canvasContext, adapter, device } = rain;
rain.resolution = config.resolution;
resize();
if (config.useCamera) {
await setupCamera();
}
const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
// console.table(device.limits);
canvasContext.configure({
device,
format: canvasFormat,
alphaMode: "opaque",
usage:
// GPUTextureUsage.STORAGE_BINDING |
GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST,
});
const timeUniforms = structs.from(`struct Time { seconds : f32, frames : i32, };`).Time;
const timeBuffer = makeUniformBuffer(device, timeUniforms);
const cameraTex = device.createTexture({
size: cameraSize,
format: "rgba8unorm",
usage:
GPUTextureUsage.TEXTURE_BINDING |
GPUTextureUsage.COPY_DST |
GPUTextureUsage.RENDER_ATTACHMENT,
});
const context = {
config,
cache,
adapter,
device,
canvasContext,
timeBuffer,
canvasFormat,
cameraTex,
cameraAspectRatio,
cameraSize,
glMatrix,
};
const effectName = config.effect in effects ? config.effect : "palette";
const pipeline = await makePipeline(context, [
makeRain,
makeBloomPass,
effects[effectName],
makeEndPass,
]);
const targetFrameTimeMilliseconds = 1000 / config.fps;
let frames = 0;
let start = NaN;
let last = NaN;
let outputs;
const renderLoop = (now) => {
if (isNaN(start)) {
start = now;
}
if (isNaN(last)) {
last = start;
}
const shouldRender =
config.fps >= 60 || now - last >= targetFrameTimeMilliseconds || config.once;
if (shouldRender) {
while (now - targetFrameTimeMilliseconds > last) {
last += targetFrameTimeMilliseconds;
}
}
const devicePixelRatio = window.devicePixelRatio ?? 1;
const canvasWidth = Math.ceil(canvas.clientWidth * devicePixelRatio * config.resolution);
const canvasHeight = Math.ceil(canvas.clientHeight * devicePixelRatio * config.resolution);
const canvasSize = [canvasWidth, canvasHeight];
if (outputs == null || canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
canvas.width = canvasWidth;
canvas.height = canvasHeight;
outputs = pipeline.build(canvasSize);
}
if (config.useCamera) {
device.queue.copyExternalImageToTexture(
{ source: cameraCanvas },
{ texture: cameraTex },
cameraSize,
);
}
device.queue.writeBuffer(
timeBuffer,
0,
timeUniforms.toBuffer({ seconds: (now - start) / 1000, frames }),
);
frames++;
const encoder = device.createCommandEncoder();
pipeline.run(encoder, shouldRender);
// Eventually, when WebGPU allows it, we'll remove the endPass and just copy from our pipeline's output to the canvas texture.
// encoder.copyTextureToTexture({ texture: outputs?.primary }, { texture: canvasContext.getCurrentTexture() }, canvasSize);
device.queue.submit([encoder.finish()]);
if (!config.once) {
requestAnimationFrame(renderLoop);
}
};
if (rain.renderLoop != null) {
cancelAnimationFrame(rain.renderLoop);
}
renderLoop(performance.now());
rain.renderLoop = renderLoop;
};
export const destroy = (rain) => {
if (rain.destroyed) {
return;
}
const { device, resize, doubleClick, cache, canvas, renderLoop } = rain;
window.removeEventListener("resize", resize);
window.removeEventListener("dblclick", doubleClick);
cache.clear();
cancelAnimationFrame(renderLoop); // stop RAF
device.destroy(); // This also destroys any objects created with the device
rain.destroyed = true;
};
export const type = "webgpu";

178
js/webgpu/renderer.js Normal file
View File

@@ -0,0 +1,178 @@
import Renderer from "../renderer.js";
import { structs } from "../../lib/gpu-buffer.js";
import { makeUniformBuffer, 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 makeMirrorPass from "./mirrorPass.js";
import makeEndPass from "./endPass.js";
import { setupCamera, cameraCanvas, cameraAspectRatio, cameraSize } from "../utils/camera.js";
const effects = {
none: null,
plain: makePalettePass,
palette: makePalettePass,
customStripes: makeStripePass,
stripes: makeStripePass,
pride: makeStripePass,
transPride: makeStripePass,
trans: makeStripePass,
image: makeImagePass,
mirror: makeMirrorPass,
};
export default class REGLRenderer extends Renderer {
#glMatrix;
#canvasContext;
#adapter;
#device;
#renderLoop;
constructor() {
super("webgpu", async () => {
const libraries = await Renderer.libraries;
this.#glMatrix = libraries.glMatrix;
this.#canvasContext = this.canvas.getContext("webgpu");
this.#adapter = await navigator.gpu.requestAdapter();
this.#device = await this.#adapter.requestDevice();
});
}
async formulate(config) {
await super.formulate(config);
const canvas = this.canvas;
const cache = this.cache;
const canvasContext = this.#canvasContext;
const adapter = this.#adapter;
const device = this.#device;
const glMatrix = this.#glMatrix;
if (config.useCamera) {
await setupCamera();
}
const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
// console.table(device.limits);
canvasContext.configure({
device,
format: canvasFormat,
alphaMode: "opaque",
usage:
// GPUTextureUsage.STORAGE_BINDING |
GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST,
});
const timeUniforms = structs.from(`struct Time { seconds : f32, frames : i32, };`).Time;
const timeBuffer = makeUniformBuffer(device, timeUniforms);
const cameraTex = device.createTexture({
size: cameraSize,
format: "rgba8unorm",
usage:
GPUTextureUsage.TEXTURE_BINDING |
GPUTextureUsage.COPY_DST |
GPUTextureUsage.RENDER_ATTACHMENT,
});
const context = {
config,
cache,
adapter,
device,
canvasContext,
timeBuffer,
canvasFormat,
cameraTex,
cameraAspectRatio,
cameraSize,
glMatrix,
};
const effectName = config.effect in effects ? config.effect : "palette";
const pipeline = await makePipeline(context, [
makeRain,
makeBloomPass,
effects[effectName],
makeEndPass,
]);
const targetFrameTimeMilliseconds = 1000 / config.fps;
let frames = 0;
let start = NaN;
let last = NaN;
let outputs;
const renderLoop = (now) => {
if (isNaN(start)) {
start = now;
}
if (isNaN(last)) {
last = start;
}
const shouldRender =
config.fps >= 60 || now - last >= targetFrameTimeMilliseconds || config.once;
if (shouldRender) {
while (now - targetFrameTimeMilliseconds > last) {
last += targetFrameTimeMilliseconds;
}
}
const devicePixelRatio = window.devicePixelRatio ?? 1;
const size = this.size;
const [width, height] = size;
if (outputs == null || canvas.width !== width || canvas.height !== height) {
[canvas.width, canvas.height] = size;
outputs = pipeline.build(size);
}
if (config.useCamera) {
device.queue.copyExternalImageToTexture(
{ source: cameraCanvas },
{ texture: cameraTex },
cameraSize,
);
}
device.queue.writeBuffer(
timeBuffer,
0,
timeUniforms.toBuffer({ seconds: (now - start) / 1000, frames }),
);
frames++;
const encoder = device.createCommandEncoder();
pipeline.run(encoder, shouldRender);
// Eventually, when WebGPU allows it, we'll remove the endPass and just copy from our pipeline's output to the canvas texture.
// encoder.copyTextureToTexture({ texture: outputs?.primary }, { texture: canvasContext.getCurrentTexture() }, canvasSize);
device.queue.submit([encoder.finish()]);
if (!config.once) {
requestAnimationFrame(renderLoop);
}
};
if (this.#renderLoop != null) {
cancelAnimationFrame(this.#renderLoop);
}
renderLoop(performance.now());
this.#renderLoop = renderLoop;
}
destroy() {
if (this.destroyed) {
return;
}
cancelAnimationFrame(this.#renderLoop); // stop RAF
this.#device.destroy(); // This also destroys any objects created with the device
super.destroy();
}
}

14
js/webgpu/utils.js
View File

@@ -17,8 +17,8 @@ const loadTexture = async (device, cache, url) => {
});
} else {
let imageURL;
if (typeof cache.get(`import::${url}`) === "function") {
imageURL = (await cache.get(`import::${url}`)()).default;
if (typeof cache.get(`url::${url}`) === "function") {
imageURL = (await cache.get(`url::${url}`)()).default;
} else {
imageURL = url;
}
@@ -74,14 +74,12 @@ const loadShader = async (device, cache, url) => {
if (cache.has(key)) {
return cache.get(key);
}
let textURL;
if (typeof cache.get(`import::${url}`) === "function") {
textURL = (await cache.get(`import::${url}`)()).default;
let code;
if (typeof cache.get(`raw::${url}`) === "function") {
code = (await cache.get(`raw::${url}`)()).default;
} else {
textURL = url;
code = await (await fetch(url)).text();
}
const response = await fetch(textURL);
const code = await response.text();
return {
code,
module: device.createShaderModule({ code }),