Point Five

An interactive, browser based event display for the CMS experiment at the LHC, built for education and public outreach.

Point Five renders the real CMS detector geometry in 3D, loads real proton proton collision events from the CERN Open Data Portal, and animates what happened in them: tracks curving in the 3.8 T solenoid field, individual ECAL crystals and HCAL towers lighting up where energy was deposited, jets spraying out of the interaction point, and muons punching through everything to the outermost chambers.

The name comes from LHC Point 5 near Cessy in France, the interaction region where the CMS detector sits about 100 m underground.

Live: cms.sponde.de

Event Mode, run 199409 event 402443918: a ZZ to four leptons candidate. The shells are drawn transparent, the four muons run out through the chambers, and hovering a track reads out its momentum.

---

What this is, and what it is not

This project has one goal: to be a visually compelling and, to the best of our knowledge and ability, a model correct tool for education and public outreach. It is the same intent as our AEGIS project. Every number that can come from the data does come from the data, every simplification is deliberate, and every simplification is written down.

Point Five is not an analysis tool, and it is not affiliated with, endorsed by, or reviewed by the CMS Collaboration or CERN. It is an independent visualisation built on their public open data.

Where the display departs from reality it does so for legibility, and every departure is documented in docs/physics-fidelity.md. Read it before you use Point Five to teach anything. The three most important caveats are:

1. The animation is not a clock. A real particle crosses CMS in about 25 nanoseconds. The staged sequence exists so a viewer can follow one object at a time.
2. The default view is a curated subset. A real 8 TeV collision produces hundreds of charged particles. Switch on the Tracks layer to see the actual crowd, and the Vertices layer to see the pile up the highlighted objects are picked out of.
3. The magnetic field is treated as uniform at 3.8 T everywhere. That is true inside the solenoid coil, and wrong in the return yoke where the real field reverses.

---

Features

• Real CMS detector geometry in eight layers, from the tracker out to the muon chambers, plus the endcaps and the forward hadron calorimeter
• Per layer display modes: solid, glass, hidden, with animated transitions, and a one click "Event Mode" that glasses everything at once, which is how the app opens so that a first time visitor sees the collision rather than eight shells
• Nine open datasets covering Higgs to four lepton candidates, dimuon and dielectron events, jet and HT events, and missing energy events
• Physically computed helical trajectories in the solenoid field, with the correct charge dependent bending sense
• Individual ECAL crystals and HCAL towers drawn at their real positions, with their real trapezoidal shapes, taken directly from the event data
• Photons drawn as dashed lines, since a neutral particle leaves no track and the path is an inference rather than a measurement
• Optional layers for every reconstructed charged track and for the primary vertices, which is what pile up looks like
• Every object drawn from the production point the data carries: the muon reference point, the electron and photon positions, and the reconstructed primary vertex for jets and missing energy
• Overlap removal between electrons, photons and jets, so one particle is drawn once rather than three times
• Hover any track, jet, or MET arrow for its type, transverse momentum, pseudorapidity, and azimuth
• Event statistics panel with run and event number, beam energy read from the run, a mass and charge gated process label, dilepton masses, the Z1, Z2 and four lepton masses under the CMS pairing convention, and HT, plus click to isolate any object type
• Scrubbable animation timeline, replay, half speed, and five preset camera views
• Particle guide panel explaining what each colour means
• Panels roll away into a handle at the screen edge, by click or by drag
• The wait for the first frame is spent on the injector chain the protons take to get here: source and RFQ, LINAC 2, PS Booster, PS, SPS, LHC, ending on two counter-rotating beams at Point 5 and a countdown into the collision

Controls

Input	Action
Drag	Orbit the camera
Shift and scroll	Zoom
Pinch	Zoom, on a touch screen
Scroll	Scrub the event animation
Space	Replay the event from the start
S	Toggle half speed replay
B	Toggle the static beam axis
I	Particle guide
E	Event statistics
1 2 3 4	Camera presets: perspective, beam axis, side, top down
5	Fly into the interaction region, where the vertices resolve
Handle on top of a panel	Click to roll the panel away, or drag it down. Click or drag up to bring it back

Quick start

Requirements

• Node.js 18 or newer
• About 190 MB of free disk for the assets, which are not in this repository
• A WebGL 2 capable browser

1. Install

git clone https://github.com/Kracht/point-five.git
cd point-five
npm install

2. Fetch the event data

./scripts/fetch-events.sh

This downloads roughly 40 MB of .ig files from the CERN Open Data Portal into public/events/. They are public domain, see "Event data" below.

3. Add the detector geometry

The geometry is not redistributed with this repository. Download "CERN's CMS Detector" by Alex Iribarren from Printables, put these eight STL files into a geometry/ directory at the repository root, and convert them:

Barrel_1_Muons.stl     Barrel_4_HCAL.stl     Endcap_Full.stl
Barrel_2_Yoke.stl      Barrel_5_ECAL.stl     HF_Full.stl
Barrel_3_Solenoid.stl  Barrel_6_Tracker.stl

npm run build:geometry

This writes the eight meshes into public/models/ as 5.9 MB of compressed glTF, with the triangle count unchanged. Details and the fallback path for loading raw STL instead are in public/models/README.md.

4. Run

npm run dev      # development server on http://localhost:5173
npm run build    # production build into dist/
npm run preview  # serve the production build locally
npm run check    # run the physics sanity checks over the local event files

npm run check exercises the invariant mass, four lepton pairing, beam energy, event labelling, overlap removal and track geometry code against every event file present, and asserts the invariants that must hold. Run it after touching src/selection.js, helixPoints in src/particles.js, or anything in src/ui.js below the "Physics helpers" heading.

---

Architecture

index.html          Injector chain intro, base styles, module entry point
src/
  main.js           Renderer, scene, camera, controls, bloom, animation loop,
                    raycast hover, camera presets, beam and interaction point
  detector.js       glTF and STL loading, component registry, mesh placement
  events.js         .ig archive parsing into physics collections
  selection.js      Display thresholds and reconstruction overlap removal
  particles.js      Tracks, jets, MET, ECAL and HCAL geometry and shaders
  ui.js             Layer panel, dataset selectors, particle guide, statistics
scripts/
  fetch-events.sh   Downloads the open data event files
  check-physics.mjs Asserts the kinematics, selection and track geometry
                    against every local event file
  optimize-geometry.mjs  Converts the source STLs to compressed glTF
docs/
  physics-fidelity.md   What is real, what is approximated, what is wrong

Rendering. three.js with an EffectComposer chain of RenderPass, UnrealBloomPass at threshold 0.85, and OutputPass. The high bloom threshold is deliberate: a lower one blooms the solid detector into a white blob. Tracks are Line2 instances rather than tubes, because additive blended tube geometry changes brightness as the camera rotates.

Coordinate system. CMS convention. z along the beam, y up, field along +z. The scene unit is one millimetre of the printed model at 1:100 scale, so MODEL_SCALE = 10 model millimetres per real metre. The scale holds against the mesh bounding boxes to a few percent across all sub detectors.

Trajectories. Helix radius R = pT / (0.3 B) in metres, with z = sinh(eta) * R * alpha. Positive charges curve toward -y when moving along +x, which is the correct Lorentz sense for a field along +z.

Event files. A .ig file is a ZIP archive with one JSON document per event under Events/. Each document holds a Types map describing the field layout of each collection and a Collections map holding the rows. Bare nan tokens are replaced with null before parsing, since they are not valid JSON.

---

Data and licensing

Point Five combines three bodies of work with three different licences. Read this section before you redeploy or reuse anything.

Source code

The code in src/, scripts/, and index.html is released under the MIT License.

Detector geometry (CC BY-NC-SA 4.0)

The eight STL meshes come from "CERN's CMS Detector" by Alex Iribarren (CERN), published on Printables under CC BY-NC-SA 4.0.

That model is itself derived from the SketchUpCMS project by Tai Sakuma and Thomas McCauley, released under the Apache License 2.0, which generates its geometry from the CMS Detector Description, the same authoritative geometry used in CMS reconstruction and simulation. The 3D printable adaptation was originally modelled by James Wetzel, W. G. Wetzel, and Nick Arevalo, with a grant from Don Lincoln.

This has practical consequences for anyone deploying Point Five:

• Attribution is required. Any deployment must credit Alex Iribarren and the upstream authors. Point Five does this in the in application particle guide panel and in this README.
• Non commercial only. You may not deploy this geometry, and therefore this application as a whole, in a commercial context.
• Share alike. Adaptations of the geometry must carry the same licence.

The meshes are not committed to this repository. Beyond the licence, one of them exceeds GitHub's 100 MB per file limit.

Event data (CC0 1.0)

All collision events come from the CERN Open Data Portal and are dedicated to the public domain under CC0 1.0 Universal.

Dataset in Point Five	Open data record	Source dataset
H to 4 leptons, 120 to 130 GeV	record 5200	Higgs candidate selection, 2011 and 2012
H to 4 leptons, 2011A	record 5200	Higgs candidate selection
H to 4 leptons, 2012B	record 5200	Higgs candidate selection
H to 4 leptons, 2012C-1 and 2012C-2	record 5200	Higgs candidate selection
Double Muon 2012B	record 7104	/DoubleMuParked/Run2012B-22Jan2013-v1/AOD
Double Electron 2012B	record 7103	/DoubleElectron/Run2012B-22Jan2013-v1/AOD
Jet and HT 2012B	record 7110	/JetHT/Run2012B-22Jan2013-v1/AOD
MET 2012B	record 7112	/MET/Run2012B-22Jan2013-v1/AOD

Citation for the Higgs candidate events:

CMS Collaboration (2019). Higgs candidate events from CMS 2011 and 2012 open data release selected in the Higgs-to-four-lepton analysis example. CERN Open Data Portal. DOI 10.7483/OPENDATA.CMS.YGG7.333M

As required by the portal:

Neither the experiment(s) (CMS) nor CERN endorse any works, scientific or otherwise, produced using these data.

Runtime dependencies

Package	Version	Licence
three.js	0.170	MIT
JSZip	3.10	MIT or GPL-3.0-or-later
GSAP	3.15	GSAP standard "no charge" licence
Vite	5.4	MIT

Note that the GSAP standard licence is free of charge for this kind of use, but it is a proprietary licence rather than an OSI approved open source one. It prohibits use inside tools that let end users build visual animations without code. Point Five is not such a tool, so the use here is within terms.

---

Deploying

npm run build writes a self contained dist/. Serve it as static files. public/.htaccess is copied into dist/ by the build and configures Apache for the two things that matter:

• Compress .glb as well as the text assets. The meshes are already meshopt compressed, but gzip still takes them from 6.2 MB to 2.2 MB, which is most of the first visit. With the bundle and the first event file, a first visit is about 3.6 MB compressed. The .ig event files are excluded on purpose: they are ZIP archives, so the bytes are already deflated.
• Cache assets/, models/ and events/. The bundle filenames are content hashed and are pinned for a year; the meshes and event files keep stable names and get a month, so replacing one reaches visitors without a rename.

On a server that is not Apache, reproduce those two rules in its own config; the .htaccess is then inert and can be deleted from the upload.

Only the first event file is fetched on load. The other eight datasets are fetched when a visitor selects them.

Known limitations

• Touch is partial. Orbiting, pinch zoom and the panels work on a phone, and the panels arrive rolled up below 700 px so the detector stays visible. What is missing is the event animation: scrubbing is bound to the wheel event, and replay, the guide, the statistics panel and the camera presets are bound to keys. The event does play once by itself on load.
• No graceful failure if an event file cannot be fetched.
• The geometry is uniformly tessellated. The solenoid carries 2.4 million triangles with an average edge of 0.22 mm for a shape that is a tube. Cheap to ship after compression, but not cheap to draw. Decimation would cut it further at the cost of moving vertices, which is why it is not done.
• The physics carries deliberate approximations, listed in docs/physics-fidelity.md. The largest are a magnetic field treated as uniform everywhere, an animation that is not to time scale, and a default view that shows a curated handful of the objects in an event.

Roadmap

• Optional inner tracker hits, which would show low pT tracks spiralling
• Absolute, logarithmic calorimeter energy scale with a legend
• Touch and mobile controls
• Deterministic, seeded jet spray so an event always redraws identically

Contributing

Issues and pull requests are welcome, in particular corrections to the physics. If you are reporting a fidelity problem, please cite the CMS design value or the data field you are comparing against, and add it to docs/physics-fidelity.md as part of the change.

Please keep in mind that the geometry licence makes this a non commercial project.

Acknowledgments

• The CMS Collaboration and CERN, for releasing the collision data that makes this possible, and for the open data programme in general.
• Alex Iribarren (CERN), for the printable CMS detector model that provides the geometry, and for publishing it openly.
• Tai Sakuma and Thomas McCauley, for SketchUpCMS, the upstream source of that geometry, generated from the authoritative CMS Detector Description.
• James Wetzel, W. G. Wetzel, and Nick Arevalo, who built the original 3D printable adaptation, with a grant from Don Lincoln.
• Thomas McCauley again, for iSpy WebGL, the official CMS browser based event display, and for the .ig file format that Point Five reads. See T. McCauley, A browser-based event display for the CMS Experiment at the LHC using WebGL, J. Phys. Conf. Ser. 898 (2017) 072030.
• The three.js, GSAP, JSZip, and Vite projects.

If you want the official CMS event display rather than this one, use iSpy WebGL or the CERN Open Data event visualiser.

Licence summary

Part	Licence
Source code, build scripts	MIT, see LICENSE
Documentation in docs/ and this README	CC BY 4.0
Detector geometry in public/models/	CC BY-NC-SA 4.0, not redistributed here
Event data in public/events/	CC0 1.0, not redistributed here

Because the detector geometry is non commercial, any deployment of Point Five as a whole is non commercial. See NOTICE.md for the full third party attribution.