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

Gouging a simpler project out of the larger project.

Browse Source
This commit is contained in:
Rezmason
2023-08-22 10:08:48 -07:00
parent 91201830f8
commit c231935475
168 changed files with 21 additions and 5613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
js/regl/imagePass.js
View File

@@ -1,33 +0,0 @@
import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
// Multiplies the rendered rain and bloom by a loaded in image
const defaultBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flammarion_Colored.jpg/917px-Flammarion_Colored.jpg";
export default ({ regl, config }, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
const background = loadImage(regl, bgURL);
const imagePassFrag = loadText("shaders/glsl/imagePass.frag.glsl");
const render = regl({
frag: regl.prop("frag"),
uniforms: {
backgroundTex: background.texture,
tex: inputs.primary,
bloomTex: inputs.bloom,
},
framebuffer: output,
});
return makePass(
{
primary: output,
},
Promise.all([background.loaded, imagePassFrag.loaded]),
(w, h) => output.resize(w, h),
(shouldRender) => {
if (shouldRender) {
render({ frag: imagePassFrag.text() });
}
}
);
};

89
js/regl/lkgHelper.js
View File

@@ -1,89 +0,0 @@
const recordedDevice = {
buttons: [0, 0, 0, 0],
calibration: {
DPI: { value: 324 },
center: { value: 0.15018756687641144 },
configVersion: "3.0",
flipImageX: { value: 0 },
flipImageY: { value: 0 },
flipSubp: { value: 0 },
fringe: { value: 0 },
invView: { value: 1 },
pitch: { value: 52.58013153076172 },
screenH: { value: 2048 },
screenW: { value: 1536 },
slope: { value: -7.145165920257568 },
verticalAngle: { value: 0 },
viewCone: { value: 40 },
},
defaultQuilt: {
quiltAspect: 0.75,
quiltX: 3840,
quiltY: 3840,
tileX: 8,
tileY: 6,
},
hardwareVersion: "portrait",
hwid: "LKG-P11063",
index: 0,
joystickIndex: -1,
state: "ok",
unityIndex: 1,
windowCoords: [1440, 900],
};
const interpretDevice = (device) => {
if (device == null) {
return { enabled: false, tileX: 1, tileY: 1 };
}
const fov = 15;
const calibration = Object.fromEntries(
Object.entries(device.calibration)
.map(([key, value]) => [key, value.value])
.filter(([key, value]) => value != null)
);
const screenInches = calibration.screenW / calibration.DPI;
const pitch = calibration.pitch * screenInches * Math.cos(Math.atan(1.0 / calibration.slope));
const tilt = (calibration.screenH / (calibration.screenW * calibration.slope)) * -(calibration.flipImageX * 2 - 1);
const subp = 1 / (calibration.screenW * 3);
const defaultQuilt = device.defaultQuilt;
const quiltViewPortion = [
(Math.floor(defaultQuilt.quiltX / defaultQuilt.tileX) * defaultQuilt.tileX) / defaultQuilt.quiltX,
(Math.floor(defaultQuilt.quiltY / defaultQuilt.tileY) * defaultQuilt.tileY) / defaultQuilt.quiltY,
];
return {
...defaultQuilt,
...calibration,
pitch,
tilt,
subp,
quiltViewPortion,
fov,
enabled: true,
};
};
export default async (useHoloplay = false, useRecordedDevice = false) => {
if (!useHoloplay) {
return interpretDevice(null);
}
const HoloPlayCore = await import("../../lib/holoplaycore.module.js");
const device = await new Promise(
(resolve, reject) =>
new HoloPlayCore.Client(
(data) => resolve(data.devices?.[0]),
(error) => resolve(null)
)
);
if (device == null && useRecordedDevice) {
return interpretDevice(recordedDevice);
}
return interpretDevice(device);
};

29
js/regl/main.js
View File

@@ -3,25 +3,6 @@ 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 makeQuiltPass from "./quiltPass.js";
import makeMirrorPass from "./mirrorPass.js";
import { setupCamera, cameraCanvas, cameraAspectRatio } from "../camera.js";
import getLKG from "./lkgHelper.js";
const effects = {
none: null,
plain: makePalettePass,
palette: makePalettePass,
customStripes: makeStripePass,
stripes: makeStripePass,
pride: makeStripePass,
transPride: makeStripePass,
trans: makeStripePass,
image: makeImagePass,
mirror: makeMirrorPass,
};
const dimensions = { width: 1, height: 1 };
@@ -35,7 +16,7 @@ const loadJS = (src) =>
});
export default async (canvas, config) => {
await Promise.all([loadJS("lib/regl.min.js"), loadJS("lib/gl-matrix.js")]);
await Promise.all([loadJS("lib/regl.js"), loadJS("lib/gl-matrix.js")]);
const resize = () => {
const devicePixelRatio = window.devicePixelRatio ?? 1;
@@ -78,14 +59,10 @@ export default async (canvas, config) => {
const regl = createREGL({ canvas, pixelRatio: 1, extensions, optionalExtensions });
const cameraTex = regl.texture(cameraCanvas);
const lkg = await getLKG(config.useHoloplay, true);
// 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, config, lkg, cameraTex, cameraAspectRatio };
const pipeline = makePipeline(context, [makeRain, makeBloomPass, effects[effectName], makeQuiltPass]);
const context = { regl, config };
const pipeline = makePipeline(context, [makeRain, makeBloomPass, makePalettePass]);
const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
const drawToScreen = regl({ uniforms: screenUniforms });
await Promise.all(pipeline.map((step) => step.ready));

50
js/regl/mirrorPass.js
View File

@@ -1,50 +0,0 @@
import { loadText, makePassFBO, makePass } from "./utils.js";
let start;
const numClicks = 5;
const clicks = Array(numClicks).fill([0, 0, -Infinity]).flat();
let aspectRatio = 1;
let index = 0;
window.onclick = (e) => {
clicks[index * 3 + 0] = 0 + e.clientX / e.srcElement.clientWidth;
clicks[index * 3 + 1] = 1 - e.clientY / e.srcElement.clientHeight;
clicks[index * 3 + 2] = (Date.now() - start) / 1000;
index = (index + 1) % numClicks;
};
export default ({ regl, config, cameraTex, cameraAspectRatio }, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const mirrorPassFrag = loadText("shaders/glsl/mirrorPass.frag.glsl");
const render = regl({
frag: regl.prop("frag"),
uniforms: {
time: regl.context("time"),
tex: inputs.primary,
bloomTex: inputs.bloom,
cameraTex,
clicks: () => clicks,
aspectRatio: () => aspectRatio,
cameraAspectRatio,
},
framebuffer: output,
});
start = Date.now();
return makePass(
{
primary: output,
},
Promise.all([mirrorPassFrag.loaded]),
(w, h) => {
output.resize(w, h);
aspectRatio = w / h;
},
(shouldRender) => {
if (shouldRender) {
render({ frag: mirrorPassFrag.text() });
}
}
);
};

34
js/regl/quiltPass.js
View File

@@ -1,34 +0,0 @@
import { loadText, makePassFBO, makePass } from "./utils.js";
// Multiplies the rendered rain and bloom by a loaded in image
export default ({ regl, config, lkg }, inputs) => {
if (!lkg.enabled) {
return makePass({
primary: inputs.primary,
});
}
const output = makePassFBO(regl, config.useHalfFloat);
const quiltPassFrag = loadText("shaders/glsl/quiltPass.frag.glsl");
const render = regl({
frag: regl.prop("frag"),
uniforms: {
quiltTexture: inputs.primary,
...lkg,
},
framebuffer: output,
});
return makePass(
{
primary: output,
},
Promise.all([quiltPassFrag.loaded]),
(w, h) => output.resize(w, h),
(shouldRender) => {
if (shouldRender) {
render({ frag: quiltPassFrag.text() });
}
}
);
};

62
js/regl/rainPass.js
View File

@@ -29,7 +29,7 @@ const blVert = [1, 0];
const brVert = [1, 1];
const quadVertices = [tlVert, trVert, brVert, tlVert, brVert, blVert];
export default ({ regl, config, lkg }) => {
export default ({ regl, config }) => {
// The volumetric mode multiplies the number of columns
// to reach the desired density, and then overlaps them
const volumetric = config.volumetric;
@@ -198,8 +198,6 @@ export default ({ regl, config, lkg }) => {
screenSize: regl.prop("screenSize"),
},
viewport: regl.prop("viewport"),
attributes: {
aPosition: quadPositions,
aCorner: Array(numQuads).fill(quadVertices),
@@ -218,17 +216,11 @@ export default ({ regl, config, lkg }) => {
mat4.rotateY(transform, transform, (Math.PI * 1) / 4);
mat4.translate(transform, transform, vec3.fromValues(0, 0, -1));
mat4.scale(transform, transform, vec3.fromValues(1, 1, 2));
} else if (lkg.enabled) {
mat4.translate(transform, transform, vec3.fromValues(0, 0, -1.1));
mat4.scale(transform, transform, vec3.fromValues(1, 1, 1));
mat4.scale(transform, transform, vec3.fromValues(0.15, 0.15, 0.15));
} else {
mat4.translate(transform, transform, vec3.fromValues(0, 0, -1));
}
const camera = mat4.create();
const vantagePoints = [];
return makePass(
{
primary: output,
@@ -248,48 +240,16 @@ export default ({ regl, config, lkg }) => {
output.resize(w, h);
const aspectRatio = w / h;
const [numTileColumns, numTileRows] = [lkg.tileX, lkg.tileY];
const numVantagePoints = numTileRows * numTileColumns;
const tileWidth = Math.floor(w / numTileColumns);
const tileHeight = Math.floor(h / numTileRows);
vantagePoints.length = 0;
for (let row = 0; row < numTileRows; row++) {
for (let column = 0; column < numTileColumns; column++) {
const index = column + row * numTileColumns;
const camera = mat4.create();
if (volumetric && config.isometric) {
if (aspectRatio > 1) {
mat4.ortho(camera, -1.5 * aspectRatio, 1.5 * aspectRatio, -1.5, 1.5, -1000, 1000);
} else {
mat4.ortho(camera, -1.5, 1.5, -1.5 / aspectRatio, 1.5 / aspectRatio, -1000, 1000);
}
} else if (lkg.enabled) {
mat4.perspective(camera, (Math.PI / 180) * lkg.fov, lkg.quiltAspect, 0.0001, 1000);
const distanceToTarget = -1; // TODO: Get from somewhere else
let vantagePointAngle = (Math.PI / 180) * lkg.viewCone * (index / (numVantagePoints - 1) - 0.5);
if (isNaN(vantagePointAngle)) {
vantagePointAngle = 0;
}
const xOffset = distanceToTarget * Math.tan(vantagePointAngle);
mat4.translate(camera, camera, vec3.fromValues(xOffset, 0, 0));
camera[8] = -xOffset / (distanceToTarget * Math.tan((Math.PI / 180) * 0.5 * lkg.fov) * lkg.quiltAspect); // Is this right??
} else {
mat4.perspective(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
}
const viewport = {
x: column * tileWidth,
y: row * tileHeight,
width: tileWidth,
height: tileHeight,
};
vantagePoints.push({ camera, viewport });
if (volumetric && config.isometric) {
if (aspectRatio > 1) {
mat4.ortho(camera, -1.5 * aspectRatio, 1.5 * aspectRatio, -1.5, 1.5, -1000, 1000);
} else {
mat4.ortho(camera, -1.5, 1.5, -1.5 / aspectRatio, 1.5 / aspectRatio, -1000, 1000);
}
} else {
mat4.perspective(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
}
[screenSize[0], screenSize[1]] = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
},
(shouldRender) => {
@@ -305,9 +265,7 @@ export default ({ regl, config, lkg }) => {
framebuffer: output,
});
for (const vantagePoint of vantagePoints) {
render({ ...vantagePoint, transform, screenSize, vert: rainPassVert.text(), frag: rainPassFrag.text() });
}
render({ camera, transform, screenSize, vert: rainPassVert.text(), frag: rainPassFrag.text() });
}
}
);

73
js/regl/stripePass.js
View File

@@ -1,73 +0,0 @@
import colorToRGB from "../colorToRGB.js";
import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js";
// Multiplies the rendered rain and bloom by a 1D gradient texture
// generated from the passed-in color sequence
// This shader introduces noise into the renders, to avoid banding
const transPrideStripeColors = [
{ space: "rgb", values: [0.36, 0.81, 0.98] },
{ space: "rgb", values: [0.96, 0.66, 0.72] },
{ space: "rgb", values: [1.0, 1.0, 1.0] },
{ space: "rgb", values: [0.96, 0.66, 0.72] },
{ space: "rgb", values: [0.36, 0.81, 0.98] },
]
.map((color) => Array(3).fill(color))
.flat();
const prideStripeColors = [
{ space: "rgb", values: [0.89, 0.01, 0.01] },
{ space: "rgb", values: [1.0, 0.55, 0.0] },
{ space: "rgb", values: [1.0, 0.93, 0.0] },
{ space: "rgb", values: [0.0, 0.5, 0.15] },
{ space: "rgb", values: [0.0, 0.3, 1.0] },
{ space: "rgb", values: [0.46, 0.03, 0.53] },
]
.map((color) => Array(2).fill(color))
.flat();
export default ({ regl, config }, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const { backgroundColor, cursorColor, glintColor, cursorIntensity, glintIntensity, ditherMagnitude } = config;
// Expand and convert stripe colors into 1D texture data
const stripeColors = "stripeColors" in config ? config.stripeColors : config.effect === "pride" ? prideStripeColors : transPrideStripeColors;
const stripeTex = make1DTexture(
regl,
stripeColors.map((color) => [...colorToRGB(color), 1])
);
const stripePassFrag = loadText("shaders/glsl/stripePass.frag.glsl");
const render = regl({
frag: regl.prop("frag"),
uniforms: {
backgroundColor: colorToRGB(backgroundColor),
cursorColor: colorToRGB(cursorColor),
glintColor: colorToRGB(glintColor),
cursorIntensity,
glintIntensity,
ditherMagnitude,
tex: inputs.primary,
bloomTex: inputs.bloom,
stripeTex,
},
framebuffer: output,
});
return makePass(
{
primary: output,
},
stripePassFrag.loaded,
(w, h) => output.resize(w, h),
(shouldRender) => {
if (shouldRender) {
render({ frag: stripePassFrag.text() });
}
}
);
};