mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-18 22:29:28 -07:00
Separating the resource imports from the Matrix.js module
This commit is contained in:
Rezmason
39
TODO.txt
39
TODO.txt
@@ -1,22 +1,27 @@
|
|||||||
TODO:
|
TODO:
|
||||||
TTF --> MSDF
|
Explicitly destroy what gets created
|
||||||
Isolate fun stuff from core
|
Create multiple distributions
|
||||||
Separate configs
|
core
|
||||||
Separate assets
|
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
|
||||||
|
|
||||||
|
Build a Tweakpane for config
|
||||||
Live config update roadmap
|
https://cocopon.github.io/tweakpane
|
||||||
Modify regl pass
|
Show a gear emoji in the top right on mouse move
|
||||||
async build(config, inputs)
|
Hide after three seconds
|
||||||
loads all required stuff
|
If tapped, show the tweakpane
|
||||||
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
|
|
||||||
|
|
||||||
Seems like bloom size and resolution impact the REGL and WebGPU bloom implementations differently
|
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
|
||||||
|
|||||||
78
js/Matrix.js
78
js/Matrix.js
@@ -1,85 +1,11 @@
|
|||||||
import highPassFrag from "../shaders/glsl/bloomPass.highPass.frag.glsl";
|
import inclusions from "./inclusions";
|
||||||
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 React, { useEffect, useState, useRef, memo } from "react";
|
||||||
import * as reglRenderer from "./regl/main";
|
import * as reglRenderer from "./regl/main";
|
||||||
import * as webgpuRenderer from "./webgpu/main";
|
import * as webgpuRenderer from "./webgpu/main";
|
||||||
import makeConfig from "./utils/config";
|
import makeConfig from "./utils/config";
|
||||||
|
|
||||||
|
globalThis.inclusions = inclusions;
|
||||||
console.log(webgpuRenderer.init, webgpuRenderer.formulate, webgpuRenderer.destroy);
|
console.log(webgpuRenderer.init, webgpuRenderer.formulate, webgpuRenderer.destroy);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
77
js/inclusions.js
Normal file
77
js/inclusions.js
Normal file
@@ -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;
|
||||||
Reference in New Issue
Block a user