From a1332d8f1ad0d2cc536271f2ab90889d0a2c757c Mon Sep 17 00:00:00 2001 From: Rezmason Date: Wed, 7 May 2025 18:06:15 -0700 Subject: [PATCH] Separating the resource imports from the Matrix.js module --- TODO.txt | 39 +++++++++++++----------- js/Matrix.js | 78 ++---------------------------------------------- js/inclusions.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 101 insertions(+), 93 deletions(-) create mode 100644 js/inclusions.js diff --git a/TODO.txt b/TODO.txt index 1a1c0d4..f229c72 100644 --- a/TODO.txt +++ b/TODO.txt @@ -1,22 +1,27 @@ TODO: - TTF --> MSDF - Isolate fun stuff from core - Separate configs - Separate assets + Explicitly destroy what gets created + Create multiple distributions + core + One embedded MSDF, combined from the two main glyph sets and their configs + fun + Other MSDFs and configs + and then one with built-in MSDF generation + (TTF + glyphString) --> MSDF + Is MSDF strictly necessary? + Move off of regl + Expanded configurability + Modify regl pass + async build(config, inputs) + loads all required stuff + async resize - adjusts the sizes + run — performs the GPU operation + Rewrite main code to accept changes to config - -Live config update roadmap - Modify regl pass - async build(config, inputs) - loads all required stuff - async resize - adjusts the sizes - run — performs the GPU operation - Rewrite main code to accept changes to config - Build a Tweakpane for config - https://cocopon.github.io/tweakpane - Show a gear emoji in the top right on mouse move - Hide after three seconds - If tapped, show the tweakpane +Build a Tweakpane for config + https://cocopon.github.io/tweakpane + Show a gear emoji in the top right on mouse move + Hide after three seconds + If tapped, show the tweakpane Seems like bloom size and resolution impact the REGL and WebGPU bloom implementations differently Move high pass into WebGPU bloom diff --git a/js/Matrix.js b/js/Matrix.js index 68c33da..b0fbdf3 100644 --- a/js/Matrix.js +++ b/js/Matrix.js @@ -1,85 +1,11 @@ -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 inclusions from "./inclusions"; import React, { useEffect, useState, useRef, memo } from "react"; import * as reglRenderer from "./regl/main"; import * as webgpuRenderer from "./webgpu/main"; import makeConfig from "./utils/config"; +globalThis.inclusions = inclusions; console.log(webgpuRenderer.init, webgpuRenderer.formulate, webgpuRenderer.destroy); /** diff --git a/js/inclusions.js b/js/inclusions.js new file mode 100644 index 0000000..a82a5a3 --- /dev/null +++ b/js/inclusions.js @@ -0,0 +1,77 @@ +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 inclusions = [ + 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); + +export default inclusions;