Extending parameters and methods for ThreejsRenderer

[kalwalt]

ThreejsRenderer improvement

Introduction

As discussed in #139 we will add in this PR other parameters and functionalities to ThreejsRenderer.

We can also add the option to import the rendering options, instead in a separate config.json file, as an json object directly in the ARnft init() function:

ARnft/src/ARnft.js

Lines 85 to 87 in 6920704

	static async init (width, height, markerUrl, config, stats) {
	const nft = new ARnft(width, height, config)
	return await nft._initialize(markerUrl, stats)

something like (not tested):

const configs = {
  "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,
    "precision": "mediump"
  }
}

ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", configs, true)

List of added features:

• onInitThreejsRendering event listener spawned just after the initialization of the renderer, it spawn the renderer, scene and camera objects.
• onAfterInitThreejsRendering event listener spawned after the onInitThreejsRendering it spawn only the renderer obj.
• configuration not only by json file, but also as an object inside the javascript code. see the example above. ☝️

[kalwalt]

Now with the jsonObjParser you can inject custom config also with an obj, in this way:

const configs = {
  "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,
    "precision": "mediump"
  }
}

ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", configs, true)

[kalwalt]

Probably the rendering is affected because the camera used is very basic:

ARnft/src/renderers/ThreejsRenderer.js

Line 15 in 6920704

this.camera = new THREE.Camera()

i will try with a PerspectiveCamera.

[kalwalt]

@brettkromkamp I'm reflecting if i should create another EventListener to dispatch a general object with renderer, scene and camera; this event will be created inside the initRenderer function

ARnft/src/renderers/ThreejsRenderer.js

Line 18 in 6920704

initRenderer () {

Just i need verify if it is possible or not...

[kalwalt]

I think i will delete the getRenderer method:

  _renderGet(ev) {
    this.renderer = ev.detail
    console.log(this.renderer);
  }

  getRenderer () {
    document.addEventListener('getThreejsRenderer', this._renderGet)
  }

not very useful, and i didn't achieve what i had in mind.

[kalwalt]

Maybe getInitThreejsRenderer it s better to rename to onInitThreejsRendering ? or simply onInitRendering

[kalwalt]

I can also add another listener in the draw section, but maybe i can add this after this PR.
If this make sense.

[kalwalt]

@brettkromkamp I think i am fine with it. I wil probably merge this late evening or tomorrow. If you make some test, i would appreciate it. 🙂

[kalwalt]

i'm merging in dev branch. If we will found some bugs we will fix them in dev.