Guidance on adding physics to VPS mesh

Hey guys, I’m pretty new to 8thwall and its features, recently I’ve been trying to play around with VPS web and creating AR content. As my first step, I was able to follow this 8thWall tutorial with no problem: https://www.youtube.com/watch?v=AY47_A6MsqU&t=218s
As my next step, I wanted to add physics to the mesh and the vps-anim entity. I tried to replicate the following tutorial: Physics Collider | 8th Wall Playground | 8th Wall. The issue I’m facing is that the wireframe for the physics object isn’t aligned with the mesh and the vps-anim that is being placed on the VPS location.

Maybe I don’t understand how VPS is layering the mesh GLB over the detected location but I can’t seem to add the physics layer correctly onto the VPS mesh to have my tomato interact with the world. It works fine with the entity.

I need some guidance because I’ve seen other projects use VPS and physics and im trying to replicate them.

@Ian - Any idea what the issue could be here? Curious to know if its an issue between Physics and VPS.

There shouldn’t be able problems with adding physics to a VPS mesh. The mesh is overlaid to the VPS location in real time as the device remains localized. I would check the console to see if there’s any errors related to the physics library you’re using.

Is this via studio? Or Aframe? what physics engine are you using?

Can you share any more info/images. Have you turned on debug mode to see the collider mesh?

Hey Ian, I am using A-frame for this project, and I’m using Ammo.js. I have enabled debug to see where the collider mesh is being applied. The collider meshes are being applied to the gltf-models using a custom physics-object component which was based on the glb-physics-object.js component from the previously mentioned Physics Collider AFrame project. The issue is that the collider mesh isn’t layer/aligning with where the gltf-model is supposed to be according to VPS;

I placed a glb model of a target in the VPS glb using blender, and I placed it in front of the tall lamp that you see in the following image:

The target GLB is placed where I designed it to be within the VPS location, but the collider mesh isn’t aligned with that model.
(I turned off the collider mesh of the VPS location for demonstration purposes so you guys can see my issue more clearly)

Edit:
Here are the ammo.js script tags that I am using:

<script src="//cdn.8thwall.com/web/aframe/ammo.wasm.js"></script>
<script src="//cdn.8thwall.com/web/aframe/aframe-physics-system-4.2.2.min.js"></script>

Also, i have a toss-object component from the A-Frame: Toss Object project that has a collider mesh applied to it, and that collider mesh aligns with the tomato glb that gets tossed. So a conclusion of mine is that the ammo.js isnt talking with the VPS correctly.

I’d reference this sample project here which allows you to apply a physics collider to a VPS mesh, you could use this exact same logic to apply it to your glb model.

Keep in mind that you may also need to also “apply all transforms” in blender on your glb model as well. Please reference the screenshot below. If you don’t do this, sometimes colliders can be offset

2 Likes

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.