Non-module scripts are now imported through the JS. It's not pretty, but it keeps the WebGPU project from loading regl unnecessarily.

js/webgpu/main.js

@@ -9,6 +9,15 @@ import makeImagePass from "./imagePass.js";
 import makeResurrectionPass from "./resurrectionPass.js";
 import makeEndPass from "./endPass.js";
 
+const loadJS = (src) =>
+	new Promise((resolve, reject) => {
+		const tag = document.createElement("script");
+		tag.onload = resolve;
+		tag.onerror = reject;
+		tag.src = src;
+		document.body.appendChild(tag);
+	});
+
 const effects = {
 	none: null,
 	plain: makePalettePass,
@@ -23,6 +32,8 @@ const effects = {
 };
 
 export default async (canvas, config) => {
+	await loadJS("lib/gl-matrix.js");
+
 	const adapter = await navigator.gpu.requestAdapter();
 	const device = await adapter.requestDevice();
 	const canvasContext = canvas.getContext("webgpu");

js/webgpu/rainPass.js

@@ -1,8 +1,6 @@
 import { structs, byteSizeOf } from "../../lib/gpu-buffer.js";
 import { makeRenderTarget, loadTexture, loadShader, makeUniformBuffer, makeBindGroup, makePass } from "./utils.js";
 
-const { mat4, vec3 } = glMatrix;
-
 const rippleTypes = {
 	box: 0,
 	circle: 1,
@@ -32,6 +30,8 @@ const makeConfigBuffer = (device, configUniforms, config, density, gridSize) =>
 };
 
 export default ({ config, device, timeBuffer, canvasFormat }) => {
+	const { mat4, vec3 } = glMatrix;
+
 	const assets = [loadTexture(device, config.glyphTexURL), loadShader(device, "shaders/wgsl/rainPass.wgsl")];
 
 	// The volumetric mode multiplies the number of columns