On my (android) phone, performance is best in landscape
-
-
-
The file is actually one wasm binary file, with just "<!--" added to the start, and the javascript bootstrap embedded as constant data
Show this thread -
The graphics and audio are rendered with WebGL(1) shaders. The challenge for me was how to bind all the needed functions while staying "in budget" (<4KB) but still with broad compatibility
Show this thread -
Each of the 4096 rings is a quad instance, positioned in 3D space by the vertex shader. Then in the fragment shader, a local single torus distance field is ray marched for a few steps. Depth testing is on, and pixels that don't hit a surface are discarded.
Show this thread -
The audio ("music") is also rendered in a fragment shader, with one pixel per sample, using additive synthesis with about 500 sin waves for left and right channels. Output float value is coded into the 4x8bit RGBA and cast back to float32 on host side, then into a WebAudio buffer
Show this thread -
The version of WebAssembly widely available today in most browsers is limited to being able to call a list of javascript functions you give it at load time, with only numbers as parameters & returns - it cannot call arbitrary Web functions (such as WebGL or WebAudio) directly
Show this thread -
To avoid needing JS binding functions for all the Web APIs, I used the JS function Reflect.ownKeys() on API classes to enumerate all the available functions, and extract the ones I needed dynamically based on a pre-computed (12-bit) hash - then using JS fn apply() to call them
Show this thread -
The (text) shader code is stored with simple dictionary-based compression of keywords. But the rest of the code is not compressed. To keep code density high, I used rust to write a binary code runtime based on 4-bit opcodes and args that manipulate a JS-side stack
Show this thread -
Some annoyances and challenges: - Android chrome much faster fullscreen - Fullscreen & WebAudio only work if the user interacts. So there has to be an initial state that requires a click/press - Safari WebAudio is still behind webkit prefix and has slightly different behaviour
Show this thread
End of conversation
New conversation -
-
-
Works on iOS too, any chance for a post with the setup or compiler configuration ?
-
Yes, I was thinking of writing a blog post soon to explain a bit about how it was put together
- 2 more replies
New conversation -
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.