Download

"Animating" emissive texture elements discretely - how ?

Basically I am after doing something like this:

d5ad1ea3d5794a89bcb6a8f6ed3da0800e23a75b.png
https://s28.postimg.org/npuz89aa5/fillable_material_elements.png

Imagine symbols (runes) on the walls / rocks, or elevator floor indicator, or sci-fi power panels, etc. When triggered / activated, timeline (or somehow else) would “drive” those lit elements to be revealed one by one, either discretely or continuously.

For example:

aea4b7ab765c4ed7fb5e340494deff06.jpg

(this isn’t my concept art, found it on Pinterest)

imagine that the bottom strip would fill up (or drain down) continuously and then top lights will turn on (or off) row by row. Those “glowing” elements can be either separate meshes with unlit material with emissive texture (and aligned close to the surface of the pylon) or can be just drawn on the main diffuse/base texture as unlit and material would have emissive texture. Whichever way is less performance taxing (I need this for mobile) and most suitable for the task.

How can I achieve that kind of “animation” of glowing elements?

Thanks

P.S. This is something I’d like to achieve (without using flipbook):

there is material function called ValueStep, check it.
This “stepping” technique used for similar effects.
The meaning of it, that you can create texture mask with areas filled with some different scalar values, and draw this areas one by one.
In your case it may be 0.1 for 1st rune, 0.2 for 2nd and so on.
Then using some growing 0 to 1 animated value (like frac of time) and If node, you can compare current growing value with that texture mask and output 0 if value < mask and 1 if value >= mask.

I just added a video at the end of my post. Would ValueStep function work for this case ?

this function works exactly like you show on first picture.

to get behavior like on video you need additional instructions, like moving mask multiplied on stepping function

@<a href=“https://forums.unrealengine.com/member.php?u=754” target="_blank">redbox</a>

I am trying to get smooth filling of the bars first. Here is what I am getting and I’ve had these issues when using transparency way back then (uneven rate of “filling” the bars; sharp/torn edges instead of smooth gradient of the mask):

https://youtube.com/watch?v=_rjHSoCDf54

Any idea how to fix those issues ? Thanks

EDIT: and here goes Value Step - same exact look as IF node:

https://youtube.com/watch?v=leHP3EFN0KY

As I said, value step takes value and compares it with mask.
there are steps on your video, but you use gradient, so it stepping by one pixel.

Use one value for all area.

@redbox

I see. Unfortunately that doesn’t work for my case :frowning:

This is what I came up with for now (I am driving it with Time for the purpose of the video):

https://youtube.com/watch?v=jg0tH5Y2k9Q

Final product (WiP):

https://youtube.com/watch?v=Cu4oojWccAE

There is nothing special enough about your case. The method redbox mentioned gives you the result you want.

Except it does not - I have smooth gradient (glare/halo) on the mask. “IF” method butchers it. Also “IF” node creates non-linear transition - it starts off fast and the closer it gets to the end of the range the slower it fills in.

It does.

Nothing stops you from multiplying the result by your mask.

Nah, each step takes the same time.

If you are using texture, this effect can occur due to texture being in sRGB rather than linear color.
You do not even need to use a texture to create unique value for each cell. You have a perfect candiate for this- your UVs. Even If your unwraps do not leave you an option, you still have world space Z position. This is enough to create a stepping gradient for all cells.

Look my video please - I show my setup and I am multiplying and it get torn up sharp edges instead of smooth gradients. If I am doing something wrong, somehow no one cares to correct me.

Hmm… I use GIMP to create and save my textures. I am not sure if it supports linear colors.

This is really over my head, sorry :confused: I guess I’ll just stick with the method I came up with.

In the essence it as simple as this:

Reference effect is easily reproducible with this approach.

Great work!

Can you please describe what are nodes ‘frac’
and ‘sin’ used for?

Thanks @Deathrey

Although it does look quite complex to me :frowning: (programmer’s approach vs artist approach). I’ll test it out!