diff --git a/README.md b/README.md index 3541569..ebb5162 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ - [Goals](#goals) - [Sidenote: other people's Matrix effects](#sidenote-other-peoples-matrix-effects) - [Customization](#customization) +- [Troubleshooting](#troubleshooting) - [Future directions](#future-directions) - [Friends of the project](#friends-of-the-project) - [Colophon](#colophon) @@ -136,6 +137,12 @@ Now you know link fu. Here's a list of customization options: - `loops` - (WIP) if set to "true", this causes the effect to loop, so that it can be converted into a looping video. +## Troubleshooting + +There haven't been many reported issues yet that weren't quick fixes, but one has stood out: many visitors have previously *disabled hardware acceleration* in their Chrome browsers, at the advice of well-meaning Internet websites. + +What this does is cause Chrome to fall back to **SwiftShader**, a software renderer that runs projects like this one at a much slower rate. Because of this, if you are seeing serious performance issues on Chrome, it's recommended that you ensure hardware acceleration is enabled in your browser settings. + ## Future directions This project is still in active development, but some upcoming features are worth mentioning. diff --git a/TODO.txt b/TODO.txt index 30718f4..b8c73b0 100644 --- a/TODO.txt +++ b/TODO.txt @@ -1,5 +1,7 @@ TODO: +Replace fwidth with a uniform or something + Bloom comparison: WebGPU vs REGL Why are they different? Create a project that tests them side-by-side diff --git a/index.html b/index.html index 34e0569..90150eb 100644 --- a/index.html +++ b/index.html @@ -3,26 +3,90 @@ Matrix digital rain - - + + diff --git a/js/main.js b/js/main.js index 4268bf3..61d454a 100644 --- a/js/main.js +++ b/js/main.js @@ -10,10 +10,35 @@ const supportsWebGPU = async () => { return window.GPUQueue != null && navigator.gpu != null && navigator.gpu.getPreferredCanvasFormat != null; }; +const isRunningSwiftShader = () => { + const gl = document.createElement("canvas").getContext("webgl"); + const debugInfo = gl.getExtension("WEBGL_debug_renderer_info"); + const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL); + return renderer.toLowerCase().includes("swiftshader"); +}; + document.body.onload = async () => { const urlParams = Object.fromEntries(new URLSearchParams(window.location.search).entries()); const config = makeConfig(urlParams); const useWebGPU = (await supportsWebGPU()) && ["webgpu"].includes(config.renderer?.toLowerCase()); const solution = import(`./${useWebGPU ? "webgpu" : "regl"}/main.js`); - (await solution).default(canvas, config); + + if (isRunningSwiftShader()) { + const notice = document.createElement("notice"); + notice.innerHTML = `
+

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

+

This project will still run, incredibly, but at a noticeably low framerate.

+ + Free me + `; + canvas.style.display = "none"; + document.body.appendChild(notice); + document.querySelector(".blue.pill").addEventListener("click", async () => { + (await solution).default(canvas, config); + canvas.style.display = "unset"; + document.body.removeChild(notice); + }); + } else { + (await solution).default(canvas, config); + } }; diff --git a/js/regl/main.js b/js/regl/main.js index 40d7f9b..18f3248 100644 --- a/js/regl/main.js +++ b/js/regl/main.js @@ -70,12 +70,12 @@ export default async (canvas, config) => { extensions.push("OES_standard_derivatives"); break; case "fwidth_10_1_2022_B": - optionalExtensions.forEach(ext => extensions.push(ext)); + optionalExtensions.forEach((ext) => extensions.push(ext)); extensions.length = 0; break; } - const regl = createREGL({ canvas, extensions, optionalExtensions, }); + const regl = createREGL({ canvas, extensions, optionalExtensions }); const cameraTex = regl.texture(cameraCanvas); const lkg = await getLKG(config.useHoloplay, true);