360° image editing output to VR file for web use?

[Timber]

Hi, Affinity Photo 1.5 360° image editing looks so very cool. Now is there a way to use these images in a VR usage on a webpage, say for VR real estate usage? That would be the cat's meow! – Timber

[livetheshot]

The images are VR ready for publishing and viewing on a website.

 

Are you referring to 3D conversion or for Affinity to generate the HTML code to make the 360 image viewable similar to Street View on Google Maps?

[Timber]

So a viewer of the webpage can use their mouse or trackpad, to zoom around the room, viewing each side dynamically as if they were standing there, not a flat representation. Like Quicktime VR.

[MEB]

Hi Timber,

Yes, the image can be seen/panned similar to QuickTime VR. Note that not all image hosts provide support for this. You may have to implement some Javascript code on your pages to be able to view them as projected images. Affinity Photo does not generate this code for you.

[Timber]

OK, does anyone know the specific process or steps to take a 360 AP file to use on web and pan and zoom?

[James Ritson]

Hi Timber, you can use various Javascript + WebGL implementations. All you need to do is export your unmapped equirectangular image from Photo (100% quality JPEG is usually sufficient), ensuring it is 2:1, or 360x180 - so you make your edits, then use Remove Projection to return the image to its unmapped form.

 

You can then use the exported image in these viewers. One such viewer is Marzipano - it even has a Marzipano Tool where you can upload your image and it will optimise and generate image tiles, then provide you with the required output files to embed it on your web pages.

 

Another good implementation is Pannellum, which requires a manual approach but also works very well.

 

As far as VR solutions go, I'm not overly familiar with them yet. I imagine you'd need a program that will convert the 360x180 image into a stereoscopic representation - not sure if any open source solutions exist. I'll do some investigating.

 

One final thing - because Marzipano splits the image into tiles, you can bypass WebGL's texture resolution limit for a single image, which can be anywhere from 2048x2048 to 8192x8192 depending on the device. This means you could provide a huge image file and ensure it remains crisp and sharp on a variety of devices - pretty useful.

[Timber]

Hi James, wonderful and clear detail... exactly what I was hoping for. Thank you very much - Timber