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!
WebAR with three.js
Create an augmented scene with three.js.
WebAR with WebGL only
Create an augmented scene without additional libraries.
Hello, world!
A basic template to help you get started.
Interactive demos
Touch interaction
Have virtual elements respond to touch input.
Try locally
- Run on a console:
- Open https://localhost:8000/demos/
- Pick a demo and have fun!