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

Ran formatter.

Browse Source
This commit is contained in:
Rezmason
2025-05-29 20:33:16 -07:00
parent 41f2f837c3
commit 00805c884e
7 changed files with 55 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/Matrix.jsx
View File

@@ -114,7 +114,7 @@ export const Matrix = memo((props) => {
const [rConfig, setConfig] = useState(makeConfig({})); const [rConfig, setConfig] = useState(makeConfig({}));
const rendererModules = {}; const rendererModules = {};
const resizeObserver = new ResizeObserver(entries => { const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) { for (const entry of entries) {
const contentBoxSize = entry.contentBoxSize[0]; const contentBoxSize = entry.contentBoxSize[0];
setSize([contentBoxSize.inlineSize, contentBoxSize.blockSize]); setSize([contentBoxSize.inlineSize, contentBoxSize.blockSize]);
@@ -137,9 +137,7 @@ export const Matrix = memo((props) => {
useEffect(() => { useEffect(() => {
const config = makeConfig({ const config = makeConfig({
...Object.fromEntries( ...Object.fromEntries(Object.entries(rawConfigProps).filter(([_, value]) => value != null)),
Object.entries(rawConfigProps).filter(([_, value]) => value != null),
)
}); });
if (config.renderer === "webgpu" && !supportsWebGPU()) { if (config.renderer === "webgpu" && !supportsWebGPU()) {
config.renderer = "regl"; config.renderer = "regl";
@@ -193,7 +191,7 @@ export const Matrix = memo((props) => {
useEffect(() => { useEffect(() => {
if (rRenderer?.destroyed ?? true) return; if (rRenderer?.destroyed ?? true) return;
rRenderer.size = rSize.map(n => n * rConfig.resolution); rRenderer.size = rSize.map((n) => n * rConfig.resolution);
}, [rRenderer, rConfig.resolution, rSize]); }, [rRenderer, rConfig.resolution, rSize]);
return <div ref={domElement} {...elProps}></div>; return <div ref={domElement} {...elProps}></div>;

8
js/main.js
View File

@@ -29,9 +29,13 @@ document.body.onload = async () => {
const Renderer = (await rendererModule).default; const Renderer = (await rendererModule).default;
const renderer = new Renderer(); const renderer = new Renderer();
await renderer.ready; await renderer.ready;
renderer.size = [window.innerWidth, window.innerHeight].map(n => n * (window.devicePixelRatio ?? 1) * config.resolution); renderer.size = [window.innerWidth, window.innerHeight].map(
(n) => n * (window.devicePixelRatio ?? 1) * config.resolution,
);
window.onresize = () => { window.onresize = () => {
renderer.size = [window.innerWidth, window.innerHeight].map(n => n * (window.devicePixelRatio ?? 1) * config.resolution); renderer.size = [window.innerWidth, window.innerHeight].map(
(n) => n * (window.devicePixelRatio ?? 1) * config.resolution,
);
}; };
window.addEventListener("dblclick", () => { window.addEventListener("dblclick", () => {
renderer.fullscreen = !renderer.fullscreen; renderer.fullscreen = !renderer.fullscreen;

5
js/regl/mirrorPass.js
View File

@@ -1,10 +1,11 @@
import { loadText, makePassFBO, makePass } from "./utils.js"; import { loadText, makePassFBO, makePass } from "./utils.js";
export default ({ regl, canvas, cache, config, cameraTex, cameraAspectRatio }, inputs) => { export default ({ regl, canvas, cache, config, cameraTex, cameraAspectRatio }, inputs) => {
let start; let start;
const numClicks = 5; const numClicks = 5;
const clicks = Array(numClicks).fill().map(_ => ([0, 0, -Infinity])); const clicks = Array(numClicks)
.fill()
.map((_) => [0, 0, -Infinity]);
let aspectRatio = 1; let aspectRatio = 1;
let index = 0; let index = 0;

17
js/regl/renderer.js
View File

@@ -23,7 +23,6 @@ const effects = {
}; };
export default class REGLRenderer extends Renderer { export default class REGLRenderer extends Renderer {
#renderFunc; #renderFunc;
#regl; #regl;
#glMatrix; #glMatrix;
@@ -38,7 +37,12 @@ export default class REGLRenderer extends Renderer {
"WEBGL_color_buffer_float", "WEBGL_color_buffer_float",
"OES_standard_derivatives", "OES_standard_derivatives",
]; ];
this.#regl = libraries.createREGL({ canvas: this.canvas, pixelRatio: 1, extensions, optionalExtensions }); this.#regl = libraries.createREGL({
canvas: this.canvas,
pixelRatio: 1,
extensions,
optionalExtensions,
});
this.#glMatrix = libraries.glMatrix; this.#glMatrix = libraries.glMatrix;
}); });
} }
@@ -79,7 +83,6 @@ export default class REGLRenderer extends Renderer {
}); });
this.#renderFunc = (reglContext) => { this.#renderFunc = (reglContext) => {
if (config.once) { if (config.once) {
this.stop(); this.stop();
} }
@@ -102,7 +105,7 @@ export default class REGLRenderer extends Renderer {
if (config.useCamera) { if (config.useCamera) {
cameraTex(cameraCanvas); cameraTex(cameraCanvas);
} }
const {viewportWidth, viewportHeight} = reglContext; const { viewportWidth, viewportHeight } = reglContext;
if (dimensions.width !== viewportWidth || dimensions.height !== viewportHeight) { if (dimensions.width !== viewportWidth || dimensions.height !== viewportHeight) {
dimensions.width = viewportWidth; dimensions.width = viewportWidth;
dimensions.height = viewportHeight; dimensions.height = viewportHeight;
@@ -118,7 +121,7 @@ export default class REGLRenderer extends Renderer {
}); });
}; };
const frame = this.#regl.frame(o => { const frame = this.#regl.frame((o) => {
this.#renderFunc(o); this.#renderFunc(o);
frame.cancel(); frame.cancel();
}); });
@@ -131,10 +134,10 @@ export default class REGLRenderer extends Renderer {
update(now) { update(now) {
if (this.#renderFunc != null) { if (this.#renderFunc != null) {
const frame = this.#regl.frame(o => { const frame = this.#regl.frame((o) => {
this.#renderFunc(o); this.#renderFunc(o);
frame.cancel(); frame.cancel();
}) });
} }
super.update(now); super.update(now);
} }

43
js/renderer.js
View File

@@ -1,7 +1,6 @@
import fetchLibraries from "./fetchLibraries.js"; import fetchLibraries from "./fetchLibraries.js";
export default class Renderer { export default class Renderer {
static libraries = fetchLibraries(); static libraries = fetchLibraries();
#type; #type;
#canvas; #canvas;
@@ -16,13 +15,17 @@ export default class Renderer {
constructor(type, ready) { constructor(type, ready) {
this.#type = type; this.#type = type;
this.#canvas = document.createElement("canvas"); this.#canvas = document.createElement("canvas");
this.#ready = Renderer.libraries.then(libraries => { this.#ready = Renderer.libraries
this.#cache = new Map(libraries.staticAssets); .then((libraries) => {
}).then(ready); this.#cache = new Map(libraries.staticAssets);
})
.then(ready);
this.#ready.then(() => this.start()); this.#ready.then(() => this.start());
} }
get running() { return this.#running; } get running() {
return this.#running;
}
start() { start() {
this.#running = true; this.#running = true;
@@ -35,18 +38,28 @@ export default class Renderer {
update(now) { update(now) {
if (!this.#running) return; if (!this.#running) return;
requestAnimationFrame(now => this.update(now)); requestAnimationFrame((now) => this.update(now));
} }
get canvas() { return this.#canvas; } get canvas() {
return this.#canvas;
}
get cache() { return this.#cache; } get cache() {
return this.#cache;
}
get type () { return this.#type; } get type() {
return this.#type;
}
get ready () { return this.#ready; } get ready() {
return this.#ready;
}
get size() { return ([this.#width, this.#height]); } get size() {
return [this.#width, this.#height];
}
set size([width, height]) { set size([width, height]) {
[width, height] = [Math.ceil(width), Math.ceil(height)]; [width, height] = [Math.ceil(width), Math.ceil(height)];
@@ -54,7 +67,9 @@ export default class Renderer {
[this.#canvas.width, this.#canvas.height] = [this.#width, this.#height] = [width, height]; [this.#canvas.width, this.#canvas.height] = [this.#width, this.#height] = [width, height];
} }
get fullscreen() { return this.#fullscreen; } get fullscreen() {
return this.#fullscreen;
}
set fullscreen(value) { set fullscreen(value) {
if (!!value === this.#fullscreen) return; if (!!value === this.#fullscreen) return;
@@ -80,7 +95,9 @@ export default class Renderer {
} }
} }
get destroyed() { return this.#destroyed; } get destroyed() {
return this.#destroyed;
}
destroy() { destroy() {
this.stop(); this.stop();

6
js/webgpu/renderer.js
View File

@@ -25,7 +25,6 @@ const effects = {
}; };
export default class REGLRenderer extends Renderer { export default class REGLRenderer extends Renderer {
#glMatrix; #glMatrix;
#device; #device;
#canvasContext; #canvasContext;
@@ -72,7 +71,6 @@ export default class REGLRenderer extends Renderer {
} }
this.#rebuildingPipeline = (async () => { this.#rebuildingPipeline = (async () => {
const glMatrix = this.#glMatrix; const glMatrix = this.#glMatrix;
const canvas = this.canvas; const canvas = this.canvas;
const cache = this.cache; const cache = this.cache;
@@ -205,10 +203,10 @@ export default class REGLRenderer extends Renderer {
if (this.destroyed) return; if (this.destroyed) return;
const oldDevice = this.#device; const oldDevice = this.#device;
if (oldDevice != null) { if (oldDevice != null) {
(async () => { async () => {
await oldDevice.queue.onSubmittedWorkDone(); await oldDevice.queue.onSubmittedWorkDone();
oldDevice.destroy(); oldDevice.destroy();
}); };
} }
this.#device = null; this.#device = null;
super.destroy(); super.destroy();

5
js/webgpu/utils.js
View File

@@ -1,10 +1,7 @@
const loadTexture = async (device, cache, url) => { const loadTexture = async (device, cache, url) => {
const format = "rgba8unorm"; const format = "rgba8unorm";
const usage = const usage =
GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT;
GPUTextureUsage.COPY_DST |
GPUTextureUsage.RENDER_ATTACHMENT;
if (url == null) { if (url == null) {
return device.createTexture({ return device.createTexture({