Parallax effect in browser using web-camera (opens in new tab)

(github.com)

53 pointsmunrocket5y ago19 comments

19 comments

Oh, 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.

Crespyl5y 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.

jmpman5y 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.

boraturan5y 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

@3d_photo_app on IG

lecarore5y ago

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

munrocketOP5y ago

I thought it was pretty clear that examples in the list are links :D

EGreg5y ago

I missed them and came here to ask for links lol.

EGreg5y ago

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

Tajnymag5y ago

In Firefox Preview, it seems the examples, after granting them camera access, use the primary camera, thus not detecting any face to track

munrocketOP5y ago

interesting, thanks!

blululu5y ago

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

gus_massa5y ago

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

below435y ago

Try the examples in the readme - they work for me in a browser.

gus_massa5y ago

Thanks. I thought they were just links to files, not live demos.

bigwheeler5y ago

Worked in latest iOS Safari for me, pretty cool!

reaperducer5y 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.

cookingrobot5y 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.

munrocketOP5y ago

Probably it's need some time for load or reload would help?

seoirsewalker5y ago

That's really cool!

j / k navigate · click thread line to collapse

19 comments

ath925y ago

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.

Crespyl5y 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.

jmpman5y ago

boraturan5y 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

@3d_photo_app on IG

lecarore5y ago

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

munrocketOP5y ago

I thought it was pretty clear that examples in the list are links :D

EGreg5y ago

I missed them and came here to ask for links lol.

EGreg5y ago

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

Tajnymag5y ago

In Firefox Preview, it seems the examples, after granting them camera access, use the primary camera, thus not detecting any face to track

munrocketOP5y ago

interesting, thanks!

blululu5y ago

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

gus_massa5y ago

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

below435y ago

Try the examples in the readme - they work for me in a browser.

gus_massa5y ago

Thanks. I thought they were just links to files, not live demos.

bigwheeler5y ago

Worked in latest iOS Safari for me, pretty cool!

reaperducer5y 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.

cookingrobot5y 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.

munrocketOP5y ago

Probably it's need some time for load or reload would help?

seoirsewalker5y ago

That's really cool!

j / k navigate · click thread line to collapse