encantar-js/docs/demos.md

---

title: WebAR Demo gallery

hide:

- navigation

---

Demo gallery

!!! info “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.

Basic demos

WebAR with A-Frame

Create an augmented scene with A-Frame{ ._blank }. For beginners - no knowledge of JavaScript is required!

Launch demo{ ._blank .md-button }

WebAR with babylon.js

Create an augmented scene with babylon.js{ ._blank }.

Launch demo{ ._blank .md-button }

WebAR with three.js

Create an augmented scene with three.js{ ._blank }.

Launch demo{ ._blank .md-button }

WebAR template

A template to help you create an augmented scene with any 3D framework.

Launch demo{ ._blank .md-button }

WebAR with pure WebGL

Create an augmented scene without a 3D framework.

Launch demo{ ._blank .md-button }

Miscellaneous

Pointer-based input

Learn how to work with pointer-based input such as touch and mouse.

Launch demo{ ._blank .md-button }

Try locally

• Run on a console:

repo=https://github.com/alemart/encantar-js.git
tag=$(git ls-remote --refs --tags $repo | cut -d/ -f3 | sort -V | tail -n1)
git clone $repo --branch $tag --depth 1
cd encantar-js
npm start

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