encantar-js/docs/gallery.md

---

title: WebAR Demo gallery

Demo gallery

Please read the guidelines before you play with the demos. Feel free to remix them.

Basic demos

WebAR with A-Frame

Create an augmented scene with A-Frame. This is the easiest demo to edit!

Launch demo{ ._blank .md-button }

WebAR with three.js

Create an augmented scene with three.js.

Launch demo{ ._blank .md-button }

WebAR with WebGL only

Create an augmented scene without additional libraries, for curiosity only.

Launch demo{ ._blank .md-button }

Hello, world!

A basic template to help you get started.

Launch demo{ ._blank .md-button }

Interactive demos

Touch interaction

Have virtual elements respond to touch input.

Launch demo{ ._blank .md-button }

Guidelines

For a good experience:

• Don’t move the camera nor the target image too quickly. This produces motion blur.
• The target image should appear clearly in the video.
• The physical environment should be properly illuminated.
• 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.
• Avoid low-quality cameras. Cameras of common smartphones are okay.

Try locally

Try the demos on your own machine:

• Run on a console:

git clone git@github.com:alemart/martins-js.git
cd martins-js
npm start

• Open https://localhost:8000/demos/
• Pick a demo and have fun!