Skip to content

WebAR Demo gallery

Here you'll find some cool examples of what you can do with MARTINS.js. Simply click on a link or scan any of the QR codes below. After opening the web pages, scan the target image. In addition, please read the guidelines.

Basic demos

The following demos will help you get started:

QR code

MARTINS.js with AFRAME

Launch demo | View the code

QR code

MARTINS.js with THREE.js

Launch demo | View the code

QR code

MARTINS.js with pure WebGL

Launch demo | View the code

QR code

Touch interaction with THREE.js

Launch demo | View the code

Minimal demos

Explore the source code with these minimalistic demos:

QR code

Hello, World!

Launch demo | View the code

QR code

Simple Webcam demo

Launch demo | View the code

Guidelines

You can use a webcam or a video file as input. Click on the 🎥 icon at the top-right corner of the screen to toggle webcam input. When using a webcam:

  • Avoid low-quality cameras. A camera of a typical smartphone is probably good enough.
  • Don't move the camera nor the target image too quickly. This produces motion blur.
  • Make sure that the physical environment is properly illuminated.
  • The target image should appear clearly in the video.
  • If you're scanning the image on a screen, make sure to adjust the brightness. If the screen is too bright (too dark), it will cause overexposure (underexposure) in the video and tracking difficulties - details of the images will be lost. Screen reflections are also undesirable.
  • If you print the image, avoid shiny materials (e.g., glossy paper). They may generate artifacts in the image and interfere with the tracking. Prefer non-reflective materials.

Try locally

Try the demos on your own machine:

  1. Run on a console:
git clone git@github.com:alemart/martins-js.git
cd martins-js
npm start
  1. Open https://localhost:8000/demos/
  2. Pick a demo and have fun!

Target image

Target image