This article is an interesting read and great if you have skills with 3D programming and basic concepts of HTML, JavaScript and Object-Oriented Programming (OOP). 

Introduction

Rendering large point cloud models is a challenging problem, even more so in a web environment. With the limited resources available to web browsers, the common work around is to partition and tile the point clouds which will rapidly reach the limits of your hardware. One solution may be to throw more resources at the problem – faster CPU, more memory and hard drive space …

With Euclideon udSDK, hardware is no longer the bottleneck. Combined with the CesiumJS library, rendering and navigating between large, geolocated point cloud models in a web browser is done with unlimited detail! Let’s start with introducing the technologies we have used to create the web app!

#1 Euclideon udSDK

Euclideon and it’s Unlimited Detail Engine visualises, analyses, presents, and shares massive 3D geospatial data. The visualisation application Euclideon udStream renders huge 3D models quickly regardless of the size and detail or resolution. Euclideon udSDK is the core library which allows you take advantage of the Unlimited Detail Engine capabilities and integrate it into your own solutions. For more information, please visit: udSDK | Euclideon

#2 Cesium Ion

Cesium Ion is an open-source platform for visualizing and hosting geospatial data in a web browser, it can also be used to create standalone web applications. This is designed to work with the JavaScript library called CesiumJS. In our case, we want to take advantage of Euclideon udSDK for rendering large datasets with minimal overhead. For more information, please visit: Cesium ion – Cesium and CesiumJS QuickStart

Concepts

Framework

To keep things simple, we use pure JavaScript and HTML to create our application. We use HTML CSS to create and style our page; and JavaScript to handle functionals and operations including button event handling and passing renderer as an object into Cesium

How does it work?

Initially we’ll need to answer a few questions. How do we integrate Euclideon udSDK with Cesium and integrate the C++ developer kit with the JavaScript front-end, or control the Cesium viewer externally? Let’s have a look at these more closely. 

Integrating Euclideon udSDK with Cesium: In summary, we pass the model renderer as a primitive object into the Cesium viewer. First we must understand how Euclideon udSDK works. A class object is created to pass the context of the Cesium viewer as a matrix – so declaring the Cesium viewer before this class is mandatory. Then we pass shaders, Cesium textures and geometry attributes to call functions inside Euclideon udSDK, and also rendering the model in the class object. Finally, we pass the whole class object as a primitive into Cesium

Integrating the C++ developer kit with JavaScript front end: Euclideon udSDK is developed in C++ and is compiled into four main components with emscripten: Web Assembly (WASM), JavaScript worker, udSDKJS.js and wrapped with easyudSDK.js. All we need to know is the functions available in the easyudSDK.js file which contains all the functions we can use. 

Controlling Cesium viewer externally: This is the easiest part of the app. We simply store the Cesium viewer object in a variable and control to camera object by using the Cesium camera functions – by calling either .flyTo() or .flyToBoundingSphere() functions; it all depends on what kind of flight you want the camera to perform. 

Structure

Here is a diagram which shows the basic architecture of the app. 

Basic architecture of the app. Shows how the app communicate between udSDK & Cesium.
Basic architecture of how this app works with udSDK and Cesium

Optimisations

**This section requires advanced level of JavaScript and Intermediate knowledge of Euclideon udSDK – you may skip this and your app will still work. For full instructions read: Async/await (javascript.info)how to use async/await in JavaScript. This documentation comes with the Euclideon udSDK download. 

Even though rendering multiple large 3D models using Euclideon udSDK does not impact your computer performance, initially connecting to each model takes time and can freeze the app. To minimise this we make use of the async/await clause of JavaScript. We create a separate asynchronous processes to load each model. 

The async/await clauses only work with model loading function udSDKJS_LoadModel(). It is the only function that supports threading when rendering. The rendering function udSDKJS_RenderQueueAddModel() does not support threading, so it should not load asynchronously. You may only include udSDKJS_LoadModel() function in async/await clause, then pass all your loaded models into the Euclideon udSDK renderer. 

Summary

With Euclideon udSDK and the CesiumJS framework, you have the ability to develop your own GIS web application with the capability to stream in and view massive point clouds, with almost no performance hit.