{"_id":"5b74987b8326970003cfc12a","project":"578c4badbd223d2000cc1441","version":{"_id":"5b74987b8326970003cfc12d","project":"578c4badbd223d2000cc1441","__v":0,"forked_from":"5b6890bfd389ff000384fac1","createdAt":"2018-04-23T20:03:35.726Z","releaseDate":"2018-04-23T20:03:35.726Z","categories":["5b74987b8326970003cfc0a3","5b74987b8326970003cfc0a4","5b74987b8326970003cfc0a5","5b74987b8326970003cfc0a6","5b74987b8326970003cfc0a7","5b74987b8326970003cfc0a8","5b74987b8326970003cfc0a9","5b74987b8326970003cfc0aa","5b74987b8326970003cfc0ab"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.9.1","version":"2.9.1"},"category":{"_id":"5b74987b8326970003cfc0aa","project":"578c4badbd223d2000cc1441","version":"5b74987b8326970003cfc12d","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2018-05-24T22:57:04.021Z","from_sync":false,"order":4,"slug":"augmented-reality","title":"Augmented Reality"},"user":"579a69d53de0a217007eda56","githubsync":"","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-05-31T20:37:20.787Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"When you use a [<ViroARScene>](doc:viroarscene), the first thing you'll notice is the camera feed rendered as the background. That camera background represents the real world. Viro enables you to fuse virtual objects and UI with that real world. You accomplish this with tracking and anchors.\n[block:api-header]\n{\n  \"title\": \"Camera Tracking\"\n}\n[/block]\nThe Viro platform supports development of 6 degrees-of-freedom (6DOF) AR experiences which means that the platform responds to the user's rotation and position as they move about the world by moving the camera. The platform maintains the same right-handed coordinate system as it does in VR, in that the camera is initially at `[0,0,0]` with a forward vector of `[0, 0, -1]` and up vector of `[0,1,0]`\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2b217fb-camera.png\",\n        \"camera.png\",\n        607,\n        676,\n        \"#3cbbfb\"\n      ]\n    }\n  ]\n}\n[/block]\nWhen the user first enters the AR experience, the camera will remain at [0,0,0] while underlying AR system gets its bearing. After a few moments, the camera tracking will complete, the developer should receive the ```onTrackingInitialized``` callback in [<ViroARScene>](doc:viroarscene), and the camera should now track the user's movements around their world.\n[block:api-header]\n{\n  \"title\": \"Anchor Detection\"\n}\n[/block]\nThe primary way to add virtual content to the real-world is to listen for anchors detected by the AR system. Anchors are things like vertical or horizontal planes, or images (like posters or markers) found in the real world. For information on attaching content to images, see [Image Recognition](doc:ar-image-recognition). This guide describes the two methods of adding content to detected planes, through [<ViroARPlane>](doc:viroarplane).\n\n## Automatic Anchoring\n\nTo enable automatic anchoring, provide ```minHeight``` and ```minWidth``` properties to the [<ViroARPlane>](doc:viroarplane) component. Embed within the component (as children) the content you'd like to display when the plane is detected.\n\nWhen the AR system finds a plane that matches the given dimensions, the [<ViroARPlane>](doc:viroarplane) will anchor to the real world plane, and its child components will be made visible. Those components will be in the coordinate system of the plane. Any updates to the real-world plane will be given to the developer through the ```onAnchorFound```, ```onAnchorUpdated```, and ```onAnchorRemoved``` callback functions on [ViroARScene](doc:viroarscene).\n\nThe example below, for example, will display a box when a plane of at least 0.5 meters width and height is detected.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroARPlane minHeight={.5} minWidth={.5} alignment={\\\"Horizontal\\\"}>\\n  <ViroBox position={[0, .25, 0]} scale={[.5, .5, .5]  />\\n</ViroARPlane>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## Manual Anchoring\n\nManual anchoring lets the developer specifically choose a plane to use by listening for all incoming anchors, instead of having the platform choose the first available plane that matches declared requirements. \n\nTo listen for detected anchors, implement the ```onAnchorFound```, ```onAnchorUpdated``` and ```onAnchorRemoved``` listeners to the [ViroARScene](doc:viroarscene) component. Upon finding a suitable anchor, set the ```anchorId``` property of the plane in your render function that you would like to fix to that anchor. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroARPlane anchorId={foundAnchor.anchorId} >\\n  <ViroBox position={[0, .25, 0]} scale={[.5, .5, .5] />\\n</ViroARPlane>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"ar-tracking-and-anchors","type":"basic","title":"Tracking and Anchors"}

Tracking and Anchors


When you use a [<ViroARScene>](doc:viroarscene), the first thing you'll notice is the camera feed rendered as the background. That camera background represents the real world. Viro enables you to fuse virtual objects and UI with that real world. You accomplish this with tracking and anchors. [block:api-header] { "title": "Camera Tracking" } [/block] The Viro platform supports development of 6 degrees-of-freedom (6DOF) AR experiences which means that the platform responds to the user's rotation and position as they move about the world by moving the camera. The platform maintains the same right-handed coordinate system as it does in VR, in that the camera is initially at `[0,0,0]` with a forward vector of `[0, 0, -1]` and up vector of `[0,1,0]` [block:image] { "images": [ { "image": [ "https://files.readme.io/2b217fb-camera.png", "camera.png", 607, 676, "#3cbbfb" ] } ] } [/block] When the user first enters the AR experience, the camera will remain at [0,0,0] while underlying AR system gets its bearing. After a few moments, the camera tracking will complete, the developer should receive the ```onTrackingInitialized``` callback in [<ViroARScene>](doc:viroarscene), and the camera should now track the user's movements around their world. [block:api-header] { "title": "Anchor Detection" } [/block] The primary way to add virtual content to the real-world is to listen for anchors detected by the AR system. Anchors are things like vertical or horizontal planes, or images (like posters or markers) found in the real world. For information on attaching content to images, see [Image Recognition](doc:ar-image-recognition). This guide describes the two methods of adding content to detected planes, through [<ViroARPlane>](doc:viroarplane). ## Automatic Anchoring To enable automatic anchoring, provide ```minHeight``` and ```minWidth``` properties to the [<ViroARPlane>](doc:viroarplane) component. Embed within the component (as children) the content you'd like to display when the plane is detected. When the AR system finds a plane that matches the given dimensions, the [<ViroARPlane>](doc:viroarplane) will anchor to the real world plane, and its child components will be made visible. Those components will be in the coordinate system of the plane. Any updates to the real-world plane will be given to the developer through the ```onAnchorFound```, ```onAnchorUpdated```, and ```onAnchorRemoved``` callback functions on [ViroARScene](doc:viroarscene). The example below, for example, will display a box when a plane of at least 0.5 meters width and height is detected. [block:code] { "codes": [ { "code": "<ViroARPlane minHeight={.5} minWidth={.5} alignment={\"Horizontal\"}>\n <ViroBox position={[0, .25, 0]} scale={[.5, .5, .5] />\n</ViroARPlane>", "language": "javascript" } ] } [/block] ## Manual Anchoring Manual anchoring lets the developer specifically choose a plane to use by listening for all incoming anchors, instead of having the platform choose the first available plane that matches declared requirements. To listen for detected anchors, implement the ```onAnchorFound```, ```onAnchorUpdated``` and ```onAnchorRemoved``` listeners to the [ViroARScene](doc:viroarscene) component. Upon finding a suitable anchor, set the ```anchorId``` property of the plane in your render function that you would like to fix to that anchor. [block:code] { "codes": [ { "code": "<ViroARPlane anchorId={foundAnchor.anchorId} >\n <ViroBox position={[0, .25, 0]} scale={[.5, .5, .5] />\n</ViroARPlane>", "language": "javascript" } ] } [/block]