Trying to make a working OCVT example

build.Unix.sh

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+
+if [ ! -f "opencv/build_wasm/em-flags.txt" ] ; then
+  curl --location "https://github.com/webarkit/opencv-em/releases/download/0.0.4/opencv-em-4.5.0-emcc-3.1.7.zip" -o opencv-em.zip
+  unzip -o opencv-em.zip -d opencv
+  cp -avr opencv/build_wasm/opencv ./
+  rm opencv-em.zip
+fi
+
+cd emscripten/WebARKitLib/ARX
+cmake .
+make
+echo "Created config.h file!"

dist/WebARKit.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

examples/orb_2d_example.html

@@ -24,6 +24,7 @@
         <video loop autoplay muted playsinline id="video">
         </video>
         <canvas id="canvas"></canvas>
+        <canvas id="overlayCanvas"></canvas>
     </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>

examples/threejs_orb_2d_worker.js

@@ -24,6 +24,8 @@ function start(markerUrl, video, input_width, input_height, render_update, track
   var context_process = canvas_process.getContext('2d');
   var targetCanvas = document.querySelector("#canvas");
 
+  var overlayCanvas = document.querySelector("#overlayCanvas");
+
   var renderer = new THREE.WebGLRenderer({ canvas: targetCanvas, alpha: true, antialias: true });
   renderer.setPixelRatio(window.devicePixelRatio);
 
@@ -121,7 +123,11 @@ function start(markerUrl, video, input_width, input_height, render_update, track
           found(null);
           break;
         }
+        case 'warped': {
+          warped(msg);
+          break;
       }
+    }
       track_update();
       process();
     };
@@ -137,6 +143,39 @@ function start(markerUrl, video, input_width, input_height, render_update, track
     }
   };
 
+  function clearOverlayCtx() {
+    const overlayCtx = overlayCanvas.getContext("2d");
+    overlayCtx.clearRect(0, 0, vw, vh);
+  }
+
+  function drawCorners(corners) {
+    const overlayCtx = overlayCanvas.getContext("2d");
+    clearOverlayCtx();
+
+    overlayCtx.beginPath();
+    overlayCtx.strokeStyle = "blue";
+    overlayCtx.lineWidth = 3;
+
+    // [x1,y1,x2,y2,x3,y3,x4,y4]
+    overlayCtx.moveTo(corners[0], corners[1]);
+    overlayCtx.lineTo(corners[2], corners[3]);
+    overlayCtx.lineTo(corners[4], corners[5]);
+    overlayCtx.lineTo(corners[6], corners[7]);
+    overlayCtx.lineTo(corners[0], corners[1]);
+
+    overlayCtx.stroke();
+  }
+
+  var warped = function(msg) {
+    if (!msg) {
+      console.log("no warped");
+    } else {
+      console.log("warped", msg.data);
+      clearOverlayCtx();
+      drawCorners(msg.data);
+    }
+  };
+
   var lasttime = Date.now();
   var time = 0;