Havok Playground Mobile Performance

Questions
1

I’m building a small “beer pong” type game I’m building that will be used for mobile webAR. I built this out in the playground first just to understand how it all works and I got something that works great on my laptop but won’t run at all on mobile.

Here is the playground: https://playground.babylonjs.com/#Z8HTUN#486

When I open this up on my iPhone 13 Pro in Safari or Chrome it just shows a white screen. With Chrome I also used the “Chrome://Inspect” to view the console and it just shows:

Babylon.js v6.10.0 - WebGL2 - Parallel shader compilation

No errors or anything else appears. Is this not supported on mobile? I was able to get it working somewhat within my 8thWall project but was experiencing a weird issue where if I added more than 4 cups they no longer worked as mesh colliders, but convex-hull, and the cup “opening” was solid, I added the viewer to verify the shape and it still shows up as a mesh collider so I don’t know why this is acting like a convex-hull collider. Here is a video of what I see on the mobile side:

Seems like some cups work fine and the ball can go in with no problem but for other cups, it acts like a completely solid object. Can someone explain why this is happening? I’m open to optimizations I can make that still support the ball going into the cup.

On the 8th Wall side, I’m using these CDN scripts:

<script
  src="//cdn.jsdelivr.net/npm/babylonjs@6.10.0/babylon.min.js"
  crossorigin="anonymous"
></script>
<script
  src="//cdn.jsdelivr.net/npm/babylonjs-loaders@6.10.0/babylonjs.loaders.min.js"
  crossorigin="anonymous"
></script>

<script
  src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"
  crossorigin="anonymous"
></script>

<script
  src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.js"
  crossorigin="anonymous"
></script>
2

I can sort of get it running on my phone if I remove the cup. import/clone/everything.

Floor, Havok & Balls seem good.

I would definitely say something is wrong with your cup mesh or the way it’s loaded.

Edit;
CORS error.
Your host doesn’t allow the file to be loaded by third-party websites, such as the babylonjs playground.

3 Likes
3

Finally made good progress this. I tried low poly cups instead of the higher poly versions I had but still had the same issue. Then I tried changing up how I was creating the shape/body by creating them separately and attaching them. Same issue still. So I tried one last thing and that was to create the “cup group” in Blender and then export that. This would reduce the complexity of cloning one original mesh, repositioning it and adding the aggregate.

From initial testing in my mobile WebAR project, it works fine. I did notice that if I had too many balls in the scene I would start to run into similar issues but I was able to get around that by just limiting how many balls can be available. I think the issue I had was a combination of using higher poly meshes for the colliders (the red cups) versus much lower poly versions as well as how many physics elements I had within the scene.

I also updated the CORS issue. I forgot I had a CORS plugin on my browser so I wasn’t seeing any CORS issues on my end.

Nonetheless here is the updated playground: https://playground.babylonjs.com/#Z8HTUN#491 I was able to get it working on my phone so the CORS issue was probably blocking it from loading at all on my end but I didn’t see the errors.

Note the playground I linked here does not have a limit on how many balls can be launched so you’ll see the issue arise where the cups seem to block the balls from entering them.