AR.jsで2つのマーカーを同時に認識させる 📷

最近は、もっぱらAR.jsの検証を行なっていますが、2つのマーカーを同時に認識できるかを検証しました。

結果としては、PC版のChromeでも、mobile Safariでも、同時に認識できました。
いくつまで同時にいけるか試そうかとも思ったのですが、今回は一旦2つまでにしておきます。

ソースコード

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('canvas'),
  antialias: true,
  alpha: true
});
const camera = new THREE.PerspectiveCamera();
const scene = new THREE.Scene();
const markerRootAb = new THREE.Group();
const markerRootYz = new THREE.Group();
const arToolkitContext = new THREEx.ArToolkitContext({
  cameraParametersUrl: './camera.dat',
  detectionMode: 'mono'
});
const arToolkitSource = new THREEx.ArToolkitSource({
  sourceType: 'webcam'
});
const arMarkerControls = [
  new THREEx.ArMarkerControls(arToolkitContext, markerRootAb, {
    type: 'pattern',
    patternUrl: 'pattern-ab.patt'
  }),
  new THREEx.ArMarkerControls(arToolkitContext, markerRootYz, {
    type: 'pattern',
    patternUrl: 'pattern-yz.patt'
  })
];

renderer.setSize(window.innerWidth, window.innerHeight);

window.addEventListener('resize', handleResize, {
  passive: true
});

arToolkitContext.init(() => {
  camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
});

arToolkitSource.init(() => {
  document.querySelector('.wrapper').appendChild(arToolkitSource.domElement);
  setTimeout(() => handleResize(), 400);
});

scene.add(markerRootAb);
scene.add(markerRootYz);

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshNormalMaterial()
);
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(.5, 8, 8),
  new THREE.MeshNormalMaterial()
);

cube.position.set(0, .5, 0);
sphere.position.set(0, .5, 0);

markerRootAb.add(cube);
markerRootYz.add(sphere);

renderer.setAnimationLoop((delta) => {
  if (arToolkitSource.ready) {
    arToolkitContext.update(arToolkitSource.domElement);
  }

  renderer.render(scene, camera);
});

function handleResize() {
  if (arToolkitSource.ready) {
    arToolkitSource.onResize();
    arToolkitSource.copySizeTo(renderer.domElement);
  }

  renderer.setPixelRatio(window.devicePixelRatio);
}