Impact shock wave

shaders

#1

Hello, friends!

First of all: If you are averse to rambling questions of the thinking out loud variety - go away! Here be dragons!

I’m in the process of adding collisions to Harmony of the Spheres, my never ending project of a gravity and space simulator, and I’ve gotten to the point where when, for example, you crash the Moon into Earth, a cloud of debris, made with points, is ejected into space with a set of state vectors and thereafter gravity determines the trajectories of each particle, which is pretty cool, because you can tell how some particles crash back into Earth, some end up orbiting Earth while others reach escape velocity and leave the Earth system for a heliocentric orbit… But there’s one thing missing:

Armageddon like shockwaves like the ones seen on this picture!!!

I’m sort of at a loss of how to go about creating such shockwaves, which would ideally radiate over the surface of a sphere, but I’ve been contemplating an approach where you render a transparent sphere that expands at the point of impact and is then removed from the scene after a pre-determined number of ticks, but the thing that bothers me about this approach is that instead of getting a circle of energy radiating outwards from the point of impact on the sphere, you get a mini blob of a sphere imposed on it, which doesn’t look quite as cool.

I’m not asking anyone to provide me with a solution out of the box, but some pointers, if anyone has an idea of how this effect could be achieved, would be much appreciated.


#2

Hi!
If I got correctly what effect you want, then you can use shaders for that.
Here is a simple impact (shock wave) effect, just wrote it from scratch:

And here is a working demo:

I hope it helps :beers:


#3

Hello, Prisoner!

You spectacular person! Unfortunately I managed to pour boiling water over my left hand while making coffee this morning, so I’m staying away from coding today and possibly tomrrow, but once my hand is being agreeable again I’ll try it out :smiley:!

Can’t take credit for this, though, so how would you like to be cited?

Alright, back to nursing my hand!

Many thanks and happy Sunday!


#4

Get well and return to coding ASAP :slight_smile: :beers:


#5

Thanks :smiley:!

Hand is fine now and thus I’m back to coding! I’ve added a demo where you can see the effect in action. It’s soooooooo pretty (still need to do a lot of work on the collision debris, though :stuck_out_tongue: ) ! Thanks a trillion! Make sure to use the orbit controls to set the focus of the camera on where the moons impact Jupiter (obvious, but just in case!!!).

Had to figure out how to get the impact point right as if you don’t take the rotation of the object into account it ends up being off, but fortunately I’m better at mathematics than I am at writing shaders, so that didn’t take me too long to figure out.

Got one question, though… Would it be possible to have several shock waves at once, and if so what changes are needed for the shader? Tried to figure it out for four hours now but so far I’m banging my head into a wall, albeit with a smile on my face as I can’t stop rejoicing over all those pretty shock waves :smiley: :smiley: :smiley:!


#6

How many shockwaves at once? Approximately. :slight_smile:


#7

Not more than five…


#8

Or else the planets in my simulations will start calling the planet protection services on me :smiley:


#9

Somehow, when I’ve read your main question about a single shockwave, I was already sure that you’ll ask for that effect of multiple impacts :smile:

Of course, it’s possible :slight_smile:
Not so big changes. Just created a structure in the fragment shader for a uniform of an array with data for each impact and process it in that for loop in the shader :slight_smile:

MultipleImpacts

And a working demo:


#10

Hahahaha… Well, you know what they say? Yes, that’s right… More is better!!! At least when it comes to celestial impacts; not so sure the dinosaurs would agree, though!

Big thank you for your help. Unfortunately I’m a catastrophic n00b when it comes to WebGL and even programming, but when I have more of a clue I’m definitely going to do my utmost to pass on the good deed and help other n00bs :laughing:!

Having said that, after having studied your shader code I’m pretty sure I’ll be able to write a shader for… you guessed it… IMPACT CRATERS! THREE.js is just such a royal hoot!

At some point I’ll have to figure out how to code a Bruce Willis shader that lands on the asteroids and blows them up :stuck_out_tongue:!

Once again, thank you very much for your help and time :boom::dizzy::firecracker::earth_africa::beers::rocket:


#11

You’re welcome :slight_smile: :beers:


#12

I’ve changed the fragment shader in the example with multiple impacts. Not so much though, but now it looks better :slight_smile: from my point of view :smile:


#13

Super sweet! I’m going to implement the multiple impact feature this weekend. Will shoot you a link then so that you can see it in action. Done some work on the debris, though, and it’s starting to look pretty cool if I’m allowed to pat myself on the shoulder :smiley:

You didn’t say anything about how I should credit you, so I’ll add a link to your CodePen account when I update the credits section; hope that’s okay!