Preparing jsartoolkit5 to import it as a nodejs package

[kalwalt]

I would do these changes as soon my branch fixing-nft #1 will be merged in the master of artoolkitx/jsartoolkit5, collecting here all the issue and infos needed for the process.
Started form this issue #24.

[kalwalt]

It need to be changed in artoolkit.api.js all the references to the window object and self ( we should use global instead for node) in detail at the beginning:

jsartoolkit5/js/artoolkit.api.js

Lines 4 to 9 in 4a2fd7b

	var scope;
	if (typeof window !== 'undefined') {
	scope = window;
	} else {
	scope = self;
	};

and maybe in other parts of the lib.
In artoolkit.three.js inside the tick() function, all the window object need to be changed:

jsartoolkit5/js/artoolkit.three.js

Lines 389 to 393 in 4a2fd7b

	var tick = function() {
	if (window.ARController && window.THREE) {
	integrate();
	if (window.ARThreeOnLoad) {
	window.ARThreeOnLoad();

[kalwalt]

i did some progress on this side, i have created a new repsitory https://github.com/kalwalt/jsartoolkit5-nodejs to test and make the required changes to jsartoolkit5 for use it with node. Actually artoolkit.api.js can be imported , not the minified lib. I will show you more details soon.

[kalwalt]

I created a branch https://github.com/kalwalt/jsartoolkit5/tree/nodejs-feature in which i'm experimenting jsartoolkit5 as a module. I build the jsartollkit5 lib with the Modularize option

jsartoolkit5/tools/makem.js

Line 167 in a13cad4

var MODULARIZE_FLAGS = ' -s EXPORT_ES6=1 -s MODULARIZE=1 '

now importing artoolkit.min.js into node i get this error:

node index.js
(node:10785) ExperimentalWarning: The ESM module loader is experimental.
we are here !
file:///home/walter/kalwalt-github/test/jsartoolkit5-nodejs/jsartoolkit5/build/artoolkit.min.js:9
var Module=typeof Module!=="undefined"?Module:{};(function(){"use strict";var scope;if(typeof window!=="undefined"){scope=window}else if(typeof window=="undefined"){scope=global}else{scope=global}if(scope.artoolkit_wasm_url){var downloadWasm=function(url){return new Promise(function(resolve,reject){var wasmXHR=new XMLHttpRequest;wasmXHR.open("GET",url,true);wasmXHR.responseType="arraybuffer";wasmXHR.onload=function(){resolve(wasmXHR.response)};wasmXHR.onerror=function(){reject("error "+wasmXHR.status)};wasmXHR.send(null)})};var wasm=downloadWasm(scope.artoolkit_wasm_url);Module.instantiateWasm=function(imports,successCallback){console.log("instantiateWasm: instantiating synchronously");wasm.then(function(wasmBinary){console.log("wasm download finished, begin instantiating");var wasmInstantiate=WebAssembly.instantiate(new Uint8Array(wasmBinary),imports).then(function(output){console.log("wasm instantiation succe

ReferenceError: module is not defined
    at file:///home/walter/kalwalt-github/test/jsartoolkit5-nodejs/jsartoolkit5/build/artoolkit.min.js:9:28048
    at file:///home/walter/kalwalt-github/test/jsartoolkit5-nodejs/jsartoolkit5/build/artoolkit.min.js:9:28141
    at file:///home/walter/kalwalt-github/test/jsartoolkit5-nodejs/index.js:5:13
    at ModuleJob.run (internal/modules/esm/module_job.js:109:37)
    at async Loader.import (internal/modules/esm/loader.js:133:24)

because this line:

jsartoolkit5/js/artoolkit.api.js

Line 2059 in a13cad4

module.exports = { artoolkit, ARController, ARCameraParam };

[andypotato]

You're trying to build an ES6 module but the API is exporting modules using CommonJS format (module.exports...).

I'd love to see jsartoolkit built as a module as it will enable dependent projects like AR.js to be built as modules too. Will give it a try myself.

[kalwalt]

You're trying to build an ES6 module but the API is exporting modules using CommonJS format (module.exports...).

yes, probably has not much sense...

I'd love to see jsartoolkit built as a module as it will enable dependent projects like AR.js to be built as modules too. Will give it a try myself.

Me too, this is the idea! Ping me if you have questions or for help!

[andypotato]

I will start by installing the environment to build the artoolkit module using emscripten. Once I got that running I can have a deeper look into the API itself.

Probably it will need a rewrite as ES6 module and we could use babel / webpack to create different output formats for CommonJS / Browser etc.

Will give compiling a shot first!

[kalwalt]

@andypotato You can also look at my branch https://github.com/kalwalt/jsartoolkit5/tree/nodejs-feature with some proposed modifications for nodejs. Good luck!

[andypotato]

I haven't worked with emscripten Modules before but it seems pretty straightforward. So far I've managed to compile the debug and minified versions of artoolkit (artoolkit.debug.js / artoolkit.min.js), also the wasm module and the JS wrapper.

If I understand your code correctly you created artoolkit.api.js as a kind of high-level API on top of the original artoolkit C-Module, correct? Also artoolkit.three.js as another set of convenience methods on top of Three.js?

[kalwalt]

@andypotato artoolkit.api.js is used in combination with artoolkit.debug.js if you want a lib with debug symbols. Apart this aspect artoolkit.api.js is added in the minification version with a --pre-is flag so every changes/modifications you do in artoolkit.api.js code needs a rebuild of the entire project. and yes is a kind of high level API: all the methods you define in ARToolKitJS.cpp are exported in the bind file ARBindEM.cpp in artoolkit.api.js are imported as an array in the Module https://github.com/artoolkitx/jsartoolkit5/blob/244b2b23286403e78fa24805b34509dc5a88052f/js/artoolkit.api.js#L1798-L1859
Yes artoolkit.three.js is also another set to facilitate Three.js with jsartoolkit5.

[andypotato]

@kalwalt thanks for the input!
I believe to properly modularize this project we need to break it down into separate modules. My suggestion is to split the emscripten build into a separate repository and what you call "jsartoolkit5" then includes that module. Currently this is just a bit too messy with all the API, Three.js integration.

With a bit of luck I should have a modularized emscripten build of the original ARToolkit in a separate repository ready by tomorrow, then we can take it from there.

[kalwalt]

@andypotato not understand well how you separate the two things but if you create a repository i will look at. 🙂

[andypotato]

Let me explain. Currently this project is structured like this: * Originally @mikocml created a JS port of ARToolkit using emscripten * @mikocml also created a couple of helper classes such as the API class and the Three helper class * You made some modifications to the emscripten build process and the classes, for example to enable NFT Now the issue is that all of this code - although working fine - is a pretty messy in terms of structure. For example ARToolkit and the API are all mixed up in the API class file and really hard to maintain. I haven't looked much at that Three helper class but it looks pretty similar. Therefore a first step will be to separate the emscripten build from the additional layer of JS classes. Means to wrap ARToolkit inside a proper module which can then be imported by the API or Three or whatever other project.  Also if packaged as an UMD library then it's usable inside the Browser, NodeJS or any environment that supports ES6 modules. Afterwards it will be pretty straightforward to rewrite the API and Three class to import this module and use it as a dependency. This will enable @nicolocarpignoli over at AR.js to start working on a proper module port of AR.js. Instead of using the convoluted process of just concatenating all kinds of JS files he can import A-Frame, Three and JSARToolkit as dependencies and create a clean module-based build. More clear now? Cheers!

…

On 2/17/2020 11:33 PM, Walter Perdan wrote: @andypotato <https://github.com/andypotato> not understand well how you separate the two things but if you create a repository i will look at. 🙂 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#26?email_source=notifications&email_token=ACAZGSIAPAJ57NHEZ7Z2PT3RDKU3PA5CNFSM4KE7SAB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEL62GZY#issuecomment-587047783>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACAZGSIAAV34SIZNKOMUUALRDKU3PANCNFSM4KE7SABQ>.

[kalwalt]

Thank you @andypotato for the explanantion, it's very late now here i will answer tomorrow. 😄

[andypotato]

@kalwalt That's what I mean: https://github.com/andypotato/artoolkit5-js

It's plug & play. Include the module and you can remove all stuff related to ARToolkitX from your code base. Full WASM support is also included already.

[kalwalt]

@kalwalt That's what I mean: https://github.com/andypotato/artoolkit5-js

It's plug & play. Include the module and you can remove all stuff related to ARToolkitX from your code base. Full WASM support is also included already.

That's magic! 🎉 💯 🙌 i will try your code when i have a bit of time....

BTW my repository was a fork of original artoolkit/jsartoolkit5 repository that was deleted recently because the owner went in bankrupt. @ThorstenBux may explain this to you. I'm sorry but It was not created by the user you wrote in the Readme

About Ar.js:
Maybe this could be part of the AR-js-org one day ? Have you seen this?

[andypotato]

Maybe this could be part of the AR-js-org one day ? Have you seen this?

Sure, actually that's more or less why I'm doing this. I really like AR.js and the original idea by @jeromeetienne to integrate jsartoolkit as a service / component for A-Frame was pretty genius.

However AR.js was never designed as a real library and this makes it hard to re-use it in projects outside of simple websites. Quite frankly, the codebase today is a complete mess and very much in need of a total refactoring. A good start would be to streamline the build process and load all external dependencies like A-Frame, Three.js and jsartoolkit as modules. A-Frame and Three.js are already available - jsartoolkit I can handle.

When it's ready and @nicolocarpignoli could use a hand with all the refactoring and integration then I can help. I believe without cleaning up the codebase first, this whole idea of the web based AR design tool won't work.

Taking the opportunity to say hi to @ThorstenBux too. I saw you're working on a pretty similar ES6 project, maybe we can somehow merge our work?

[kalwalt]

Sure, actually that's more or less why I'm doing this. I really like AR.js and the original idea by @jeromeetienne to integrate jsartoolkit as a service / component for A-Frame was pretty genius

Ah ok! That is perfect!

However AR.js was never designed as a real library and this makes it hard to re-use it in projects outside of simple websites. Quite frankly, the codebase today is a complete mess and very much in need of a total refactoring. A good start would be to streamline the build process and load all external dependencies like A-Frame, Three.js and jsartoolkit as modules. A-Frame and Three.js are already available - jsartoolkit I can handle.

When it's ready and @nicolocarpignoli could use a hand with all the refactoring and integration then I can help. I believe without cleaning up the codebase first, this whole idea of the web based AR design tool won't work.

I agree with you. i think that is a long time that people are asking to load Ar.js as a module and other features. I realized that the coodebase need a restyling when i started with @nicolocarpignoli the NFT integration, but sincerely i have not the required skills, expertise and time to do this. I'm very happy that this now is happening.

Taking the opportunity to say hi to @ThorstenBux too. I saw you're working on a pretty similar ES6 project, maybe we can somehow merge our work?

yes @ThorstenBux did the awesome works to port artoolkitx to javascript with Emscripten: artoolkitX.js it has already ES6 and WASM. See also this discussion to publish it as a npm package