Can Grafana run Doom?

Update: Due to popular demand in the past 24 hours since we posted this blog, the Grafana Labs team behind Doomfana has made their code public, and we have updated the info below. Happy demon hunting!

It started as all good projects do … with Rick Astley. 

After seeing the project about how to Rickroll your friends with Grafana — in which a seemingly innocent hyperlink surprises users with the music video for Astley’s classic “Never Gonna Give You Up” rendered with Prometheus and Grafana — a question arose: Can Grafana run Doom?

As the latest company-wide hackathon at Grafana Labs approached in March, the three of us decided why not take on that challenge? We could answer a question that is tied to almost any tech device/platform out there; we would push the time series streaming to the limit; and we can also try live streaming data sources.

Now, on the 25th anniversary of the Doom 64 release, we’re excited to say that not only can Grafana query, visualize, alert on, and understand your data no matter where it’s stored. Using time series panels and the Grafana Live streaming feature, we’re proud to announce that Grafana can also run Doom!

If you want to give it a try, you can enjoy “Doomfana” in full resolution or half resolution. You can also check out the code in our Github repo.

Meet the Doom players

Name Bogdan Matei
Title Software Engineer, Cloud Engineering
Location Romania
Hackathon weapon of choice C-hainsaw — handles everything on his own

Name Kostas Pelelis
Title Software Engineer, Cloud Engineering
Location Greece
Hackathon weapon of choice WebRockets - WebSockets that produce fireworks

Name Domas Lapinskas
Title Software Engineer, Cloud Engineering
Location Lithuania
Hackathon weapon of choice BSG 9000 aka “Big Streaming Gun” — one shot those monsters metrics

MAP03: Main engineering

For running Doom, we had two possibilities: Either run it server side and send the data through WebSockets, or use Doom WASM to run Doom in the browser and fetch the data from it. Here were the pros and cons for both options. 

WebSockets

• This implementation required a lot of C code so that the frames could be safely transported to WebSocket clients. With some optimizations, we could stream the game in 640x400 @ 35 fps.
• Exporting game stats from Prometheus would require an HTTP exporter in C, which would be troublesome.

WebAssembly 

• In this option, we compile Doom to WebAssembly (WASM) via Emscripten, paint everything into a canvas element using WebGL, capture the output pixel by pixel, and expose it as metrics.
• Using SDL C-library to capture the output instead of canvas resulted in out of memory since WASM has some serious memory constraints. 
• In order to expose the health info and others, a special hook was added to Doom so it calls a JS function that receives the data and exposes it as metrics.

In the end, we decided to go the WebAssembly route.

MAP08: Final output

You can now try “Doomfana” at full resolution or half resolution. In the half resolution mode (100x160) alone, there are 256 active time series (one per color) and 16k data points rendered at ~30 frames per second. 

Above: Doom is running inside Grafana’s main graph visualization, using 256 active time series and streaming data visualized as dots.

In running this project, we learned some great tips to optimize live streaming time series panel performance in Grafana:

• Keep the list of fields constant; only update. Mutating fields only causes expensive configuration updates.
• When assembling data frames, initializing a fixed length array and then assigning items by index is faster than using Array.push.
• Configure explicit min and max Y-axis values instead of letting Grafana decide them. This is one of the performance improvements we found during the hackathon. 
• Push new frames on window.requestAnimationsFrame tick.
• If using Chrome, make sure “Canvas 2d out of process rasterization” is enabled. See chrome://gpu

And the mission is still not done! There are a lot of improvements that we want to implement: bring all the Doom stats to Grafana panels, improve the frame rate, fix some minor graphic glitches, use the new heatmap panel as an alternative to the time series panel, and more.

We have already considered building more starts, a recording feature, and other cool capabilities into Doomfana; and the recent Grafana Mimir news will only help us achieve that.

MAP27: Playground

The Grafana Labs hackathon itself was the best part of this project. It allowed us to focus on something that was not necessarily work-related, but we found a couple of improvements that can be implemented in Grafana, we had a lot of fun, and we tried technologies that we don’t actively use. For the record, Grafana’s live streaming feature is awesome!

We’ve seen a lot of reactions that made us smile since we shared our Doomfana project, but the one that made us feel great appeared during a presentation when someone from another team commented: “This is a true hackathon project." 

If you want to play with cool technology, have some fun while doing it, and participate in Grafana Labs’ hackathons, we’re hiring! Find out how you can become an official Grafanista by visiting our careers page.