Add filling and dynamic opacity to lidar shape

Author: Léna Voinchet

js/scene/objects/sensors/Lidar.js

@@ -9,6 +9,7 @@ import {
     Vector3,
     LineSegments,
     Color,
+    DoubleSide,
     Group
 } from 'three';
 
@@ -117,26 +118,47 @@ class Lidar{
 
     buildRaysOutlineHelper() 
     {
+        const firstRayAngle = -Math.PI / 2 - (this.lidarType.fov / 2 * Math.PI / 180);
+        const angularRes = this.lidarType.angularResolution;
+        const angularResRad = angularRes * Math.PI / 180;
+        const fovRad = this.lidarType.fov * Math.PI / 180;
+
+        // Computes dynamic opacity
+        const resMin = 0.01;
+        const resMax = 0.33;
+        const opacityMin = 0.15;
+        const opacityMax = 0.8;
+
+        const clampedRes = Math.max(resMin, Math.min(resMax, angularRes));
+        const t = 1.0 - ((clampedRes - resMin) / (resMax - resMin));
+
+        const dynamicOpacity = opacityMin + t * (opacityMax - opacityMin);
+
+        // Creates materials for line + surface
         const material = new LineBasicMaterial({
             color: this.color,
             transparent: true,
             opacity: 1,
             linewidth: 1
         });
 
-        const firstRayAngle = -Math.PI / 2 - (this.lidarType.fov / 2 * Math.PI / 180);
-        const angularResRad = this.lidarType.angularResolution * Math.PI / 180;
-        const fovRad = this.lidarType.fov * Math.PI / 180;
+        const fillMaterial = new MeshBasicMaterial({
+            color: this.color,
+            transparent: true,
+            opacity: dynamicOpacity,      
+            side: DoubleSide
+        });
+
+        const helperGroup = new Group();
+        helperGroup.name = "LidarHelperGroup";
 
         // Returns an empty line if fov or angular resolution is null
         if (fovRad <= 1e-6 || angularResRad <= 1e-6) {
-            const emptyGeometry = new BufferGeometry();
-            return new LineSegments(emptyGeometry, material);
+            return helperGroup;
         }
 
         // Computes the number of segments needed
         const numArcSegments = Math.max(1, Math.floor(fovRad / angularResRad));
-        console.log(numArcSegments);
 
         const arcPointsInner = [];
         const arcPointsOuter = [];
@@ -156,41 +178,55 @@ class Lidar{
             );
         }
 
+        // --- STEP 1 : BUILD OF LINE ---
         const lineVertices = []; // Array to store lines vertices
 
-        // Inside arc vertices
+        // Inside and outside arcs
         for (let i = 0; i < numArcSegments; i++) {
-            lineVertices.push(arcPointsInner[i].x, arcPointsInner[i].y, arcPointsInner[i].z);
-            lineVertices.push(arcPointsInner[i+1].x, arcPointsInner[i+1].y, arcPointsInner[i+1].z);
+            lineVertices.push(...arcPointsInner[i].toArray(), ...arcPointsInner[i + 1].toArray());
+            lineVertices.push(...arcPointsOuter[i].toArray(), ...arcPointsOuter[i + 1].toArray());
         }
+        // First and last lines (fov)
+        lineVertices.push(...arcPointsInner[0].toArray(), ...arcPointsOuter[0].toArray());
+        lineVertices.push(...arcPointsInner[numArcSegments].toArray(), ...arcPointsOuter[numArcSegments].toArray());
 
-        // Outside arc vertices
-        for (let i = 0; i < numArcSegments; i++) {
-            lineVertices.push(arcPointsOuter[i].x, arcPointsOuter[i].y, arcPointsOuter[i].z);
-            lineVertices.push(arcPointsOuter[i+1].x, arcPointsOuter[i+1].y, arcPointsOuter[i+1].z);
+        const lineGeometry = new BufferGeometry();
+        if (lineVertices.length > 0) {
+            lineGeometry.setAttribute('position', new BufferAttribute(new Float32Array(lineVertices), 3));
         }
 
-        // First radial line (start of Fov)
-        if (arcPointsInner.length > 0 && arcPointsOuter.length > 0) {
-            lineVertices.push(arcPointsInner[0].x, arcPointsInner[0].y, arcPointsInner[0].z);
-            lineVertices.push(arcPointsOuter[0].x, arcPointsOuter[0].y, arcPointsOuter[0].z);
-        }
+        const lineHelper = new LineSegments(lineGeometry, material);
+        lineHelper.name = "LidarRaysOutlineHelper"; // Name for debugg
+        helperGroup.add(lineHelper);
+
+        // --- STEP 2: BUILD OF SURFACE ---
+        const fillVertices = []; // Array to store surface vertices
+
+        for (let i = 0; i < numArcSegments; i++) {
+            const p1 = arcPointsInner[i];
+            const p2 = arcPointsOuter[i];
+            const p3 = arcPointsInner[i+1];
+            const p4 = arcPointsOuter[i+1];
+
+            // Premier triangle (p1, p2, p3)
+            fillVertices.push(...p1.toArray(), ...p2.toArray(), ...p3.toArray());
+
+            // Deuxième triangle (p3, p2, p4)
+            fillVertices.push(...p3.toArray(), ...p2.toArray(), ...p4.toArray());
 
-        // Last radial line (end of Fov)
-        if (arcPointsInner.length > 0 && arcPointsOuter.length > 0) {
-            const lastPointIndex = arcPointsInner.length - 1;
-            lineVertices.push(arcPointsInner[lastPointIndex].x, arcPointsInner[lastPointIndex].y, arcPointsInner[lastPointIndex].z);
-            lineVertices.push(arcPointsOuter[lastPointIndex].x, arcPointsOuter[lastPointIndex].y, arcPointsOuter[lastPointIndex].z);
         }
 
-        const geometry = new BufferGeometry();
-        if (lineVertices.length > 0) {
-            geometry.setAttribute('position', new BufferAttribute(new Float32Array(lineVertices), 3));
+        const fillGeometry = new BufferGeometry();
+        if (fillVertices.length > 0) {
+            fillGeometry.setAttribute('position', new BufferAttribute(new Float32Array(fillVertices), 3));
         }
 
-        const lineHelper = new LineSegments(geometry, material);
-        lineHelper.name = "LidarRaysOutlineHelper"; // Name for debugg
-        return lineHelper;
+        const fillMesh = new Mesh(fillGeometry, fillMaterial);
+        fillMesh.name = "LidarFillHelper";
+        helperGroup.add(fillMesh);
+
+        // --- STEP 3 : RETURN ---
+        return helperGroup;
     }
 
     updateTextPosition()