kalwalt · kalwalt · Apr 7, 2020 · Apr 5, 2020 · Apr 5, 2020 · Apr 5, 2020
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ _site
 .bundle
 vendor
 Gemfile.lock
+node_modules
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,20 @@
+/*global module,require */
+module.exports = function(grunt) {
+  "use strict";
+
+  var pkg = grunt.file.readJSON("package.json");
+
+  grunt.initConfig({
+    pkg: pkg,
+
+    terser: {
+      options: {},
+      dist: {
+        src: "resources/js/nftLoader/nftLoader.js",
+        dest: "resources/build/nftLoader/nftLoader.min.js"
+      }
+    }
+  });
+
+  grunt.loadNpmTasks("grunt-terser");
+};
diff --git a/index.html b/index.html
@@ -83,10 +83,14 @@ <h4 class="title has-text-centered">Jsartoolkit5 NFT experiments</h4>
 										<li><a href="nft/nft.html">Nft simple example</a></li>
 										<li><a href="nft/nft_duck.html">Nft example and gltf model (Duck)</a></li>
 										<li><a href="nft/nft_cesium.html">Nft example and gltf model (CesiumMan)</a></li>
+										<br>
+										<p>WebApp with the new nftLoader utility</p>
 										<li><a href="nft/nft_cubist_dragon.html">Nft example with cubist-dragon.jpg</a></li>
 										<li><a href="nft/nft_pinball_video.html">Nft example with pinball.jpg and a video</a></li>
 										<li><a href="nft/nft_pinball_image.html">Nft example with pinball.jpg and an image</a></li>
 										<li><a href="nft/nft_pinball_cube.html">Nft example with pinball.jpg and a cube</a></li>
+										<br>
+										<p>Other examples and tests...</p>
 										<li><a href="nft/nft_pinball_mixed.html">Nft example with pinball.jpg and hiro marker</a></li>
 										<li><a href="nft/nft_threejs_filter_worker_gltf.html">Nft example with pinball.jpg and a gltf model with new filtering</a></li>
                     <li><a href="nft/nft_threejs_worker_Duck_gltf.html">Nft example with pinball.jpg and a gltf model with new positioning</a></li>

diff --git a/nft/config.json b/nft/config.json
@@ -0,0 +1,17 @@
+{
+  "workerUrl": "../resources/jsartoolkit5/artoolkit/artoolkit_nft.worker.js",
+  "artoolkitUrl": "../standard/artoolkit.min.js",
+  "cameraPara": "../../../resources/data/camera_para.dat",
+  "loading": {
+    "logo": {
+      "src": "../resources/data/logo.gif",
+      "alt": "ar.js logo"
+    },
+    "loadingMessage": "Loading, please wait..."  
+  },
+  "renderer": {
+    "alpha": true,
+    "antialias": true,
+    "precision": "mediump"
+  }
+}
diff --git a/nft/nftLoader.js → nft/nftLoader_light.js b/nft/nftLoader.js → nft/nftLoader_light.js
diff --git a/nft/nft_cubist_dragon.html b/nft/nft_cubist_dragon.html
@@ -2,134 +2,41 @@
 <head>
 <title>NFT marker example with Three.js</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
-<link rel="stylesheet" type="text/css" href="../resources/css/video-style.css">
+<link rel="stylesheet" type="text/css" href="../resources/css/nft-style.css">
 </head>
-<body class="loading">
-	<div id="loading" >
-			<img alt="ar.js logo" src="../resources/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>
-			<!--
-			==================
-			CAMERA VIDEO & CANVAS
-			==================
-			-->
-
-			    <div id="app">
-			        <video
-			            loop
-			            autoplay
-			            muted
-			            playsinline
-			            id="video">
-			        </video>
-
-			        <canvas id="canvas"></canvas>
-			    </div>
-
-
-<script src="../resources/three.min.js"></script>
-<script src="../resources/js/libs/stats.min.js"></script>
-<script src="threejs_worker_cubist_dragon.js"></script>
-<script>
-/**
- * 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 = {
- 					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['cubist'],
- 									video,
- 									video.videoWidth,
- 									video.videoHeight,
- 									canvas,
- 									function() {
- 											statsMain.update()
- 									},
- 									function() {
- 											statsWorker.update();
- 									}
- 							);
- 					} );
- 			} ).catch(function(err) {
-
-			 console.log(err.name + ": " + err.message);
-
-		 });
- 	}
-</script>
+<body>
+  <script src="../resources/three.min.js"></script>
+  <script src="../resources/js/libs/stats.min.js"></script>
+  <script src="../resources/build/nftLoader/nftLoader.min.js"></script>
+  <script>
+
+	var nftLoader = new NFTLoader(640, 480, 'config.json');
+
+	nftLoader.init("../../dataNFT/cubist-dragon", true);
+
+	var videoScene = document.createElement('video');
+	videoScene.muted = true
+	videoScene.src = '../resources/data/videos/cubic-dragon-background01e.mp4';
+	videoScene.play();
+	videoScene.loop = true;
+	videoScene.autoplay = true;
+	window.videoScene = videoScene
+
+	var texture = new THREE.VideoTexture( videoScene );
+	texture.minFilter = THREE.LinearFilter;
+	texture.magFilter = THREE.LinearFilter;
+	texture.format = THREE.RGBFormat;
+
+	var mat = new THREE.MeshBasicMaterial({map: texture, side: THREE.DoubleSide});
+	var planeGeom = new THREE.PlaneGeometry(1,1,1,1);
+	var plane = new THREE.Mesh(planeGeom, mat);
+	plane.position.x = 90;
+	plane.position.y = 65;
+	plane.scale.set(180,130,1);
+
+	nftLoader.add(plane);
+
+  </script>
 
 </body>
 </html>
diff --git a/nft/nft_pinball_cube.html b/nft/nft_pinball_cube.html
@@ -2,127 +2,28 @@
 <head>
 <title>NFT marker example with Three.js</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
-<link rel="stylesheet" type="text/css" href="../resources/css/video-style.css">
+<link rel="stylesheet" type="text/css" href="../resources/css/nft-style.css">
 </head>
 <body>
-	<div id="loading">
-		<img alt="ar.js logo" src="../resources/data/logo.gif" />
-		<span class="loading-text">Loading, please wait</span>
-	</div>
+	<a
+		href="https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg"
+		class="ui marker"
+		target="_blank">
+		🖼 Marker Image
+	</a>
 
-	    <!--
-	  ==================
-	  STATS
-	  ==================
-	  -->
+  <script src="../resources/three.min.js"></script>
+  <script src="../resources/js/libs/stats.min.js"></script>
+  <script src="../resources/js/GLTFLoader.js"></script>
+  <script src="../resources/build/nftLoader/nftLoader.min.js"></script>
+  <script>
 
-	    <div id="stats" class="ui stats">
-	      <div id="stats1" class="stats-item">
-	        <p class="stats-item-title">
-	          Main
-	        </p>
-	      </div>
+  var nftLoader = new NFTLoader(640, 480, 'config.json');
 
-	      <div id="stats2" class="stats-item">
-	        <p class="stats-item-title">
-	          Worker
-	        </p>
-	      </div>
-	    </div>
-			<!--
-				==================
-				CAMERA VIDEO & CANVAS
-				==================
-				-->
+  nftLoader.init("../../dataNFT/pinball", true);
+  nftLoader.loadModel('../resources/models/cube/cube.glb', 40, 40, 0, 80);
 
-			<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="../resources/three.min.js"></script>
-<script src="../resources/js/libs/stats.min.js"></script>
-<script src="../resources/js/GLTFLoader.js"></script>
-<script src="threejs_worker_pinball_cube.js"></script>
-<script>
-/**
- * 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");
-
-if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-	var hint = {
-		audio: false,
-		video: true
-	};
-
-	if( window.innerWidth < 800 ) {
-			let width = ( window.innerWidth < window.innerHeight ) ? 240 : 360;
-			let height = ( window.innerWidth < window.innerHeight ) ? 360 : 240;
-
-			let 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();
-
-			start(
-				container,
-				markers["pinball"],
-				video,
-				video.videoWidth,
-				video.videoHeight,
-				canvas,
-				function() {
-					statsMain.update();
-				},
-				function() {
-					statsWorker.update();
-				},
-				null
-			);
-		});
-	}).catch(function(err) {
-
-	 console.log(err.name + ": " + err.message);
-
- });
-}
-</script>
+  </script>
 
 </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,3 +2,4 @@ _site @@
     .bundle
     vendor
     Gemfile.lock
+    node_modules