I have developed this material effect for something at work. But since I designed it at home so I can show it here. The goal was to make visible the electricity flowing in an electric circuit. I wanted to avoid the traditional linear translation flow+mask we usually see on some game materials. I wanted a more expressive material where you can really see the electricity flowing through a predefined path:
|A linear flow is not visually pleasing
||What we want: electricity pulsing
and following a path
One interesting flow effect developed recently is the one used in Valve products to simulate water . This method cheats the eye in order to simulate a local flow of the texture you want. In the end, you feel like you are looking at a large river flowing down. Unfortunatly, we can not use it in our case because there is no real flow involved. I finally came up with the method I am going to present to you. There is nothing deep involved here so I will described it very quickly. For more details, you can refer to the provided source code or ask me question using the contact link on the left.
Step 1: get a binary mask of the path and binary mask where 1 means a starting position of a path.
|Path mask texture
||Starting postiion texture
Step 2: Follow the path from each starting point while increasing the path value and normalize the resulting texture in [0,1].
The path texture. Each path contains the normalized distance from its corresponding start position.
Step 3: Extend the final texture to fill any hole. This is important to make the visual flow large enough for the glow modulation that will be applied latter.
The final extended path texture.
Step 4: The path texture content can now be used as the texture coordinate of a 1D signal texture. This signal can be translated and scaled according to elapsed time to get the electricity flow we desire.
The texture containing the 1D signal.
Step 5: In the demo, I use the following final formula: diffuseTex + flow*glowTex. You can add any other effects you want such as reflection, gloss texture, etc.
That's it! :)
- Can you think of another effect that could be do with that?
- The path texture can only be used with nearest filtering. In our case, this is ok since the electricity pulses move fast. Using bilinear filtering can result in undesired visual artefacts. Bilinear filtering can be done but only after the fetch of the path texture and 1D signal. That can be easily done when knowing the width and height of the path texture.
Download source and executable
-  Alex Vlachos. Water Flow in Portal 2. In Siggraph course Advances in Real-Time Rendering in 3D Graphics and Games, 2010.