Digilite — Housing’s new visualization product

Saksham Singh
Jan 2, 2020 · 6 min read
Image for post
Image for post

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

The Why?

If you have ever been to a real-estate platform(ex — , ) or have ever looked for apartments using online portals, you must have come across these two problems:

  • 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

In this section, we will talk about the technology used in creating Digilite. In addition to Javascript, HTML, and CSS there is a considerable amount of code written in .

For readers not familiar with Three.js, it is a Javascript 3D library that acts as a wrapper for . Links for both Three.js and WebGL have been attached if someone wants to dive into it further.

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 before reading further, as it will make the article easier to follow.

Use Case

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.

Development

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.

Image for post
Image for post
The view from inside the sphere

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.

Image for post
Image for post
Dragging via mouse to look around the 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.

Image for post
Image for post
Using arrow keys to trigger camera movement. Note that the relative orientation of the arrow remains the same even when the camera rotates within the scene.

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.

Image for post
Image for post
Assume that the white circle is C1 and the yellow circle is C2

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.

Image for post
Image for post
This is just to give an example. When transitioning the spheres do not animate like this and the next sphere just snaps to the final position.

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.

Image for post
Image for post
Moving from one sphere to the next

You can try the product out yourself by clicking on this .

What’s Next?

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.

Engineering @ Housing/Proptiger/Makaan

Engineering and technology articles from developers

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store