Online 360° Panorama Viewer VR

Sep 9, 2021 Update
Upload Image... using button below
Upload Image... using button below
or
Drop image file right here
or
Ctrl+V to paste image from clipboard

How to Use

Using panorama online 360 photo viewer is surprisingly easy. All you need to do is provide an image.

After adding an image to the panorama viewer, it automatically generates a ready-to-use interactive panorama in seconds.

And that's it, now you have your panorama interactive.

In case if you want to change panoramic image, you don't need to refresh this page, just add another image as before, and current panoramic image will be replaced with a new one.

As easy as that.

Image Format

Technically, you can use any image in PNG or JPEG format. However, to have panorama that looks right, it must be a high-resolution equirectangular projection image. These can be panoramic photos taken from the photosphere, or panorama images generated by CG. Long story short, it is a projection of the environment on a sphere unwrapped into a rectangular map with a strict aspect ratio of 2:1.

It's really not as complicated as it sounds at first.

Anyway, if you are a CG Artist and are not yet familiar with this concept or may want to know how to render equirectangular panorama images in 3D, we have a special tutorial on this subject: Rendering 360° Panorama Complete Guide.

For everyone else, you'd better to see how a professional photographers make immersive panoramas. There are plenty tutorials and videos on the web about it. Just search for something like "360 degree photography", "how to shoot 360° panoramas", "Google Cardboard" or "Google VR" and you quickly understand what it is.

Requirements

General

Online 360 image viewer application uses WebGL under the hood to render panorama for both, the Standard Mode and Virtual Reality Mode. The Virtual Reality Mode also requires support for WebVR technology. See About section for more details. This means that in order to use this application, you need at least to have a browser with WebGL support and appropriate graphics hardware. You can check if your setup support WebGL here: Get.WebGL.Org or here: Detect WebGL.

It should also be noted that 360° Panorama VR Web Viewer is a browser-only program and does not use any additional server-side processing, so its performance, ie how fast the panorama loads, how big it can be and how smoothly it works, especially in full screen mode, directly depends on the specifications of your device. If it's a powerful workstation, everything will be fine, if it's a "potato" laptop or cheap smartphone, don't expect a miracle.

Desktop

Theoretically, all modern browsers already have WebGL support. So, if you use Firefox 23+, Chrome 24+, Safari 8+, Internet Explorer 11+ or Edge, everything should work as expected.

But there is a known issue with iOS 8 and its implementation of WebGL. Only progressive encoded JPEGs will work. So keep that in mind if you're a Mac user.

This web application has been tested in both modes on latest versions of Chrome, Firefox and Edge in Windows 10, and it works great with them.

Mobile

The 360 image online viewer is a mobile friendly application. To view panoramas on your smartphone or tablet, simply tap on Upload Image... button under the viewer rectangle (viewport) and select desired image from your device photo library. And that's it. Now you can enjoy the interactive 360 panorama on your mobile device.

VR on Desktop & Mobile

In general, support for virtual reality devices does not depend directly on this VR Panorama Viewer, but depends on the capabilities of your browser and hardware. To view 360 panorama in a VR headset, your setup must be compatible with WebVR technology.

The WebVR (WebXR) is a fairly modern technology, and it is still considered experimental. The WebVR API is only available to modern browsers such as Google Chrome. The essence of WebVR / WebXR is that the browser can "understand" and exchange data with virtual reality devices such as HTC Vive, Oculus Rift and more. But this technology is still under development, and not all devices are supported.

In particular, this program uses the latest version of the A-Frame VR framework created by Mozilla, so please see this framework official documentation on platform support, headset support and browser support.

If you're using Google Chrome on a mobile device and have never used WebVR before, the first time you open a new VR Tab, you may be asked to install additional Google VR Services once. There is no need to install it in advance until system explicitly asks you to install it. If this happens, install suggested software, then return to the browser, close current VR Tab, and open a new one so that it can work properly with newly installed software.

Troubleshooting

Virtual Reality Mode of this application is still in alpha version and can work differently with different hardware and browsers.

It has been tested on various devices and platforms and has proven to be the best in working with Google Chrome.

Because currently we do not have a VR headset (to buy a number of expensive headsets from different manufacturers just to test this free application - quite an costly pleasure) and therefore we have not tested this application in real VR mode. So this VR module presented to you as it is.

Please, be patient, we are working to make your experience as smooth as possible. It will take some time, meanwhile you free to use "battle-tested" Standard Mode as before.

In any case, if you have a VR headset and you have problems with this application using it, please let us know and we will try to solve a problem as much as it possible in this case (you have a headset of some brand - we haven't it yet).

VR Tab

For the most part, you usually need to view 360° panoramas as an interactive images on a regular display devices, whether it's a monitor or a mobile phone screen. That is, to view panoramas in Standard Mode. But if you're are the lucky owner of a virtual reality device, whether it's a simple Google Cardboard like setup (glasses with simple lenses that use a mobile phone as a screen) or a real VR Headset with its own active display, you'll probably want to look at panoramas in a more immersive and exciting way on your VR device. That is, in Virtual Reality Mode. And this is what the VR Tab is designed for.

By default, application on this page works in Standard Mode. To use Virtual Reality Mode, you need to open VR version of the program in a new tab by simply clicking the Open New VR Tab button at the top of the panorama viewport.

If you need to view another image in VR, you must return to this page, upload a new image, and open a new VR Tab. If you no longer need a previously open VR Tab, you can simply close it. Each new VR Tab creates an independent instance of the program. Loading a new image on this page will not replace the images in already open VR Tab's. This is done on purpose so that you can have as many virtual reality tabs with different images as you want.

Keep in mind that each instance of this application, as well as each uploaded image, is stored in the memory of your device. If you have too many VR Tab's at one time, this can degrade your device's performance due to RAM overflowing. So try not to forget open VR Tab's that you no longer need.

Standard Mode and Virtual Reality Mode viewports are technically different and designed to display panoramas for different purposes, so they behave differently. Read more about the differences below.

Standard Mode

In this mode, you can use panorama as you normally expected. Rotate, zoom in, zoom out, go full screen. Standard Mode is focused on controlling panorama viewport with usual manipulation tools, such as mouse if it's a desktop computer, or gestures over the touch screen if you're viewing panoramas on mobile device.

Rotate panorama to the left, and panorama will go to the left, turn mouse up, and panorama will go up. It's as if you've literally grabbed panorama and moved it in front of you.

Virtual Reality Mode

Virtual Reality Mode focuses on controlling panorama with a sensors data, whether it's a rotation sensors of active VR Headsets on desktop or a mobile phone's gyroscope, if panorama is used with a simple "phone holder" headset, such as a Google Cardboard.

So, in Virtual Reality Mode you have to control viewport with your "head". This means that when you turn your head to the right, panorama actually turns to the left to show you what's on the right, and so on. To see panorama in this mode on normal screens, VR viewport shows panorama as in Standard Mode, but the controls are inverted. And this is how it should be when you control panorama with your head.

In addition, in Virtual Reality Mode, panorama viewport does not support zooming, as it is unnatural when you are in a VR Headset and instantly fly close to some details of environment, which is a virtual panorama in essence. Because in a VR Headset, a virtual panorama is a virtual environment around you, in the middle of which you are. So do not be confused.

Entering Virtual Reality Mode

To enter an actual Virtual Reality Mode, click VR button located in the lower right corner in VR Tab.

If you use active VR headset, you will see panorama on headset screen. If you use a gadget like Google Cardboard, the screen of your mobile device will be split in half to display different images for different eyes.

So turn your head to see the panorama from different angles and enjoy your fully immersive experience!

If you don't have a headset of any type, you really can still use your split screen smartphone to see around "virtual reality", if you want. Or at least it will help you understand what this "virtual reality" thing is all about.

If you are using virtual reality tab on RenderStuff for the first time, you may see following prompt: "renderstuff.com wants to use your virtual reality device and data". To use this panorama tool, you should allow RenderStuff to use VR data from your device. You can read more about this on WebXR Permission Info Page.

Share URL

The Challenge

To better understand what this feature does, let's imagine a very real situation. There is an interior designer/architect who created cool interior design, then render it into panoramic image with CG or just did photo shoot of a real place, getting panorama photo with 360 camera. And now designer wants to present created panoramic image directly to the client, who actually ordered the design.

Of course, designer can send to the client that panoramic image via email and the link to this page with some instructions on what to do with it. This way, client can save panoramic image from email locally to his device and then upload it to this page as image file to see interactive panorama.

But we all know that clients are very busy people. Therefore, most of them will not take as many steps to just see design as panorama, especially if it is a new or potential client, and designer delivers his elevator speech.

To be sure that the client will really look at presented panorama, he must be given a quick and easy way to view panorama as simply as just a single click on a link.

The Solution

The solution to this situation is to provide to the client a link to ready-made panorama. In other words, designer must once upload panoramic image, get panorama link and share this link with the client. Thus, client in turn simply follows this link and sees ready to use interactive panorama without any additional effort on his side.

And that's exactly what Share URL feature does.

How to Share 360 Panoramic Photos / Renderings

1. Prepare image in supported format and name it appropriately, as image file name will be displayed in page title.

Let it be, for instance, my-panorama-image.jpg.

Actually, you may be less precise about image file naming, name it however you want, but in step 4. you definitely should specify a Title name for your panorama, then that name will be displayed instead.

2. Upload prepared panoramic image to image hosting.

You can use any, but for our example, let it be ImgBB - Free Image Hosting. It user friendly, has all the necessary features. Besides, we actually tested panorama sharing feature on it, and it works perfect.

Note, that free image hosting services hosts images for a limited period of time, so make sure that hosted image will be available when you share panorama with someone.

3. Get direct link to uploaded image file or copy embed code - BBCode or HTML code, that are commonly used to insert images on forums. Make sure that copied text contains direct link to image file as well as you copied a full size image link option.

Below are some acceptable examples.

4. Go back to this page and click Upload Image...from Link. You will be prompted with modal window, where you should paste obtained text with Link on hosted image and give Title for you panorama.

The Title is optional, so you can omit it.

When you are finished, click OK.

5. If you provide a link to currently existing, publicly available hosted image in correct format, this program will automatically upload it to your browser and create interactive panorama from it as well as generate URL for sharing that panorama. Generated URL will be available under Upload Image...from Link button.

Now you can copy it and share panorama with others. You can also check how panorama by that link will look like in a new browser tab by simply clicking on Try it out! hyperlink at the right side of Panorama Sharing URL title.

Image Link Requirements

The Link to image file must end with image file extension only. See Direct Link Example above. Any additional characters after file name, such query string are not allowed.

The image file must be hosted on a liberal cross-origin policy (CORS) website. In short, a cross-origin policy is when one site allows to another website to download its resources, such as images. Most image hosting services have liberal cross-origin policies by default, while most other websites, on the other hand, protect their assets by not allowing them to be downloaded from other sites.

In the second case, the panorama viewer originating from renderstuff.com will not be able to download images from some-site.com. If you want to use some image from some-site.com, that has restrictive policy, to share a panorama, you need to download desired image yourself first. Then upload it to any free image hosting service that most likely has a liberal resource-sharing policy.

If you do not plan to share panorama created with image from some-site.com, but want to see it as a panorama by yourself, just right-click on desired image on some-site.com and in the context menu that appears, select Copy image (NOT! Copy image address). This will copy an actual image data to clipboard. Then you have to return to this page and press Ctrl+V on your keyboard to create panorama from clipboard image.

Shared Image Privacy

Keep in mind that uploading image to public image hosting and sharing it with others will make it available to anyone who gets a link to the image you posted.

This Online 360° Panorama Viewer application does not upload images to our server to create panoramas, it uploads images from the links you provide directly to the memory (RAM) of your device.

Also note that the URL created by the Share URL feature will contain a direct link to the image you provide as part of the URL itself. Look at panorama sharing link example below.

https://renderstuff.com/tools/360-panorama-web-viewer-sharing/?image=https://i.ibb.co/zrT4tbB7x/my-panorama-image.jpg

Therefore, this feature cannot be used as a "trial preview" of panoramas without exposing original image from which it was created.

So the privacy of your images depends on you. If you have a very confidential image, make sure you only share it with the right people and remove it from image hosting when you no longer need it. If you are not sure that link you share will not be received with the wrong recipient, do not use this feature at all.

The RenderStuff team, and in particular the developer of Online 360° Panorama Viewer application, are not responsible for the images you share online.

Simple UI

By default on this page you see panorama tool and also a lot of various descriptions or simply - docs. The goal of this docs is to help you understand all the basic features of this program. If you here for the first time, you will probably need them to learn how to use panorama tool. But if you've been using this tool for a while, you probably don't want to see docs each time you use panorama tool over and over again. And that's what Simple UI mode is for. It literally hides everything that is not essential to the user interface of the panorama tool, showing only what is needed to view panoramic images. In particular, descriptions, update notes, title and tag badges become hidden.

Simply put, this feature can be considered as a "hide panorama documentation" feature.

Another thing to know is that your browser "remembers" your choice, and next time you visit this tool, its interface will be in a mode you choose last.

To activate Simple UI mode, use switch at the bottom of panorama viewport.

Security

When browser loads this page, it also loads all relevant resources, including 360​​° Panorama Web Viewer software, which immediately starts working in browser as long as this page remains open. Panorama software runs in a browser's runtime environment and uses its built-in functionality. That is, it works directly in your web browser as a completely local application. Despite you need an Internet connection to initially load this page, the panorama viewer itself is technically an offline application. When you have it in your browser, it will continue to work even if you lose your Internet connection. The panorama is generated by computing power of your device, so nothing is sent to our server. All images you use remain confidential.

About

Free 360 photo viewer online. 360 panorama viewer online. 360 image viewer online.

This free online interactive & immersive 360-panoramic VR image viewer is created and maintained by RenderStuff on top of open source Pannellum library and A-Frame virtual reality framework. HTML, CSS, JS, WebGL & WebVR are the only technologies used in this web application that work directly in your browser.

If you are having any difficulties working with 360​​° Panorama Web Viewer VR application, or have found an error, or if you have any suggestions for this program, you may be missing some features that you would like to have here (360 video support, hotspots support or ability to create a virtual tour...), maybe anything else relevant that comes to mind, please let us know.

Updates

v2.0.0 (Sep 09, 2021 Update)

Online 360​​° Panorama Viewer can generate links for sharing panoramas.

From now on, you can share 360-degree panoramas for free with this tool. All you have to do is upload a panoramic image, get an automatically created link to share, and share that link with someone else. Anyone who follows this link will immediately see the ready-made panorama without any effort.

This feature has been requested several times by various people from around the world. We hope that this will satisfy the basic need to share panoramas with others for most users of this online application.

The interface of Panorama Sharing URL is quite clear and self explanatory. But you still can read more about Share URL feature and image link requirements in a docs below.

v1.3.0 (Sept 03, 2021 Update)

Page title now dynamically displays name of panoramic image you provide. For example, if you upload my-panorama.png, current browser tab name will be changed to 360° | my-panorama.png or VR | my-panorama.png for new VR Tab. This will allow you to have multiple tabs with different panoramas and easily distinguish one panorama from another simply by the names of the tabs.

v1.2.0 (Aug 11, 2021 Update)

Interface mode switch has been added, allowing activate Simple UI.

v1.1.0 (Aug 2, 2021 Update)

Added potential ability to work with VR devices. Now you can use this Online Panorama Viewer in Standard Mode as usual or in Virtual Reality Mode by opening a new VR Tab.