+ 
+ Loading, please wait
+
+
+
+
+ Loading, please wait
+
+
+
-
-
+
+
+ + Main +
+
+
+
+ + Worker +
+
-
-
-
- Loading, please wait
-
-
- Loading, please wait
-
-
- Main
-
-
- Worker
-
-
-
-
+
+
+
+
+
+
+
+
+
+ 🖼 Marker Image
+
diff --git a/examples/nft_improved_worker/threejs_wasm_worker.js b/examples/nft_improved_worker/threejs_wasm_worker.js
index 21dddc0a..96003287 100644
--- a/examples/nft_improved_worker/threejs_wasm_worker.js
+++ b/examples/nft_improved_worker/threejs_wasm_worker.js
@@ -24,7 +24,7 @@ var markers = {
"pinball": {
width: 1637,
height: 2048,
- dpi: 600,
+ dpi: 250,
url: "../DataNFT/pinball",
},
};
@@ -41,7 +41,7 @@ var setMatrix = function (matrix, value) {
}
};
-var worker;
+//var worker;
function start(container, marker, video, input_width, input_height, canvas_draw, render_update, track_update) {
worker = new Worker('wasm_worker/artoolkit.wasm_worker.js');
worker.onmessage = function(ev) {
@@ -61,7 +61,6 @@ function start2(container, marker, video, input_width, input_height, canvas_draw
var canvas_process = document.createElement('canvas');
var context_process = canvas_process.getContext('2d');
- // var context_draw = canvas_draw.getContext('2d');
var renderer = new THREE.WebGLRenderer({canvas: canvas_draw, alpha: true, antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
@@ -69,8 +68,6 @@ function start2(container, marker, video, input_width, input_height, canvas_draw
var camera = new THREE.Camera();
camera.matrixAutoUpdate = false;
- // var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
- // camera.position.z = 400;
scene.add(camera);
@@ -82,11 +79,11 @@ function start2(container, marker, video, input_width, input_height, canvas_draw
var root = new THREE.Object3D();
scene.add(root);
- sphere.material.shading = THREE.FlatShading;
+ sphere.material.flatShading;
sphere.position.z = 0;
- sphere.position.x = 40;
- sphere.position.y = 40;
- sphere.scale.set(80, 80, 80);
+ sphere.position.x = 100;
+ sphere.position.y = 100;
+ sphere.scale.set(200, 200, 200);
root.matrixAutoUpdate = false;
root.add(sphere);
@@ -146,7 +143,7 @@ function start2(container, marker, video, input_width, input_height, canvas_draw
if (msg.end == true)
// removing loader page if present
document.body.classList.remove("loading");
- document.getElementById("loading").remove();
+ document.getElementById("loading").remove();
break;
}
diff --git a/examples/nft_improved_worker/threejs_worker.js b/examples/nft_improved_worker/threejs_worker.js
index b6642438..7f5d36eb 100644
--- a/examples/nft_improved_worker/threejs_worker.js
+++ b/examples/nft_improved_worker/threejs_worker.js
@@ -2,11 +2,29 @@ function isMobile() {
return /Android|mobile|iPad|iPhone/i.test(navigator.userAgent);
}
+var interpolationFactor = 24;
+
+var trackedMatrix = {
+ // for interpolation
+ delta: [
+ 0,0,0,0,
+ 0,0,0,0,
+ 0,0,0,0,
+ 0,0,0,0
+ ],
+ interpolated: [
+ 0,0,0,0,
+ 0,0,0,0,
+ 0,0,0,0,
+ 0,0,0,0
+ ]
+}
+
var markers = {
"pinball": {
width: 1637,
height: 2048,
- dpi: 215,
+ dpi: 250,
url: "./examples/DataNFT/pinball",
},
};
@@ -36,7 +54,6 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
var canvas_process = document.createElement('canvas');
var context_process = canvas_process.getContext('2d');
- // var context_draw = canvas_draw.getContext('2d');
var renderer = new THREE.WebGLRenderer({ canvas: canvas_draw, alpha: true, antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
@@ -44,8 +61,6 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
var camera = new THREE.Camera();
camera.matrixAutoUpdate = false;
- // var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
- // camera.position.z = 400;
scene.add(camera);
@@ -57,7 +72,7 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
var root = new THREE.Object3D();
scene.add(root);
- sphere.material.shading = THREE.FlatShading;
+ sphere.material.flatShading;
sphere.position.z = 0;
sphere.position.x = 100;
sphere.position.y = 100;
@@ -116,13 +131,15 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
proj[9] *= ratioH;
proj[13] *= ratioH;
setMatrix(camera.projectionMatrix, proj);
-
- // removing loader page if present
- if (greyCover && greyCover.parentElement) {
- greyCover.parentElement.removeChild(greyCover);
- }
break;
}
+ case "endLoading": {
+ if (msg.end == true)
+ // removing loader page if present
+ document.body.classList.remove("loading");
+ document.getElementById("loading").remove();
+ break;
+ }
case "found": {
found(msg);
break;
@@ -137,9 +154,14 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
};
};
- var lastmsg = null;
+ var world;
+
var found = function(msg) {
- lastmsg = msg;
+ if (!msg) {
+ world = null;
+ } else {
+ world = JSON.parse(msg.matrixGL_RH);
+ }
};
var lasttime = Date.now();
@@ -152,21 +174,20 @@ function start(container, marker, video, input_width, input_height, canvas_draw,
time += dt;
lasttime = now;
- if (!lastmsg) {
+ if (!world) {
sphere.visible = false;
} else {
- var proj = JSON.parse(lastmsg.proj);
- var world = JSON.parse(lastmsg.matrixGL_RH);
-
- var width = marker.width;
- var height = marker.height;
- var dpi = marker.dpi;
-
- var w = width / dpi * 2.54 * 10;
- var h = height / dpi * 2.54 * 10;
+ sphere.visible = true;
+ // interpolate matrix
+ for (var i = 0; i < 16; i++) {
+ trackedMatrix.delta[i] = world[i] - trackedMatrix.interpolated[i];
+ trackedMatrix.interpolated[i] =
+ trackedMatrix.interpolated[i] +
+ trackedMatrix.delta[i] / interpolationFactor;
+ }
- sphere.visible = true;
- setMatrix(root.matrix, world);
+ // set matrix of 'root' by detected 'world' matrix
+ setMatrix(root.matrix, trackedMatrix.interpolated);
}
renderer.render(scene, camera);
};