Lines in 3d extremely painful #5284
Replies: 6 comments 1 reply
-
Beta Was this translation helpful? Give feedback.
-
|
It depends on what you want the semantics to be. Do you want pixel-thin lines even as they recede into the distance by perspective? Then adjust the vertex position post-projection. There are plenty of examples of line drawing online (Fast Pre-Filtered Lines from GPU Gems 2, Blueprint Rendering by Kubisch) |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for examples, but the problem is when you try to display mesh faces with mesh edges. Three.js examples don't show this poblem because they do not render triangle faces. Then overlap between the two looks not good. Goal: have edge thickness defined with fixed pixel size. In 3d this does work well. Do you recommend to first render the whole buffer to a texture, extract edges, and then change it is thickness? Is thereany examples of how to do this? Everything works well as long as you are in 2d. When you are in 3d, lines becomes affected due to perspectives, objects are partially hidden on top of each other, and many other things. |
Beta Was this translation helpful? Give feedback.
-
|
None of this is unique to WebGPU, and is probably better served as a computer graphics question in general. It's difficult to know exactly what you want. You can use fragment depth output or rasterizer state to bias the line on top of edge faces. All of the same advice I gave before should apply. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, maybe I was not clear with question: I know only two methods for line rendering, one is quad rendering oriented to screen as your references, but you clearly can see that due to mesh edge intersection you never get exact for example 10 px width lines: 
2nd method are rendering lines using cylinders, from far away they look consistent but they do not look good for long infinite lines as they got distorted due to perspective, since they are not fixed pixel width all along the length: 
In 2d or Ortho view lines can be rendered nicely with pipes, but in perspective you always get problems with distortion. What I want to get in perspective view is as constant as this sketch drawing, where all lines are undistorted thickness: 
|
Beta Was this translation helpful? Give feedback.
-
|
See the article attached to https://webgpu.github.io/webgpu-samples/?sample=pristineGrid, that might have some useful tips too. (EDIT: That technique itself not what you want - it's limited to a grid and it doesn't have constant width lines - but it does spend a lot of time on the difficult question of how to antialias.) As magcius says though this doesn't have anything to do with WebGPU, we are just an abstraction over what the GPU can do, but what you're looking for is a graphics technique that would sit on top of WebGPU. |
Beta Was this translation helpful? Give feedback.
-
|
I just moved this to a discussion. I hope that's ok. I think that's where it was meant to be |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I have a question: has anyone successfully implemented lines with thickness in WebGPU under perspective projection?
When using shaders with 3D cylinders to mimic line thickness, there are always issues with perspective and zoom limits.
Is there a better solution?
View Video:
https://youtu.be/91zvWuaOdqc
Source code of the shader:
https://github.com/petrasvestartas/wink/blob/main/src/shader_primitives_cylinder.wgsl
For extremely thin lines if you zoom in very very very closely you will see the radius increased. No matter what I do there this limit to this to transformation matrix. But the worst is that 3d cylinders will always be distorted in perspective view.
Beta Was this translation helpful? Give feedback.
All reactions