Improved the documentation for anchors and markers according to the P…

…R reviews. Added the marker example. Added the anchor example. Change-Id: I39f3dc5707f62d2d91c66b4a3856c842fe9f93a4
hquu · Jan 12, 2018 · 58debab · 58debab
1 parent 4fef0f3
commit 58debab
Show file tree

Hide file tree

Showing 5 changed files with 355 additions and 27 deletions.
diff --git a/examples/anchors.html b/examples/anchors.html
@@ -0,0 +1,279 @@
+<!--
+/*
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>three.ar.js - Anchors</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no,
+  minimum-scale=1.0, maximum-scale=1.0">
+  <style>
+    body {
+      font-family: monospace;
+      margin: 0;
+      overflow: hidden;
+      position: fixed;
+      width: 100%;
+      height: 100vh;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+    #info {
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translate(-50%, 0);
+      margin: 1em;
+      z-index: 10;
+      display: block;
+      width: 100%;
+      line-height: 2em;
+      text-align: center;
+    }
+    #info a, #info .title {
+      padding: 0.4em 0.6em;
+      border-radius: 0.1em;
+    }
+    #info a {
+      color: rgba(255, 255, 255, 0.8);
+      background-color: rgba(40, 40, 40, 0.6);
+      font-weight: bold;
+      text-decoration: none;
+    }
+    .title {
+      color: rgba(255, 255, 255, 0.9);
+      background-color: rgba(40, 40, 40, 0.4);
+      margin-left: 0.2em;
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  </style>
+</head>
+<body>
+<div id="info">
+    <a href="https://github.com/google-ar/three.ar.js">three.ar.js</a><span class="title">Tap to spawn and anchor objects at camera position</span>
+</div>
+<script src="../third_party/three.js/three.js"></script>
+<script src="../third_party/three.js/VRControls.js"></script>
+<script src="../dist/three.ar.js"></script>
+<script>
+
+var vrDisplay;
+var vrFrameData;
+var vrControls;
+var arView;
+
+var canvas;
+var camera;
+var scene;
+var renderer;
+var cube;
+var cubes = [];
+
+var anchorManager;
+
+var CUBE_SIZE_IN_METERS = 0.18;
+
+var colors = [
+  new THREE.Color( 0xffffff ),
+  new THREE.Color( 0xffff00 ),
+  new THREE.Color( 0xff00ff ),
+  new THREE.Color( 0xff0000 ),
+  new THREE.Color( 0x00ffff ),
+  new THREE.Color( 0x00ff00 ),
+  new THREE.Color( 0x0000ff ),
+  new THREE.Color( 0x000000 )
+];
+
+/**
+ * Use the `getARDisplay()` utility to leverage the WebVR API
+ * to see if there are any AR-capable WebVR VRDisplays. Returns
+ * a valid display if found. Otherwise, display the unsupported
+ * browser message.
+ */
+THREE.ARUtils.getARDisplay().then(function (display) {
+  if (display) {
+    vrFrameData = new VRFrameData();
+    vrDisplay = display;
+    init();
+  } else {
+    THREE.ARUtils.displayUnsupportedMessage();
+  }
+});
+
+function init() {
+  // Turn on the debugging panel
+  var arDebug = new THREE.ARDebug(vrDisplay);
+  document.body.appendChild(arDebug.getElement());
+
+  // Setup the three.js rendering environment
+  renderer = new THREE.WebGLRenderer({ alpha: true });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  console.log('setRenderer size', window.innerWidth, window.innerHeight);
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.autoClear = false;
+  canvas = renderer.domElement;
+  document.body.appendChild(canvas);
+  scene = new THREE.Scene();
+
+  // Creating the ARView, which is the object that handles
+  // the rendering of the camera stream behind the three.js
+  // scene
+  arView = new THREE.ARView(vrDisplay, renderer);
+
+  // The ARPerspectiveCamera is very similar to THREE.PerspectiveCamera,
+  // except when using an AR-capable browser, the camera uses
+  // the projection matrix provided from the device, so that the
+  // perspective camera's depth planes and field of view matches
+  // the physical camera on the device.
+  camera = new THREE.ARPerspectiveCamera(
+    vrDisplay,
+    60,
+    window.innerWidth / window.innerHeight,
+    vrDisplay.depthNear,
+    vrDisplay.depthFar
+  );
+
+  // VRControls is a utility from three.js that applies the device's
+  // orientation/position to the perspective camera, keeping our
+  // real world and virtual world in sync.
+  vrControls = new THREE.VRControls(camera);
+
+  // Create the cube geometry that we'll copy and place in the
+  // scene when the user clicks the screen
+  var geometry = new THREE.BoxGeometry( 0.05, 0.05, 0.05 );
+  var faceIndices = ['a', 'b', 'c'];
+  for (var i = 0; i < geometry.faces.length; i++) {
+    var f  = geometry.faces[i];
+    for (var j = 0; j < 3; j++) {
+      var vertexIndex = f[faceIndices[ j ]];
+      f.vertexColors[j] = colors[vertexIndex];
+    }
+  }
+  var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
+  cube = new THREE.Mesh(geometry, material);
+
+  // Bind our event handlers
+  window.addEventListener('resize', onWindowResize, false);
+  window.addEventListener('touchstart', onClick, false);
+
+  anchorManager = new THREE.ARAnchorManager(vrDisplay);
+
+  // Kick off the render loop!
+  update();
+}
+
+/**
+ * The render loop, called once per frame. Handles updating
+ * our scene and rendering.
+ */
+function update() {
+  // Clears color from the frame before rendering the camera (arView) or scene.
+  renderer.clearColor();
+
+  // Render the device's camera stream on screen first of all.
+  // It allows to get the right pose synchronized with the right frame.
+  arView.render();
+
+  // Update our camera projection matrix in the event that
+  // the near or far planes have updated
+  camera.updateProjectionMatrix();
+
+  // From the WebVR API, populate `vrFrameData` with
+  // updated information for the frame
+  vrDisplay.getFrameData(vrFrameData);
+
+  // Update our perspective camera's positioning
+  vrControls.update();
+
+  // Render our three.js virtual scene
+  renderer.clearDepth();
+  renderer.render(scene, camera);
+
+  // Kick off the requestAnimationFrame to call this function
+  // on the next frame
+  requestAnimationFrame(update);
+}
+
+/**
+ * On window resize, update the perspective camera's aspect ratio,
+ * and call `updateProjectionMatrix` so that we can get the latest
+ * projection matrix provided from the device
+ */
+function onWindowResize () {
+  console.log('setRenderer size', window.innerWidth, window.innerHeight);
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+/**
+ * When clicking on the screen, create a cube at the user's
+ * current position.
+ */
+function onClick (e) {
+  // If the user touched with 2 or more fingers, remove the latest model and
+  // its anchor.
+  if (cubes.length > 0 && e.touches.length > 1) {
+    anchorManager.remove(cubes[0]);
+    scene.remove(cubes[0]);
+    cubes.splice(0, 1);
+    return;
+  }
+
+  // Fetch the pose data from the current frame
+  var pose = vrFrameData.pose;
+
+  // Convert the pose orientation and position into
+  // THREE.Quaternion and THREE.Vector3 respectively
+  var ori = new THREE.Quaternion(
+    pose.orientation[0],
+    pose.orientation[1],
+    pose.orientation[2],
+    pose.orientation[3]
+  );
+
+  var pos = new THREE.Vector3(
+    pose.position[0],
+    pose.position[1],
+    pose.position[2]
+  );
+
+  var dirMtx = new THREE.Matrix4();
+  dirMtx.makeRotationFromQuaternion(ori);
+
+  var push = new THREE.Vector3(0, 0, -1.0);
+  push.transformDirection(dirMtx);
+  pos.addScaledVector(push, 0.125);
+
+  // Clone our cube object and place it at the camera's
+  // current position
+  var cubeClone = cube.clone();
+  scene.add(cubeClone);
+  cubeClone.position.copy(pos);
+  cubeClone.quaternion.copy(ori);
+
+  cubes.push(cubeClone);
+
+  anchorManager.add(cubeClone);
+}
+</script>
+</body>
+</html>
diff --git a/examples/tango/marker.html → examples/markers.html b/examples/tango/marker.html → examples/markers.html
@@ -107,8 +107,9 @@
 var MODEL_SIZE_IN_METERS = 0.2;
 var vrControls = null;
 var gui;
+var scale = new THREE.Vector3();
 
-var MARKER_SIZE_IN_METERS = 0.1397;
+var MARKER_SIZE_IN_METERS = 0.06;
 
 /**
  * Use the `getARDisplay()` utility to leverage the WebVR API
@@ -118,8 +119,12 @@
  */
 THREE.ARUtils.getARDisplay().then(function (display) {
   if (display) {
-    vrDisplay = display;
-    init();
+    if (display.getMarkers) {
+      vrDisplay = display;
+      init();
+    } else {
+      THREE.ARUtils.displayUnsupportedMessage("This prototype browser app for WebAR does not support marker detection yet.");
+    }
   } else {
     THREE.ARUtils.displayUnsupportedMessage();
   }
@@ -221,9 +226,10 @@
   renderer.render(scene, camera);
 
   var markers = vrDisplay.getMarkers(gui.markerType, MARKER_SIZE_IN_METERS);
+  console.log(markers.length);
   if (markers.length > 0) {
-    model.position.fromArray(markers[0].position);
-    model.quaternion.fromArray(markers[0].orientation);
+    model.matrix.fromArray(markers[0].modelMatrix);
+    model.matrix.decompose(model.position, model.quaternion, scale);
   }
 
   // Kick off the requestAnimationFrame to call this function

diff --git a/examples/tango/occlusion.html b/examples/tango/occlusion.html
@@ -78,11 +78,11 @@
 <div id="info">
     <a href="https://github.com/google-ar/three.ar.js">three.ar.js</a><span class="divider">|</span>Touch anywhere to create a teapot and see occlusion
 </div>
-<script src="../third_party/dat.gui/dat.gui.js"></script>
-<script src="../third_party/three.js/three.js"></script>
-<script src="../third_party/three.js/TeapotBufferGeometry.js"></script>
-<script src="../third_party/three.js/VRControls.js"></script>
-<script src="../dist/three.ar.js"></script>
+<script src="../../third_party/dat.gui/dat.gui.js"></script>
+<script src="../../third_party/three.js/three.js"></script>
+<script src="../../third_party/three.js/TeapotBufferGeometry.js"></script>
+<script src="../../third_party/three.js/VRControls.js"></script>
+<script src="../../dist/three.ar.js"></script>
 <script>
 VRPointCloudWrapper = function(vrDisplay) {
   this._vrDisplay = vrDisplay;

diff --git a/webvr_ar_extension.idl b/webvr_ar_extension.idl
@@ -21,6 +21,8 @@ partial interface VRDisplay {
   void removeAnchor(VRAnchor anchor);
   sequence<VRAnchor> getAnchors();
   sequence<VRMarker> getMarkers(long type, float size);
+  const long MARKER_TYPE_AR       = 0x01;
+  const long MARKER_TYPE_QRCODE   = 0x02;
 };
 
 partial interface VRDisplayCapabilities {