The first step in creating the Panorama VR is to render an equirectangular image using SU Podium V2.5 or V2.6. Render an equirectangular image using Version 2.5 or V2.6
The Panoram can also be viewed on VR devices such as Google Cardboard.
The final Panorama is viewed in any HTML5 browser such as Internet Explorer, Safari, Chrome or Firefox and on an iOS or Android device. Once the image is converted you can rotate and tilt the camera in any direction, creating a virtual, 360° spherical experience. The URL can be sent to your clients who can use any device (Windows, Mac, iOS, Android) to view the 360° X 180° experience of your design. The panorama server automatically converts the images to a spherical panorama and creates a URL. PIE gives you free access to Cadalog's Panorama server called which you can automatically upload and convert the equirectangular image to a 360° X 180° spherical panorama.
These steps are outlined in the following section of this guide, but the process is very easy and fun and you may enjoy experimenting with how to get the most impressive results.Ĭonvert the image in PIE or in the Panorama Server to a spherical panorama: Use PIE or alternatively the Panorama Server ( to automatically convert your equirectangular image into a 360° X 180° spherical panorama. There are several best practices to use when creating a high resolution equirectangular image. You need SU Podium V2.5 or V2.6 to do this. Render an equirectangular image: The first step is to render a flat projection of a sphere, called an equirectangular image (See the image at the top of this page, for an example). There are three broad steps required to create the virtual panorama experience. To create a linked image, see our HTML Links page.Watch the embedded video above, or click here to open in a new window These are images that, when clicked on, open another web page or URL. You can also have linked images on your web page. Background ImagesĪnother way to add an image to a web page is to add the image as a background image. Source CodeĪlso see our HTML Image Borders page for more image border codes. For example, border:1px solid black would create a border that's one pixel wide, solid and black in color. You can specify the width, style, and color of the border. You can add a border to your image by using the CSS border property.
Here's an example of embedding an image into a web page using the tag: Source Code It is also useful in the event that someone views your website with images disabled in their web browser. This can be very helpful for blind users who need to use a screenreader to view websites.
Alternative text is the text that is displayed in the event that your image can't be displayed. You should also provide other details such as width, height, and alternative text. When you use this tag, you insert the image URL. In HTML, you can embed an image into a web page using the tag.
You can see by the code below that you insert the image URL into the code. If you can't see the image via your own browser, you won't be able to embed it into your web page. You need to be able to view this image by visiting this URL. This image needs to be uploaded to your web server (or another web server) so that it has its own URL (eg, ). To add an image to a web page, you first need to have the image. You can take these codes and modify them for your own use. This page contains copy/paste HTML image codes.