floppyrj45/cosma-nav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: guard all 3D calls behind webglOk — chart fonctionne sans WebGL

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Floppyrj45
2026-04-24 21:47:57 +02:00
parent 1fd15cd3db
commit 8ef1c3d8a6
1 changed files with 101 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
viz/static/js/scene.js
View File

@@ -3,29 +3,33 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// ── Renderer ──────────────────────────────────────────────────────────────────
const viewerEl = document.getElementById('viewer');
const renderer = new THREE.WebGLRenderer({ antialias: true });
let renderer, scene, camera, controls, webglOk = false;
try {
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(viewerEl.clientWidth, viewerEl.clientHeight);
viewerEl.appendChild(renderer.domElement);
webglOk = true;
} catch(e) {
viewerEl.innerHTML = '<div style="color:#556;font-size:11px;padding:20px">WebGL indisponible — rechargez la page ou fermez les autres onglets.</div>';
}
// ── Scene ─────────────────────────────────────────────────────────────────────
const scene = new THREE.Scene();
const layers = {};
if (webglOk) {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x06060f);
scene.fog = new THREE.Fog(0x06060f, 500, 2000);
scene.add(new THREE.GridHelper(1000, 100, 0x111133, 0x0a0a22));
scene.add(new THREE.AxesHelper(5));
// ── Camera + Controls ─────────────────────────────────────────────────────────
const camera = new THREE.PerspectiveCamera(60, viewerEl.clientWidth / viewerEl.clientHeight, 0.1, 5000);
camera = new THREE.PerspectiveCamera(60, viewerEl.clientWidth / viewerEl.clientHeight, 0.1, 5000);
camera.position.set(0, 150, 250);
const controls = new OrbitControls(camera, renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.minDistance = 1;
controls.maxDistance = 3000;
// ── Layer registry ────────────────────────────────────────────────────────────
const layers = {};
}
function addLayer(name, obj) {
layers[name] = layers[name] || [];
@@ -96,6 +100,7 @@ fetch('/api/trajectory')
document.getElementById('status').textContent =
`traj: ${d.traj_status || 'n/a'}`;
if (webglOk) {
if (d.usv_gps) {
const { x, y, z, rtk } = d.usv_gps;
addLayer('usv_gps', makeLine(x, y, z, 0x3a9fff));
@@ -114,13 +119,12 @@ fetch('/api/trajectory')
addLayer(trajLayer, makeLine(x, y, z, d.fused ? 0xffffff : 0xffd700));
if (T_4x4 && T_4x4.length > 0) {
const step = Math.max(1, Math.floor(T_4x4.length / 100)); // max 100 frustums
const step = Math.max(1, Math.floor(T_4x4.length / 100));
for (let i = 0; i < T_4x4.length; i += step) {
addLayer('frustums', makeFrustum(T_4x4[i]));
}
}
// Center camera
if (x.length > 0) {
controls.target.set(x[0], z[0], -y[0]);
camera.position.set(x[0], z[0] + 50, -y[0] + 100);
@@ -136,7 +140,6 @@ fetch('/api/trajectory')
}));
}
// If only USV GPS, center on that
if (!trajData && d.usv_gps) {
const { x, y, z } = d.usv_gps;
const cx = x.reduce((a,b)=>a+b,0)/x.length;
@@ -145,30 +148,40 @@ fetch('/api/trajectory')
camera.position.set(cx, 50, -cy + 80);
controls.update();
}
}
// 2D depth/altitude chart
// 2D cross-section chart: surface=0, AUV below (negative), seafloor even lower
if (d.auv_profile) {
const { t_s, depth_m, altitude_m } = d.auv_profile;
const hasAlt = altitude_m && altitude_m.some(v => !isNaN(v) && v !== null);
// depth_m from HDF5 is already negative (below surface)
// altitude_m is positive (above seafloor), filter zeros (Kogger not yet reading)
const ALT_MIN = 0.3;
const datasets = [
{
label: 'Depth (m)',
data: t_s.map((t, i) => ({ x: t, y: -depth_m[i] })),
label: 'AUV (m sous surface)',
data: t_s.map((t, i) => ({ x: t, y: depth_m[i] })),
borderColor: '#3a9fff',
backgroundColor: 'rgba(58,159,255,0.08)',
borderWidth: 1.5,
backgroundColor: 'rgba(58,159,255,0.10)',
borderWidth: 2,
pointRadius: 0,
fill: true,
fill: { target: 'origin', above: 'rgba(58,159,255,0.05)' },
},
];
const hasAlt = altitude_m && altitude_m.some(v => v > ALT_MIN);
if (hasAlt) {
datasets.push({
label: 'Altitude above seafloor (m)',
data: t_s.map((t, i) => ({ x: t, y: altitude_m[i] })),
label: 'Fond marin (m sous surface)',
// seafloor = AUV depth - altitude above seafloor; null where altitude unreliable
data: t_s.map((t, i) => ({
x: t,
y: (altitude_m[i] > ALT_MIN) ? depth_m[i] - altitude_m[i] : null,
})),
borderColor: '#44ffaa',
backgroundColor: 'transparent',
backgroundColor: 'rgba(68,255,170,0.06)',
borderWidth: 1.5,
pointRadius: 0,
spanGaps: false,
fill: 'end',
});
}
Chart.defaults.color = '#556';
@@ -182,19 +195,20 @@ fetch('/api/trajectory')
maintainAspectRatio: false,
parsing: false,
plugins: {
legend: { labels: { color: '#889', font: { size: 10, family: 'Courier New' } } },
legend: { labels: { color: '#889', font: { size: 10, family: 'Courier New' }, boxWidth: 20 } },
tooltip: { enabled: false },
},
scales: {
x: {
type: 'linear',
title: { display: true, text: 'Time (s)', color: '#445' },
title: { display: true, text: 'Temps (s)', color: '#445' },
ticks: { color: '#445', font: { size: 9 } },
grid: { color: '#111' },
},
y: {
suggestedMin: 0,
title: { display: true, text: 'm', color: '#445' },
reverse: false,
suggestedMax: 0,
title: { display: true, text: 'profondeur (m)', color: '#445' },
ticks: { color: '#445', font: { size: 9 } },
grid: { color: '#111' },
},
@@ -216,15 +230,17 @@ document.querySelectorAll('[data-layer]').forEach(cb => {
});
// ── Resize ────────────────────────────────────────────────────────────────────
if (webglOk) {
window.addEventListener('resize', () => {
camera.aspect = viewerEl.clientWidth / viewerEl.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(viewerEl.clientWidth, viewerEl.clientHeight);
});
// ── Render loop ───────────────────────────────────────────────────────────────
// ── Render loop ─────────────────────────────────────────────────────────────
(function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
})();
}