tracking.js
tracking.js copied to clipboard
eduardolundgren
Track 3D position/projection. Supported?
Hello, I'm considering tracking.js for a small augmented reality game/application. Instead of using a marker, I'm considering tracking.js to track a colored rectangle, a custom object/image, etc. So, I wonder if it is possible to track the 3D position/projection of any of the detected objects, in order to translate this position to a 3D object. Thanks!
As I also want to achieve that, but haven't had the time yet, to test it (nor to read the Docs), here would be the idea that first came into my mind:
First of all, give the user an option to "calibrate", which would then get the initial width and height of the rect/Real object. Let's call those two iW and iH.
Then, when the player clicks play, or whatever, there could be something like this:
- For width:
iW - rect.width - For height:
iH - rect.height
These would return a negative value if the current width/height is larger than the initial, and a positive value, if it's smaller. With that value, you then can scale the virtual object relative to what the initial values were, and of course, use x and y, to move it 😄
Hope this may point you in the right direction (though I can't assure, that this IS the right approach, as it is just my first thought on it!)
Hi AnthyG for your suggestion. As far as I know, there's nothing in tracking.js that could give us a proper 3D position. Hopefully someone with more experience with tracking.js will confirm or not.
I think your approach is fine and it will give you scale and x/y position. But, let's say that I'm using an image placed over a table and I'm trying to load a 3D object on top of it. Following this example, you wouldn't get a proper 3D position in space to load the 3D object and positioning the object following the table projection, the 3D object would look like a 2D "sticker" perhaps. Hope you understand what I mean. Thanks!
@blumersolutions Well, you could send the data to something like three.js, as one is not just limited to a html5-canvas element!
And it may be possible to even generate a 3d-Object using a colored square on a table, as the lower base for the virtual 3d-Cube.
Ahem, here a really good looking example: 😁
With this, the square can be moved on the table, providing the base for the generated cube.. and you could also use different colors for each of the corners/edges, so if one corner/edge is blue, and the other is red, the script can tell, which side of the cube is currently at the front, and which at the back so you could ..eventually.. turn it!
But I believe this can't be achieved with "any" image, so.. yes, I think I do understand what you mean 😄
@blumersolutions are you making a web app? if the answer is yes: do you successfully render 3D model while getting tracking data? as far as I have tried, can render a 2D/3D canvas tracked, but can not render a loaded model (made in Cinema 4D and exported to webgl, for example) using three.js
@AnthyG haha I like your approach. Unfortunately we had to change the experience to a 2D - 2.5D. Anyways, thanks for your idea!
Thanks Claudio, just sent an email in spanish dear argentinean friend :)
On Thu, Jan 12, 2017 at 2:13 PM, Claudio M. E. Bastos Iorio < [email protected]> wrote:
Hi @lucasroth https://github.com/lucasroth , I've just replied in your issue :D
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/eduardolundgren/tracking.js/issues/193#issuecomment-272223357, or mute the thread https://github.com/notifications/unsubscribe-auth/AE7d9TE0D2t62tAdwBQm0yW3qfUE07Ixks5rRl9PgaJpZM4LXfkb .
-- Lucas Roth Ing Civil Industrial PUCV movil: 96347193
