Skip to content

Commit b96dfa1

Browse files
NeuroforgeNeuroforge
authored
Merge pull request #74 from ThorstenBux/webassembly-support
Webassembly support
2 parents 0310e0f + 2c14fe6 commit b96dfa1

File tree

9 files changed

+777
-12
lines changed

9 files changed

+777
-12
lines changed

‎README.md‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@
22

33
Emscripten port of [ARToolKit](https://github.com/artoolkit/artoolkit5) to JavaScript.
44

5-
**NOTE: **
5+
---
6+
**NOTE:**
67

78
When writing JavaScript and making changes be aware that the emscripten uglifier does not support the ES6 syntax.
89

10+
---
11+
912
## Project Structure
1013

1114
- `build/` (compiled debug and minified versions of ARToolKit.js)
@@ -15,6 +18,24 @@ When writing JavaScript and making changes be aware that the emscripten uglifier
1518
- `js/` (compiled versions of ARToolKit.js with Three.js helper api)
1619
- `tools/` (build scripts for building ARToolKit.js)
1720

21+
## WebAssembly
22+
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:
23+
24+
```js
25+
<script type='text/javascript'>
26+
var artoolkit_wasm_url = '../build/artoolkit_wasm.wasm';
27+
</script>
28+
<script src="../build/artoolkit_wasm.js"></script>
29+
```
30+
As loading the WebAssembly artefact is done asynchronous there is a callback that is called once everything is ready.
31+
32+
```js
33+
window.addEventListener('artoolkit-loaded', () => {
34+
//do artoolkit stuff here
35+
});
36+
```
37+
See examples/simple_image_wasm.html for details.
38+
1839
## Clone the repository
1940

2041
1. Clone this repository

‎build/artoolkit.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/artoolkit_wasm.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/artoolkit_wasm.wasm‎

167 KB
Binary file not shown.

‎examples/simple_image_wasm.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<html>
2+
<body>
3+
4+
<img id="v1" src="Data/img.jpg"></img>
5+
<img id="v2" src="Data/chalk.jpg"></img>
6+
<img id="v3" src="Data/chalk_multi.jpg"></img>
7+
<img id="v4" src="Data/kuva.jpg"></img>
8+
<img id="v5" src="Data/armchair.jpg"></img>
9+
10+
<script type='text/javascript'>
11+
var artoolkit_wasm_url = '../build/artoolkit_wasm.wasm';
12+
</script>
13+
<script src="../build/artoolkit_wasm.js"></script>
14+
15+
<script>
16+
window.addEventListener('artoolkit-loaded', () => {
17+
var cameraParam = new ARCameraParam();
18+
19+
var ar1, ar2, ar3, ar4, ar5;
20+
21+
cameraParam.onload = function() {
22+
ar1 = new ARController(v1, cameraParam);
23+
ar1.debugSetup();
24+
25+
ar2 = new ARController(v2, cameraParam);
26+
ar2.debugSetup();
27+
28+
ar3 = new ARController(v3, cameraParam);
29+
ar3.debugSetup();
30+
ar3.process();
31+
32+
ar4 = new ARController(v4, cameraParam);
33+
ar4.debugSetup();
34+
ar4.process();
35+
36+
ar5 = new ARController(v5, cameraParam);
37+
38+
ar1.detectMarker();
39+
ar1.debugDraw();
40+
ar2.detectMarker();
41+
ar2.debugDraw();
42+
43+
ar5.debugSetup();
44+
ar5.detectMarker();
45+
ar5.debugDraw();
46+
47+
var assertEq = function(message, value, shouldBe) {
48+
if (value !== shouldBe) {
49+
throw(message + ' ' + value + ' is not the expected ' + shouldBe);
50+
}
51+
};
52+
53+
ar5.setMarkerInfoDir(0, 1);
54+
assertEq('dir changed to 1', ar5.getMarker(0).dir, 1);
55+
ar5.setMarkerInfoDir(0, 2);
56+
assertEq('dir changed to 2', ar5.getMarker(0).dir, 2);
57+
58+
// Test setter/getter pairs
59+
var methods = "DebugMode LogLevel ProjectionNearPlane ProjectionFarPlane ThresholdMode Threshold PatternDetectionMode PattRatio MatrixCodeType LabelingMode ImageProcMode".split(" ");
60+
for (var i=0; i<methods.length; i++) {
61+
var m = methods[i];
62+
var v = ar5['get'+m]();
63+
var nv = v === 1 ? 0 : ((v < 1 && v > 0) ? 0.7848 : 1);
64+
ar5['set'+m](nv);
65+
assertEq(m + ' changed', Math.round(ar5['get'+m]() * 10000) / 10000 , nv);
66+
ar5['set'+m](v);
67+
assertEq(m + ' changed back', ar5['get'+m](), v);
68+
}
69+
console.log("Setter/Getter tests run successfully.");
70+
};
71+
72+
cameraParam.load('Data/camera_para.dat');
73+
});
74+
75+
</script>
76+
77+
</body>
78+
</html>

‎js/artoolkit.api.js‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,43 @@
11
;(function() {
22
'use strict';
33

4+
if(window.artoolkit_wasm_url) {
5+
function downloadWasm(url) {
6+
return new Promise(function(resolve, reject) {
7+
var wasmXHR = new XMLHttpRequest();
8+
wasmXHR.open('GET', url, true);
9+
wasmXHR.responseType = 'arraybuffer';
10+
wasmXHR.onload = function() { resolve(wasmXHR.response); }
11+
wasmXHR.onerror = function() { reject('error ' + wasmXHR.status); }
12+
wasmXHR.send(null);
13+
});
14+
}
15+
16+
var wasm = downloadWasm(window.artoolkit_wasm_url);
17+
18+
// Module.instantiateWasm is a user-implemented callback which the Emscripten runtime calls to perform
19+
// the WebAssembly instantiation action. The callback function will be called with two parameters, imports
20+
// and successCallback. imports is a JS object which contains all the function imports that need to be passed
21+
// to the Module when instantiating, and once instantiated, the function should call successCallback() with
22+
// the WebAssembly Instance object.
23+
// The instantiation can be performed either synchronously or asynchronously. The return value of this function
24+
// should contain the exports object of the instantiated Module, or an empty dictionary object {} if the
25+
// instantiation is performed asynchronously, or false if instantiation failed.
26+
Module.instantiateWasm = function(imports, successCallback) {
27+
console.log('instantiateWasm: instantiating synchronously');
28+
wasm.then(function(wasmBinary) {
29+
console.log('wasm download finished, begin instantiating');
30+
var wasmInstantiate = WebAssembly.instantiate(new Uint8Array(wasmBinary), imports).then(function(output) {
31+
console.log('wasm instantiation succeeded');
32+
successCallback(output.instance);
33+
}).catch(function(e) {
34+
console.log('wasm instantiation failed! ' + e);
35+
});
36+
});
37+
return {}; // Compiling asynchronously, no exports.
38+
}
39+
}
40+
441
/**
542
The ARController is the main object for doing AR marker detection with JSARToolKit.
643
@@ -1814,11 +1851,18 @@
18141851
window.ARController = ARController;
18151852
window.ARCameraParam = ARCameraParam;
18161853

1817-
1818-
window.Module = {
1819-
onRuntimeInitialized: function() {
1854+
if (window.Module) {
1855+
window.Module.onRuntimeInitialized = function() {
18201856
runWhenLoaded();
1857+
var event = new Event('artoolkit-loaded');
1858+
window.dispatchEvent(event);
18211859
}
1822-
};
1860+
} else {
1861+
window.Module = {
1862+
onRuntimeInitialized: function() {
1863+
runWhenLoaded();
1864+
}
1865+
};
1866+
}
18231867

18241868
})();

‎tests/index_wasm.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>JSARToolKit QUnit tests</title>
7+
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.4.1.css">
8+
</head>
9+
<body>
10+
<h1>Remarks regarding tests</h1>
11+
<ul>
12+
<li>All test work on Android Chrome version 63.0.3239.111</li>
13+
<li>On Android Firefox 57.0.4 test 10 fails because of switched video resolution</li>
14+
<li>On iOS only Safari allows access to the video (as of 2018-01-08). The tests 9-11 fail because of switched camera resolution.</li>
15+
<li>Chrome (Version 63.0.3239.108 and Version 63.0.3239.132) on desktop all tests work.</li>
16+
<li>Firefox (Version 57.0.1 and 57.0.4) on desktop all tests work.</li>
17+
<li>Safari (Version 11.0.2) on desktop all tests work</li>
18+
</ul>
19+
<h2>Important: You need to use https protocol for the tests.</h2>
20+
<div>See startServer-https.md for a documentation how to do that on MacOS.</div>
21+
22+
<img id="v1" src="./img.jpg"></img>
23+
24+
<div id="qunit"></div>
25+
<div id="qunit-fixture"></div>
26+
27+
28+
29+
</div>
30+
<script src="https://code.jquery.com/qunit/qunit-2.4.1.js"></script>
31+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
32+
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
33+
crossorigin="anonymous"></script>
34+
<!-- <script src="../build/artoolkit.min.js"></script> -->
35+
36+
<!-- <script src="../build/artoolkit.debug.js"></script>
37+
<script src="../js/artoolkit.api.js"></script> -->
38+
39+
<script type='text/javascript'>
40+
var artoolkit_wasm_url = '../build/artoolkit_wasm.wasm';
41+
</script>
42+
<script src="../build/artoolkit_wasm.js"></script>
43+
44+
<script src="./tests_wasm.js"></script>
45+
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)