eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-17 22:09:28 -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

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() });
}
}
);
};