Board index FlightGear Development Canvas

Canvas blending problem

Canvas is FlightGear's new fully scriptable 2D drawing system that will allow you to easily create new instruments, HUDs and even GUI dialogs and custom GUI widgets, without having to write C++ code and without having to rebuild FlightGear.

Canvas blending problem

Postby nepcia » Sun May 14, 2017 3:30 pm

Hi everybody,
I was trying to create new canvas HUD for airplane when I encountered a problem. Basically I tried to do some mask-like operations using blending. Unfortunately I can't make it work at all.

Here's a picture of it:
Image
and code for bottom text and square:
Code: Select all
    var t2 = me.grp.createChild("text")
      .set("blend-source", "one")
      .set("blend-destination", "one")
      .setTranslation(-512, 256)
      .setColor(0, 1, 0, 0.5)
      .setFontSize(72)
      .setText("SAMPLE 2")
      .show();

Code: Select all
    var tmp2 = me.grp.createChild("path")
      .set("blend-source", "one")
      .set("blend-destination", "one")
      .setColor(0, 1, 0, 0.5)
      .setColorFill(0, 1, 0, 0.5)
      .moveTo(0, 200)
      .horiz(128)
      .vert(128)
      .horiz(-128)
      .vert(-128)
      .show();


background is half transparent, red canvas texture. Top figures (text, square and image) have blending set for one-zero and it looks ok - colors are replaced with new ones as they should. Bottom figures have one-one - both text and image colors are mixed ok. The square on the other hand doesn't seem to be affected by any blending operations. So my question is am I missing something or am I doing something wrong?

Cheers
Marcin
nepcia
 
Posts: 11
Joined: Sat May 13, 2017 6:27 pm

Re: Canvas blending problem

Postby Necolatis » Wed Aug 16, 2017 11:48 pm

I also saw these in the API, and must admit I have no clue what they are supposed to do, or what parameter to feed them.

.set("blend-source", "one")
.set("blend-destination", "one")

If you do could you give a hint to how you expect them to work? (like what does "one" refer to?)

I saw all these, no clue what they do or how to use them:

"blend-source"
"blend-destination"
"blend-source-rgb"
"blend-destination-rgb"
"blend-source-alpha"
"blend-destination-alpha"
"Airplane travel is nature's way of making you look like your passport photo."
— Al Gore
User avatar
Necolatis
 
Posts: 2233
Joined: Mon Oct 29, 2012 1:40 am
Location: EKOD
Callsign: Leto
IRC name: Neco
Version: 2020.3.19
OS: Windows 10

Re: Canvas blending problem

Postby Hooray » Thu Aug 17, 2017 9:08 pm

Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: Canvas blending problem

Postby Necolatis » Fri Aug 18, 2017 12:20 am

Could you give some canvas examples?
"Airplane travel is nature's way of making you look like your passport photo."
— Al Gore
User avatar
Necolatis
 
Posts: 2233
Joined: Mon Oct 29, 2012 1:40 am
Location: EKOD
Callsign: Leto
IRC name: Neco
Version: 2020.3.19
OS: Windows 10

Re: Canvas blending problem

Postby nepcia » Sat Aug 19, 2017 11:12 pm

In OpenGL blending is calculated like that:

output_color = (src_param * src_color) + (dst_param * dst_color).

dst_color is color already in buffer and src_color is color of thing being drawn. Params can be one of a few predefined values, most common ones are zero, one, src-alpha and one-minus-src-alpha.


.set("blend-source",) and
.set( "blend-destination",)

are used to set those parameters. You also mentioned blend-*-rgb/alpha, these are used to set color and alpha component independent of each other.

In my example I tried to use blending to draw some things. Top row text, path and image are drawn with params one and zero meaning that coming color is directly written to buffer - it works fine. Second row has one and one selected which should add up colors, what it does, but only for text and image (red + green = yellow, red + black = darker red). So as you can see, paths seem to be locked in one and zero mode or something.

I checked in property tree and those blending parameters are being set to values supplied in nasal.

Necolatis wrote in Fri Aug 18, 2017 12:20 am:Could you give some canvas examples?

Do you mean blend-* examples or something else?
nepcia
 
Posts: 11
Joined: Sat May 13, 2017 6:27 pm

Re: Canvas blending problem

Postby Necolatis » Mon Aug 21, 2017 1:03 am

Thank you, I think I understand now.

Destination is what is already drawn (for example in parent group), source is what the current element is drawing.

I got something to blend with text, but as you, I could not get path to blend.

Also when I tried to blend something, and the source alpha color was 0 it seemed to blend not the underlying geometry, but its bounding boxes. Worked around it by setting alpha to 0.01.
"Airplane travel is nature's way of making you look like your passport photo."
— Al Gore
User avatar
Necolatis
 
Posts: 2233
Joined: Mon Oct 29, 2012 1:40 am
Location: EKOD
Callsign: Leto
IRC name: Neco
Version: 2020.3.19
OS: Windows 10

Re: Canvas blending problem

Postby Thorsten » Mon Aug 21, 2017 6:30 am

Disclaimer: I don't know what the canvas rendering backend really does here.

With blending and alpha, the question of z-ordering always arises (over which the API doesn't seem to give us much control). That would imply that the order in which the canvas elements are specified matters (later elements get drawn 'on top' of former).

In general, I would probably avoid relying on alpha channel operations as much as possible (renderers frequently struggle with getting that okay) and do the color operations yourself - it's much safer.
Thorsten
 
Posts: 12490
Joined: Mon Nov 02, 2009 9:33 am

Re: Canvas blending problem

Postby Necolatis » Mon Aug 21, 2017 10:30 am

Yes you are right, I was wrong about my definition of "whats already drawn" is destination, it is of course that which has lower z-index. Just did tests to confirm that just to be sure.

I also found out that image gets blended fine, so can be used in some cases instead of paths. I also confirmed that image does not have the rotation problem that clip (LOCAL) has, which mean we can with blend not only make our own custom clipping geometry a feature I have been wanting for a long time, but it can even be rotated. Just did a test to confirm it works, and it does. I plan now to use this in the Viggen HUD for the altitude and heading scales, which in the real Viggen would rotate around with the pitch lines (yes, seems like either Swedish pilots could read upside down, or they were encouraged to not fly inverted too much. The latter I think most probable as the aircraft could really only handle 10 seconds of inverted flight anyway.).

Here is what I did (using a HUD altitude scale example):
First I painted an image with transparency so that whats opaque should cover what I don't want to be visible.
Then I set this on the image, and made sure the image has z-index higher than the altitude scale itself, but lower than things like pitch lines which should be visible everywhere.
image.set("blend-source-rgb","zero");
image.set("blend-destination-rgb","one");
image.set("blend-source-alpha", "zero");
image.set("blend-destination-alpha", "one-minus-src-alpha");

Thank you very much nepcia, for explaining this concept.
I will also today or tomorrow update the wiki with these concepts.
Last edited by Necolatis on Tue Aug 22, 2017 3:20 am, edited 1 time in total.
"Airplane travel is nature's way of making you look like your passport photo."
— Al Gore
User avatar
Necolatis
 
Posts: 2233
Joined: Mon Oct 29, 2012 1:40 am
Location: EKOD
Callsign: Leto
IRC name: Neco
Version: 2020.3.19
OS: Windows 10

Re: Canvas blending problem

Postby Necolatis » Tue Aug 22, 2017 12:47 am

Wiki updated.
"Airplane travel is nature's way of making you look like your passport photo."
— Al Gore
User avatar
Necolatis
 
Posts: 2233
Joined: Mon Oct 29, 2012 1:40 am
Location: EKOD
Callsign: Leto
IRC name: Neco
Version: 2020.3.19
OS: Windows 10


Return to Canvas

Who is online

Users browsing this forum: No registered users and 1 guest