{"_id":"5bec8a59a9db0c0012d5410d","project":"5a065a6134873d0010b396ab","version":{"_id":"5bec8a59a9db0c0012d54110","project":"5a065a6134873d0010b396ab","__v":0,"forked_from":"5ba1a04d4f89f700039d85d0","createdAt":"2018-04-18T18:19:34.288Z","releaseDate":"2018-04-18T18:19:34.288Z","categories":["5bec8a59a9db0c0012d540d4","5bec8a59a9db0c0012d540d5","5bec8a59a9db0c0012d540d6","5b05923ea5a2f9000357b452","5b05f793c2c86c0003cbe414","5bec8a59a9db0c0012d540d7","5bec8a59a9db0c0012d540d8","5bec8a59a9db0c0012d540d9"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.12.0","version":"1.12.0"},"category":{"_id":"5bec8a59a9db0c0012d540d7","project":"5a065a6134873d0010b396ab","version":"5bec8a59a9db0c0012d54110","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2018-05-24T14:09:29.251Z","from_sync":false,"order":2,"slug":"develop-ar","title":"Augmented Reality"},"user":"579a69d53de0a217007eda56","githubsync":"","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-05-24T14:13:01.909Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"Image recognition is a key component of AR: it enables you to *interpret* the real world and *respond* to it accordingly. This guide provides an overview of Viro's image recognition capabilities.\n[block:api-header]\n{\n  \"title\": \"Image Targets\"\n}\n[/block]\nImage targets are the reference images that Viro will recognize and track. For example, if you provide an image target of a Tesla logo, then every time your application encounters a Tesla logo you can get a callback; and in that callback, you can create virtual UI about the logo. An example of this is below:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/58b02e2-viro_car_marker_demo.gif\",\n        \"viro_car_marker_demo.gif\",\n        600,\n        338,\n        \"#9c826b\"\n      ]\n    }\n  ]\n}\n[/block]\nImage targets in Viro are represented by [ARImageTarget](https://developer.viromedia.com/virocore/reference/com/viro/core/ARImageTarget.html). You can construct an ARImageTarget out of any Bitmap. To start searching for the logos, add them to your ARScene with [ARScene.addARImageTarget(ARImageTarget)][1]. When Viro detects the image in the user's world, you will receive an [onAnchorFound(ARAnchor, ARNode)][2] callback in your attached ARListener. You can then go ahead and add content to the provided ARNode, which will continually track and stay synchronized with the detected image.\n\nIn the example below, we do this with a \"Black Panther\" movie poster. Upon detecting the poster, we load a 3D object representing the Black Panther, and make him jump out of the poster.\n\n[1]:https://developer.viromedia.com/virocore/reference/com/viro/core/ARScene.html#addARImageTarget(com.viro.core.ARImageTarget)\n[2]: https://developer.viromedia.com/virocore/reference/com/viro/core/ARScene.Listener.html#onAnchorFound(com.viro.core.ARAnchor,%20com.viro.core.ARNode)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Create the base ARScene\\nScene scene = new ARScene();\\n\\n// Create an ARImageTarget out of the Black Panther poster\\nBitmap blackPantherPoster = getBitmapFromAssets(\\\"poster.jpg\\\");\\nfinal ARImageTarget imageTarget = new ARImageTarget(blackPantherPoster, ARImageTarget.Orientation.Up, 0.188f);\\nscene.addARImageTarget(imageTarget);\\n\\n// Create a Node containing the Black Panther model\\nfinal Object3D blackPantherModel = loadBlackPantherModel();\\nfinal Node blackPantherNode = loadBlackPantherNode(blackPantherModel);\\nscene.getRootNode().addChildNode(blackPantherNode);\\n\\n// Set an ARScene.Listener to get a callback when the poster is found\\nscene.setListener(new ARScene.Listener() {\\n    :::at:::Override\\n    public void onAnchorFound(ARAnchor anchor, ARNode arNode) {\\n        String anchorId = anchor.getAnchorId();\\n      \\n        // Ensure the image target Viro found is our poster\\n        if (!imageTarget.getId().equalsIgnoreCase(anchorId)) {\\n            return;\\n        }\\n\\n        // Push the panther down and a little bit into the poster\\n        blackPantherNode.setPosition(new Vector(0, -0.4, -0.15));\\n        arNode.addChildNode(blackPantherNode);\\n      \\n        blackPantherModel.getAnimation(\\\"01\\\").play();\\n    }\\n\\n    @Override\\n    public void onAnchorRemoved(ARAnchor anchor, ARNode arNode) {\\n        String anchorId = anchor.getAnchorId();\\n        if (!imageTarget.getId().equalsIgnoreCase(anchorId)) {\\n            return;\\n        }\\n        blackPantherNode.removeFromParentNode();\\n    }\\n  \\n    // Other ARScene.Listener methods are no-ops\\n \\t\\t// ...\\n});\\n\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\nThe full code for this sample is contained in the [ViroCore Samples](https://github.com/viromedia/virocore/tree/master/ARBlackPanther) repository. The final result will look like this:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/fb7b0df-viro_black_panther_marker_demo.gif\",\n        \"viro_black_panther_marker_demo.gif\",\n        600,\n        278,\n        \"#4b4547\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"ar-image-recognition","type":"basic","title":"Image Recognition"}
Image recognition is a key component of AR: it enables you to *interpret* the real world and *respond* to it accordingly. This guide provides an overview of Viro's image recognition capabilities. [block:api-header] { "title": "Image Targets" } [/block] Image targets are the reference images that Viro will recognize and track. For example, if you provide an image target of a Tesla logo, then every time your application encounters a Tesla logo you can get a callback; and in that callback, you can create virtual UI about the logo. An example of this is below: [block:image] { "images": [ { "image": [ "https://files.readme.io/58b02e2-viro_car_marker_demo.gif", "viro_car_marker_demo.gif", 600, 338, "#9c826b" ] } ] } [/block] Image targets in Viro are represented by [ARImageTarget](https://developer.viromedia.com/virocore/reference/com/viro/core/ARImageTarget.html). You can construct an ARImageTarget out of any Bitmap. To start searching for the logos, add them to your ARScene with [ARScene.addARImageTarget(ARImageTarget)][1]. When Viro detects the image in the user's world, you will receive an [onAnchorFound(ARAnchor, ARNode)][2] callback in your attached ARListener. You can then go ahead and add content to the provided ARNode, which will continually track and stay synchronized with the detected image. In the example below, we do this with a "Black Panther" movie poster. Upon detecting the poster, we load a 3D object representing the Black Panther, and make him jump out of the poster. [1]:https://developer.viromedia.com/virocore/reference/com/viro/core/ARScene.html#addARImageTarget(com.viro.core.ARImageTarget) [2]: https://developer.viromedia.com/virocore/reference/com/viro/core/ARScene.Listener.html#onAnchorFound(com.viro.core.ARAnchor,%20com.viro.core.ARNode) [block:code] { "codes": [ { "code": "// Create the base ARScene\nScene scene = new ARScene();\n\n// Create an ARImageTarget out of the Black Panther poster\nBitmap blackPantherPoster = getBitmapFromAssets(\"poster.jpg\");\nfinal ARImageTarget imageTarget = new ARImageTarget(blackPantherPoster, ARImageTarget.Orientation.Up, 0.188f);\nscene.addARImageTarget(imageTarget);\n\n// Create a Node containing the Black Panther model\nfinal Object3D blackPantherModel = loadBlackPantherModel();\nfinal Node blackPantherNode = loadBlackPantherNode(blackPantherModel);\nscene.getRootNode().addChildNode(blackPantherNode);\n\n// Set an ARScene.Listener to get a callback when the poster is found\nscene.setListener(new ARScene.Listener() {\n @Override\n public void onAnchorFound(ARAnchor anchor, ARNode arNode) {\n String anchorId = anchor.getAnchorId();\n \n // Ensure the image target Viro found is our poster\n if (!imageTarget.getId().equalsIgnoreCase(anchorId)) {\n return;\n }\n\n // Push the panther down and a little bit into the poster\n blackPantherNode.setPosition(new Vector(0, -0.4, -0.15));\n arNode.addChildNode(blackPantherNode);\n \n blackPantherModel.getAnimation(\"01\").play();\n }\n\n @Override\n public void onAnchorRemoved(ARAnchor anchor, ARNode arNode) {\n String anchorId = anchor.getAnchorId();\n if (!imageTarget.getId().equalsIgnoreCase(anchorId)) {\n return;\n }\n blackPantherNode.removeFromParentNode();\n }\n \n // Other ARScene.Listener methods are no-ops\n \t\t// ...\n});\n", "language": "java" } ] } [/block] The full code for this sample is contained in the [ViroCore Samples](https://github.com/viromedia/virocore/tree/master/ARBlackPanther) repository. The final result will look like this: [block:image] { "images": [ { "image": [ "https://files.readme.io/fb7b0df-viro_black_panther_marker_demo.gif", "viro_black_panther_marker_demo.gif", 600, 278, "#4b4547" ] } ] } [/block]