mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-22 15:49:30 -07:00
Massive overhaul: the renderers are now classes that implement Renderer; replaced webpack and rollup with vite; converted bundle-contents to "core" and "full" bundle profiles; renamed "inclusions" to "staticAssets", which are "url" base64-encoded images and "raw" text strings; renamed the Matrix component module to the JSX extension; built out a test scaffold at tools/test/index.html to manually test the various deploy options.
This commit is contained in:
Rezmason
170
js/regl/main.js
170
js/regl/main.js
@@ -1,170 +0,0 @@
|
||||
import { makeFullScreenQuad, makePipeline } from "./utils.js";
|
||||
import fetchLibraries from "../fetchLibraries.js";
|
||||
import makeRain from "./rainPass.js";
|
||||
import makeBloomPass from "./bloomPass.js";
|
||||
import makePalettePass from "./palettePass.js";
|
||||
import makeStripePass from "./stripePass.js";
|
||||
import makeImagePass from "./imagePass.js";
|
||||
import makeMirrorPass from "./mirrorPass.js";
|
||||
import { setupCamera, cameraCanvas, cameraAspectRatio } from "../utils/camera.js";
|
||||
|
||||
const effects = {
|
||||
none: null,
|
||||
plain: makePalettePass,
|
||||
palette: makePalettePass,
|
||||
customStripes: makeStripePass,
|
||||
stripes: makeStripePass,
|
||||
pride: makeStripePass,
|
||||
transPride: makeStripePass,
|
||||
trans: makeStripePass,
|
||||
image: makeImagePass,
|
||||
mirror: makeMirrorPass,
|
||||
};
|
||||
|
||||
let createREGL, glMatrix, inclusions;
|
||||
|
||||
export const init = async (canvas) => {
|
||||
const libraries = await fetchLibraries();
|
||||
createREGL = libraries.createREGL;
|
||||
glMatrix = libraries.glMatrix;
|
||||
inclusions = libraries.inclusions;
|
||||
|
||||
const resize = () => {
|
||||
const devicePixelRatio = window.devicePixelRatio ?? 1;
|
||||
canvas.width = Math.ceil(canvas.clientWidth * devicePixelRatio * rain.resolution);
|
||||
canvas.height = Math.ceil(canvas.clientHeight * devicePixelRatio * rain.resolution);
|
||||
};
|
||||
|
||||
const doubleClick = () => {
|
||||
if (!document.fullscreenEnabled && !document.webkitFullscreenEnabled) {
|
||||
return;
|
||||
}
|
||||
if (document.fullscreenElement != null) {
|
||||
document.exitFullscreen();
|
||||
return;
|
||||
}
|
||||
if (canvas.webkitRequestFullscreen != null) {
|
||||
canvas.webkitRequestFullscreen();
|
||||
} else {
|
||||
canvas.requestFullscreen();
|
||||
}
|
||||
};
|
||||
|
||||
const extensions = ["OES_texture_half_float", "OES_texture_half_float_linear"];
|
||||
// These extensions are also needed, but Safari misreports that they are missing
|
||||
const optionalExtensions = [
|
||||
"EXT_color_buffer_half_float",
|
||||
"WEBGL_color_buffer_float",
|
||||
"OES_standard_derivatives",
|
||||
];
|
||||
|
||||
const regl = createREGL({ canvas, pixelRatio: 1, extensions, optionalExtensions });
|
||||
const cache = new Map(inclusions);
|
||||
const rain = { canvas, resize, doubleClick, cache, regl, resolution: 1 };
|
||||
|
||||
window.addEventListener("dblclick", doubleClick);
|
||||
window.addEventListener("resize", resize);
|
||||
resize();
|
||||
|
||||
return rain;
|
||||
};
|
||||
|
||||
export const formulate = async (rain, config) => {
|
||||
if (rain.destroyed) {
|
||||
throw new Error("Cannot formulate a destroyed rain instance.");
|
||||
}
|
||||
const { resize, canvas, cache, regl } = rain;
|
||||
rain.resolution = config.resolution;
|
||||
resize();
|
||||
|
||||
const dimensions = { width: 1, height: 1 };
|
||||
|
||||
if (config.useCamera) {
|
||||
await setupCamera();
|
||||
}
|
||||
|
||||
const cameraTex = regl.texture(cameraCanvas);
|
||||
|
||||
// All this takes place in a full screen quad.
|
||||
const fullScreenQuad = makeFullScreenQuad(regl);
|
||||
const effectName = config.effect in effects ? config.effect : "palette";
|
||||
const context = { regl, cache, config, cameraTex, cameraAspectRatio, glMatrix };
|
||||
const pipeline = makePipeline(context, [makeRain, makeBloomPass, effects[effectName]]);
|
||||
|
||||
const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
|
||||
const drawToScreen = regl({ uniforms: screenUniforms });
|
||||
await Promise.all(pipeline.map((step) => step.ready));
|
||||
pipeline.forEach((step) => step.setSize(canvas.width, canvas.height));
|
||||
dimensions.width = canvas.width;
|
||||
dimensions.height = canvas.height;
|
||||
|
||||
const targetFrameTimeMilliseconds = 1000 / config.fps;
|
||||
let last = NaN;
|
||||
|
||||
resetREGLTime: {
|
||||
const reset = regl.frame((o) => {
|
||||
o.time = 0;
|
||||
o.tick = 0;
|
||||
reset.cancel();
|
||||
});
|
||||
}
|
||||
|
||||
const tick = regl.frame(({ viewportWidth, viewportHeight }) => {
|
||||
if (config.once) {
|
||||
tick.cancel();
|
||||
}
|
||||
|
||||
const now = regl.now() * 1000;
|
||||
|
||||
if (isNaN(last)) {
|
||||
last = now;
|
||||
}
|
||||
|
||||
const shouldRender =
|
||||
config.fps >= 60 || now - last >= targetFrameTimeMilliseconds || config.once == true;
|
||||
|
||||
if (shouldRender) {
|
||||
while (now - targetFrameTimeMilliseconds > last) {
|
||||
last += targetFrameTimeMilliseconds;
|
||||
}
|
||||
}
|
||||
|
||||
if (config.useCamera) {
|
||||
cameraTex(cameraCanvas);
|
||||
}
|
||||
if (dimensions.width !== viewportWidth || dimensions.height !== viewportHeight) {
|
||||
dimensions.width = viewportWidth;
|
||||
dimensions.height = viewportHeight;
|
||||
for (const step of pipeline) {
|
||||
step.setSize(viewportWidth, viewportHeight);
|
||||
}
|
||||
}
|
||||
fullScreenQuad(() => {
|
||||
for (const step of pipeline) {
|
||||
step.execute(shouldRender);
|
||||
}
|
||||
drawToScreen();
|
||||
});
|
||||
});
|
||||
|
||||
if (rain.tick != null) {
|
||||
rain.tick.cancel();
|
||||
}
|
||||
|
||||
rain.tick = tick;
|
||||
};
|
||||
|
||||
export const destroy = (rain) => {
|
||||
if (rain.destroyed) {
|
||||
return;
|
||||
}
|
||||
const { regl, cache, resize, doubleClick, tick, canvas } = rain;
|
||||
window.removeEventListener("resize", resize);
|
||||
window.removeEventListener("dblclick", doubleClick);
|
||||
cache.clear();
|
||||
tick.cancel(); // stop RAF
|
||||
regl.destroy(); // releases all GPU resources & event listeners
|
||||
rain.destroyed = true;
|
||||
};
|
||||
|
||||
export const type = "regl";
|
||||
139
js/regl/renderer.js
Normal file
139
js/regl/renderer.js
Normal file
@@ -0,0 +1,139 @@
|
||||
import Renderer from "../renderer.js";
|
||||
import { makeFullScreenQuad, makePipeline } from "./utils.js";
|
||||
|
||||
import makeRain from "./rainPass.js";
|
||||
import makeBloomPass from "./bloomPass.js";
|
||||
import makePalettePass from "./palettePass.js";
|
||||
import makeStripePass from "./stripePass.js";
|
||||
import makeImagePass from "./imagePass.js";
|
||||
import makeMirrorPass from "./mirrorPass.js";
|
||||
import { setupCamera, cameraCanvas, cameraAspectRatio } from "../utils/camera.js";
|
||||
|
||||
const effects = {
|
||||
none: null,
|
||||
plain: makePalettePass,
|
||||
palette: makePalettePass,
|
||||
customStripes: makeStripePass,
|
||||
stripes: makeStripePass,
|
||||
pride: makeStripePass,
|
||||
transPride: makeStripePass,
|
||||
trans: makeStripePass,
|
||||
image: makeImagePass,
|
||||
mirror: makeMirrorPass,
|
||||
};
|
||||
|
||||
export default class REGLRenderer extends Renderer {
|
||||
|
||||
#tick;
|
||||
#regl;
|
||||
#glMatrix;
|
||||
|
||||
constructor() {
|
||||
super("regl", async () => {
|
||||
const libraries = await Renderer.libraries;
|
||||
const extensions = ["OES_texture_half_float", "OES_texture_half_float_linear"];
|
||||
// These extensions are also needed, but Safari misreports that they are missing
|
||||
const optionalExtensions = [
|
||||
"EXT_color_buffer_half_float",
|
||||
"WEBGL_color_buffer_float",
|
||||
"OES_standard_derivatives",
|
||||
];
|
||||
this.#regl = libraries.createREGL({ canvas: this.canvas, pixelRatio: 1, extensions, optionalExtensions });
|
||||
this.#glMatrix = libraries.glMatrix;
|
||||
});
|
||||
}
|
||||
|
||||
async formulate(config) {
|
||||
await super.formulate(config);
|
||||
|
||||
const canvas = this.canvas;
|
||||
const cache = this.cache;
|
||||
const regl = this.#regl;
|
||||
const glMatrix = this.#glMatrix;
|
||||
|
||||
const dimensions = { width: 1, height: 1 };
|
||||
|
||||
if (config.useCamera) {
|
||||
await setupCamera();
|
||||
}
|
||||
|
||||
const cameraTex = regl.texture(cameraCanvas);
|
||||
|
||||
// All this takes place in a full screen quad.
|
||||
const fullScreenQuad = makeFullScreenQuad(regl);
|
||||
const effectName = config.effect in effects ? config.effect : "palette";
|
||||
const context = { regl, cache, config, cameraTex, cameraAspectRatio, glMatrix };
|
||||
const pipeline = makePipeline(context, [makeRain, makeBloomPass, effects[effectName]]);
|
||||
|
||||
const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
|
||||
const drawToScreen = regl({ uniforms: screenUniforms });
|
||||
await Promise.all(pipeline.map((step) => step.ready));
|
||||
pipeline.forEach((step) => step.setSize(canvas.width, canvas.height));
|
||||
dimensions.width = canvas.width;
|
||||
dimensions.height = canvas.height;
|
||||
|
||||
const targetFrameTimeMilliseconds = 1000 / config.fps;
|
||||
let last = NaN;
|
||||
|
||||
resetREGLTime: {
|
||||
const reset = regl.frame((o) => {
|
||||
o.time = 0;
|
||||
o.tick = 0;
|
||||
reset.cancel();
|
||||
});
|
||||
}
|
||||
|
||||
const tick = regl.frame(({ viewportWidth, viewportHeight }) => {
|
||||
if (config.once) {
|
||||
tick.cancel();
|
||||
}
|
||||
|
||||
const now = regl.now() * 1000;
|
||||
|
||||
if (isNaN(last)) {
|
||||
last = now;
|
||||
}
|
||||
|
||||
const shouldRender =
|
||||
config.fps >= 60 || now - last >= targetFrameTimeMilliseconds || config.once == true;
|
||||
|
||||
if (shouldRender) {
|
||||
while (now - targetFrameTimeMilliseconds > last) {
|
||||
last += targetFrameTimeMilliseconds;
|
||||
}
|
||||
}
|
||||
|
||||
if (config.useCamera) {
|
||||
cameraTex(cameraCanvas);
|
||||
}
|
||||
if (dimensions.width !== viewportWidth || dimensions.height !== viewportHeight) {
|
||||
dimensions.width = viewportWidth;
|
||||
dimensions.height = viewportHeight;
|
||||
for (const step of pipeline) {
|
||||
step.setSize(viewportWidth, viewportHeight);
|
||||
}
|
||||
}
|
||||
fullScreenQuad(() => {
|
||||
for (const step of pipeline) {
|
||||
step.execute(shouldRender);
|
||||
}
|
||||
drawToScreen();
|
||||
});
|
||||
});
|
||||
|
||||
if (this.#tick != null) {
|
||||
this.#tick.cancel();
|
||||
}
|
||||
|
||||
this.#tick = tick;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.destroyed) {
|
||||
return;
|
||||
}
|
||||
this.#tick.cancel(); // stop RAF
|
||||
this.#regl.destroy(); // releases all GPU resources & event listeners
|
||||
super.destroy();
|
||||
}
|
||||
}
|
||||
@@ -60,8 +60,8 @@ const loadImage = (cache, regl, url, mipmap) => {
|
||||
const data = new Image();
|
||||
data.crossOrigin = "anonymous";
|
||||
let imageURL;
|
||||
if (typeof cache.get(`import::${url}`) === "function") {
|
||||
imageURL = (await cache.get(`import::${url}`)()).default;
|
||||
if (typeof cache.get(`url::${url}`) === "function") {
|
||||
imageURL = (await cache.get(`url::${url}`)()).default;
|
||||
} else {
|
||||
imageURL = url;
|
||||
}
|
||||
@@ -103,13 +103,11 @@ const loadText = (cache, url) => {
|
||||
},
|
||||
loaded: (async () => {
|
||||
if (url != null) {
|
||||
let textURL;
|
||||
if (typeof cache.get(`import::${url}`) === "function") {
|
||||
textURL = (await cache.get(`import::${url}`)()).default;
|
||||
if (typeof cache.get(`raw::${url}`) === "function") {
|
||||
text = (await cache.get(`raw::${url}`)()).default;
|
||||
} else {
|
||||
textURL = url;
|
||||
text = await (await fetch(url)).text();
|
||||
}
|
||||
text = await (await fetch(textURL)).text();
|
||||
loaded = true;
|
||||
}
|
||||
})(),
|
||||
|
||||
Reference in New Issue
Block a user