Skip to content

Commit 53fb34a

Browse files
kalwaltkalwalt
committed
aligning the main_threejs_worker.html example to the asm version
1 parent 6d8b508 commit 53fb34a

File tree

5 files changed

+179
-102
lines changed

5 files changed

+179
-102
lines changed

‎examples/nft_improved_worker/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h3>jsartoolkit5 demos with ar2Tracking</h3>
1111
<p>Examples:</p>
1212
<ul>
1313
<li><a href="threejs_worker_gltf.html">Show a 3D, animated model. Uses web worker. Has loader. Has interpolation.</a></li>
14-
<li><a href="main_threejs_worker.html">Show a 3D sphere. Uses web worker. No loader. No interpolation (high framerate)</a></li>
14+
<li><a href="main_threejs_worker.html">Show a 3D sphere. Uses web worker. Has loader. Has interpolation. Asm version. (high framerate)</a></li>
1515
<li><a href="main_threejs_wasm_worker.html">Show a 3D sphere. Uses web worker. Has loader. Has interpolation. Uses web assembly</a></li>
1616
<li><a href="main.html">Draw a red rectangle around the image. Single-threaded. No loader</a></li>
1717
<li><a href="main_worker.html">Draw a red rectangle around the image. Uses web worker. No loader</a></li>

‎examples/nft_improved_worker/main_threejs_wasm_worker.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>NFT marker example with Three.js</title>
5+
<title>NFT marker example with a WebWorker, WASM and with Three.js</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
77
<link rel="stylesheet" href="../css/video-style.css">
88
</head>

‎examples/nft_improved_worker/main_threejs_worker.html

Lines changed: 125 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,140 @@
1+
<!DOCTYPE html>
12
<html>
2-
33
<head>
4-
<title>NFT_test</title>
5-
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
6-
<style>
7-
html,
8-
body {
9-
margin: 0;
10-
padding: 0;
11-
}
12-
</style>
13-
<link rel="stylesheet" type="text/css" href="../css/style.css">
4+
<meta charset="utf-8">
5+
<title>NFT marker example with a WebWorker and Three.js</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
7+
<link rel="stylesheet" href="../css/video-style.css">
148
</head>
9+
<body class="loading">
10+
<div id="loading" >
11+
<img src="../Data/logo.gif"/>
12+
<span class="loading-text">Loading, please wait</span>
13+
</div>
14+
<!--
15+
==================
16+
STATS
17+
==================
18+
-->
19+
20+
<div id="stats" class="ui stats">
21+
22+
<div id="stats1" class="stats-item">
23+
<p class="stats-item-title">
24+
Main
25+
</p>
26+
</div>
27+
28+
<div id="stats2" class="stats-item">
29+
<p class="stats-item-title">
30+
Worker
31+
</p>
32+
</div>
33+
34+
</div>
1535

16-
<body>
17-
<div class="grey-cover">
18-
<div class="loading">
19-
<img src="../Data/logo.gif"/>
20-
<span class="loading-text">Loading, please wait</span>
21-
</div>
22-
</div>
23-
<div style="position:absolute; color:white; top:0;left:0" id="stats1">
24-
<div>Main</div>
25-
</div>
26-
<div style="position:absolute; color:white; top:80px;left:0" id="stats2">
27-
<div>Worker</div>
28-
</div>
29-
<div id="container">
30-
<video loop autoplay muted playsinline id="video"></video>
31-
<canvas style="position: absolute; left:0; top:0" id="canvas_draw"></canvas>
32-
</div>
36+
<!--
37+
==================
38+
CAMERA VIDEO & CANVAS
39+
==================
40+
-->
41+
42+
<div id="app">
43+
<video
44+
loop
45+
autoplay
46+
muted
47+
playsinline
48+
id="video">
49+
</video>
50+
51+
<canvas id="canvas"></canvas>
52+
</div>
53+
54+
<a
55+
href="https://raw.githubusercontent.com/artoolkit/artoolkit5/master/doc/Marker%20images/pinball.jpg"
56+
class="ui marker"
57+
target="_blank">
58+
🖼 Marker Image
59+
</a>
3360

3461
<script src="../js/third_party/three.js/stats.min.js"></script>
3562
<script src="../js/third_party/three.js/three.min.js"></script>
3663
<script src="threejs_worker.js"></script>
3764

3865
<script>
39-
var statsMain = new Stats();
40-
statsMain.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
41-
statsMain.domElement.style.position = 'relative';
42-
statsMain.domElement.style.left = '0px';
43-
statsMain.domElement.style.top = '0px';
44-
document.getElementById("stats1").appendChild(statsMain.dom);
45-
46-
var statsWorker = new Stats();
47-
statsWorker.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
48-
statsWorker.domElement.style.position = 'relative';
49-
statsWorker.domElement.style.left = '0px';
50-
statsWorker.domElement.style.top = '0px';
51-
document.getElementById("stats2").appendChild(statsWorker.dom);
52-
53-
var container = document.getElementById('container');
54-
var greyCover = document.querySelector('.grey-cover');
55-
var video = document.getElementById('video');
56-
var canvas_draw = document.getElementById('canvas_draw');
66+
67+
/**
68+
* STATS
69+
*/
70+
var statsMain = new Stats();
71+
statsMain.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
72+
document.getElementById( 'stats1' ).appendChild( statsMain.dom );
73+
74+
var statsWorker = new Stats();
75+
statsWorker.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
76+
document.getElementById( 'stats2' ).appendChild( statsWorker.dom );
77+
78+
/**
79+
* APP / ELEMENTS
80+
*/
81+
var container = document.getElementById( 'app' );
82+
var video = document.getElementById( 'video' );
83+
var canvas = document.getElementById( 'canvas' );
84+
85+
/**
86+
* APP / VIDEO STREAM
87+
*/
5788

5889
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
59-
var hint = {};
60-
if (isMobile()) {
61-
hint = {
62-
facingMode: { "ideal": "environment" },
63-
audio: false,
64-
video: {
65-
width: { min: 240, max: 240 },
66-
height: { min: 360, max: 360 },
67-
},
68-
};
69-
}
70-
71-
navigator.mediaDevices.getUserMedia({ video: hint }).then(function (stream) {
72-
video.srcObject = stream;
73-
video.addEventListener("loadedmetadata", function() {
74-
video.play();
75-
start(container, markers["pinball"], video, video.videoWidth, video.videoHeight, canvas_draw, function() {statsMain.update()}, function(){statsWorker.update()}, greyCover);
76-
});
77-
});
78-
}
90+
var hint = {
91+
audio: false,
92+
video: true
93+
};
94+
if( window.innerWidth < 800 ) {
95+
var width = ( window.innerWidth < window.innerHeight ) ? 240 : 360;
96+
var height = ( window.innerWidth < window.innerHeight ) ? 360 : 240;
97+
98+
var aspectRatio = window.innerWidth / window.innerHeight;
99+
100+
console.log( width, height );
101+
102+
hint = {
103+
audio: false,
104+
video: {
105+
facingMode: 'environment',
106+
width: { min: width, max: width }
107+
},
108+
};
109+
110+
console.log( hint );
111+
}
112+
113+
navigator.mediaDevices.getUserMedia( hint ).then( function( stream ) {
114+
video.srcObject = stream;
115+
video.addEventListener( 'loadedmetadata', function() {
116+
video.play();
117+
118+
console.log( 'video', video, video.videoWidth, video.videoHeight );
119+
120+
start(
121+
container,
122+
markers['pinball'],
123+
video,
124+
video.videoWidth,
125+
video.videoHeight,
126+
canvas,
127+
function() {
128+
statsMain.update()
129+
},
130+
function() {
131+
statsWorker.update();
132+
},
133+
null
134+
);
135+
} );
136+
} );
137+
}
79138
</script>
80139
</body>
81140

‎examples/nft_improved_worker/threejs_wasm_worker.js

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ var markers = {
2424
"pinball": {
2525
width: 1637,
2626
height: 2048,
27-
dpi: 600,
27+
dpi: 250,
2828
url: "../DataNFT/pinball",
2929
},
3030
};
@@ -41,7 +41,7 @@ var setMatrix = function (matrix, value) {
4141
}
4242
};
4343

44-
var worker;
44+
//var worker;
4545
function start(container, marker, video, input_width, input_height, canvas_draw, render_update, track_update) {
4646
worker = new Worker('wasm_worker/artoolkit.wasm_worker.js');
4747
worker.onmessage = function(ev) {
@@ -61,16 +61,13 @@ function start2(container, marker, video, input_width, input_height, canvas_draw
6161
var canvas_process = document.createElement('canvas');
6262
var context_process = canvas_process.getContext('2d');
6363

64-
// var context_draw = canvas_draw.getContext('2d');
6564
var renderer = new THREE.WebGLRenderer({canvas: canvas_draw, alpha: true, antialias: true});
6665
renderer.setPixelRatio(window.devicePixelRatio);
6766

6867
var scene = new THREE.Scene();
6968

7069
var camera = new THREE.Camera();
7170
camera.matrixAutoUpdate = false;
72-
// var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
73-
// camera.position.z = 400;
7471

7572
scene.add(camera);
7673

@@ -82,11 +79,11 @@ function start2(container, marker, video, input_width, input_height, canvas_draw
8279
var root = new THREE.Object3D();
8380
scene.add(root);
8481

85-
sphere.material.shading = THREE.FlatShading;
82+
sphere.material.flatShading;
8683
sphere.position.z = 0;
87-
sphere.position.x = 40;
88-
sphere.position.y = 40;
89-
sphere.scale.set(80, 80, 80);
84+
sphere.position.x = 100;
85+
sphere.position.y = 100;
86+
sphere.scale.set(200, 200, 200);
9087

9188
root.matrixAutoUpdate = false;
9289
root.add(sphere);
@@ -146,7 +143,7 @@ function start2(container, marker, video, input_width, input_height, canvas_draw
146143
if (msg.end == true)
147144
// removing loader page if present
148145
document.body.classList.remove("loading");
149-
document.getElementById("loading").remove();
146+
document.getElementById("loading").remove();
150147
break;
151148
}
152149

0 commit comments

Comments
 (0)