Render STL as fixed white top-view silhouette

SUB Control/web/model-viewer.js

@@ -2,8 +2,8 @@
   const canvas = document.querySelector('#model-canvas');
   const stage = document.querySelector('.rov-stage');
   const ctx = canvas.getContext('2d');
-  let vertices = null, yaw = -.55, pitch = -.42, zoom = 1, edgesOnly = false;
-  let dragging = false, lastX = 0, lastY = 0, frame = 0;
+  let vertices = null, frame = 0;
+  const renderScale = .62;
 
   function parseStl(buffer) {
     const view = new DataView(buffer);
@@ -37,39 +37,44 @@
     return new Float32Array(raw);
   }
 
-  function rotated(x,y,z) {
-    const cy=Math.cos(yaw),sy=Math.sin(yaw),cp=Math.cos(pitch),sp=Math.sin(pitch);
-    const x1=x*cy+z*sy,z1=-x*sy+z*cy;
-    return [x1,y*cp-z1*sp,y*sp+z1*cp];
-  }
-
   function draw() {
     frame=0;if(!vertices)return;
-    const rect=canvas.getBoundingClientRect(),dpr=Math.min(devicePixelRatio||1,2);
-    const width=Math.max(1,Math.round(rect.width*dpr)),height=Math.max(1,Math.round(rect.height*dpr));
+    const rect=canvas.getBoundingClientRect();
+    const width=Math.max(1,Math.round(rect.width*renderScale)),height=Math.max(1,Math.round(rect.height*renderScale));
     if(canvas.width!==width||canvas.height!==height){canvas.width=width;canvas.height=height}
-    ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,rect.width,rect.height);
-    const size=Math.min(rect.width,rect.height)*.39*zoom,cx=rect.width/2,cy=rect.height/2;
-    const tris=[];
-    for(let i=0;i<vertices.length;i+=9){const a=rotated(vertices[i],vertices[i+1],vertices[i+2]),b=rotated(vertices[i+3],vertices[i+4],vertices[i+5]),c=rotated(vertices[i+6],vertices[i+7],vertices[i+8]);tris.push({a,b,c,z:(a[2]+b[2]+c[2])/3})}
-    tris.sort((a,b)=>a.z-b.z);
-    ctx.lineJoin='round';ctx.lineWidth=.65;
-    for(const t of tris){const ax=cx+t.a[0]*size,ay=cy-t.a[1]*size,bx=cx+t.b[0]*size,by=cy-t.b[1]*size,cx2=cx+t.c[0]*size,cy2=cy-t.c[1]*size;const nz=(bx-ax)*(cy2-ay)-(by-ay)*(cx2-ax),light=Math.max(0,Math.min(1,.25+Math.abs(nz)/(size*size)*5));ctx.beginPath();ctx.moveTo(ax,ay);ctx.lineTo(bx,by);ctx.lineTo(cx2,cy2);ctx.closePath();ctx.fillStyle=edgesOnly?'rgba(79,96,102,.035)':`rgba(${55+light*80},${67+light*82},${72+light*84},.88)`;ctx.strokeStyle=edgesOnly?'rgba(183,210,216,.72)':'rgba(171,193,198,.25)';ctx.fill();ctx.stroke()}
+    ctx.setTransform(1,0,0,1,0,0);ctx.clearRect(0,0,width,height);
+    const mask=document.createElement('canvas'),maskCtx=mask.getContext('2d');
+    mask.width=width;mask.height=height;
+    const size=Math.min(width,height)*.43,cx=width/2,cy=height/2;
+    maskCtx.fillStyle='#fff';
+    for(let i=0;i<vertices.length;i+=9){
+      maskCtx.beginPath();
+      maskCtx.moveTo(cx+vertices[i]*size,cy-vertices[i+1]*size);
+      maskCtx.lineTo(cx+vertices[i+3]*size,cy-vertices[i+4]*size);
+      maskCtx.lineTo(cx+vertices[i+6]*size,cy-vertices[i+7]*size);
+      maskCtx.closePath();maskCtx.fill();
+    }
+    // A filtered copy creates only the exterior contour; triangle boundaries
+    // never enter the final image because the source is a single solid mask.
+    ctx.save();
+    ctx.filter='drop-shadow(0 0 1.2px rgba(8,15,17,.9)) drop-shadow(0 4px 5px rgba(0,0,0,.28))';
+    ctx.drawImage(mask,0,0);ctx.restore();
+    const surface=document.createElement('canvas'),surfaceCtx=surface.getContext('2d');
+    surface.width=width;surface.height=height;
+    const gradient=surfaceCtx.createLinearGradient(0,0,width,height);
+    gradient.addColorStop(0,'#ffffff');gradient.addColorStop(.58,'#f4f5f2');gradient.addColorStop(1,'#dfe2de');
+    surfaceCtx.fillStyle=gradient;surfaceCtx.fillRect(0,0,width,height);
+    surfaceCtx.globalCompositeOperation='destination-in';surfaceCtx.drawImage(mask,0,0);
+    ctx.drawImage(surface,0,0);
   }
   function requestDraw(){if(!frame)frame=requestAnimationFrame(draw)}
-
-  canvas.addEventListener('pointerdown',e=>{dragging=true;lastX=e.clientX;lastY=e.clientY;canvas.setPointerCapture(e.pointerId)});
-  canvas.addEventListener('pointermove',e=>{if(!dragging)return;yaw+=(e.clientX-lastX)*.012;pitch=Math.max(-1.45,Math.min(1.45,pitch+(e.clientY-lastY)*.012));lastX=e.clientX;lastY=e.clientY;requestDraw()});
-  canvas.addEventListener('pointerup',()=>dragging=false);
-  canvas.addEventListener('wheel',e=>{e.preventDefault();zoom=Math.max(.55,Math.min(2.2,zoom*(e.deltaY>0?.9:1.1)));requestDraw()},{passive:false});
   addEventListener('resize',requestDraw);
 
   window.rovModel = {
     loadBuffer(buffer, name) {
       vertices=parseStl(buffer);stage.classList.add('model-loaded');
-      document.querySelector('#model-style').disabled=false;
       document.querySelector('#model-file-name').textContent=name;
-      yaw=-.55;pitch=-.42;zoom=1;requestDraw();
+      requestDraw();
       return {name,triangles:vertices.length/9};
     },
     load(payload) {
@@ -77,7 +82,6 @@
       const binary=atob(payload.data),bytes=new Uint8Array(binary.length);
       for(let i=0;i<binary.length;i++)bytes[i]=binary.charCodeAt(i);
       return this.loadBuffer(bytes.buffer,payload.name);
-    },
-    toggleStyle() { edgesOnly=!edgesOnly;requestDraw();return edgesOnly; }
+    }
   };
 })();