360° Images on the Web, the Easy Way

One of the most popular uses for VR today is 360° images plus video. 360° images are easy to find out and share online, and you don’ to need to learn any new interactions to learn the 360° experience.

Building 360° views is not as simple as exploring them, especially if you want to make an event where the viewer can navigate through scene to scene. Here is the alternative I came up with using A-Frame , a web platform for building virtual reality experiences plus Glitch , a creative community platform for developing, remixing and hosting web applications and sites.

We often teach students at my nearby public library. I have found the mixture of A-Frame and Glitch to be perfect, especially for the younger learners. A-Frame enables you to write markup that feels like CODE to produce 3D content. You don’ t have to write any JS code if you don’ t wish to. And Glitch is wonderful mainly because I can give my students an example project that they then ‘ remix’ to create their own version. Thinking about it, ‘ remix’ is probably a much better word for non-programmers than ‘ fork’.

This is actually the project I start them with. The particular 360 Course . If you load it up you’ ll see me in my workplace with a ridiculous grin on our face and a strange sphere upon my forehead.

In case you click the headset icon in the reduce right you can enter VR. If you utilize the fish icon in the higher right you can create your remix. If you move the gaze cursor to the pale blue sphere you can jump to a new scene.

This is an example of what I contact a 360° trip .

360 Tour

The 360° tour is a web-based encounter where you view 3D imagery from the single vantage point. You can turn around and look up, but you can’ t move forward or back. The particular tour is made up of scenes. To get around you click on hot spots to leap from scene to scene. You can imagine} this as the modern equivalent from the old multi-media CD-ROM edutainment applications from the mid-90s.

The particular Code

The particular code is pretty simple. It’ t stock A-Frame with one customized component. You load your images within the a-assets section. To create a ‘ scene’ make an entity with a display screen component (I desired to call it scene instead of screen however it would have been too confusing using the main a-scene component) .

Inside the screen entity place an a-sky component for the 360° image, then add spheres, or cubes or whatever else you want for the hot spots. The hotspots should have a to-screen component which names the picture to jump to.

 < a-entity screen="shed">
< a-sky src="#shed" rotation="0 ninety 0"> < /a-sky>
< a-sphere
 color="yellow"
radius="0. 2"
 position="2 zero 4"
 to-screen="patio"
> < /a-sphere>
< /a-entity> 
 

You can make as many screens as you wish, then wrap them all in a single enterprise with a screen-switch component. Set the display screen property to whichever scene you intend to load first.

 < a-entity screen-switch="screen: scene3">
< a-entity screen="scene1">
...
< a-entity screen="scene2">
...
< a-entity screen="scene3">
...
< /a-entity> 
 

The actual switcher component is included in the Glitch project. You can look at the switcher. js file, but the code is pretty uninteresting. It just toggles the presence of each screen.

That’ s it. That is all you need designed for 360° experiences.

How about some of my own images?

Oh, you wished to use your own images? Ah, properly good news. That’ s easy as well.

You can find free recylable 360° images on the web by looking for equirectangular and creative commons . Here’ s a good deal on Flickr .

If you want to make your own, you can get a 360° camera. There are several good brands. I’ ve been using the Ricoh Theta V . It can connect to your computer via UNIVERSAL SERIAL BUS, but you can also control it with the Ricoh mobile app. The application is wonderful for checking the picture and adjusting the tripod prior to your shoot.

The particular Theta V can shoot each still images and video.

For shooting images We first suggest you get a tripod. The particular camera essentially has two 180˚ lenses that are stitched with smart software into a single 360˚ equirectangular picture. The stitching at the top and edges is quite good, as long as you don’ t have anything nearer than about two feet from you . For most directions this is good, but since you have to hold the camera together with your hands you’ ll see this particular weird mush of thumbs plus fingers at the bottom.

If you utilize a tripod the bottom mush is going to be almost invisible. Plus tripods are simply a good idea in general to get crisp sharpened photos. You can use the mobile application to view the scene and take the shutter once you get out of the particular camera view (ie, hide at the rear of a door).

Given that these images are typically viewed in the headset you should place the camera from roughly head height, or one to 1. 5 meters. On the other hand, if you prefer a fun ‘ miniaturized’ effect place the camera on the floor (or a tiny tripod) and place LEGO buildings around this.

What about Movie?

Ah indeed. Video. The Theta V can perform video, at surprisingly high resolution. Officially you can even stream the video over Wi-fi but the resolution is lower. If you need to stream you’ ll want to make use of an USB cable and do the coding on a laptop.

Regarding non-streaming video you can just add the MP4 files to your web-server and include the resource in the 360° tour with a video tag. After that just add the video to a picture with the < a-videosphere> element. It can work.

However….

360° videos are big. Really big. Such as a gigabyte each minute big . So while it’ s possible to just upload mp4 files to a web-server, anyone who would like to view your experience is going to be set for a long and possibly expensive download. To accomplish 360° video right you’ lmost all need to use a service that focuses on streaming video, like Wowza or even Vimeo . They can progressively stream the video plus adjust the bitrate dynamically. Should you do go with Vimeo check out this github project for how to do it.

360 ° It!

I hope you’ ve appreciated this introductory tour of what we should can do with 360° images. You are able to build your own by remixing this Glitch . I have added a few creative commons images to my assets repo; these types of images are licensed for you to recycle and remix. When you want to go outside of spheres you can read the full A-Frame documentation , which usually explains how to use other geometry, include text, and build your own elements.

If you want to learn more about steps to make VR and AR on the web We stream periodically on Twitch plus post lots of links to Twitter . Take pleasure in.

I am an author, researcher, plus recovering engineer. Formerly on the Golf swing Team at Sun, the webOS team at Palm, and Htc Research. I spread the word great user experiences. I live in sunlit Eugene Oregon with my wife plus genius Lego builder child.

A lot more articles by Josh Marinacci…

If you liked 360° Images on the Web, the Easy Way by Josh Marinacci Then you'll love Web Design Agency Miami