Parallax effect in browser using web-camera
github.comOh, this is really cool! :) I recently made something similar (also uses TFjs for the head tracking): https://compassionate-murdock-82fdbb.netlify.app/ (source here: https://github.com/ath92/blazeface-css-parallax)
Yours seems a little faster/smoother/nicer though, so props for that. I used CSS to place the 3d objects though, so that might have something to do with it.
These are fun projects. Even in the simple case it's somehow kind of magical and the effect can be remarkably compelling.
I made a simpler desktop version as a game years ago, with a small team at RHIT's "Catapult" summer camp. Not sure I still have the code for it sadly.
We had a custom software 3D renderer with OpenCV face-tracking for both the parallax effect and steering the player character around obstacles.
Oh!! I’ve wanted something like this but for a web camera portal between locations. If each side had a 180 degree fisheye lens, then the eye tracking could present a different virtual view from the remote location. It would look like you had a window into another room. Using 4K+ cameras, the effect should be amazing.
I did a similar/complementary project that turns 2d photo to 3d. Interested to see if this could be integrated.
@3d_photo_app on IG
Really cool project. I think making the demo links more clearly visible would help promote it.
I thought it was pretty clear that examples in the list are links :D
I missed them and came here to ask for links lol.
Are there ways to make it work on a mobile phone? If not, what is the issue
In Firefox Preview, it seems the examples, after granting them camera access, use the primary camera, thus not detecting any face to track
interesting, thanks!
Well done. Thank you for making and sharing this publicly.
Is it possible to make a demo that runs in the browser?
Try the examples in the readme - they work for me in a browser.
Thanks. I thought they were just links to files, not live demos.
Worked in latest iOS Safari for me, pretty cool!
Interesting, because it didn't work right for me, also on Safari with latest iPad OS. There was a brief second of motion, and then nothing.
Maybe because I'm on an iPad and not an iPhone.
On iPhone 11 and Safari, I had to tap the red camera icon in the address bar twice to disable and reenable the camera, then it worked.
Probably it's need some time for load or reload would help?
That's really cool!