DynamicTexture & opacity animation with context canvas

[Gil]

Hello everyone,

I'm currently doing some tests with the DynamicTexture system that could be used to add a new tutorial.

The final goal is to have one picture on a plane.
When I click on some button I will activate an animation managed by Babylon (if it's possible) so I can fade in and fade out the pictures.
 

I had a first method where I wanted to add a canvas inside the canvas but that didn't work out : http://www.babylonjs-playground.com/#B9HGX0#3

Now I have one texture fading in and fading out automatically : http://www.babylonjs-playground.com/#B9HGX0#5

 

To be continued...

 

[Wingnut]

Hi @Gil!  Umm... is there some reason that you must use image buffers and dynamicTextures?

What-if... you used a StandardMaterial on the plane, set its .diffuseTexture (or perhaps .emissiveTexture) to a BABYLON.Texture?

Then, you animate texture.level or perhaps material.alpha.  Keep reducing texture.level or material.alpha... until it hits 0.  Then change material.diffuseTexture to a new BABYLON.Texture (possibly setting its .level = 0 immediately), and then start animating the level or alpha... increasing it back to 1.0. 

IF using texture.level, it might be wise to set a material.diffuseColor, too, so plane has color when texture.level is low. (fade-down-to-black, fade-up-from-black, et al.)

Would this work?  Or, do you need to (later) do Context2D painting or text... upon the images?  That would be a reason to use image buffers and dynamicTexture, I guess.

Just thinkin'.    Not sure I have any good ideas, yet.  Others may comment soon, now that the warm? weekend is finished. 

Aside:  Here in Michigan U.P., Saturday was wonderful... sunny and 62 f.  Sunday, it was partly-sunny and 34 f, with light snow!  Erf!  Goofy weather.  I saw my snowblower look-at my lawnmower, and shrug, with a puzzled expression.  heh

[Gil]

@Wingnut

That's not the best weather right now in Europe  , Rain and 10°C.

Your first proposal won't work for me. I need textures to blend together live. I would have loved to be able to fade directly a new texture in the diffuse slot but that doesn't seem to be possible directly without the DynamicTexture.
The textures needs to blend and to replace the old texture. It's an evolution :).

Another solution would have been to mix materials with an alpha. That would have been really cool. Then I would only need to animate the alphaColor :).
But it seems simpler to mix a texture than a material.

One thing that really bother me with my solution is that I don't think I will be able to use the BABYLON Animation system, or not directly at least. Maybe with an event or something...
I'm going to do more tests tomorrow as I need to finish this for next week :p.

 

Edit : By reading the Multi Materials in the Advanced texturing https://doc.babylonjs.com/tutorials/advanced_texturing
It seems that using an alpha should be possible. Maybe there is something there for me... Where I could get multiple materials on top of each other and animate the alpha.
That would be so cool if it works like I think it could.

[Wingnut]

Hi again, Gil.  Could a solution that uses planes... stacked atop one another, and then animate plane.visibility ... possibly work for you?

https://www.babylonjs-playground.com/#1SWPNU#7

This is a 2-plane version,  but you could stack them deep, if you wish.  Then, essentially, you'd build a "plane layer manager" that used .visibility and pauses... to deliver a quality user experience. 

I managed to code a "pause" into it, but it only works on misc.jpg.  orient.jpg has no pause applied.  hmm.  Bad coding by Wingnut, surely.    Thoughts?  (A throwback from the old "back-buffer" days.  Repeatedly "feed" the back-buffer, bring to front, over and over.)

[Gil]

Mmmmm Yes and No

It would certainly work but I'm using some more complex geometry with 2 morphtarget each time.
So right now for 1 mesh I have 2 morphtarget and I will add 2 diffuse and maybe 2 normal maps.

So if I duplicate the meshes that migth mean 6 meshes in total. I would have to check if just scaling would suffise but I don't think the geometry would work just with a scale.

 

If the multimaterial have an alphaColor and / or an alphaLevel that would be the perfect solution.

[Gil]

Looks like it won't be possible as we can't assign multiple materials to the same verticies / faces.

I just found another post 

And @Deltakosh give all the possible solution. I think I will try to duplicate the mesh finally and see how that works for me. That will sure be the fastest way to get what I want.

If I have more time I might just write a shader for that but I don't have that luxury right now.

That would have been cool to just have a plugin for DynamicTexture that would do that by itself.

[Wingnut]

Mind if I butt-in some more?

Deltakosh loosely said "use emissiveColor/Texture for your extra (dissolve-to/from) material channel."  (last post in your linked topic)

Well, you know how THAT goes.  When you dissolve-in the emissive, you also need to dim the lights.  cuzzzzz.... emissive = self-illumination.

So... I tried it.  http://www.babylonjs-playground.com/#1CHCEI#1

Slow dissolver... very color/mesh specific (not very re-usable) code in the renderLoop.  Would work for diffuse/emissive TEXTURES too.  (with textures, animate texture.level instead of forced color-changing.)

But.. oh... what a lighting kludge (watch sphere to know light .intensity), and generally... a less-than-optimal situation, eh?  heh. 

But, it's one sub-meshed mesh, one multi-material, and we're doing a dissolve (with a sledgehammer).  heh.  Such a goofy non-solve, that we might as well say I am off-topic.    Nothing unusual there, for Mister Wingle Dingle Wingnut.

I also tried pushing lightRed and darkRed materials into subMaterials array (so 4 mats in array)... then tried slowly lowering the alpha on the green materials... hoping that the red materials would "take over" (like the reds are laying beneath the greens).  Nope.  Dropping alpha on the first two materials in the array (the greens)... made the mesh go black.  It would have been nice to see the two reds in the array... "take over", when the greens went low-alpha.  hrmph.

Ok guys, continue-on.  Sorry for distraction.