Rendering tubes with shaders

Hello everyone,

I’m developing an application in which I need to use GPU to quickly draw tub-like pipelines.

The application I am working on is mainly used for the layout of urban underground pipelines. So for me, too many triangles will only cause the decrease of fps. It is very important to draw a line and tube with volume by passing a series of coordinate points through shader.

Thank you!

Similar to the following web sites:

3 Likes

I bet @nasimiasl will enjoy this thread :slight_smile:

2 Likes

@sebavan i am busy :slight_smile: dont show me that kind stuff i cant stop myself
all kidding feel free for make any challange
https://cyos.babylonjs.com/#CXP2ND#8
underprogress

3 Likes

when you say draw it with the shader do you mean you want to raymarch it or you want to use physical geometry like the example and just use a displacement algo on the vx?

1 Like

https://cyos.babylonjs.com/#CXP2ND#10

1 Like

<3 your math is insanely good nasimi, anyways why not just use signed distance functions for tubes and distort the coordinate space?

2 Likes

https://www.babylonjs-playground.com/#LIC6P7#2
Here is a signed distance example, with some glitchy AO and reflections cause I have been lazy and never fixed them…

Honestly, I think the best option would be to just use traditional cylinders with a LOD system and good quadtree optimisations.

2 Likes

Just wondering, what kind of classes did you take/books did you guys read to become so good with shaders? Or is it just practice practice practice…

@nasimiasl
@Pryme8

Cause wowowow

1 Like

http://pryme8.com/procedural-investigations-in-webgl-introduction/
Should get you started with manipulating coordinate space and kinda your mind going tword visualizing spaces, plus get you an environment for working with shaders in BJS set up.

<3 Lots and lots of practice… Im trash at shader btw, I’m just a master tinker @nasimiasl is the real master.

I never really proof read any of my articles so if you see any errors holler~!

4 Likes

https://www.babylonjs-playground.com/#TMVF81

Here would be a more traditional setup which is more or less what I was thinking you would need.
Pretty sure I could get a couple thousand pipes on here before you would notice any performance issues.

https://www.babylonjs-playground.com/#TMVF81#1

4 Likes

so Lovely @Pryme8

i am here for learning and i learn a lot from you and others
@Rah if you wanna do faster you need think like GPU
it is important
thinking per vertex in vertexShader and per Pixel in FragmentShader
and imaging your in that point and have only that data that is all shader secret

3 Likes

Note to self: gotta try that… :slight_smile:

Thank you for your reply. The application I’m working on involves millions of root canal data. I started to try to use LOD to optimize it, but the huge data will only cause the decline of fps, so I can only find out if one draw call can be processed directly through GPU.:smile:

if you explain a bit more may be we can help better
https://www.babylonjs-playground.com/#1QC9DP#179
you can find your solution in
https://doc.babylonjs.com/api/classes/babylon.gpuparticlesystem
too

1 Like

not until we get tessellation shaders I don’t think.

Do you have a sample of the dataset I could see? I’m pretty sure a traditional set up could handle most things you will need to do as long as its set up correctly and optimized. The big fight you will have to do is make sure you keep your draw calls to a minimum.

2 Likes

Thank you very much. I think you are right.

I did not know about GPUParticleSystem, in WebGL 2… nice.