Cannon JS for realistic ball bounce

Hi XR friends!

Wanted to share with you and if you have any questions, I’ll try to answer them.
We created a ball bouncing game for Spark AR using Cannon.JS library.

You can have a try in Instagram:

We had problems understanding quaternion vectors but resolved it understanding how was the bouncing behavior.

We reduced value of gravity to not be so real, because would be really difficult to make points.

Hope you like it!

1 Like

Super cool! It’s been a while since I tried using cannon in spark. Did you find the process difficult? If you don’t mind, I would love to see some code snippets!

Sure @josh_beckwith

We started on version 80 of SparkAR and took us 1 month of development, we where asked to quote this type of filter, but we took it as a challenge and decided that whether or not Client would accept it, we would make it to learn and promote it as ours.

For Cannon world you need to define all objects that are going to be inside the World. Defining mass, position, radius, shape, material and velocity, so they can collide.

Then when you start the game you need to update the draw function so each step has information on (x,y,z) position of the ball and face. Cannon, does the rest on calculating where it collides.

We created the face as a cube, but for more realistic would be nice to have a face figure or an oval figure.

Best, :sunglasses:


very interesting, thanks for sharing! Been meaning to look into this forever, but haven’t gotten the time/use case to yet.

1 Like

That’s awesome! This will be a good topic for my script tutorials. I’ll dig into it more when I get further on that project. Thanks for sharing!

1 Like

Do you just import cannon into spark and that’s it or are there modifications you have to make? I heard from a friend cannon in spark sucks a bit so I never used it, whenever I need 3D physics I just build my own small little engine (example) and that has done the trick for me but it’s a bit of a pain

@Tomas_Pietravallo yes you just include the script.