03 May 2017

A new way to explore water networks in 3D: pipe rendering

In this post we focus on a specific aspect of this upcoming technology that is anything but trivial: rendering water networks in 3D.

Baseform develops software for networked water infrastructures. Baseform’s effort in creating new, better, mathematical models, analytics and predictions must be matched by a clear, powerful user interface experience where all users can easily explore and understand those results and the behavior of water and waste water systems, and the service they deliver.

We believe that, along with more classical 2D map visualizations, a new 3D web interface is crucial for exposing the dynamic nature of water systems, in particular because terrain and elevation play a significant role.

Water networks can be represented on a 2D map, but by adding the third dimension it is possible not only to visualize the physical elements, their topography and their relation to terrain but also, and crucially, we have an extra dimension to express the values of state variables such as flow or pressure.


OpenGL, the industry standard for high performance 3D graphics, has from the outset featured native support to rendering lines with thickness. Baseform’s fully web-based software uses WebGL to allow for accelerated GPU usage of physics, image processing and effects as part of the web page canvas.

Unfortunately, due to specific (Angle and OpenGL ES) limitations related to the need for working with features common to all platforms, from desktop to mobile, the rendering of lines in 3D is not directly available.

This means that full, triangle-based 3D models have to be used and carefully drawn to precisely and clearly express line thickness (pipe diameters), corners/bends and line joins (pipe junctions).

Dynamic thickness, caps and miter joints

At Baseform next-gen research, we opted to go all the way with miter joints, with no extra geometry overhead and incorporated into dedicated 3D shader programs. These shader programs are also designed, using very little extra geometry, to render perfect caps every time.

Another challenge is the ability to both generate clear visualizations of a very large systems, from high viewpoints to detailed hi-resolution details, when zooming in to close-up views.

We decided to dynamically adjust the thickness (the diameter of each pipe), from near life-size when zoomed in, to progressively enlarged as the view zooms out. This operation depends on pixel density and we can adjust the pipe diameter to very specific sizes, in mm/inches or pixels. For example, the pipe may be shown with a 1000mm/40in diameter at the closest distance, but always have a 1.5 pixel border thickness at any zoom level.

The end game

The value of showing a physical urban infrastructure in 3D is significant as it becomes easy to understand. Where it gains surprising value is in the use of 3D to display and help understand technical information about the network, such as its hydraulics. This type of information gains not just an extra dimension for representation (e.g., relative values of nodal variables become relative heights of node-based columns) but lend themselves to translating complex technical quantities into simple representations which the lay user can understand – for example, very technical concepts such as ‘hydraulic grade lines’ become visually-appealing water surfaces.

Luís Loureiro

3D & next gen, at Baseform