cleanup three display and fix #3517 & #3503

WGLMakie/src/Lines.js

@@ -38,9 +38,11 @@ function linesegments_vertex_shader(uniforms, attributes) {
 
         ${attribute_decl}
         ${uniform_decl}
+        uniform int is_segments_multi;
 
         out vec2 f_uv;
         out ${color} f_color;
+        flat out uint frag_instance_id;
 
         vec2 get_resolution() {
             // 2 * px_per_unit doesn't make any sense, but works
@@ -72,6 +74,7 @@ function linesegments_vertex_shader(uniforms, attributes) {
             vec2 point = pointA + xBasis * position.x + yBasis * width * position.y;
 
             gl_Position = vec4(point.xy / get_resolution(), position.x == 1.0 ? p_b.z : p_a.z, 1.0);
+            frag_instance_id = uint((gl_InstanceID * is_segments_multi) + int(position.x == 1.0));
         }
         `;
 }
@@ -86,6 +89,7 @@ function lines_fragment_shader(uniforms, attributes) {
         "nan_color",
         "highclip",
         "lowclip",
+        "picking",
     ]);
     const uniform_decl = uniforms_to_type_declaration(color_uniforms);
 
@@ -147,24 +151,44 @@ function lines_fragment_shader(uniforms, attributes) {
         return aastep(threshold1, dist) * aastep(threshold2, 1.0 - dist);
     }
 
+    flat in uint frag_instance_id;
+    uniform uint object_id;
+
+    vec4 pack_int(uint id, uint index) {
+        vec4 unpack;
+        unpack.x = float((id & uint(0xff00)) >> 8) / 255.0;
+        unpack.y = float((id & uint(0x00ff)) >> 0) / 255.0;
+        unpack.z = float((index & uint(0xff00)) >> 8) / 255.0;
+        unpack.w = float((index & uint(0x00ff)) >> 0) / 255.0;
+        return unpack;
+    }
     void main(){
+
         float xalpha = aastep(0.0, 0.0, f_uv.x);
         float yalpha = aastep(0.0, 0.0, f_uv.y);
         vec4 color = get_color(f_color, colormap, colorrange);
+        if (picking) {
+            if (color.a > 0.1) {
+                fragment_color = pack_int(object_id, frag_instance_id);
+            }
+            return;
+        }
         fragment_color = vec4(color.rgb, color.a);
     }
     `;
 }
 
 function create_line_material(uniforms, attributes) {
     const uniforms_des = deserialize_uniforms(uniforms);
-    return new THREE.RawShaderMaterial({
+    const mat = new THREE.RawShaderMaterial({
         uniforms: uniforms_des,
         glslVersion: THREE.GLSL3,
         vertexShader: linesegments_vertex_shader(uniforms_des, attributes),
         fragmentShader: lines_fragment_shader(uniforms_des, attributes),
         transparent: true,
     });
+    mat.uniforms.object_id = { value: 1 };
+    return mat;
 }
 
 function attach_interleaved_line_buffer(attr_name, geometry, points, ndim, is_segments) {
@@ -268,6 +292,7 @@ export function _create_line(line_data, is_segments) {
         geometry.attributes
     );
 
+    material.uniforms.is_segments_multi = {value: is_segments ? 2 : 1};
     const mesh = new THREE.Mesh(geometry, material);
     const offset = is_segments ? 0 : 1;
     const new_count = geometry.attributes.linepoint_start.count;