eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-18 22:29:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Rezmason
2021-11-15 08:05:31 -08:00
parent aa56cc4256
commit d273573348
4 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -31,9 +31,6 @@
For more information, please visit: https://github.com/Rezmason/matrix 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> <script type="module" src="js/main.js"></script>
</body> </body>
</html> </html>

11
js/regl/main.js
View File

@@ -22,7 +22,18 @@ const effects = {
const dimensions = { width: 1, height: 1 }; 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) => { export default async (canvas, config) => {
await Promise.all([loadJS("lib/regl.js"), loadJS("lib/gl-matrix.js")]);
const resize = () => { const resize = () => {
canvas.width = Math.ceil(canvas.clientWidth * config.resolution); canvas.width = Math.ceil(canvas.clientWidth * config.resolution);
canvas.height = Math.ceil(canvas.clientHeight * config.resolution); canvas.height = Math.ceil(canvas.clientHeight * config.resolution);

11
js/webgpu/main.js
View File

@@ -9,6 +9,15 @@ import makeImagePass from "./imagePass.js";
import makeResurrectionPass from "./resurrectionPass.js"; import makeResurrectionPass from "./resurrectionPass.js";
import makeEndPass from "./endPass.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 = { const effects = {
none: null, none: null,
plain: makePalettePass, plain: makePalettePass,
@@ -23,6 +32,8 @@ const effects = {
}; };
export default async (canvas, config) => { export default async (canvas, config) => {
await loadJS("lib/gl-matrix.js");
const adapter = await navigator.gpu.requestAdapter(); const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice(); const device = await adapter.requestDevice();
const canvasContext = canvas.getContext("webgpu"); const canvasContext = canvas.getContext("webgpu");

4
js/webgpu/rainPass.js
View File

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