https://github.com/webarkit/ARnft
A small javascript library for WebAR with NFT
https://github.com/webarkit/ARnft
arnft artoolkit5 augmentedreality es6 hacktoberfest javascript jsartoolkit jsartoolkitnft markerless naturalfeaturetracking nft webar
Last synced: 19 days ago
JSON representation
A small javascript library for WebAR with NFT
- Host: GitHub
- URL: https://github.com/webarkit/ARnft
- Owner: webarkit
- License: lgpl-3.0
- Created: 2020-04-21T23:26:42.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-17T15:46:58.000Z (6 months ago)
- Last Synced: 2024-10-29T22:02:23.999Z (6 months ago)
- Topics: arnft, artoolkit5, augmentedreality, es6, hacktoberfest, javascript, jsartoolkit, jsartoolkitnft, markerless, naturalfeaturetracking, nft, webar
- Language: TypeScript
- Homepage:
- Size: 112 MB
- Stars: 219
- Watchers: 16
- Forks: 54
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-AR - ARnft - WebAR with NFT
README
[](https://github.com/prettier/prettier)
[](https://github.com/webarkit/ARnft/actions/workflows/CI.yml)
[](https://github.com/webarkit/ARnft/actions/workflows/main.yml)
# 🖼️ ARnft - WebAR with NFT
A small javascript library to develop WebAR apps. It is based on [jsartoolkitNFT](https://github.com/webarkit/jsartoolkitNFT) a lighter version of jsartoolkit5 only with **NFT** markerless technology. It uses [ARnft-threejs](https://github.com/webarkit/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:
`npx http-server`
: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 !
## 🏎️ SIMD Feature
The ARnft library now includes support for SIMD (Single Instruction, Multiple Data) to enhance performance by parallelizing data processing tasks. This feature is particularly useful for applications requiring high computational power, such as augmented reality.
To see the SIMD feature in action, you can try the `arNFT_simd_example.html` example:
http://localhost:8000/examples/arNFT_example.simd.html
## 📦 Usage
Download the zipped dist lib package from the releases page: [webarkit/ARnft/releases](https://github.com/webarkit/ARnft/releases)
and import it as a module:```html
{
"imports": {
"three": "./js/third_party/three.js/three.module.min.js",
"arnft-threejs": "./js/ARnftThreejs.module.js",
"arnft": "./../dist/ARnft.mjs"
}
}import * as THREE from "three";
import arnft from "arnft";
const { ARnft } = arnft;
import ARnftThreejs from "arnft-threejs";
const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;// Follow code for rendering ect. see the examples.
```or you can use raw.githack services (for development):
```html
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.min.js",
"arnft-threejs": "https://raw.githack.com/webarkit/ARnft-threejs/master/dist/ARnftThreejs.module.js",
"arnft": "https://raw.githack.com/webarkit/ARnft/master/dist/ARnft.mjs"
}
}// as the above code snippet
```or raw.cdn (for production, you need to add the hash):
```
// As the examples above import three.js, Arnft-threejs and Arnft in an importmap
"arnft": "https://rawcdn.githack.com/webarkit/ARnft/<hash>/dist/ARnft.js"
```or if you want to import as a module with npm:
```
// In your package.json:
"devDependencies": {
"@webarkit/ar-nft": "^0.14.11"
},
```
```javascript
// Then in your .ts or .js file
import { ARnft } from "@webarkit/ar-nft";
```## 🧪 Examples
Test the examples in the `/examples` folder:
- `arNFT_autoupdate_example.html` Example with the autoupdate 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_simd_example.html` Example with SIMD feature.
- `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.
- `arNFT_zft_example.html` Example showing a simple cube, loading a .zft file.You can try also a live example with React at this link: [kalwalt.github.io/ARnft-ES6-react/](https://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** (**N**atural **F**eature **T**racking) Markers, read my article: [NFT natural feature tracking with jsartoolkit5](https://www.kalwaltart.com/blog/2020/01/21/nft-natural-feature-tracking-with-jsartoolkit5/)
- **ZFT** compressed **NFT** markers with .zft extension, with faster loading time.
- **SIMD** (Single Instruction, Multiple Data) support for enhanced performance.
- **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 **O**ne**E**uro**F**ilter.
## 🛠️ Format the code with Prettier
We are using [Prettier](https://prettier.io/) 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 library, install all the dependencies with:
```
yarn --include=dev i
```
For a development build, that is the code will be rebuilt for every change, run:
```
yarn dev-ts
```
Instead for a production build, with more optimizations in the code and smaller size, run:
```
yarn build-ts
```
