webarkit · kalwalt · Nov 5, 2020 · Nov 5, 2020
diff --git a/SDK/lib/.gitignore b/SDK/lib/.gitignore
diff --git a/SDK/lib/artoolkitX.api.js b/SDK/lib/artoolkitX.api.js
diff --git a/SDK/lib/artoolkitx.js b/SDK/lib/artoolkitx.js
diff --git a/SDK/lib/artoolkitx.wasm b/SDK/lib/artoolkitx.wasm
diff --git a/_includes/header.html b/_includes/header.html
@@ -6,7 +6,8 @@
   </div>
   <nav id="nav-bar">
       <ul>
-        <li><a class="nav-link" href="/blog" id="yellow-link">Blog</a></li>
+        <li><a class="nav-link" href="/blog" id="red-link">Blog</a></li>
+        <li><a class="nav-link" href="/examples" id="yellow-link">Examples</a></li>
         <li><a class="nav-link" href="/project" id="green-link">The project</a></li>
         <li><a class="nav-link" href="/about-us" id="red-link">About us</a></li>
         <li><a class="nav-link" href="/contact" id="green-link">Contact us</a></li>

diff --git a/_layouts/examples.html b/_layouts/examples.html
@@ -0,0 +1,10 @@
+---
+layout: default
+---
+{% include header.html %}
+<main class="content" role="main" id="hero-examples">
+    <section class="main-content">
+      {{ content }}
+      {% include footer.html %}
+    </section>
+</main>
diff --git a/_sass/jekyll-theme-cayman.scss b/_sass/jekyll-theme-cayman.scss
@@ -189,6 +189,15 @@ nav > ul > li > a:hover {
   margin-top: 90vh;
 }
 
+#hero-examples {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  margin-top: 40vh;
+}
+
 #hero-contact {
   display: flex;
   flex-direction: column;

diff --git a/examples/Data/Alterra_Postcard_2.jpg b/examples/Data/Alterra_Postcard_2.jpg
diff --git a/examples/Data/camera_para.dat b/examples/Data/camera_para.dat
diff --git a/examples/Data/css/style.css b/examples/Data/css/style.css
@@ -0,0 +1,49 @@
+html,
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+.stats {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 200;
+  margin: 0.5rem;
+  padding: 0.5rem 0.5rem 0;
+}
+
+.stats-item {
+  margin: 0 0 0.5rem;
+
+}
+
+.stats-item-title {
+  margin: 0 0 0.25rem;
+
+  font-size: 0.75rem;
+}
+
+#stats div {
+  position: relative !important;
+}
+
+.ui {
+  position: fixed;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  background-color: rgba( 255,255,255,0.6 );
+  border-radius: 6px;
+}
+
+.marker {
+  right: 0;
+  bottom: 0;
+  z-index: 200;
+  margin: 0.5rem;
+  padding: 0.25rem 0.5rem;
+
+  font-size: 0.75rem;
+  color: inherit;
+  text-decoration: none;
+}
diff --git a/examples/Data/js/third_party/three.js/stats.min.js b/examples/Data/js/third_party/three.js/stats.min.js
diff --git a/examples/Data/js/third_party/three.js/three.min.js b/examples/Data/js/third_party/three.js/three.min.js
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,7 @@
+---
+layout: examples
+---
+<div>
+  <a href="/examples/simple_2d_tracking.html"><h2>ArtoolkitX.js example with 2d tracking</h2></a>
+  <p>A simple example that display a cube and a grid. You need the <a href="/examples/Data/Alterra_Postcard_2.jpg">Alterra image</a>
+  </div>
diff --git a/examples/simple_2d_tracking.html b/examples/simple_2d_tracking.html
@@ -0,0 +1,205 @@
+<html>
+<head>
+  <link rel="stylesheet" href="./Data/css/style.css">
+</head>
+<body>
+  <div id="stats" class="ui stats">
+    <div class="stats-item">
+        <p class="stats-item-title">
+          Stats
+        </p>
+    </div>
+  </div>
+  <script src="./Data/js/third_party/three.js/three.min.js"></script>
+  <script src="./Data/js/third_party/three.js/stats.min.js"></script>
+        <script type='text/javascript'>
+    window.artoolkitX_wasm_url = '../SDK/lib/artoolkitx.wasm';
+        </script>
+
+
+        <script id="vert" type="glsl-vertex">
+          precision highp float;
+          precision lowp int;
+
+          uniform mat4 cameraMatrix;
+          uniform mat4 transformationMatrix;
+
+          varying vec2 vUv;
+
+          void main(void)
+          {
+            vUv = uv;
+            gl_Position = cameraMatrix * transformationMatrix * vec4(position, 1.0);
+          }
+          </script>
+
+          <script id="frag" type="glsl-fragment">
+          precision highp float;
+          precision lowp int;
+
+          varying vec2 vUv;
+
+          void main(void)
+          {
+            gl_FragColor = vec4(vUv, 1.0, 1.0);
+          }
+          </script>
+
+<script type="module" src="../SDK/lib/artoolkitX.api.js"></script>
+<script type="module">
+import ARController from '../SDK/lib/artoolkitX.api.js';
+
+var statsMain = new Stats();
+statsMain.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
+document.getElementById( 'stats' ).appendChild( statsMain.dom );
+
+let ar1, interval;
+
+const cameraParam = './Data/camera_para.dat';
+
+const config = {
+    cameraParam: cameraParam,
+    width: 640,
+    height: 480
+};
+
+var trackable = {
+    trackableType: "2d",
+    url: './Data/Alterra_Postcard_2.jpg',
+    width: 1.0
+}
+
+window.addEventListener('artoolkitX-loaded', () => {
+
+var cMat = new THREE.Matrix4();
+var tMat = new THREE.Matrix4();
+
+var USE_SHADER = false;
+
+var shaderMaterial = new THREE.ShaderMaterial({
+	uniforms: {
+		cameraMatrix: {type: 'm4', value: cMat },
+		transformationMatrix: {type: 'm4', value: tMat }
+	},
+	vertexShader: vert.text,
+	fragmentShader: frag.text
+});
+
+var renderer = new THREE.WebGLRenderer();
+var scene = new THREE.Scene();
+
+ARController.getUserMediaARController(config).then( arController => {
+
+  renderer.setSize(config.width, config.height);
+  document.body.appendChild(renderer.domElement);
+  renderer.domElement.style = 'position: absolute; width: 100%; height: 100%'
+
+    var videoTex = new THREE.Texture(arController.image);
+
+    videoTex.minFilter = THREE.LinearFilter;
+    videoTex.flipY = false;
+
+    // Then create a plane textured with the video.
+    var plane = new THREE.Mesh(
+      new THREE.PlaneBufferGeometry(2, 2),
+      new THREE.MeshBasicMaterial({map: videoTex, side: THREE.DoubleSide})
+    );
+
+    // The video plane shouldn't care about the z-buffer.
+    plane.material.depthTest = false;
+    plane.material.depthWrite = false;
+
+    // Create a camera and a scene for the video plane and
+    // add the camera and the video plane to the scene.
+    var videoCamera = new THREE.OrthographicCamera(-1, 1, -1, 1, -1, 1);
+    var videoScene = new THREE.Scene();
+    videoScene.add(plane);
+    videoScene.add(videoCamera);
+
+  // Create a camera and a marker root object for your Three.js scene.
+  const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 1000 );
+  scene.add(camera);
+
+  var light = new THREE.PointLight(0xffffff);
+  light.position.set(400, 500, 100);
+  scene.add(light);
+  var light = new THREE.PointLight(0xffffff);
+  light.position.set(-400, -500, -100);
+  scene.add(light);
+
+  var markerRoot = new THREE.Object3D();
+
+  markerRoot.wasVisible = false;
+  markerRoot.markerMatrix = new Float64Array(16);
+  markerRoot.matrixAutoUpdate = false;
+
+  // Add the marker models and suchlike into your marker root object.
+
+  var cube = new THREE.Mesh(
+    new THREE.BoxGeometry(0.5,0.5,0.5),
+    USE_SHADER ?
+      shaderMaterial :
+      new THREE.MeshLambertMaterial({ color: 0x44ffff, wireframe: false })
+  );
+  markerRoot.add(cube);
+  markerRoot.visible = true;
+  // adding a grid xz and an axesHelper
+  var axesHelper = new THREE.AxesHelper( 5 );
+  markerRoot.add( axesHelper );
+
+  var gridXZ = new THREE.GridHelper(10, 10);
+  markerRoot.add(gridXZ);
+
+  // Add the marker root to your scene.
+  scene.add(markerRoot);
+
+    arController.addEventListener('getMarker', (trackableInfo) => {
+        console.log("TrackableID: " + trackableInfo.data.trackableId);
+        markerRoot.visible = true;
+        markerRoot.matrix.elements = trackableInfo.data.transformation
+    });
+
+    try {
+        arController.start().then( () => {
+            console.log("start done");
+            const camMatrix = arController.getCameraMatrix(0.01, 1000);
+            camera.projectionMatrix.fromArray(camMatrix);
+            camera.updateProjectionMatrix();
+            var trackableId = arController.addTrackable(trackable);
+            interval = setInterval(function() {
+                arController.process();
+                videoTex.needsUpdate = true;
+                const ac = renderer.autoClear;
+                renderer.autoClear = false;
+                renderer.clear();
+                statsMain.update()
+                renderer.render(videoScene, videoCamera);
+                renderer.render(scene, camera);
+                renderer.autoClear = ac;
+            }, 13);
+            ar1 = arController;
+        });
+    }
+    catch (e) {
+        console.log(e);
+    }
+} );
+
+});
+
+window.closeVideo = function() {
+    if(ar1) {
+        ar1.dispose();
+        clearInterval(interval);
+    }
+    else {
+        console.error("Trying to close before opened");
+    }
+}
+
+
+</script>
+
+<button class="ui marker" onclick="window.closeVideo()">Close Video</button>
+</body>
+</html>