cnr-isti-vclab / 3dhop Goto Github PK
View Code? Open in Web Editor NEW3D Heritage Online Presenter
Home Page: http://www.3dhop.net
License: GNU General Public License v3.0
3D Heritage Online Presenter
Home Page: http://www.3dhop.net
License: GNU General Public License v3.0
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 :
python -m SimpleHTTPServer
, canvas remains empty : only background image is displayed, neither the .nxz
gargoyle nor the .ply
cage appear.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)..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 filepython -m SimpleHTTPServer
), gargo.nxz
is properly displayed.--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.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
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 ! ๐
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.
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
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!
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!
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.
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?
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.
So I was curious what you think about these features and whether there was anything like this planned for future releases.
Thanks.
Configuration (please complete the following information):
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.
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.
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!
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!
Hi,
THANK YOU for 3DHOP!!!
Cheers!
Hi again, I wondered whether it is in the pipeline to add additional image map capacities such as bump/normal/roughness/AO?
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!
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.
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
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.
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!
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.
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.
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
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??
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!
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
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!
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.
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
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.
Configuration (please complete the following information):
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).
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
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
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.
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!!
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:
Thank you!!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.