Browsertech Digest: Womp and the rise of pixel-streamed UI

Welcome to another Browsertech Digest! This is issue #3.

Womp

Last week, the browser-based 3D editor Womp launched.

Womp is notable for a couple of reasons.

For one, it’s not a traditional mesh-based renderer. Most real-time 3D software (whether it’s CAD tools or games) works by dividing objects into a mesh of triangles. Womp instead uses signed-distance functions (SDFs) to represent the scene. This gives everything a playful, claymation-esque feel.

The other thing I find interesting about Womp is that it uses a hybrid pixel-streamed approach to rendering. The scene itself is rendered remotely on Womp’s servers (presumably on a nice bank of GPUs) and streamed over WebRTC into the browser. The pixel-streamed scene is then composited into a browser-rendered UI. This browser-rendered UI includes all of the 2D chrome around the render, but also some 3D elements, like the gizmo (apparently that’s the technical term) shown in the screenshot above, which is rendered browser-side using Three.js.

Womp founder Gabriela Trueba gave a talk on Womp at Revision, which is available on YouTube. Here’s a quick demo of Womp I recorded a couple months back. On the topic of SDFs, I have to mention this video by Inigo Quilez which always blows my mind.

The Rise of Pixel Streaming

Womp one of only a handful of examples we’ve seen of using WebRTC to stream a UI into the browser. Other examples include Meta’s cloud gaming (h/t Chase) and Google’s Stadia (RIP). Steve Ruiz of tldraw solicited other examples in a twitter thread.

As applications try to do more work in the browser, I expect to see more of this, particularly in visually-intensive applications: data visualization, geospatial, and 3D tools. There are at least two pre-launch video editors on the way based on pixel streaming, Sequence and Ozone.

Of course, I’m biased here. We’re working on tech that allows applications to integrate pixel streaming into browser-based apps. Currently, building application software that incorporates pixel streaming involves building a lot of custom infrastructure. I’m excited to see what’s possible when it’s as easy as it is to incorporate a library like Three.js today.

Bezel

Womp wasn’t the only browser-based 3D editor to launch this week, another was Bezel. Unlike Womp, Bezel uses browser-side WebGL rendering via Three.js.

The engineers behind Bezel have been working hard to translate the fluidity of Figma-style realtime collaboration into 3D. Their projection-based approach to cursor position is particularly neat.

Other stuff

Docker in the browser using x86 to WebAssembly transpilation. Not for production, but it goes to show how far the browser has come.

Until next time,

Paul