updated shaders to use a constant scale and set depthTest and depthWrite

Author: Lauenburg

synanno/static/shaders/ConeShader.js

@@ -21,7 +21,7 @@ const ConeShader = {
             mvPosition = modelViewMatrix * vec4(position, 1.0);
             vec3 cylAxis = (modelViewMatrix * vec4(normal, 0.0)).xyz;
             vec3 sideDir = normalize(cross(vec3(0.0,0.0,-1.0), cylAxis));
-            mvPosition += vec4(radius * sideDir, 0.0);
+            mvPosition += vec4(radius * 0.30 * sideDir, 0.0);
             gl_Position = projectionMatrix * mvPosition;
 
             sphereUv = uv - vec2(0.5, 0.5);
@@ -34,9 +34,8 @@ const ConeShader = {
             sphereUv = rotMat * sphereUv;
             sphereUv += vec2(0.5, 0.5);
 
-            float foreshortening = length(cylAxis) / length(cylAxis.xy);
-            if (foreshortening > 4.0) foreshortening = 0.9;
-            depthScale = radius * foreshortening;
+            // Maintain constant scale
+            depthScale = radius;
         }
     `,
 

synanno/static/shaders/ParticleShader.js

@@ -19,7 +19,9 @@ const ParticleShader = {
         void main()
         {
             mvPosition = modelViewMatrix * vec4(position, 1.0);
-            gl_PointSize = radius * ((particleScale * 2.5) / length(mvPosition.z));
+
+            // Keep particle size constant in screen space
+            gl_PointSize = (radius * 600.0) / -mvPosition.z;
 
             vColor = color;
             vRadius = radius;

synanno/static/shaders/SynapseShader.js

@@ -3,7 +3,7 @@ const SynapseShader = {
         sphereTexture: { value: null },
         particleScale: { value: 1.0 },
     },
-    vertexShader: `
+    vertexShader: /* glsl */ `
         uniform float particleScale;
         attribute float radius;
         attribute float alpha;
@@ -12,16 +12,17 @@ const SynapseShader = {
 
         void main() {
             vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
-            float depthScale = -mvPosition.z / 1000.0; // Normalize depth scale
-            gl_PointSize = clamp(radius * (particleScale / depthScale), 10.0, 20.0);
+
+            // Adjust point size based on perspective projection
+            gl_PointSize = clamp(radius * 2.5 / -mvPosition.z, 10.0, 20.0);
 
             gl_Position = projectionMatrix * mvPosition;
 
             vColor = color;
             vAlpha = alpha;
         }
     `,
-    fragmentShader: `
+    fragmentShader: /* glsl */ `
         uniform sampler2D sphereTexture;
         varying vec3 vColor;
         varying float vAlpha;

synanno/static/viewer.js

@@ -178,14 +178,14 @@ function processSynapseCloudData(data, maxVolumeSize, activeSynapseIDs, initialL
         if (activeSynapseIDs.length > 0) {
             sizes[i] = activeSynapseIDs.includes(i) ? maxVolumeSize : 10;
 
-            window.synapseColors[i] === "green" || window.synapseColors[i] === "red" ? 0.7 : 0.3;
-            alphas[i] = activeSynapseIDs.includes(i) ? 0.8 : 0.3;
+            window.synapseColors[i] === "green" || window.synapseColors[i] === "red" ? 1.0 : 0.4;
+            alphas[i] = activeSynapseIDs.includes(i) ? 1.0 : 0.4;
         } else if (initialLoad) {
             sizes[i] = 10;
-            alphas[i] = 0.8;
+            alphas[i] = 1.0;
         } else {
             sizes[i] = 10;
-            alphas[i] = 0.1;
+            alphas[i] = 0.4;
         }
     }
 
@@ -210,8 +210,11 @@ function processSynapseCloudData(data, maxVolumeSize, activeSynapseIDs, initialL
         uniforms: SynapseShader.uniforms,
         vertexShader: SynapseShader.vertexShader,
         fragmentShader: SynapseShader.fragmentShader,
-        transparent: true,
         vertexColors: true,
+        transparent: true,
+        depthTest: true,     // Objects still get depth-culled
+        depthWrite: false,   // Prevents particles from overwriting depth buffer
+        renderOrder: 2
     });
 
     const pointsMesh = new THREE.Points(geometry, material);
@@ -584,15 +587,15 @@ function createMetadataElement(metadata, colors, activeNeuronSection) {
                     } else {
                         // Proceed only if the lock is free
                         fetch(`/retrieve_first_page_of_section/${sectionIndex}`)
-                            .then(response => response.json())
-                            .then(data => {
-                                if (data.page) {
-                                    window.location.href = `/annotation/${data.page}`;
-                                } else {
-                                    alert("Failed to retrieve section page.");
-                                }
-                            })
-                            .catch(error => console.error("Error fetching first page:", error));
+                .then(response => response.json())
+                .then(data => {
+                    if (data.page) {
+                        window.location.href = `/annotation/${data.page}`;
+                    } else {
+                        alert("Failed to retrieve section page.");
+                    }
+                })
+                .catch(error => console.error("Error fetching first page:", error));
                     }
                 })
                 .catch(error => console.error("Error checking metadata lock:", error));