fix(viz): keep playback feet outward and extend to 30cm

This commit is contained in:
5shekel
2026-02-19 09:03:35 +02:00
parent 1c1ed9fcbe
commit 4f9402ccec
3 changed files with 23 additions and 10 deletions

View File

@@ -39,7 +39,7 @@
<site name="near_D_site" pos="-0.1460 0 -0.1728" size="0.006" rgba="1 1 0 1"/>
<site name="near_F_site" pos="-0.2795 0 -0.3535" size="0.007" rgba="1 0.8 0.1 1"/>
<geom name="near_front_foot" type="sphere" pos="-0.2795 0 -0.3535" size="0.022" mass="0.12" rgba="0.95 0.62 0.26 1"/>
<geom name="near_front_foot_lateral" type="capsule" fromto="-0.2795 0 -0.3535 -0.2795 0.10 -0.3535" size="0.009" mass="0.05" rgba="0.95 0.62 0.26 1"/>
<geom name="near_front_foot_lateral" type="capsule" fromto="-0.2795 0 -0.3535 -0.2795 0.30 -0.3535" size="0.009" mass="0.05" rgba="0.95 0.62 0.26 1"/>
</body>
<body name="near_leg_g" pos="-0.0024 0 -0.0457">
@@ -48,7 +48,7 @@
<site name="near_E_site" pos="0.1408 0 -0.1660" size="0.006" rgba="1 1 0 1"/>
<site name="near_G_site" pos="0.2801 0 -0.3522" size="0.007" rgba="1 0.8 0.1 1"/>
<geom name="near_rear_foot" type="sphere" pos="0.2801 0 -0.3522" size="0.022" mass="0.12" rgba="0.95 0.62 0.26 1"/>
<geom name="near_rear_foot_lateral" type="capsule" fromto="0.2801 0 -0.3522 0.2801 0.10 -0.3522" size="0.009" mass="0.05" rgba="0.95 0.62 0.26 1"/>
<geom name="near_rear_foot_lateral" type="capsule" fromto="0.2801 0 -0.3522 0.2801 0.30 -0.3522" size="0.009" mass="0.05" rgba="0.95 0.62 0.26 1"/>
</body>
</body>
@@ -73,7 +73,7 @@
<site name="far_D_site" pos="-0.1460 0 -0.1728" size="0.006" rgba="1 1 0 0.9"/>
<site name="far_F_site" pos="-0.2795 0 -0.3535" size="0.007" rgba="1 0.8 0.1 0.9"/>
<geom name="far_front_foot" type="sphere" pos="-0.2795 0 -0.3535" size="0.022" mass="0.12" rgba="0.95 0.62 0.26 0.75"/>
<geom name="far_front_foot_lateral" type="capsule" fromto="-0.2795 -0.10 -0.3535 -0.2795 0 -0.3535" size="0.009" mass="0.05" rgba="0.95 0.62 0.26 0.75"/>
<geom name="far_front_foot_lateral" type="capsule" fromto="-0.2795 -0.30 -0.3535 -0.2795 0 -0.3535" size="0.009" mass="0.05" rgba="0.95 0.62 0.26 0.75"/>
</body>
<body name="far_leg_g" pos="-0.0024 0 -0.0457">
@@ -82,7 +82,7 @@
<site name="far_E_site" pos="0.1408 0 -0.1660" size="0.006" rgba="1 1 0 0.9"/>
<site name="far_G_site" pos="0.2801 0 -0.3522" size="0.007" rgba="1 0.8 0.1 0.9"/>
<geom name="far_rear_foot" type="sphere" pos="0.2801 0 -0.3522" size="0.022" mass="0.12" rgba="0.95 0.62 0.26 0.75"/>
<geom name="far_rear_foot_lateral" type="capsule" fromto="0.2801 -0.10 -0.3522 0.2801 0 -0.3522" size="0.009" mass="0.05" rgba="0.95 0.62 0.26 0.75"/>
<geom name="far_rear_foot_lateral" type="capsule" fromto="0.2801 -0.30 -0.3522 0.2801 0 -0.3522" size="0.009" mass="0.05" rgba="0.95 0.62 0.26 0.75"/>
</body>
</body>

View File

@@ -15,7 +15,7 @@ const COLORS = {
traceFar: '#b483ff',
};
const FOOT_OUTWARD_CM = 10;
const FOOT_OUTWARD_CM = 30;
function drawLine(ctx, a, b, style = '#fff', width = 2) {
ctx.beginPath();

View File

@@ -29,7 +29,7 @@ const SIDE_LINKS = [
const JOINT_KEYS = ['A', 'B', 'O', 'C', 'D', 'E', 'F', 'G'];
const INITIAL_CAMERA_POSITION = { x: 22.744, y: -83.162, z: 120.597 };
const INITIAL_CAMERA_TARGET = { x: 98.958, y: -134.091, z: 0 };
const FOOT_OUTWARD_CM = 10;
const FOOT_OUTWARD_CM = 30;
function toVec3(point, z = 0) {
return new THREE.Vector3(point.x, -point.y, z);
@@ -244,10 +244,9 @@ export function create3DRenderer(mountEl) {
const sideOffset = 8;
function setFootBarOutward(line, center, defaultDir) {
function setFootBarOutward(line, center, dir) {
const a = center.clone();
const b = center.clone();
const dir = Math.abs(center.z) > 1e-4 ? Math.sign(center.z) : defaultDir;
b.z += dir * FOOT_OUTWARD_CM;
setLinePoints(line, a, b);
}
@@ -304,6 +303,20 @@ export function create3DRenderer(mountEl) {
const usePlayback = Boolean(playbackPose);
const playbackUnits = state.mujocoPlayback?.units || 'meters';
let playbackNearDir = 1;
let playbackFarDir = -1;
if (usePlayback) {
const nearPts = [near.C, near.F, near.G].filter(Boolean);
const farPts = [far.C, far.F, far.G].filter(Boolean);
if (nearPts.length && farPts.length) {
const nearMeanZ = nearPts.reduce((acc, p) => acc + mujocoToVec3(p, playbackUnits).z, 0) / nearPts.length;
const farMeanZ = farPts.reduce((acc, p) => acc + mujocoToVec3(p, playbackUnits).z, 0) / farPts.length;
if (nearMeanZ < farMeanZ) {
playbackNearDir = -1;
playbackFarDir = 1;
}
}
}
for (const key of JOINT_KEYS) {
if (usePlayback) {
@@ -353,7 +366,7 @@ export function create3DRenderer(mountEl) {
if (usePlayback) {
const center = mujocoToVec3(p, playbackUnits);
setFootBarOutward(item.line, center, -1);
setFootBarOutward(item.line, center, playbackNearDir);
} else {
const center = toVec3(p, -sideOffset);
setFootBarOutward(item.line, center, -1);
@@ -390,7 +403,7 @@ export function create3DRenderer(mountEl) {
if (usePlayback) {
const center = mujocoToVec3(p, playbackUnits);
setFootBarOutward(item.line, center, 1);
setFootBarOutward(item.line, center, playbackFarDir);
} else {
const center = toVec3(p, sideOffset);
setFootBarOutward(item.line, center, 1);