Skip to content

Extending parameters and methods for ThreejsRenderer#143

Merged
kalwalt merged 19 commits intodevfrom
feature-extends-threejsrenderer
Dec 6, 2020
Merged

Extending parameters and methods for ThreejsRenderer#143
kalwalt merged 19 commits intodevfrom
feature-extends-threejsrenderer

Conversation

@kalwalt
Copy link
Copy Markdown
Member

@kalwalt kalwalt commented Dec 1, 2020

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 kalwalt added 🚀 enhancement New feature or request Three.js WIP issue or PR Works In Progress labels Dec 1, 2020
@kalwalt kalwalt self-assigned this Dec 1, 2020
@kalwalt kalwalt marked this pull request as draft December 1, 2020 13:38
@kalwalt kalwalt changed the title extending paramters for the ThreejsRenderer Extending parameters and methods for ThreejsRenderer Dec 1, 2020
@kalwalt kalwalt mentioned this pull request Dec 1, 2020
Comment thread examples/arNFT_gltf_brave_robot_example.html Outdated
Comment thread src/ARnft.js
Comment thread src/ARnft.js Outdated
@kalwalt
Copy link
Copy Markdown
Member Author

kalwalt commented Dec 1, 2020

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
Copy link
Copy Markdown
Member Author

kalwalt commented Dec 2, 2020

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

this.camera = new THREE.Camera()

i will try with a PerspectiveCamera.

@kalwalt kalwalt marked this pull request as ready for review December 2, 2020 14:44
@kalwalt
Copy link
Copy Markdown
Member Author

kalwalt commented Dec 2, 2020

@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

initRenderer () {

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

@kalwalt
Copy link
Copy Markdown
Member Author

kalwalt commented Dec 2, 2020

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
Copy link
Copy Markdown
Member Author

kalwalt commented Dec 4, 2020

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

Comment thread examples/arNFT_gltf_brave_robot_example.html
Comment thread examples/arNFT_gltf_brave_robot_example.html
@kalwalt
Copy link
Copy Markdown
Member Author

kalwalt commented Dec 6, 2020

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

Comment thread examples/arNFT_gltf_brave_robot_example.html
@kalwalt
Copy link
Copy Markdown
Member Author

kalwalt commented Dec 6, 2020

@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
Copy link
Copy Markdown
Member Author

kalwalt commented Dec 6, 2020

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

@kalwalt kalwalt merged commit 801efb6 into dev Dec 6, 2020
@kalwalt kalwalt deleted the feature-extends-threejsrenderer branch April 9, 2021 21:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🚀 enhancement New feature or request Three.js WIP issue or PR Works In Progress

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant