Howto:Dynamic Liveries via Canvas: Difference between revisions

From FlightGear wiki
Jump to navigation Jump to search
No edit summary
Line 21: Line 21:




# now, let's add some content to our canvas (this could be really anything)
# animations are handled via timers/listeners (not shown here, hidden in the depths of MapStructure)
var TestMap = root.createChild("map");
var TestMap = root.createChild("map");
TestMap.setController("Aircraft position");
TestMap.setController("Aircraft position");

Revision as of 18:49, 15 September 2014

A screen shot showing the ogel aircraft whose livery is dynamically changed using the Canvas system - in this case, we're simply rendering a MapStructure map onto the face of the pilot using ~10 lines of Nasal/Canvas code.

Objective

Demonstrate how to modify/animate liveries using Nasal/Canvas.

Example

Note  This assumes that you're using the ogel aircraft and that the face texture can be looked up using the name Head.
# create a new window, dimensions are 320 x 160, using the dialog decoration (i.e. titlebar)
var window = canvas.Window.new([320,160],"dialog");

# adding a canvas to the new window and setting up background colors/transparency
var myCanvas = window.createCanvas();

# creating the top-level/root group which will contain all other elements/group
var root = myCanvas.createGroup();

# ogel
myCanvas.addPlacement({"node": "Head"});


# now, let's add some content to our canvas (this could be really anything)
# animations are handled via timers/listeners (not shown here, hidden in the depths of MapStructure)
var TestMap = root.createChild("map");
TestMap.setController("Aircraft position");
TestMap.setRange(25); 
 
TestMap.setTranslation(    myCanvas.get("view[0]")/2,
                           myCanvas.get("view[1]")/2
                        );
var r = func(name,vis=1,zindex=nil) return caller(0)[0];

foreach(var type; [r('APT'), r('VOR') ] )
 TestMap.addLayer(factory: canvas.SymbolLayer, type_arg: type.name, visible: type.vis, priority: type.zindex,);

Background

Cquote1.png Does anyone know if it's possible for FG to work with a texture which consists of two images, and manipulate those images seperately? The application here is airframe dirt - I'm trying to find out if I can have one texture for the aircraft livery, and another for accumulated dirt, which would gradually become less transparent as the airframe hours increase. I am aware of the questionable advisability of using alpha channels excessively in FG, this is just an experiment at the moment.
— Algernon (Mon Sep 01). Two Images to a Texture.
(powered by Instant-Cquotes)
Cquote2.png
Cquote1.png there are probably several ways to do something like this, effects/shaders and even Canvas can be used to combine textures and adjusting alpha via Nasal.

So it's mainly a matter of your exact requirements and what kind of solution you'd prefer.


— Hooray (Mon Sep 01). Re: Two Images to a Texture.
(powered by Instant-Cquotes)
Cquote2.png
Cquote1.png The aircraft gets dirtier with more flights hours. Some code to do this is already in place, and tested on the other dirt application, the APU exhaust blackening on the port wing root. This is a localised and distinctive stain which you see on most Typhoons, so there I have just used a duplicate of the vertices and faces in that locality, placed a little away from the airframe, and used an alpha texture and the material transparency animation. It works a charm, and doesn't seem to have problems with alpha flashing. For the airframe, this probably isn't a viable approach. Part of the textures set for the airframe has a transparent dirt layer which has been tailored to the model to feature streaks from particular vents or around extensions like underwing pylons, so it would be desirable to be able to use this. This additional layer must remain unchanged through livery switches, and then be gradually introduced over time according to the property updated by the same Nasal function that dirties the APU exhaust while it's running (the airframe starts to gets dirtier over 80kts or something for the all over dirt). And if at all possible, it should be Rembrandt compatible.
— Algernon (Wed Sep 03). Re: Two Images to a Texture.
(powered by Instant-Cquotes)
Cquote2.png
Cquote1.png The idea of a canvas airframe texture is a fascinating one, and might be considered almost heretical over at FGUK! ;) But although I'm finding Canvas a bit inaccessible at the moment, if I can achieve combined textures with controllable transparency that works equally well with or without Rembrandt, I'd certainly be interested in using this idea as an entry point.
— Algernon (Wed Sep 03). Re: Two Images to a Texture.
(powered by Instant-Cquotes)
Cquote2.png
Cquote1.png Canvas should work fairly well actually - Tom added support for pretty much "arbitrary" placements, so that canvas textures can be placed anywhere on the aircraft, but also in the scenery (and obviously also in GUI dialogs/windows). We once toyed with the idea of also making effects and shaders available to Canvas - Tom also mentioned this once on the devel list, and we have code doing this for the whole canvas - even though Tom said that it would be better to support this "per-element". Obviously, that would bring a ton of flexibility to Canvas-based efforts like yours.

— Hooray (Wed Sep 03). Re: Two Images to a Texture.
(powered by Instant-Cquotes)
Cquote2.png
Cquote1.png most code snippets recently added to the wiki are about different use-cases - i.e. not specifically about airframe textures/liveries, but then again - the Canvas doesn't care at all where you use a certain texture - in other words, you could prototype the whole thing using a GUI dialog and once you are satisifed with the outcode you would use another placement to show the texture elsewhere. The good thing about your particular use case is that it low-bandwidth, i.e. the texture probably doesn't need to be updated per frame - so performance issues due to Nasal/Canvas overhead should not be a factor.

I think you could certainly prototype the whole thing fairly quickly - and if/once effects and shaders become available to Canvas, your approach could be updated accordingly.


— Hooray (Wed Sep 03). Re: Two Images to a Texture.
(powered by Instant-Cquotes)
Cquote2.png
Cquote1.png For starters, you could look at this: Howto:Using_raster_images_and_nested_canvases#Example:_Showing_a_Splash_Screen


This will open an existing splash screen image and show it in a Canvas dialog.
You can copy/paste the code to load a few different images, to learn more about Canvas image handling, see: Canvas_Image

Note that you can also use/apply sub-textures and overlay/transform those arbitrarily - i.e. a lot of fancy stuff without having to know anything about effects or shaders  :)

You can also overlay individual images using the "z-index" attribute: Canvas_Element#z-index
And then, you can basically do pretty much anything using the core Nasal APIs documented at: Canvas_Nasal_API
To adjust transparency, you'll want to use the alpha channel.

To animate the livery/texture, you'd basically use a timer/listener to change the texture's canvas property tree - i.e. by hiding/showing some sub-texture, or transforming groups/elements.


— Hooray (Wed Sep 03). Re: Two Images to a Texture.
(powered by Instant-Cquotes)
Cquote2.png
Cquote1.png the whole method came up as an idea - this isn't currently being used anywhere as far as I know. But it would seem that we're mainly missing people who want to experiment a bit.

Canvas was never designed for creating/modifying "liveries" obviously - but canvas is very good at one thing: creating/modifying arbitrary textures at run-time and adjusting pretty much arbitrary parameters by setting a few properties.

Thus, I'd consider Canvas more like a "toolbox" whose tools may not be directly designed for this particular purpose, but which are sufficiently generic and which can still be used "creatively" - e.g. there are some things that are only possible per-canvas, and not per "element" (group, image, paths, text, map) - in such cases, you typically need to use a workaround by using multiple canvas and referencing them via the canvas:/// markup as another raster image. We used this method a few times to implement "workarounds" - so in general, the implementation is pretty generic and even "recursive".

We don't currently have any support for effects/shaders in 3.2 (or git) - but whenever you add a canvas-based texture to any of your models, you're adding a layer of indirection - so while some static textures may not be easily changed at run-time in some C++ subsystems, Canvas is all about managing dynamic textures - which in turn may consist of static textures (or variations of those).


— Hooray (Wed Sep 03). Re: Two Images to a Texture.
(powered by Instant-Cquotes)
Cquote2.png


Cquote1.png I don't know if we have placement-related docs anywhere, but you could take a look at any aircraft using a dynamic Canvas-based texture, the c172p-canvas should be a fairly lighweight example compared to the 777/747 probably
— Hooray (Wed Sep 03). Re: Two Images to a Texture.
(powered by Instant-Cquotes)
Cquote2.png
Cquote1.png I guess with some more feedback/brainstorming, we can probably explore and see what's possible already, and what might be missing to support this particular "livery" use-case in the most generic fashion. Like I said, support for shaders/effects is relatively straightforward to add - Tom and I both have experimental code doing this kind of thing (per canvas only here) -and this would be useful for other purposes, too (think FLIR/night vision support etc).
— Hooray (Wed Sep 03). Re: Two Images to a Texture.
(powered by Instant-Cquotes)
Cquote2.png