Visualizing Point Cloud & 3D Data On Web
For a while I’m dealing with drone mapping individually. And also working on storing and querying large location data sets on relational - nosql databases & creating map analyzing tools at Tübitak Bilgem Yte.
Large location data & drone mapping terms meet at visualizing point data on modern browsers. So while dealing with webgl mapping also trying to render point cloud / 3d data.
I created point cloud / 3d data with uav mapping, I’m using OpenDronemap & WebOdm. A Turkish how to do mapping with drone is here. And these tools create downloadable 3d point cloud files (las, ply, csv), digital surface model (dsm), orthophoto and textured model (obj and related files).
What I will describe is rendering some of those files with several web technologies.
With WebOdm, 2d / 3d view of any work can be shared online. METU Faculty of Architecture where I was graduated can be reached on this link (hope link is still alive when you reached here).
POTREE
On the link above Potree is used as 3d data rendering. As stated on Potree web site, Potree is a free open-source WebGL based point cloud renderer for large point clouds, developed at the Institute of Computer Graphics and Algorithms, TU Wien.
But I want to serve this data individually not on WebOdm. So Potree can be used with my data. But which data should I use with Potree? A tool PotreeConverter converts las, laz, binary ply, xyz or ptx files to potree octree. Las or ply data can be used but not directly, I have to convert this data to zoom based tile like schema namely octree.
On Wikipedia, octree is described as, a tree data structure in which each internal node has exactly eight children. Octrees are most often used to partition a three-dimensional space by recursively subdividing it into eight octants. Octrees are the three-dimensional analog of quadtrees. The name is formed from oct + tree, but note that it is normally written “octree” with only one “t”. Octrees are often used in 3D graphics and 3D game engines.
Spent hours and hours but I couldn’t make PotreeConverter work on Ubuntu and MacOs. Luckily there is a Windows executable version and it works. Converter tool creates *.bin files and some needed json files. Then only thing to do is getting an Potree example and replacing js files with the newly created files and folder. Result can be seen on this link.
DECK.GL
As I said, now working on developing large geospatial data visualization and BI tools at Tübitak.
What we are doing is a bit like this, get data and render on Kepler.gl, and add some charts, lists, statistics and create dashboards, etc…
On mapping side I’m mainly using Uber’s open source technologies like Deck.gl and Kepler.gl. I first got familiar with these technologies at Uber Open Summit 2018. Especially with Urban Computing with Advanced Visualization video on Youtube.
As stated on it’s web site deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets. And Kepler.gl is a powerful open source geospatial analysis tool for large-scale data sets. Kepler uses mapboxgl js and mapbox base maps and it’s a mapping tool for data analysts, urban planners, mapping engineers, etc.
Now I have to mention one more Uber tech; loaders.gl. Loaders.gl is a suite of loaders for file formats for big data visualization, including point clouds, 3D geometries, images, geospatial formats as well as tabular data. That means loaders.gl load data for visualizing with Deck.gl like on this example (please wait a little after reaching the page), that I directly copied from their source code, but used my own las data. No need to pre-convert point cloud this time.
As you know this is a building and 3d data has to have an exact location information, and may be shown on a map. With loaders.gl & deck.gl, Cesium 3D Tiles (stored by Cesium ion) can be loaded and shown on map. But I don’t want to share my data on a cloud system. There are several ways to convert las data to 3dtiles like with fme but I didn’t try it. And this way did not work with my data. I have a question on stackoverflow without an answer. If you have read this article so far and have an answer, please write it down.
More ways? Yes, 3 more left that I tried.
THREEJS
May be you have heard about threejs. Three.js is a cross-browser JavaScript library and Application Programming Interface used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL.
Ok I can use threejs but which data should I use. Odm or WebOdm creates a zipped folder of obj file and related documents as textured model. Threejs can render obj file and also gltf.
glTF (derivative short form of GL Transmission Format) is a file format for 3D scenes and models using the JSON standard. It is an API-neutral runtime asset delivery format developed by the Khronos Group 3D Formats Working Group.
I found an example on codepen that uses gltf data with threejs. Ok I have some code, obj folder, but need gltf. Analytical Graphics guys who are also developing Cesium have a converter obj2gltf. This is a nodejs project and can be installed globally with npm. After installation run this command and you now have a gltf file; obj2gltf -i .\odm_textured_model.obj -o face.gltf -c
You may reach threejs and gltf data example here (please wait a little after reaching the page).
Odm creates also two raster data formats. One is orthophoto namely an geometrically corrected aerial photograph or satellite imagery. The other is digital surface model that represents elevations of the reflective surfaces of trees, buildings, and other features elevated above the Earth. Dsm stores elevation information on each pixel. These two raster data can be used on nearly every gis applications. And I used QGis.
There is a perfect plugin on QGis called qgis2threejs that creates a 3d web view from raster elevation data and also uses other vector and raster data on an elevated view. This plugin converts orthophoto to Base64 & and dsm to pixel coordinates. This is the result view.
CESIUM
This work has been an epic fail. I could just show gltf data but not on map (please wait a little after reaching the page). As I said above I don’t want to share and serve my data on a cloud system namely on Cesium Ion. There is an on-premise option but it’s not free as I see.
Now will be working on deck.gl and cesium to show up any data on map.
