Html5 + webgl 3D street scene rendering

Because of the collection software of Beijing street view in the early stage, there were a lot of street view pictures in the hand; and The Amazing effects of google Street View and soso street view gave rise to the idea of a small test, why don't I turn the image into a 3D street view and put it online. So I began to collect relevant information. After five days of trial, I finally achieved initial results;

First of all, thanks to http://www.hiwebgl.com /? P = 42 WebGL tutorials and source code provided by the website;

When it comes to 3D rendering, we have to talk about 3D modeling. What are the 3D models of google and soso street scenes? Yes, it's a sphere. It's just that the hiwebgl website has a sphere model, so I think again, can I mount a street view image to this sphere as a texture? Of course we can. So far, we have completed the work of street scene rendering 90%. At this time, there are several problems:

1. What we see at this time is not the 3D street view of google and soso, but the "Street View" picture hanging in the sky;

Solution: Do not translate the 3D model when rendering it;

2. After no translation, the "Street View" picture hanging in the sky disappears and is located at the origin to see the inside of the ball. However, another problem is found: the words in the picture are displayed as "Images ";

Solution: cancel the vertical flip of the texture image when loading the texture;

3. At this time, the image problem is solved, but the default street view looks reversed;

Solution: In this case, the current model is rotated 180 degrees around the X axis;

4. Another problem is that the street view is not on the front but on the right;

Solution: rotate the current model 90 degrees around the Y axis;

Finally, we need to note that when a street view image is used as a texture, its resolution must be an integer power of 2x2;

So much will be written for the time being. After I build the website, you will be able to see the effect.