Discrepancy in Object Positions between JSON Scene Data and Surface/Marker Tracking Scene build dynamically

We’re encountering a puzzling issue with our augmented reality project involving surface and marker tracking. Our scenario involves saving scenes created through our custom authoring tool in JSON format, capturing details such as object meshes and their positions in x, y, z coordinates. However, upon loading these scenes onto surfaces or markers, we’ve observed significant discrepancies in the object positions compared to those stored in the JSON data.

Our primary objective is to construct 3D objects with interactive hotspots for user engagement. The sample JSON data generated by our authoring tool illustrates the structure and properties of these objects.

[{“id”:1,“name”:“Scene 1”,“meshObjects”:[{“id”:“1000”,“name”:“new 3D object”,“sceneId”:1,“meshType”:“gltf”,“isLock”:false,“position”:{“x”:-2.1737213134765625,“y”:1.836345911026001,“z”:0.6391922831535339},“rotation”:{“x”:0,“y”:0,“z”:0},“scale”:{“x”:0.97,“y”:1.26,“z”:0.62},“mediaUrl”:“content/media/e2fb6cd2-4ab7-42dd-addd-5cd3a21c6fe8/scene.gltf”,“replace”:false,“mediaName”:“realistic_human_heart.zip”,“triggerEvent”:“”,“targetobjectId”:“”,“actionType”:“”,“actionData”:{},“isObjectVisible”:true,“objectInteraction”:“”,“chatbot”:{“avatgt”:“”,“avalink”:“”,“avabot”:“”,“avaaction”:“”,“hotspotUrl”:“”,“hotspotColor”:“”,“bgColor”:“”,“transparency”:0,“isBorder”:false,“borderColor”:“”,“tatc”:“”},“avatarSettings”:{“isMsgProp”:“”,“pos”:{“x”:“”,“y”:“”,“z”:“”},“rot”:{“x”:“”,“y”:“”,“z”:“”},“scl”:{“x”:“”,“y”:“”,“z”:“”},“textColor”:“”,“bgColor”:“”,“transparency”:0,“isBorder”:“”,“borderColor”:“”}},{“id”:“1001”,“name”:“new hotspot”,“sceneId”:1,“meshType”:“hotspot”,“isLock”:false,“position”:{“x”:-2.233163833618164,“y”:2.829935312271118,“z”:-0.2509578764438629},“rotation”:{“x”:0,“y”:0,“z”:0},“scale”:{“x”:0.4,“y”:1,“z”:0.77},“mediaUrl”:“assets/img/round-shap/index1.svg”,“replace”:false,“objectSettings”:{“transparency”:0,“isBackground”:false,“backgroundColor”:“”,“isBorder”:false,“borderColor”:“”,“borderWidth”:“”,“hotspotColor”:“#ddb00e”,“radius”:“”,“textColor”:“”,“textStyle”:“”,“height”:“”,“width”:“”,“fontSize”:“”,“autoPlay”:“”},“isObjectVisible”:true,“triggerEvent”:“on_tap”,“actionType”:“display_message”,“actionData”:{“displayMassage”:{“dmsg”:“Cloud-based Instancy Learning Platform enables the creation, management and delivery of online training and education”,“transparency”:0,“textColor”:“”,“backgroundColor”:“”,“borderColor”:“”}},“chatbot”:{“avatgt”:“”,“avalink”:“”,“avabot”:“”,“avaaction”:“”,“hotspotUrl”:“”,“hotspotColor”:“”,“bgColor”:“”,“transparency”:0,“isBorder”:false,“borderColor”:“”,“tatc”:“”},“avatarSettings”:{“isMsgProp”:“”,“pos”:{“x”:“”,“y”:“”,“z”:“”},“rot”:{“x”:“”,“y”:“”,“z”:“”},“scl”:{“x”:“”,“y”:“”,“z”:“”},“textColor”:“”,“bgColor”:“”,“transparency”:0,“isBorder”:“”,“borderColor”:“”}},{“id”:“1002”,“name”:“new hotspot”,“sceneId”:1,“meshType”:“hotspot”,“isLock”:false,“position”:{“x”:-1.9708657264709473,“y”:1.5484694242477417,“z”:0.11881710588932037},“rotation”:{“x”:0,“y”:0,“z”:0},“scale”:{“x”:0.66,“y”:0.53,“z”:1},“mediaUrl”:“assets/img/round-shap/index1.svg”,“replace”:false,“objectSettings”:{“transparency”:0,“isBackground”:false,“backgroundColor”:“”,“isBorder”:false,“borderColor”:“”,“borderWidth”:“”,“hotspotColor”:“#ddb00e”,“radius”:“”,“textColor”:“”,“textStyle”:“”,“height”:“”,“width”:“”,“fontSize”:“”,“autoPlay”:“”},“isObjectVisible”:true,“triggerEvent”:“on_tap”,“actionType”:“link_to_URL”,“actionData”:{“url”:“https://www.google.com”},“chatbot”:{“avatgt”:null,“avalink”:null,“avabot”:null,“avaaction”:null,“hotspotUrl”:null,“hotspotColor”:null,“bgColor”:null,“transparency”:null,“isBorder”:null,“borderColor”:null,“tatc”:null},“avatarSettings”:{“isMsgProp”:null,“pos”:{“x”:null,“y”:null,“z”:null},“rot”:{“x”:null,“y”:null,“z”:null},“scl”:{“x”:null,“y”:null,“z”:null},“textColor”:null,“bgColor”:null,“transparency”:null,“isBorder”:null,“borderColor”:null}},{“id”:“1003”,“name”:“new video”,“sceneId”:1,“meshType”:“video”,“isLock”:false,“position”:{“x”:1.8371280431747437,“y”:1.722477912902832,“z”:0.10000000149011612},“rotation”:{“x”:0,“y”:0,“z”:0},“scale”:{“x”:0.23,“y”:0.28,“z”:1},“mediaUrl”:“content/media/2051/en-us/4037ed27-d3d6-4709-ae4e-2da62e1b8474.mp4”,“mediaName”:“AI Video with Augumented”,“type”:“”,“replace”:false,“objectSettings”:{“transparency”:0,“isBackground”:false,“backgroundColor”:“”,“isBorder”:false,“borderColor”:“”,“borderWidth”:“”,“hotspotColor”:“”,“radius”:“”,“textColor”:“”,“textStyle”:“”,“height”:“”,“width”:“”,“fontSize”:“”,“autoPlay”:false},“isObjectVisible”:true,“actionData”:{},“chatbot”:{“avatgt”:“”,“avalink”:“”,“avabot”:“”,“avaaction”:“”,“hotspotUrl”:“”,“hotspotColor”:“”,“bgColor”:“”,“transparency”:0,“isBorder”:false,“borderColor”:“”,“tatc”:“”},“avatarSettings”:{“isMsgProp”:“”,“pos”:{“x”:“”,“y”:“”,“z”:“”},“rot”:{“x”:“”,“y”:“”,“z”:“”},“scl”:{“x”:“”,“y”:“”,“z”:“”},“textColor”:“”,“bgColor”:“”,“transparency”:0,“isBorder”:“”,“borderColor”:“”}}],“sceneType”:2,“mediaName”:“download.jpg”,“mediaUrl”:“content/media/2183/en-us/4b7a1e72-d6f9-4ac5-906b-434121c0f30e.jpg”}]

Code URL: Ar Tracking_Sample.zip - Google Drive

Output sample we are getting:

We’re seeking assistance from the community to diagnose and address this issue. Any insights, guidance, or potential solutions would be immensely appreciated.

Thank you sincerely,
Srinivas

One thing you can do to get more help is to reproduce the problem in the Playground

this code is build using blippar and babylonjs. So it won’t work directly on babylonjs playground.
You can preview code from URL below: Babylon.js WebAR SDK

Yes but we don’t debug in user code unfortunately:)

Help us helping you please

Here is the playground link requested:

Cc @RaananW if you don’t mind having a look for me?

1 Like

Would be very helpful to understand what I am seeing (or not seeing TBH :slight_smile: ). What are the steps to reproduce the issue? It’s a lot of code and an empty scene.

Is the issue the hit-test positioning?

1 Like

yes, the issue the hit-test positioning.

I am constructing the seen dynamically from JSON and we have one 3D object with two hotspots.

I want to maintain the hotspots positions correctly when place the 3D object. You can look into following functions to get an idea.

readJson and addObjectstotheScene

Hit test is working correctly. Your objects, at least when i tested that, were centered incorrectly. So placing them at a certain position will make it appear like they are in the wrong position, though they are, based on their origin.