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

Exploring ways to preserve the vanilla JS browser demo without compromising on the bundle. Experimenting with embedding images in the bundle as data URIs

Browse Source
This commit is contained in:
Rezmason
2025-05-06 12:59:02 -07:00
parent 6663c92f99
commit eea341f50c
27 changed files with 372 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
js/Matrix.js
View File

@@ -1,8 +1,87 @@
import highPassFrag from "../shaders/glsl/bloomPass.highPass.frag.glsl";
import blurFrag from "../shaders/glsl/bloomPass.blur.frag.glsl";
import combineFrag from "../shaders/glsl/bloomPass.combine.frag.glsl";
import imagePassFrag from "../shaders/glsl/imagePass.frag.glsl";
import mirrorPassFrag from "../shaders/glsl/mirrorPass.frag.glsl";
import palettePassFrag from "../shaders/glsl/palettePass.frag.glsl";
import rainPassIntro from "../shaders/glsl/rainPass.intro.frag.glsl";
import rainPassRaindrop from "../shaders/glsl/rainPass.raindrop.frag.glsl";
import rainPassSymbol from "../shaders/glsl/rainPass.symbol.frag.glsl";
import rainPassEffect from "../shaders/glsl/rainPass.effect.frag.glsl";
import rainPassVert from "../shaders/glsl/rainPass.vert.glsl";
import rainPassFrag from "../shaders/glsl/rainPass.frag.glsl";
import stripePassFrag from "../shaders/glsl/stripePass.frag.glsl";
import msdfCoptic from "../assets/coptic_msdf.png";
import msdfGothic from "../assets/gothic_msdf.png";
import msdfMatrixCode from "../assets/matrixcode_msdf.png";
import msdfRes from "../assets/resurrections_msdf.png";
// import megacity from "../assets/megacity_msdf.png";
import msdfResGlint from "../assets/resurrections_glint_msdf.png";
// import msdfHuberfishA from "../assets/huberfish_a_msdf.png";
// import msdfHuberfishD from "../assets/huberfish_d_msdf.png";
// import msdfGtargTenretni from "../assets/gtarg_tenretniolleh_msdf.png";
// import msdfGtargAlienText from "../assets/gtarg_alientext_msdf.png";
// import msdfNeoMatrixology from "../assets/neomatrixology_msdf.png";
// import texSand from "../assets/sand.png";
// import texPixels from "../assets/pixel_grid.png";
import texMesh from "../assets/mesh.png";
import texMetal from "../assets/metal.png";
import bloomBlurShader from "../shaders/wgsl/bloomBlur.wgsl";
import bloomCombineShader from "../shaders/wgsl/bloomCombine.wgsl";
import endPassShader from "../shaders/wgsl/endPass.wgsl";
import imagePassShader from "../shaders/wgsl/imagePass.wgsl";
import mirrorPassShader from "../shaders/wgsl/mirrorPass.wgsl";
import palettePassShader from "../shaders/wgsl/palettePass.wgsl";
import rainPassShader from "../shaders/wgsl/rainPass.wgsl";
import stripePassShader from "../shaders/wgsl/stripePass.wgsl";
const inclusion = [
highPassFrag,
blurFrag,
combineFrag,
imagePassFrag,
mirrorPassFrag,
palettePassFrag,
rainPassIntro,
rainPassRaindrop,
rainPassSymbol,
rainPassEffect,
rainPassVert,
rainPassFrag,
stripePassFrag,
msdfCoptic,
msdfGothic,
msdfMatrixCode,
msdfRes,
// megacity,
msdfResGlint,
// msdfHuberfishA,
// msdfHuberfishD,
// msdfGtargTenretni,
// msdfGtargAlienText,
// msdfNeoMatrixology,
// texSand,
// texPixels,
texMesh,
texMetal,
bloomBlurShader,
bloomCombineShader,
endPassShader,
imagePassShader,
mirrorPassShader,
palettePassShader,
rainPassShader,
stripePassShader,
].reduce((i, s) => s.length + i, 0);
if (inclusion === 0) console.log("!");
import React, { useEffect, useState, useRef, memo } from "react";
// import { init as initRain, formulate as refreshRain, destroy as destroyRain } from "./regl/main";
import { init as initRain, formulate as refreshRain, destroy as destroyRain } from "./webgpu/main";
import * as reglRenderer from "./regl/main";
import * as webgpuRenderer from "./webgpu/main";
import makeConfig from "./utils/config";
console.log(webgpuRenderer.init, webgpuRenderer.formulate, webgpuRenderer.destroy);
/**
* @typedef {object} Colour
* @property {"hsl"|"rgb"} space
@@ -18,7 +97,7 @@ import makeConfig from "./utils/config";
* "classic" | "megacity" | "neomatrixology" | "operator" |
* "nightmare" | "paradise" | "resurrections" | "trinity" |
* "morpheus" | "bugs" | "palimpsest" | "twilight" |
* "holoplay" | "3d" | "throwback" | "updated" |
* "3d" | "throwback" | "updated" |
* "1999" | "2003" | "2021" | string /* custom * /
* ),
* font?: keyof typeof fonts, // "matrixcode", …
@@ -36,7 +115,6 @@ import makeConfig from "./utils/config";
* renderer?: "regl" | "three" | string,
* suppressWarnings?: boolean,
* useHalfFloat?: boolean,
* useHoloplay?: boolean,
* isometric?: boolean,
*
* /* ------------- glyph appearance ------------- * /
@@ -119,12 +197,12 @@ export const Matrix = memo((props) => {
canvas.style.width = "100%";
canvas.style.height = "100%";
const init = async () => {
setRain(await initRain(canvas));
setRain(await reglRenderer.init(canvas));
};
init();
return () => {
destroyRain(rain);
reglRenderer.destroy(rain);
setRain(null);
};
}, []);
@@ -134,7 +212,7 @@ export const Matrix = memo((props) => {
return;
}
const refresh = async () => {
await refreshRain(rain, makeConfig({ ...rest }));
await reglRenderer.formulate(rain, makeConfig({ ...rest }));
};
refresh();
}, [props, rain]);