Skip to content

Commit

Permalink
upgrading basic and basic_embed_ES6 examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@kalwalt
kalwalt committed Oct 24, 2024
1 parent b008e25 commit 799ccfd
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 128 deletions.
54 changes: 31 additions & 23 deletions examples/basic.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 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_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_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
54 changes: 31 additions & 23 deletions examples/basic_embed_ES6.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 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_worker_embed_ES6.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_worker_embed_ES6.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
83 changes: 43 additions & 40 deletions examples/threejs_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 setMatrix = function (matrix, value) {
const array = [];
for (const key in value) {
array[key] = value[key];
}
if (typeof matrix.elements.set === "function") {
Expand All @@ -14,46 +16,46 @@ var setMatrix = function (matrix, value) {
}
};

function start(container, markerUrl, 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'
export default function start(container, markerUrl, 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';

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

var renderer = new THREE.WebGLRenderer({ canvas: canvas_draw, alpha: true, antialias: true });
const renderer = new THREE.WebGLRenderer({canvas: canvas_draw, alpha: true, antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);

var scene = new THREE.Scene();
const scene = new THREE.Scene();

var camera = new THREE.Camera();
const camera = new THREE.Camera();
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 root = new THREE.Object3D();
const root = new THREE.Object3D();
scene.add(root);

var marker;
let marker;

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

root.matrixAutoUpdate = false;
root.add(sphere);

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

Expand All @@ -78,15 +80,15 @@ function start(container, markerUrl, video, input_width, input_height, canvas_dr

worker = new Worker('../js/artoolkitNFT.worker.js');

worker.postMessage({ type: "load", pw: pw, ph: ph, camera_para: camera_para, marker: markerUrl });
worker.postMessage({type: "load", pw: pw, ph: ph, camera_para: camera_para, marker: markerUrl});

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 @@ -99,12 +101,12 @@ function start(container, markerUrl, video, input_width, input_height, canvas_dr
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(){
setTimeout(function () {
loader.parentElement.removeChild(loader);
}, 2000);
}
Expand All @@ -128,23 +130,23 @@ function start(container, markerUrl, video, input_width, input_height, canvas_dr
};
};

var world;
let world;

var found = function (msg) {
const found = function (msg) {
if (!msg) {
world = null;
} else {
world = JSON.parse(msg.matrixGL_RH);
}
};

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

var draw = function () {
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;

Expand All @@ -160,15 +162,16 @@ function start(container, markerUrl, video, input_width, input_height, canvas_dr
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);
worker.postMessage({ type: 'process', imagedata: imageData }, [imageData.data.buffer]);
}
var tick = function () {

const tick = function () {
draw();
requestAnimationFrame(tick);
};
Expand Down
Loading

0 comments on commit 799ccfd

Please sign in to comment.