This is the place to go for the most amazing and complete SDK to develop web augmented reality (webAR) solutions with open source software.
https://join.slack.com/t/webarkit/shared_invite/zt-154zcqgpj-S0Dg0j4DgvvWlORI2PC1NQ
jsartolkitNFT is a smaller version of jsartoolkit5 with only NFT support
License: GNU Lesser General Public License v3.0
This is the place to go for the most amazing and complete SDK to develop web augmented reality (webAR) solutions with open source software.
https://join.slack.com/t/webarkit/shared_invite/zt-154zcqgpj-S0Dg0j4DgvvWlORI2PC1NQ
As it is for webarkit/jsartoolkit5 we could setup such for jsartoolkitNFT see https://github.com/webarkit/jsartoolkit5/blob/master/.github/workflows/main.yml and https://github.com/webarkit/jsartoolkit5/blob/master/.github/workflows/node.js.yml
As stated here in this #128 (comment) we should try to make this change to solve the issue.
We receive this warning:
Warning: The
set-output command is deprecated and will be disabled soon. Please upgrade to using Environment Files. For more information see: https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/
when the main script is running: https://github.com/webarkit/jsartoolkitNFT/blob/1864c08ceffacd79c2517a29eae1797f5156dc21/.github/workflows/main.yml
In this issue i will start to collect some ideas. I begin to think about a simpler approach while i was coding with jsartoolkit5. The recently nftLoader make me think that I have to make this idea grow. If you want display an image onto a NFT marker this should be simple as possible. I want to summarize the concept in a few words:
For this reason the idea, from the nftLaoder, to store all config data in a single external json file is a must. The compactness of the code (only one file if possible) , and smart functions is the direction.
I will mimick the nftLoader in this sense. I will update this issue as i will focus all the ideas.
src
folder where to strore the non minified version of ARnft with every single function separated.dst
folder for the minified versionI missed to change some part of the code done in #231.
loadNFTMarkers (ARControllerNFT.ts) should be:
(ids: number[]) => {
this.nftMarkerCount += ids.length;
onSuccess(ids);
},
but now is
(ids) => {
this.nftMarkerCount += ids.length;
onSuccess(ids);
},
loadNFTMarker should be:
(ids: number) => {
this.nftMarkerCount += ids.length;
onSuccess(ids);
},
(ids: any) => {
this.nftMarkerCount += ids.length;
onSuccess(ids);
},
With my Android Oppo A72 i got this error running the ES6 example:
failed to asynchronously prepare wasm: RangeError: WebAssembly.instantiate(): Out of memory: wasm memory (anonymous) @ artoolkitNFT_ES6_wasm.js:9 artoolkitNFT_ES6_wasm.js:9 RangeError: WebAssembly.instantiate(): Out of memory: wasm memory artoolkitNFT_ES6_wasm.js:9 Uncaught (in promise) RuntimeError: abort(RangeError: WebAssembly.instantiate(): Out of memory: wasm memory). Build with -s ASSERTIONS=1 for more info. at abort (https://kalwalt.github.io/kalwalt-interactivity-AR/resources/ARToolkitNFT.js:35:11612) at https://kalwalt.github.io/kalwalt-interactivity-AR/resources/ARToolkitNFT.js:35:650135
and the example stop to load any resources.
jsartoolkitNFT/emscripten/ARToolKitJS.cpp
Lines 677 to 683 in e9cd198
ModuleLoader.ts it's not needed to import the wasm library. If we build the lib with these ES6 flags:
var ES6_FLAGS = ' -s EXPORT_ES6=1 -s USE_ES6_IMPORT_META=0 -s EXPORT_NAME="artoolkitNFT" -s MODULARIZE=1 ';
instead of:
var ES6_FLAGS = " -s EXPORT_ES6=1 -s USE_ES6_IMPORT_META=0 -s MODULARIZE=1 ";
that is if we add only -s EXPORT_NAME="artoolkitNFT"
then inside ARToolkitNFT.ts we simply import the wasm lib:
import artoolkitNFT from '../build/artoolkitNFT_ES6_wasm.js'
and inside initialize:
async initialize() {
const runtime = await artoolkitNFT();
this.instance = runtime
this._decorate()
const scope = (typeof window !== 'undefined') ? window : global
//...other code
return this;
}
Having the use case where I need to fetch the descriptor files from a file server. Unfortunately those filenames include an individual hash value. So I need to set the individual file paths for the fset, fset3 and iset descriptor files, but jsartoolkitNFT just supports the prefix url string assuming all files have the same file name excluding the extension.
What about defining those urls paths optionally by an array ? -> ["path/to/file.fset", "path/to/file.fset3", "path/to/file.iset"]
Tried this in my fork and it works with some minor changes. I will create a PR, so you cann have a look at the implementation.
i found this bug at the line:
https://github.com/kalwalt/jsartoolkitNFT/blob/a3c34596b5266a9685bb6f5d4309c75ab4c843d4/src/arnft-eventlisteners.js#L1
the argument should be event
not listeners
. I will fix tomorrow.
Hello - Is it possible to add typescript types?
Thanks
This one feature that absoultely we must add.
I just testing the multi.html in examples and I get "Unhandled Promise Rejection: RuntimeError: Aborted(CompileError: WebAssembly.Module doesn't parse at byte 272: invalid opcode 253, in function at index 75). Build with -s ASSERTIONS=1 for more info." at artoolkitNFT_wasm.js
The error only occur in iOS devices but android device run smooth.
We could put the delegateMethods interface
jsartoolkitNFT/src/ARControllerNFT.ts
Lines 46 to 112 in 9277579
jsartoolkitNFT/src/ARToolkitNFT.ts
Line 56 in 9277579
any
declaration.deleteCamera() is defined here:
jsartoolkitNFT/js/artoolkitNFT.api.js
Line 839 in b86b70b
jsartoolkitNFT/js/artoolkitNFT_ES6.api.js
Line 844 in b86b70b
Previuosly we used the trzeci/emscripten docker container, but now is deprecated, it is recommended to use the https://hub.docker.com/r/emscripten/emsdk, included also in the emsdk github repository. Alternatively use latest or at least a newer emscripten version, because it has a lot of optimizations.
I have enabled gh-pages for the project, but if you go to the example:
https://kalwalt.github.io/jsartoolkitNFT/examples/arNFT_example.html
the WebWorker can not import the wasm file because the wrong path:
https://kalwalt.github.io/build/artoolkitNFT_wasm.js
but it sould be instead:
https://kalwalt.github.io/jsartoolkitNFT/build/artoolkitNFT_wasm.js
i will fix this, and i will add also a index file for the examples.
A similar issue also happens for codepen, i think i need to implement the regex test as i did for AR.js:
Can jsartoolkitNFT overlay 2D text?I want to mark his name, color and other text on the target, I wonder if it can be achieved?How?I have studied for a long time and have no solution. I hope to get your help. Thank you!
Hey, trying first steps with this module but get this error in my Vite react-ts project:
What I did:
$ npm create vite@latest (etc.)
$ npm i @webarkit/jsartoolkit-nft
import { ARToolkitNFT, ARControllerNFT } from '@webarkit/jsartoolkit-nft'
VS Code says:
Module '"@webarkit/jsartoolkit-nft"' has no exported member 'ARToolkitNFT'
Module '"@webarkit/jsartoolkit-nft"' has no exported member 'ARControllerNFT'
But it works when I add // @ts-ignore
above.
Any ideas what' the issue?
@jcansdale trying to install the 0.7.1 version of the npm package fails with this error:
~/kalwalt-github/ARnft$ npm install
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @kalwalt/jsartoolkit-nft@^0.7.1.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'ARnft'
npm ERR! notarget
npm ERR! A complete log of this run can be found in:
npm ERR! /home/walter/.npm/_logs/2020-09-22T18_35_58_328Z-debug.log
but if you look at https://github.com/kalwalt/jsartoolkitNFT/packages/197592 it should exist. That is strange... Can be solved this?
you can test with npm install @kalwalt/[email protected]
Hi
I want to run the example ARToolkitNFT_ES6_example.html with a gltf model ,but not lucky i was failed ,here is the code i am use
var loader = new THREE.GLTFLoader();
loader.load( './Flamingo.glb', function ( gltf ) {
gltf.scene.rotation.x = 0.5*Math.PI;
gltf.scene.position.z = 40;
gltf.scene.position.x = 80;
gltf.scene.position.y = 80;
gltf.scene.scale.set(80,80,80);});
var root3 = new THREE.Object3D();
scene.add(root3);
root3.matrixAutoUpdate = false;
root3.add(gltf);
of course i have the GLTFLoader.js
So please help me
Grunt dose not receive any update, and maybe there are some better alternatives for CI tests. I know cypress but maybe there are other available libs?
The CPU usage is at 90% when tracking a single image. How to reduce CPU load without compromising the tracking performance?
We need to verify if these functions are needed or not for NFT:
I'm trying to load multiple NFT markers, namely more than 9, but I'm getting the error exceed maximum pages
.
I've changed the max pages count here -> https://github.com/webarkit/jsartoolkitNFT/blob/master/emscripten/ARToolKitJS.cpp#L26
based on this thread -> artoolkitx/jsartoolkit5#95 (comment).
I've rebuilt the project (based on the wiki instructions) but it doesn't seem to change anything.
Surely I'm doing something wrong or am I missing something?
Great work! I love the idea of o lightweight option for NFT.
I have two questions:
An important use case will be to know the location and orientation of the NFT marker (or corners). without displaying AR. I know that isn't the goal, but the jsartoolkitNFT wasm would be perfect. I'm trying to put this into a vue single file component with the source video as a prop.
Hey,
i believe that i have become aware of an error concerning changing the near and far plane after camera initialization. When i change those after initialization (e.g. arControllerNft.setProjectionFarPlane(..)
) the camera matrix will not be updated:
Seems the values are only taken into account in the setup method?
jsartoolkitNFT/emscripten/ARToolKitJS.cpp
Line 716 in f639010
jsartoolkitNFT/emscripten/ARToolKitJS.cpp
Line 514 in f639010
I try to increase the far plane value, because the augmentation model gets lost when the tracking image is to far away from the camera, but it's still tracked (what i can read from the logs).
Did I get something wrong?
Thanks a lot.
testing the new 0.9.0 version with typescript support, i see that we need to make some changes, i will write a list here:
initWithDimensions
and initWithImage
methods options should be an optional argumentCollecting here all the resources for converting the project to the ES6 standard. Initially i was thinking that this should be done in another step but maybe better do this as soon as possible. There are some difficulties for me to convert the code to the ES6 standard. Not much for the arNFT lib but most for JsartoolkitNFT. In particular convert the addNFTMarker https://github.com/kalwalt/jsartoolkitNFT/blob/bc2e61c413dda6b3b72e10776eff3ec1a0e574ea/js/artoolkitNFT.api.js#L963-L977 method to ES6. I need to solve this problem. This is the most important.
While building libs with emscripten i get warning like this one:
// long list of warnings, omitted for brevity.
ARToolKitJS.cpp:718:16: warning: ISO C++11 does not allow conversion from string literal to 'char *' [-Wwritable-strings]
webarkitLOGi("Allocated videoFrameSize %d", arc->videoFrameSize);
^
Of course this is a WebARKitLib issue, writing here for future reference and as reminder.
The global artoolkitNFT variable is not necessary and we can remove it, there are other way to pass data and objects.
I will try to summarize how we can do this and which steps are required to accomplish this.
First step is to remove the artoolkitNFT global variable defined here
jsartoolkitNFT/emscripten/ARToolKitJS.cpp
Lines 162 to 228 in b86b70b
Second step is remove it from setup() method
jsartoolkitNFT/emscripten/ARToolKitJS.cpp
Lines 704 to 741 in b86b70b
jsartoolkitNFT/emscripten/ARToolKitJS.cpp
Lines 685 to 698 in b86b70b
jsartoolkitNFT/emscripten/ARToolKitJS.cpp
Line 273 in e9cd198
jsartoolkitNFT/emscripten/ARToolKitJS.cpp
Line 130 in e9cd198
frameMalloc
).
During compilation libar.bc
is compiled, and that is intended for "production" but there is no a debug version. So if you run th debug version it will be missed all the demagled names and other infos. It could be a nice addition for debugging.
I have tried almost all versions of jsartoolkit5 and ar.js .
it seems that moving to your "new positioning" method for tracking , makes movement of overlay object a little weired .
Now , object or image or video , seems not sticking to the target and continuesly moving by camera's movement .
i think this is far from the concept of augmented reality which is must the overlay object stick on target and move exactly with target movement .
but I have tried your approach for "new filtering with worker" and it was really better than other methods .
thank you
Where would I find the camera_config.exe? I was wondering if you were able to save and or build this exe I read about in the ARTookKit documentation? My search has found nothing but a bunch of dead ARToolKit sites
I am running your NFT library in BabylonJS with some good results. But, the tracking is off when the camera is at an angle with the target, and I am hoping it will be better if I calibrated this project for the web camera I am using. This is for a Desktop AR project and I believe the existing camera-param.dat file is better fitted for phone camera lenses.
loadNFTMarkers has incorrect return signature
(method) ARControllerNFT.loadNFTMarkers(urlOrData: string[], onSuccess: (ids: number) => void, onError: () => void): Promise<[{
id: number;
}]>
onSuccess: (ids: number) should be onSuccess: (ids: number[])
currently have to convert it to unknow first:
await controller?.loadNFTMarkers(markers, (ids:unknown) => {...}, ... )
There few key points to solve to make artoolkitNFT.api.js (to be precise the libs compiled with artoolkitNFT.api.js -> artoolkitNFT_wasm.js and artoolkitNFT.min.js) to use on node.js. At the moment it can not be used because there are DOM objects and self
is not recognized as globalThis:
jsartoolkitNFT/js/artoolkitNFT.api.js
Lines 4 to 9 in 5a3230c
scope = global
for the NODE env.I embedded the WebWorker inside the lib with #8 but something went wrong with the minification process, actually it can not load the webworker. Probably the issue is caused by how is parsed the Blob by terser, Further investigation is required.
As said in issue #128 #128 (comment) we should build the dist lib with these instructions:
// in webpack.config.js
target: 'node',
node: {
process: false
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
],
In arnft-init.js we have cameraParam variable:
https://github.com/kalwalt/jsartoolkitNFT/blob/a3c34596b5266a9685bb6f5d4309c75ab4c843d4/src/arnft-init.js#L3
but it is not needed because we inject the camera parmeter with the json file.
Reading the emscripten simd documentation seems that we could add other flags i think -msse
. I will make a test and probably a new PR.
I don't know if can have an impact on perormaces change the ProcMode with NFT, we need to test if change something with:
The objects in the scene are scaled way too big (200 Units) in the example. If we didn't scale it the object is too small. How to fix this and the shaking too?
Docs are very important. At this point JsartoolkitNFT and ARnft needs more documentation.
wiki page is outdated, there are references to ARToolkit5 instead JsartoolkitNFT use our WebARKitLib. This need to be fixed.
From emsdk version 3.1.0 (see https://emscripten.org/docs/introducing_emscripten/release_notes.html) ES6 is used in the core libraries, this means that we can try to use such feature in artoolkit.api.js or maybe, at least, create an alternative artoolkit_ES6.api.js for testing.
I would remove that lines and make all the code full Typescript compliant. For example lines:
jsartoolkitNFT/src/ARControllerNFT.ts
Lines 301 to 302 in 5a3230c
this.nftMarkerFound = <boolean><unknown>i;
hi
i just found this great lib, now using the multi-marker dev branch.
I use npm to import the lib in the worker as 'importscripts()' is not working in my webpack setup.
import { ARToolkitNFT, ARControllerNFT } from '@webarkit/jsartoolkit-nft'
i got the following error: Cannot read properties of undefined (reading 'initWithDimensions')
when this line runs: ARToolkitNFT.ARControllerNFT.initWithDimensions(msg.pw, msg.ph, msg.camera_para).then(onLoad).catch(onError)
if i use new ARControllerNFT.initWithDimensions(..)
it goes on, but later it is not recognising ar.loadNFTMarkers() as a function... though arobject arrives in the callback.
could be a worker-level thing i am not familiar with.
maybe you know what is the best workaround.
keep up the good work!
thanks.
Probably we can use jsdom so the code will be nodejs compatible.
I think it wolud be better tranform the delegateMethods interface
jsartoolkitNFT/src/ARControllerNFT.ts
Lines 46 to 112 in 7f5d28a
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.