Skip to content

Commit 711bf8c

Browse files
kalwaltkalwalt
committed
simple structure for webarkit-testing examples
1 parent 267bb5b commit 711bf8c

15 files changed

+469
-1
lines changed

Diff for: ‎Gemfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ source "https://rubygems.org"
77
#
88
# This will help ensure the proper Jekyll version is running.
99
# Happy Jekylling!
10-
gem "jekyll", "~> 4.0.0"
10+
gem "jekyll"
1111
# This is the default theme for new Jekyll sites. You may change this to anything you like.
1212
gem "bulma-clean-theme"
1313
group :jekyll_plugins do

Diff for: ‎examples/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,7 @@
2121
<a href="/examples/multi_wasm_nft.html"><h2>Multi NFT WASM example with jsartoolkit5</h2></a>
2222
<p>A simple example that display three different 3d models. You need the <a href="/examples/Data/pinball.jpg">Pinball image</a>, <a href="/examples/Data/chalk_multi.jpg">chalk_multi image</a> and <a href="/examples/Data/kuva.jpg">Kuva image</a>
2323
</div>
24+
<div class="box">
25+
<a href="/examples/webarkit-testing"><h2></h2>webarkit-testing</h2></a>
26+
</div>
27+

Diff for: ‎examples/webarkit-testing/akaze_example.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Simple example with WebARKit</title>
7+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<script src="./dist/GrayScale.js"></script>
10+
<script type="text/javascript" src="stats.min.js"></script>
11+
<script>
12+
function setTrackerType(){
13+
return 'akaze';
14+
}
15+
</script>
16+
<script src="worker_setup.js"></script>
17+
<link rel="stylesheet" href="css/style.css">
18+
</head>
19+
20+
<body>
21+
<div id="stats"></div>
22+
<img id="refIm" src="./data/pinball.jpg" width="1637" height="2048" style="display:none;">
23+
<img id="arElem" src="./data/aframe-k.png"></img>
24+
<div id="loading">Loading Image Tracking Modules...</div>
25+
</body>
26+
27+
</html>

Diff for: ‎examples/webarkit-testing/css/style.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
html,
2+
body {
3+
margin: 0;
4+
overflow: hidden;
5+
}
6+
7+
#arElem {
8+
position: absolute;
9+
width: 1637px;
10+
height: 2048px;
11+
display: none;
12+
border: 1px solid black;
13+
background: white;
14+
}
15+
16+
#loading {
17+
visibility: hidden;
18+
left: 50%;
19+
width: 200px;
20+
margin-left: -100px;
21+
background-color: #eee;
22+
text-align: center;
23+
border-radius: 10px;
24+
padding: 10px;
25+
position: fixed;
26+
z-index: 9999;
27+
bottom: 20px;
28+
font-size: 15px;
29+
word-wrap: break-word;
30+
}
31+
32+
#loading.show {
33+
visibility: visible;
34+
-webkit-animation: fadein 1.0s;
35+
animation: fadein 1.0s;
36+
}
37+
38+
#loading.hide {
39+
-webkit-animation: fadeout 1.0s;
40+
animation: fadeout 1.0s;
41+
}
42+
43+
@-webkit-keyframes fadein {
44+
from {bottom: 0; opacity: 0;}
45+
to {bottom: 30px; opacity: 1;}
46+
}
47+
48+
@keyframes fadein {
49+
from {bottom: 0; opacity: 0;}
50+
to {bottom: 30px; opacity: 1;}
51+
}
52+
53+
@-webkit-keyframes fadeout {
54+
from {bottom: 30px; opacity: 1;}
55+
to {bottom: 0; opacity: 0; visibility: hidden;}
56+
}
57+
58+
@keyframes fadeout {
59+
from {bottom: 30px; opacity: 1;}
60+
to {bottom: 0; opacity: 0; visibility: hidden;}

Diff for: ‎examples/webarkit-testing/data/aframe-k.png

3.83 KB
Loading

Diff for: ‎examples/webarkit-testing/data/pinball.jpg

764 KB
Loading

Diff for: ‎examples/webarkit-testing/dist/GrayScale.js

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

Diff for: ‎examples/webarkit-testing/dist/WebARKit.js

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

Diff for: ‎examples/webarkit-testing/freak_example.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Simple example with WebARKit</title>
7+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<script src="./dist/GrayScale.js"></script>
10+
<script type="text/javascript" src="stats.min.js"></script>
11+
<script>
12+
function setTrackerType(){
13+
return 'freak';
14+
}
15+
</script>
16+
<script src="worker_setup.js"></script>
17+
<link rel="stylesheet" href="css/style.css">
18+
</head>
19+
20+
<body>
21+
<div id="stats"></div>
22+
<img id="refIm" src="./data/pinball.jpg" width="1637" height="2048" style="display:none;">
23+
<img id="arElem" src="./data/aframe-k.png"></img>
24+
<div id="loading">Loading Image Tracking Modules...</div>
25+
</body>
26+
27+
</html>

Diff for: ‎examples/webarkit-testing/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
layout: page
3+
title: WebAR Kit -- webarkit-testing example page
4+
subtitle: Some examples showing webarkit-testing capabilities
5+
description: You can found in this page some examples with our experimental project webarkit-testing.
6+
permalink: /examples/webarkit-testing/
7+
---
8+
9+
<div class='box'>
10+
<a href="/examples/webarkit-testing/freak_example.html"><h2>Freak example with 2d tracking</h2></a>
11+
<p>A simple example that display an image. You need the <a href="/examples/Data/pinball.jpg">Pinball image</a>
12+
</div>

Diff for: ‎examples/webarkit-testing/orb_example.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Simple example with WebARKit</title>
7+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<script src="./dist/GrayScale.js"></script>
10+
<script type="text/javascript" src="stats.min.js"></script>
11+
<script>
12+
function setTrackerType(){
13+
return 'orb';
14+
}
15+
</script>
16+
<script src="worker_setup.js"></script>
17+
<link rel="stylesheet" href="css/style.css">
18+
</head>
19+
20+
<body>
21+
<div id="stats"></div>
22+
<img id="refIm" src="./data/pinball.jpg" width="1637" height="2048" style="display:none;">
23+
<img id="arElem" src="./data/aframe-k.png"></img>
24+
<div id="loading">Loading Image Tracking Modules...</div>
25+
</body>
26+
27+
</html>

Diff for: ‎examples/webarkit-testing/stats.min.js

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

Diff for: ‎examples/webarkit-testing/teblid_example.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Simple example with WebARKit</title>
7+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<script src="./dist/GrayScale.js"></script>
10+
<script type="text/javascript" src="stats.min.js"></script>
11+
<script>
12+
function setTrackerType(){
13+
return 'teblid';
14+
}
15+
</script>
16+
<script src="worker_setup.js"></script>
17+
<link rel="stylesheet" href="css/style.css">
18+
</head>
19+
20+
<body>
21+
<div id="stats"></div>
22+
<img id="refIm" src="./data/pinball.jpg" width="1637" height="2048" style="display:none;">
23+
<img id="arElem" src="./data/aframe-k.png"></img>
24+
<div id="loading">Loading Image Tracking Modules...</div>
25+
</body>
26+
27+
</html>

Diff for: ‎examples/webarkit-testing/worker.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
importScripts("./dist/WebARKit.js");
2+
3+
var ar;
4+
var next = null;
5+
var markerResult = null;
6+
7+
self.onmessage = (e) => {
8+
var msg = e.data;
9+
switch (msg.type) {
10+
case "initTracker": {
11+
initTracker(msg);
12+
return;
13+
}
14+
case "process": {
15+
next = msg.data;
16+
processFrame();
17+
return;
18+
}
19+
}
20+
};
21+
22+
function initTracker(msg) {
23+
var trackerType = msg.trackerType;
24+
25+
var onLoad = function (wark) {
26+
ar = wark;
27+
wark.loadTrackerGrayImage(msg.imageData, msg.imgWidth, msg.imgHeight, WebARKit.WebARKitController.GRAY);
28+
29+
var cameraProjMat = wark.getCameraProjectionMatrix();
30+
console.log("camera proj Mat: ", cameraProjMat);
31+
32+
postMessage({
33+
type: "loadedTracker",
34+
cameraProjMat: JSON.stringify(cameraProjMat),
35+
})
36+
37+
38+
39+
wark.addEventListener("getMarker", function (event) {
40+
console.log(event.data.corners);
41+
markerResult = {
42+
type: "found",
43+
corners: JSON.stringify(event.data.corners),
44+
matrix: JSON.stringify(event.data.matrix),
45+
pose: JSON.stringify(event.data.pose),
46+
};
47+
});
48+
};
49+
50+
var onError = function (error) {
51+
console.error(error);
52+
};
53+
54+
WebARKit.WebARKitController.init_raw(msg.videoWidth, msg.videoHeight, trackerType)
55+
.then(onLoad)
56+
.catch(onError);
57+
}
58+
59+
function processFrame() {
60+
markerResult = null;
61+
if (ar && ar.process_raw) {
62+
ar.process_raw(next, WebARKit.WebARKitController.GRAY);
63+
}
64+
if (markerResult) {
65+
postMessage(markerResult);
66+
} else {
67+
postMessage({
68+
type: "not found",
69+
});
70+
}
71+
72+
next = null;
73+
}

0 commit comments

Comments
 (0)