WebGL and three.js in CMS

Tom McCauley

thomas.mccauley@cern.ch

University of Notre Dame, USA

CWP Visualization Workshop

28-30 Mar 2017, CERN

Outline

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

Features

  • 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

Demo

Status

  • Since first release in Dec 2014 iSpy WebGL has been used by thousands in CMS masterclasses, via CERN Open Data Portal, and in CMS.
  • Images and animations
  • Latest: update to three.js r83, bug fixes and improvements $\rightarrow$ release (coming soon)

Plans

  • Add dedicated R$\Phi$, RZ views
  • Improve and extend 3D geometry import/export
  • Improve configuration and export of animations
  • Improve style configuration handling
  • WebGL2, WebVR, ...

Thank you