WebVR is a technology to experience VR in a browser, which is officially formulated by W3C and implemented by various browsers. Since WebVR is currently supported by different browsers, it is now necessary to use an additional backward compatibility library webVR-Polyfill provided by Google.

There are many frameworks that make it easy for us to make WebVR applications.

A few examples

Let’s start with what WebVR can do:

  • Aerial panorama of Oriental Pearl Tower
  • My world
  • Panoramic view of Ocean Park in Hong Kong

The examples above all use a-frames, provided by Mozilla.

panorama

In general, we need professional camera equipment to get panoramic pictures. For example, in the sky panorama of Oriental Pearl Tower, we used 96 pictures to form a cube space, in which we can see the images of upper, lower, left and right.

We use the camera to take multiple pictures in the same place, at multiple angles, through the image Mosaic processing, and then cropped. Photo stitching can be realized by PhotoShop PhotoMerge (File > Automate > PhotoMerge).

You can also use your phone’s panorama mode to take pictures and PhotoShop them out. The following is a detailed introduction to the production of this panorama picture.

Panoramic picture making

Take a Panorama on Google. This is a picture of Panam Beach, Thailand.

Create a new image in Photoshop with 2048 x 1024 dimensions or a similar scale as the final size for the panorama. Import the material into it.

Adjust the width of the picture to cover the entire canvas, leaving the top and bottom of the picture blank. The horizon in the material remains in the center of the image.

We used Photoshop’s autofill to fill the top and bottom pieces without changing the proportions of the image.

Start by selecting all the pixels of the material (Command + left-click on the layer). Then invert pixels (Select > Inverse) and increase the selected area by a few pixels (Select > Modify > Expand > Expand by 5 px).

Select Auto Fill (Edit > Fill > Contents: Content-Aware). If the blank space is too large it will fill the sky into the sea, so we can do it in sections.

For the unsatisfactory position, you can select, right click, and then automatically fill.

Above is the rendering.

And then we’re going to have to deal with the problem of not matching left or right after one rotation. Copy part of the content on the left, paste it to the right, reverse it left and right (Edit > Transform > Flip Horizontal on the right), and add a gradient layer mask.

The processed images are much more natural.

Finally, we put the image into the A-frame’s A-Sky.


      
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>A-Frame Panorama</title>
    <script src=".. /aframe.min.js"></script>
</head>
<body>
<a-scene>
    <a-sky src="./phra-nang-beach-1.jpg" rotation="0 0 0"></a-sky>
</a-scene>
</body>
</html>
Copy the code

The actual effect can be referred to the Hong Kong Ocean Park panorama, this panorama effect is made in this way.

Although not as good as the effect of Oriental Pearl, but there is a certain effect.

In addition to a-Frame, there’s Also React-VR, a VR solution offered by Facebook that hopefully will lead to a better development experience.