Skip to main content

Free Web based Augmented Reality (AR)

This post is part of the materials for a session on Augmented Reality presenting at the 2019 SolSTICE eLearning and CLT Conference 5-6th June 2019 Edge Hill University https://www.edgehill.ac.uk/solstice/files/2019/05/2019-Book-of-Abstracts.pdf  and the #MergedFutures Event on 14th June 2019.
1. Introduction





                                                                                
So if we go to
https://thimbleprojects.org/scottturneruon/692403

Using the markers above with this url running on your device (with a camera enabled) it should add two new objects over the markers. you will need a copy of these images and printed them out. If you have it I would suggest running it in Firefox.

2. Getting Started
The guide for all this is https://aframe.io/blog/arjs/, with this you have pretty much everything you need.



To start your own go to https://glitch.com/ -> new project ->Hello World project

In the index.html deleted everything in there and replace it with

Should have a white box over the Hiro marker when the web camera/phone/tablet is shown the markers.


The code  not in bold below just sets it up - to play with it we don’t need to worry about what it does - we can just use it. The bit in bold is the bit initially we change or add to – in this case it puts a default white box over the marker.






It can be seen at https://decisive-cookie.glitch.me

3. Playing with other objects

Now if we replace


With


We get a blue ball in place of the box


Now for some fun
http://www.pngall.com/bee-png/download/84 is a bee image – download it


Go back to Glitch, and if we go to assets we can add the image. Open up the folder that has the downloaded image and drag it into the asset window.

When it stops downloading and shows the image, click on the image to get the new web address we are going to need that next. so take a copy of it.

If we replace


With the following by just adding in src="https://cdn.glitch.com/04b86bba-0978-4bf4-b3a7-2ece72336f90%2FBee-PNG.png" as below
 


We get a blue ball with a bee stretched over it. But it doesn’t look that great if we remove the color=”blue” we see the bee stuck at the bottom of the ball still but the colours are back.


Now if we replace
    


With commands to rotate the sphere

We get a rotating sphere with the image on it.

This can be found at https://simplistic-wakeboard.glitch.me and works with the Hiro marker


If you want to find out how I felt about presenting go to https://dandy-custard.glitch.me/



Now let's try a GIF
https://giphy.com/gifs/ar-vr-uon-dWsKM0qQeY9DhSUslT/media


Download the GIF and then copy (drag and drop) into the asset folder of your project  get the web address and put into src=”” in place of the one that is there already

An example can be found at https://root-reply.glitch.me/ and works with the Hiro marker.




4. Issues and Thoughts

  • Make sure all the markers have white space surrounding them.
  • If I am honest, the technology is cool and useful for educational use, but I not sure where it all can go.   The question is what can others come up with to use it, I would love to hear about it.



Related Links



 All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon

Comments

Post a Comment

Popular posts from this blog

Robot Software

In the previous blog posts for this 'series' "It is a good time...."  Post 1  looked at the hardware unpinning some of this positive rise in robots; Post 2  looked at social robots; Post 3  looked at a collection of small robots; Post 4 looked at further examples of small robots Robots, such as the forthcoming Buddy and JIBO, will be based some established open sourceand other technologies. Jibo will be based around various technologies including Electron and JavaScript (for more details see:  http://blog.jibo.com/2015/07/29/jibo-making-development-readily-accessible-to-all-developers/ ). Buddy is expected to be developed around tools for Unity3d, Arduino and OpenCV, and support Python, C++, C#, Java and JavaScript (for more details see http://www.roboticstrends.com/article/customize_your_buddy_companion_robot_with_this_software_development_kit ).  This post contin ues with some of the software being used with the smaller robots.  A number ...
1 comment
Read more

Speech Recognition in Scratch 3 - turning Hello into Bonjour!

The Raspberry Pi Foundation recently released a programming activity Alien Language , with support Dale from Machine Learning for Kids , that is a brilliant use of Scratch 3 - Speech Recognition to control a sprite in an alien language. Do the activity, and it is very much worth doing, and it will make sense! I  would also recommend going to the  machinelearningforkids.co.uk   site anyway it is full of exciting things to do (for example loads of activities  https://machinelearningforkids.co.uk/#!/worksheets  ) . Scratch 3 has lots of extensions that are accessible through the Extension button in the Scratch 3 editor (see below) which add new fun new blocks to play with. The critical thing for this post is  Machine Learning for Kids  have created a Scratch 3 template with their own extensions for Scratch 3 within it  https://machinelearningforkids.co.uk/scratch3/ . One of which is a Speech to Text extension (see below). You must use this one ...
5 comments
Read more

Escape the Maze with a VR robot - Vex VR

You don't need to buy a robot to get programming a robot, now there are a range of free and relatively simple to start with robot simulators to play with. Three examples are listed below: - Make code for Lego EV3  https://robotsandphysicalcomputing.blogspot.com/2020/05/programming-robots-virtually-3-lego-ev3.html   - i Robot simulator  https://robotsandphysicalcomputing.blogspot.com/2020/04/programming-robots-virtually-2-irobot.html - Vex robotics Vexcode VR   https://robotsandphysicalcomputing.blogspot.com/2020/04/programming-robots-virtually-1-vexcode.html   It is the last one of these ( https://www.vexrobotics.com/vexcode-vr ) that is the focus of this post and return to hit, after an earlier discussion in  https://robotsandphysicalcomputing.blogspot.com/2020/04/programming-robots-virtually-1-vexcode.html   .  Two of the nice things about the package, apart from being free, are it uses a Scratch-like programming language and it provides a ...
2 comments
Read more