Webgl Canvas in Drupal Module/Theme

I’m going around in circles on this a little and need some help. Full disclosure – I posted this on Stackoverflow but got no hits.

Background … I have a javascript (babylon.js) 3d application that uses html5 webgl canvas element. I would like to add this to my Drupal 8 site. I am new to Drupal but not to MVC and have spent several hours on the various drupal tutorials so I think get the (very) basics of module/theme development.

Intuitively I thought I would need to: – add the canvas element to a block using a module – position the block in a region (or possibly use Panels for more flexible positioning) – update a theme to amend presentation of the canvas element in the block – add the javascript application as a library that manipulates the canvas and the objects within it.

The few references to this kind of thing I can find seem to suggest that the HTML5 canvas element should be introduced via twig as part of a theme. I get the twig process but is this approach correct? In my understanding this would be effectively adding content/structure straight into Drupal’s presentation layer which does not feel right?

Ultimately where I want to get to is to display the canvas in one region with blocks in another region (or possibly using 2 tabbed Views) showing a) a list of all available 3d object types; and b) the 3d object types (and counts) currently included in the scene. With buttons to add/remove objects from the scene. This will require passing values between the Drupal/PHP part of the site and the javascript babylon.js code. I effectively want the scene and the objects within it to be managed as Drupal content.

However first things first .. how do I correctly display the webgl canvas element!!

Thanks in advance.

Drupal version: 


Source: https://www.drupal.org/taxonomy/term/4/feed