webarkit · kalwalt · Oct 22, 2020 · Oct 27, 2020 · Oct 27, 2020 · Oct 27, 2020
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 node_modules
+
+libs/jsartoolkitNFT
diff --git a/dist/ARnft.js b/dist/ARnft.js
diff --git a/dist/ARnft.js.LICENSE.txt b/dist/ARnft.js.LICENSE.txt
@@ -0,0 +1,14 @@
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
diff --git a/examples/arNFT_babylonjs_example.html b/examples/arNFT_babylonjs_example.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>ARnft example showing an simple red cube</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
+	<link rel="stylesheet" href="css/nft-style.css">
+</head>
+<body>
+
+      <a
+          href="https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg"
+          class="ui marker"
+          target="_blank">
+          🖼 Marker Image
+      </a>
+
+		<script src="https://preview.babylonjs.com/babylon.js"></script>
+		<script src="../dist/ARnft.js"></script>
+
+    <script>
+			ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config-babylonjs.json', 'babylon')
+			.then((nft) => {
+				document.addEventListener('onInitBabylonjsRendering', (ev) => {
+					const scene = ev.detail.scene
+					const root = ev.detail.root
+					 // create a basic light, aiming 0,1,0 - meaning, to the sky
+					const light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene)
+					// create a box
+                    var box = new BABYLON.Mesh.CreateBox('box1', { height: 100 }, this.scene)
+                    //box.isVisible = true;
+                    root.addChild(box)
+				})
+			}).catch((error) => {
+				console.log(error);
+			});
+    </script>
+</body>
+
+</html>
diff --git a/examples/config-babylonjs.json b/examples/config-babylonjs.json
@@ -0,0 +1,29 @@
+{
+  "artoolkitUrl": "libs/jsartoolkitNFT/build/artoolkitNFT_wasm.js",
+  "addPath": "",
+  "cameraPara": "examples/Data/camera_para.dat",
+  "videoSettings": {
+    "width": {
+      "min": 640,
+      "max": 800
+    },
+    "height": {
+      "min": 480,
+      "max": 600
+    },
+    "facingMode": "environment"
+  },
+  "loading": {
+    "logo": {
+      "src": "Data/arNFT-logo.gif",
+      "alt": "arNFT.js logo"
+    },
+    "loadingMessage": "Loading, please wait..."
+  },
+  "renderer": {
+    "type": "babylon",
+    "alpha": true,
+    "antialias": true,
+    "precision": "mediump"
+  }
+}
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "three": "^0.122.0",
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0",
+    "babylonjs": "^4.1.0",
     "worker-loader": "^3.0.4"
   },
   "scripts": {

diff --git a/src/ARnft.js b/src/ARnft.js
@@ -2,16 +2,21 @@ import Utils from './utils/Utils'
 import Container from './utils/html/Container'
 import Stats from 'stats.js'
 import ThreejsRenderer from './renderers/ThreejsRenderer'
+import BabylonjsRenderer from './renderers/BabylonjsRenderer'
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 
 export default class ARnft {
-  constructor (width, height, config) {
+  constructor (width, height, config, renderType) {
     this.width = width
     this.height = height
-    this.root = new THREE.Object3D()
-    this.renderer = null
-    this.root.matrixAutoUpdate = false
+    if (renderType === 'three') {
+      this.renderer = null
+      this.root = new THREE.Object3D()
+      this.root.matrixAutoUpdate = false
+    } else if (renderType === 'babylon') {
+      this.root = null
+    }
     this.config = config
     this.listeners = {}
     this.version = '0.8.1'
@@ -86,6 +91,14 @@ export default class ARnft {
           window.requestAnimationFrame(tick)
         }
         tick()
+      } else if (configData.renderer.type === 'babylon') {
+        const renderer = new BabylonjsRenderer(configData, canvas, root)
+        renderer.initRenderer()
+        const tick = () => {
+          renderer.draw()
+          window.requestAnimationFrame(tick)
+        }
+        tick()
       }
     })
     return this
@@ -106,6 +119,13 @@ export default class ARnft {
     root.add(obj)
   }
 
+  addB () {
+    //let scene = BabylonjsRenderer.getScene()
+    //console.log(scene);
+    //var box = new BABYLON.Mesh.CreateBox("box", {height: 5}, scene)
+    //box.parent = BabylonjsRenderer.getRoot()
+  }
+
   addModel (url, x, y, z, scale) {
     const root = this.root
     let model

diff --git a/src/renderers/BabylonjsRenderer.js b/src/renderers/BabylonjsRenderer.js
@@ -0,0 +1,57 @@
+import * as BABYLON from 'babylonjs'
+import customEvent from 'custom-event'
+import Utils from '../utils/Utils'
+
+export default class BabylonjsRenderer {
+  constructor (configData, canvasDraw, root) {
+    this.root = root
+    this.canvas = canvasDraw
+
+    // load the 3D engine
+    this.engine = new BABYLON.Engine(this.canvas, configData.renderer.antialias, { alpha: configData.renderer.alpha })
+    this.engine.setSize(configData.videoSettings.width.max, configData.videoSettings.height)
+    this.scene = new BABYLON.Scene(this.engine)
+    this.scene.clearColor = new BABYLON.Color4(0.3, 0.3, 0.3, 0.0)
+    this.scene.useRightHandedSystem = true
+    this.camera = null
+  }
+
+  initRenderer () {
+    this.camera = new BABYLON.UniversalCamera('camera1', new BABYLON.Vector3(0, 0, 0), this.scene)
+    this.camera.attachControl(this.canvas, true)
+    document.addEventListener('getProjectionMatrix', (ev) => {
+      // Utils.setMatrix(this.camera.projectionMatrix, ev.detail.proj)
+      this.camera.freezeProjectionMatrix(BABYLON.Matrix.FromArray(ev.detail.proj))
+    })
+    window.camera = this.camera
+
+    const markerRoot = new BABYLON.AbstractMesh('markerRoot', this.scene)
+
+    this.root = markerRoot
+
+    this.root.visibility = 1.0
+
+    document.addEventListener('getMatrixGL_RH', (ev) => {
+      const matrix = Utils.interpolate(ev.detail.matrixGL_RH)
+      this.root.updatePoseMatrix(BABYLON.Matrix.FromArray(matrix))
+      console.log(this.root);
+    })
+
+    document.addEventListener('nftTrackingLost', () => {
+      this.root.visibility = 0.0
+    })
+
+    document.addEventListener('getWindowSize', (ev) => {
+      this.engine.setSize(ev.detail.sw, ev.detail.sh)
+    })
+
+    const setInitBabylonjsRenderer = new CustomEvent('onInitBabylonjsRendering', { detail: { engine: this.engine, scene: this.scene,  camera: this.camera, root: this.root } })
+    document.dispatchEvent(setInitBabylonjsRenderer)
+  }
+
+  draw () {
+    this.engine.runRenderLoop(() => {
+      this.scene.render()
+    })
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -24,6 +24,12 @@ module.exports = {
       commonjs2: 'stats.js',
       amd: 'stats.js',
       root: 'Stats' // indicates global variable
+    },
+    babylonjs: {
+      commonjs: 'babylonjs',
+      commonjs2: 'babylonjs',
+      amd: 'babylonjs',
+      root: 'BABYLON' // indicates global variable
     }
   },
   module: {

diff --git a/yarn.lock b/yarn.lock
@@ -430,6 +430,34 @@ axios@^0.21.0:
   dependencies:
     follow-redirects "^1.10.0"
 
+babel-core@^7.0.0-bridge.0:
+  version "7.0.0-bridge.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
+  integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
+
+babel-loader@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
+  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
+  dependencies:
+    find-cache-dir "^2.1.0"
+    loader-utils "^1.4.0"
+    mkdirp "^0.5.3"
+    pify "^4.0.1"
+    schema-utils "^2.6.5"
+
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+babylonjs@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/babylonjs/-/babylonjs-4.1.0.tgz#a2d1d6765795e9d44f002831554d63d6275394bd"
+  integrity sha512-MnaH1BQIL+PYgqGaAvGVdP8yd7nM1j6sbQi/K/6+RlkHPxIETW2NbjqxiW7Sywgy7r3PwqWT/gxG4Bz95Z6/yA==
+
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"