How to Create a Web-Based 3D Interactive Model

You've taken a series of photos and generated a 3D model. That's great, but how do you make that available for other users on the web?

In my earlier posts I covered the underlying principles of using computational photography (photogrammetry) to create a 3D model. Photogrammetry leverages the principle of parallax that is found in all overlapping photos of the same object — viewed from different positions, the same feature will appear in different places. If we know the positions of the cameras, then we can use (a lot!) of high school trigonometry to work out the 3D coordinate of the point. This process traditionally involved metric cameras and surveying equipment — which are expensive! However, the development of modern computational photography image processing software has led to the truly democratizing appearance of Structure from Motion products which have quite literally revolutionized this space. With enough photos, gone is the requirement to know where the cameras are located - the software works it out for you. Now anyone can create 3D models quickly and relatively cheaply.

In the last tutorial, I outlined an optimum workflow for shooting the images and then using Agisoft Photoscan to produce such models. It's a liberating process and allows anyone to do it, anywhere. However, to quote the words of John Donne, "no man is an island". That is, creating a 3D model is often the starting point, but many want to share it more widely. So, how might you go about doing this?

The starting point is exporting your 3D data — remember, all Photoscan has done with the modeling is to compute the positions of the cameras, find high contrast points across as many photos as possible and then calculate their 3D coordinate. This leads to a "mass" of points or a cloud — so you'll see these referred to as pointclouds. In Photoscan, go to the File -> Export menu to bring up the export dialog. This will let you specify the format, name and location of the export file — in this case choose LAS (an industry standard format). The resultant file will likely be several hundred megabytes depending upon the number of photos in your model.

Sometimes I find the exported file from Photoscan doesn't know which way is up — you need to tell it and an intermediary piece of open source software, CloudCompare, allows you to do this (along with all sorts of other tools for manipulating point clouds). Once CloudCompare is installed, go to the File->Open menu to open your pointcloud (accept any dialogs that come up).

Once loaded, make sure you select the pointcloud in the DB Tree pane on the left, then go to the Edit->Level menu to start leveling your pointcloud. Click three points that fall on "ground level". This will reorient your pointcloud which you can then save.

The final step in the process is to actually create a model that is viewed within a web browser and here another open source project, Potree, can be used. The helpful Getting Started page runs you through the straight-forward process (although you'll need to be familiar with using the command line): start by downloading PotreeConverter, run the model conversion command and then upload to your website.

For example, if you downloaded PotreeConverter into a folder called Potree, also put your mycloud.las LAS file in there. Create a subfolder called "mycloud", then in Windows, start a command window inside the "mycloud" folder and type something like this:

..\PotreeConverter ..\mycloud.las -o html --generate-page mycloud

Upload everything in the "mycloud" folder to your website (using a standard FTP programme such as FileZilla) and then point your web browser at the html file. You can see an earlier model of Rushton Triangular Lodge that I have made available here.

If you've generated some 3D models then post the links below or if you have any other methods for making them available online!

Lead Image by Permission of James O'Connor