Could you explain how this example works?

[swpuhu]

This is an example about particle system and compute shader in WebGPU. Here is code repo. I really like this example, but this code is too difficult for me. I hope you can help us figure out its principles and add it to our website as tutorial.

[greggman]

I can show examples of making a particle system but that particular example uses (what seems to me) a particularly unique way of emitting particles that I'm not sure needs an article. Maybe a Q&A instead. In other words, many people want to know how to make particles but few people want to emit particles from an image.

The way it works is, it generates mipmap where the 4 values (RGBA) in each mip level, represent a probability of which direction to go when going from a smaller mipmap to next largest.

So, at mip level N (smallest 1x1 mipmap) it loads the mip's texel value (RGBA). It then picks random numbers and based on the RGBA value (which are "probabilities"), it decides, when going up to the next largest miplevel (2x2) which of those 4 pixels to choose. It then repeats that process until it gets to the top level mip (the largest mip). The values in the top level mip are not probabilities, they are the colors of the original texture. It then spawns a particle of that color at that position.

It's an interesting and compact way to get particles to conform to an image and it has the property that the alpha values or colors of the image could be used influence the probabilities so, for example, you could set the alpha low for places you want less particles.

A more straightforward way to do something similar is just to put all the positions in an array and pick

placeToSpawn = allPossiblePositions[int(random() * allPossiblePositions.length)]

This has the disadvantage that the data is larger. You could add the probabilities by repeating positions (so they're more likely to get picked) but that would increase the memory usage.

I need to setup a Q&A section (similar to this one) which I'll do as soon as I find time.

[swpuhu]

Thank you for answering my question on your busy schedule! Indeed, the exmaple above mentioned is really rare, and I will try to build a particle system using the straightforward way you mentioned below.

Thanks again!

[greggman]

Just to clarify, my point was, spawning particles in the shape of an image is rare. Spawning particles in the shape of anything other than a line, plane, circle, or sphere is rare as well. Most particle systems provide "emitters" in the shape of line, plane, circle, sphere, and them "mesh". line, plane, circle, sphere are probably just hardcoded. I have no looked into how to best spawn from a mesh and evenly distribute the particles.

The particle system in the example only has acceleration lifespan (scale to 0)

In particle systems I've written in the past there were many more parameters

• starting color, ending color (2 values)
• color ramp (a 1d texture filled with colors - textureSample(colorRamp, age / lifeSpan))
• starting size, ending size
• starting position
• starting velocity
• acceleration
• animation speed

Example: https://registry.khronos.org/webgl/sdk/demos/google/particles/index.html

All of those particles are the same shader with different inputs.

In common game engines, many more features are added, many of them are keyable, (so instead of just a starting size and ending size there is a curve over time. That can be translated to a shader directly (curve and keys) or it can be flattened to data (like the ramp texture for color above)