Skip to main content

Easy, Free and Quick Augmented Reality (AR) - AR.js Studio - Marker based

For a few years, I have been a fan of Aframe and AR.js - these are fantastic tools for creating web-based Virtual and Augmented Reality. 

Now AR.js has just got easier - no coding need with the Beta version of AR.js Studio https://ar-js-org.github.io/studio/


The start screen above gives you the option of location-based or Marker-based projects, I am selecting marker-based and then pressed Start building.

I am going to use the premade marker but you can upload your own )there is a guide to what makes a good marker). The premade marker you can download from the site using the download marker link underneath the marker. Apart from that, you don't have to do anything else to select the marker.

Now you choose whether you want 3D object, image or video. So for this experiment, I going to use a free 3D model from https://sketchfab.com/3d-models/duck-6e039c6c606c4c26a1359514352629fd produced by likangning93 and released under a creative commons licence on Sketchfab. It is as simple as clicking upload file and browsing.



Last stage is exporting the project. Two options 
- Published to Github 
- Download package

My advice is, if you don't have your own web-server, get yourself a Github account and choose that option, and you just log-in to your account. You will need to give the project a name and then push Publish. Depending on your internet connection it can take a few seconds to a minute or so, but it is worth the wait.

So now you get back a URL https://scottturneruon.github.io/Testobjectexs5y2/ . Now just show the marker.




So to test I am typing this URL in a Safari browser (Chrome can play up) on my phone and allow access to my camera (see below or try it for yourself which is more fun).




This Beta version is very good, no coding needed by the user and easy steps to an AR.  At the time of writing the only slight issue was you need to ensure that the file extensions were not capitalised but other than it is a great tool for produce a single AR example. I need to try the location-based version next.




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

  1. GameArtAcademic19 June 2020 at 16:18

    A revolutionary moment!

    ReplyDelete
    Replies
    1. Scott Turner19 June 2020 at 17:15

      Going to be interesting see how it develops.

      Delete
  2. Unknown20 July 2020 at 14:36

    Hi, I am excited for this. I think you are created the next "WordPress" of AR (I hope!). My question is that I have my own web server (virtual machine) on Google Cloud Platform Compute Engine. How can I place the code on one of my own domains connected to my web server?

    ReplyDelete
  3. Yoga Classes in Enoggera4 August 2020 at 10:23

    Robotics

    If you are looking at robotics class for kids, then Bricks4Kidz is the best lego robotics class for kids in Singapore. We provide the best education to your child through science, technology, engineering and mathematics.

    to get more - https://www.bricks4kidz.com.sg/robotics-classes-for-kids/

    ReplyDelete
  4. Yatendra26 August 2020 at 11:29

    Your content is really great and useful. Augmented Realty App development are just pretty cool and enjoyble. Thanks for sharing the information.

    ReplyDelete
  5. Natasha23 September 2020 at 18:35

    Nice blog. Thanks for sharing.

    Natasha from Idya Technology (Trusted AR App Development Company in Australia)

    ReplyDelete
  6. techmienews.blogspot.com24 October 2020 at 05:52

    Your content is really great and useful. If you want to read similar technology article/news then visit us, we are technology/news/smartphone company.Visit us: https://techmie.com/

    ReplyDelete
  7. simwaveca14 November 2020 at 07:50

    As we have seen, Augmented Reality appeals to constructiveness motions of education where students take control of their own learning, and interact with the real and virtual environments. Augmented Reality Development

    ReplyDelete
  8. Jocob Mason19 November 2020 at 16:30

    The significant advantage of AR is to creating an immersive experience & simulating real life.

    Looking for the Augmented Reality Development Company in Brisbane? Reach Idya Technology.

    ReplyDelete
  9. Andrew Anton25 January 2021 at 11:17

    Thanks for sharing such a beautiful information! To know more about Augmented Reality Development follow given link.

    ReplyDelete
  10. TechAIdvisor3 January 2024 at 11:28

    I'm truly fascinated by the innovative strides taken by the best augmented reality companies. Their ability to seamlessly blend the virtual and real world is ground breaking. From immersive experiences to practical applications, these companies are shaping the future. Exciting times ahead for AR enthusiasts and tech aficionados alike!

    ReplyDelete
  11. Augmented Reality Software Development2 February 2024 at 06:33

    Discover the realm of Augmented Reality Development, where virtual elements seamlessly blend with the physical world. This concise guide explores the intricacies of AR development, from coding overlays to transforming user experiences.

    ReplyDelete

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

WebVR 3 Playtime: Augmented Reality

I am going to try to persuade you that using A-Frame it is not hard to do some simple Augmented Reality (AR) for free, via a browser, but that also can run on a mobile device. Introduction This is part of a short series of articles about some experiments with WebVR Web-based Virtual Reality - in this case based on the wonderful A-Frame  ( https://aframe.io )   .  In the first post  WebVR playtime 1: Basics of setting up, images and rotating blocks ,  I looked at setting up a scene and then rotating an object.  In the second pos t, recapped the basics, then look at adding video, 360 degree video, and models developed elsewhere. In this post we are going to start looking at using WebVR as part of an augmented reality solution. I going to start by building on the great resource Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne, creator of AR.js - the starting code below and the basis of the solution ...
12 comments
Read more