4 ms·

Parallax effect in browser using web-camera

53 points by munrocket 6y ago

blululu 6y ago
Well done. Thank you for making and sharing this publicly.
gus_massa 6y ago
Is it possible to make a demo that runs in the browser?
- below43 6y ago
  Try the examples in the readme - they work for me in a browser.
  - gus_massa 6y ago
    Thanks. I thought they were just links to files, not live demos.
bigwheeler 6y ago
Worked in latest iOS Safari for me, pretty cool!
- reaperducer 6y ago
  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.
  - munrocket 6y ago
    Probably it's need some time for load or reload would help?
  - cookingrobot 6y ago
    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.
jmpman 6y ago
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.
lecarore 6y ago
Really cool project. I think making the demo links more clearly visible would help promote it.
- munrocket 6y ago
  I thought it was pretty clear that examples in the list are links :D
  - EGreg 6y ago
    I missed them and came here to ask for links lol.
ath92 6y ago
Oh, this is really cool! :) I recently made something similar (also uses TFjs for the head tracking): https://compassionate-murdock-82fdbb.netlify.app/ https://compassionate-murdock-82fdbb.netlify.app/ (source here: https://github.com/ath92/blazeface-css-parallax 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.
- Crespyl 6y ago
  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.
seoirsewalker 6y ago
That's really cool!
EGreg 6y ago
Are there ways to make it work on a mobile phone? If not, what is the issue
- Tajnymag 6y ago
  In Firefox Preview, it seems the examples, after granting them camera access, use the primary camera, thus not detecting any face to track
  - munrocket 6y ago
    interesting, thanks!
boraturan 6y ago
I did a similar/complementary project that turns 2d photo to 3d. Interested to see if this could be integrated. https://alvin5.com/create https://alvin5.com/create @3d_photo_app on IG

53 points by munrocket 6y ago

blululu 6y ago

Well done. Thank you for making and sharing this publicly.

gus_massa 6y ago

Is it possible to make a demo that runs in the browser?

below43 6y ago
Try the examples in the readme - they work for me in a browser.
- gus_massa 6y ago
  Thanks. I thought they were just links to files, not live demos.

bigwheeler 6y ago

Worked in latest iOS Safari for me, pretty cool!

reaperducer 6y ago
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.
- munrocket 6y ago
  Probably it's need some time for load or reload would help?
- cookingrobot 6y ago
  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.

jmpman 6y ago

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.

lecarore 6y ago

Really cool project. I think making the demo links more clearly visible would help promote it.

munrocket 6y ago
I thought it was pretty clear that examples in the list are links :D
- EGreg 6y ago
  I missed them and came here to ask for links lol.

ath92 6y ago

Oh, this is really cool! :) I recently made something similar (also uses TFjs for the head tracking): https://compassionate-murdock-82fdbb.netlify.app/ https://compassionate-murdock-82fdbb.netlify.app/ (source here: https://github.com/ath92/blazeface-css-parallax 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.

Crespyl 6y ago
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.

seoirsewalker 6y ago

That's really cool!

EGreg 6y ago

Are there ways to make it work on a mobile phone? If not, what is the issue

Tajnymag 6y ago
In Firefox Preview, it seems the examples, after granting them camera access, use the primary camera, thus not detecting any face to track
- munrocket 6y ago
  interesting, thanks!

boraturan 6y ago

I did a similar/complementary project that turns 2d photo to 3d. Interested to see if this could be integrated. https://alvin5.com/create https://alvin5.com/create @3d_photo_app on IG