Skip to content

Demo gallery

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. This is the easiest demo to edit!

Launch demo

WebAR with three.js

Create an augmented scene with three.js.

Launch demo

WebAR with WebGL only

Create an augmented scene without additional libraries.

Launch demo

Hello, world!

A basic template to help you get started.

Launch demo

Interactive demos

Touch interaction

Have virtual elements respond to touch input.

Launch demo

Try locally

  • Run on a console:
git clone git@github.com:alemart/encantar-js.git
cd encantar-js
npm start