ARnft - WebAR with NFT

A small javascript library to develop WebAR apps. It is based on jsartoolkitNFT a lighter version of jsartoolkit5 only with NFT markerless technology. It use ARnft-threejs for the rendering part.

Start using it !

:one:   Clone the repository:

git clone https://github.com/webarkit/ARnft.git

:two:   Install the npm packages with yarn:

yarn install

or with npm:

npm install

:three:   Run the node server:

http-server . -p 8000

:four:   Go to the examples:

http://localhost:8000/examples/arNFT_example.html

:five:   Point your device 📱 to the pinball image 👇 a red cube will appear !

Usage

Download the zipped dist lib package from the releases page: webarkit/ARnft/releases and use it in a script tag:

<script src="https://github.com/webarkit/ARnft/raw/master/path/to/dist/ARnft.js"></script>

or you can use raw.githack services (for development):

<script src="https://raw.githack.com/webarkit/ARnft/master/dist/ARnft.js"></script>

or raw.cdn (for production, you need to add the hash):

<script src="https://rawcdn.githack.com/webarkit/ARnft/<hash>/dist/ARnft.js"></script>

or if you want to import as a module with npm:

import { ARnft } from "@webarkit/ar-nft";

Examples

Test the examples in the /examples folder:

• arNFT_autoupdate_example.html Example with the autopdate routine.
• arNFT_container_example.html Example with an alternative container.
• arNFT_event_example.html Example with objVisibility and eventListener.
• arNFT_example.html The simplest example displaying a red cube.
• arNFT_gltf_brave_robot_example.html More advanced example with a gltf model and threejs events.
• arNFT_gltf_example.html Example showing a gltf model (Duck).
• arNFT_gltf_flamingo_example.html Example showing an animated gltf model (Flamingo).
• arNFT_image_example.html Example showing an image.
• arNFT_initialize_raw_example.html Example using the custom initialize function for the CameraRenderer (video).
• arNFT_multi_example.html Example with multi NFT markers.
• arNFT_multi_dispose_example.html Example with multi NFT markers and disposing worker.
• arNFT_multi_one_worker_example.html Example with multi NFT markers in one Worker.
• arNFT_video_example.html Example showing a video.

You can try also a live example with React at this link: kalwalt.github.io/ARnft-ES6-react/

Donate

Donate to ARnft

Documentation

You can build the docs with this command: yarn docs Then run a live server and go to the docs folder.

Features

• NFT (Natural Feature Tracking) Markers, read my article: NFT natural feature tracking with jsartoolkit5
• ES6 standard. You can install it as a npm package and use it as a module (experimental). Install it with npm:

npm i @webarkit/ar-nft

or with yarn:

yarn add @webarkit/ar-nft

• Configuration data in an external .json file.

• Filtering of the matrix with the OneEuroFilter.

Format the code with Prettier

We are using Prettier as code formatter. You only need to run yarn format to write the formatted code with Prettier. If you want to check if the code is well formatted run instead: yarn format-check

Build

If you make changes to the code, run these commands to build the distribution libray, install all the dependencies with:

yarn --include=dev i

For a development build, that is the code will be rebuilt for every changes, run:

yarn dev-ts

Instead for a production build, with more optimizations in the code and smaller size, run:

yarn build-ts