WebAR Playground: AR in a Few Clicks
The Easiest Way To Create & Share Augmented Reality on the Web
The Idea Behind WebAR Playground
WebAR Playground is a simple, easy-to-use app, designed for those who aren’t experienced programmers or AR devs, but still want to enjoy the tech and create their own experiences.
We wanted to provide an easy way to create AR content that could be used by everyone anywhere. You don’t need to understand 3d or programming to use it!
We have this crazy idea that anyone can do AR! So we decided to create a simple application for you to play around, and experiment, with WebAR. In this blogpost you will see our results. We encourage you to try it for yourselves.
Creating and Sharing AR Content on The Web
You can easily create an AR scene with WebAR Playground in just a few clicks. When you launch the app, you will see there are various 3d objects for you to choose from (predefined content examples — some of them we dowloaded from SkecthFab) You can move the objects around the scene, rotate them, change their size…etc. Later in this post, we will explain how to use the app step by step.
One key part of WebAR Playground is the URL shareability. Once you have created your scene you will be able to export your content and show it to the world. By clicking on the “Export URL” button, you get a shareable link that you can copy. Whoever clicks on this link will be able to access your AR scene, see what you have created, and even edit on top of it.
This shareability is what makes WebAR Playground special. It is a web solution with an important advantage: Enabling you to share your AR content anywhere on the web (just by clicking on a url!). It’s a brand new way to distribute augmented reality on the Internet! Pretty cool right?
How To Use WebAR Playground?
The Complete UI
Explaining the UI One Menu At a Time
- Create Object Menu:
The “Create Object” menu allows you to add an object to you scene. On the bottom left sidebar you will see a list of categories with different 3d elements e.g minecraft characters, gltf models, geometric shapes, magic windows (portals) and holograms. You can click on any of these. Then you will go into a list of more detailed options to choose from.
As you see on the screenshot above, you can add a Minecraft “Batman”, “Superman” or “Mario”. They will appear on top of your AR markers. You also have a “Back” button to come back to the previous level of menu.
The 3d object you choose will be added to your scene. And voilà you have created some AR in just a few clicks!
2. Area Menu
The “Area” menu is located to the right of the “Create Object” menu. It handles all the area learning for the markers. The list has something very interesting called the “Marker Helpers” checkbox. This provides a visual feedback of what AR.js is seeing on the screen. For example, it can help you determine if the lighting on the markers is okay and not interfering with the tracking. It is useful to know if you have learned the proper positions.
There is also a “Reset Area” button which resets all the area to the default Hiro single marker. Finally, there is “Learn Area” which takes you to the area learning UI.
3. Options Menu
Right next to the “Area” menu you have the “Options” menu. It contains various elements like “Toggle Fullscreen” (self-explanatory). Another element is “Reset AR” to delete all the AR content that you have previously added on your scene, and come back to the basic rotating cube example.
Most importantly, there is “Export Share URL” and sharing on social networks (Twitter, Facebook). One essential point to WebAR Playground is that it allows you, not only to create, but also to easily share AR content on the Internet!
4. Current Object Menu
Last but not least is the “Current Objects” menu. This is the list of all the objects that you have created on your scene. In this case, we have added 3 Minecraft characters (Batman, Superman and Mario). You can select them, and you will see a feedback highlighting the one that you selected on the screen. You can also delete them with the little x on the side.
Position, Rotation and Scale
- Positioning the object
Once you have chosen your 3d object in “Create Object” menu, you need to add it to you scene. To position it on your scene you just click where you want it to be displayed, and it will appear — just like Minecraft Batman in the example above.
2. Scaling the object
You can scale the object by holding the left click and dragging your mouse up (to make the object bigger) and down (to make the object smaller)
3. Rotating the object
You can rotate the object by holding the left click and dragging your mouse left or right. Move your mouse depending on which direction you want the object to rotate.
And there you have it! A simple way to edit your 3d objects and create an AR scene!
You can also take a look at this detailed video explaining how get started with WebAR Playground:
What’s Next?
We’ve seen how easy it is to build your own AR content in just a few clicks. Now what? Well, WebAR Playground was made for experimentations. So go ahead, build something awesome and share it with everybody! Don’t let your doubts stop you, you can be as creative as anyone!
WebAR Playground is a fast-moving project. It’s constantly evolving! Don’t be surprise if some things change in the future. We are improving it every day. For example, we are working on building AR.js on Tango through WebAR Playground (meaning without markers!)
If you liked this post, you might want to subscribe to our newsletter and check out this augmented website project, also part of webxr.io
Until next time!
