solved [SOLVED] Camera shake Animation on ArcFollowCamera

[vtange]

Hello everyone!

How can I get a camera shake animation to work with ArcFollowCamera? I'd imagine this is useful for situations like a ball (that you're following) hitting a ground or a rocket lift-off sequence.

Here's a playground for a cylinder (rocket) doing a liftoff in 1000ms. I can get a "shaking" animation working for the rocket. https://www.babylonjs-playground.com/#5HHLEC

But when I try to do the same with the camera nothing happens https://www.babylonjs-playground.com/#5HHLEC#1

I'm guessing it's because ArcFollowCamera is overriding the camera's position with every frame. Is there a way to do this without resorting to the former? The problem with animating the rocket is it feels off seeing the rocket remain static on the screen while everything else shakes.

 

[vtange]

Just to add, I have gone through

which sounds like someone else has managed to do something similar to what I'm thinking. If possible I'd like to know how it was done.

[QuintusHegie]

Good question!

A camera shake effect may perhaps also be simulated to the user by shortly swiftly rotating the final 2D view result a bit.

Have you tried (creating or using) a Post Process?

http://doc.babylonjs.com/how_to/how_to_use_postprocesses

Don't tilt the screen projection too much; just vary between about 1 to 5 degrees will be enough.

When you stick another camera to the top of the rocket ("the astronaut's view") you can use the Motion Blur Post Process to simulate speed motion effect as well.

Another solution may be to create a hidden zero-weight child mesh on the rocket, set the camera to target this child mesh instead of the rocket itself, and then vastly changing the invisible child mesh position relative to the rocket.

This way you don't need to change the real rocket or ball location, which will probably have ruined your physics calculations...

Let me know when you found this or something else a solution (I'm looking for the same kind of camera effect to use for vehicle crashes).

Happy coding,

Q

[coolroar]

In my ZOOM game, collisions are shown like this:

https://www.babylonjs-playground.com/#BYG518

Good Luck!

[coolroar]

@ vtange

Or here's your earlier PG with camera.position replaced by camera.rotation: https://www.babylonjs-playground.com/#5HHLEC#2

Shake, Rattle, n' Roll !

 

[vtange]

On 8/26/2018 at 1:57 PM, QuintusHegie said:

Another solution may be to create a hidden zero-weight child mesh on the rocket, set the camera to target this child mesh instead of the rocket itself, and then vastly changing the invisible child mesh position relative to the rocket.

I read this multiple times slowly and realized this is probably what I'm looking for. I'll try it out later when I have time. Thanks for the epiphany!

[dbawel]

Parent the camera to a mesh, and shake the mesh... no problem.

DB

[vtange]

Yup. Making a new mesh of position (0,0,0), parenting it to the Rocket, and pointing the camera to it works. After that it's just a matter of assigning the shaking animation (move position.x or whatever by 0.1) to the new mesh.