For this project, I wanted to explore different web-based and native AR frameworks, specifically for their image tracking functionalities. This means that this github repo is full of demo experiments, both successful and unsuccessful ones.
To give some clarity, here is a short overview:
-
8thwall-code
I used the 14 day free trial offered by 8th wall, to experiment with the platform. In this trial, you are limited to working on their online Cloud Editor. So, the contents of this folder follow the set-up they use, where I copy pasted the code directly into files with the same name.
-
Live demo: https://avamc.8thwall.app/image-tracking-basics
(This demo did not work on my desktop, so you will probably need to test it with your phone. You will also probably land on a project overview page of 8thwall. There should be a button 'launch' that you have to press.)
You can customise the visual AR effects via the query string. (Options 0, 1, 2 or 3 for model, 0 or 1 for image variable, message variable can be any string).
Note: this demo was made with a 14-day free trial, so it could be at the time you are reading this, that the demo is no longer available live.
Used target image:
-
-
ViroSample
This is a short image tracking demo starting from the starting kit project ofr ViroReact, an AR framework for React Native. To run it, run 'npm install' and then 'npm run'. In the console you will get an ngrok link. you can use this or your IP address to test out your app via the free Viro Media App. Note: you will need a device that supports either ARCore or ARKit to be able to run it. (List of devices: list for ARCore and ARKit.)
-
arjs-html-test
Experiments with trying to add AR.js image tracking in a plain html example. The index.html file contains the attempt with marker tracking, which works. I used a lot of different custom markers in my assets, to try out if it works. Some of them are suitable markers, and some are not recognisable. Check my wiki for specifics. The current example works with the following marker:
The index-nft.html contains the attempt to get the nft image tracking option from Ar.js to work, but this didn't work for me.
-
arjs-react-marker-test
Failed experiment of trying to implement marker tracking of AR.js directly in a new create-react-app project via A-frame library.
-
codebox-example
This is my only working example of adding MindAR image tracking in a React project. I started from a working codesandbox example I found, that used the mindAR package in a React project. And from that starting point, I added some customisation to it. To run it, use npm install and then npm start.
The default target image:
You can customise it via querystring:
- image: 0 or 1 (0 is lego.png, 1 question.png image in the assets folder).
- model: 0 or 1
- message: any string
-
react-mindar-test and react-mindar-test-2
I tried recreating the Codesandbox example starting from my own new React project, however despite using the exact same versions and the exact same packages, this did not work.
-
first-expo-app
Very first experiment with Expo to learn React Native Basics. I just followed the basic tutorial from the Expo documentation. It is a sub-module, but really does not contain any relevant code for the rest of the project.
-
html-mindAR-test
Working example of using mindAR library in a plain html project.
There is a live version of the demo online.
Default image target:
You can customise it via querystring:
- image: 0 or 1 (0 is lego.png, 1 question.png image in the assets folder).
- model: 0 or 1
- message: any string
-
mindar-web-version-app
Unsuccessful attempt to add mindAR to my existing demo project for the Mystery Mail app in Next.js (web-version-app).
-
native-version-app
Basic version of the Mystery Mail demo with React Native (Expo), without any AR added. To run the project, do npm install, then npm start. This will provide a QR code that you can scan with the Expo Go app, to preview the application. You can also choose to run it in an emulator.
-
nft-react-test
One of the first attempts to add AR.js nft image tracking to a React project. It was unsuccessful.
-
react-ar-js-web-version-app
Successful attempt of adding AR.js image tracking functionalities to my existing Mystery Mail web application, made with Next.js. To run it, do npm install, then npm run dev to test the full app. (You can also do npm start, however, I added a server.js file that redirects my http localhost to a https, so that I could test it easily with my phone. I did this before I realised I could easily forward my ports if my phone was connected to my computer via USB.)
There is also a live demo version of this:
The idea is that you create your post card first, this will create a pdf you can save and/or print out with your secret AR message, contained in a scannable QR code, and with the chosen target image on the front of your card.
If you just want to scan an already made example, try this one:
-
test-arjs-html
Unsuccessful attempt to use the nft image tracking demo of AR.js in a plain html file.
-
tracking-images
Folder that contains some base images to create custom markers with to use in combination with the AR.js marker generator.
-
unity-experiment
Files from my Unity AR Foundation demo. I made an AR project for Android (ARCore), following this youtube tutorial. I just combined the Unity project folder with the standard unity .gitignore file.
-
viro-expo-test and viro-expo-test-2
Failed attempst to get ViroReact working withing existing Expo projects. viro-expo-test was an attempt to integrate ViroReact in my full Mystery Mail native demo (native-version-app). viro-expo-test-2 was an attempt to integrate it in a brand new expo project. Both times I tried to follow the explanation from the ViroReact documentation to add ViroReact to an Expo project and both attempts failed.
-
web-version-app
Basic Mystery Mail demo made with Next.js. It contains all the functionalities, except the AR part. This was meant as a basic project to try to add different web AR frameworks to for the AR functionality.
This example is running live on this link.