WebGL and three.js in CMS

Tom McCauley


University of Notre Dame, USA

CWP Visualization Workshop

28-30 Mar 2017, CERN


iSpy WebGL, the browser-based display for CMS using WebGL and three.js was first released in December 2014.

Use-cases, requirements, WebGL and three.js, usage, pros and cons, etc. covered in talk at CHEP and talk at HSF workshop in San Diego.

Here, I want to:

  • Say a bit on the data models, i.e. going from CMS EDM .root to 3D display in the browser
  • Do a quick tour of the features
  • Say a bit about the current status and future plans

Data models


  • Lightweight client-side application written in JavaScript, HTML, and CSS; local file access via FileAPI
  • Views: 3D, tree, table
  • Standard event display controls: load event, prev/next event, home view, zoom in/out, view along axes, perspective/orthographic cameras
  • Correlated (between table and 3D views) of phyiscs objects
  • Touch events enabled so works on mobiles, tablets, etc.
  • Switching between WebGL, canvas, and SVG
  • bootstrap.js for layout; scaleable for mobile devices
  • Default animation sequence
  • Import/export of 3D files
  • Stereo view for use in Google Cardboard in mobile browser




  • Add dedicated R$\Phi$, RZ views
  • Improve and extend 3D geometry import/export
  • Improve configuration and export of animations
  • Improve style configuration handling
  • Keep up with evolving versions of CMS data model and geometry
  • WebVR, ...

Thank you