[Feature] 3D Parallax using Depth map

[rocksdanister]

Describe the problem

There are not many easy methods of personalizing native application, adding a background image is one popular method.. but making it look 3D would take it one step further!

Use cases:

1. Change background when page changes. Example: Nature catalogue app
2. Change background when listview item selection changes. Example: Ambie music app
3. Depth cards (see preview.)
4. Apps with gyroscope support.

Describe the solution

Creating a 3D scene can get complex and not practical; instead we can use depth map (image) and shaders to create a similar effect by shifting the pixels at different speeds based on the depth.

Demo running on opensource app Ambie:

Ambie.Depth-1.mp4

Demo depth cards:

depth_cards.mp4

Advantages of depth map:

• Small size: no additional dependency other than Win2D; depth map is a simple image (can be smaller size than the input.)
• Simple: depth map can be generated using machine learning, captured using smart phone camera or drawn using paint.
• Performant: simple pixel shifting using shader.

Alternatives

Creating a 3D scene.

ParallaxView for 2D effect.

Additional info

I am still learning Win2D, will post a sample project in a bit (need some cleaning.)

Help us help you

Yes, I'd like to be assigned to work on this item.

Hello, 'rocksdanister! Thanks for submitting a new feature request. I've automatically added a vote 👍 reaction to help get things started. Other community members can vote to help us prioritize this feature in the future!