Making a Smoking Volcano with WebGPU

Questions
,
1

Now that I have switched to WebGPU, I have been looking forward to using this particle generator in the three.js examples to create a smoking volcano.

I have created this simple example to illustrate what I am trying to do. (EDIT: The source code is here.) The framerate seems quite good. However, I have run into a few problems that I hope are easily solved.

First, for half of the horizontal rotation around the island, the smoke is behind the island, not in front. This happens where the camera heading is from 30 to 210 degrees. [EDIT: Solved by prisoner849]

Second, every now and then the smoke just disappears and restarts. Perhaps I have modified the particle generator incorrectly - possibly creating an unacceptable gap between the number of particles, and the height and speed of the particles? [EDIT: Solved. To reduce speed of smoke, you should only reduce first value of the timer variable and leave the second value = 1.]

Third, if you strafe laterally or vertically, you will see that the smoke disappears as soon as the origin of the smoke generator goes offscreen. This frustum culling was also a problem with WebGL. Is there a fix for this problem in WebGPU?

[EDIT: I have now solved this problem as well. I noticed that another version of this emitter (used to create a Ship Wake) did not have a problem with frustum culling. It was part of a group. So I adapted that version to my volcano, added it to a group and voila!]

2

map: IslTxt, transparent: true
Does it really need to use transparent: true for the island?

1 Like
3

Yes, that’s how I am able to obtain a nice jagged coastline with a resolution far greater than the grid resolution. The island essentially floats above the waves. But since the island does not cast a shadow, you don’t notice.

Do you think that is creating a problem with the smoke? [EDIT 2a: I tried making the island non-transparent and it DID solve the first problem - but the nice coastline also disappeared.]

[EDIT 3] OK. I solved the first problem using renderOrder. Many thanks for pointing out that the problem might be with the transparency of the Island material. I had totally forgotten that the Island material was transparent. So when I searched how to set the drawing order for TWO transparent materials, I immediately found an answer. I was pleasantly surprised to learn that the command is not limited to Object3D. [EDIT4] I only needed to set the renderOrder for the smoke (= 1), since the default renderOrder for the island is zero.

Only 2 problems left to solve!

1 Like