Is (or will be) Nexus compliant with the current Three.JS ES6 module approach?

[Albanbrice]

I am trying to convert my old fashioned scripting to the 'new' way ( i.e. ES6 module...) as soon as some of the THREE.JS official controls (orbits, transform) will be deprecated in there current shape this december. Moreover, I wanted to take advantage of the UI managment and DOM rendering allowed by the combination of some famous framework (React, in instance) and bundler (Parcel). I am not an experimented dev, so, before to start an endless fight and search on coding, I'd like to know if anyone here was able to build such a 3D app with NEXUS capacities ( It's quite straightforward with GLTF [ see https://discoverthreejs.com/ ] but I really need to load heavy photogrammetric and textured models in three.js...so Nexus is mandatory) At my stage I couldn't manage to go farther than exporting / importing NexusObject.. and get stuck on Worker loading (corto, etc)... and am afraid to face some asynchronous loading issues on the end... Any hints?

Many thanks in advance

[ponchio]

Hi, i will try to clean-up the module compatibility of Nexus (i made some tests, but never committed properly), and commit a decent example.

Federico

On Mon, Nov 9, 2020 at 4:04 PM archeo3d notifications@github.com wrote:

I am trying to convert my old fashioned scripting to the 'new' way ( i.e. ES6 module...) as soon as some of the THREE.JS official controls (orbits, transform) will be deprecated in there current shape this december. Moreover, I wanted to take advantage of the UI managment and DOM rendering allowed by the combination of some famous framework (React, in instance) and bundler (Parcel). I am not an experimented dev, so, before to start an endless fight and search on coding, I'd like to know if anyone here was able to build such a 3D app with NEXUS capacities ( It's quite straightforward with GLTF [ see https://discoverthreejs.com/ ] but I really need to load heavy photogrammetric and textured models in three.js...so Nexus is mandatory) At my stage I couldn't manage to go farther than exporting / importing NexusObject.. and get stuck on Worker loading (corto, etc)... and am afraid to face some asynchronous loading issues on the end... Any hints?

Many thanks in advance

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cnr-isti-vclab/nexus/issues/85, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUDV22Q6QTUZW2NWCKSD5LSPAAHDANCNFSM4TPORW4A .

[Albanbrice]

Thanks,

For the record, here is a report of my trials n' errors so far :

1. I managed to manually pass the worker's URL from nexus.js, since the function getWorkerURL() leads me to an error (I bet my bundler, Parcel, doesn't properly parse the url)

SyntaxError: WorkerGlobalScope.importScripts: Failed to load worker script at "corto.em.js" 
...
Texture loading error!

2. After I got the URL fixed, I face another problem in corto.em.js :

RangeError: attempting to construct out-of-bounds TypedArray on ArrayBuffer

that leads me to this line from the js file mentioned :

geometry.position = new Float32Array(new Float32Array(heap.buffer, pptr, nvert*3));

and now, for sure, I am stuck...

Anyway, thanks in advance

Alban

[ponchio]

I have reimplemented from scratch threejs support, with some performance improvement, and a less hackish approach.

Would you beta test it for me?

You can find it in the threejsES6 branch in the webpack directory, with a small README.md with the 2 commands you need to run to install threejs and build the app.

There will be some problems if you want to change the materials parameters: NXS is a subclass of Objec3D and material at the moment is an array with 1 material inside, if the model has no textures you can safely change the parameters, but it wont work for materials with textures, you will need to edit NXS.js createMaterials, for the moment. This will be cleaned up next week.

Feel free to contact me for any support.

On Wed, Nov 11, 2020 at 11:07 AM archeo3d notifications@github.com wrote:

Thanks,

For the record, here is a report of my trials n' errors so far :

1. I managed to manually pass the worker's URL from nexus.js, since the function getWorkerURL() leads me to an error (I bet my bundler, Parcel, doesn't properly parse the url)

SyntaxError: WorkerGlobalScope.importScripts: Failed to load worker script at "corto.em.js" ... Texture loading error!

1. After I got the URL fixed, I face another problem in corto.em.js :

RangeError: attempting to construct out-of-bounds TypedArray on ArrayBuffer

that leads me to this line from the js file mentioned :

geometry.position = new Float32Array(new Float32Array(heap.buffer, pptr, nvert*3));

and now, for sure, I am stuck...

Anyway, thanks in advance

Alban

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/cnr-isti-vclab/nexus/issues/85#issuecomment-725330937, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUDV27R2AQO5VDTYH5USWTSPJO55ANCNFSM4TPORW4A .

[Albanbrice]

Thanks a lot for the quick answer and the update of the repo!

Here is the first step ...

Short answer : it (your gargoyle example) works !

Long answer : as a newbie on ES6, I never used Webpack (Instead I prefered to choose Parcel for the simplicity), so I struggled a bit. This is what I did, but probably there's something more straighforward, since the two commands were not sufficient to run the demo on my installation (webpack-cli installation had to be declared, the automatic installation along webpack install didn't went well). Here is the commands from my console historic, and sorry in advance for the confusion, if there are :

npm install -save three

npm install -save webpack webpack-cli

npm install webpack-dev-server --save-dev

npx webpack --mode development

then add this to the package.json

"scripts": {
  "start:dev": "webpack-dev-server"
}

npm run start:dev

etc.

Next steps :

• I'm gonna test your implementation with my 1Gb textured model, and try to figure out how to update the createMaterial accordingly
• transpose this webpack to my parcel environment...

then report here for the progress...

thanks again !

[ponchio]

I have fixed a few issues with the cache (you can set the cache size at the beginning of cache.js, actually set to 512 MB). The material now can be changed easily (just set the material or change some parameter and set needsUpdate to true), A debug option for NXS will show the patches (in green when the highest resolution is reached. And finally a Monitor class that will keep track of some statistics (error, triangle rendered, cache etc.) to be finished.

[Albanbrice]

Thanks,

• Testing the gargoyle example (which works fine), I noticed a problem related to the width value of the canvas or the monitor's CSS, that leads to extend a flickering scrollbar / black background to the whole window (and therefore hide the scene) . That happens with Firefox, not Chrome (Win64).

• The installation works fine (when the workspace is set inside the /webpack/ folder, not at the root of the branch.. which I mistakenly did a couple of time). Apparently the package.json edit is not mandatory, since the webpack-dev-server adds the script lines automatically.

• Sorry but I am confused about how to set the materials from the NXS function. Do you have any example with textures? I tried with a model derived from a obj (converted to nxz) with 2 materials (1 with texture, 1 with color only). I tried to declare the material that way :

this.material = [new THREE.MeshBasicMaterial( { color: 0xff0000 } )];

and I just get that error :

Uncaught (in promise) TypeError: Window.createImageBitmap: 2 is not a valid argument count for any overload.

• So far, I was able to load a nxz derived from PLY (vertex color only). Works pretty fine, but the Show patches checkbox doesn't update on toggling back to disable/enable, unless a click event is triggered on the 3d scene.

[ponchio]

I didn't test it on Firefox my bad.

Anyway, the box-sizing model has sure some quirks, shouldn't flicker anymore.

Sorry about the material, I didn't told you explicitly that I fixed the material problems and it's not needed anymore to use an array of materials, so you can just use:

nexus.material = new MeshBasicMaterial( { color: 0xff0000 } );

You actually don't need to set up a material as the NXS will create a standard material by itself, unless you want to set some different parameter such as the color or specularity. Models with textures should work, had to make a workaround for Firefox:

About the createImageBitmap: Firefox does not respect the spets and does not support options (I need the flipY option), but luckily it reverses the image by default! So I added some browser detection (hoping it works properly), and should be fixed.

Using the show patches checkbox triggers a redraw and don't let you puzzled the first time :)

[Albanbrice]

Ok, nice! here some feedbacks with different models. I set the cache to 2048...

1. mesh with vertex colors only. nxz (~200MB) from ply (~45M faces).

• Firefox the monitor is still flickering depending on the window size, but the render is complete and smooth

  cache = 116 MB
  err = real 2px / targ 2px
  fps = 30
  rendered = 1.7M
  target err = 2px

• Chrome

  
  cache = 21MB
  err = real 15.2px / targ 15px
  fps = 10
  rendered = 250K
  target err = 2px

**2. mesh with texture. nxz (~85MB) from obj (~6M faces) with a 8K texture**
- Firefox doesn't work;

- Chrome
Almost fine, but slow and some patches are rendered with default white color instead of the textures  (same console errors than below)

cache =70MB err = real 19px / targ 15px fps = 9 rendered = ~500K target err = 2px

**3. mesh with about 30 textures. nxz (~600MB) from obj, 8K textures**
- Chrome
Most patches rendered with their textures, some rendered in default white, others aren't rendered at all

cache =300MB err = real 4px / targ 4px fps = 7-15 fps rendered = ~100K target err = 2px

console gets some errors :

Uncaught ReferenceError: t is not defined at Cache.recoverNode (cache.js:197) at XMLHttpRequest.eval (cache.js:167)

GET http://localhost:8080/dist/models/orco.nxz net::ERR_CACHE_OPERATION_NOT_SUPPORTED

[ponchio]

Could you send me the samples? I will test them on different computers with different capabilities, and try to understand what's going on. Your operating system, and browser versions would help if I want to replicate the issues...

The last error (3. t is not defined) was a stupid typo. Recovering a nodet happens only when a networdk request failed and should not really happen on localhost (here the problem seem the browser cache! I hope I can replicate the very strange issue).

On Wed, Nov 18, 2020 at 3:05 PM archeo3d notifications@github.com wrote:

Ok, nice! here some feedbacks with different models. I set the cache to 2048...

1. mesh with vertex colors only. nxz (~200MB) from ply (~45M faces).

• Firefox the monitor is still flickering depending on the window size, but the render is complete and smooth

cache = 116 MB err = real 2px / targ 2px fps = 30 rendered = 1.7M target err = 2px

• Chrome

cache = 21MB err = real 15.2px / targ 15px fps = 10 rendered = 250K target err = 2px

2. mesh with texture. nxz (~85MB) from obj (~6M faces) with a 8K texture

-

Firefox doesn't work;

Chrome Almost fine, but slow and some patches are rendered with default white color instead of the textures (same console errors than below)

cache =70MB err = real 19px / targ 15px fps = 9 rendered = ~500K target err = 2px

3. mesh with about 30 textures. nxz (~600MB) from obj, 8K textures

• Chrome Most patches rendered with their textures, some rendered in default white, others aren't rendered at all

cache =300MB err = real 4px / targ 4px fps = 7-15 fps rendered = ~100K target err = 2px

console gets some errors :

Uncaught ReferenceError: t is not defined at Cache.recoverNode (cache.js:197) at XMLHttpRequest.eval (cache.js:167)

GET http://localhost:8080/dist/models/orco.nxz net::ERR_CACHE_OPERATION_NOT_SUPPORTED

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/cnr-isti-vclab/nexus/issues/85#issuecomment-729699331, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUDV23NDJL6JRX6F3Z4DMLSQPIENANCNFSM4TPORW4A .

[Albanbrice]

I pm you the models. My system:

• win7 64 pro, 64Gb RAM, 2x GTX 1070
• Firefox 82.0.3
• Chrome 86.0.4240.198

[ponchio]

I made some test on large models and lots of textures. Performance were not great, it looks like data transfer to the GPU using threejs creates lag spikes. So I rewrote the pipeline to manually create buffers and texutres, (as the old version in nexus_threejs did), and it seems much better. The only differences in interface is that you will need to import NXSRaw instead (I will change the name it's ugly) and you need to add the renderer as argument in the constructor (I need the webgl context).

[Albanbrice]

Great! I tried with the models. It works pretty fine, I'm gonna test it in my dev environment.

• the fps is at 60, no more problems with patches rendering

• in Chrome, the console send this : mesh.js:88 GET http://localhost:8080/dist/models/orco.nxz net::ERR_CACHE_OPERATION_NOT_SUPPORTED

• in Firefox, no more monitor background issue, but the console still sends a running error with the 'width' value

[Albanbrice]

some feedbacks :

• Before your last commit, I noticed that Firefox is more slower and laggy than Chrome (when we orbit and pan around the large model) although the monitor send back the same ~60fps. To notice that I changed, in controls options, dynamicDampingFactor (trackball) for dampingFactor (orbit)

• the build seems to fail = doesn't find the main.js called from index.html

[ponchio]

I was testing a library export in webpack and the main.,js got lost. It's fixed (npm run build), hopefully.

About firefox, I get a lower fps (30/40) while in practice it's oscillating between 15 and 60, it looks like the reason is the texture transfer to GPU that is probably blocking. I could also be createImageBitmap conversion jpg/bitmap which it is supposed to be on a different thread but I read that in firefox it is not.

A simple test could be to reduce the size of the patches and see the difference in performances, i will keep investigating.

[umimori13]

Could you publish ths threejsES6 in npm and update the readme to use? I have used nexus in my React project but still not installed in npm

[ponchio]

I did publish it on npm as nexus3d, still need to update the readme.md will be done in a second time. I am really a beginner in npm, let me know if there is something wrong or needs improving.

[umimori13]

well, I just tested it using npm and got something wrong. I will give the errors and the suggestions blow.

First I install the nexus3d and import it, can not import anything and can't resolve the module

Module not found: Error: Can't resolve 'nexus3d' in 'F:\teamwork\testNexus\src'

The solving way is in your package.json, the main is the entry for the

require('nexus3d')

or

import * from 'nexus3d'

So it should not be

"main":"dist/index.js",

I think it can fix to be

  "main": "build/nexus3D.min.js",

some others suggestion for the package.json: You can add more things in it. Like below

"files":[
    "build/nexus3D.min.js",
    "LICENSE",
    "package.json",
    "README.md",
    "src",
],
  "repository": {
    "type": "git",
    "url": "https://github.com/..."
  },
  "keywords": [
    "three",
    "three.js",
]
  "author": "...",
  "license": "...",
  "bugs": {
    "url": "https://github.com/..."
  },
  "homepage": "...",

The informations in them will show in the publish page nexus3d The "files" word array will contains the files published when others install your lib repository

I don't know what the meaning of the webpacklib.config.js in the respository. Is that a way to pack your codes? There are two ways for packing code in famous, and it is better to use rollup for lib pack, to use webpack for html,css or projects.. So if you need rollup each time and change the version before you publish. You may can add the cli in a easy way in scripts in package.json for

{
...
"scripts":{
   ...
   "build-pro":"rollup -c rollup.config.js"
   ...
}

and then npm publish

You may find more information for the package.json from official or may not official

By the way, the "[name].min.js" is usually zipped or minified code with no space, short vars, no new-lines. So you may need change the name into "Nexus3d.js". For minified you can learn more from babel in rollup and bundled(option).

---

And I have tested the published version in my example. There are some errors. One of the error is the options update for Nexus3D constructor (the published version is old) (by the way, will nexus have onError options? may not the cache error, just the url error or some else like option error. The loader should not make the program stop for the errors) Second error is the worker path error corto.em.js It cannot find the correct path. The path is not suitble for using path to find the worker. I think it is better to use worker loader in webpack for dev and worker loader plugin for the rollup when publish it.