Jump to content


Photo

Using Depth Image to create 3d animated posters


  • Please log in to reply
4 replies to this topic

#1 chef OFFLINE  

chef

    Advanced Member

  • Developers
  • 4233 posts
  • Local time: 10:53 PM
  • LocationPeterborough, Canada

Posted 26 October 2019 - 02:21 PM

This is kind of cool!

 

Create the 3d image and try it out here: https://www.omnivirt.com/3d-photo/

 

Choose one of your movie posters in emby.

 

Choose the online app to create a depth image for you.

 

Now your image has depth and movement.

 

 

 

 

 

Add your image and download the depth map.

 

Pixi.js will allow you to add these depth images to the web app, and add these type of images to the html.

 

I could do a how-to.

 

 


  • shackbill and mdoverl like this

#2 shackbill OFFLINE  

shackbill

    Advanced Member

  • Members
  • 55 posts
  • Local time: 09:53 PM

Posted 03 November 2019 - 10:57 AM

ok i created the depth map how do i use pixi.js to get it into Emby?



#3 chef OFFLINE  

chef

    Advanced Member

  • Developers
  • 4233 posts
  • Local time: 10:53 PM
  • LocationPeterborough, Canada

Posted 03 November 2019 - 11:05 AM

ok i created the depth map how do i use pixi.js to get it into Emby?

So... I didn't actually follow up in this 😂 but it's still possible.

here is a pixi.js tutorial

https://youtu.be/FgN2EENWPFc


Then I figured using a mutation observer we could add the effect to the covers in the web app, like how we ad vanilla-tilt effect in my other thread.

https://emby.media/c...pp/#entry800861



Should we figure it out? Its probably not to complicated. Just have to find time ðŸĪŠ

The vanilla tilt is a cooler effect in my opinion, but the depth effect is neat too. 😄

And it only works in the web app.

Edited by chef, 03 November 2019 - 11:06 AM.


#4 shackbill OFFLINE  

shackbill

    Advanced Member

  • Members
  • 55 posts
  • Local time: 09:53 PM

Posted 03 November 2019 - 11:10 AM

im not a dev sounds complicated..if you can get it to work in web app i will try it. thanks.



#5 mdoverl OFFLINE  

mdoverl

    Newbie

  • Members
  • 8 posts
  • Local time: 09:53 PM

Posted 21 November 2019 - 04:31 PM

This is kind of cool!

 

Create the 3d image and try it out here: https://www.omnivirt.com/3d-photo/

 

Choose one of your movie posters in emby.

 

Choose the online app to create a depth image for you.

 

Now your image has depth and movement.

 

 

 

 

 

Add your image and download the depth map.

 

Pixi.js will allow you to add these depth images to the web app, and add these type of images to the html.

 

I could do a how-to.

I'll play around with this later and report back. Thank you for sharing.


  • chef likes this




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users