JaneliaSciComp / SharkViewer

SharkViewer is a web-based viewer for SWC neuron files. It is written entirely in JavaScript using Three.js.
Other
24 stars 11 forks source link

Please upload a valid .swc file #30

Closed eyildiz-ugoe closed 2 years ago

eyildiz-ugoe commented 2 years ago

The web api keeps prompting this even though the file is valid.

neomorphic commented 2 years ago

Hi @eyildiz-ugoe, my guess is that you are using the demo that is running on https://janeliascicomp.github.io/SharkViewer/. I have updated that code to use our latest version and it should now support a wider array of swc files. The update also adds support for obj files. If the swc file that you are using still fails to load, then there is a chance that it is not a standard swc file.

eyildiz-ugoe commented 2 years ago

it is not a standard swc file.

This is the format the file is generated for: http://www.neuronland.org/NLMorphologyConverter/MorphologyFormats/SWC/Spec.html , is this the standard? If not then it may explain why it wouldn't load.

It takes forever to load the file, it looks like it gets stuck. Perhaps there are too many data points in it and the web browser fails to process them, I am not sure. But the .swc file itself is readable and visualizable. I cannot attach it or paste its content here unfortunately due to size issues.

neomorphic commented 2 years ago

@eyildiz-ugoe the format you have linked to looks correct, so the swc file is probably formatted correctly. Can you provide the size of the file you are trying to use in the viewer? You may have hit a limit with the amount of data the browser is able to deal with in webGL.

eyildiz-ugoe commented 2 years ago

I tried another file and now it uploaded it, but it does not visualize it. I can see the file name there next to the browse button, but I see only the default sample in the viewer, not my file. Is there another button to click to visualize?

Screenshot 2022-08-23 203556

neomorphic commented 2 years ago

I have taken a number of example swc files from neuprint, like this one and they all load. 329566174.txt Can you try this example and see if it loads for you? If that file works, then the code is working as expected. If the files that you are uploading are well over 20MB, then they are probably not going to work in this visualizer.

eyildiz-ugoe commented 2 years ago

skeleton_wavefront.txt

I was able to upload and visualize yours, my file above however, does not work. It's only 1.8 MB though. Could you let me know if the file I try to upload is somehow inappropriate?

neomorphic commented 2 years ago

I identified a bug with the code when the coordinates are very small. This bug has been fixed, and the file you provided does load now. The next problem is that the viewer is designed to look at items in a much large coordinate space and can't zoom in far enough to see the object in your swc file, because it is too small. If you multiply all the coordinates in your swc file by 1000, the object is clearly visible. One way to check this is to modify the SharkViewer code in one of two places. If you are running the demo app locally, you can modify the following code to allow the camera to zoom in to much smaller coordinates

--- a/src/shark_viewer.js
+++ b/src/shark_viewer.js
@@ -1019,7 +1019,7 @@ export default class SharkViewer {

     this.trackControls = new OrbitUnlimitedControls(this.camera, this.dom_element);
     this.trackControls.maxDistance = cameraPosition;
-    this.trackControls.minDistance = 15;
+    this.trackControls.minDistance = 0.5;
     this.trackControls.addEventListener("change", this.render.bind(this));
     // TODO: have a callback here that reports the current position of the
     // camera. That way we can store it in the state and restore from there.

Too change the coordinates of your loaded file, you can modify the following:

--- a/src/viewer/util.js
+++ b/src/viewer/util.js
@@ -30,9 +30,9 @@ export function swcParser(swcFile) {
       swcJSON[id] = {
         id,
         type: parseInt(match[2], 10),
-        x: parseFloat(match[3]),
-        y: parseFloat(match[4]),
-        z: parseFloat(match[5]),
+        x: parseFloat(match[3]) * 100,
+        y: parseFloat(match[4]) * 100,
+        z: parseFloat(match[5]) * 100,
         radius: parseFloat(match[6]),
         parent: parseInt(match[7], 10)
       };

Hopefully this will show you the files you are trying to look at.

eyildiz-ugoe commented 2 years ago

It did, actually, thanks! I really appreciate the assistance. Here it is:

Screenshot from 2022-08-24 09-44-23