{"id":33734,"date":"2017-10-12T12:28:50","date_gmt":"2017-10-12T19:28:50","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=33734"},"modified":"2017-10-12T12:28:50","modified_gmt":"2017-10-12T19:28:50","slug":"bring-3d-models-life-augmented-reality-urhosharp","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/bring-3d-models-life-augmented-reality-urhosharp\/","title":{"rendered":"Bring 3D Models To Life in Augmented Reality with UrhoSharp"},"content":{"rendered":"<p>\t\t\t\tUrhoSharp brings 3D to a variety of platforms and uses its own binary <code>mdl<\/code> format for model files. There are many sources for 3D models, including <a href=\"https:\/\/www.cgtrader.com\">cgtrader<\/a> and <a href=\"https:\/\/www.turbosquid.com\">TurboSquid<\/a>, and formats such as <code>FBX<\/code>, <code>OBJ<\/code>, <code>DAE<\/code> and <code>BLEND<\/code>. Urho3D provides tools like AssetImporter and the Urho3D Blender Add-in so you can use these models. In this post, we&#8217;ll look at these tools more closely and explain how to easily integrate them into your apps.<\/p>\n<h2>Importing 3D Assets with the Urho3D\u00a0Blender Add-in<\/h2>\n<p>Since we&#8217;re building an ARKit application, and interior design is a fitting use case for AR, I&#8217;ve found a furniture model for this example.<\/p>\n<h5><em>Note* This post assumes some knowledge of the 3D Modeling software, Blender. If you&#8217;re not familiar with this tool and would like a primer, check out the\u00a0<a href=\"https:\/\/www.blender.org\/support\/tutorials\/\">tutorials section<\/a>.\u00a0<\/em><\/h5>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-33751\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/UrhoSharpBlog1.png\" alt=\"\" width=\"718\" height=\"675\" \/><\/p>\n<ul>\n<li>First, <a href=\"https:\/\/github.com\/reattiva\/Urho3D-Blender\">download the Urho3DBlender add-in and follow the installation guide.<\/a><\/li>\n<li>Then, <a href=\"https:\/\/www.cgtrader.com\/3d-models\/furniture\/cabinet\/bookshelf02-vr-ar-game-ready\">import this beautiful bookshelf<\/a> created by Satish Parab into Blender. <em>(This can easily be done via the <code>File -&gt; Import fbx<\/code> menu.)<\/em><\/li>\n<li>Now, export your model to Urho by cooking a Urho prefab from the model. <em>(A set of preconfigured nodes, models, and materials.)<\/em><\/li>\n<\/ul>\n<p>In order to do this, find the Urho3D Exporter configuration panel located in the <code>Properties<\/code> panel:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-33746\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/UrhoSharp1.png\" alt=\"\" width=\"367\" height=\"999\" \/><\/p>\n<p>To export a prefab, select the following options:<\/p>\n<ol>\n<li>Choose a location to save via the <code>Output folder<\/code>.<\/li>\n<li>Objects &#8211; <code>All<\/code>. <em>To select specific objects in the Outliner, choose <code>Only Selected<\/code><\/em>.<\/li>\n<li>Export <code>Geometries<\/code>, <code>Materials<\/code>, and <code>Textures<\/code>.<\/li>\n<li>Export <code>Urho Prefabs<\/code> and check <code>One Collective<\/code><\/em>.<\/li>\n<li>Optionally, to interact with the object, add <code>Physics (collision shapes, rigid bodies)<\/code>.<\/li>\n<\/ol>\n<p>Click the magic <code>Export<\/code> button and go to the output directory, which will look like this:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-33747\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/UrhoSharp2.png\" alt=\"\" width=\"896\" height=\"428\" \/><\/p>\n<p>Our prefab consists of several folders and files:<\/p>\n<ol>\n<li><code>Materials<\/code>: Tell shaders which textures, techniques, and parameters to use.<\/li>\n<li><code>Models<\/code>: Custom binary files representing 3D geometries.<\/li>\n<li><code>Objects<\/code>: An XML file describing our prefab as a set of nodes, transforms, models, and materials.<\/li>\n<li><code>Textures<\/code>: Diffuse maps, normal maps, specular maps, etc.<\/li>\n<\/ol>\n<h2>Import 3D Assets Using AssetImporter<\/h2>\n<p>Unlike the Urho3D Blender Add-in, AssetImporter is a command line interface (CLI) tool (based on Assimp). You can find the executable file in the <a href=\"https:\/\/www.nuget.org\/packages\/UrhoSharp.Tools\/\">UrhoSharp.Tools package<\/a>. In order to convert an <code>FBX<\/code> file into a prefab, simply execute it with the following parameters:<\/p>\n<p><code>AssetImporter.exe node file.fbx prefab.xml<\/code><\/p>\n<p>To quickly review the results, there&#8217;s also a small WPF\/Cocoa application over the AssetImporter CLI which can be found <a href=\"https:\/\/github.com\/EgorBo\/UrhoAssetImporter\">on GitHub<\/a>. Now, simply add these files to your project and set the correct Build Action; for iOS it\u2019s <code>BundleResource<\/code>:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-33749\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/UrhoSharp4.png\" alt=\"\" width=\"599\" height=\"640\" \/><\/p>\n<h2>Defining a Scene<\/h2>\n<p>The easiest way to define a scene is to subclass <code>SimpleApplication<\/code>, which contains a preconfigured scene with lights, cameras, and other components that you won\u2019t need to create yourself.<\/p>\n<pre>\n<code>\npublic class UrhoApp: SimpleApplication\n{\n    public UrhoApp(ApplicationOptions opts) : base(opts) { }\n\n    protected override unsafe void Start()\n    {\n        base.Start();\n\n        var bookshelfNode = Scene.InstantiateXml(\n            source: ResourceCache.GetFile(\"Objects\/Scene.xml\"),\n            position: new Vector3(x: 0, y: -1f, z:1f),\n            rotation: new Quaternion(90, 0, -90));\n        bookshelfNode.SetScale(0.5f);\n    }\n}\n<\/code>\n<\/pre>\n<p><code>Scene.InstantiateXml<\/code> will create a copy of the prefab defined in the assets with a given position, i.e. one meter away, one meter down.<\/p>\n<h2>Launching this Scene<\/h2>\n<p>Simply add a <code>UrhoSurface<\/code> (<code>UIPanel<\/code>) anywhere in your iOS app\u2019s layout. As a root view, for example:<\/p>\n<pre>\n<code>\nvar surface = new UrhoSurface(UIScreen.MainScreen.Bounds);\nWindow.RootViewController.View.AddSubview(surface);\nWindow.MakeKeyAndVisible();\nsurface.Show(new ApplicationOptions {\n    ResourcePaths = new [] { \"BookshelfData\"}\n});\n<\/code>\n<\/pre>\n<p>This also shows how easily you can embed Urho into any existing UIKIt app as a (sub)view.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-33750\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/UrhoSharp5.png\" width=\"1600\" height=\"816\" \/><\/p>\n<h2>Combine it all with ARKit<\/h2>\n<p>In order to show the model in Augmented Reality powered by ARKit:<\/p>\n<ol>\n<li>Add the ARKit-specific assets (such as YCbCr shader, etc.).<\/li>\n<li>Then add the base Arkit Application class, described in the <a href=\"https:\/\/developer.xamarin.com\/guides\/ios\/platform_features\/introduction-to-ios11\/arkit\/urhosharp\/\">Using ARKit with UrhoSharp<\/a><\/li>\n<p> guide.<\/p>\n<li>And subclass the <code>ArkitApp<\/code> class instead of SimpleApplication.<\/li>\n<li>Run!<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-33760\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/ezgif.com-optimize.gif\" alt=\"Bookshelf showing with ARKit\" width=\"500\" height=\"375\" \/><\/p>\n<p><code>ArkitApp<\/code> will be available with the UrhoSharp NuGet package in the near future and will also support Google ARCore so you will be able to play with UrhoSharp and AR on Android devices as well. The final demo is available on my <a href=\"https:\/\/github.com\/EgorBo\/UrhoArkitTemplate\">GitHub<\/a>. Assets are not included due to the license.<\/p>\n<p>If you would like to learn more about UrhoSharp, make sure to <a href=\"https:\/\/developer.xamarin.com\/guides\/cross-platform\/urho\/using\/\">visit the documentation in the Xamarin Developer Center<\/a>!<\/p>\n<p><a href=\"https:\/\/forums.xamarin.com\/\">Discuss this post on the forums.<\/a>\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UrhoSharp brings 3D to a variety of platforms and uses its own binary mdl format for model files. There are many sources for 3D models, including cgtrader and TurboSquid, and formats such as FBX, OBJ, DAE and BLEND. Urho3D provides tools like AssetImporter and the Urho3D Blender Add-in so you can use these models. In [&hellip;]<\/p>\n","protected":false},"author":1959,"featured_media":33751,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[6,4],"class_list":["post-33734","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-ios","tag-xamarin-platform"],"acf":[],"blog_post_summary":"<p>UrhoSharp brings 3D to a variety of platforms and uses its own binary mdl format for model files. There are many sources for 3D models, including cgtrader and TurboSquid, and formats such as FBX, OBJ, DAE and BLEND. Urho3D provides tools like AssetImporter and the Urho3D Blender Add-in so you can use these models. In [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/33734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1959"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=33734"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/33734\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=33734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=33734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=33734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}