root-project / jsroot

JavaScript ROOT
MIT License
187 stars 79 forks source link

Fix module definitions and cleanup npm dependencies #180

Closed altavir closed 4 years ago

altavir commented 5 years ago

We are trying to use parts of the jsroot (specifically 3d visualization) for event and data display (without ROOT back-end). The problem that there are some mistakes in sources and npm package module declarations which prevents us from using it as-is. Also some modules like three are placed in source directory instead of being taken from npm repository, which further complicates integration. We can either take parts of the code and rewrap them in more robust packages, or we can contribute a PR to this repository fixing the problem for all users. Please tell me if you are interested in the contribution since my JS expert says that it is not that straight forward to do.

If the proper modules are used, it is possible that our team could contribute to the project in future.

linev commented 5 years ago

In principle, I see no problem to use three.js from npm - it is included in JSROOT without modifications. But we also have extra script with additional components from three.js:

https://github.com/root-project/jsroot/blob/master/libs/three.extra.js

These are CanvasRenderer, OrbitControls and some other. Here shell script to build it:

https://github.com/root-project/jsroot/blob/master/libs/build_three_extra.sh

Main problem is SVGRenderer.js - I used workaround to improve performance for large geometries. It is important when number of triangles exceed 100K - standard renderer will be very slow and finally hangs for ever. Like in such case:

https://github.com/linev/jsroot-test/blob/master/TGeo/lhcb.svg

I have no idea if my workaround will work when SVGRenderer is loaded from npm - I trying to replace document API with my own. If you find solution - one can take all three.js-related components from npm.

altavir commented 5 years ago

OrbitControls is provided by a separate module. I am not sure about others, but one can always remove those that exist and leave only those that don't. Currently it is hard to combine jsroot with any other library using three since it gets included in the bundle twice.

Currently, the main problem is not the dependencies, but broken module definitions inside the library. I am not good with JS build system, but one of my PhD students knows it well and he says that he could fix it in a week or so. The question is whether you want those modifications or should we fork and adjust it for our needs. I also think that the project should be split into separate modules to simplify development and allow faster loading. Again, I am talking about using the parts of the project outside of ROOT monolith and as a building block for stand-alone visualization libraries.

linev commented 5 years ago

I add several commits into "dev" branch. Now JSROOT uses "d3" and "three" from npm. Please check if it fits to your needs

altavir commented 5 years ago

Looks better. I managed everything to work, but the problem is that JSRootCore is not friendly with webpack and in fact I do not need it. I've created a stand-alone js file by removing JSRootCore dependency and moving two required functions from it into GeoBase: https://github.com/altavir/dataforge-vis/blob/master/dataforge-vis-spatial-js/src/main/resources/JSRootGeoBase.js and it will work for development needs for now. Later I will discuss with my JS guy how to do it better and perhaps in backward compatible way. I think that it would be good to have a number of stand-alone rendering modules not depending on ROOT itself. It will make possible to create root-like interfaces without actually depending on a root back-end.

By the way. I found that three-full package at npm includes all required add-ons like OrbitControls and SVGRenderer. I switched to it and it is working fine.

linev commented 5 years ago

I managed everything to work, but the problem is that JSRootCore is not friendly with webpack and in fact I do not need it. I've created a stand-alone js file by removing JSRootCore dependency and moving two required functions from it into GeoBase

That is exact the problem with webpack? Your solution is workaround - one should find better solution.

As I see, you want to use only functionality to build TGeo shapes from JSROOT. If yes, probably one could isolate JSRootGeoBase.js.

By the way. I found that three-full package at npm includes all required add-ons like OrbitControls and SVGRenderer. I switched to it and it is working fine.

three-full is 4 times bigger than normal three package, therefore it is not good as default option. And SVGRenderer will be useless for complex geometries. And OrbitControls is not necessary at all when using JSROOT with Node.js. Plus JSROOT will not get fonts, required for text rendering in three.js

Do you have idea how one can configure paths for Node.js - like one can do it with require.js:

https://github.com/root-project/jsroot/blob/master/scripts/JSRootCore.js#L11-L47

In this case I could put some selection for three.js version.

linev commented 4 years ago

Meanwhile I found a way to use original SVGRenderer, but solving its performance problem. webpack is still open problem. Feel free to create correspondent new issue - I closing this one.