How to Draw Lines with Shaders?

References:

Support:

Feel free to use this video to make highlights and upload them to YouTube (also please put the link to this channel in the description)

[matthewgiallourakis]

21:10 Tsoding accidentally opens a portal to hell.

[theRPGmaster]

Both entertaining and informative, very helpful! I also like how you explained the math, please make more videos like this one.

[calinradu]

This is a very useful video, thank you! <3

[alexnovikov]

Definitly you have a talent to explain the things. Thank you very much!

[zerohidz]

Very good explanation you've done there sir, thank you very much sir

[SebastianSipos]

"you can control it, muhahahha"

Tsoding while discovering a death ray

[AinurEru]

Noice video! BTW, you could also do cross() instead of dot() to get ||A|||B||sin(angle), which is already closer to what you're after. May not even need to bother with a P4 that way.

[grtglc]

I found you video very usefull, but if you have a do draw lines form vertex shader? how can I have the coodinates (in fragment shader) in order to draw a different line width?

[Cieric]

I wrote this in a text editor so I hope it's readable once in a youtube comment.

Well I was just browsing around and I came across your video, and I would like to point out somethings to help people if they come across your video. First of all while your function does work for finding the distance to the line it is not the most optimal. When it comes to a small demo like this one it of course doesn't really matter, but as shaders become bigger and more complex the less operations the better. Something like this should work a little better due to less sqrts being computed.

```glsl
#define LINE_THICKNESS 25.0

float pointLineDistance(vec2 a, vec2 b, vec2 p)
{
float lineLength = distance(b, a);
float pProjectedLerp = dot(p - a, b - a) / (lineLength * lineLength);
//uncomment the next line for a line segment
//pProjectedLerp = clamp(pProjectedLerp, 0.0, 1.0);
vec2 pProjected = a + pProjectedLerp * (b - a);
return distance(p, pProjected);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
if(pointLineDistance(iMouse.xy, vec2(50.), fragCoord) < LINE_THICKNESS)
fragColor += vec4(1.0, 0.0, 0.0, 0.0);
}
```

This also avoids processing the final color in another function however there is no reason you couldn't create your own global variable modify that throughout your program and then assign fragColor to it at the end of mainImage. Also the issue with passing fragColor around like you tried earlier is you used `out` which causes the value to get overwritten but not passed in to the function. if you wanted to pass in the variable and recieve the results into the parent scope then you want to use `inout` which is basically pass by reference. The specific reason for it not to be passed in with just `out` is for optimization purposes and allows you to denote to the reader of the function that nothing is actually passed in through that parameter.

[zdspider]

35:53 MSAA is only for *_geometric aliasing._* It does absolutely nothing when you're working on a per-fragment basis. It would only apply it to the edges of a quad, not to the stuff you draw _inside_ the quad, if that makes sense. For AA "inside" the quad, you needed _screen-space partial derivatives_ combined with _smoothstep._
50:11 You should have used the 'inout' qualifier if you wanted a "reference"-like behavior. But you still have to take into account things like scope/lifetime and "where" the variable lives, because it "dies" when it hits the closing bracket of that "line" function. The 'in' qualifier is the same as not adding anything at all, meaning a copy is being made. It's a bit confusing having both 'out' and 'inout', I know. Think of 'out' as a simple 'return' of a copy.

[GertCuykens]

Would you mind making a tutorial in C how to draw a triangle with Vulkan? I can only find C++ examples but not C :)

[aleksanderbaszkiewicz]

That is so fucking interesting. This is so underrated...

[unveil]

You can just use smoothstep. With a bias between 2 points as thickness . ❤nice page i a lot to learn here

[maciej]

how to compile this OpenGL Template on windows i get errors, buu i mange to compile, sometime this exe works some dont, on ubuntu it works but window are ditsorted, ok it work after reset

[hojjat]

Did you do a Vulcan triangle in C? I was hoping to watch it after watching the Rust one. Very curious.

[yanalex]

Ultimately clear explanation, and cool dude )

[David-guhv]

Probably should use the GPU Dot Product command, it's likely much faster.

Though good to learn what's happening under the hood....

[SionGRG]

How is the vertex shader setup for this?

[MetaphoricalResistance]

Tsoding, you definitely watch the Freya Holmer YouTube channel, right?)

[vedicarun]

So no one's gonna talk about that 8.8 gb of p*rn storage at i3bar at right bottom?