ICP pairs: yellow fat-line for visibility

LinesLayer now renders via drei's Line (Line2 + LineMaterial under the
hood), which actually honors line width on WebGL — native lineSegments
silently caps at 1 px. Adds a `width` field to LineLayer (default 1).

ICP page: pair lines bumped from 1 px gray (#e2e8f0, 0.6 opacity) to
2 px amber (#facc15, 0.95 opacity), and the per-frame pair sample
count went from 250 to 400. Legend dot follows the new color.

Author: LimHyungTae

web/src/components/PointCloudViewer.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Canvas, useThree } from "@react-three/fiber";
-import { OrbitControls, GizmoHelper, GizmoViewport } from "@react-three/drei";
+import { OrbitControls, GizmoHelper, GizmoViewport, Line as FatLine } from "@react-three/drei";
 import * as THREE from "three";
 import { CameraSyncStore, nextSyncId } from "../lib/cameraSync";
 import type { PointCloud } from "../lib/types";
@@ -17,9 +17,14 @@ type Layer = {
 };
 
 type LineLayer = {
+  /** Endpoint stream packed [x0,y0,z0, x1,y1,z1, ...]. Every consecutive
+   *  pair of points is rendered as one segment. */
   positions: Float32Array;
   color: string;
   opacity?: number;
+  /** Pixel width of the rendered line. Default 1. Implemented via drei's
+   *  fat-line so it actually honors widths above 1 on WebGL. */
+  width?: number;
 };
 
 type Props = {
@@ -385,23 +390,35 @@ function PointsLayer({
 }
 
 function LinesLayer({ layer }: { layer: LineLayer }) {
-  const geom = useMemo(() => {
-    const g = new THREE.BufferGeometry();
-    g.setAttribute("position", new THREE.BufferAttribute(layer.positions, 3));
-    return g;
+  // The width default of 1 falls back to native WebGL lines (the only width
+  // they support); anything > 1 needs drei's fat-line shader. We render
+  // every pair of consecutive endpoints as a separate segment via the
+  // `segments` flag.
+  const points = useMemo(() => {
+    const total = (layer.positions.length / 3) | 0;
+    const out: [number, number, number][] = new Array(total);
+    for (let i = 0; i < total; i++) {
+      out[i] = [
+        layer.positions[i * 3],
+        layer.positions[i * 3 + 1],
+        layer.positions[i * 3 + 2],
+      ];
+    }
+    return out;
   }, [layer.positions]);
 
-  const mat = useMemo(
-    () =>
-      new THREE.LineBasicMaterial({
-        color: new THREE.Color(layer.color),
-        transparent: (layer.opacity ?? 1) < 1,
-        opacity: layer.opacity ?? 1,
-      }),
-    [layer.color, layer.opacity],
-  );
+  if (points.length === 0) return null;
 
-  return <lineSegments geometry={geom} material={mat} />;
+  return (
+    <FatLine
+      points={points}
+      color={layer.color}
+      lineWidth={layer.width ?? 1}
+      segments
+      transparent={(layer.opacity ?? 1) < 1}
+      opacity={layer.opacity ?? 1}
+    />
+  );
 }
 
 function unionBounds(layers: Layer[]) {

web/src/pages/Lec11Icp.tsx

@@ -97,7 +97,7 @@ export default function Lec11Icp() {
     setTransform(result.transform);
     setFitness(result.fitness);
     setPairs(result.pairs);
-    setPairCoords(samplePairCoords(result.pairCoords, 250));
+    setPairCoords(samplePairCoords(result.pairCoords, 400));
     setIter((i) => i + 1);
     if (result.fitness === 0 || delta < CONVERGE_EPS) {
       setConverged(true);
@@ -131,7 +131,7 @@ export default function Lec11Icp() {
             <div className="flex items-center gap-3">
               <Dot color="#f87171" /> {t.lec11.legendSrc}
               <Dot color="#00d4aa" /> {t.lec11.legendTgt}
-              <Dot color="#e2e8f0" /> pairs
+              <Dot color="#facc15" /> pairs
             </div>
             <div className="code-font flex items-center gap-3 text-[var(--dim)]">
               <span>iter {iter}</span>
@@ -157,7 +157,7 @@ export default function Lec11Icp() {
               ]}
               lines={
                 pairCoords.length > 0
-                  ? [{ positions: pairCoords, color: "#e2e8f0", opacity: 0.6 }]
+                  ? [{ positions: pairCoords, color: "#facc15", opacity: 0.95, width: 2 }]
                   : undefined
               }
               framingKey={framingEpoch}