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

By default, camera features are disabled; they're opted into by URL param and browser prompt.

Browse Source
This commit is contained in:
Rezmason
2022-08-02 21:23:27 -07:00
parent 3e301e9e58
commit 8aeb156875
4 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
js/regl/main.js
View File

@@ -9,6 +9,7 @@ import makeResurrectionPass from "./resurrectionPass.js";
import makeQuiltPass from "./quiltPass.js";
import makeRipplesPass from "./ripplesPass.js";
import getLKG from "./lkgHelper.js";
import { setupCamera } from "../camera.js";
const effects = {
none: null,
@@ -67,6 +68,10 @@ export default async (canvas, config) => {
const lkg = await getLKG(config.useHoloplay, true);
if (config.useCamera) {
await setupCamera();
}
// All this takes place in a full screen quad.
const fullScreenQuad = makeFullScreenQuad(regl);
const effectName = config.effect in effects ? config.effect : "plain";

35
js/regl/ripplesPass.js
View File

@@ -1,4 +1,5 @@
import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
import { cameraCanvas, cameraAspectRatio } from "../camera.js";
let start = Date.now();
const numClicks = 5;
@@ -13,38 +14,9 @@ window.onclick = (e) => {
index = (index + 1) % numClicks;
}
// TODO: switch to video-based texture
// TODO: mipmap?
const video = document.createElement("video");
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
let cameraAspectRatio = 1.0;
const getCameraFeed = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({video: {
width: { min: 800, ideal: 1280 },
frameRate: { ideal: 60 }
}, audio: false});
const videoTrack = stream.getVideoTracks()[0];
const {width, height} = videoTrack.getSettings();
console.log(videoTrack.getSettings());
video.width = width;
video.height = height;
canvas.width = width;
canvas.height = height;
cameraAspectRatio = width / height;
video.srcObject = stream;
video.play();
} catch (e) {}
};
export default ({ regl, config }, inputs) => {
getCameraFeed();
const cameraTex = regl.texture(canvas);
const cameraTex = regl.texture(cameraCanvas);
start = Date.now();
@@ -73,8 +45,7 @@ export default ({ regl, config }, inputs) => {
aspectRatio = w / h;
},
() => {
context.drawImage(video, 0, 0);
cameraTex(canvas);
cameraTex(cameraCanvas);
render({ frag: ripplesPassFrag.text() });
}
);