
Security News
TypeScript is Porting Its Compiler to Go for 10x Faster Builds
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
@webarkit/ar-nft
Advanced tools
A small javascript library to develop WebAR apps. It is based on jsartoolkitNFT a lighter version of jsartoolkit5 only with NFT markerless technology. It uses ARnft-threejs for the rendering part.
: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 !
<img alt="pinball image" src= https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg width="250"/>
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
Download the zipped dist lib package from the releases page: webarkit/ARnft/releases and import it as a module:
<script type="importmap">
{
"imports": {
"three": "./js/third_party/three.js/three.module.min.js",
"arnft-threejs": "./js/ARnftThreejs.module.js",
"arnft": "./../dist/ARnft.module.js"
}
}
</script>
<script type="module">
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):
<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.module.js"
}
}
</script>
<script type="module">
// 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.9"
},
// Then in your .ts or .js file
import { ARnft } from "@webarkit/ar-nft";
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/
Donate to ARnft
You can build the docs with this command:
yarn docs
Then run a live server and go to the docs' folder.
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.
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
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
FAQs
WebAR Javscript library for markerless AR
The npm package @webarkit/ar-nft receives a total of 11 weekly downloads. As such, @webarkit/ar-nft popularity was classified as not popular.
We found that @webarkit/ar-nft demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.