Create your first AR experience

To create your first AR experience, just follow the step-by-step explanation below.

Please note that this sample will show how to create a very basic AR experience; consisting of how to create a WonderPage which contains one trigger image and a simple text element as a digital overlay.

Open this link to access the genARate studio web tool: https://studio.genARate.com

Login with the provided account credentials

After successful login,  Studio Dashboard will be displayed.

For an easy start please click on the button “LET’S GO”.

A new window will appear with your first project.

Select your project, to activate the WonderPage section on the right side of the page

Click on ‘New WonderPage’ in upper right corner

You can choose between AR.Tile and AR.Create WondePage types.

AR.Tile 

The content is shown as “tiles” meaning initially you will see variety blocks with more information depending on the content on the phone screen.

The tiles are not shown “in relation” to the trigger image (= printed target). Whether you hold the triggered image in front of the camera or not, the AR blocks will be displayed. 

AR.Create 

Content is shown as “designed” in genARate studio.  The arrangement of AR content in relation to the triggered image (= printed target) will be identical on the phone. Content is shown always “related” to the trigger image in respect of size and position.

More possibilities for styling, positioning, interaction, …

Click on types below to read full description.  

How to:

Upload your trigger image (the image which will be used for image recognition in final experience)

Now you can see the uploaded trigger image as the background behind the phone frame in the WonderPage Editor.  

Please always make sure to add a title in the upper left corner, this is mandatory to be able to save your WonderPage later 

Before starting to add digital contents please click the button in the lower-left corner to see some more info about your uploaded trigger image. The star rating indicates whether your uploaded trigger image fulfills the requirements for the image recognition (‘tracking’)

0-1 Star

The image does not provide enough contrasts/rich elements for proper working image recognition, we highly recommend to use a different image

2-3 Stars

The image should work ‘OK’ but tracking might react sensitively to reflections or bad lighting conditions

4 Stars

The image provides rich contrasts and features for a properly working tracking

Please also note the other requirements and tips provided HERE!

If your trigger image meets all requirements you can go on with adding Augmentations to your AR experience

Use the toolbar on the left to select and add the individual content types.

 

For this basic scenario please add 'Image' element and drop Image files to upload or click Browse to select the file from your computer. 

A small square block with an uploaded image inside the phone frame will appear.

The individual settings of this element will open on the right in the Properties Panel (Thumbnail gets blue outline and settings will appear right of the editor, ‘Attributes’ will be preselected)

Label the Image with text in the tab ‘Overall‘

Change the color of the Icon and Text  in the tab ‘Appearance‘

 More settings for each content element can be found when you click on ‘Content’

Also feel free to add further contents like video, audio, link, contact, calendar event, or Place 3D.

Now save the WonderPage by clicking on the highlighted blue button in the upper right corner (Note: In case Save Button is greyed out, please enter a name for your WonderPage as explained above!)

After the WonderPage was saved successfully either close it (to go back to project overview and maybe create an additional WonderPage) or continue with testing/publishing.

Upload your trigger image (the image which will be used for image recognition in final experience)

Now you can see the uploaded trigger image as background in the WonderPage Editor.

Please always make sure to add a title in the upper left corner, this is mandatory to be able to save your WonderPage later

Before starting to add digital contents please click the button in the lower-left corner to see some more info about your uploaded trigger image. The star rating indicates whether your uploaded trigger image fulfills the requirements for the image recognition (‘tracking’)

0-1 Star

The image does not provide enough contrasts/rich elements for a proper working image recognition, we highly recommend to use a different image

2-3 Stars

The image should work ‘OK’ but tracking might react sensitive to reflections or bad lighting conditions

4 Stars

The image provides rich contrasts and features for a properly working tracking

Please also note the other requirements and tips provided here!

If your trigger image meets all requirements you can go on with adding contents to your AR experience

Use the toolbar on the left to select and  add the individual content types

For this basic scenario please add a simple 'Text' element and click on the 'Tt' button in the toolbar

A small thumbnail with a ‘Tt’ icon will appear in the upper left corner of the editor

When selecting it, the individual settings of this element will open on the right (Thumbnail gets blue outline and settings will appear right of the editor, ‘Attributes’ will be preselected)

More settings for each content element can be found when you click on ‘Content’ (Note: Tab `Content` does not exist for content-type `Image’!)

Go back to ‘Attributes’ and write ‘Hello World’ in the content field inside the Properties Panel, the written text should appear immediately inside the thumbnail as well.

Adjust the size, position, and color of the text inside the box as known from MS Office

Drag & Drop the text box with the mouse to place it at final position (fine-tuning can also be done in settings by using the according fields ‘Size’ and ‘Position’)

More advanced settings for the text box (Rotation/Opacity/Padding/Link/etc.) can be found at the lower end of tab ‘Attributes'. (To learn more: https://support.genarate.com/knowledge-base/augmentations/text-box/ )

Now save the WonderPage by clicking on the highlighted blue button in the upper right corner (Note: In case Save Button is greyed out, please enter a name for your WonderPage as explained above!)

After the WonderPage was saved successfully either close it (to go back to project overview and maybe create an additional WonderPage) or continue with testing/publishing

Also feel free to add further contents like, images, videos, buttons or even HTML elements or 3D models (HTML only recommended if you have relevant experience with HTML/JS/CSS)

Close Menu
Close Panel