From 00805c884e47901dcdd3581e284a2f035bc9aee2 Mon Sep 17 00:00:00 2001 From: Rezmason Date: Thu, 29 May 2025 20:33:16 -0700 Subject: [PATCH] Ran formatter. --- js/Matrix.jsx | 8 +++----- js/main.js | 8 ++++++-- js/regl/mirrorPass.js | 5 +++-- js/regl/renderer.js | 17 ++++++++++------- js/renderer.js | 43 ++++++++++++++++++++++++++++++------------- js/webgpu/renderer.js | 6 ++---- js/webgpu/utils.js | 5 +---- 7 files changed, 55 insertions(+), 37 deletions(-) diff --git a/js/Matrix.jsx b/js/Matrix.jsx index 1b87136..2f75f53 100644 --- a/js/Matrix.jsx +++ b/js/Matrix.jsx @@ -114,7 +114,7 @@ export const Matrix = memo((props) => { const [rConfig, setConfig] = useState(makeConfig({})); const rendererModules = {}; - const resizeObserver = new ResizeObserver(entries => { + const resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { const contentBoxSize = entry.contentBoxSize[0]; setSize([contentBoxSize.inlineSize, contentBoxSize.blockSize]); @@ -137,9 +137,7 @@ export const Matrix = memo((props) => { useEffect(() => { const config = makeConfig({ - ...Object.fromEntries( - Object.entries(rawConfigProps).filter(([_, value]) => value != null), - ) + ...Object.fromEntries(Object.entries(rawConfigProps).filter(([_, value]) => value != null)), }); if (config.renderer === "webgpu" && !supportsWebGPU()) { config.renderer = "regl"; @@ -193,7 +191,7 @@ export const Matrix = memo((props) => { useEffect(() => { 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]); return
; diff --git a/js/main.js b/js/main.js index 3fec6ca..f9845ea 100644 --- a/js/main.js +++ b/js/main.js @@ -29,9 +29,13 @@ document.body.onload = async () => { const Renderer = (await rendererModule).default; const renderer = new Renderer(); 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 = () => { - 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", () => { renderer.fullscreen = !renderer.fullscreen; diff --git a/js/regl/mirrorPass.js b/js/regl/mirrorPass.js index c0eb8f3..615e70e 100644 --- a/js/regl/mirrorPass.js +++ b/js/regl/mirrorPass.js @@ -1,10 +1,11 @@ import { loadText, makePassFBO, makePass } from "./utils.js"; export default ({ regl, canvas, cache, config, cameraTex, cameraAspectRatio }, inputs) => { - let start; 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 index = 0; diff --git a/js/regl/renderer.js b/js/regl/renderer.js index 7fde8a1..1908932 100644 --- a/js/regl/renderer.js +++ b/js/regl/renderer.js @@ -23,7 +23,6 @@ const effects = { }; export default class REGLRenderer extends Renderer { - #renderFunc; #regl; #glMatrix; @@ -38,7 +37,12 @@ export default class REGLRenderer extends Renderer { "WEBGL_color_buffer_float", "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; }); } @@ -79,7 +83,6 @@ export default class REGLRenderer extends Renderer { }); this.#renderFunc = (reglContext) => { - if (config.once) { this.stop(); } @@ -102,7 +105,7 @@ export default class REGLRenderer extends Renderer { if (config.useCamera) { cameraTex(cameraCanvas); } - const {viewportWidth, viewportHeight} = reglContext; + const { viewportWidth, viewportHeight } = reglContext; if (dimensions.width !== viewportWidth || dimensions.height !== viewportHeight) { dimensions.width = viewportWidth; 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); frame.cancel(); }); @@ -131,10 +134,10 @@ export default class REGLRenderer extends Renderer { update(now) { if (this.#renderFunc != null) { - const frame = this.#regl.frame(o => { + const frame = this.#regl.frame((o) => { this.#renderFunc(o); frame.cancel(); - }) + }); } super.update(now); } diff --git a/js/renderer.js b/js/renderer.js index e9937f3..9508383 100644 --- a/js/renderer.js +++ b/js/renderer.js @@ -1,7 +1,6 @@ import fetchLibraries from "./fetchLibraries.js"; export default class Renderer { - static libraries = fetchLibraries(); #type; #canvas; @@ -16,13 +15,17 @@ export default class Renderer { constructor(type, ready) { this.#type = type; this.#canvas = document.createElement("canvas"); - this.#ready = Renderer.libraries.then(libraries => { - this.#cache = new Map(libraries.staticAssets); - }).then(ready); + this.#ready = Renderer.libraries + .then((libraries) => { + this.#cache = new Map(libraries.staticAssets); + }) + .then(ready); this.#ready.then(() => this.start()); } - get running() { return this.#running; } + get running() { + return this.#running; + } start() { this.#running = true; @@ -35,18 +38,28 @@ export default class Renderer { update(now) { 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]) { [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]; } - get fullscreen() { return this.#fullscreen; } + get fullscreen() { + return this.#fullscreen; + } set fullscreen(value) { if (!!value === this.#fullscreen) return; @@ -80,7 +95,9 @@ export default class Renderer { } } - get destroyed() { return this.#destroyed; } + get destroyed() { + return this.#destroyed; + } destroy() { this.stop(); diff --git a/js/webgpu/renderer.js b/js/webgpu/renderer.js index 3bd352b..c7e1692 100644 --- a/js/webgpu/renderer.js +++ b/js/webgpu/renderer.js @@ -25,7 +25,6 @@ const effects = { }; export default class REGLRenderer extends Renderer { - #glMatrix; #device; #canvasContext; @@ -72,7 +71,6 @@ export default class REGLRenderer extends Renderer { } this.#rebuildingPipeline = (async () => { - const glMatrix = this.#glMatrix; const canvas = this.canvas; const cache = this.cache; @@ -205,10 +203,10 @@ export default class REGLRenderer extends Renderer { if (this.destroyed) return; const oldDevice = this.#device; if (oldDevice != null) { - (async () => { + async () => { await oldDevice.queue.onSubmittedWorkDone(); oldDevice.destroy(); - }); + }; } this.#device = null; super.destroy(); diff --git a/js/webgpu/utils.js b/js/webgpu/utils.js index 73eb49b..59e9d32 100644 --- a/js/webgpu/utils.js +++ b/js/webgpu/utils.js @@ -1,10 +1,7 @@ const loadTexture = async (device, cache, url) => { - const format = "rgba8unorm"; const usage = - GPUTextureUsage.TEXTURE_BINDING | - GPUTextureUsage.COPY_DST | - GPUTextureUsage.RENDER_ATTACHMENT; + GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT; if (url == null) { return device.createTexture({