[SOLVED] How to do this particle breathing effect?

Hey folks, do you think the playcanvas particle system is the best way to replicate the “breathing blob” in this app example?

Or is there a better way you would recommend? Looking at the example, the main object is some kind of sphere that is constantly morphing its exterior to almost look like a wave / breathing. Maybe another way to do this could be to create multiple images of the blob in various shapes, and have playcanvas update the image every dt. Curious to hear your thoughts!

Hi @Vdizzle,

That’s an interesting problem. For the particles that get attracted to the blob the particles system would be ideal to use, if it was possible to reverse the flow of particles. I know it has been asked again but I am not sure if it is available, maybe it is time for a feature request:

For the blob, if you plan to do it in 3D you could use morph targets to create a loop a simple breathing animation, otherwise that is definitely doable using a vertex (for accuracy) or pixel (for a scaling breathing effect) shader.

1 Like

I’ve updated the ‘Sucking In Particles’ thread with the recommended method based on the current particle system component. :slight_smile:

1 Like

@will that gif in the related particles thread is brilliant - exactly the effect I was going for, thank you!

@Leonidas do you mind if I ask some more follow-up questions? I’m unfortunately not too familiar with morph targets and shaders, so would your process be to make a “blob image” plane and then use warp logic similar to the sprite project https://playcanvas.com/editor/scene/462498? Or instead find a *.fbx asset of an animated blob that’s morphing between various shapes ie breathing? Thank you kindly Leonidas for helping!!

That’s a simple but quite useful example of warping a 2D plane.

I’ve used something similar in the past to make a 2D cartoon character look like being animated, breathing. I don’t have sample code in hand, the idea is to center the effect at the breathing point and make a looping scaling effect to simulate inhalation/exhalation.

If you are doing a 2D game or have a fixed top down camera that would be sufficient and much more easier to control using shader uniforms (variables).

Here is a shadertoy example to get you started: https://www.shadertoy.com/view/ltBXRc

Morphing will work as well in a 3D model, though you will have to create several shapes for breathing to look random and varied.

So, yes, both methods can do the trick, it depends really on your preferred workflow and experience.

1 Like

@Leonidas that shadertoy example is perfect - you rock! Marking this question as solved; thank you again for pointing me in the right direction

1 Like

I was under the impression that PlayCanvas does not support morphs. Is this incorrect?

Hey @wturber I hope Leonidas will jump in to give you more detailed info, but the way I understood the advice: I can do morphing outside of PC (eg. using Blender ) and then import the resulting *.fbx asset file with animations into PC.

Haven’t tried this yet, but let me know if you understood Leonidas’s point differently.

I was going by my memory of what I recall reading here about a year ago. And my recollection was that it wasn’t supported. I took that to mean that it wasn’t possible. But those two things should not be confused. The more I’ve learned about Playcanvas, the more I’ve learned that good information is fairly scattered and that what you think you know can easily be half-wrong or incomplete.

After doing some digging tonight, it seems like morphs are possible using the glTF loader but maybe not with FBX. (Emphasis on the “maybe”.)

But that may be out of date at this point in time.

I did find projects that show morphing in PlayCanvas, so it seems that it is possible. Now the trick will be to better understand the steps to get it done and find out how reliable the process is.


And then there’s this issue on gitHub that may provide some insight.

and this

1 Like

That was some research @wturber, good job!

The Playcanvas engine contains a pc.MorphTarget class which will work out all vertex/index buffer maths to handle the blended animations. But that isn’t so useful out of the box, I imagine this is a work in progress to add a component and editor support for this.

@will may know more about this.