🔧 improve picking selection with overplotting

DESCRIPTION

@@ -19,7 +19,7 @@ Imports:
     purrr,
     viridisLite,
     grDevices
-RoxygenNote: 7.2.0
+RoxygenNote: 7.3.2
 Roxygen: list(markdown = TRUE)
 Suggests: 
     testthat (>= 3.0.0),

srcts/show_scatter/shaders.ts

@@ -3,6 +3,7 @@ varying float vSize;
 varying vec3 vColor;
 varying float vAlpha;
 varying float vPicking;
+varying float vShrink; // shrink points when picking
 
 void main(){
     // 1.0 if picking else vAlpha

srcts/show_scatter/show_scatter.ts

@@ -575,6 +575,14 @@ export abstract class DisplayScatter {
 
     const pixelBuffer = new Uint8Array(4 * width * height);
 
+    // re-render the picking scene with smaller points to prevent overplotting 
+    // when picking
+    this.points.geometry.setAttribute("color", this.pickingColours);
+    (this.points.material as THREE.ShaderMaterial).uniforms.picking.value = 1;
+    (this.points.material as THREE.ShaderMaterial).uniforms.shrink.value = 1;
+    this.renderer.setRenderTarget(this.pickingTexture);
+    this.renderer.render(this.scene, this.camera);
+
     renderer.readRenderTargetPixels(
       pickingTexture,
       x,
@@ -584,6 +592,12 @@ export abstract class DisplayScatter {
       pixelBuffer
     );
 
+    // reset from picking scene
+    this.renderer.setRenderTarget(null);
+    this.points.geometry.setAttribute("color", this.pointColours);
+    (this.points.material as THREE.ShaderMaterial).uniforms.picking.value = 0;
+    (this.points.material as THREE.ShaderMaterial).uniforms.shrink.value = 0;
+
     const selectedPointSet = new Set<number>();
     let id;
     for (let i = 0; i < width * height; i++) {
@@ -706,12 +720,10 @@ export abstract class DisplayScatter {
       this.filteredPointIndices.includes(id - 1)
     ) {
       const toolTipCoords = this.toolTip.getBoundingClientRect();
-      this.toolTip.style.left = `${
-        Math.floor(x / dpr) - toolTipCoords.width
-      }px`;
-      this.toolTip.style.top = `${
-        Math.floor(y / dpr) - toolTipCoords.height
-      }px`;
+      this.toolTip.style.left = `${Math.floor(x / dpr) - toolTipCoords.width
+        }px`;
+      this.toolTip.style.top = `${Math.floor(y / dpr) - toolTipCoords.height
+        }px`;
       this.toolTip.className = "detourrTooltip visible";
       const span = this.toolTip.querySelector("span");
       span.innerHTML = `${this.mapping.label[id - 1]}`;

srcts/show_scatter_2d/index.ts

@@ -73,6 +73,7 @@ export class DisplayScatter2d extends DisplayScatter {
         size: { value: Math.max(pointSize, this.minPointSize) },
         zoom: { value: this.camera.zoom },
         picking: { value: 0 },
+        shrink: { value: 0 }
       },
       vertexShader: VERTEX_SHADER_2D,
       fragmentShader: FRAGMENT_SHADER,

srcts/show_scatter_2d/shaders.ts

@@ -2,6 +2,7 @@ export const VERTEX_SHADER_2D = `
 uniform float size;
 uniform float zoom;
 uniform float picking;
+uniform float shrink;
 
 attribute float alpha;
 attribute vec3 color;
@@ -10,14 +11,16 @@ attribute vec3 color;
 varying vec3 vColor;
 varying float vAlpha;
 varying float vPicking;
+varying float vShrink;
 
 void main(){
     vColor = color;
     vAlpha = alpha;
     vPicking = picking;
+    vShrink = shrink;
 
     vec4 mvPosition = modelViewMatrix * vec4( position, 1.0);
     gl_Position = projectionMatrix * mvPosition;
-    gl_PointSize = 100.0 * size * sqrt(zoom);
+    gl_PointSize = 2.0 * shrink + (100.0 * size * sqrt(zoom)) * (1.0 - shrink);
 }
 `;

srcts/show_scatter_3d/index.ts

@@ -45,6 +45,7 @@ export class DisplayScatter3d extends DisplayScatter {
       uniforms: {
         size: { value: Math.max(pointSize, this.minPointSize) },
         picking: { value: 0 },
+        shrink: { value: 0 }
       },
       vertexShader: VERTEX_SHADER_3D,
       fragmentShader: FRAGMENT_SHADER,

srcts/show_scatter_3d/shaders.ts

@@ -1,6 +1,8 @@
 export const VERTEX_SHADER_3D = `
 uniform float size;
 uniform float picking;
+// shrink when picking with box, but not on hover
+uniform float shrink; 
 
 attribute vec3 color;
 attribute float alpha;
@@ -9,14 +11,16 @@ attribute float alpha;
 varying vec3 vColor;
 varying float vAlpha;
 varying float vPicking;
+varying float vShrink;
 
 void main(){
     vColor = color;
     vAlpha = alpha;
     vPicking = picking;
+    vShrink = shrink;
     
     vec4 mvPosition = modelViewMatrix * vec4( position, 1.0);
     gl_Position = projectionMatrix * mvPosition;
-    gl_PointSize = 200.0 * size / -mvPosition.z;
+    gl_PointSize = 2.0 * shrink + (200.0 * size / -mvPosition.z) * (1.0 - shrink);
 }
 `;