Addition of cannon.js debugger

Hi.

I tried out Babylon.js's build in collision system and didn't like it very much (player mesh "bounces" unpredictably as collide) so now experimenting with cannon.js. However, it would be very helpful if could visualize the physics bodies; there is such a visualization debugger for three.js and, more recently, another developer made a debugger for cannon.js. If cannon.js is likely going to remain the physics engine available with microStudio would be nice to be able to use the debugger library.

Here is the debugger's Github site: https://github.com/neu5/cannon-es-debugger-babylonjs

And here is a sample of the debugger in use:

https://neu5.github.io/cannon-es-debugger-babylonjs/

Thanks for considering! 😊

(Also posted on Github)

You can add JavaScript libraries to MicroScript 2.

Here is an example of adding "https://github.com/neu5/cannon-es-debugger-babylonjs/blob/master/dist/cannon-es-debugger-babylonjs.js"

to the project >> https://microstudio.io/i/Loginus/cannondebugger/

If you only need this file to track collision geometry - please let me know if it works.

Importing libraries is a bit more difficult, but sometimes it is enough to comment a few lines. Usually it is Import and Export that are problematic.

I improved the code so you don't have to modify anything.

Set Babylon and Cannon as project components. Add the CannonDebugger file which I adapted for use in MicroStudio.

https://microstudio.io/i/Loginus/cannondebugger/

Tell me if it works.

Wow, @Loginus,

Thank you very much! I thought one would need to import a lot of outside dependencies to make it run-- I didn't realize it could be done by tweaking the javascript files without those dependencies!

The cannondebugger project itself runs fine (prints "pass" for all of the physics bodies). However, when I try and use it as a dependency to Gilles' "Cannon Demo" project it doesn't seem to work. I'm testing it out on microStudio IDE in mobile browser, and Gilles' Cannon Demo is written in microScript and already has Babylon.js and cannon.js enabled. I changed the microScript project settings from 1.0 to 2.0 as you indicated in your instructions above. Even though I see in your cannondebugger code written in javascript that you export the main cannondebugger function "CannonDebugger" to the global space where the Cannon Demo main file should pick it up, when I run the combined project (main file = original Cannon Demo project file + your cannondebugger file that I added as another source) and add the following code to the main file to get cannon.js rendering:

[in function init]:

CannonDebugger(scene,world)

[in main function update]:

CannonDebugger.update()

I get the following error:

Warning: CannonDebugger.update() is not a function, in file "main" at line 84, column 25

I also tried using the constructor syntax as described in the original cannondebugger project on github:

cannonDebugger = new CannonDebugger(scene, world)
cannonDebugger.update() 

but that didn't seem to work either.

Am I using your cannondebugger incorrectly?

Thanks!

😊

This code works fine for me. I combined it with "Cannon Demo" - when I press the spacebar I can see where the physical objects are.

Look at sample code >> https://microstudio.io/i/Loginus/cannondemo2/

Perfect, @Loginus, I got it to work too! 😊👍

I got confused trying to combine the original Github syntax using "new" with your debugger's syntax. I see now that one should do something like:

[in init function]:

debugger = CannonDebugger(scene,world)

[in update function]:

debugger.update()

Were you thinking of making the project public or perhaps into a library or plug-in? If so, I'll go ahead and close the feature request issue since you so promptly just enabled that feature!

Have a good rest of your week.

I created a library and changed the Debugger code to be a class (the functionality is the same).

SPACE - turns on and off collision meshes.

https://microstudio.io/i/Loginus/debugger_cannon/

That's awesome, @Loginus, thanks! It will be very useful on some 3D projects I'm working on. 😊