Digilite is a web-based digitized/virtual tour of a property that can be anything ranging from a single apartment to an entire society. Through this article I will be trying to answer several questions:
- Why did we create Digilite?
- What exactly is the product?
- Developing the web app
- There are a lot of duplicate listings. At Housing, we have a verified section that tackles this problem.
- Even when the listing is verified, it does not give you an idea of how the apartment actually looks.
If you think about the second problem, it can be solved by clicking high-quality images of the property. What we need to remember is that even though that is a solution, an image shows you only a part of the room and can be clicked in such a way so as to show the best possible part of the property. The user seeing the property online is impressed by the images, but when visiting the property, they might find out things are not as good as shown in the images.
To tackle this problem, our team came up with the idea of Digilite.
What is Digilite?
Digilite is a web application that can be defined as a collection of spherical panoramas taken at various points within the property which are then arranged in a 3D space to give a holistic view of the entire property to the user. The user can then transition between various points with the help of the UI and take a virtual tour of the entire apartment.
The aim is to reduce effort on the customers part. Since panoramas give the entire 360 views of a point, the user is able to see every part of the property. This helps the user make a more informed choice regarding which apartments to visit and since the tour gives them a good enough idea of what the apartment looks like there are fewer surprises when they actually go for a visit.
Developing the web app
For this section, you will need to know a basic amount of Three.js to understand certain aspects of it. If you are not familiar with it, do try out this example before reading further, as it will make the article easier to follow.
We needed to build a web app that was able to support showing spherical panoramas and at the same time allow transition from one panorama to another. With this in mind, we decided to use Three.js as our primary library to support the 3D aspect of the application.
Three.js allows you to create different types of shapes using its existing functions. As you might have guessed, for our application, we used spheres. These spheres are added to the scene and placed at their respective points within the scene. Initially, texture for only the sphere which the user first sees is loaded. The spherical panorama is wrapped around the sphere and the camera is placed in the middle of the sphere so that the user feels like they are standing in the middle of that point.
The user can pan around the scene by either dragging or using left/right arrow keys. This triggers the rotation of the camera within the 3D scene.
To move from one point to another, we provide arrows which can be seen at each point. The arrows are placed depending on the relative orientations of the points with respect to each other. Thus, even while panning the arrows point in the same direction and do not rotate with the camera.
Clicking on the arrow or pressing the up arrow key when the camera is facing in the direction of the arrow moves the camera in that direction. The transition from one point to another is something that is quite interesting.
Imagine you have two spheres in a 3D space with centers at C1 and C2 such that the two spheres do not coincide.
Assuming you are at C1 and have to move to C2, one way is to move the entire length of C1C2. However, in our case doing that would not work. The reason is that the spheres have a texture but the part surrounding them has a default color. Going from C1 to C2 will involve seeing the texture of C1, then a default color, and then the texture of C2. This will translate to a terrible user experience.
What we instead do is, change C2 in such a way that it still lies on the line C1C2 but it now also lies on the circumference of C1.
The initial opacity of the non-active spheres is 0 and the active sphere has the opacity of 1. When we transition, three steps take place:
- The next sphere center is changed to lie on the surface of the current sphere.
- The opacity of the current sphere is slowly changed from 1 to 0 and vice versa is done for the next sphere.
- The camera is moved from the current to the next sphere at the same rate at which the opacity changes.
This camera movement gives a feeling of movement to the user and the toggling of opacity ensures that the view of the current sphere seamlessly integrates with the next sphere.
You can try the product out yourself by clicking on this project link.
We are currently working on optimizing the entire web application to get better loading times and improve the user experience. As you might have inferred, Digilite is an image-intensive application and thus faster loading of images is something we are working on and will be covering the same in a future article.
Lastly, Digilite was developed with a vision to better the customer experience of buying/selling/renting on Housing. We believe that this is a step in the right direction and our team will be working on more products like this in the future.
Stay tuned to our blog for more updates on similar products.