I have modified the three.js example “WebGPU Particles” to create a Jet Exhaust. I would like to change the opacity so that the material is more transparent. I have created a CodePen Example. I believe that this could be done in line 69:

```
let opacityNode = textureNode.a.mul(life.oneMinus());
```

But I don’t know enough about the opacityNode to know what change I need to make.

2 Likes

There are quite many ways, it’s more an artistic issue. For example:

```
let opacityNode = textureNode.a.mul(life.oneMinus(),0.05);
```

or

```
let opacityNode = textureNode.a.mul(life.oneMinus().pow(50),0.1);
```

or

```
let opacityNode = textureNode.a.mul(life.pow(20).oneMinus(),0.1);
```

3 Likes

Thanks!

I had discovered that something like:

```
let opacityNode = 0.05;
```

also worked. But I like your solutions a lot better, especially the second one.

What, exactly do those commands mean? Is the oneMinus() an indication that the value will be reduced with each frame? (It is also used with the scaleNode, which I assume means the size of the particle is reduced with each frame.) What do the .a and the mul mean?

This particle generator is really powerful stuff and a big reason I wanted to switch to WebGPU.

2 Likes

Here is a brief explanation:

`textureNode.a`

is the opacity component of a color value from a texture, opacity is a number from 0 (completely transparent) to 1 (completely opaque). The name “a” comes from “alpha”. It is the same “a” as in RGBA.

The other things are just mathematical functions to build a node-friendly expressions:

`mul`

– multiplication: **xy = mul(x,y) = x.mul(y)**
`pow`

– power function: **x**^{y} = pos(x,y) = x.pow(y)
`oneMinus`

– is the function: **1-x = oneMinus(x) = x.oneMinus()**

The following expression:

```
textureNode.a.mul(life.oneMinus().pow(50),0.1);
```

would look like this in pure JavaScript:

```
textureNode.a * Math.pow(1-life,50) * 0.1;
```

Some more info about these expressions can be found in Three.js Shading Language documentation.

3 Likes