Hacker News Reader

Comment by SeasonalEnnui | Hacker News Reader

What's the best way to get all those points from a backend into the frontend webgpu compute shader?

There doesn't seem to be a communication mechanism that has minimal memcopy or no serialization/deserialization, the security boundary makes this difficult.

I have a backend array of 10M i16 points, I want to get this into the frontend (with scale & offset data provided via side channel to the compute shader).

As it stands, I currently process on the backend and send the frontend a bitmap or simplified SVG. I'm curious to know about the opposite approach.

View on HN

Not sure, but I solved a similar problem many years ago, and ended up concluding it was silly to send all the data to the client when the client didn't have the visual resolution to show it anyway. So I sampled it adaptively client-side by precomputing and storing multiple zoom-levels. That way the client-side chart app would get the points and you could zoom in, but you'd only ever retrieve about 1000-2000 points at the time.

Yeah I agree, I'd like to get an idea of the order-of-magnitude of difference between the two approaches by trying it out but realistically I don't think there's an easy way to get a i16 raw array into the browser runtime with minimal overhead (WebRTC maybe?)

That was also my research group's approach.

I did something similar for syncing 10m particles in a sim for a multiplayer test. The gist is that at a certain scale it is cheaper to send a frame buffer but the scale needs to be massive.

For this, compression/quantize numbers and then pass that directly to the gpu after it comes off the network. Have a compute shader on the gpu decompress before writing to a frame buffer. This is what high performance lidar streaming renderers do as lidar data is packed efficiently for transport.

I'm not so good at English but points are: - Websocket to send raw point data batch by batch - Strip the float value to integer if possible or multiple it before sending if it won't exceed Number.Max_Integer or something alike - The front-end should build wrapper around the received raw data for indexing so that no need to modify the data - There should be drawing/chart libraries handling the rendering quite well with proper data format with batched data

Look up trasnferable objects, it's not new. The fetch api can get you ArrayBuffers that you can shuffle around zero copy, besides to webgl buffers, also to web workers.

But minimizing copying or avoiding format conversions doesn't necessarily get you best performance of course.

I had a look, that certainly looks like part of the solution, now I need to get that array buffer from my backend into the browser runtime transferable object.

That's the fetch api part. https://developer.mozilla.org/en-US/docs/Web/API/Response/ar...

I tried it out, fetching i8 arrays from a localhost server, sending to webgpu and rendering the waveform. Wow, faster than I expected, 2 billion points/sec.

Apache arrow is great here, basically the reason we wrote the initial js tier is for easier shuttling from cloud GPUs & cloud analytics pipelines to webgl in the browser

Reply on news.ycombinator.com