Adding a Global Opacity Fader to a TSL Particle Emitter

Resources
,
1

I am trying, without success, to create a mechanism for dynamically adjusting the global opacity of a particle (smoke) emitter. My goal is, after activating the emitter, I would like to be able to fade the smoke over time.

[EDIT: Final Answer Below]

I used the particle emitter from the three.js examples as a model.

I added the following variables:

let OpaBeg = [0.3,0.3,0.5]; // Starting Value
let OpaVal = [0.0,0.0,0.0]; // Current Value
let OpaFad = [0.0005,0.0005,0.0001]; // Fade Rate
let Global = uniformArray([0.0,0.0,0.0],'float'); // TSL Value

Note: I am using arrays because I modified the sample particle emitter to work several explosions (in this case, 3 explosions), which can be re-used.

Within the sample particle emitter, I enabled the Global Opacity Fader (GOF) my making the following change to the emitter program:

I replaced this line (line 92):
const opacityNode = textureNode.a.mul(life.oneMinus());

with this:
let opacityNode = textureNode.a.mul(life.oneMinus()).mul(Global.element(n));

If you simply wanted to adjust the Opacity of the emitter, you only need the Global variable and only need to insert values in that variable. However, we want the emitter to fade over time. This is the reason for the other variables and involves the following steps.

When starting the explosion, initialize the Opacity Value (OpaVal) with the Beginning Value (OpaBeg) and then load the Opacity Value into the Global value:

    OpaVal[n] = OpaBeg[n]; // Init Smoke Opacity
    Global.array[n] = OpaVal[n]; // Init TSL Variable

Every time, before calling the emitter, load the Opacity Value into the Global value:
Global.array[n] = OpaVal[n]; // Init TSL Variable

After calling the emitter, I decrement the current opacity:

    OpaVal[n] = OpaVal[n] - OpaFad[n]; // Fade Out
    if (OpaVal[n] < 0) OpaVal[n] = 0.0;

There are probably more efficient ways to do this, such as using only a uniform for the Global value, or decrementing the Global value. But, after several days of effort, I am just happy to find a method that works.

You can see the emitter in action here - just sit and watch the 3 explosions.

2

Just giving my question a bump. It is a narrower question now - just how to copy a number from a regular array to a TSL array, or uniform - if that is possible.

3

Okay, after much trial and error, I finally found a solution that works:

To save time, I have revised the original post to include the final answer. I hope others find this useful.