Displaying an Object in AR
Get started by placing a single 3D object in AR using wiarframe
In this tutorial, we’ll use the wiarframe editor to upload a 3D model that we found online. We’ll then use the Wiarframe app to preview it in AR.
If you haven’t already, sign up for a free wiarframe account, and get an overview of the platform.
Create a new wiarframe
On the Home screen, click the Create Wiarframe button from the main action panel, located just below our profile.
In the popup form, give our wiarframe a name, for example ‘a solitARy object’.
Next, we pick a scene type. In wiarframe, scene types work as templates for setting up your AR experience and control how things like scaling and positioning are controlled — read more about scene types. In this example, we want to create a table topexperience.
Optionally, we can change the visibility for the wiarframe. By default, anyone can view and remix our wiarframes — read more about visibility.
Hit create, and we’ll be transported to the editor.
In the editor, a canvas represents our scene and depending on the scene type, a viewer avatar is positioned either at the center or stood outside overlooking. The default view for the canvas is top down but you can change this using the navigation controls on the top right. You can zoom in and out, using the scroll wheel or trackpad.
Adding an object
Our scene is looking pretty empty, so let us add an object. Click anywhere on the blank space to bring up the new object form.
Each object needs a name and an object type. We have two different object types in wiarframe, in this example, we’re going to add a 3D type — read more about object types.
When we type an object name (let’s call it Lighthouse), Wiarframe will automatically suggest some 3D models that we can use with just a single click, but in this tutorial let us upload the model manually, so that we can see the full process.
Uploading a 3D model
We use Google Poly as one of the sources of sample content in Wiarframe. It’s a website with a big selection of creative-commons-licensed low-fidelity 3D models — perfect for prototyping.
Have a look at this Lighthouse. You can download the source files for it by clicking the download button on the toolbar below the preview. You’ll be given a few different format options, and you should pick OBJ, this is a simple widely supported option.
Expand the downloaded zip folder, and you’ll find three files. An .obj, a .mtl, and a .png. The actual 3D geometry data is stored in the .obj, so drag that onto the upload box in the New Object form. This will popup the Asset Manager, where we can customize the uploaded file.
Uploading the Texture
You’ll notice a box called styles below the 3D preview. In the bottom of the styles box, you’ll see the main model style, which has two boxes, a colour swatch and a texture upload box.
Drag the downloaded .png file to the upload box, and your 3D preview will update.
The texture file is an image that is wrapped around the 3D model to add detail that would be too complicated to add with geometry and colours alone — it’s a bit like wallpaper.
The colour swatch is the main material colour, and you can think of this as a tint, leaving it white will use just the colours from the texture, whilst changing it will add a tint to those colours — feel free to experiment.
Note that not all 3D models use textures. Many simple ones will just use multiple material colours, making it very easy to customise through wiarframe.
#SideNote on Custom Materials. You’ll notice that there is a box below the Style header, that says something about generating styles from an .mtl file, this is optional. Where possible we analyse your uploaded 3D model and extract the material colours and associated texture information. If this doesn’t work or you have a custom material file then you can upload that here.
Adding Asset Info
As well as customise the 3D model, we can edit additional meta-data, like the name and attribution. If we scroll to the bottom of the form, we can set the attribution text to credit the author of this asset. Let’s set this to “Google Poly”.
We can also add a thumbnail image to make this asset easier to find in our collection later. Some downloads will include thumbnails you can upload, or alternatively, you can take a screenshot and upload it. For now, here’s a thumbnail direct from Google Poly that you can download and use. Tap the Add thumbnail button on the preview to upload it.
Saving the Asset
The last step is to scroll to the bottom and hit save, the asset will then be assigned to your 3D object. Next hit create and you object will be added to the scene.
Resizing & Repositioning
Once added to the scene, you’ll be able to manipulate the properties of the object such as Position, Rotation and Scale — read more about object properties.
The object is automatically scaled based upon the size of the table top we place it on. By default, it will use 20% of the surface space. Since it is the only object in our scene, we should resize it; you can do this either from the inspector on the right or by dragging the corners of the transformer on the canvas.
Experience it on mobile
As soon as you added your first object, you were able to view it in the App. If you haven’t already, download either the iOS or Android app now.
http://bit.ly/wiarframe-ios
http://bit.ly/wiarframe-android
Launch the App, log in, then select and load the ‘a solitARy object’ wiarframe. You’ll need to move your device around so that the camera can detect a tabletop. Tap on the surface you want to use. In the next step, you’ll have the option to reposition your scene and begin your experience.
One Last Thing
Our wiarframe is now complete, and it’s the first of many, so we need to make it easily findable later. In the editor, tap on the Cog icon in the header bar to bring up the wiarframe settings. Give it a description and upload a thumbnail (you can reuse the 3D model thumbnail). You can also click the bookmark icon from the bottom bar to add it to a collection. Why not make one called ‘Getting Started’ started and save it there.
Next Steps
You can experiment with different models, and try changing the textures and materials used. In the next lesson, we’ll look at how we make something more interactive.
