search

rreusser / regl-gpu-lines

Pure GPU, instanced, screen-projected lines for regl
https://rreusser.github.io/regl-gpu-lines/
MIT License
172 stars 6 forks source link

Migrating to WebGPU #11

Open mehmetron opened 2 months ago

mehmetron commented 2 months ago

I'm currently working on an implementation of regl-gpu-lines for WebGPU.

regl-gpu-lines was the only thing keeping me from switching to WebGPU, because it's so amazing, but I've decided to bite the bullet and switch to WebGPU.

Right now, I'm working on a WebGPU version of this library. I've read the articles at the bottom of the README a few times over but I'm still struggling to grasp the implementation.

Have you guys thought about doing some sort of write up on how regl-gpu-lines works under the hood?

Thanks!!

rreusser commented 1 month ago

Sorry I missed this; I've been out of the office for the last few weeks. Yes, this is something I'd very much like to accomplish! If I'm being honest, I'm moderately happy with the sophistication with which this library accomplishes its task, but I'm moderately unhappy with how complicated the library ended up, which makes it much harder to extend or translate the code.

The very short, inadequate answer about how it works is that the input data is the same attribute buffer, passed four times with different offsets so that the geometry of a line segment together with the joins at either end can be computed in the vertex shader. For triangulation, each line segment together with two half joins on either end are a single instance. Each instance is rendered as a triangle strip, and the instanced attribute, rather than vector offsets, is an integer index which is translated inside the shader to a particular position on the instance. The debug page has a numbering debug mode which shows instance vertex numbers. When there's a gap in the line, it stretches the half-join all the way around into an end cap. At the end of the day, it's really just fancy connect-the-dots, but I had to try a number of different strategies before figuring out how to number the vertices and use degenerate triangles to avoid problematic corner cases.

Screenshot 2024-05-14 at 10 57 46 AM

Sorry I don't have a better answer than this for now, but putting together a writeup and managing to translate this to WebGPU is definitely something I'd like to accomplish!

mehmetron commented 1 month ago

Thank you for the answer. Right now I'm just running the library locally and poking around at it. It's really comprehensive and educational picking it apart. I'm sure, if I can convert it to raw Webgl, then I can convert it to Webgpu. Although, Webgl global state might be a headache. Gonna try my luck!

Again, thanks for making this open source. It's been really useful and educational along with all your other Observablehq notebooks!