Merge pull request #143 from webarkit/feature-extends-threejsrenderer

Extending parameters and methods for ThreejsRenderer
webarkit · Dec 6, 2020 · 801efb6 · 801efb6
2 parents 628c329 + 4bce356
commit 801efb6
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 9 deletions.
diff --git a/dist/ARnft.js b/dist/ARnft.js
diff --git a/examples/Data/models/brave_robot/gLTF/brave_robot.glb b/examples/Data/models/brave_robot/gLTF/brave_robot.glb
diff --git a/examples/arNFT_gltf_brave_robot_example.html b/examples/arNFT_gltf_brave_robot_example.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>ARnft example with a gltf model</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="js/third_party/three.js/three.min.js"></script>
+		<script src="../dist/ARnft.js"></script>
+
+    <script>
+			ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config_brave_robot.json', true, true)
+			.then((nft) => {
+				document.addEventListener('onInitThreejsRendering', (ev) => {
+					console.log(ev.detail);
+					const renderer = ev.detail.renderer;
+					console.log(renderer);
+					const scene = ev.detail.scene;
+					console.log(scene);
+					const camera = ev.detail.camera;
+					console.log(camera);
+					renderer.outputEncoding = THREE.sRGBEncoding;
+					renderer.physicallyCorrectLights = true;
+					let directionalLight = new THREE.DirectionalLight('#fff', 0.4);
+					directionalLight.position.set(0.5, 0, 0.866);
+					scene.add(directionalLight)
+				})
+				document.addEventListener('onAfterInitThreejsRendering', (ev) => {			
+				    // set here extra rendering settings after onInitThreejsRendering
+					console.log('onAfterInitThreejsRendering is emitted after onInitThreejsRendering!');
+				})
+				nft.addModel('./Data/models/brave_robot/gLTF/brave_robot.glb', 40, 80, 80, 80);
+			}).catch((error) => {
+				console.log(error);
+			});
+    </script>
+</body>
+
+</html>
diff --git a/examples/config_brave_robot.json b/examples/config_brave_robot.json
@@ -0,0 +1,40 @@
+{
+    "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": "three",
+      "alpha": true,
+      "antialias": true,
+      "context": null,
+      "precision": "mediump",
+      "premultipliedAlpha": true,
+      "stencil": true,
+      "depth": true,
+      "logarithmicDepthBuffer": true
+    },
+    "camera": {
+      "fov": "0.8 * 180 / Math.PI",
+      "ratio": "window.clientWidth / window.clientHeight",
+      "near": 0.01,
+      "far": 1000
+    }
+  }
+
diff --git a/src/ARnft.js b/src/ARnft.js
@@ -10,18 +10,24 @@ export default class ARnft {
     this.width = width
     this.height = height
     this.root = new THREE.Object3D()
+    this.renderer = null
     this.root.matrixAutoUpdate = false
     this.config = config
     this.listeners = {}
     this.version = '0.8.1'
     console.log('ARnft ', this.version)
   }
 
-  _initialize (markerUrl, stats) {
+  _initialize (markerUrl, stats, camera) {
     console.log('ARnft init() %cstart...', 'color: yellow; background-color: blue; border-radius: 4px; padding: 2px')
     const root = this.root
     const config = this.config
-    const data = Utils.jsonParser(config)
+    let data
+    if (typeof(config) == 'object') {
+      data = Utils.jsonObjParser(config)
+    } else {
+      data = Utils.jsonParser(config)
+    }
 
     data.then((configData) => {
       Container.createLoading(configData)
@@ -70,8 +76,11 @@ export default class ARnft {
       })
 
       if (configData.renderer.type === 'three') {
-        const renderer = new ThreejsRenderer(configData, canvas, root)
+        const renderer = new ThreejsRenderer(configData, canvas, root, camera)
         renderer.initRenderer()
+        this.renderer = renderer
+        const setRendererEvent = new CustomEvent('onAfterInitThreejsRendering', { detail: { renderer: renderer } })
+        document.dispatchEvent(setRendererEvent)
         const tick = () => {
           renderer.draw()
           window.requestAnimationFrame(tick)
@@ -82,9 +91,9 @@ export default class ARnft {
     return this
   }
 
-  static async init (width, height, markerUrl, config, stats) {
+  static async init (width, height, markerUrl, config, stats, camera) {
     const nft = new ARnft(width, height, config)
-    return await nft._initialize(markerUrl, stats)
+    return await nft._initialize(markerUrl, stats, camera)
   }
 
   add (obj) {

diff --git a/src/renderers/ThreejsRenderer.js b/src/renderers/ThreejsRenderer.js
@@ -2,17 +2,26 @@ import * as THREE from 'three'
 import Utils from '../utils/Utils'
 
 export default class ThreejsRenderer {
-  constructor (configData, canvasDraw, root) {
+  constructor (configData, canvasDraw, root, camera) {
     this.root = root
     this.renderer = new THREE.WebGLRenderer({
       canvas: canvasDraw,
+      context: configData.renderer.context,
       alpha: configData.renderer.alpha,
+      premultipliedAlpha: configData.renderer.premultipliedAlpha,
       antialias: configData.renderer.antialias,
-      precision: configData.renderer.precision
+      stencil: configData.renderer.stencil,
+      precision: configData.renderer.precision,
+      depth: configData.renderer.depth,
+      logarithmicDepthBuffer: configData.renderer.logarithmicDepthBuffer
     })
     this.renderer.setPixelRatio(window.devicePixelRatio)
     this.scene = new THREE.Scene()
-    this.camera = new THREE.Camera()
+    if (camera === true) {
+      this.camera = new THREE.PerspectiveCamera( configData.camera.fov, configData.camera.ratio, configData.camera.near, configData.camera.far );
+    } else {
+      this.camera = new THREE.Camera()
+    }
   }
 
   initRenderer () {
@@ -41,6 +50,9 @@ export default class ThreejsRenderer {
     document.addEventListener('getWindowSize', (ev) => {
       this.renderer.setSize(ev.detail.sw, ev.detail.sh)
     })
+
+    const setInitRendererEvent = new CustomEvent('onInitThreejsRendering', { detail: { renderer: this.renderer, scene: this.scene,  camera: this.camera } })
+    document.dispatchEvent(setInitRendererEvent)
   }
 
   draw () {

diff --git a/src/utils/Utils.js b/src/utils/Utils.js
@@ -299,4 +299,9 @@ export default class Utils {
       .catch((error) => { console.error(error) })
     return response
   }
+
+  static async jsonObjParser (obj) {
+    const response = await obj
+    return response
+  }
 }