diff --git a/README.md b/README.md index 332500f..cee5084 100644 --- a/README.md +++ b/README.md @@ -138,6 +138,7 @@ Now you know link fu. Here's a list of customization options: - `url` - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg) - `loops` - (WIP) if set to "true", this causes the effect to loop, so that it can be converted into a looping video. - `fps` — the framerate of the effect. Can be any number between 0 and 60. Default is 60. +- `suppressWarnings` - if set to "true", this suppresses any warnings that would otherwise appear— when viewing the project on a device with no GPU, for example. ## Troubleshooting diff --git a/js/config.js b/js/config.js index 3fd53f4..67094c7 100644 --- a/js/config.js +++ b/js/config.js @@ -121,6 +121,7 @@ const defaults = { resolution: 0.75, // An overall scale multiplier useHalfFloat: false, renderer: "regl", // The preferred web graphics API + suppressWarnings: false, // Whether to show warnings to visitors on load isometric: false, useHoloplay: false, loops: false, @@ -401,6 +402,7 @@ versions["2021"] = versions.resurrections; const range = (f, min = -Infinity, max = Infinity) => Math.max(min, Math.min(max, f)); const nullNaN = (f) => (isNaN(f) ? null : f); +const isTrue = (s) => s.toLowerCase().includes("true"); const parseColor = (isHSL) => (s) => ({ space: isHSL ? "hsl" : "rgb", @@ -440,7 +442,7 @@ const paramMapping = { version: { key: "version", parser: (s) => s }, font: { key: "font", parser: (s) => s }, effect: { key: "effect", parser: (s) => s }, - camera: { key: "useCamera", parser: (s) => s.toLowerCase().includes("true") }, + camera: { key: "useCamera", parser: isTrue }, width: { key: "numColumns", parser: (s) => nullNaN(parseInt(s)) }, numColumns: { key: "numColumns", parser: (s) => nullNaN(parseInt(s)) }, density: { key: "density", parser: (s) => nullNaN(range(parseFloat(s), 0)) }, @@ -498,13 +500,14 @@ const paramMapping = { parser: (s) => nullNaN(range(parseFloat(s), 0, Infinity)), }, - volumetric: { key: "volumetric", parser: (s) => s.toLowerCase().includes("true") }, - loops: { key: "loops", parser: (s) => s.toLowerCase().includes("true") }, + volumetric: { key: "volumetric", parser: isTrue }, + loops: { key: "loops", parser: isTrue }, fps: { key: "fps", parser: (s) => nullNaN(range(parseFloat(s), 0, 60)) }, - skipIntro: { key: "skipIntro", parser: (s) => s.toLowerCase().includes("true") }, + skipIntro: { key: "skipIntro", parser: isTrue }, renderer: { key: "renderer", parser: (s) => s }, - once: { key: "once", parser: (s) => s.toLowerCase().includes("true") }, - isometric: { key: "isometric", parser: (s) => s.toLowerCase().includes("true") }, + suppressWarnings: { key: "suppressWarnings", parser: isTrue }, + once: { key: "once", parser: isTrue }, + isometric: { key: "isometric", parser: isTrue }, }; paramMapping.paletteRGB = paramMapping.palette; diff --git a/js/main.js b/js/main.js index 61d454a..3f6809b 100644 --- a/js/main.js +++ b/js/main.js @@ -18,12 +18,12 @@ const isRunningSwiftShader = () => { }; document.body.onload = async () => { - const urlParams = Object.fromEntries(new URLSearchParams(window.location.search).entries()); - const config = makeConfig(urlParams); + const urlParams = new URLSearchParams(window.location.search); + const config = makeConfig(Object.fromEntries(urlParams.entries())); const useWebGPU = (await supportsWebGPU()) && ["webgpu"].includes(config.renderer?.toLowerCase()); const solution = import(`./${useWebGPU ? "webgpu" : "regl"}/main.js`); - if (isRunningSwiftShader()) { + if (isRunningSwiftShader() && !config.suppressWarnings) { const notice = document.createElement("notice"); notice.innerHTML = `

Wake up, Neo... you've got hardware acceleration disabled.

@@ -34,6 +34,9 @@ document.body.onload = async () => { canvas.style.display = "none"; document.body.appendChild(notice); document.querySelector(".blue.pill").addEventListener("click", async () => { + config.suppressWarnings = true; + urlParams.set("suppressWarnings", true); + history.replaceState({}, "", "?" + unescape(urlParams.toString())); (await solution).default(canvas, config); canvas.style.display = "unset"; document.body.removeChild(notice);