Assuming the data transfer times are low and that ARToolkit.detectMarker doesn't touch the DOM or related APIs, there's no reason we could put it into a worker.

It is very plausible some of the code in these files will be entirely unused and can probably be deleted. The code was ported from ar.js and it was hard to determine what was relevant and what was not.

Like the problem(Build static version of jsARtoolkit),How can I build a version without eval and new Function? Because I run this in an environment that don't support eval and new Function.

This should move us on the way to thinking and creating our types

If the issue is critical we should throw rather than console.assert or just console.warn if it doesn't have any effect to the end user

I use my android cellphone to test the examples. Only the basic.html works, for the others I got 'Uncaught ExistStatus' Exceptions.

Opera Mobile v51.2.2461.137690
Xiomi Mi8
MIUI 10 [Android]

Hello

THREEAR.js really is 2mb ?

https://github.com/JamesMilnerUK/THREEAR/blob/master/dist/THREEAR.js

It's so big, webpack freeze on build.

Thanks

By default you inject the camera (

Could be cool to inject it in a div... or any dom element :)

Same bug as in Ar.js, solved it by myself see:
jeromeetienne/AR.js#146 (comment)

THREEAR.initialize({ source: source }).then(controller => {
    // ...
    let m = camera.projectionMatrix;
    let far = 1000;
    let near = 0.1;

    m.elements[10] = -(far + near) / (far - near);
    m.elements[14] = -(2 * far * near) / (far - near);
    // ...
});

It would be nice to prevent markers from flickering on and off when they are detected/not detected in short intervals (say, sub second).

And also add them to the index page

Location based tracking with gps position and device orientation

Likely it will only be usefull if the target position is further away than 25-50m, but it opens a lot of new possibilitys like some navigation or geosearch apps

There is an experiment in ar.js:
https://github.com/ARjs-org/location-based-ar

I will make some experiments next week

At the moment we don't have any tests, but we should at least determine the build works and the linter passes.

Alongside TypeDoc documentation and examples we should have some short guide that explains how to do basic operations like setup a marker.

Hi, nice adaptation from AR.js! Great improvement to be able to run in a div, turn on/off, etc. More modular.

An issue I had with AR.js and still with this library, is that, using this library, the rendering of my objects becomes really low quality. I haven't been able to figure out how to tweak it.

This is the object in plain THREE.js:

and this is the same object in the scene/rendering setup from ThreeAR:

I use the setup code from the Basic Example

I also noticed that, if I render using my own PerspectiveCamera with size of the container, the low quality rendering is resolved. But then, of course, the scaling, aspect ratio and positioning is off.

I can imagine it has something to do with rendering size, but I haven't figured it out yet. Any help or fix would be much appreciated!

currenty the library dosen't work with different size video source. Given a portait video source(height>width), the 3D object gets stretched. When I switch to perspective camera, the stretching issue gone, but the 3D object dosen't perfectly attatch to the marker. Is it possible to use perspective camera in the first place and aslo attatch to the marker correctly ?

Hello, thanks for this plugins !!

Could be great to have to ability to change the facingMode with a new parameter in Source.ts

Selfie is popular :)

Thanks !

Hi there,

WEB AR Noob here, so please pardon.

I want to hide a Div when marker is found.

I found this https://jameslmilner.github.io/THREEAR/docs/classes/patternmarker.html#found

But don't know how to ad if statement in the basic demo.

Many thanks

Im trying to make THREEAR work in a webapp enviroment which disables eval() and new Function() syntax.
Is it possible to build a static version of jsARToolkit with NO_DYNAMIC_EXECUTION=1 flag?
I successfully compiled the jsARToolkit , but could not make it integrate with THREEAR.

Would be nice if we exclude three.js from threear, so both libarys could be imported independently. [What I need for an other project with a big webpack config]
Even the examples include both libs seperately

I want to ensure that this works via npm and then also in conjunction with a bundler

Hello,
There a way to remove a marker ?

Once added, maker is always tracked. Even if i "dispose" the controller.
I need to track different marker, but one at the time.

For the moment i have hack your code with a "canBeSearch" flag, but maybe there are a better way ?

Thanks !

At the moment you have to pass in an explicit URL. I think it would make sense to make it bundle in by default and then you can explicitly override it with a URL?

At the moment everything is prefixed with AR, i.e. ARSource but when we use the library it is leverage like THREEAR.ARSource so perhaps the AR prefix is unnecessary?

We are not currently supporting Tango (which I think is now ARCore) or Aruco, so references to this can be removed.

A lot of the popularity of AR.js comes from being compatible with Aframe, which is even simpler than using three.js. Are you planning / thinking about supporting this as well?

Hi, I am the lead maintainer of AR.js, I saw your project time ago, great great job!
I have a question: if you have time to give a look to this issue (jeromeetienne/AR.js#544): it is an attempt to bring NFT feature on AR.js (but it can also, obviously, be brought to THIS library of yours) using the NFT branch of jsartoolkit. Such branch is outdated, but it seems to work some time ago.

What do you think about that?
Did you have already done some experiments using other jsartoolkit version, like this one for example?

Thanks

I get an out of memory exeption in FF Mobile on a Xiomi Mi8[MIUI10.2, Android] on all online examples
But Chrome Mobile works

Hey
So i am trying to make this work with my React and react-three-fiber project
i followed the repo you mentioned on #76 as here

I get the following console logs

Allocated videoFrameSize 1228800
Pattern detection mode set to 1.
Pattern ratio size set to 0.500000.

And then I am getting the following error
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

I'm not sure where im wrong

• Is there an option to use more then one marker in this package?
  As example for the case: If marker one is detected, funtion one would be activated. If marker two is detected, function two would be activated. If both markers are detected, both option would be activated.
• Is there an option to use a multi-marker (several markers acting as one)?

It would be good to test the library in an actual browser. I'm not sure how realistic this is in as we'd probably need to mock getUserMedia and some other things, but it could be quite powerful in detecting that the code loads without errors as a minimum and potentially regressions we got it working.

Firstly, thank you for making this library. It is much easier to use and read, especially for an Angular project like what I'm working on.

We are having an issue with THREEAR where our barcode markers being reported as found long after they have been removed from the image. This happens when a single marker is being found and then the camera is moved off of it. The lostTimeout does not seem to change this behavior.

I believe I have found the reason for this. In ARToolKitController.ts when a frame is processed, if ARToolKit detects no markers the for loop is never gone through so the getMarker event is not emitted and thus the part of handleMarkerDetection() in Controller.ts that checks for lost markers isn't executed. This means that a marker will continue to be found until another marker or something that ARToolKit thinks is a marker at any level of certainty enters the frame.

The lost marker detection should probably be run on its own event that occurs once at the end of the process() function each frame.

It might be possible to get a more optimal build that exports to an ES6 Module if we build our own verison of ARToolkit, potentially stripping out all the Node specific code too.

Hello,

I try to dispose and recreate but it doesn't work.
I try with your example. But it's the same.

Wen we create, the Hiro marker is detected, i dispose it, recreate. And the hiro is no more detected.

Thanks !

Hello , thanks for closing all my issues/demand you rock !!

One more for you :)

We have markerFound event, but i don't see any markerLost ?
Something like that exist ?

Thanks !

Keeping a changelog will allow us to keep track of whats happened between releases. I am considering using https://www.npmjs.com/package/auto-changelog. Ideally I would like to use semantic versioning going forward. At the moment I am aiming to solidify the API so that we don't have to break major bump all the time in the future.

Looks like Brave behaves slightly differently then Chrome in some respect to Canvas data. Would be good to figure out what's going on there.

Hello.

We need to put video into the canvas to take a screenshot via canvas.toDataUrl('png')

For anyone we simply scene.background = new THREE.VideoTexture(source.domElement)

But when we shoot the canvas, the width and height is is the same than what we see.
You use a bigger canvas than the screen, and re-center it with margin-left or margin-top.

Can you add a param to disable the keep aspect ratio ?

Thanks again for this great work !

I use it with in a SPA.

Could be great to add the possibility to destroy the sources and controller .

Thanks !

See https://github.com/TypeStrong/typedoc

We might want to exclude the results from npm however.

It would be good to get this https://github.com/jeromeetienne/AR.js/blob/master/three.js/src/threex/threex-arsmoothedcontrols.js over here as it is used in some of the original demos.

At the moment the video source works completely on the basis that the element is full screen. This is a pretty large assumption and it would be nice to be able to use a different sized container (i.e. half screen for example)

Make input params optimal
Export type THREEAR.Controller

Hi, I'm attempting to run the basic example using parcel... this is my javascript file

`import * as THREE from "three";
//import fragment from "./shader/fragment.glsl";
//import vertex from "./shader/vertex.glsl";
let THREEAR = require("threear");
let OrbitControls = require("three-orbit-controls")(THREE);

export default class Sketch {
constructor(options) {
var renderer = new THREE.WebGLRenderer({
// antialias : true,
alpha: true
});
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
// renderer.setPixelRatio( 2 );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute'
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );

// init scene and camera
var scene = new THREE.Scene();
var camera = new THREE.Camera();
scene.add(camera);

var markerGroup = new THREE.Group();
scene.add(markerGroup);

var source = new THREEAR.Source({ renderer, camera });

THREEAR.initialize({ source: source, lostTimeout: 500 }).then((controller) => {

    // add a torus knot		
    var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
    var material = new THREE.MeshNormalMaterial(); 
    var torus = new THREE.Mesh( geometry, material );
    torus.position.y = 0.5
    markerGroup.add(torus);

    var geometry = new THREE.CubeGeometry(1,1,1);
    var material = new THREE.MeshNormalMaterial({
        transparent : true,
        opacity: 0.5,
        side: THREE.DoubleSide
    }); 
    var cube = new THREE.Mesh( geometry, material );
    cube.position.y	= geometry.parameters.height / 2;
    markerGroup.add(cube)

    var patternMarker = new THREEAR.PatternMarker({
        patternUrl: 'patt.hiro',
        markerObject: markerGroup,
        minConfidence: 0.3
    });

    controller.trackMarker(patternMarker);

    controller.addEventListener('markerFound', function(event) {
        console.log('markerFound', event);
    });

    controller.addEventListener('markerLost', function(event) {
        console.log('markerLost', event);
    });

    // run the rendering loop
    var lastTimeMsec = 0;
    requestAnimationFrame(function animate(nowMsec){
        // keep looping
        requestAnimationFrame( animate );
        // measure time
        lastTimeMsec = lastTimeMsec || nowMsec-1000/60;
        var deltaMsec = Math.min(200, nowMsec - lastTimeMsec);
        lastTimeMsec = nowMsec;
        // call each update function
        controller.update( source.domElement );
        // cube.rotation.x += deltaMsec/10000 * Math.PI
        torus.rotation.y += deltaMsec/1000 * Math.PI
        torus.rotation.z += deltaMsec/1000 * Math.PI
        renderer.render( scene, camera );
    });

    

});

}
}
new Sketch({
dom: document.getElementById("container")
});
`
I'm getting this error...

Allocated videoFrameSize 1228800
arjs.artoolkit.min.js:29 Pattern detection mode set to 1.
arjs.artoolkit.min.js:29 Pattern ratio size set to 0.500000.
arjs.artoolkit.min.js:29 Pattern Data read error!!
arjs.artoolkit.min.js:29 loadMarker(): Error loading pattern file /marker_0.
arjs.artoolkit.min.js:29 ARToolKitJS(): Unable to set up AR marker.
arjs.artoolkit.min.js:29 Out of memory!!
arjs.artoolkit.min.js:74627 Uncaught
ExitStatus
message: "Program terminated with exit(1)"
name: "ExitStatus"
status: 1
proto: Error at Object. (http://localhost:60728/newapp.5ac9656d.js:70317:767184) at r (http://localhost:60728/newapp.5ac9656d.js:70317:406) at Object. (http://localhost:60728/newapp.5ac9656d.js:70317:1300) at r (http://localhost:60728/newapp.5ac9656d.js:70317:406) at Object. (http://localhost:60728/newapp.5ac9656d.js:70317:15261) at r (http://localhost:60728/newapp.5ac9656d.js:70317:406) at Object. (http://localhost:60728/newapp.5ac9656d.js:70317:8584) at r (http://localhost:60728/newapp.5ac9656d.js:70317:406) at http://localhost:60728/newapp.5ac9656d.js:70317:1205 at http://localhost:60728/newapp.5ac9656d.js:70317:1214
constructor: ƒ ExitStatus(e)
stack: "Error↵ at Object. (http://localhost:60728/newapp.5ac9656d.js:70317:767184)↵ at r (http://localhost:60728/newapp.5ac9656d.js:70317:406)↵ at Object. (http://localhost:60728/newapp.5ac9656d.js:70317:1300)↵ at r (http://localhost:60728/newapp.5ac9656d.js:70317:406)↵ at Object. (http://localhost:60728/newapp.5ac9656d.js:70317:15261)↵ at r (http://localhost:60728/newapp.5ac9656d.js:70317:406)↵ at Object. (http://localhost:60728/newapp.5ac9656d.js:70317:8584)↵ at r (http://localhost:60728/newapp.5ac9656d.js:70317:406)↵ at http://localhost:60728/newapp.5ac9656d.js:70317:1205↵ at http://localhost:60728/newapp.5ac9656d.js:70317:1214"
proto:
constructor: ƒ Error()
message: ""
name: "Error"
toString: ƒ toString()
proto: Object

any help or suggestion would be appreciated.
Thanks!

Is there any way I can assign marker size. Currently, a cube of 1mm length is fitting to the marker, so the marker size is considered as 1 unit. Can I change it to 0.1 units? So that the entire scene will be relatively smaller w.r.t. the marker in the AR scene. There was a parameter named 'size' in ThreeARtoolkit but I could not figure that out in this library.

Also, how to transform the origin where the camera is pointing at... currently its the origin (0,0,0) which is placed on to the marker. I sthere any way I can make another (x,y,z) point on top of the marker? I am using 'cameraTransformMatrix' as changeMatrixMode.

Hi @JamesMilnerUK i m testing your lib with React, maybe not the simple approach but was wondering that maybe is easier that others. i have this setup:

1. i created a simple app with create-react-app command
2. i have installed the packages with npm install three threear
3. inside App.js i have this code:

import React from 'react';
import './App.css';
const THREE = require('three');
const AR = require('threear');

class App extends React.Component {

  render(){
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    camera.position.z = 5;

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    function animate() {
	     requestAnimationFrame( animate );
	      renderer.render( scene, camera );
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
      }
    animate();
  return(
  <div></div>
  )
  }
}

export default App;

the Three code works fine If i uncomment the AR require, but with this i get:

/node_modules/threear/dist/THREEAR.js
Module not found: Can't resolve 'THREE' in '/home/walter/kalwalt-github/react-ARjs-experiments/react-threear-example/node_modules/threear/dist'
console.<computed> @ index.js:1375
handleErrors @ webpackHotDevClient.js:151
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:194
push../node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:56
(anonymous) @ main.js:282
push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:280
push../node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:53
WebSocketTransport.ws.onmessage @ websocket.js:36

Have you a working example with Node at least?

https://github.com/JamesMilnerUK/THREEAR/blob/799d17c/src/PatternMarker.ts#L22

this.minConfidence = parameters.size || 0.6;

Should be this.minConfidence = parameters.minConfidence || 0.6; ?

Thanks !

At the moment most of the source code is typed as any which is a start but not particularly useful. Some of the types might require some runtime inspection because they are coming from the vendorered artoolkit library.

Hi,

the

• Docs
• Examples (Source)
• Examples (Live)

point to https://jamesmilneruk.github.io/THREEAR/docs etc which don't seem to exist.

Best regards,
Dirk