Merge branch 'fixing-nft' into api-doc-improvements

Author: kalwalt

.gitignore

@@ -1,8 +1,3 @@
 doc/reference
 node_modules
 build/*.bc
-emscripten/libjpeg/*.h
-emscripten/libjpeg/*.c
-emscripten/libjpeg/*.txt
-emscripten/libjpeg/README
-emscripten/libjpeg/*.log

README.md

@@ -27,18 +27,19 @@ When writing JavaScript and making changes be aware that the emscripten uglifier
 - `tools/` (build scripts for building ARToolKit.js)
 
 ## WebAssembly
-JSARToolKit5 supports WebAssembly. The libary builds two WebAssembly artefacts during the build process. These are ```build/artoolkit_wasm.js``` and ```build/artoolkit_wasm.wasm```. To use those include the artoolkit_wasm.js into your html page and define ```var artoolkit_wasm_url = '<<PATH TO>>/artoolkit_wasm.wasm';``` prior to loading the artoolkit_wasm.js file, like so:
+
+JSARToolKit5 supports WebAssembly. The libary builds two WebAssembly artifacts during the build process. These are ```build/artoolkit_wasm.js``` and ```build/artoolkit_wasm.wasm```. To use those, include the artoolkit_wasm.js into your html page and define ```var artoolkit_wasm_url = '<<PATH TO>>/artoolkit_wasm.wasm';``` before loading the artoolkit_wasm.js file, like this:
 
 ```js
 <script type='text/javascript'>
       var artoolkit_wasm_url = '../build/artoolkit_wasm.wasm';
 </script>
 <script src="../build/artoolkit_wasm.js"></script>
 ```
-As loading the WebAssembly artefact is done asynchronous there is a callback that is called once everything is ready.
+As loading the WebAssembly artifact is done asynchronously, there is a callback that is called when everything is ready.
 
 ```js
-window.addEventListener('artoolkit-loaded', () => {  
+window.addEventListener('artoolkit-loaded', () => {
     //do artoolkit stuff here
 });
 ```
@@ -52,20 +53,22 @@ See examples/simple_image_wasm.html for details.
   - or, set the `ARTOOLKIT5_ROOT` environment variable to point to your ARToolKit5 clone
   - or, change the `tools/makem.js` file to point to your artoolkit5 clone (line 20)
 
-## Build Instructions
+## Build the project
 
 ### Recommended: Build using Docker
-1. Install Docker (if you havn't already) [Docker](https://www.docker.com/) -> Get Docker
+
+1. Install Docker (if you havn't already): [get Docker](https://www.docker.com/)
 2. Clone artoolkit5 repository on your machine: `git submodule update --init`
 3. `npm install`
-4. From inside jsartoolkit5 directory run `docker run -dit --name emscripten -v $(pwd):/src trzeci/emscripten-slim:latest bash` - download and start the container, in preparation for the build
-5. `docker exec emscripten npm run build-local` - build JS version of artoolkit5
-6. `docker stop emscripten` - stop the container after the build if needed
-7. `docker rm emscripten` - remove the container
-8. `docker rmi trzeci/emscripten-slim:latest` - remove the image if you don't need it anymore
-9. The build artefacts are in `/build`. There's a build with debug symbols in `artoolkit.debug.js` and the optimized build with bundled JS API in `artoolkit.min.js` and a WebAssembly build artoolkit_wasm.js and artoolkit_wasm.wasm
+4. From inside jsartoolkit5 directory run `docker run -dit --name emscripten -v $(pwd):/src trzeci/emscripten-slim:latest bash` to download and start the container, in preparation for the build
+5. `docker exec emscripten npm run build-local` to build JS version of artoolkit5
+6. `docker stop emscripten` to stop the container after the build, if needed
+7. `docker rm emscripten` to remove the container
+8. `docker rmi trzeci/emscripten-slim:latest` to remove the Docker image, if you don't need it anymore
+9. The build artifacts will appear in `/build`. There's a build with debug symbols in `artoolkit.debug.js` file and the optimized build with bundled JS API in `artoolkit.min.js`; also, a WebAssembly build artoolkit_wasm.js and artoolkit_wasm.wasm
 
 ### ⚠️ Not recommended ⚠️ : Build local with manual emscripten setup
+
 To prevent issues with Emscripten setup and to not have to maintain several build environments (macOS, Windows, Linux) we only maintain the **Build using Docker**. Following are the instructions of the last know build on Linux which we verified are working. **Use at own risk.**
 ** Not working on macOS!**
 

build/artoolkit.min.js

@@ -0,0 +1,27 @@
+body {
+    margin: 1em;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    font-family: sans-serif;
+    font-size: 1.5em;
+    background-color: #eee;
+    color: #023962;
+}
+
+ul, ol {
+    list-style: none;
+}
+
+li {
+    margin-top: 1em;
+}
+
+a {
+    color: inherit;
+}
+
+a:hover {
+    background-color: #023962;
+    color: white;
+}

build/artoolkit_wasm.js

@@ -1,12 +1,3 @@
-@keyframes rotate {
-  0% {
-    transform: rotate( 0deg);
-  }
-  100% {
-    transform: rotate( 360deg);
-  }
-}
-
 html,
 body {
   margin: 0;
@@ -17,44 +8,17 @@ html {
   font-family: sans-serif;
 }
 
-body {}
-
-body.loading::after {
-  content: ' ';
-
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-
-  display: block;
-  width: 4rem;
-  height: 4rem;
-  margin: auto auto;
-
-  border-style: solid;
-  border-width: 2px;
-  border-color: rgba(0,0,0,0.25) rgba(0,0,0,0.25) rgba(0,0,0,0.25) rgba(0,0,0,1.0);
-  border-radius: 50%;
-
-  animation: rotate 800ms infinite linear;
-}
-
-body.loading>* {
-  opacity: 0.15;
-}
-
 #loading {
   width: 100%;
   position: absolute;
-  top: 10%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
-  height: 40%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.45);
+  z-index: 9999999;
 }
 
 #loading img {

examples/css/index.css

@@ -5,23 +5,16 @@
 </head>
 
 <body>
-<h3>jsartoolkit5 demos with ar2Tracking</h3>
-<div>screen capture: <a href="https://imgur.com/WnaxILE">https://imgur.com/WnaxILE</a></div>
-<div>screen capture: <a href="https://imgur.com/BciDGxo">https://imgur.com/BciDGxo</a></div>
-<div>nft: <a href="https://imgur.com/HvcmRVl">https://imgur.com/HvcmRVl</a></div>
-<p>demo links:</p>
-<ul>
-	<li><a href="main.html">camera input, single-threaded</a></li>
-	<li><a href="main_worker.html">camera input, worker</a></li>
-	<li><a href="main_threejs_worker.html">camera input, worker, threejs rendering</a></li>
-  <li><a href="main_threejs_wasm_worker.html">camera input, worker with wasm, threejs rendering</a></li>
-  <li><a href="threejs_worker_gltf.html">camera input, worker, threejs rendering and gltf model</a></li>
-	<li><a href="video.html">video input, single-threaded</a></li>
-	<li><a href="video_worker.html">video input, worker</a></li>
-	<li><a href="video_threejs_worker.html">video input, worker, threejs rendering</a></li>
-  <li><a href="nft_armchair_image.html">camera input, worker, threejs rendering and the armchair image to display</a></li>
-  <li><a href="nft_pinball_video.html">camera input, worker, threejs rendering and a video to display</a></li>
-</ul>
-
+    <link rel="stylesheet" href="../css/index.css">
+    <h3>jsartoolkit5 demos with ar2Tracking</h3>
+    <div>Image to recognize for the following examples <a href="https://imgur.com/HvcmRVl">https://imgur.com/HvcmRVl</a></div>
+    <p>Examples:</p>
+    <ul>
+        <li><a href="threejs_worker_gltf.html">Show a 3D, animated model. Uses web worker. Has loader. Has interpolation.</a></li>
+        <li><a href="main_threejs_worker.html">Show a 3D sphere. Uses web worker. Has loader. Has interpolation. Asm version. (high framerate)</a></li>
+        <li><a href="main_threejs_wasm_worker.html">Show a 3D sphere. Uses web worker. Has loader. Has interpolation. Uses web assembly</a></li>
+        <li><a href="main.html">Draw a red rectangle around the image. Single-threaded. No loader</a></li>
+        <li><a href="main_worker.html">Draw a red rectangle around the image. Uses web worker. No loader</a></li>
+    </ul>
 </body>
 </html>

examples/css/video-style.css

@@ -21,35 +21,35 @@
 <script src="main.js"></script>
 
 <script>
-    let statsMain = new Stats();
+    var statsMain = new Stats();
     statsMain.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom
     statsMain.domElement.style.position = 'relative';
     statsMain.domElement.style.left = '0px';
     statsMain.domElement.style.top = '0px';
     document.getElementById("stats1").appendChild(statsMain.dom);
 
-    let container = document.getElementById('container');
-    let video = document.getElementById('video');
-    let canvas_draw = document.getElementById('canvas_draw');
+    var container = document.getElementById('container');
+    var video = document.getElementById('video');
+    var canvas_draw = document.getElementById('canvas_draw');
 
     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-        let hint = {};
+        var hint = {};
         if (isMobile()) {
             hint = {
                 facingMode: {"ideal": "environment"},
                 audio: false,
                 video: {
-                    width: {min: 240, max: 240},
-                    height: {min: 360, max: 360},
+                    width: { ideal: 480 },
+                    height: { ideal: 640 },
                 },
             };
         }
 
         navigator.mediaDevices.getUserMedia({video: hint}).then(function (stream) {
             video.srcObject = stream;
             video.play();
-            video.addEventListener("loadedmetadata", () => {
-                start(container, markers["pinball"], video, video.videoWidth, video.videoHeight, canvas_draw, () => statsMain.update());
+            video.addEventListener("loadedmetadata", function() {
+                start(container, markers["pinball"], video, video.videoWidth, video.videoHeight, canvas_draw, function() {statsMain.update()});
             });
         });
     }

examples/nft_improved_worker/index.html

@@ -53,10 +53,10 @@ function isMobile() {
     return /Android|mobile|iPad|iPhone/i.test(navigator.userAgent);
 }
 
-let ar = null;
-let markerResult = null;
+var ar = null;
+var markerResult = null;
 
-let markers = {
+var markers = {
     "pinball": {
         width: 1637,
         height: 2048,
@@ -66,18 +66,18 @@ let markers = {
 };
 
 function start(container, marker, video, input_width, input_height, canvas_draw, render_update) {
-    let vw, vh;
-    let sw, sh;
-    let pscale, sscale;
-    let w, h;
-    let pw, ph;
-    let ox, oy;
-
-    let canvas_process = document.createElement('canvas');
-    let context_draw = canvas_draw.getContext('2d');
-    let context_process = canvas_process.getContext('2d');
-
-    let load = () => {
+    var vw, vh;
+    var sw, sh;
+    var pscale, sscale;
+    var w, h;
+    var pw, ph;
+    var ox, oy;
+
+    var canvas_process = document.createElement('canvas');
+    var context_draw = canvas_draw.getContext('2d');
+    var context_process = canvas_process.getContext('2d');
+
+    var load = function() {
         vw = input_width;
         vh = input_height;
 
@@ -105,10 +105,10 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
         canvas_process.width = pw;
         canvas_process.height = ph;
 
-        let param = new ARCameraParam('../Data/camera_para-iPhone 5 rear 640x480 1.0m.dat');
+        var param = new ARCameraParam('../Data/camera_para-iPhone 5 rear 640x480 1.0m.dat');
         param.onload = function () {
             ar = new ARController(pw, ph, param);
-            let cameraMatrix = ar.getCameraMatrix();
+            var cameraMatrix = ar.getCameraMatrix();
 
             ar.addEventListener('getNFTMarker', function (ev) {
                 markerResult = {type: "found", matrixGL_RH: JSON.stringify(ev.data.matrixGL_RH), proj: JSON.stringify(cameraMatrix)};
@@ -123,15 +123,15 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
         };
     };
 
-    let lasttime = Date.now();
-    let time = 0;
+    var lasttime = Date.now();
+    var time = 0;
 
-    let x = 0;
-    let draw = () => {
+    var x = 0;
+    var draw = function() {
         context_draw.clearRect(0, 0, vw, vh);
         render_update();
-        let now = Date.now();
-        let dt = now - lasttime;
+        var now = Date.now();
+        var dt = now - lasttime;
         time += dt;
         lasttime = now;
 
@@ -142,10 +142,10 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
 
 
         if (!markerResult) return;
-        let proj = JSON.parse(markerResult.proj);
-        let world = JSON.parse(markerResult.matrixGL_RH);
+        var proj = JSON.parse(markerResult.proj);
+        var world = JSON.parse(markerResult.matrixGL_RH);
 
-        let mat = multiplyMatrices(proj, world);
+        var mat = multiplyMatrices(proj, world);
 
         function glpointToCanvas(xyz) {
             return {
@@ -154,29 +154,29 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
             }
         }
         function drawpoint(x, y, z) {
-            let r = transformPoint(mat, {x: x, y: y, z: z});
-            let c = glpointToCanvas(r);
+            var r = transformPoint(mat, {x: x, y: y, z: z});
+            var c = glpointToCanvas(r);
             return c;
         }
 
-        let width = marker.width;
-        let height = marker.height;
-        let dpi = marker.dpi;
+        var width = marker.width;
+        var height = marker.height;
+        var dpi = marker.dpi;
 
-        let w = width / dpi * 2.54 * 10;
-        let h = height / dpi * 2.54 * 10;
+        var w = width / dpi * 2.54 * 10;
+        var h = height / dpi * 2.54 * 10;
 
-        let p1 = drawpoint(0, 0, 0);
-        let p2 = drawpoint(w, 0, 0);
-        let p3 = drawpoint(w, h, 0);
-        let p4 = drawpoint(0, h, 0);
+        var p1 = drawpoint(0, 0, 0);
+        var p2 = drawpoint(w, 0, 0);
+        var p3 = drawpoint(w, h, 0);
+        var p4 = drawpoint(0, h, 0);
         context_draw.beginPath();
         context_draw.moveTo(p1.x, p1.y);
         context_draw.lineTo(p2.x, p2.y);
         context_draw.lineTo(p3.x, p3.y);
         context_draw.lineTo(p4.x, p4.y);
         context_draw.closePath();
-        context_draw.strokeStyle = "#FFF";
+        context_draw.strokeStyle = "red";
         context_draw.stroke();
     };
 
@@ -186,11 +186,11 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
         context_process.drawImage(video, 0, 0, vw, vh, ox, oy, w, h);
         markerResult = null;
         if (ar) {
-            let imageData = context_process.getImageData(0, 0, pw, ph);
+            var imageData = context_process.getImageData(0, 0, pw, ph);
             ar.process(imageData);
         }
     }
-    let tick = () => {
+    var tick = function() {
         process();
         draw();
         requestAnimationFrame(tick);