Как смотреть панорамные фото и видео 360 градусов на любом устройстве?
Панорамные фото и видео – уникальный контент, который позволяет увидеть не плоское изображение, а объемную картинку «по периметру». Угол 360° поддерживает круговой обзор – это очень удобно, например, при просмотре снимков природы и достопримечательностей (создается ощущение реального присутствия).
Такие ролики снимают сразу с нескольких камер, склеивая картинку в дальнейшем – зритель же может повернуть голову направо, налево, вверх и вниз, чтобы детально рассмотреть объекты.
Панорамные фото и видео доступны к просмотру на любых устройствах, правда, качество и ощущения будут отличаться в зависимости от выбранного для воспроизведения гаджета.
Какие устройства поддерживают воспроизведение фото и видео 360°?
Панорамный контент – фото и видео с круговым обзором в 360°, т.е. зритель может увидеть не только действия с одной точки, но и вокруг, фактически «заглянув» за камеру. Чтобы представить, что это такое, достаточно открыть карты Google или Яндекс, выбрав режим панорамы. Смотреть снимки и ролики 360° можно:
- на компьютере – онлайн либо через установленные программы;
- на смартфоне – нужен телефон с гироскопом и акселерометром;
- с помощью VR очков и шлемов – с полным погружением и объемной картинкой.
Собственно, со смартфона и ПК посмотреть панорамные фото и видео можно, но картинка по-прежнему будет плоской. Через очки и шлем, напротив, увидите снимки «вокруг», будто ощущая себя частью изображения – это и есть виртуальная реальность.
Как смотреть панорамные фото и видео на компьютере?
Удобнее всего просматривать контент 360° на ПК – дополнительные гаджеты не потребуются. В зависимости от источника файла существует несколько простых способов работы с панорамными снимками и видео:
- На YouTube – откройте сайт в браузере, введите в поиске «360 градусов» и выберите любое видео, отмеченное значком 360°. Начните воспроизведение, перейдите в полноэкранный режим и для смены ракурса передвигайте зажатый курсор. Можно воспользоваться и кнопкой в левом верхнем углу для регулировки угла обзора.
- В онлайн кинотеатрах – принцип аналогичен YouTube, достаточно открыть фильм в браузере и начать просмотр. Смена ракурса происходит с использованием джойстика и стрелок на клавиатуре (функционал зависит от конкретного сайта).
- Для скачанных на компьютер фото и видео – потребуется предварительная установка программы для воспроизведения файлов такого формата, например, WPanorama, Professional Panorama photo Viewer 360 HD или любая другая. Запустите ПО, откройте нужный файл и начните просмотр – для смены ракурса по-прежнему используется мышка.
Многие программы для ПК, поддерживающие видео в 360°, являются платными. Однако при низкой скорости интернета они становятся единственным верным решением – онлайн проигрыватели попросту не вытянут такие файлы, из-за чего пострадает качество, а картинка будет размытой.
Можно ли смотреть фото и видео 360 градусов на смартфоне?
Просмотр панорамных снимком и роликов доступен и владельцам телефонов на базе Android и iOS, правда, понадобится смартфон с акселерометром и, желательно, гироскопом – при отсутствии последнего датчика регулировать угол наклона придется вручную, что не слишком удобно.
Порядок действий аналогичен компьютеру – зайдите в официальное приложение YouTube или установите стороннюю программу через маркетплейс для воспроизведения подобных файлов. Предварительно нужно убедиться, поддерживает ли устройство этот формат (имеются ли датчики движения).
Если плоская картинка не устраивает, можно усовершенствовать воспроизведение, купив очки Cardboard или сделав их своими руками. Такой способ не имеет ничего общего с виртуальной реальностью – добиться ощущения реального присутствия, как в шлеме, не получится, так как Cardboard – это псевдо-VR, но все же подобные очки остаются весьма популярными у новичков, чей бюджет сильно ограничен.
Как смотреть видео 360° через VR очки и шлемы?
Единственный способ «правильного» просмотра контента 360 градусов – использование VR очков и шлемов, которые позволяют получить трехмерную картинку с эффектом реального присутствия по ту сторону экрана. Вы можете смотреть видео:
- на сайтах (онлайн кинотеатры)
- через YouTube (официальное приложение);
- со смартфона (для очков, которые работают с телефоном);
- внутри экосистемы самого шлема – встроенная производителем среда, поддерживающая воспроизведение видео;
- через ПК, подключив гаджет и открыв нужный файл.
Смотреть фото и видео 360° можно с любого устройства, но только с использованием VR шлемов и очков удается прочувствовать всю прелесть инновационного формата – погрузиться в полноценный мир виртуальной реальности.
Необязательно сразу приобретать дорогостоящие гаджеты, можно подобрать бюджетное устройство (не Cardboard), попробовать в клубе с почасовой оплатой или взять шлем в аренду – при относительно небольших тратах сможете насладиться, действительно, качественным изображением и визуальными спецэффектами. Собственно, всем тем, что и является составными частями VR.
Online 360° Panorama Viewer VR
Completely free secure handy online viewer for 360 panoramic images. VR-ready. Mobile-friendly. Can not only create a URL to share your 360-degree panorama with others, but can also create an embed code that will allow you to embed this panorama viewer on your website pages. Works directly from the page using capabilities of WebGL & WebVR built into your browser. High-performance with no plugins required. Just provide an image with spherical panorama to the viewer on the page, and it will instantly prepare and show you a ready-made immersive panorama, which you can rotate, zoom in and out, go in full screen use Google Cardboard or Virtual Reality headset . This panorama 360 image viewer is server-independent software. It only works inside your browser, so the images you use remain confidential.
Panorama Sharing URL — Try it out!
Panorama Widget Embed Code
Completely free secure handy online viewer for 360 panoramic images. VR-ready. Mobile-friendly. Can not only create a URL to share your 360-degree panorama with others, but can also create an embed code that will allow you to embed this panorama viewer on your website pages. Works directly from the page using capabilities of WebGL & WebVR built into your browser. High-performance with no plugins required. Just provide an image with spherical panorama to the viewer on the page, and it will instantly prepare and show you a ready-made immersive panorama, which you can rotate, zoom in and out, go in full screen use Google Cardboard or Virtual Reality headset . This panorama 360 image viewer is server-independent software. It only works inside your browser, so the images you use remain confidential.
Contents
Contents
How to Use
Using this online 360 photo viewer is surprisingly easy. All you need to do is provide an image.
- Click / Tap Upload Image. button below panorama viewer viewport. A standard "Open file" dialog box will appear, where you can select desired image file locally from your computer or mobile device. You can only select one image at a time. (Although you can open multiple tabs at once.)
You can use both: Upload Image. from File as well as Upload Image. from Link . Despite second option is more specific for sharing panoramic images with others, you can still use it to simply view panoramas yourself.
Read more about panorama sharing in
- Right-click / Long-press on panorama's viewport to open its context menu and use Upload Image. option. The same "Open file" dialog will be opened, as described above.
Drag and Drop an image file from any file manager directly into the viewport of panorama viewer.
Navigate to the program of your choice and copy an image data to the clipboard . Then return to this page and press Ctrl+V on your keyboard to paste an image data into the panorama viewer from the clipboard.
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 "flat" image in supported formats (see below), 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.
Web Image Formats
* GIF and APNG images will always display only a first frame, but will not play animation.
Video files in any format are not currently supported, but this feature is already on the roadmap of future enhancements.
None-Web Image Formats
Currently, supported widely used 8bit and 16bit TIFF files with LZW, ZIP & JPEG image compression.
By "non-web format" means that this format is NOT supported by any major browser, so to speak, formats that are not native to the browser. That is, it is not intended for viewing on the Internet by design, so it can not be just loaded as is, as in the case of web formats described above.
To load *.tif / *.tiff files, this program does a trick. In particular, it reads a file as abstract bytes into memory. Decodes them there, extracting RGB pixel data, and then assemble it into a web-compatible image. Only then, assembled web-compatible image eventually can be used "as is". In other words, reading non-web data requires additional transformation, from non-web image to a web image, that in turn consumes additional computing resources.
Simply put, TIFF files take longer to load in panorama app. Additional time directly depends on the size of a file, a resolution of an image in it and from performance of your hardware.
It is recommended to use files smaller than 100 MB. A delay in loading larger files will be pretty noticeable even on powerful desktops.
HDR Panoramic Images
Although Online 360 °Panorama Viewer does not directly support 32-bit HDR panoramic images, it is very easy to solve with Image Convert Ninja — Online image converter with support for HDR formats. This tool can view HDR & EXR files, adjust their exposure and, what is more important in this case, converts them into various 8-bit image formats, which, in turn, are directly supported by Online 360 °Panorama Viewer .
So, to view HDR images as panoramas, all you need to do is go to Online HDR Image Viewer page, open your 32-bit image there, and save (convert) it to any 8-bit format, such as PNG or JPEG. Then come back here and use that converted PNG or JPEG version of your 32-bit image as panorama.
A very simple extra step that especially makes sense if you HDR panoramic image requires pre-exposure adjustment. This way, by combining of two highly specialized online tools to achieve one goal, you will be able to fine-tune panorama image to get best possible results.
360° Stereoscopic Panorama
Stereoscopic Panoramic Image Format
To get properly look 360° stereo panorama, you have to use single Equirectangular Stacked (over/under) Stereo Image combined from two mono panoramas in any of supported image file format.
Usual equirectangular mono panorama image is 2:1 aspect ratio image. For example, 4096px x 2048px. The Stereo panorama is a two such an images stitched together horizontally, so stereo images should be 1:1 aspect ratio, that is, from our example, 4096px x 4096px. An so on.
What is Stereoscopic Imaging?
Stacked stereo or stereoscopic panorama image is a single image but combined from two mono (ordinary) panoramas. One above the other (horizontal split).
Human has binocular vision . This is because eyes are at a distance from each other, they look at the same object at a slightly different angles. The left eye sees the same object a little to the left, the right eye a little to the right. In other words, each eye sees a different image. The human brain, in turn, combines these two images together to form a three-dimensional perception of depth.
Despite the fact that we prefer to think that with our two eyes we see a single image of the environment, technically we still really see two different images. The stereoscopic imaging targets this exact feature of human vision. The basic idea of stereoscopic imaging is to provide different images for different eyes. In case of over/under stacked stereo panoramic image, top panoramic image is for the left eye view, the bottom panoramic image is for the right eye view. Both of two mono-panoramic images are depicting the same scene, but taken from slightly different angles of the camera in order to convey binocular vision effect.
It is this effect is simulated by stereoscopy , when two slightly different two-dimensional images of the same scene are shown to different eyes, to make human brain combine them into an immersive perception of 3D depth.
Where to Get Stereoscopic Image?
The source of stereoscopic panorama image can be two panoramic photos taken by real cameras from a different angles and later stitched together in 2d editor one above other, or can be directly generated using 3d rendering software.
Using Stereoscopic Images in VR
A stereoscopic image only makes sense for VR viewing, ie using an active virtual reality headset or a Google Cardboard-type setup with a mobile phone as the image source. Because only with these devices you can project different images for different eyes. You can't do this with usual display.
Since stacked stereo panoramic image is technically a usual image, this program does not detect it "stereoscopic nature" automatically. Therefore, you should explicitly indicate this using Stereo switch located to the left of Open New VR Tab button.
To have stereoscopic panorama on VR, you should to provide equirectangular over/under stacked stereo panorama image.
When it loads by app, press Stereo switch at the top of a Viewport to activate stereo mode. Then Panorama app will automatically splits horizontally stacked stereo image into two mono panoramic images for later use. The separation process will take a moment, depending on your hardware and actual image size. When it's finished, you will be able to see stereo panorama correctly in both, Standard Mode and in Virtual Reality Mode .
To see it in VR, click Open New VR Tab button first.
Then, in new VR Tab that opens, press VR button located at the lower right corner.
Put on your headset and enjoy with stereo panorama 3D effect.
To learn more about VR mode, look at
Stereoscopic Image Handling
When you first load a stereo panoramic image, you will see it as it is, that is, as two mono panoramas horizontally stitched together. After you press Stereo switch, the program will divide one stereo image you provided into two separate mono panoramic images.
To make panorama look as usual in Standard Mode or mono panorama mode, app shows only top mono panorama image instead of original horizontally divided stereo panorama image. When you go VR , then app will display both images as intended. Top for the left eye and bottom for the right.
In case if you provide a usual mono panoramic image and activate Stereo mode, the image will be simply split in half and you will only see its top half in Standard Mode and two different halves in Virtual Reality Mode , which is incorrect. In other words, NO enhancement effect will be achieved if you apply Stereo mode to non-stereo images.
You can try stereoscopic panorama right now by this link . But don't forget to activate Stereo mode and go VR (using active headset or mobile cardboard setup), to make stereo panorama look right.
Requirements
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).
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 .
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.
Please note, that if you choose the ImgBB image hosting service, please note that you must be logged in to use full-size images. It provides a variety of logging options, so you can login to ImgBB in a few clicks.
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.
Panorama Shared URL QR Code
Once you've created Panorama Sharing URL , you can copy it to clipboard directly from text area, or even easier, by clicking at Copy to Clipboard icon.
In case if you want to not just share generated URL with someone, but, for example, immediately see ready-made panorama on your smartphone, you can scan QR code of this URL. To do that, simply click Show QR Code button. A pop-up window with an actual QR code will appear. Now scan this code with any QR code scanning app of your smartphone and it will instantly give you a Panorama Sharing URL . Finally, go to this URL and it will be automatically opened in your default browser.
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.
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.
This functionality allows you to embed Online 360 °Panorama Viewer together with you panoramic image as a widget to the pages of another site. This way you can show interactive panoramas to the visitors of your site, blog, etc.
Embedding code is an advance feature that assumes you have basic HTML knowledge or at least have access to the admin panel of the site or blog platform you plan to embed the panorama widget on. Because in order to embed the code, you must be able to edit the content of the pages on your site directly through the code or using the admin panel tools of your website CMS .
Here is an example of how to do it in WordPress CMS.
The process of adding code to any other CMS will be pretty much similar.
To embed a panorama, you first need to get Embed Code of Panorama Widget . The Embed Code is automatically generated every time you Upload Image. from Link . Read more on how to create panoramas form pre-hosted images.
After you have uploaded your image from the link, the Panorama Widget Embed Code option will become available along with several buttons below it. Each button represents a predefined resolution of the future Panorama Widget .
Click the at resolution button of your choice and then actual Embed Code of Panorama Widget that shows your panoramic image will be available for copying.
Copy this code and paste it on your site. A panoramic gadget of the selected resolution will be embedded on your page.
Note that in order to create a panorama, the Panorama Widget must download your panoramic image and then create a panorama from it. Therefore, when your website page loads, the panorama gadget will be present, but the creation of the panorama itself may take some time. Depending on your device's performance, panoramic image size and the speed of your internet connection.
Customizing Panorama Widget
If you have web-development experience, then you will clearly see that embed code is nothing but simple iframe that has defined width, height and src link. The link leads to a custom route on RenderStuff with the direct image URL added as image URLSearchParam .
iframe width="1200" height="700" title="someTitle" scrolling="no" src="http://renderstuff.com/tools/360-panorama-web-viewer-embed/?image=https://someImgHosting.com/someImg.png" > iframe >
If you want to show another panorama, all you have to do is replace panorama url at image URLSearchParam. Any other URLSearchParams will be ignored.
You cannot directly affect Panorama Widget in any other way, but the Panorama Widget has a responsive design that adapts to the iframe window width. Therefore, you can style the iframe itself and get custom Panorama Widget sizes as well as apply other CSS properties to iframe like border, background-color et cetera, to best match your website layout.
Note that max-with of Panorama Widget is 1200 pixels. Also keep in mind that since the internal content of the iframe does not affect the size of the iframe itself, you should manage the aspect ratio of the iframe yourself to ensure that there is no content overflow and all of the Panorama Widget elements are visible to the user.
If you're using UI building libraries/frameworks like React , you need to convert a plain HTML syntax of Embed Code to your library's syntax accordingly.
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.
Tech Specs
Online 360° Panorama Viewer is technically a 3D application. Any image in supported format you provide will eventually become a texture applied to geometry you are looking at by an interactive camera located inside that geometry. Because, this way interactive panorama is actually arranged. That is, a rotatable camera inside sphere or cube with panorama image as a texture.
Maximum Image Resolution (Chromium)
Maximum possible texture size value is determined by the browser you are using, based on your hardware and internal browser settings.
If you have a powerful workstation with a discrete graphics card, this limit is usually 16K (16384*16384 px). If you have a built-in GPU or mobile device, this value is 8K (8192*8192 px) and below.
If, let's say, your system supports 16K textures, but you upload a large image the size of, say, 20K. This is perfectly normal, because program will first determine resolution of your image, and then determine maximum texture size for your device. Then application compares these values and proportionally reduces the size of the image to the maximum supported texture size. So you can not worry about resolution of the images you provide. Panorama app will do everything for you automatically.
In other words, you can provide very large images, and the program will handle everything. However, the browser also applies their restrictions, and there are undocumented limitations on the maximum image resolution that the browser itself willing to handle.
For Chromium -based browsers, such as Google Chrome , Microsoft Edge , et cetera, it is around 32K, on discrete GPUs of course. It is far beyond any real use case. So you can easily treat it as "no limits".
Maximum Image Resolution (Firefox)
With Firefox browser, things are little different. This browser uses a different engine ( SpiderMonkey ) compare to Chromium based browsers ( V8 ) and, despite similar functionality, has a different internal logic. It doesn't matter how big the maximum texture size your hardware supports. Firefox browser with their Image API implementation refuses to process images larger than 8K.
Thus, the panorama app does not have even a chance to determine image size and then resize it, if image resolution exceeds limit of 8K. The Firefox Image API will give an error, making any further image processing impossible.
The good news is, that 8K is still a good resolution for most of cases and, of course, if you not strictly bonded to Firefox, you can use less restrictive Chromium-based browser of your choice. Thankfully, there are lot of them right now.
About
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
v3.0.0 (Jul 23, 2022 Update)
Online 360° Panorama Viewer can now generate HTML code that allows you to embed a widget with this panorama viewer right into your website or blog pages. This will make it easy and free to show your panoramas directly to your visitors.
This feature id experimental, so if you have any problems using it, let us know.
v2.5.0 (Mar 11, 2022 Update)
The Panorama Sharing URL tool can generate QR-codes for instant link exchange with mobile devices directly from the screen of another device on which the code is generated. Learn more at Panorama Shared URL QR Code section.
v2.4.0 (Feb 6, 2022 Update)
- Resolved high-res panoramic image loading limitation for GPUs with limited capabilities, such in mobile devices and integrated graphics cards. Previously, if you provided a very large image for you device, app refused to load panorama and displayed messages with text like "This panorama is to big for your device! . ". Now, if you provide a very large image, panorama app automatically measures capabilities of your device and reduces provided image resolution according to the optimal value, if needed. The resizing process itself may take a few extra seconds before loading panorama.
v2.3.0 (Feb 2, 2022 Update)
- Added support for stereoscopic panoramas. You can read more about this in 360° Stereoscopic Panorama section of documentation.
v2.2.0 (Dec 30, 2021 Update)
Added support for 8 and 16 bit TIFF image files. You can read more about in Image Format section.
Now, during image file reading and processing, application shows corresponding message with a spinner, and not just silently "freeze" as before. This is especially make sense with TIFF support, as TIFF files are usually hundreds of megabytes in size and it takes long to read them.
v2.1.0 (Nov 23, 2021 Update)
- Added support for all major web image formats, such as SVG, GIF, WEBP, and more. Please see full list of supported formats in Image Format section.
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
Top 13 Panorama/360-Degree Photo Viewers
After having created amazing panoramas, you’re probably wondering what are some solutions for viewing 360 images on desktop and mobile. In a previous post we’ve included some 360 media players that allow for viewing both 360 photos and videos.
You probably also know that content platforms such as Kuula, VeeR and Roundme offer online image hosting. You can check out Kuula’s blog on how to embed their 360 images, and VeeR’s blog on embedding and sharing your panoramas, and also Roundme’s guide for embedding a 360 tour.
If you’re thinking of building your own website, besides these obvious choices, here’s an additional list of the best panorama viewers for web:
1. Google VR View for the Web
Google VR View for the Web is a great choice for developers that want to build browser-based sites or prefer their content to work with Google Cardboard and Daydream headsets. It has SDKs available for mobile app development as well.
2. Marzipano
3. A-Frame
Backed by Mozilla, A-Frame is the leading open source project for WebVR, which makes it work with web sites as well as Vive, Rift, Daydream, GearVR, and mobile phones.
Find it on GitHub
4. Photo Sphere Viewer
Photo Sphere Viewer has a stable JavaScript library, and allows download of 360 image and zoom in and out, which you can choose from the menu bar.
Где и как смотреть панорамные фото и видео в режиме 360 градусов?
Пост написан: 24 ноября 2016 , обновлен: 14 апреля 2021 
Автор: @Pavel419
Я уже писал в статье, о том, что можно делать в вр-шлеме, что одной из интересных вещей является просмотр вот такого контента. Давайте остановимся на этом поподробнее.
ВАЖНО: Если у вас вдруг завалялся Oculus Quest 2 и вы ищете, как смотреть 360-градусные видео с YouTube в лучшем качестве — читайте эту статью.
Дальше речь идет о карбордо-подобных очках.
Просмотр фотосфер и фото в формате 360 градусов
Фотосфера – это когда вся картинка вокруг вас. То есть, вы одеваете свой шлем с телефоном, загружаете картинку и можете вертеться в ней на 360 градусов, вверх и вниз. Если у вас есть гироскоп. Эффект присутствия офигенный!
Как это попробовать? Очень просто! Приведу несколько приложений, чтоб было понятно.
Где же можно смотреть фото 360 градусов?
Orbulus for Cardboard VR – подборка со всех уголков земли. Все управление целиком на гироскопе, джойстик не нужен.
Sites in VR – еще одно приложение с фотосферами. Тут есть, например, Эйфелева Башня.
Ну и так далее. На Маркете можно найти многое. Ничего дополнительно качать не надо, скачиваете сами приложения, выбираете в них режим карборда, и наслаждаетесь!
Кстати, вот вам еще подборка фотосфер на гугл-диске, только я не знаю, чем их открывать, потому что мне всегда хватало приложений. Попробуйте различными плеерами под вр.
И еще. Поскольку у фоток разрешение выше, чем у видео, они выходят более четкими и эффект присутствия куда выше, как по мне. Ну и весят они значительно меньше.
Кстати, по сути, панорамы гугла – это тоже самое и их так же можно смотреть в вашем телефоне через шлем.
Однако, перейдем к видео.
Панорамное видео на 360 градусов
Панорамное видео – это как фото, только оно движется) чтоб смотреть такое видео, можно использовать ютюб, или специальные видео плееры, например, ААА VR Cinema, или VR TV Player.
Начнем с ютюба. Чтобы смотреть панорамное видео тут, не надо никаких ухищрений. Просто находим нужный ролик, открываем на весь экран и в свойствах видео включаем значок карборда:
Ищите значок Cardboard
После этого видео делится на два экрана, вставляем телефон в шлем – и вперед! Рассмотрим примеры.
Пляж в формате 360 градусов – клевая демка. Стоим на берегу моря, рядом ходят люди и плещутся волны. Присутствие офигенное)
На ютюбе целая гора таких каналов, вот примеры:
-
– почти два миллиона подписчиков и множество роликов. Кстати, это официальный канал ютюба с панорамным видео – почти 30 тысяч подписчиков — сколько подписчиков, не ясно, но просмотров видео – более десяти миллионов! – еще один канал с панорамным видео
Ну и хватит пока.
Для тех, кому мало ютюба, есть пара приложений.
Например, я уже писал про концерт Пола Маккартни, а еще есть восхождение на гору — The North Face: Climb. Впрочем, почему-то оно не ищется поиском. Ну да ладно.
И на десерт – подборка панорамных видео на гугл-диске. Скачиваем на телефон и смотрим в шлеме.
Вам должно это понравиться!
Рубрика: Полезные статьи о мобильном VR