Timber Posted September 10, 2016 Share Posted September 10, 2016 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 Link to comment Share on other sites More sharing options...
livetheshot Posted September 12, 2016 Share Posted September 12, 2016 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? Link to comment Share on other sites More sharing options...
Timber Posted September 12, 2016 Author Share Posted September 12, 2016 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. Link to comment Share on other sites More sharing options...
Staff MEB Posted September 12, 2016 Staff Share Posted September 12, 2016 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. A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
Timber Posted September 13, 2016 Author Share Posted September 13, 2016 OK, does anyone know the specific process or steps to take a 360 AP file to use on web and pan and zoom? Link to comment Share on other sites More sharing options...
Staff James Ritson Posted September 13, 2016 Staff Share Posted September 13, 2016 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. Product Expert (Affinity Photo) & Product Expert Team Leader @JamesR_Affinity for tutorial sneak peeks and more Official Affinity Photo tutorials Link to comment Share on other sites More sharing options...
Timber Posted September 13, 2016 Author Share Posted September 13, 2016 Hi James, wonderful and clear detail... exactly what I was hoping for. Thank you very much - Timber Link to comment Share on other sites More sharing options...
Recommended Posts