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

rainPass now renders multiple cameras and viewports, using data from the hardware.

Browse Source 
Added quiltPass (which uses holoplay’s quilting shader).
Added a holoplay effect version. (Versions can also now specify a preferred renderer.)
This commit is contained in:
Rezmason
2021-12-15 07:20:33 -08:00
parent 68ad689e1e
commit 2364bbc8bc
7 changed files with 1047 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
js/config.js
View File

@@ -75,6 +75,7 @@ const defaults = {
slant: 0, // The angle at which rain falls; the orientation of the glyph grid
resolution: 1, // An overall scale multiplier
useHalfFloat: false,
renderer: "webgpu", // The preferred web graphics API
};
const versions = {
@@ -205,6 +206,30 @@ const versions = {
{ hsl: [0.1, 1.0, 0.9], at: 1.0 },
],
},
holoplay: {
...defaults,
...fonts.resurrections,
numColumns: 40,
fallSpeed: 0.35,
cycleStyle: "cycleRandomly",
cycleSpeed: 0.8,
glyphEdgeCrop: 0.1,
paletteEntries: [
{ hsl: [0.39, 0.9, 0.0], at: 0.0 },
{ hsl: [0.39, 1.0, 0.6], at: 0.5 },
{ hsl: [0.39, 1.0, 1.0], at: 1.0 },
],
raindropLength: 1.4,
highPassThreshold: 0.2,
cursorEffectThreshold: 0.8,
renderer: "regl",
bloomSize: 0,
volumetric: true,
forwardSpeed: 0,
density: 3,
},
};
versions.throwback = versions.operator;
versions["1999"] = versions.operator;
@@ -247,6 +272,7 @@ const paramMapping = {
stripeColors: { key: "stripeColors", parser: (s) => s },
backgroundColor: { key: "backgroundColor", parser: (s) => s.split(",").map(parseFloat) },
volumetric: { key: "volumetric", parser: (s) => s.toLowerCase().includes("true") },
renderer: { key: "renderer", parser: (s) => s },
};
paramMapping.dropLength = paramMapping.raindropLength;
paramMapping.angle = paramMapping.slant;

4
js/main.js
View File

@@ -12,8 +12,8 @@ const supportsWebGPU = async () => {
document.body.onload = async () => {
const urlParams = Object.fromEntries(new URLSearchParams(window.location.search).entries());
const useREGL = !(await supportsWebGPU()) || ["webgl", "regl"].includes(urlParams.renderer?.toLowerCase());
const solution = import(`./${useREGL ? "regl" : "webgpu"}/main.js`);
const config = makeConfig(urlParams);
const useREGL = !(await supportsWebGPU()) || ["webgl", "regl"].includes(config.renderer?.toLowerCase());
const solution = import(`./${useREGL ? "regl" : "webgpu"}/main.js`);
(await solution).default(canvas, config);
};

95
js/regl/main.js
View File

@@ -6,6 +6,9 @@ import makePalettePass from "./palettePass.js";
import makeStripePass from "./stripePass.js";
import makeImagePass from "./imagePass.js";
import makeResurrectionPass from "./resurrectionPass.js";
import makeQuiltPass from "./quiltPass.js";
import * as HoloPlayCore from "../../lib/holoplaycore.module.js";
const effects = {
none: null,
@@ -48,10 +51,100 @@ export default async (canvas, config) => {
optionalExtensions: ["EXT_color_buffer_half_float", "WEBGL_color_buffer_float", "OES_standard_derivatives"],
});
const lkg = await new Promise((resolve, reject) => {
const client = new HoloPlayCore.Client((data) => {
/*
data = {
devices: [
{
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 ]
}
],
error: 0,
version: "1.2.2"
};
/**/
if (data.devices.length === 0) {
resolve({ tileX: 1, tileY: 1, fov: 90 });
return;
}
const device = data.devices[0];
const defaultQuilt = device.defaultQuilt;
const {quiltX, quiltY, tileX, tileY} = defaultQuilt;
const fov = 15; // But is it?
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 quiltViewPortion = [
(Math.floor(quiltX / tileX) * tileX) / quiltX,
(Math.floor(quiltY / tileY) * tileY) / quiltY,
];
const output = {
...defaultQuilt,
...calibration,
pitch,
tilt,
subp,
quiltViewPortion,
fov
};
resolve(output);
}, reject);
});
// All this takes place in a full screen quad.
const fullScreenQuad = makeFullScreenQuad(regl);
const effectName = config.effect in effects ? config.effect : "plain";
const pipeline = makePipeline({ regl, config }, [makeRain, makeBloomPass, effects[effectName]]);
const pipeline = makePipeline({ regl, config, lkg }, [makeRain, makeBloomPass, effects[effectName], makeQuiltPass]);
const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
const drawToScreen = regl({ uniforms: screenUniforms });
await Promise.all(pipeline.map((step) => step.ready));

34
js/regl/quiltPass.js Normal file
View File

@@ -0,0 +1,34 @@
import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
// Multiplies the rendered rain and bloom by a loaded in image
export default ({ regl, config, lkg }, inputs) => {
let enabled = lkg.tileX * lkg.tileY > 1;
// enabled = false;
if (!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),
() => render({ frag: quiltPassFrag.text() })
);
};

71
js/regl/rainPass.js
View File

@@ -19,7 +19,7 @@ const blVert = [1, 0];
const brVert = [1, 1];
const quadVertices = [tlVert, trVert, brVert, tlVert, brVert, blVert];
export default ({ regl, config }) => {
export default ({ regl, config, lkg }) => {
// The volumetric mode multiplies the number of columns
// to reach the desired density, and then overlaps them
const volumetric = config.volumetric;
@@ -143,6 +143,8 @@ export default ({ regl, config }) => {
screenSize: regl.prop("screenSize"),
},
viewport: regl.prop("viewport"),
attributes: {
aPosition: quadPositions,
aCorner: Array(numQuads).fill(quadVertices),
@@ -163,9 +165,16 @@ export default ({ regl, config }) => {
mat4.scale(transform, transform, vec3.fromValues(1, 1, 2));
} else {
mat4.translate(transform, transform, vec3.fromValues(0, 0, -1));
// mat4.rotateX(transform, transform, (Math.PI * 1) / 8);
// 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));
}
const camera = mat4.create();
const vantagePoints = [];
return makePass(
{
primary: output,
@@ -174,14 +183,47 @@ export default ({ regl, config }) => {
(w, h) => {
output.resize(w, h);
const aspectRatio = w / h;
if (config.effect === "none") {
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);
const [numTileColumns, numTileRows] = [lkg.tileX, lkg.tileY];
const numVantagePoints = numTileRows * numTileColumns;
const tileSize = [Math.floor(w /*lkg.quiltX*/ / numTileColumns), Math.floor(h /*lkg.quiltY*/ / 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 (config.effect === "none") {
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) * lkg.fov, aspectRatio, 0.0001, 1000);
mat4.translate(camera, camera, vec3.fromValues(0, 0, -1));
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) * aspectRatio); // Is this right??
}
const viewport = {
x: column * tileSize[0],
y: row * tileSize[1],
width: tileSize[0],
height: tileSize[1],
};
vantagePoints.push({ camera, viewport });
}
} else {
mat4.perspective(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
}
[screenSize[0], screenSize[1]] = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
},
@@ -192,7 +234,18 @@ export default ({ regl, config }) => {
color: [0, 0, 0, 1],
framebuffer: output,
});
render({ camera, transform, screenSize, vert: rainPassVert.text(), frag: rainPassFrag.text() });
// const now = Date.now();
// mat4.identity(transform);
// mat4.rotateX(transform, transform, (Math.PI * 1) / 8);
// mat4.rotateY(transform, transform, Math.sin(0.001 * now));
// mat4.translate(transform, transform, vec3.fromValues(0, 0, -1));
// mat4.scale(transform, transform, vec3.fromValues(1, 1, 2));
for (const vantagePoint of vantagePoints) {
render({ ...vantagePoint, transform, screenSize, vert: rainPassVert.text(), frag: rainPassFrag.text() });
}
}
);
};