Framebuffer and Audio WASM demos

Showcase
1

zig-wasm-audio-framebuffer is a set of minimalist examples showing how to render pixels and audio samples via WASM in the browser.

From the school of “Give me a damn framebuffer pointer and I’ll manage the rest!”

I wanted to build some simple games for the web and was lost and confused looking at Emscripten and WebGL based game engines. There are some samples in pure Zig as well as ports of a some C games and libs.

Recently updated for 0.13.0, added a NES emulator, setup github pages for demos.

8 Likes
2

Super cool project! How performant is this compared to rendering directly from Javascript?

3

I don’t have any numbers but some of the demos have FPS counters and comfortably get 60fps. The screen update is driven by the browser calling Window: requestAnimationFrame() method - Web APIs | MDN

4

Very impressive. Love to see stuff like this using Zig.

The only issue I found was that the music in DOOM was completely borked on my M1 Mac

5

Interesting. It’s ok here on my M1+M3 Macs in Safari and Firefox. Would you mind raising a github issue with a description and the info from https://www.whatsmybrowser.org/

6

This is very cool!

Same here, in the sense that the music played at 2x or 3x the normal speed :sweat_smile:

FWIW, Firefox 132.0.1 on Linux.

1 Like
7

Weird. In order to cope with Doom’s preferred audio frequency I request WebAudio runs at 22050Hz. I wonder if it’s not allowing that on some browsers.

If possible, can you run doom with the Javascript console enabled.

Do you see these two lines in the debug?
The first is it requesting 22050, the second is it reading the current frequency and using it to configure the music synth.

Configuring AudioContext sampleRate =  22050
...
Setting synth sampleRate =  22050

Thanks

8

I do see those two lines, and in fact trying it out again now I can report that music speed is back to normal (or, if anything, a tad slower than I remembered). Not sure what caused that. :thinking:

1 Like
9

I was interested to see how hard it would be to get a nice looking terminal emulator via WASM, so here’s a port of libvterm rendering via truetype sending pixels to a browser canvas.

And, because I didn’t know what else to do with that - it plays an Asciinema recording :grinning:

https://ringtailsoftware.github.io/zig-wasm-audio-framebuffer/terminal.html