Internet real estate platforms have made great progress in user experience. What impresses everyone most is VR. It has become popular in most house-looking APP. It has become popular in most of the house-looking apps. This is an excellent application scenario for graphics in the front end. It allows users to see the scene of the room personally. And users can see the model of the house.

Overall Process

First of all, introduce the overall process of VR house viewing. From shooting to display. Ignoring all details. The process of VR shooting has the following three types. Shooting, modeling, presenting.

House Shooting

The function is integrated in the VR function we use for real estate agents. This part of the work is mainly completed by the students of the client. Front-end students joined in the development of the preview of the shooting results.

The client supports two shooting methods:

Connecting panorama camera to shoot is simple and easy. You need to buy panorama camera. Directly use the mobile phone camera to shoot. It requires no peripherals. Camera supports restricted fov.

Model Building

Modeling is an offline service. The picture will be uploaded to the background after the B-side shooting is completed. The modeling service uses machine learning algorithms. To identify the feature points of door frames and wall corners. Then generate a 3d model through graph transformation calculation. The quality audit of 3D model requires a quality inspection platform.

The last step is to splice the model of each room into the model of a suite. At present, there is support for automatic splicing algorithm. But to achieve a certain quality, manual intervention is needed. This aspect is the focus of future optimization. Submit after splicing is completed. You can view and experience 3D models in VR in many apps.

Front-end Presentation

We just talk about the challenges met in the front-end display of VR houses. On the one hand, we should pursue better interaction and display effects. On the other hand, the limitation of the web environment will cause many problems. So, we need to learn the principles of computer graphics. Deeply optimize the architecture and code of the whole VR house. In the end the interaction effect and performance reach a certain level.

Many problems encountered by VR viewing technology, such as:

1. Optimization of Loading Speed

The picture is compressed by the picture service. To reduce the size of the requested resources. When the page is loaded, the resources required for the first panorama display are loaded on demand. Then load and render the floor plan, 3D texture, other visible panoramic images, and logo images in order without blocking.

2. Optimization of Animation

Animation is classified according to features. And implemented step by step according to states. Spherical Coordinate System Trajectory Calculation Algorithm for Camera Animation. This solves the jitter problem of camera animation. Ruler and 3d sign animation are quickly implemented using tween.js library.

3. Optimization of Frame Rate

All images and textures are loaded in order by priority (non-critical path idle loading). To ensure frame rate and responsiveness. Animations that consume computing resources actively reduce the calculation frame. To ensure frame rate and responsiveness. The perspective camera realizes UI household map near the plane. It improves performance and solves the flash screen problem of some mobile phones.