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

Camera input and mirror effect now also work in WebGPU. Added the "once" parameter, which renders a single frame. Fixed bugs in gpu-buffer.

Browse Source
This commit is contained in:
Rezmason
2022-08-11 00:08:05 -07:00
parent fc6821f4db
commit 3da3db61f1
10 changed files with 241 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
js/regl/main.js
View File

@@ -8,8 +8,8 @@ import makeImagePass from "./imagePass.js";
import makeResurrectionPass from "./resurrectionPass.js";
import makeQuiltPass from "./quiltPass.js";
import makeMirrorPass from "./mirrorPass.js";
import { setupCamera, cameraCanvas, cameraAspectRatio } from "../camera.js";
import getLKG from "./lkgHelper.js";
import { setupCamera } from "../camera.js";
const effects = {
none: null,
@@ -70,17 +70,24 @@ export default async (canvas, config) => {
optionalExtensions: ["EXT_color_buffer_half_float", "WEBGL_color_buffer_float", "OES_standard_derivatives"],
});
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 : "plain";
const pipeline = makePipeline({ regl, config, lkg }, [makeRain, makeBloomPass, effects[effectName], makeQuiltPass]);
const context = { regl, config, lkg, cameraTex, cameraAspectRatio };
const pipeline = makePipeline(context, [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));
const tick = regl.frame(({ viewportWidth, viewportHeight }) => {
// tick.cancel();
if (config.once) {
tick.cancel();
}
if (config.useCamera) {
cameraTex(cameraCanvas);
}
if (dimensions.width !== viewportWidth || dimensions.height !== viewportHeight) {
dimensions.width = viewportWidth;
dimensions.height = viewportHeight;

12
js/regl/mirrorPass.js
View File

@@ -1,5 +1,4 @@
import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
import { cameraCanvas, cameraAspectRatio } from "../camera.js";
let start;
const numClicks = 5;
@@ -14,9 +13,7 @@ window.onclick = (e) => {
index = (index + 1) % numClicks;
};
export default ({ regl, config }, inputs) => {
const cameraTex = regl.texture(cameraCanvas);
export default ({ regl, config, cameraTex, cameraAspectRatio }, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const mirrorPassFrag = loadText("shaders/glsl/mirrorPass.frag.glsl");
const render = regl({
@@ -28,7 +25,7 @@ export default ({ regl, config }, inputs) => {
cameraTex,
clicks: () => clicks,
aspectRatio: () => aspectRatio,
cameraAspectRatio: () => cameraAspectRatio,
cameraAspectRatio,
},
framebuffer: output,
});
@@ -44,9 +41,6 @@ export default ({ regl, config }, inputs) => {
output.resize(w, h);
aspectRatio = w / h;
},
() => {
cameraTex(cameraCanvas);
render({ frag: mirrorPassFrag.text() });
}
() => render({ frag: mirrorPassFrag.text() })
);
};