i have a project where one should be able to stack some cylinders to built a custom product.
Its built with Vue and looks like this at the moment: https://modellfabrik-webshop.netlify.app/
Now instead of loading meshes from an .obj file, i wanted to try out all of the options that were recommended to me here.
Now heres the weird thing:
When i created the cylinder using the CSG method, i noticed some stuttering when dragging the cylinder around.
At first i swapped my custom PointerDragBehavior (which does some “snapping” and checks) through the “original” one, which just does the dragging part. I thought maybe those checks etc. were too much.
Didnt really help. So i went on and changed more and more stuff until i realized, that if i remove the ActionManager on the mesh, the stuttering stops.
The stuttering only happens with the CSG-created mesh. The .obj and Lathe meshes can still be dragged smoothly.
It doesn’t matter if any Action is registered or not.
As soon as i add the line “mesh.actionManager = new BABYLON.ActionManager(scene);” the stuttering starts.
I tried to replicate the problem in the playground, copying as much of my code (without the “business logic”) as i could (cylinder creation, snapping, highlightlayer, pointerdragbehavior, …), but sadly i cant reproduce it: https://www.babylonjs-playground.com/#28YUR5#692
It probably sounds really weird, but does anyone have any guess, what might cause this behavior?
There’s no reason you would have stuttering with CSG and not with another method because once the mesh is created with a CSG operation you get a regular mesh, the CSG code is not used anymore.
Maybe you can give a link to a live repo which exhibits the problem?
Please have some mercy with the code, it’s absolutely horrible right now.
Lots of duplicate stuff etc. It’s my first project with Vue and BabylonJS
Currently rewriting the whole thing from scratch.
However, in src/components/configurator/lib/assets.js i am generating the meshes.
I modified the code, so the smallest Cylinder is created using CSG and the other two ones are loaded from .obj files.
Now, when the CSG-mesh has an ActionManager set, then dragging the cylinder is stuttering and kinda laggy for me.
If the boolean flag in src/components/configurator/ProductConfigurator.vue in line 378 is changed to “false” and the ActionManager isn’t added then dragging the cylinder works smoothly for me.
Thats the only change that happens rly.
The code is really messy, but maybe that helps seeing, why this is happening.
So when i create the cylinder it has an action manager set. When i drag it around it’s stuttering for me.
Now, when i click the blue-color button, i change the color of the mesh and i added this line:
“this.logik.selectedCylinder.actionManager=null;” (ProductConfigurator.vue line 359).
When i drag it around after that it’s very smooth.
It would be great if others could test this out too, to see if it’s just a problem for me, or if others experience the same thing.
It’s weird that it only happens with the CSG-created mesh. When i use the middle and large cylinder they can be dragged smoothly for me directly even tho the code is identical (apart from the mesh creation).
I tried it on Edge and Chrome too and the same thing is happening.
When trying it on my companies Thinkpad it’s not happening actually.
Maybe it’s related to my hardware after all.
Currently i am rewritin the whole project from scratch again gradually adding functionality.
I’ll see if i can see the same behavior again at some point.
