Bigger default points (slider stays at 1×) · normal-vector lines · pair lines whitened

- Lec07/08/09/10 now bake the larger default size into the layers'
  ptSize (0.05 → 0.25 of scale) instead of starting the slider at 5×.
  The on-screen result is the same, but the slider opens at "1.00×"
  so reading and shrinking are intuitive.
- Lec10 (Normal) now draws each estimated normal as a short white-ish
  line segment (slate-200, 0.55 opacity), length = 2 × voxel size, on
  top of the colored points. Easier to visually verify the orientation.
- Lec11 (ICP) correspondence lines switched from yellow to slate-200
  for a cleaner contrast against red src + green tgt.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: LimHyungTae

web/src/pages/Lec07Sor.tsx

@@ -37,7 +37,7 @@ export default function Lec07Sor() {
   }, [raw, scale]);
 
   const result = useMemo(() => sor(src, meanK, stddev), [src, meanK, stddev]);
-  const ptSize = 0.05 * scale;
+  const ptSize = 0.25 * scale;
 
   return (
     <div className="mx-auto max-w-7xl px-8 py-10">
@@ -57,7 +57,6 @@ export default function Lec07Sor() {
           </div>
           <div className="aspect-[16/10] w-full">
             <PointCloudViewer
-              defaultSizeMult={5}
               layers={[
                 { cloud: result.inliers, color: "#34d399", size: ptSize },
                 { cloud: result.outliers, color: "#f87171", size: ptSize * 1.4 },

web/src/pages/Lec08RadiusSearch.tsx

@@ -52,7 +52,7 @@ export default function Lec08RadiusSearch() {
     () => cloudFromPositions(new Float32Array([qx, qy, qz])),
     [qx, qy, qz],
   );
-  const ptSize = 0.05 * scale;
+  const ptSize = 0.25 * scale;
 
   return (
     <div className="mx-auto max-w-7xl px-8 py-10">
@@ -70,7 +70,6 @@ export default function Lec08RadiusSearch() {
           </div>
           <div className="aspect-[16/10] w-full">
             <PointCloudViewer
-              defaultSizeMult={5}
               layers={[
                 { cloud: src, color: "#475569", size: ptSize, opacity: 0.55 },
                 { cloud: neighbors, color: "#34d399", size: ptSize * 1.3 },

web/src/pages/Lec09Knn.tsx

@@ -52,7 +52,7 @@ export default function Lec09Knn() {
     () => cloudFromPositions(new Float32Array([qx, qy, qz])),
     [qx, qy, qz],
   );
-  const ptSize = 0.05 * scale;
+  const ptSize = 0.25 * scale;
 
   return (
     <div className="mx-auto max-w-7xl px-8 py-10">
@@ -70,7 +70,6 @@ export default function Lec09Knn() {
           </div>
           <div className="aspect-[16/10] w-full">
             <PointCloudViewer
-              defaultSizeMult={5}
               layers={[
                 { cloud: src, color: "#475569", size: ptSize, opacity: 0.55 },
                 { cloud: neighbors, color: "#34d399", size: ptSize * 1.3 },

web/src/pages/Lec10Normal.tsx

@@ -38,7 +38,31 @@ export default function Lec10Normal() {
     return out;
   }, [normals, src.count]);
 
-  const ptSize = 0.05 * scale;
+  // Build line segments for the normal vectors — each starts at a point and
+  // extends along its normal by a small fraction of the voxel scale so the
+  // arrows stay visible without overwhelming the cloud.
+  const normalLines = useMemo(() => {
+    if (src.count === 0) return new Float32Array(0);
+    const len = voxel * 2;
+    const out = new Float32Array(src.count * 6);
+    for (let i = 0; i < src.count; i++) {
+      const x = src.positions[i * 3];
+      const y = src.positions[i * 3 + 1];
+      const z = src.positions[i * 3 + 2];
+      const nx = normals[i * 3];
+      const ny = normals[i * 3 + 1];
+      const nz = normals[i * 3 + 2];
+      out[i * 6] = x;
+      out[i * 6 + 1] = y;
+      out[i * 6 + 2] = z;
+      out[i * 6 + 3] = x + nx * len;
+      out[i * 6 + 4] = y + ny * len;
+      out[i * 6 + 5] = z + nz * len;
+    }
+    return out;
+  }, [src, normals, voxel]);
+
+  const ptSize = 0.25 * scale;
 
   return (
     <div className="mx-auto max-w-7xl px-8 py-10">
@@ -55,14 +79,18 @@ export default function Lec10Normal() {
           </div>
           <div className="aspect-[16/10] w-full">
             <PointCloudViewer
-              defaultSizeMult={5}
               layers={[
                 {
                   cloud: src,
                   color: coloring === "normal" ? colors : "#94a3b8",
                   size: ptSize,
                 },
               ]}
+              lines={
+                normalLines.length > 0
+                  ? [{ positions: normalLines, color: "#e2e8f0", opacity: 0.55 }]
+                  : undefined
+              }
             />
           </div>
         </div>

web/src/pages/Lec11Icp.tsx

@@ -111,7 +111,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="#facc15" /> pairs
+              <Dot color="#e2e8f0" /> pairs
             </div>
             <div className="code-font flex items-center gap-3 text-[var(--dim)]">
               <span>iter {iter}</span>
@@ -137,7 +137,7 @@ export default function Lec11Icp() {
               ]}
               lines={
                 pairCoords.length > 0
-                  ? [{ positions: pairCoords, color: "#facc15", opacity: 0.55 }]
+                  ? [{ positions: pairCoords, color: "#e2e8f0", opacity: 0.6 }]
                   : undefined
               }
             />