Create an augmented reality 3D logo with Blender and AR.js

Use the free and open-source tools to create a marker-based fun and interactive logo with very little code

Smartphone screenshot of the final result (photo by Author)

Virtual space — the new frontier

With the advent of internet and the world wide web, the new era of colonisation has begun — the virtual space is up for grabs and the phygital (the hybrid offspring from the improbable union of the physical and digital worlds) is the latest hype word. Since the dawn of humanity, our species has always believed in the possible existence of alternative worlds and realities that lie beyond those we can apprehend with our senses. The world wide web, the cloud and the online virtual space is yet another narrative in the long line of those alternative realities humans imagined and created for themselves. This time, unlike some other alternative and fictional realities that shaped the Western cultures’ mindsets, it is a scientific reality, the access is granted and we can exist ubiquitously and make use of it as an extension of ourselves (that is, until we pull the plug, but that’s another story).

Augmented space — the phygital bridge

Augmented space acts as a bridge between the purely virtual and physical areas of existence, allowing to overlay additional signifiers provided you have a smart device. This example uses a graphic component we will call a marker (QR code with a central barcode) to trigger a physical device, i.e. your smartphone camera into showing a digital and interactive 3D entity on top of it in your browser.

Follow the steps below to create your own augmented reality logo.

1. Making the logo in Blender

If you are familiar with Blender, create your logo and then go to the next paragraph. For those that don’t know it yet, Blender is a great free software allowing you to create fully-operational 3D assets and animation. Blender also has a scripting interface where you can unleash your inner creative python if you are into coding. For tutorials to get you started, check this youtube list — I tested them all and can say they are fun to do and they work!

(12) Blender tutorials — YouTube

In my case, my logo is text and I added my ‘heritage’ doughnut in the middle just for fun (for those wondering why the doughnut — it’s the first object everyone makes in Blender to familiarise themselves with various interfaces and functionalities). To create 3D text, you press “SHIFT+A > Text”, then go into Edit mode to your pick your font (you have to have it installed on your machine) and write your text, and then simply use the “Extrude geometry” (“E” shortcut key) to make it as thick as you want it. You can also import an svg file and extrude it to your desired thickness.

In any case, upon extrusion you will probably need to clean up your geometry by adding or deleting vertices and edges and/or converting the triangles into quads. You can find the Blender cheat sheet here for all the useful shortcuts. To import an object from another Blender file, just use “File > Import” and the relevant file extension. I applied the same material to the letters and the doughnut icing. Add shaders, texture, etc. and then you’re ready for export!

2. Exporting the logo

To be able to use it with AR.js, I opted to export it in .gltf format: File > Export > glTF 2.0.

Screenshot of Blender’s export options

Then, use the “separate” option, especially if you have textures and shading that you painted on your logo (click here to familiarise yourself with UV mapping and unwrapping):

Screenshot of Blender export menu. Opt for glTF Separate for our project.

Select the appropriate elements to include in the sub-menus “Include”, “Transform” and “Geometry” based on your needs.

If you have several separate elements that are part of your logo, you have to join them first so they are exported together in proportion. If you have various objects in your project file and only want to export one, select it and under “Include” in the export menu, click “Selected objects”.

Important note: Make sure the object you want to export is positioned the way you want it showing above the QR code— if you want it centred, then you have to position it sitting on the origin point (where the x and y axes intersect) and align it so the origin point is right in the middle. Just think of the origin point as the centre of the barcode marker above which your logo will be hovering. Having experimented with it, centred is the way to go, as different screen sizes may yield different results and show your logo only partially due if you choose to offset it. If you’re planning to have your text hover flat above the QR code, i.e. you plan to use your QR code vertically, then leave the text laying down flat. I went for my logo to hover ‘standing up’ above the QR code, so I had to rotate it 90° along the global x axis.

Make sure your object is centred or positioned the way you want it in relation to the origin point shown in red and white circle. As you can also see (in letters r and a in particular), I didn’t clean up the whole geometry, just the bare minimum. (Screenshot of author’s Blender project).

Save the export (3 files: gltf, bin and texture png) in the folder that will hold also the AR.js html file.

3. Generating the marker

According to AR.js documentation, there are 3 different marker types: Hiro, barcode and pattern. We will be using the barcode. I used this free Marker generator (gmented.com) as it allows screen (72 dpi) and print (300 dpi) resolutions. I went for the option of generating only one marker image with code — I went with “1”, although you can pick any numbers between 0 and 63. This marker will be triggering your logo, so don’t forget which number you picked as we’ll have to input it in the html code. For consistency, save the marker image in the same folder as your Blender exports.

4. Coding AR.js html file to link the logo with the marker

The AR code is quite straightforward.

• Open your preferred text editor (I use Visual Studio Code)
• Create an html file
• copy-paste these scripts in the <head></head> part:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://raw.githack.com/fcor/arjs-gestures/master/dist/gestures.js"></script>

The gestures.js script is to make the logo interactive so the viewer can scale it up and rotate it by touching it on the smartphone screen.

For the <body></body> part of the html file, add this code:

<body style='margin : 0px; overflow: hidden;'>
<div class="arjs-loader">
<div style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">Loading, please wait...</div>
</div>
<!-- we add detectionMode and matrixCodeType to tell AR.js to recognize barcode markers -->
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'
gesture-detector>
<a-assets>
<a-asset-item id="[YOUR LOGO ID HERE]" src="[YOUR 3D LOGO BLENDER EXPORT FILE NAME HERE].gltf"></a-asset-item>
</a-assets>

<a-marker id="animated-marker" type='barcode' value='[YOUR BARCODE MARKER NUMBER HERE]'  raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
smooth="true">
<a-entity
gltf-model="#[YOUR LOGO ID HERE]"
scale="35 35 35" <!--x y z parameters - play with scale depending on the size of your Blender export-->
position="0 0 0" <!--x y z parameters - amend if needed depending on the position of your Blender export-->
class="clickable"
gesture-handler="minScale: 0.25; maxScale: 10" <!--change these min and max to limit interaction in terms of size-->
rotation="0 0 0">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>

It will create a scene for barcode markers recognition, take an asset (your Blender export), turn it into an entity (with a configurable scale and interactivity) within the marker parameters so that it triggers your smartphone camera and shows the 3D object when the camera is pointed to the marker. Save the html file in the same folder as your Blender export and your marker image.

5. Tying it all together with a QR code to display it in your browser

I will not explain here how to publish it all on a website, I assume you know that. Once you have your URL for the AR.js html file you’ve just created, go to a QR code generator that allows ‘logo’ embeds in the middle. I opted for QRCode Monkey as it allows not only png but also svg, eps and pdf exports, although others exist as well. Generate the QR code by pasting your AR.js URL and then adding the image marker as the ‘logo’ in the middle. Download and you’re good to put it wherever you wish for people to scan it at their heart’s content!

Here is my final result:

QR code with the tracker image (barcode) in the middle. Scan it with your smartphone to see the logo (image by Author)

I hope you enjoyed it and will try it out!

Also, don’t hesitate to contact me if you’d like one with your logo / bespoke 3D object but haven’t got time to do it yourself. The important thing is to have fun doing it!

Would you like to support me and other writers on Medium?

To get access to unlimited stories, you can also consider signing up to become a Medium member for just 5$. If you sign up using my link, I’ll receive a small commission at no extra cost to you. Thank you!

Join Medium with my referral link - Jelena Ristic