Visit CMS and the LHC with virtual reality

Guest post by Tom McCauley, a physicist and software developer working for the CMS Collaboration.

TL;DR: Point your phone's browser to this URL and use Google Cardboard to take a trip to CERN: http://cern.ch/cms-aframe


This month marks my tenth year based at CERN working on CMS and in that time I have seen the actual CMS detector twice: once above-ground as parts of it were being prepared to be lowered into the cavern and once underground in the cavern when it was all assembled. I’ve taken some long shifts when the LHC was first delivering collisions so have seen all I want of the CMS control room. It’s not surprising (in fact it’s probably expected) that a member of CMS has visited the underground cavern and control room. I would consider it very rare to have visited the LHC tunnel itself. Of course, if you are not based at CERN visiting any of these sites is impossible.

It occurred to me that since there are some nice panoramic images of the LHC tunnel, of the CMS cavern and of the CMS control room, why not use them to create a web application and allow one to visit rare places like the LHC tunnel in virtual reality in the browser? Actually the thinking was more the other way around: I want to learn a bit more about how to use virtual-reality tools, so what would be a nice thing to work on?

CMS A-Frame in a browser window (Image credit – Tom McCauley; original photograph – Max Brice/CERN)

It all started with ne of the best birthday presents I’ve ever received, which was also one of the least-expensive: a Google Cardboard viewer. It’s a virtual-reality headset, which in its cheapest incarnation is made literally from cardboard. It’s a great, simple idea: let your phone provide the interactive scene in split-screen, place it into the viewer, and a simple stereo effect is achieved. There is rotational tracking so the view responds to the motion of your head so you can “look” up, down, left, right, etc. For some applications there is a click event provided by a magnet stuck to the side of the viewer. All very clever. There are several nice applications for the Cardboard (and now Daydream) ecosystem. I recommend trying them out.

Of course it’s fun to write your own applications, and since I spend a lot of my time writing applications for the web, I naturally look for ways to do things in the browser. It’s an exciting time to be developing for the browser as they’ve become very powerful and flexible, and can do a lot of what previously could only be done with a native application. It makes delivery of content easy and for the developer it makes it easier as well. With the WebGL 3D graphics standard being more and more supported, one can create some beautiful graphics for the browser (using for example three.js). Even better, combine this with the emerging WebVR standard that brings virtual reality to the web. The good people at Mozilla have developed a nice framework called A-Frame for doing just this in a straightforward way.

Using this framework, I built CMS A-Frame. While it works just fine on a desktop or laptop by clicking and dragging (caveat: not all browsers support WebVR yet), for a truly immersive experience, you will want to use your phone. Simply point your phone’s browser to this webpage (your best bet might be to use Google Chrome), click on the "virtual-reality headset" icon on the bottom right-hand corner, insert your phone into a Google Cardboard viewer and descend 100 metres below ground to the CMS experimental cavern. If you let the cursor rest on one of the floating icons, you will switch views to a different location, including the CMS Control Room and the LHC itself.

CMS A-Frame for Google Cardboard (Image credit -- Tom McCauley; original photograph – Max Brice/CERN)

A-Frame provided nice boilerplate code so most of the work was in editing images. So far, so good, I think. And here's the source code, if you want to poke around: https://github.com/tpmccauley/cms-aframe. I’m looking forward to doing more with WebVR.

P.S.: Of course, you can visit protoDUNE as well! https://tpmccauley.github.io/protodune-aframe/


CMS cavern images: http://cds.cern.ch/record/2252595
LHC tunnel images: http://cds.cern.ch/record/2221111
CMS control room images: http://cds.cern.ch/record/1444191

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

You are here