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

Jerome Etienne on Twitter

Much better looking models in webar-playground - recorded on my phone. #AR 😃 https://t.co/spK8FBIYFd

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

1. 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

1. 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!)

Jerome Etienne on Twitter

More of AR.js on tango! All built thru webar-playground #AR 😃 https://t.co/gbjUbbAEAa

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!

WebAR Playground: AR in a Few Clicks was originally published in ARjs on Medium, where people are continuing the conversation by highlighting and responding to this story.

Multi-markers are an interesting way of displaying Augmented Reality. They increase tracking performance and enhance the stability of the 3d. There are many advantages of using multi-markers. In this post, we will go through the basic concept, and a step by step to try it yourself. It has a sweet workflow.

Multi-Markers are Great!

The term multi-marker means using more than one marker at a time. Before, we used only one square marker e.g Hiro marker. This is nice but we can go much further. With multi-markers, we have multiple markers acting as one larger marker.

So a multi-marker is basically a group of markers acting as one.

They have several key advantages which make your AR larger and more stable. They also provide a more robust detection. We have designed a UX with a sweet workflow to learn new areas of the markers.

Advantages of Multi-Markers

Multi-markers have useful features that provide significant advantages when developing AR.

More Stable: AR is less shaky and has a higher quality.

More Robust: The 3d displayed in AR won’t disappear. It will remain visible even if you move far away from the multi-marker.

So you end with much larger augmented reality, like in this video:

Another important advantage is that since all the markers act as one, even if only one marker is visible, the multi-marker position will still be tracked properly! Pretty cool, right?

Multi-Marker Sweet Workflow

There are two modes in this workflow: the player and the learner.
The player is the one using the multi-marker to display an augmented reality experience on top of it. Obviously before this, you need to learn the area where all your markers are placed.

Let’s see how its done, step by step.

Step 1: Launching The Learner Mode

Learning the area is very simple. You start by launching the learner mode. To do this, you click the green button that you see on the bottom right corner of the screen.

Step 2: Learning The Area

Then you move the camera of your device around the area to start learning. The goal here is to detect the exact position of the markers and the distance between them.

You will see a UI in the bottom left corner of the screen with a list of the markers being learned. When a green check appears next to each of them, that means the learning process is done.

Note: It is very important that you don’t move the markers once you have learned them, their position is considered stable, and must remain like this.

Step 3: Displaying your AR content

Once you have finished learning the markers, you need to return to player mode. To do this, you simply click again on the green button.

Now you will be able to display the 3d on top of the multi-marker!

Here is a short video to summarize all the steps and show you the result:

I hope you guys enjoyed learning about multi-markers. Now go out there and create amazing AR experiences yourselves! Don’t forget to share them with us via Twitter, and thumbs up if you liked this post ;)

Area Learning with Multi-Markers in AR.js was originally published in ARjs on Medium, where people are continuing the conversation by highlighting and responding to this story.

Most of AR.js demos use the Hiro marker. It is nice but people often want to personalise the marker. For example, they may want to use their avatar or their logo. They want to make it more suitable for their own usage. So I wrote a tool to create new markers in 3 easy steps.

1. Upload your image — the one that appears inside the black boundary.
2. Download the trained marker — and use it in your AR experience.
3. Download the marker image — to print it.

Click here to start training a marker

It is very simple! Let’s get started.

Step 1 — Upload Your Image

First you upload an inner image. This is the image that you want to appear inside the black square of the marker.

Step 2— Download the Trained Marker

Then you download the trained marker by clicking on the download button. You will need to add it to your code, thus it is aware of this new marker.

Step 3— Get The Marker Image

Finally, you can either right click the marker image and “save image as” to your computer, or you can export it to PDF and print it on paper. Your call ;)

Step 4— Include it in your Code

This file contains the encoded marker that you should reuse in your code. You specify you want a pattern marker and you provide the url to your own marker. So just replace this in your code.

The End 😄

That was easy right?

For further details on what are the characteristics of a good marker, read more here.

Thanks for reading, and if you like this post, don’t forget to share 😉

How To Create your Own Marker ? was originally published in ARjs on Medium, where people are continuing the conversation by highlighting and responding to this story.

Textures are the way we dress the objects in our scene, their skin layer.

Applying an image texture is very simple. We can apply it to every entity, no matter their form.

Getting Started

Let’s say we have <a-box> entity inside our scene.

We can apply the texture to our box by copying the url of the image we want to use, and then pasting it as a value of the src (source) attribute. Just like below:

Also, I suggest that you remove the color of your entity before pasting the image texture — that way the texture is not modified by the red of the box. Remember that the default color for an entity is white.

After applying the image texture, you get this result:

If you don’t like that particular texture, there are much more assets that you can try. You can explore a great collection of them here.

Some examples of other image textures on our box:

That’s pretty cool if you ask me!

Creating Earth

If you want to recreate planet Earth, you will need the texture above, (also part of the collection of a-frame sample assets.)

Then you create <a-sphere> entity and paste the url of the image texture in the src attribute just like before. Easy right?

As you see, we’ve also added a segments-height attribute to our sphere. This is used to smooth out the edges of our Earth, to make the geometry rounder and less “pointy”. We can play around with the value until it’s perfect (the lower the value, the “pointier” the sphere)

That’s it! You now have a full, round, beautiful planet Earth that you can add to your scene, animate and even get in VR! And when combined with animations and a skybox background, it has a pretty cool effect:

Alexandra Etienne on Twitter

NEW How to add a Skybox to your @aframevr scene on @CodePen Tutorial ft. heart-pumping Earth &amp; #tweenjs https://t.co/XkHdju3pWV #TechTuesday https://t.co/Tpq4rG9qBD

If you guys liked this post, you can also check out my full video tutorial.

Thanks for reading :)

Learning A-Frame: Adding Image Textures was originally published in WebVR on Medium, where people are continuing the conversation by highlighting and responding to this story.

Animations are a key part of all great 3d creations out there. They attract our eye and bring our scene to life.

We can very easily create animations in A-Frame placing the <a-animation> element inside the object/entity we want to animate. We can then decide which properties we want to animate. With this in mind, we can make our entity move the way we want, modifying attributes like its position, rotation, scale and even the color.

Let’s take a look at each one:

Position Animation

So we have a scene, with a box entity. Attaching the animation as a child of our box, we label the attribute “position” — To learn more about all the attributes that you can use with animations see here. Then we can change variables like:

• dur (duration in milliseconds of the animation) in this case 3000 — the higher the value the slower it will move.
• from (where the animation starts) in this case a value of -5 in the x axis
• to (where the animation ends) in this case 5 in the x axis
• repeat (how many times do you want your animation to, well, repeat) in this case its “indefinite”, so it will go on forever.

The rest of the code is just adding a light-yellow sky and adjusting the position of the camera.

Result:

Rotation Animation

So in this example, same thing, the animation is a child of the box entity. However, the attribute is labeled as “rotation”. The dur has the same value and the repeat is left as “indefinite”. No need to define a from attribute, since we want our box to rotate at 360° in the y axis, we just define the to attribute to that value.

We introduce the easing attribute, which is basically how you want the object to move/or what pattern do you want your animation to follow (we’ll see more on that later). In this case the easing is “linear”, which makes the animation constant in its movement.

Result:

Color Animation

In this step, we are going to combine the two previous animations, and add some lines of code (see screenshot above) to change the color of our entity in sync with the other animations.

So we open another <a-animation> and modify its parameters, defining the attribute “material.color” and going from a blue to a red color. The dur and repeat keep the same values as before.

We will be able to see the transition of the color while our box is moving. So all 3 animations (position, rotation and color) are working together.

Result:

You can take a look at a video tutorial I made of basic animations on a-frame, explaining this example step by step:

But wait, there’s something missing…

Scaling Animation

The “scale” animation is probably my favorite. We can make our entities bigger and smaller, and even create funky animations. In this next example, we are going to make our object pulsate or pump like a heart. This is a little bit more advanced than basic animations but I wanted to share the cool effect with you guys.

So, as shown on the screenshot above, the attribute is “scale”, the dur is 1000 (so it will move faster than our the box from before). We will start from a value of 1 in the x,y,z axis and go to a value of 2. The repeat attribute is kept as “indefinite”.

Additionally, we are going to change the easing to “ease-in-out-circ” — this is one of the many easing functions that you can play around with. You can also check out the visualisations of the different curves of easing patterns here. The “ease-in-out-circ basically means that the animation will start slow, speed up in the middle, and then slow down at the end in a sort of circular/elliptic way.

We’ve also included the direction attribute, that defines which way to animate between the from and to values. In this case, alternate-reverse means animating “on odd-numbered cycles, from from to to and on even-numbered cycles, from to to from” If you want to know more about the different values you can use for the direction attribute please go here.

Thanks to this we get that heart-pumping effect.

Result:

As you can see the object I’m animating here is Earth, which I created by just adding a texture image to a sphere, and the space behind is simple a skybox. It is very simple to do, check out the links ;) You can make your own Earth with just a few lines of code and animate it anyway you want!

Thanks for reading guys. I hope you find this post useful. I suggest you get crazy trying out animations on a-frame!

Don’t hesitate to contact me anytime @AndraConnect

Learning A-Frame: How to do Animations was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

I started learning a-frame recently. A-Frame is an amazingly-simple and easy-to-learn framework supported by Mozilla. It allows you to spike up your creativity and build virtual reality experiences. I wanted to share my experiences with you.

So, I decided to publish some video tutorials about what I had learned, documenting my progress, step by step. I used codepen.io as a platform to gather my demos. This is the first tutorial, a very basic a-frame VR scene.

Getting Started

Thankfully the a-frame documentation is very helpful. There are so many useful sections you can go check out for a more in-depth look. They also have a blog and you can reach them on slack.

First of all, in the Getting Started page, you scroll down to Play with Codepen . There’s an example that you can edit directly, just by clicking on Edit on Codepen on the top right — this will load the scene inside your codepen.io account (open one, it’s free and you’ll love it)

There you have it! You have your very first a-frame HTML scene all ready to go. Let’s take a look at it in more detail…and then have fun with it.

Btw, I encourage you to spend some time familiarising yourself with the tools on codepen.io, they are very user-friendly and it really makes coding easier.

Describing the first scene

The basic example that you see on the screenshot above has a total of 9 lines:

The first line, identified as script, is the JavaScript file which includes the code to do a-frame. This line needs to be present in all your a-frame scenes.

The other lines describe what is inside the scene itself, which includes a sphere, a box, a cylinder, a plane and a sky. You can modify these objects (also called entities) as you wish. For example, to move the objects around, you can change the values of the x, y, z axis inside the position and rotation attributes.

You can just as easily modify the values of the radius, the width, the height and the depth to make your objects bigger or smaller, larger or thiner..etc.

You can also change the color, playing around with the HTML color codes, (used in the example above) or actually just writing the name of the color you want.

Hello World!

Once you understand the basic example then you can get crazy and build a more personal (in my case psychedelic) scene.

The screenshot above shows my first easy-to-build “creative” example. Let’s take a look at the code:

As you can see, I added four different torus entities to the scene. I modified their radius and their color, leaving them in the same position, to make that circular rainbow-like effect.

For the pillars of my banner, I just modified two magenta cylinders making them taller and thinner. And to “support” my pillars I added a ground, which is basically a plane that covers the surface. Finally I changed the sky to a light-blue color.

Adding Text

Adding text is again, very simple to do with a-frame. The first line of the screenshot above is all your need: the a-frame text component <a-text>, the value (whatever you want to write), the position (where you want to place it on the scene), the color (self-explanatory) and the width (how thick do you want the text to be).

To make it a banner, I just placed the text on top of a box entity, that I modified to fit between the two cylinder pillars.

VR Mode

This is one of the coolest things about A-Frame. It IS a framework to create virtual reality experiences, so you can turn your scene into VR in just one click!

To see it through your phone, you just copy your codepen url and paste it on your mobile browser. Once the scene appears on the screen, you can interact with it —and when you click the button that resembles a pair of cardboard glasses at the bottom right, you will enter into VR mode. This is useful (and usable right away!) if you have devices like Google cardboard, Gear VR, devices that support daydream…etc.

Alexandra Etienne on Twitter

I'm really getting into this #WebVR stuff! This is my @CodePen adventure of today + video for beginners like me: https://t.co/osK7EyGjbU #VR https://t.co/P4SMAMTAfD

There you have it guys, you have created your first a-frame VR scene on codepen.io, and it’s as easy as that!

I hope you liked this post and that you want to share it with the world. Also, don’t hesitate to contact me anytime on twitter.

AR.js with a-frame magic

Do you want to do Augmented Reality on the web ? You can now do it in 10 lines of HTML! Seriously! Let me walk you thru the code, it’s crazy simple.

We released AR.js recently. You can experience efficient augmented reality for the web directly on your phone without installing any applications. But let’s go further and see how to produce your own augmented reality experience. The shortest example of AR.js is only 10lines of HTML thanks to the magic of a-frame. You can see it live on codepen:

Let’s break it down line by line.

Including the Libraries

First, you include a-frame, an effort started by MozillaVR to build VR experiences. A-frame contains three.js. Then you simply include AR.js for a-frame. AR.js will make the 3d displayed in AR run very fast on your phone, even if it’s a 2–3 year old phone!

Defining the Body

In this step, it’s all business as usual. You define the body, like you would in all HTML pages.

Creating a 3d Scene

Next, we are going to create our a-frame scene. We also need to add the ARToolkit component. ARToolKit is an open-source library that we use to localize it through the phone camera.

Adding Simple Content

Once we have created the 3d scene, we can start adding objects to it. In this line, we add a simple box. We then modify its material to make it transparent. We also change its position so it displays on top of the AR marker.

Adding the AR Camera

In this last step, we are going to add a camera. We include the preset ‘hiro’ (as in Hiro marker). Finally, we make it move as if it were your phone. Easy right?

Congratulations! You are done. You now have augmented reality, in only 10 lines of HTML, running fast on your phone and free of charge.

Check out this video version I made of the tutorial:

Thanks for reading, and if you like this post, don’t forget to share 😉

Also, please feel free to contact me anytime @AndraConnect

Augmented Reality in 10 Lines of HTML was originally published in ARjs on Medium, where people are continuing the conversation by highlighting and responding to this story.