Skip to content

Commit 9fd6bc8

Browse files
kalwaltkalwalt
committed
testing jsartoolkitNFT threaded example
1 parent 3ee1c37 commit 9fd6bc8

7 files changed

+340
-0
lines changed

‎_config.yml

+4
Original file line numberDiff line numberDiff line change
@@ -92,3 +92,7 @@ pwa:
9292
# - vendor/cache/
9393
# - vendor/gems/
9494
# - vendor/ruby/
95+
96+
# Include HTTPS headers
97+
include:
98+
- _headers

‎_headers

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/examples/ARToolkitNFT_ES6_threading_example.html
2+
Cross-Origin-Embedder-Policy: require-corp
3+
Cross-Origin-Opener-Policy: same-origin

‎dist/ARToolkitNFT_td.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/ARToolkitNFT_ES6_threading_example.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>ARToolkitNFT_ES6 example</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
8+
<link rel="stylesheet" href="css/nft-style.css">
9+
</head>
10+
11+
<body>
12+
<div id="loading">
13+
<img src="Data/JsartoolkitNFT-logo.gif" />
14+
<span class="loading-text">Loading, please wait</span>
15+
</div>
16+
<!--
17+
==================
18+
STATS
19+
==================
20+
-->
21+
<div id="stats" class="ui stats">
22+
<div id="stats1" class="stats-item">
23+
<p class="stats-item-title">
24+
Main
25+
</p>
26+
</div>
27+
</div>
28+
29+
<div id="app">
30+
<video loop autoplay muted playsinline id="video">
31+
</video>
32+
<canvas id="canvas"></canvas>
33+
</div>
34+
<script src="Data/js/third_party/three.js/stats.min.js"></script>
35+
<script src="Data/js/third_party/three.js/three.min.js"></script>
36+
<script async src="../dist/ARToolkitNFT_td.js"></script>
37+
<script src="index.js"></script>
38+
<script src="../js/one-euro-filter.js"></script>
39+
<script src="load_ES6_thread.js"></script>
40+
<script src="threejs_wasm_thread.js"></script>
41+
42+
<script>
43+
/**
44+
* STATS
45+
*/
46+
var statsMain = new Stats();
47+
statsMain.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
48+
document.getElementById('stats1').appendChild(statsMain.dom);
49+
50+
window.addEventListener('load', () => {
51+
console.log('init ARToolkitNFT...');
52+
initCamera()
53+
.then(video => {
54+
55+
// start camera playback
56+
sourceVideo = video;
57+
sourceVideo.width = 640;
58+
sourceVideo.height = 480;
59+
sourceVideo.play();
60+
61+
// init target canvas
62+
initTargetCanvas();
63+
64+
return new Promise(resolve => {
65+
sourceVideo.addEventListener("loadeddata", event => {
66+
console.log("Camera is ready");
67+
resolve();
68+
});
69+
});
70+
})
71+
.then(_ => {
72+
73+
start('../examples/DataNFT/pinball', video, video.videoWidth, video.videoHeight, canvas, function () { statsMain.update() })
74+
75+
});
76+
})
77+
</script>
78+
79+
</body>
80+
81+
</html>

‎examples/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
<a href="/examples/ARToolkitNFT_ES6_example.html"><h2>JsartoolkitNFT example with NFT tracking</h2></a>
1414
<p>A simple example that display a simple sphere. You need the <a href="/examples/Data/pinball.jpg">Pinball image</a>
1515
</div>
16+
<div class='box'>
17+
<a href="/examples/ARToolkitNFT_ES6_threading_example.html"><h2>JsartoolkitNFT example with NFT tracking and threading</h2></a>
18+
<p>A simple example that display a simple sphere. You need the <a href="/examples/Data/pinball.jpg">Pinball image</a>
19+
</div>
1620
<div class='box'>
1721
<a href="/examples/arNFT_example.html"><h2>ARnft example with NFT tracking</h2></a>
1822
<p>A simple example that display a red cube. You need the <a href="/examples/Data/pinball.jpg">Pinball image</a>

‎examples/load_ES6_thread.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const WARM_UP_TOLERANCE = 5;
2+
let tickCount = 0;
3+
var markerResult = null;
4+
var ar;
5+
6+
// initialize the OneEuroFilter
7+
let filterMinCF = 0.0001;
8+
let filterBeta = 0.01;
9+
const filter = new OneEuroFilter({ minCutOff: filterMinCF, beta: filterBeta });
10+
function load_thread(msg) {
11+
console.debug("Loading marker at: ", msg.marker);
12+
13+
var onLoad = function (arController) {
14+
ar = arController;
15+
var cameraMatrix = ar.getCameraMatrix();
16+
17+
ar.addEventListener("getNFTMarker", function (ev) {
18+
tickCount += 1;
19+
if (tickCount > WARM_UP_TOLERANCE) {
20+
var mat = filter.filter(Date.now(), ev.data.matrixGL_RH);
21+
var markerFound = new CustomEvent("markerFound", {detail: {matrixGL_RH: mat}})
22+
window.dispatchEvent(markerFound)
23+
}
24+
});
25+
26+
ar.addEventListener("lostNFTMarker", function (ev) {
27+
filter.reset();
28+
});
29+
30+
ar.loadNFTMarker(msg.marker, function (id) {
31+
ar.trackNFTMarkerId(id);
32+
let marker = ar.getNFTData(ar.id, 0);
33+
console.log("nftMarker data: ", marker);
34+
var markerInfos = new CustomEvent("markerInfos", {detail: {marker: marker}})
35+
window.dispatchEvent(markerInfos);
36+
console.log("loadNFTMarker -> ", id);
37+
var endLoading = new CustomEvent("endLoading", {detail: {end: true}})
38+
window.dispatchEvent(endLoading)
39+
});
40+
41+
var loaded = new CustomEvent("loaded", {detail: {proj: cameraMatrix}});
42+
window.dispatchEvent(loaded)
43+
};
44+
45+
var onError = function (error) {
46+
console.error(error);
47+
};
48+
49+
console.debug("Loading camera at:", msg.camera_para);
50+
51+
// we cannot pass the entire ARControllerNFT, so we re-create one inside the Worker, starting from camera_param
52+
ARControllerNFT.initWithDimensions(msg.pw, msg.ph, msg.camera_para)
53+
.then(onLoad)
54+
.catch(onError);
55+
}

‎examples/threejs_wasm_thread.js

+191
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
var ar;
2+
function isMobile() {
3+
return /Android|mobile|iPad|iPhone/i.test(navigator.userAgent);
4+
}
5+
6+
var setMatrix = function (matrix, value) {
7+
var array = [];
8+
for (var key in value) {
9+
array[key] = value[key];
10+
}
11+
if (typeof matrix.elements.set === "function") {
12+
matrix.elements.set(array);
13+
} else {
14+
matrix.elements = [].slice.call(array);
15+
}
16+
};
17+
18+
function start( markerUrl, video, input_width, input_height, canvas_draw, render_update) {
19+
var vw, vh;
20+
var sw, sh;
21+
var pscale, sscale;
22+
var w, h;
23+
var pw, ph;
24+
var ox, oy;
25+
var camera_para = './../examples/Data/camera_para.dat';
26+
var camera_matrix;
27+
28+
var canvas_process = document.createElement('canvas');
29+
var context_process = canvas_process.getContext('2d', { willReadFrequently: true });
30+
31+
var renderer = new THREE.WebGLRenderer({ canvas: canvas_draw, alpha: true, antialias: true });
32+
renderer.setPixelRatio(window.devicePixelRatio);
33+
34+
var scene = new THREE.Scene();
35+
36+
var camera = new THREE.Camera();
37+
camera.matrixAutoUpdate = false;
38+
39+
scene.add(camera);
40+
41+
var sphere = new THREE.Mesh(
42+
new THREE.SphereGeometry(0.5, 8, 8),
43+
new THREE.MeshNormalMaterial()
44+
);
45+
46+
var root = new THREE.Object3D();
47+
scene.add(root);
48+
49+
var marker;
50+
51+
var markerInfos = function () {
52+
window.addEventListener("markerInfos", function (ev) {
53+
marker = ev.detail.marker;
54+
})
55+
}
56+
57+
var getCameraMatrix = function () {
58+
window.addEventListener("loaded", function (ev) {
59+
camera_matrix = ev.detail.proj;
60+
})
61+
}
62+
63+
sphere.material.flatShading;
64+
sphere.scale.set(200, 200, 200);
65+
66+
root.matrixAutoUpdate = false;
67+
root.add(sphere);
68+
69+
var load = function () {
70+
vw = input_width;
71+
vh = input_height;
72+
73+
pscale = 320 / Math.max(vw, vh / 3 * 4);
74+
sscale = isMobile() ? window.outerWidth / input_width : 1;
75+
76+
sw = vw * sscale;
77+
sh = vh * sscale;
78+
79+
w = vw * pscale;
80+
h = vh * pscale;
81+
pw = Math.max(w, h / 3 * 4);
82+
ph = Math.max(h, w / 4 * 3);
83+
ox = (pw - w) / 2;
84+
oy = (ph - h) / 2;
85+
canvas_process.style.clientWidth = pw + "px";
86+
canvas_process.style.clientHeight = ph + "px";
87+
canvas_process.width = pw;
88+
canvas_process.height = ph;
89+
90+
renderer.setSize(sw, sh);
91+
92+
var msg = {
93+
pw: pw,
94+
ph: ph,
95+
camera_para: camera_para,
96+
marker: markerUrl
97+
}
98+
99+
load_thread(msg);
100+
markerInfos();
101+
getCameraMatrix();
102+
};
103+
104+
var world;
105+
106+
var found = function () {
107+
window.addEventListener("markerFound", function (ev) {
108+
world = ev.detail.matrixGL_RH
109+
})
110+
};
111+
112+
var lasttime = Date.now();
113+
var time = 0;
114+
115+
var setCameraMatrix = function () {
116+
var proj = camera_matrix;
117+
var ratioW = pw / w;
118+
var ratioH = ph / h;
119+
proj[0] *= ratioW;
120+
proj[4] *= ratioW;
121+
proj[8] *= ratioW;
122+
proj[12] *= ratioW;
123+
proj[1] *= ratioH;
124+
proj[5] *= ratioH;
125+
proj[9] *= ratioH;
126+
proj[13] *= ratioH;
127+
setMatrix(camera.projectionMatrix, proj);
128+
}
129+
130+
var draw = function () {
131+
render_update();
132+
var now = Date.now();
133+
var dt = now - lasttime;
134+
time += dt;
135+
lasttime = now;
136+
found();
137+
if (camera_matrix) {
138+
setCameraMatrix();
139+
}
140+
141+
if (!world) {
142+
sphere.visible = false;
143+
} else {
144+
sphere.visible = true;
145+
console.log(world);
146+
sphere.position.y = ((marker.height / marker.dpi) * 2.54 * 10) / 2.0;
147+
sphere.position.x = ((marker.width / marker.dpi) * 2.54 * 10) / 2.0;
148+
// set matrix of 'root' by detected 'world' matrix
149+
setMatrix(root.matrix, world);
150+
}
151+
window.addEventListener("endLoading", function (ev) {
152+
if (ev.detail.end == true) {
153+
// removing loader page if present
154+
var loader = document.getElementById('loading');
155+
if (loader) {
156+
loader.querySelector('.loading-text').innerText = 'Start the tracking!';
157+
setTimeout(function () {
158+
if(loader) {
159+
loader.querySelector('.loading-text').innerText = '';
160+
loader.querySelector('img').src = '';
161+
}
162+
}, 2000);
163+
} else {
164+
console.log("No loader found");}
165+
}
166+
})
167+
renderer.render(scene, camera);
168+
};
169+
170+
var process = function () {
171+
context_process.fillStyle = 'black';
172+
context_process.fillRect(0, 0, pw, ph);
173+
context_process.drawImage(video, 0, 0, vw, vh, ox, oy, w, h);
174+
175+
var imageData = context_process.getImageData(0, 0, pw, ph);
176+
177+
if (ar && ar.process) {
178+
ar.process(imageData);
179+
}
180+
181+
requestAnimationFrame(process);
182+
}
183+
var tick = function () {
184+
draw();
185+
requestAnimationFrame(tick);
186+
};
187+
188+
load();
189+
tick();
190+
process();
191+
}

0 commit comments

Comments
 (0)