Skip to content

Commit

Permalink
aligning the main_threejs_wasm_worker.html example to the asm version
Browse files Browse the repository at this point in the history
  • Loading branch information
@kalwalt
kalwalt committed Jan 13, 2020
1 parent 6d8b508 commit dad8edc
Show file tree
Hide file tree
Showing 5 changed files with 179 additions and 102 deletions.
2 changes: 1 addition & 1 deletion examples/nft_improved_worker/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ <h3>jsartoolkit5 demos with ar2Tracking</h3>
<p>Examples:</p>
<ul>
<li><a href="threejs_worker_gltf.html">Show a 3D, animated model. Uses web worker. Has loader. Has interpolation.</a></li>
<li><a href="main_threejs_worker.html">Show a 3D sphere. Uses web worker. No loader. No interpolation (high framerate)</a></li>
<li><a href="main_threejs_worker.html">Show a 3D sphere. Uses web worker. Has loader. Has interpolation. Asm version. (high framerate)</a></li>
<li><a href="main_threejs_wasm_worker.html">Show a 3D sphere. Uses web worker. Has loader. Has interpolation. Uses web assembly</a></li>
<li><a href="main.html">Draw a red rectangle around the image. Single-threaded. No loader</a></li>
<li><a href="main_worker.html">Draw a red rectangle around the image. Uses web worker. No loader</a></li>
Expand Down
2 changes: 1 addition & 1 deletion examples/nft_improved_worker/main_threejs_wasm_worker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>NFT marker example with Three.js</title>
<title>NFT marker example with a WebWorker, WASM and with Three.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
<link rel="stylesheet" href="../css/video-style.css">
</head>
Expand Down
191 changes: 125 additions & 66 deletions examples/nft_improved_worker/main_threejs_worker.html
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,140 @@
<!DOCTYPE html>
<html>

<head>
<title>NFT_test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
<style>
html,
body {
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<meta charset="utf-8">
<title>NFT marker example with a WebWorker and Three.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
<link rel="stylesheet" href="../css/video-style.css">
</head>
<body class="loading">
<div id="loading" >
<img src="../Data/logo.gif"/>
<span class="loading-text">Loading, please wait</span>
</div>
<!--
==================
STATS
==================
-->

<div id="stats" class="ui stats">

<div id="stats1" class="stats-item">
<p class="stats-item-title">
Main
</p>
</div>

<div id="stats2" class="stats-item">
<p class="stats-item-title">
Worker
</p>
</div>

</div>

<body>
<div class="grey-cover">
<div class="loading">
<img src="../Data/logo.gif"/>
<span class="loading-text">Loading, please wait</span>
</div>
</div>
<div style="position:absolute; color:white; top:0;left:0" id="stats1">
<div>Main</div>
</div>
<div style="position:absolute; color:white; top:80px;left:0" id="stats2">
<div>Worker</div>
</div>
<div id="container">
<video loop autoplay muted playsinline id="video"></video>
<canvas style="position: absolute; left:0; top:0" id="canvas_draw"></canvas>
</div>
<!--
==================
CAMERA VIDEO & CANVAS
==================
-->

<div id="app">
<video
loop
autoplay
muted
playsinline
id="video">
</video>

<canvas id="canvas"></canvas>
</div>

<a
href="https://raw.githubusercontent.com/artoolkit/artoolkit5/master/doc/Marker%20images/pinball.jpg"
class="ui marker"
target="_blank">
🖼 Marker Image
</a>

<script src="../js/third_party/three.js/stats.min.js"></script>
<script src="../js/third_party/three.js/three.min.js"></script>
<script src="threejs_worker.js"></script>

<script>
var statsMain = new Stats();
statsMain.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
statsMain.domElement.style.position = 'relative';
statsMain.domElement.style.left = '0px';
statsMain.domElement.style.top = '0px';
document.getElementById("stats1").appendChild(statsMain.dom);

var statsWorker = new Stats();
statsWorker.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
statsWorker.domElement.style.position = 'relative';
statsWorker.domElement.style.left = '0px';
statsWorker.domElement.style.top = '0px';
document.getElementById("stats2").appendChild(statsWorker.dom);

var container = document.getElementById('container');
var greyCover = document.querySelector('.grey-cover');
var video = document.getElementById('video');
var canvas_draw = document.getElementById('canvas_draw');

/**
* STATS
*/
var statsMain = new Stats();
statsMain.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.getElementById( 'stats1' ).appendChild( statsMain.dom );

var statsWorker = new Stats();
statsWorker.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.getElementById( 'stats2' ).appendChild( statsWorker.dom );

/**
* APP / ELEMENTS
*/
var container = document.getElementById( 'app' );
var video = document.getElementById( 'video' );
var canvas = document.getElementById( 'canvas' );

/**
* APP / VIDEO STREAM
*/

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
var hint = {};
if (isMobile()) {
hint = {
facingMode: { "ideal": "environment" },
audio: false,
video: {
width: { min: 240, max: 240 },
height: { min: 360, max: 360 },
},
};
}

navigator.mediaDevices.getUserMedia({ video: hint }).then(function (stream) {
video.srcObject = stream;
video.addEventListener("loadedmetadata", function() {
video.play();
start(container, markers["pinball"], video, video.videoWidth, video.videoHeight, canvas_draw, function() {statsMain.update()}, function(){statsWorker.update()}, greyCover);
});
});
}
var hint = {
audio: false,
video: true
};
if( window.innerWidth < 800 ) {
var width = ( window.innerWidth < window.innerHeight ) ? 240 : 360;
var height = ( window.innerWidth < window.innerHeight ) ? 360 : 240;

var aspectRatio = window.innerWidth / window.innerHeight;

console.log( width, height );

hint = {
audio: false,
video: {
facingMode: 'environment',
width: { min: width, max: width }
},
};

console.log( hint );
}

navigator.mediaDevices.getUserMedia( hint ).then( function( stream ) {
video.srcObject = stream;
video.addEventListener( 'loadedmetadata', function() {
video.play();

console.log( 'video', video, video.videoWidth, video.videoHeight );

start(
container,
markers['pinball'],
video,
video.videoWidth,
video.videoHeight,
canvas,
function() {
statsMain.update()
},
function() {
statsWorker.update();
},
null
);
} );
} );
}
</script>
</body>

Expand Down
17 changes: 7 additions & 10 deletions examples/nft_improved_worker/threejs_wasm_worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ var markers = {
"pinball": {
width: 1637,
height: 2048,
dpi: 600,
dpi: 250,
url: "../DataNFT/pinball",
},
};
Expand All @@ -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) {
Expand All @@ -61,16 +61,13 @@ 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);

var scene = new THREE.Scene();

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);

Expand All @@ -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);
Expand Down Expand Up @@ -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;
}

Expand Down
Loading

0 comments on commit dad8edc

Please sign in to comment.