Interactive canvases are the central element of many technical or engineering applications. Creating such a canvas using DOM elements usually leads to bad performance if the number of items or the requirements of the visualization increase.
This talk shows how the 3D engine BabylonJS can be used to create such an interactive canvas and explains what are the fundamental differences between 3D graphics and a DOM-based approach. Two real world javascript applications with different focus illustrate the challenges but also the opportunities in creating custom canvas views:
- A mobile robotics control application, showing a large number of different interacting items on a 2D canvas.
- A scientific 3D simulation with less but more complex items, utilizing the GPU for data processing.
Both examples offload of as much processing as possible onto the GPU.
The talk further shows the integration of the canvas view into a javascript UI framework. This includes mixing of DOM-based elements with canvas based items as well only repainting the canvas when the underlying data model changes.
The chosen frameworks and technologies are examples, the fundamental techniques are easily transferable to other 3D engines and javascript frameworks.
