From d273573348542301bfaf6a5768404feaef1dcd5d Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Mon, 15 Nov 2021 08:05:31 -0800
Subject: [PATCH] Non-module scripts are now imported through the JS. It's not
 pretty, but it keeps the WebGPU project from loading regl unnecessarily.

---
 index.html            |  3 ---
 js/regl/main.js       | 11 +++++++++++
 js/webgpu/main.js     | 11 +++++++++++
 js/webgpu/rainPass.js |  4 ++--
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 6735f54..95df214 100644
--- a/index.html
+++ b/index.html
@@ -31,9 +31,6 @@
 
 			For more information, please visit: https://github.com/Rezmason/matrix
 		 -->
-		<!-- <script src="lib/regl.min.js"></script> -->
-		<script src="lib/regl.js"></script>
-		<script src="lib/gl-matrix.js"></script>
 		<script type="module" src="js/main.js"></script>
 	</body>
 </html>
diff --git a/js/regl/main.js b/js/regl/main.js
index 3026ec3..b2c907a 100644
--- a/js/regl/main.js
+++ b/js/regl/main.js
@@ -22,7 +22,18 @@ const effects = {
 
 const dimensions = { width: 1, height: 1 };
 
+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);
+	});
+
 export default async (canvas, config) => {
+	await Promise.all([loadJS("lib/regl.js"), loadJS("lib/gl-matrix.js")]);
+
 	const resize = () => {
 		canvas.width = Math.ceil(canvas.clientWidth * config.resolution);
 		canvas.height = Math.ceil(canvas.clientHeight * config.resolution);
diff --git a/js/webgpu/main.js b/js/webgpu/main.js
index c88bf07..e41a8b3 100644
--- a/js/webgpu/main.js
+++ b/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");
diff --git a/js/webgpu/rainPass.js b/js/webgpu/rainPass.js
index 5fa250d..d1ba43d 100644
--- a/js/webgpu/rainPass.js
+++ b/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