Skip to content

Commit

Permalink
multi example upgrade
Browse files Browse the repository at this point in the history 
- move marker position initialization from draw to onmessage (markerInfos)
- updating thread libs for the examples
  • Loading branch information
@kalwalt
kalwalt committed Oct 24, 2024
1 parent bb6eb43 commit fab5265
Show file tree
Hide file tree
Showing 6 changed files with 135 additions and 114 deletions.
2 changes: 1 addition & 1 deletion examples/js/threading_files/ARToolkitNFT_td.js
View file

Large diffs are not rendered by default.

15 changes: 9 additions & 6 deletions examples/js/threading_files/artoolkitNFT_ES6_wasm_td.js
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion examples/js/threading_files/artoolkitNFT_ES6_wasm_td.worker.js
View file

This file was deleted.

54 changes: 31 additions & 23 deletions examples/multi.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NFT multi 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">
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
}
}
</script>
<link rel="stylesheet" href="css/nft-style.css">
</head>
<body>
<div id="loading" >
<img src="Data/JsartoolkitNFT-logo.gif"/>
<img alt="JsartoolkitNFT logo" src="Data/JsartoolkitNFT-logo.gif"/>
<span class="loading-text">Loading, please wait</span>
</div>
<!--
Expand Down Expand Up @@ -52,38 +60,38 @@
</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_multi_worker.js"></script>

<script>
/**
* STATS
*/
var statsMain = new Stats();
statsMain.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
<script type="module">
import start from './threejs_multi_worker.js'

/**
* STATS
*/
const 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
const 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 / ELEMENTS
*/
const container = document.getElementById('app');
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
/**
* APP / VIDEO STREAM
*/
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
var hint = {
let 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;
const width = (window.innerWidth < window.innerHeight) ? 240 : 360;
const height = (window.innerWidth < window.innerHeight) ? 360 : 240;

var aspectRatio = window.innerWidth / window.innerHeight;
const aspectRatio = window.innerWidth / window.innerHeight;

console.log( width, height );

Expand Down
163 changes: 87 additions & 76 deletions examples/threejs_multi_worker.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import * as THREE from 'three';

function isMobile () {
return /Android|mobile|iPad|iPhone/i.test(navigator.userAgent);
}

var setMatrix = function (matrix, value) {
var array = [];
for (var key in value) {
const array = [];
for (const key in value) {
array[key] = value[key];
}
if (typeof matrix.elements.set === "function") {
Expand All @@ -14,49 +16,59 @@ function isMobile () {
}
};

function start(container, markerUrls, video, input_width, input_height, canvas_draw, render_update, track_update) {
var vw, vh;
var sw, sh;
var pscale, sscale;
var w, h;
var pw, ph;
var ox, oy;
var worker;
var camera_para = './../examples/Data/camera_para.dat'
var canvas_process = document.createElement('canvas');
var context_process = canvas_process.getContext('2d', { willReadFrequently: true });
var renderer = new THREE.WebGLRenderer({ canvas: canvas_draw, alpha: true, antialias: true });
export default function start(container, markerUrls, video, input_width, input_height, canvas_draw, render_update, track_update) {
let vw, vh;
let sw, sh;
let pscale, sscale;
let w, h;
let pw, ph;
let ox, oy;
let worker;
const camera_para = './../examples/Data/camera_para.dat';

const canvas_process = document.createElement('canvas');
const context_process = canvas_process.getContext('2d', {willReadFrequently: true});

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

const scene = new THREE.Scene();

let fov = 0.8 * 180 / Math.PI;
let ratio = input_width / input_height;

const cameraConfig= {
fov: fov,
aspect: ratio,
near: 0.01,
far: 1000
}

const camera = new THREE.PerspectiveCamera(cameraConfig);
camera.matrixAutoUpdate = false;

scene.add(camera);
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(0.5, 8, 8),
new THREE.MeshNormalMaterial()

const sphere = new THREE.Mesh(
new THREE.SphereGeometry(0.5, 8, 8),
new THREE.MeshNormalMaterial()
);

var cube = new THREE.Mesh(
const cube = new THREE.Mesh(
new THREE.BoxGeometry(0.5),
new THREE.MeshNormalMaterial()
);

var cone = new THREE.Mesh(
new THREE.ConeGeometry( 0.5, 1, 32 ),
const cone = new THREE.Mesh(
new THREE.ConeGeometry(0.5, 1, 32),
new THREE.MeshNormalMaterial()
);
var root = new THREE.Object3D();

const root = new THREE.Object3D();
scene.add(root);
var marker1, marker2, marker3;

let marker1, marker2, marker3;

sphere.material.flatShading;
sphere.scale.set(200, 200, 200);

Expand All @@ -72,7 +84,7 @@ function isMobile () {
root.add(cube);
root.add(cone);

var load = function () {
const load = function () {
vw = input_width;
vh = input_height;

Expand Down Expand Up @@ -100,12 +112,12 @@ function isMobile () {
worker.postMessage({ type: "load", pw: pw, ph: ph, camera_para: camera_para, marker: markerUrls });

worker.onmessage = function (ev) {
var msg = ev.data;
const msg = ev.data;
switch (msg.type) {
case "loaded": {
var proj = JSON.parse(msg.proj);
var ratioW = pw / w;
var ratioH = ph / h;
const proj = JSON.parse(msg.proj);
const ratioW = pw / w;
const ratioH = ph / h;
proj[0] *= ratioW;
proj[4] *= ratioW;
proj[8] *= ratioW;
Expand All @@ -118,9 +130,9 @@ function isMobile () {
break;
}
case "endLoading": {
if (msg.end == true) {
if (msg.end === true) {
// removing loader page if present
var loader = document.getElementById('loading');
const loader = document.getElementById('loading');
if (loader) {
loader.querySelector('.loading-text').innerText = 'Start the tracking!';
setTimeout(function(){
Expand All @@ -140,18 +152,25 @@ function isMobile () {
}
case 'markerInfos': {
marker1 = msg.marker1;
sphere.position.y = ((marker1.height / marker1.dpi) * 2.54 * 10) / 2.0;
sphere.position.x = ((marker1.width / marker1.dpi) * 2.54 * 10) / 2.0;
marker2 = msg.marker2;
cube.position.y = ((marker2.height / marker2.dpi) * 2.54 * 10) / 2.0;
cube.position.x = ((marker2.width / marker2.dpi) * 2.54 * 10) / 2.0;
marker3 = msg.marker3;
cone.position.y = ((marker3.height / marker3.dpi) * 2.54 * 10) / 2.0;
cone.position.x = ((marker3.width / marker3.dpi) * 2.54 * 10) / 2.0;

}
}
track_update();
process();
};
};
var world;
var found = function (msg) {

let world, index;

const found = function (msg) {
if (!msg) {
world = null;
} else {
Expand All @@ -160,61 +179,53 @@ function isMobile () {
}
};

var lasttime = Date.now();
var time = 0;
var draw = function () {
let lasttime = Date.now();
let time = 0;

const draw = function () {
render_update();
var now = Date.now();
var dt = now - lasttime;
const now = Date.now();
const dt = now - lasttime;
time += dt;
lasttime = now;
if (!world) {

if (!world) {
sphere.visible = false;
cube.visible = false;
cone.visible = false;
} else {
if (index == 0) {
sphere.visible = true;
sphere.position.y = ((marker1.height / marker1.dpi) * 2.54 * 10) / 2.0;
sphere.position.x = ((marker1.width / marker1.dpi) * 2.54 * 10) / 2.0;
cube.visible = false;
cone.visible = false;
}
else if(index == 1) {
sphere.visible = false;
cube.visible = true;
cube.position.y = ((marker2.height / marker2.dpi) * 2.54 * 10) / 2.0;
cube.position.x = ((marker2.width / marker2.dpi) * 2.54 * 10) / 2.0;
cone.visible = false;
}
else if(index == 2) {
sphere.visible = false;
cube.visible = false;
cone.visible = true;
cone.position.y = ((marker3.height / marker3.dpi) * 2.54 * 10) / 2.0;
cone.position.x = ((marker3.width / marker3.dpi) * 2.54 * 10) / 2.0;
sphere.visible = true;
cube.visible = false;
cone.visible = false;
} else if (index == 1) {
sphere.visible = false;
cube.visible = true;
cone.visible = false;
} else if (index == 2) {
sphere.visible = false;
cube.visible = false;
cone.visible = true;
}
// set matrix of 'root' by detected 'world' matrix
setMatrix(root.matrix, world);
}
renderer.render(scene, camera);
};
var process = function () {

const process = function () {
context_process.fillStyle = 'black';
context_process.fillRect(0, 0, pw, ph);
context_process.drawImage(video, 0, 0, vw, vh, ox, oy, w, h);
var imageData = context_process.getImageData(0, 0, pw, ph);

const imageData = context_process.getImageData(0, 0, pw, ph);
worker.postMessage({ type: 'process', imagedata: imageData }, [imageData.data.buffer]);
}
var tick = function () {
const tick = function () {
draw();
requestAnimationFrame(tick);
};

load();
tick();
process();
Expand Down
14 changes: 7 additions & 7 deletions examples/threejs_multi_worker_ES6.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function start(markerUrls, video, input_width, input_height, rend
const camera = new THREE.Camera();
camera.matrixAutoUpdate = false;

scene.add(camera);
scene.add(camera);

const sphere = new THREE.Mesh(
new THREE.SphereGeometry(0.5, 8, 8),
Expand Down Expand Up @@ -143,8 +143,14 @@ export default function start(markerUrls, video, input_width, input_height, rend
}
case 'markerInfos': {
marker1 = msg.marker1;
sphere.position.y = ((marker1.height / marker1.dpi) * 2.54 * 10) / 2.0;
sphere.position.x = ((marker1.width / marker1.dpi) * 2.54 * 10) / 2.0;
marker2 = msg.marker2;
cube.position.y = ((marker2.height / marker2.dpi) * 2.54 * 10) / 2.0;
cube.position.x = ((marker2.width / marker2.dpi) * 2.54 * 10) / 2.0;
marker3 = msg.marker3;
cone.position.y = ((marker3.height / marker3.dpi) * 2.54 * 10) / 2.0;
cone.position.x = ((marker3.width / marker3.dpi) * 2.54 * 10) / 2.0;
}
}
track_update();
Expand Down Expand Up @@ -180,22 +186,16 @@ export default function start(markerUrls, video, input_width, input_height, rend
} else {
if (index === 0) {
sphere.visible = true;
sphere.position.y = ((marker1.height / marker1.dpi) * 2.54 * 10) / 2.0;
sphere.position.x = ((marker1.width / marker1.dpi) * 2.54 * 10) / 2.0;
cube.visible = false;
cone.visible = false;
} else if (index === 1) {
sphere.visible = false;
cube.visible = true;
cube.position.y = ((marker2.height / marker2.dpi) * 2.54 * 10) / 2.0;
cube.position.x = ((marker2.width / marker2.dpi) * 2.54 * 10) / 2.0;
cone.visible = false;
} else if (index === 2) {
sphere.visible = false;
cube.visible = false;
cone.visible = true;
cone.position.y = ((marker3.height / marker3.dpi) * 2.54 * 10) / 2.0;
cone.position.x = ((marker3.width / marker3.dpi) * 2.54 * 10) / 2.0;
}
// set matrix of 'root' by detected 'world' matrix
setMatrix(root.matrix, world);
Expand Down

0 comments on commit fab5265

Please sign in to comment.