Parallax effect in browser using web-camera

Parallax effect in browser using web-camera(github.com)

53 points by munrocket 5 years ago | 19 comments

ath92 5 years ago |

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.

Crespyl 5 years 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.

jmpman 5 years 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.

boraturan 5 years 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

lecarore 5 years ago |

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

munrocket 5 years ago | |

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

EGreg 5 years ago | | |

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

EGreg 5 years ago |

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

Tajnymag 5 years 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 5 years ago | | |

interesting, thanks!

blululu 5 years ago |

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

gus_massa 5 years ago |

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

below43 5 years ago | |

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

gus_massa 5 years ago | | |

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

bigwheeler 5 years ago |

Worked in latest iOS Safari for me, pretty cool!

reaperducer 5 years 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.

cookingrobot 5 years 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.

munrocket 5 years ago | | |

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

seoirsewalker 5 years ago |

That's really cool!