Giter Site home page Giter Site logo

cnr-isti-vclab / 3dhop Goto Github PK

View Code? Open in Web Editor NEW
154.0 35.0 42.0 128.01 MB

3D Heritage Online Presenter

Home Page: http://www.3dhop.net

License: GNU General Public License v3.0

HTML 3.38% JavaScript 96.04% CSS 0.58%
web3d webgl viewer nexus multiresolution mesh point-cloud html javascript 3d

3dhop's People

Contributors

cmcfadden avatar mcallieri avatar miguel76 avatar potenziani avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

3dhop's Issues

Multires models examples ?

Hello,

I'm currently working with the University of Strasbourg (unistra) on a Django based 3D file sharing web solution, and I'm testing 3DHop integration.
I'd like to thank you for this initiative : it seems great, and we'd love to use it !

However, although everything is fine when displaying single res .ply files, I've got issues when trying to display multires .nxs/.nxz files.
For example, let's consider 3DHOP_4.2/examples/HOWTO_2.0_models_loading.html (without any modification), with Firefox 63.0 :

  • Whether I directly open the file, or if I start a small webserver with python -m SimpleHTTPServer, canvas remains empty : only background image is displayed, neither the .nxz gargoyle nor the .ply cage appear.
  • If, inside 3DHOP_4.2/examples/HOWTO_2.0_models_loading.html, I change the path models/multires/gargo.nxz to models/singleres/gargo.ply the gargoyle and the cage display properly (gargoyle's head is stuck in the cage floor, but that's not a problem).
  • If I visit http://vcg.isti.cnr.it/nexus/demo.html?model=models/monreale.nxz , the model is properly displayed, with the different LOD appearing sequentially over a couple seconds.
  • When 3DHOP viewer is used inside my Django server, behaviour is the same: .ply display fine, .nxs/.nxz don't appear at all.

When comparing to Chromium 70.0.3538.77 (same file: HOWTO_2.0_models_loading.html) :

  • gargo.nxz doesn't display when simply opening the file
  • When viewing the file through a simple webserver (python -m SimpleHTTPServer), gargo.nxz is properly displayed.
  • Running chromium-browser with --allow-file-access-from-files CLI option doesn't seem to change the results.

For information, if I test it via my Django app, with scenes consisting only of one mesh and one model :

  • .ply files, even complex scenes, are displayed properly, whether I use Firefox or chromium.
  • With Firefox, gargo.nxz doesn't display and I get the following error:
TypeError: modelDescriptor is null[Learn More] presenter.js:1548:2
_onPlyLoaded                            http://localhost:8000/site_media/js/3pp/3dhop/presenter.js:1548:2
setScene/<.onSuccess</<                 http://localhost:8000/site_media/js/3pp/3dhop/presenter.js:2910:55
_dispatch                               http://localhost:8000/site_media/js/3pp/3dhop/spidergl.js:29:10470
_doOnSuccess                            http://localhost:8000/site_media/js/3pp/3dhop/spidergl.js:29:11269
SpiderGL.IO.XHRRequestBase/i.onload     http://localhost:8000/site_media/js/3pp/3dhop/spidergl.js:29:13911
  • With Chromium, gargo.nxz doesn't display either and, after a few moments of awkward browser freeze, I get the following error :
Uncaught TypeError: Cannot read property 'extra' of null
  at Presenter._onPlyLoaded (presenter.js:1548)
  at sglRequestBinary.onSuccess (presenter.js:2910)
  at SpiderGL.IO.BinaryRequest._dispatch (spidergl.js:29)
  at SpiderGL.IO.BinaryRequest._doOnSuccess (spidergl.js:29)
  at XMLHttpRequest.i.onload (spidergl.js:29)

(I don't ask you to debug my Django app, of course ^^ Just to make a single multires example work would be a huge step towards using 3DHOP)

I've checked every .nxz files I use with nexus' nxsview tool, they don't seem to have any problem (ie. they display properly).
I've tested with 3DHOP_4.2 downloaded version as long as with this repo's master latest version (d428e9), results are the same.

Should the example demos work out of the box on all browsers ?
Should I setup / modify something before running them ?

If it's of any help, besides the browser versions I cited, I'm on a Dell Latitude 5490 running LinuxMint 19 (64-bit).

Thanks in advance for your directions ! Have a nice day ! ๐Ÿ‘

Objects have limited rotation angle in certain axes (usually Y and Z) [trackballs setup]

Hi,

First of all, thank you for creating this software, it's fantastic! Unfortunately I am having an issue with the rotation of my models. The rotation issue can be observed in many of the galleries in your website on the "gallery" page, for example:

http://cyclamen.cyi.ac.cy/sites/3DV/3dhop.html

http://cabinetdecuriosites3d.mnhn.fr/fr/content/cro-magnon-1-homo-sapiens

http://vcg.isti.cnr.it/3dhop/demos/musa/index_musa.html

While I cannot show you my own models in 3Dhop as the website is currently under construction, I can provide screenshots from both 3Dhop and MeshLab, which I think might help elucidate the issue.

3dhop rotation issue

On the left is my model rotated along the Z axis in 3Dhop up to the point where it cannot be further rotated. On the right is the same model with its bounding box in MeshLab. Both are in the same orientation. It seems that the "plane" of rotation in 3Dhop caps the bounding box at exactly 90 degree of rotation along the Z axis, not allowing it to rotate further. Am I understanding it right? Is there a way to circumvent it?

It's just that I am planning to have hundreds if not thousands of .ply files of various anatomical items (bones, teeth) on my website, and the inability to fully rotate an object will limit the usability of the models, as some anatomical views and planes will not be available to the user. I know I can rotate the objects in MeshLab prior to loading them to 3Dhop, but it would just introduce a lot of additional work.

However it does seem that there's a way to circumvent the issue, seeing that this gallery for example has models that can be rotated freely and fully along all axes.

http://bonify.archaeolabs.nl/app/species/goat/mandibula_1.php

Thank you!

Best,
Mike

Model illumination (normals)

Hello!

I'm back here again, delighted with 3DHop!
I have a problem that I don't know if I could solve it. When I see models without normal on my mobile (Huawei P10), the lighting is on the right side (external part of the 3D model). However, if I see the same model from my wife's mobile (Huawei G8), the lighting is on the opposite side.
I would not like to show the normal ones, because in the models made with photogrammetry you can see too much distortions and I prefer to hide them.
What can be the solution?

Thank you very much!

Deformed model when changing trackball position [trackballs paradigm]

Hello again friends,

I'm working to automatically modify the trackball (the cameras) with setTrackballPosition function, so that a sequence of model views can be shown automatically. I'm calculating the positions and everything is fine except in one of them, in which the model is deformed (it's a house, and at that point it's practically flat, crushed, as if a giant stepped on it).
I can't understand exactly why it happens only at that point.

Any orientation will be welcome.
Thanks!

Allow configurable selectors

When we instantiate a Presenter object, we need to provide the ID of a <canvas> element. However, it looks like other selectors (like #toolbar) cannot be configured, which force us to alter 3DHOP sources if this ID already exists on a website. Ideally, we could provide options to control this.

keyboard input disabled

Hello, I have created an input field type=text in the page where 3DHOP viewer is embedded and it is deactivated when WebGL content is fully loaded. It seems that it prevents from writing any text in that field. Have you ever encounter this issue?

feature request: transitions & texture switching

Hi, thanks for developing this great app. Especially the multi resolution feature is awesome. Playing around with it I noted two things that I'd like to see and that are missing.

  1. When turning on and off models, it would be nice to have them gradually fade in/ out or morph rather than simply a hard switch. More generally, some animation/transition capacity would be really useful.
  2. I would like to have the option to be able to switch between textures. In my case I have models with a number of baked textures respresenting different surface visualization modes that help to visually analyse scanned artefacts and landscapes.

So I was curious what you think about these features and whether there was anything like this planned for future releases.

Thanks.

Textured objects are not displayed on iOS

Configuration (please complete the following information):

  • Device: iPhone
  • OS: iOS 14.x
  • Browser Safari (iOS), Chrome(iOS)
  • 3DHOP Version 4.3 stable

Describe the bug
When I convert a PLY file with texture via nxsbuild, it is not displayed on iOS. PC etc. works wonderfully.

If the PLY file is generated without texture (parameter -u), however, it works with the display under iOS.

Generate a Scale bar?

First, I love 3DHOP it is amazing and congrats on a great approach to making 3D a part of the Web!

I'd like to request a useful feature. Often times, one would want to have a more immediate idea of scale when first viewing a model. It would be nice to have an option to add a scale bar (one that can be toggled on and off) that is automatically generated as a simple rectangular volume that appears near by the model(s) loaded from Nexus meshes.

This would be a good supplement to the measuring tool, since the measuring tool takes some more interaction effort and returns abstract numeric values. A scale bar provides similar information in a clear visualization.

Animation in sphere trackball [dynamic trackball declaration]

Hi,
I would like to know if it is possible to change the type of trackball without reloading the page.
The idea is to use the sphere trackball to get total control over the 3D model.
If I want to see an animation, switch to turntable trackball.

greetings and thank you for your help!

Doubt/suggestion - 3D Map

Hi again @potenziani

First of all, I'm very impressed with the project, the more I use it, the more I like it!

I have different georeferenced 3D mesh models of lands, and I was wondering if it would be possible to integrate some layer like OpenStreetMap into the viewer. I have seen something very interesting in that sense, the Cesium library. Before going deeper into the subject, I would like you to give me your point of view, and if it would be possible for me to do so.

As always, infinite thanks!

thank you

Hi,

THANK YOU for 3DHOP!!!

Cheers!

bump/normal etc

Hi again, I wondered whether it is in the pipeline to add additional image map capacities such as bump/normal/roughness/AO?

adding loading masks to the canvas

I am adding a loading mask that will display until after a mesh is loaded (on slow connections and big meshes, users may get discouraged when they see the beautifully rendered toolbar and a blank canvas with no loading animation -- it looks empty to them like the file is missing).

However, I'm not sure if I'm doing this in the most elegant way:
Currently, I have a div#loading that displays by default. Within my presenter class, I am overriding the _testReady support function with my own version that inserts $('#loading').hide(); just before this.repaint();

This works, but I wonder if this is not the best way to do this? I couldn't successfully target the canvas element in any other way but could be missing something very simple.

Although this isn't technically an issue, I suppose it could be filed under a feature request or something to be added to the existing documentation (which is very clear about many other UI features!). Thank you for your work on this tool!

Setting tabindex on canvas messes with focus in Firefox

SpiderGL adds the tabindex="0" attribute on the <canvas> element. To begin with, in order to help us better understand this issue, what is the purpose of this?

In Firefox (tested with version 74 under Archlinux and Ubuntu), but not in Chrome (more precisely Chromium), it seems this behaviour messes with focus, namely text selection disappears when the mouse button is released, and a select list does not remain open. This could be observed on our website up until now, but since I am going to implement a workaround (by removing the attribute later in JavaScript), here is another example. Manually removing the attribute when inspecting the code disables this behaviour. Although I tried to understand this interaction, I could find nothing on this topic which could explain this.

Trackballs dragging speed option

First of all thanks for this nice tool! Its working pretty well for our project there is just some little inconvenience I have with the rotation speed while using the mouse to drag the 3D model. See below please.
I was thinking to look into the code to fix this myself but wanted to ask for an opinion first :-).

Is your feature request related to a problem? Please describe.
When using the 'SphereTrackball' the rotation speed using the mouse is a bit too slow.

Describe the solution you'd like
Add an option to presenter scene setup, e.g.:

presenter.setScene({
  ...
  trackball: {
	  type : SphereTrackball,
	  trackOptions : {
		  ...,
		  dragRotationSpeed: 1.2
	  }
  }
});

Ty,
Florian

Model without illumination on iPhone X and XR (latest version of 3DHop)

Hello again!

I'm using the latest version of 3DHop (which is great), but I have a problem. With iPhone X and XR the 3D model looks totally black on both sides, however with iPhone 6 there is no such problem, not even in Safari for PC.

What could be the problem? How could I fix it?
Thank you very much in advance.

Modifying Touch Sensitivity

I am working on using the 3Dhop viewer on a kiosk, and I am having trouble locating where I can increase the sensitivity of touch rotation. The viewer works fine on most mobile devices, however, on the kiosk, you have to drag a long ways across the screen, and get little progress in rotation.
Any help would be much appreciated!

Resizing after full screen view in Firefox not working properly

We are using 3DHOP in an application to display ancient vases: https://odeeg.acdh.oeaw.ac.at/vases/object/detail/1

I had to remove "width:100%" and "height:100%" from 3dhop.css #draw-canvas (line 44) in order to properly display the small viewer along the other content.

The only remaining problem now is that when in Firefox I switch to Full Screen and then go back via "Exit Full Screen" or Esc the canvas dimensions are still set to full screen dimensions which results in the 3d model extending over all the other content on display. On Chrome this problem does not exist.

Any help would be appreciated very much.

Implementing 3DHOP in Drupal

We use 3DHOP on a Drupal 7 website. I tried to upgrade the library to the latest release. When my page loads, I get the following error in console: ReferenceError: sglHandleCanvas is not defined (in presenter.js, line 43). I can replace sglHandleCanvas by SpiderGL.UserInterface.handleCanvas, but of course other errors arise later.

SpiderGL.openNamespace() does get called on line 20, however it does not really seem to do its job (and since spidergl.js is obfuscated, it is quite tricky to understand what happens inside)... Any help would be greatly appreciated.

Is it possible to obtain all the vertices of the mesh? [real-time vertices information dataview]

Hi!

Some time ago I asked if it was possible to export a section in OBJ, the answer was no, but one thing is not clear to me, perhaps because of my lack of advanced knowledge.
I would like to be able to access the vertices of the cloud, for example, once I have the .nxs file loaded in 3DHop and I am visualizing it, to be able to access all the vertices of the model, that way I could save a file with all the coordinates, that is to say, export it in a point cloud format.
Is that possible?

Thank you very much in advance

Implementing 3DHOP in Rails

Hi

I got the uncaught reference error at presenter file on the following line
SpiderGL.openNamespace();
error
Uncaught ReferenceError: SpiderGL is not defined

can you tell whats the reason??

Touch control

Hi, I'm trying to access the code that controls tactile gestures on mobile devices.
I want to allow the 3D model to move if two fingers are used in the same direction.
I don't know if this function is done using JS or spiderGL.
Thanks again!

[Feature requests] Screenshot resolution multiplier; rotate plane section tool

I'm continuing to enjoy using 3D-HOP! Thanks for all your work on this. I'm sorry I can't do more to help with these requested features below but I'm hoping to lodge these as possible improvements to the tools if they aren't on any roadmaps/existing requests.

Is your feature request related to a problem? Please describe.
Request 1) The new screenshot feature is great, in terms of expanding on it I would love to see if in any way possible a way of expanding the resolution above native resolution. For example if the native screen res is 1080p, export screenshots at above-native resolutions e.g. 4k, 8k. I can see this having a real benefit to use in orthographic camera mode for folk wanting to create reference imagery, elevation, plan and section imagery.

Feature request 2) The plane sections tool works well, but ideally you could rotate the section tool around either axis, so it is possible to align the slices to 'off-plumb' geometry, and for models that naturally follow a slope or sit off-axis.

Describe the solution you'd like
On request 1) I gather the screenshot function uses the toDataURL() function which from my brief research doesn't really have a good, native way to scale up/increase DPI for exported images. There seems to be poorly documented mentions of toDataURLHD() but it's not clear what this really offers. Unfortunately I think any implementation may be more complex e.g. requiring scaling up the canvas etc

threejs version

Hello

Thank you very much for this excellent work! Do you have plan to do a THREE version instead of spidergl?

If yes, i can give help.

many thanks!

3DHOP freezes

Hi, I have built an application to compare the results of 3D scans. It works fine, and than after switching between models a number of times and navigating the 3D space, it freezes. It doesnt occur after a specific period of time, sometimes it takes a few minutes, sometimes it occurs already after 20 seconds. It occurs in all browsers the same way. This is the link to the application:
http://www.4dresearchlab.nl/3DHOP/lijfje/lijfje.html
I noticed it stores all the models in the memory as soon they're loaded, so with so many high res models, at some point RAM usage is quit high, but it never reaches my pc's max RAM. So I guess this isnt the problem.

loading many nxs files [dynamic scene declaration]

Hi, first of all I want to thank you for such an amazing library!

Now I have an issue that when loading many .nxs files, sometimes my browser(Google Chrome) got stuck, and I traced the network option and then I found that the browser is stuck when it tried to "loadNodeTexture" on one or some of the nxs files( it does not happen to a specific file or files ). The status of the corresponding .nxs file is always "pending" until my browser crash. I have tried this on Firefox as well and got the same result.

Could you please give me some advice on how to start to debug this? I guess it might be the cache problem? Looking forward to your reply!
Sincerely,
Yilin

jQuery no-conflict mode + docker + implementing 3DHOP in Clowder

3DHOP calls the jQuery function by using the $ alias. However, in order to be fully compatible with all systems which could implement this library, it would be better to switch to no-conflict mode and always call explicitly jQuery. For instance, Drupal uses jQuery in no-conflict mode, which makes it difficult to include files which use the $ symbol.

Data/LODs stop loading in (after using viewer for a few minutes) [nexus setup]

Configuration (please complete the following information):

  • Device: Desktop PC & laptop
  • OS: Windows 10
  • Browser: Chrome
  • 3DHOP Version : 4.3 (latest as of 2 days ago?)

Describe the bug
The viewer at first appears to work perfectly, streaming in the Nexus converted NXS/NXZ 3D model. Everything initially works as it should in terms of streaming the geometry and textures, which display fine. However I've noticed that after a couple of minutes of using the viewer, scrolling around, orbiting etc., the high resolution levels stop streaming in. Textures and geometry both fail to load in as I navigate back around the model, instead the LODs appear frozen in their current medium/lower resolution state. None of the viewer tools 'fix' this behaviour, the only way to get it function correctly again is to refresh the browser (doesn't need to be a hard-refresh).

Additional context
I used the latest versions of 3D-HOP and the Nexus converter. I have deployed the viewer on an EC2 instance with a model converted from textured OBJ (2m tris with 4 x 8K texture sheets) to NXS (and tried NXZ). To view the model my browser/system resources are nowhere near exhausted (when I checked I still had a good 8GB RAM spare out of 16GB).

Failure to load/process very basic model [ply textures + bounding box far from the origin]

I'm trying to load a very simple single res ply file (a plane with a texture) in 3DHOP, but for some reason the texture (tried png and jpg) does not show. Also, hoping it would help, I tried to process it with nexus, but the program simply quit. I tried a countless number of things, exporting from Blender to Meshlab with various file formats and different ways of adding textures, but I cant solve the problem. It is unclear to me what goes wrong since nexus gives no feedback, and quits before I can see anything.

I have had previous problems with models not being accepted by nexus. It was solved by unselecting 'export normals' in meshlab. This however doesnt do the trick here.

Link to the model: http://www.4dresearchlab.nl/3DHOP/MT/models/google/MT_Gmaps.ply

shaders and mesh analysis

Hi, another shameless feature request from me. Radiance Scaling and curvature visualization are amongst the most useful visual inspection tools for meshes of artefacts. I saw that MeshLabJS has the capacity to do this in the browser... So any plans to bring this functionality to 3DHOP? It would be a really awesome and very useful extension to 3DHOP.
Best,
Tijm

Best Tools for Rendering Very Large Meshes with Millions of Vertices/Faces in Browser

I'm new to the space of 3D rendering in the browser. I'd like to be able to render very large meshes (10s of millions of vertices/faces) with ability to annotate on the mesh with meta data as well as selectively show//hide multiple textures on the mesh. While I read through the literature (e.g. https://danielhaehn.com/papers/franke2020modern.pdf), I'm curious if anyone out there can help with the TLDR?

So far, I've put together a small working example using next.js + 3DHOP (which uses the Nexus.js format on meshes) to render a model that has 31 million triangles and 62 million faces. This is great, but, as hinted earlier, I'd like more FE functionality than 3DHOP provides out the box along with the ability to render multiple textures/annotations.

Is modifying 3DHOP the way to go or would it be better to construct something separate more from the ground up just using tools like three.js (I assume this would need to use the smart data structures provided by formatting with Nexus.js)?

Some of the meshes are essentially maps rendered from imaging scans, so I've considered Cesium.js as a possibility too. However, at present I don't need these maps to be rendered geospatially w.r.t. each other so I'm assuming three.js is the better choice then of the two?

I'm aiming for my project to be well built and long-lasting. What are the recommended tool-sets for the task of rendering large meshes in the browser with ability for meta-data annotations and versatility to offer selectively rendering textures with other functionality like distance measuring, etc.

Indication of the level of detail

Hi,

First of all I want to thank you for an amazing library. I'm looking at using it to display large complex models which will take advantage of the hierarchical display. Given that it can sometimes take longer time or require to zoom in to display the high res details, I was wondering if there is a way to get the information about the current display quality and how it to the user. Given that I haven't seen in any of the examples this feature I'm positive it does not exist yet, but I was wondering if there is a way to just get the info from the presenter and then write my own code to display it.

I hope I managed to explain what I'm interested in :) And again thank you for the amazing work!!

New section tool and possibility of exporting "the result" to obj

First of all, thanks to the whole team.
3DHop is a fantastic tool!

I am relatively new to this whole world and I have some doubts:

  • On the one hand, I read that you are going to publish a tutorial on how to create a more advanced section tool. I was wondering how I can do it now.
  • On the other hand, I was also wondering if the sectioned 3D model I'm viewing can be exported to obj for example, and what the process would be like.

Thank you!!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.