Some questions about some OpenGL concepts and the arrow shaders from glumpy

[Lucas van Dijk]

Hi all,

Could anyone enlighten me a bit on some OpenGL concepts, and the arrow shaders? I'll take the curved arrows as an example:
https://github.com/glumpy/glumpy/blob/master/glumpy/library/arrows/curved.glsl
Main vertex shader: https://github.com/glumpy/glumpy/blob/master/glumpy/library/arrows/arrow.vert
Fragment shader: https://github.com/glumpy/glumpy/blob/master/glumpy/library/arrows/arrow.frag

This is how I understand it currently:

1. You pass positions of the arrows as VBO to the vertex shader
2. Arrows are drawn with GL points mode
3. Only one vertex is given per arrow, so some special handling for colouring the arrow is needed
4. That's why gl_PointSize is increased. But how does this work exactly? Do you get a X by X square which represents a point, and the individual pixels are coloured in by the fragment shader?
5. Why the sqrt(2) size + 2 (linewidth + 1.5 * antialias) for point size?

vec2 start = -vec2(body/2.0, 0.0);
vec2 end = +vec2(body/2.0, 0.0);
float height = 0.5;

6. Define a start and end point of the arrow. I'm not sure how this works, as it's sort of fixed. Arrow is by default oriented in the X direction?

vec2 p1 = end - head*vec2(+1.0,+height);
vec2 p2 = end - head*vec2(+1.0,-height);
vec2 p3 = end;

// Head : 3 circles
vec2 c1 = circle_from_2_points(p1, p3, 1.25*body).zw;
float d1 = length(texcoord - c1) - 1.25*body;
vec2 c2 = circle_from_2_points(p2, p3, 1.25*body).xy;
float d2 = length(texcoord - c2) - 1.25*body;
vec2 c3 = circle_from_2_points(p1, p2, max(body-head, 1.0*body)).xy;
float d3 = length(texcoord - c3) - max(body-head, 1.0*body);

7. First define some points: two points on the side of the arrow head, and one on the tip of the arrow.
8. Second, define some circles. Why and what is the zw property used for c1?
9. For c3: max(body-head, 1.0*body), I don't understand this one, why multiply body with 1.0? Won't this always return body?
10. What is the role of texcoord? It guess it contains the current pixel coordinates in the current point. And a rotation transform is applied to it.
11. And then we compute some distance to something. This distance is then used to determine the color for the current pixel.

Thanks in advance!

[Eric Larson]

I can't answer these questions directly, but I can tell you how I'd try to answer them. It might be worth looking at the existing shaders for the Markers visual. They are presumably simpler, so you can work up from how circles and squares are drawn to more complex shapes. That will allow you to get a hold on how the calculations work. I did this at one point when I had to make some adjustments, but I've forgotten...

I can tell you that .xy and .zw will pull out the first two and last two components of a given `vec4` variable, so the `circle_from_2_points` function must return a vec4.

You can also come to understand how this more complex code works by changing bits of the computation, and seeing how it affects the results.

And hopefully in the meantime Nico can chime in with some explanations :)

Eric

--
You received this message because you are subscribed to the Google Groups "vispy-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vispy-dev+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/vispy-dev/cb1646ac-7f18-4b2f-85ce-ae916eb0a6cb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Cyrille Rossant]

Have you seen this tutorial:
http://www.labri.fr/perso/nrougier/teaching/opengl/ ?
some further tutorials:
http://ipython-books.github.io/featured-06/
http://cyrille.rossant.net/shaders-opengl/

finally Nicolas can give you references to papers that explain how the
GLSL work for markers (or search through Nicolas' publications)

[Lucas van Dijk]

Thanks all,

I've read most tutorials on the basics of OpenGL, but there's still a gap between writing a basic shader and understanding the all mathematical principles and their OpenGL translation behind drawing those shapes. Taking a look at the marker shaders is indeed a good idea, hopefully will give some more insight. I've also read the paper from Nicolas, and it did explain some concepts (for example the min and max usage for union etc.), but for me most of it is still a bit like "hey here's the shader code for a marker", without an explanation for people without a computer graphics background :)

I'll continue playing with it for now!

--
Lucas van Dijk

To view this discussion on the web visit https://groups.google.com/d/msgid/vispy-dev/CA%2B-1RQR2yOreOrC9efTbKuc9-EjfAQZD7ZhqUP_o85hVsUe1Kw%40mail.gmail.com.

[Eric Larson]

Lucas, as you go through this, please document the steps you used to come to understand the code. You can put it up in your blog, then eventually we can clean it up and put it in the code as comments or in the Wiki. It would be nice to lower the threshold for future people as well.

Eric

To view this discussion on the web visit https://groups.google.com/d/msgid/vispy-dev/CACTaJ2d_4TkaB1AXnt5%2BVQ4oB-8dVj0ULwwe%2B1yb0t3oiqsgFA%40mail.gmail.com.

[Lucas van Dijk]

Yes will do!

It's already starting to look like something (see attachment)!

--
Lucas van Dijk

To view this discussion on the web visit https://groups.google.com/d/msgid/vispy-dev/CAGu2niWE3c57ZG58N1cbu3xvA3mNF1xdH4Szg2vEwFSWbFhw%3DQ%40mail.gmail.com.

[Eric Larson]

Awesome! Looks like the shader code must make some sense to you :)

Eric

To view this discussion on the web visit https://groups.google.com/d/msgid/vispy-dev/CACTaJ2d%3D5XEtLux2-bXh%2BM%2B6Lbr21E25oZvrR%3DMMj6xM9j0_uA%40mail.gmail.com.

[Lucas van Dijk]

Hi all,

Finished my exam this Tuesday, and today was all about experimenting and getting more insight in the arrow shaders. And today was quite productive and a lot has become clearer to me. The result can be seen in the attachment (nicely looking curved arrows).

But, I'm not completely satisfied: I'm not too happy about how the arrow head scales with its given size. As you can see in the attachment, the arrow gets less curved when it's bigger. The arrow in the top has size 30.0, the arrow in the middle has size 5.0. And there a still come constants I do not fully understand.

So, I thought about writing a large blog post tomorrow, where I'll explain the basics of these OpenGL point sprites and the mathematics behind the curved arrows. This will involve a lot of pictures and visualizations, so It will probably be a whole day task. Is that ok with you guys?

Regards,

--
Lucas van Dijk

To view this discussion on the web visit https://groups.google.com/d/msgid/vispy-dev/CAGu2niXEQigsuTjiDkMWxapz6KFmr3Lix%3D_bLbHRLJz-zAiCEA%40mail.gmail.com.

[Lucas van Dijk]

Whoop forgot attachment

--
Lucas van Dijk

[Cyrille Rossant]

>> So, I thought about writing a large blog post tomorrow, where I'll explain
>> the basics of these OpenGL point sprites and the mathematics behind the
>> curved arrows. This will involve a lot of pictures and visualizations, so It
>> will probably be a whole day task. Is that ok with you guys?

excellent idea! go for it :)

[Lucas van Dijk]

Hi all!

Another week! Yesterday I worked on study assignments, and today I want to work on removing the arrow body from some other arrow head shapes.

The tutorial is not completely finished yet, but it's almost done. It's getting quite long, and drawing a lot of geometry takes quite some time. I've attached the current draft as PDF, if anyone wants to do a quick review, feel free!

For the rest of the week: I've got a deadline for a research proposal June, 19th, so I'll need to work on that a few days.
- Today: Arrow heads
- Tommorow: Arrow heads
- Thursday: Studying
- Friday: Studying
- Saturday: Bachelorparty of a friend of mine
- Sunday: Arrow heads

I hope to finish most arrow head work this week, so I can start with the network API next week. Also after this week, there's only one study assignment left which enables me to put a little more time in the GSoC!

Regards,

Op woensdag 10 juni 2015 21:12:24 UTC+2 schreef Cyrille Rossant:

[Cyrille Rossant]

Hi Lucas,
it's looking great so far, and very useful for beginners! Would you
mind putting the sources somewhere on GitHub (I suppose it's in
LateX?)
Thanks,
Cyrille

> --
> You received this message because you are subscribed to the Google Groups
> "vispy-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to vispy-dev+...@googlegroups.com.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/vispy-dev/3ca8edbc-c9d1-461a-a549-3490e5a25211%40googlegroups.com.

[Lucas van Dijk]

It's actually written in Pandoc (Markdown with some extensions), and you can find it here: https://github.com/sh4wn/return1-content/tree/master/blogs/opengl-point-sprites

Regards,

Lucas

--
Lucas van Dijk

To view this discussion on the web visit https://groups.google.com/d/msgid/vispy-dev/CA%2B-1RQSsNTdiQcn6PxqyEiL-BGJ3Q8caf%3DmLY8Kbv6LMtfDJCA%40mail.gmail.com.

[Eric Larson]

Agreed, this is great. Eventually we should find a way to integrate it with our website, maybe after the arrows and network viz classes are complete. It would useful for us to help new contributors, and also useful for you moving forward since you can point people to a tutorial you created on the vispy site.

Eric

To view this discussion on the web visit https://groups.google.com/d/msgid/vispy-dev/CACTaJ2cnaM-DWZ%3DpbUn-ibwfo%3Di8_BGwjw-4a0N2-qHui%3D2JTg%40mail.gmail.com.

[Lucas van Dijk]

The nice thing about Pandoc is that I can convert my Pandoc document to almost any other document format (reStructuredText, Github flavoured markdown), so it should be not that hard integrating it with the Sphinx documentation or a wiki-page on Github!

--
Lucas van Dijk

To view this discussion on the web visit https://groups.google.com/d/msgid/vispy-dev/CAGu2niXRsLddnN-0zVbaq%3D0vjvOz4CfPgf%2BDi5%2BWLwnSacxP3w%40mail.gmail.com.