diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..bdc76458 --- /dev/null +++ b/.gitignore @@ -0,0 +1,15 @@ +.idea/ +.vscode/ +node_modules/ +build/ +.DS_Store +*.tgz +my-app* +template/src/__tests__/__snapshots__/ +lerna-debug.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +/.changelog +.npm/ +/dist \ No newline at end of file diff --git a/README.md b/README.md index f4c30cfc..9b5694c4 100644 --- a/README.md +++ b/README.md @@ -180,3 +180,19 @@ The glyphs used in the "Palimpsest" and "Twilight" versions are derived from [Te The glyphs are formatted as a multi-channel distance field (or MSDF) via Victor Chlumsky's [msdfgen](https://github.com/Chlumsky/msdfgen). This format preserves the crisp edges and corners of vector graphics when rendered as textures. Chlumsky's thesis paper, which is in English and is also easy to read, is [available to download here](https://dspace.cvut.cz/handle/10467/62770). The raindrops themselves are particles [computed on the GPU and stored in textures](https://threejs.org/examples/webgl_gpgpu_water.html), much smaller than the final render. The data sent from the CPU to the GPU every frame is negligible. + + +## react-matrix-rain +This is an effort to produce an npm package that bundles this repo's effects as a single react component for use in SPA applications. Work on the legacy code will update the component. Steps to build the component are as follows. + +### Offline testing +``` +npm pack --dry-run # assess that the package is viable. + +npm pack # creates the tarball + +npm install react-matrix-rain-.tgz +``` + +### Publishing +... TBD diff --git a/TODO.txt b/TODO.txt index 1371c672..2f020839 100644 --- a/TODO.txt +++ b/TODO.txt @@ -1,79 +1,100 @@ TODO: + Rethink bundling + Core + Includes core assets + Does not require React + Extras + Includes other fonts, presets + Does not require React + React + Includes react component + Requires React + Minimum react requirement? + Minify bundles + Naming "matrix" for the github repo, "digital-rain" and "DigitalRain" for everything else + Preserve time across configure calls, move times into renderer and uniforms + Move off of regl + Unify implementations? + Reshape all passes to react to config changes, ie. "configure" + simple deltas only require updating the uniforms + return boolean of whether all deltas are simple + Resource changes are simple if they're cached and loaded, false otherwise + remake the pipeline if anything returns false + 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 + Move high pass into WebGPU bloom Dithering bug on mobile? - Looks like a subtle fade occurring at a per-second interval + Looks like a subtle fade occurring at a per-second interval Write an explanation of the rain pass (and include images) - Compute - Volumetric quads - Fullscreen quad and spacial mapping - MSDFs + Compute + Volumetric quads + Fullscreen quad and spacial mapping + MSDFs Audio system - Toggle (or number representing frequency) - Load the sound effect - Play it multiple times with delay - Random pan - Random volume? - Randomize pitch a little? + Toggle (or number representing frequency) + Load the sound effect + Play it multiple times with delay + Random pan + Random volume? + Randomize pitch a little? Playdate version - Audio system - Falling sound - Launch sound - Undocking sound - Docking sound - Maybe crank sounds? Not sure yet + Audio system + Falling sound + Launch sound + Undocking sound + Docking sound + Maybe crank sounds? Not sure yet Support Resurrections SDF bevel and "lights" - https://shaderfun.com/2018/07/23/signed-distance-fields-part-8-gradients-bevels-and-noise/ - Get the "normals" and color right - Note: even completely dark glyphs can have glint on their edges - "Golden hour" - Stuff MSDF-derived normal vectors from rain pass frag into two of its output channels - Anomaly mode toggles between this and anomaly streaks + https://shaderfun.com/2018/07/23/signed-distance-fields-part-8-gradients-bevels-and-noise/ + Get the "normals" and color right + Note: even completely dark glyphs can have glint on their edges + "Golden hour" + Stuff MSDF-derived normal vectors from rain pass frag into two of its output channels + Anomaly mode toggles between this and anomaly streaks WebGPU - Try https://github.com/brendan-duncan/wgsl_reflect - Get rid of end pass once it's possible to copy a bgra8unorm to a canvas texture - Switch to rgba32float somehow? - Why isn't this straightforward? - Try shorthand - Share a bind group and layout just for time? - Try using a buffer for the stripe pass 1D texture + Try https://github.com/brendan-duncan/wgsl_reflect + Get rid of end pass once it's possible to copy a bgra8unorm to a canvas texture + Switch to rgba32float somehow? + Why isn't this straightforward? + Try shorthand + Share a bind group and layout just for time? + Try using a buffer for the stripe pass 1D texture Improve loop support Idea: Build a UI - Replace versions with presets - Simple changes update the values - Complex changes replace the pipeline - Make it a form, so it's accessible - Then, make it look cool like the UI from the old site + Replace versions with presets + Simple changes update the values + Complex changes replace the pipeline + Make it a form, so it's accessible + Then, make it look cool like the UI from the old site Maybe pay someone to make Mac/Windows screensavers Zion Control's matrix variant - From Reloaded + From Reloaded gpu-buffer, working title - Support type aliasing (type Q = array) - Support shorthand (vec4f) - Build mocha tests, example project - Give it its own repo, microsite + Support type aliasing (type Q = array) + Support shorthand (vec4f) + Build mocha tests, example project + Give it its own repo, microsite diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 00000000..c957a612 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,31 @@ +import js from "@eslint/js"; +import globals from "globals"; +import reactHooks from "eslint-plugin-react-hooks"; +import reactRefresh from "eslint-plugin-react-refresh"; + +export default [ + { ignores: ["dist", "lib"] }, + { + files: ["**/*.{js,jsx,mjs}"], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + parserOptions: { + ecmaVersion: "latest", + ecmaFeatures: { jsx: true }, + sourceType: "module", + }, + }, + plugins: { + "react-hooks": reactHooks, + "react-refresh": reactRefresh, + }, + rules: { + ...js.configs.recommended.rules, + ...reactHooks.configs.recommended.rules, + "no-unused-vars": "off", + "no-unused-labels": "off", + "react-refresh/only-export-components": ["warn", { allowConstantExport: true }], + }, + }, +]; diff --git a/index.html b/index.html index 6a365b60..8fb440c4 100644 --- a/index.html +++ b/index.html @@ -5,19 +5,27 @@ - +