dsrptlab/pickle_vision
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: smooth polygon coverage, angle 15°, overlap blends to purple

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-03-07 11:44:06 +07:00
parent 72e6d1c191
commit 014cc03677
1 changed files with 53 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/web/templates/index.html
View File

@@ -631,7 +631,7 @@ function addStereocameras(scene) {
// Position: net line (X=6.7), 1m outside court edge (Y=-1), 1m height (Z=1) // Position: net line (X=6.7), 1m outside court edge (Y=-1), 1m height (Z=1)
var baseX = 6.7, baseY = -1, baseZ = 1; var baseX = 6.7, baseY = -1, baseZ = 1;
var stereoGap = 0.06; // 6cm between cameras var stereoGap = 0.06; // 6cm between cameras
var camAngle = 28; // degrees each camera is rotated outward from straight +Y var camAngle = 15; // degrees each camera is rotated outward from straight +Y
var hfov = 160; // horizontal FOV degrees var hfov = 160; // horizontal FOV degrees
var cam0x = baseX - stereoGap / 2; var cam0x = baseX - stereoGap / 2;
@@ -661,54 +661,63 @@ function addStereocameras(scene) {
var deg2rad = Math.PI / 180; var deg2rad = Math.PI / 180;
var halfFov = hfov / 2; var halfFov = hfov / 2;
// Rasterize coverage onto a grid, then draw colored quads function buildCoveragePolygon(cx, angleDeg) {
var gridRes = 0.2; // 20cm per cell var centerAngle = 90 + angleDeg;
var cols = Math.ceil((courtMaxX - courtMinX) / gridRes); var leftAngle = centerAngle + halfFov;
var rows = Math.ceil((courtMaxY - courtMinY) / gridRes); var rightAngle = centerAngle - halfFov;
// 0 = no coverage, 1 = cam0 only, 2 = cam1 only, 3 = both var ox = cx, oy = baseY;
var grid = new Array(cols * rows).fill(0);
function markCoverage(cx, angleDeg, bit) { function rayToCourtEdge(aDeg) {
var centerAngle = (90 + angleDeg) * deg2rad; var rad = aDeg * deg2rad;
var halfFovRad = halfFov * deg2rad; var dx = Math.cos(rad);
var leftAngle = centerAngle + halfFovRad; var dy = Math.sin(rad);
var rightAngle = centerAngle - halfFovRad; if (dy <= 0) return null;
for (var r = 0; r < rows; r++) { var tMax = 50;
for (var c = 0; c < cols; c++) { if (dy > 1e-9) tMax = Math.min(tMax, (courtMaxY - oy) / dy);
var cellX = courtMinX + (c + 0.5) * gridRes; if (dx > 1e-9) tMax = Math.min(tMax, (courtMaxX - ox) / dx);
var cellY = courtMinY + (r + 0.5) * gridRes; else if (dx < -1e-9) tMax = Math.min(tMax, (courtMinX - ox) / dx);
var dx = cellX - cx;
var dy = cellY - baseY; var tEnter = (courtMinY - oy) / dy;
var angle = Math.atan2(dy, dx); if (tMax <= tEnter) return null;
if (angle >= rightAngle && angle <= leftAngle) { var t = Math.max(tEnter, 0.01);
grid[r * cols + c] |= bit; t = tMax;
} var px = ox + dx * t;
} var py = oy + dy * t;
px = Math.max(courtMinX, Math.min(courtMaxX, px));
py = Math.max(courtMinY, Math.min(courtMaxY, py));
return new THREE.Vector3(px, py, 0.015);
}
var points = [];
var steps = 64;
for (var i = 0; i <= steps; i++) {
var a = rightAngle + (leftAngle - rightAngle) * (i / steps);
var pt = rayToCourtEdge(a);
if (pt) points.push(pt);
}
return points;
}
function drawCoverageFan(points, color) {
if (points.length < 2) return;
var origin = new THREE.Vector3(points[0].x, courtMinY, 0.015);
for (var i = 0; i < points.length - 1; i++) {
var triGeo = new THREE.BufferGeometry().setFromPoints([
origin, points[i], points[i + 1]
]);
scene.add(new THREE.Mesh(triGeo, new THREE.MeshBasicMaterial({
color: color, transparent: true, opacity: 0.35, side: THREE.DoubleSide,
depthWrite: false
})));
} }
} }
markCoverage(cam0x, -camAngle, 1); var poly0 = buildCoveragePolygon(cam0x, -camAngle);
markCoverage(cam1x, camAngle, 2); var poly1 = buildCoveragePolygon(cam1x, camAngle);
drawCoverageFan(poly0, 0x4488ff); // blue
// Colors: cam0 only = blue, cam1 only = pink, overlap = purple drawCoverageFan(poly1, 0xff44aa); // pink
var colors = { 1: 0x4488ff, 2: 0xff44aa, 3: 0xaa44ff }; // overlap blends to purple naturally
var opacities = { 1: 0.35, 2: 0.35, 3: 0.5 };
for (var r = 0; r < rows; r++) {
for (var c = 0; c < cols; c++) {
var val = grid[r * cols + c];
if (val === 0) continue;
var x1 = courtMinX + c * gridRes;
var y1 = courtMinY + r * gridRes;
var quad = new THREE.PlaneGeometry(gridRes, gridRes);
var mesh = new THREE.Mesh(quad, new THREE.MeshBasicMaterial({
color: colors[val], transparent: true, opacity: opacities[val], side: THREE.DoubleSide
}));
mesh.position.set(x1 + gridRes / 2, y1 + gridRes / 2, 0.015);
scene.add(mesh);
}
}
} }
// ===================== Draw court lines ===================== // ===================== Draw court lines =====================