Making a Jet Exhaust in WebGPU

Questions
,
1

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
2

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);
4 Likes
3

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
4

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: xy = pow(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
5

For some reason, a further version of this emitter that I used to create a Ship Wake also solved a problem I was having with frustum culling - i.e. the smoke disappeared when the origin went off-screen. This is odd because the original three.js example has the frustum culling problem. See the example in this discussion.

1 Like