To begin, go to Google’s VR View GitHub repo and click “Fork”: You can avoid downloading and hosting the VR View yourself by instead forking Google’s repository and then hosting it on your GitHub account using GitHub Pages. If you are just looking to quickly test this with your own images and don’t have hosting ready yourself, one great option is to use GitHub Pages. images/yourimage.jpg) and then change the URL above to look for this new image (e.g. To add other images, include them within your server wherever you’d prefer (e.g. If you have hosting set up directly for this (or have a domain name pointing directly at it), then you can avoid the /vrview bit. If you keep it within a folder called “vrview” on your server, then you will be able to access it at ///vrview/?image=examples/coral.jpg&is_stereo=true. Download the code from Google’s VR View GitHub and host it somewhere with public access. Self-hosting isn’t too difficult to set up. Hopefully, that will be solved soon enough and self-hosting will no longer be needed! Otherwise, the images will have an incorrect orientation bug on iOS Safari. However, if you want to use this for a large audience on many platforms, you will want to host the VR View yourself. Google’s hosted VR View is incredibly convenient and about as simple as embedding a YouTube video - perfect for quick embedding of panoramic content. To keep things simple, we haven’t gone down that route in our custom image example! For more info on this, see Google’s documentation on VR View. You’ll see an is_stereo=true attribute in there - this is when the image is set up with a duplicate of the panorama in the one image. This should work as long as the server you are using to host the image works with CORS. That sample code from Google looks like this in action:īy default, you will see a lovely 360 panoramic view of fish in a coral reef! If you change the image= parameter in the iframe’s URL, you can set the panorama to your own image. Using Google’s Hosted VR Viewįor a quick test of what the VR View is like, you can include the following in your web page: The server with the image also needs to be able to allow cross-origin resource sharing (CORS) if using Google’s hosted VR View. Things do not work quite right on iOS Safari when the VR View and image are hosted on different servers. At the moment, hosting our own version on the same server is more reliable. We can either embed Google’s hosted VR View or host our own version. There are two options for embedding our image in a VR View. Some scenes will be easier and less obvious than others! If you have photoshop skills, you may come up with other ways of making the bottom and top of the image less conspicuously strange. Our final result for the images should look like so: Stretch out each of the blurred layers so that they extend beyond the image (as the edges will fade out and we don’t want them to fade out on the edges of our canvas): Try out different values for the radius value, as some scenes will look better with more blur and vice versa: Stretch all three so that it fills the canvas and then flip the top and bottom images using Edit > Transform > Flip Vertical:ĭuplicate the top and bottom images, then blur the duplicate using Filter > Blur > Gaussian Blur: To try this method, create a 2048 x 1024 image in photoshop and paste three of your panorama image inside it: There are plenty of techniques you can try to give a nice top and bottom area that doesn’t scrunch up too much, my favorite so far is to add a blurred reversed image on both the top and bottom. To avoid having too much detail at the top and bottom of your image, you can add space above and below the image that’ll keep things looking neater. We used a photo of the SitePoint office (thanks Angela!), which has a perfect example of what the bottom of an image that has a lot of unavoidable detail at the bottom will look like: Sometimes, especially for indoor shots, this is unavoidable. If you do not have a large amount of sky and ground in your scene, your image is likely to display a bit strangely in those areas.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |