In a previous post, what students on the MSc Computing programme (either Software Engineering or Network Engineering pathways) were playing with was discussed and the A-Frame solutions are a starting point for this post.
In this post, we are going to start looking at using WebVR as part of an augmented reality solution. The best starting point is to build on the fantastic resource Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne, creator of AR.js - the starting code is shown below.
Getting started.
Several ways to do all of this; Thimble from Mozilla, Glitch - you may need to register - and Codepen.io are all viable (and free) options. Codepen does have a paid, Pro option.
The code below was adapted from the Creating Augmented Reality with AR.js and A-Frame page.
The first script line sets up the use of A-Frame WebVR. The second one script line adds the additional functionality for Augmented Reality via markers. The
A blue box and text were added to the scene. The example below was shown in codepen via the browser working with the laptops built-in camera.
Using the Hiro marker go to https://codepen.io/scottturneruon/pen/gKVWYq to play!
Next Step
To take this forward I wanted to replace the text and box with some rotating text when the marker is visible. On the AR in action can be found at http://bit.ly/2N0nvWx; you will need the Hiro marker.
The code for the AR in action is shown below.
Adding images to objects
In a previous post (WebVR playtime 1: Basics of setting up, images and rotating blocks) we have seen that in A-Frame if you can create a block and in the tag for the block you add an image that gets wrapped on to the block. Now we are going to add these ideas into the AR solution.
As a recap let look at an example - a-sphere position="0 0.5 -.5" radius=".5" color="yellow" src="test1.png" produces a yellow sphere of 0.5 units radius is produced with the image, stored in test1.png, wrapped around the sphere. Interestingly, any white on the image gets replaced by the underlying colour, yellow in this case, of the object.
The way the image is mapped on to the objects, changes with the object. If the object had been a box all the sides would have a copy of the image on them. A sphere and box of different colours will be used to show these effects.
In this exercise, I found Mozilla's Thimble especially useful here because it allows images to be added into the file area easily and I was having problems with some other editors getting images to work. The slight downside is the automatic viewing of the site, doesn't work with the camera; this is easily worked around by publishing the site and viewing it as a live webpage (to see an example using the Hiro marker (same one as used earlier) go to https://thimbleprojects.org/scottturneruon/517091).
Ok, so what does this code look like and do? Let's look at the code, it has some text; as well as a white box and yellow sphere with the same image mapped onto them.
The resulting AR solution can be seen in action below, a still of the marker and AR in action and the short video showing the movement.
The combination of block, sphere and text, appear when the marker is visible and started to rotate.
Now with a more commercial application adding a logo:
To read more go to
- https://aframe.io/docs/0.7.0/introduction/
- Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne
- WebVR playtime 1: Basics of setting up, images and rotating blocks
- http://robotsandphysicalcomputing.blogspot.com/2018/02/webvr-playtime-2-video-360-video-and.html
All views and opinions are the author's and do not necessarily reflected those of any organisation they are associated with. Twitter: @scottturneruon
No comments:
Post a Comment