AR.js with new ES6 standard and npm package

[kalwalt]

:factory_worker: ES6 feature under development

We (@MikiDi @nickw1 @nicolocarpignoli and other) are working to make this a reality see #116 . At this time it is possible to import AR.js into a React environment. You can check it in my example repo react-AR-experiments. I made a simple set up for the THREEx API in this folder react-threex-example. You need to install the dependencies with yarn follow the instructions This is a simple example with a pattern HIRO marker, This feaure is not yet ready, but if you want to test you are welcome.

:truck: Importing the package

~At this moment we have not yet our npm repository you can import as a package in this way: "@ar-js-org/ar.js": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>" where the<GIT_COMMIT_HASH> is the latest git commit hash,~

Install the package with NPM:

npm i @ar-js-org/ar.js

~### :exclamation: Note:~ ~You need to change <GIT_COMMIT_HASH> every time we push changes in the ES6 branch.~

:package: NPM package

~We will setup the npm package as soon as the code will be almost ready to be merged in the dev branch (we are working on this too...). We have set up a NPM organization, so we will publish as a scoped package: @ar-js-org/ar.js~

We have the first beta package at https://www.npmjs.com/package/@ar-js-org/ar.js.

:video_game: Aframe version

I didn't yet made a working example with. I'm trying to do in react-arjs-example, but at the moment is not working properly. If you are an expert with AFRAME and React, a help is very welcome. But @thauska made this project with Aframe-Vue https://github.com/thauska/peticov-ar if you want to test. In addition @j-era and friends are developing react-three-arjs

:video_camera: Live examples

There aren't Live examples yet, i will provide them soon...

Report here if you find some issues, but consider that not all the code was ported yet... and some bugs may arise. :slightly_smiling_face:

[LucaJunge]

I sucessfully integrated AR.js in a Vue.js project and it works.

https://github.com/LucaJunge/arjs-vue

I noticed that I still get a warning: WARNING: Multiple instances of Three.js being imported. when using import * as THREE from 'three';

It doesn't work without the THREE import however. I also needed to tweak your example a bit:

• [in package.json]: changing the dependency from "arjs": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>" to "ar-js-org": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>"
• [in App.vue]: reflecting that "ar-js-org" change in import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls} from 'ar-js-org/three.js/build/ar-threex.js';

I noticed some issues regarding the resize of the video element at load. See the comments in the ARScene.vue file for reference. Maybe that's a vue specific issue and "mounted()" is not the right point for the code. I will test that further.

Using a framework like React or Vue opens up the possibilities of using a Single Page App together with routing. AR.js does not seem to support that, as the video and canvas elements get appended to the body of the page and also change its width and height, which breaks the layout of a Single Page App. I think we should be able to select an element where the width and height of the video and canvas change according to its size, right?

[jblnco-ing]

Hi, i tried import in a Next js project, but not work, maybe by the dependencies of axios. I'll share the code soon.

[kalwalt]

I sucessfully integrated AR.js in a Vue.js project and it works.

https://github.com/LucaJunge/arjs-vue

I noticed that I still get a warning: WARNING: Multiple instances of Three.js being imported. when using import * as THREE from 'three';

It doesn't work without the THREE import however.

that's great! thank you for testing, and yes i also saw that multiple instances of Threejs. I left a note on the PR.

I also needed to tweak your example a bit:

• [in package.json]: changing the dependency from "arjs": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>" to "ar-js-org": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>"
• [in App.vue]: reflecting that "ar-js-org" change in import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls} from 'ar-js-org/three.js/build/ar-threex.js';

why you need to do this? Anyway this is not important as we haven't yet a npm package. We will publish a beta package it when it will merged in the dev. I can say that it will be a scoped name as : @ar-js-org/ar.js because i created a npm organization.

I noticed some issues regarding the resize of the video element at load. See the comments in the ARScene.vue file for reference. Maybe that's a vue specific issue and "mounted()" is not the right point for the code. I will test that further.

It could be possible, that need more tests.

Using a framework like React or Vue opens up the possibilities of using a Single Page App together with routing. AR.js does not seem to support that, as the video and canvas elements get appended to the body of the page and also change its width and height, which breaks the layout of a Single Page App. I think we should be able to select an element where the width and height of the video and canvas change according to its size, right?

I think that will be space for more enhancement in a future PR, we should reach to an end and release it. That you question has a complete meaning.

[kalwalt]

Hi, i tried import in a Next js project, but not work, maybe by the dependencies of axios. I'll share the code soon.

Yes post the code and some logs, thank you! :smile:

[LucaJunge]

why you need to do this? Anyway this is not important as we haven't yet a npm package. We will publish a beta package it when it will merged in the dev. I can say that it will be a scoped name as : @ar-js-org/ar.js because i created a npm organization.

This wasn't really necessary, thats true, but I wanted to follow your suggestion of using the ar-js-org package name but of course, this can be freely chosen right now when pulling it directly from github.

I think that will be space for more enhancement in a future PR, we should reach to an end and release it. That you question has a complete meaning.

Yes, getting this library to work stable in ES6 at first is important. For now, I figured out a hacky workaround for Vue (and potentially React as well). I'm posting it here for anyone interested: You can use Vues lifecycle hook beforeDestroy() that executes code before it destroys the component. The route seems to be loaded already, so calling location.reload() in there reloads the new route and therefore resets the styling of the body element and everything AR.js related. Not so elegant, but it works.

React's equivalent seems to be componentWillUnmount(), but maybe React's router works differently, so this may not work with React or this specific hook).

[jblnco-ing]

Hi, i create a new react project and import with npm this repository, but said this message:

npm i https://github.com/AR-js-org/AR.js.git#595a5c1c7020d3dd46f7082f63b5b7cca6d376e npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'aframe@1.2.0', npm WARN EBADENGINE required: { node: '>= 4.6.0', npm: '^2.15.9' }, npm WARN EBADENGINE current: { node: 'v14.15.4', npm: '7.8.0' } npm WARN EBADENGINE } npm WARN deprecated axios@0.19.2: Critical security vulnerability fixed in v0.21 .1. For more information, see https://github.com/axios/axios/pull/3410

added 59 packages, and audited 2119 packages in 42m

138 packages are looking for funding run npm fund for details

5 vulnerabilities (2 low, 3 high)

To address issues that do not require attention, run: npm audit fix

Some issues need review, and may require choosing a different dependency.

Run npm audit for details.

[kalwalt]

Hi @jblnco-ing, that is strange... can you try pulling the Ar.js npm package from this this commit instead? I have already reported to @andypotato in the PR #116 that the artoolkit5-js package need an update, (because tha axios issue and others), i hope that soon will be fixed. An alternative is fork the project in the AR.js-org and publish our scoped npm package.

[kalwalt]

@jblnco-ing have you tried again? Did you solved?

Note: npm WARN EBADENGINE could be also due to a internet connection issue...

[karltaylor]

I'd like to help with developing the Typescript types to get intellisense when working in vscode. What is the best way to approach and contribute?

Is it worth forking this project and building a types.d.ts? I would assume this could then get ported over to https://definitelytyped.org/

[kalwalt]

I'd like to help with developing the Typescript types to get intellisense when working in vscode. What is the best way to approach and contribute?

Is it worth forking this project and building a types.d.ts? I would assume this could then get ported over to https://definitelytyped.org/

Hi @karltaylor you are welcome! May we discuss this in another issue? i can say that first it would require to develop the artoolkit5-js version and then the typed AR.js version.

[Zaniyar]

Any progress about npm package yet?

I tried this in my react app:

import * as THREE from "three"; import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls} from 'ar-js-org/three.js/build/ar-threex.js';

added this to my package.json: "ar-js-org": "https://github.com/AR-js-org/AR.js.git#aaad9847f67a4738b00724c38d9f501d78e0a8af",

ERROR

ReferenceError: THREE is not defined (anonymous function) /project/react-ar/node_modules/ar-js-org/three.js/build/ar.js:1669 1666 | 1667 | THREEx.ArBaseControls.id = 0 1668 |

1669 | Object.assign( THREEx.ArBaseControls.prototype, THREE.EventDispatcher.prototype ); 1670 | 1671 | ////////////////////////////////////////////////////////////////////////////// 1672 | // Functions

Fixed:

=> First of all look that you change from the master branch to ES6 branch and copy the commit #hash from there for your package.json:

"ar-js-org": "https://github.com/AR-js-org/AR.js.git#90e83dc4003aa1980b242014b3ca054effed8edf", => Second do import ar-threex.js from the build (not the ar.js) like this:

import * as THREEx from 'ar-js-org/three.js/build/ar-threex'; rest stays the same.

[thauska]

I've one question: is the ES6 branch recommended to use with A-Frame?

[thauska]

Hi everyone,

I made this example, integrating A-Frame + AR.js with Vue.js using Quasar Framework.

source-code: https://github.com/thauska/peticov-ar live example: https://thauska.github.io/peticov-ar/

[kalwalt]

Hi everyone,

I made this example, integrating A-Frame + AR.js with Vue.js using Quasar Framework.

source-code: https://github.com/thauska/peticov-ar live example: https://thauska.github.io/peticov-ar/

Thank you @thauska for sharing!

[kalwalt]

@thauska it seems that the aframe version works fine. Just got back from holidays, i have did some quick test with your vue App, so i would to know if you tried with different Mobile devices and how is responding. Last time i tried the basic aframe examples (not importing with npm) i had bad results, because some css issues. If we solve these last, we can think to publish a first raw beta npm package.

[thauska]

@kalwalt I've test it with: Samsung A70 and Chrome browser iPhone 11 and Safari Mi Note 10 and Chrome LG Q6 and Chrome

The only issue is with the PNG file with transparent shader. It seems like he get lost to set the position on the marker sometimes.

[kalwalt]

@kalwalt I've test it with: Samsung A70 and Chrome browser iPhone 11 and Safari Mi Note 10 and Chrome LG Q6 and Chrome

ok thank you!

The only issue is with the PNG file with transparent shader. It seems like he get lost to set the position on the marker sometimes.

You mean that it get lost the PNG?

[thauska]

https://user-images.githubusercontent.com/8525721/140053542-bc4ae76c-64db-4bcd-a64b-38cc2e96e78e.mp4

@kalwalt Mi Note 10 and Chrome

[kalwalt]

video_2021-11-03_08-37-43.mp4 @kalwalt Mi Note 10 and Chrome

Hi @thauska i have no idea what could be the cause, but maybe we can solve it in another step. I'm considering that we could publish a first npm package, I reviewed the code and made other tests on the ES6 branch and i don't see any reason to not publish. Of course we will encounter some issues, and also the ES6 branch need some updates before merging in the dev branch. In this way we can do some more tests. This is my thought. :smile:

[thauska]

video_2021-11-03_08-37-43.mp4 @kalwalt Mi Note 10 and Chrome

Hi @thauska i have no idea what could be the cause, but maybe we can solve it in another step. I'm considering that we could publish a first npm package, I reviewed the code and made other tests on the ES6 branch and i don't see any reason to not publish. Of course we will encounter some issues, and also the ES6 branch need some updates before merging in the dev branch. In this way we can do some more tests. This is my thought. 😄

This problem happens in pure HTML to, on some mobile devices. It's not an ES6 issue. I think that can publish the npm package. It seems fine. I can make some test to. Let me know the news. 🥰

[kalwalt]

video_2021-11-03_08-37-43.mp4 @kalwalt Mi Note 10 and Chrome

Hi @thauska i have no idea what could be the cause, but maybe we can solve it in another step. I'm considering that we could publish a first npm package, I reviewed the code and made other tests on the ES6 branch and i don't see any reason to not publish. Of course we will encounter some issues, and also the ES6 branch need some updates before merging in the dev branch. In this way we can do some more tests. This is my thought. smile

This problem happens in pure HTML to, on some mobile devices. It's not an ES6 issue. I think that can publish the npm package. It seems fine. I can make some test to. Let me know the news. smiling_face_with_three_hearts

Ok good to know! Then i will publish the first npm package.

[kalwalt]

We have a first npm package! See and test please: https://www.npmjs.com/package/@ar-js-org/ar.js

[nickw1]

@kalwalt Great news! Will test as soon as I have a moment.

[raywu]

@kalwalt I'll take it for a spin on React this week! I'm assuming as of your comment 6 days ago the react-arjs-example still isn't working?

[j-era]

We've tried to integrate the npm package into react-three-arjs. The problem is that the current version of your package is not compatible of the latest version of three.js, which is required by the current version of react-three-fiber. Therefore we' ve forked ar.js and fixed it for our use-case. Are you planning to fix this in your repo as well?

[kalwalt]

@kalwalt I'll take it for a spin on React this week! I'm assuming as of your comment 6 days ago the react-arjs-example still isn't working?

Hi @raywu I heaven't fixed yet but you can look at the Vue example posted by @thauska, you can find at the top of the thread.

We've tried to integrate the npm package into react-three-arjs. The problem is that the current version of your package is not compatible of the latest version of three.js, which is required by the current version of react-three-fiber. Therefore we' ve forked ar.js and fixed it for our use-case. Are you planning to fix this in your repo as well?

@j-era I can fix that if not require much changes and make another release or you can send a PR to the ES6 branch.

[kalwalt]

@j-era i see that you are using a more recent three.js version https://github.com/artcom/react-three-arjs/blob/2b3b5e4e508cb879f65336098a6e2c3128bd411b/package.json#L58 i will try to upgrade it.

[j-era]

@kalwalt Thank you very much for your effort and the update. Works great with the npm package 3.3.3-es6-beta-01. Looking forward to the final version 👍

[kalwalt]

@kalwalt Thank you very much for your effort and the update. Works great with the npm package 3.3.3-es6-beta-01. Looking forward to the final version +1

That's a good news! If you agree, i can mention your project/package at the top of this topic.

[j-era]

@kalwalt Thank you very much for your effort and the update. Works great with the npm package 3.3.3-es6-beta-01. Looking forward to the final version +1

That's a good news! If you agree, i can mention your project/package at the top of this topic.

Sure, sounds good :)

[nickw1]

@kalwalt to confirm, some location-based examples work fine with the NPM package! Many thanks again for this.

[kalwalt]

@kalwalt to confirm, some location-based examples work fine with the NPM package! Many thanks again for this.

Super! I'm going to merge it in the dev branch.

[kalwalt]

The ES6 branch is merged in dev! I have published a new npm beta package 3.3.3-es6-beta-02 and created a beta git tag https://github.com/AR-js-org/AR.js/releases/tag/3.3.3-es6-beta-02 though in dev i think we have a important reference. I will start to create an issue wit a list of tasks to complete before merging into master, there are some points in the code that we need to improve and fix.

[kalwalt]

A new npm beta package 3.3.3-es6-beta-03 was published with the new three.js location based. Testing are welcome!

[antoniskamzel]

I've tried it with the npm package with Ionic Vue but I get the a-scene as a stripe and it is not loading correctly Code is File.vue (page) and it has a template with a div and in there is the a-scene and camera etc...

[kalwalt]

I've tried it with the npm package with Ionic Vue but I get the a-scene as a stripe and it is not loading correctly Code is File.vue (page) and it has a template with a div and in there is the a-scene and camera etc...

Hi @antoniskamzel thank you for testing can you add some more detail? From your comment i think you tried the aframe code. In this last beta release i added only the threejs location based. Aframe still has some css issues that i didn't fixed yet; I'm not an Aframe guru so i find a bit hard to solve. Anyway @thauska made a vue example as mentioned in the top of the issue thread.

[kalwalt]

with #359 i think i fixed the skewing issue of meshes/models onto the markers. Can someone test the code on a mobile devices? Examples to test:

• three.js
  • arjs-session.html
  • minimal_ES6.html
• aframe
  • marker-camera.html
  • marker-events.html
  • minimal_ES6.html
  • minimal.html
  • multiple-independent-markers.html
  • white-region-marker.html

[kalwalt]

PR #359 has been merged in dev branch and a new npm beta package has been published: 3.3.3-es6-beta-04 !!

[kalwalt]

Now the ES6 feature is in master now! new release 3.4.0-alpha-rc1 with new npm pkg. If i can, will update my examples linked in this page.

[kalwalt]

New release 3.4.0-alpha-rc2 is out!

[kalwalt]

Because ES6 feature is merged, we can close this issue. Please open a specific issue if you encounter a new one.

[gelinger777]

@kalwalt sorry to comment it here, but is this possible to use for a GEO based AR ? I want to show some POI sign with text on buildings based on their lon/lat possition and position of the phone itself...

[kalwalt]

@kalwalt sorry to comment it here, but is this possible to use for a GEO based AR ? I want to show some POI sign with text on buildings based on their lon/lat possition and position of the phone itself...

Yes of course, look at location based version, now there are for both three.js and aframe. Please, If you have a specific issue open a new one.

[nickw1]

@gelinger777 specifically look at these examples:

A-Frame: https://github.com/AR-js-org/AR.js/tree/master/aframe/examples/new-location-based

three.js: https://github.com/AR-js-org/AR.js/tree/master/three.js/examples/location-based

As @kalwalt says, if you have problems after looking at these examples, please open a new issue.

[exagyde]

Hi, do you have any example to use the npm package of AR.js with an basic node.js application (I only use Express framework for routing) ?

[nickw1]

HI @exagyde I do have a Node/Express-driven application which uses AR.js, though it doesn't currently use the npm package. Nonetheless it could be updated fairly easily to do so.

It's the Hikar webapp (see https://hikar.org), available at https://github.com/nickw1/hikar.js

Not sure if it's what you're looking for but might be useful.

Incidentally the Discussions tab is probably the best place to ask this, as this is now a closed issue and might not get so much attention.

[gelinger777]

sorry again to flood this closed ticket. First of all thank you very much @nickw1 for pointing out to those two examples. My actual problem is that I want to integrate this into an ionic based mobile app. We use Angular flavour of Ionic for the app. My main problem is that a) how to properly initialize the scene and other elements b) to understand which version to use aframe or threejs? Which one would better be in terms of npm packages, initializations and co .

Basically what we want to achieve is something similar to the demo image of AR.js (second demo in the middle) https://ar-js-org.github.io/AR.js-Docs/intro-image.gif

[yoavmil]

I am also looking for a working Angular example.

[commentatorboy]

Hello guys. I tried to make it work with Vue as well with the new npm package. @LucaJunge I used a slightly different approach and tried to implement the hiro example in the readme.

I got it to work as well, but only if you set it in VR mode. You can checkout the example here. https://github.com/commentatorboy/ARJSVue

[kalwalt]

Hello guys. I tried to make it work with Vue as well with the new npm package. @LucaJunge I used a slightly different approach and tried to implement the hiro example in the readme.

I got it to work as well, but only if you set it in VR mode. You can checkout the example here. https://github.com/commentatorboy/ARJSVue

@commentatorboy i'm working to add type definitions to AR.js see this PR https://github.com/AR-js-org/AR.js/pull/506 If this can help.