Preface
Recently, I made a 720 panorama tool. Many developers think that panoramas are very simple. There are also many source codes of panoramas on github, but when they are actually used, they will find that there are many pitfalls, which are not yet up to the commercial level in the true sense. Below I will sort out some of the pitfalls and solutions we encountered while developing this project, and have published them online at https://720.h5ds.com/
Tool introduction:
H5-720 Panorama (referred to as H5-720) is a panorama production tool based on threejs + h5. Users can upload panorama pictures to make panoramas. H5-720 can preset buttons, add elements, add hotspots, add special effects, add Multiple interaction methods, one-click activation of gravity sensing, VR glasses support, and can be adapted for multi-device viewing after production on PC.
What is a panorama?
Before that, let me briefly introduce the panorama, which can be viewed at 360 degrees without any dead angle. Baidu Encyclopedia's professional explanation is this: Panoramas are expressed through wide-angle means and forms such as paintings, photos, videos, and 3D models. , showing as much of the surrounding environment as possible. 360 panorama, that is, by capturing the image information of the entire scene with a professional camera or using a modeling software to render the picture, using the software to stitch the pictures, and playing it with a special player, that is, turning a plane photo or a computer modeling picture into a 360-degree Full view, used for virtual reality browsing, simulates a two-dimensional plan into a real three-dimensional space and presents it to the viewer.
Panorama asteroid perspective:
Panorama VR angle of view:
When we want to view the panorama, we need to use special software.
Some are called 720 panoramas and some are called 360 panoramas. In fact, they are all the same, because some people add the left and right 360 degrees and the up and down 360 degrees, which means that they can be viewed up, down, left, and right.
Panorama web-side solution
To display the panorama on the web side, we use threejs to implement it. There are currently three common solutions.
1. Map the panorama onto the sphere
Similar to a globe, this method is the simplest, but this method has a big flaw. If the texture is too large, the mobile browser will crash directly when it is opened, and it cannot support high-definition pictures. The performance of the PC terminal will also be very poor. If it is too large, the GPU performance requirements will be very high.
2. Slice the picture into 6 pieces and paste them onto a cube.
The optimized version for the first case, which is also the official panorama solution, is a hexahedron panorama, which slices the panorama into 6 pieces and maps them to a cube. We can use the tool to slice the panorama into 6 pieces: https://jaxry.github.io/panor…
Then map it to the 6 faces of the cube
There are also some defects in this way: it does not support ultra-high-definition pictures, because ultra-high-definition pictures will be very large when sliced into 6 pieces, and if it is a cube texture, it cannot be used for asteroid view. So the third ultimate solution emerged
3. Slice the panorama into N tile images, and then map them onto a sphere.
In our project, the picture was cut into 16 parts
Then use the threejs custom shader to paste the texture on the spherical surface, and each tile image will be loaded and updated independently, so that it can be loaded on demand. To achieve a blur-to-clear loading effect, you need to make 2 layers of balls, the red ball wraps the blue ball, the blue sphere uses a tile map, and the red map uses a low-definition panorama, so that it can be blurred at the beginning. After each tile image is successfully loaded, it will gradually become clearer. Of course, if you want a higher-definition effect, you can monitor the zoom ratio, and when the zoom becomes larger, replace the tile image with a higher-definition one within the viewing angle.
We use a third party to solve the performance problem and preloading problem of panorama