Web Proto Viewer: RangeFinder and Lidar

resources/web/wwi/FloatingProtoParameterWindow.js

@@ -2,7 +2,9 @@ import FloatingWindow from './FloatingWindow.js';
 import {VRML} from './protoVisualizer/vrml_type.js';
 import WbCamera from './nodes/WbCamera.js';
 import WbHingeJoint from './nodes/WbHingeJoint.js';
+import WbLidar from './nodes/WbLidar.js';
 import WbWorld from './nodes/WbWorld.js';
+import WbRangeFinder from './nodes/WbRangeFinder.js';
 
 export default class FloatingProtoParameterWindow extends FloatingWindow {
   #protoManager;
@@ -502,7 +504,7 @@ export default class FloatingProtoParameterWindow extends FloatingWindow {
 
     for (const key of keys) {
       const device = nodes.get(key);
-      if (device instanceof WbCamera) {
+      if (device instanceof WbCamera || device instanceof WbRangeFinder || device instanceof WbLidar) {
         numberOfDevices++;
 
         let div = document.createElement('div');

resources/web/wwi/Parser.js

@@ -627,16 +627,32 @@ export default class Parser {
       newNode = new WbInertialUnit(id, translation, scale, rotation, name === '' ? 'inertial unit' : name);
     else if (node.tagName === 'LED')
       newNode = new WbLed(id, translation, scale, rotation, name === '' ? 'led' : name);
-    else if (node.tagName === 'Lidar')
-      newNode = new WbLidar(id, translation, scale, rotation, name === '' ? 'lidar' : name);
-    else if (node.tagName === 'LightSensor')
+    else if (node.tagName === 'Lidar') {
+      const fieldOfView = parseFloat(getNodeAttribute(node, 'fieldOfView', Math.PI / 2));
+      const horizontalResolution = parseInt(getNodeAttribute(node, 'horizontalResolution', '512'));
+      const maxRange = parseFloat(getNodeAttribute(node, 'maxRange', '1'));
+      const minRange = parseFloat(getNodeAttribute(node, 'minRange', '0.01'));
+      const numberOfLayers = parseInt(getNodeAttribute(node, 'numberOfLayers', '4'));
+      const tiltAngle = parseFloat(getNodeAttribute(node, 'tiltAngle', '0'));
+      const verticalFieldOfView = parseFloat(getNodeAttribute(node, 'verticalFieldOfView', '0.2'));
+
+      newNode = new WbLidar(id, translation, scale, rotation, name === '' ? 'lidar' : name, fieldOfView, maxRange, minRange,
+        numberOfLayers, tiltAngle, verticalFieldOfView, horizontalResolution);
+    } else if (node.tagName === 'LightSensor')
       newNode = new WbLightSensor(id, translation, scale, rotation, name === '' ? 'light sensor' : name);
     else if (node.tagName === 'Pen')
       newNode = new WbPen(id, translation, scale, rotation, name === '' ? 'pen' : name);
     else if (node.tagName === 'Radar')
       newNode = new WbRadar(id, translation, scale, rotation, name === '' ? 'radar' : name);
-    else if (node.tagName === 'RangeFinder')
-      newNode = new WbRangeFinder(id, translation, scale, rotation, name === '' ? 'range finder' : name);
+    else if (node.tagName === 'RangeFinder') {
+      const height = parseInt(getNodeAttribute(node, 'height', '64'));
+      const width = parseInt(getNodeAttribute(node, 'width', '64'));
+      const fieldOfView = parseFloat(getNodeAttribute(node, 'fieldOfView', M_PI_4));
+      const maxRange = parseFloat(getNodeAttribute(node, 'maxRange', '1'));
+      const minRange = parseFloat(getNodeAttribute(node, 'minRange', '0.01'));
+      newNode = new WbRangeFinder(id, translation, scale, rotation, name === '' ? 'range finder' : name, height, width,
+        fieldOfView, maxRange, minRange);
+    }
     else if (node.tagName === 'Receiver')
       newNode = new WbReceiver(id, translation, scale, rotation, name === '' ? 'receiver' : name);
     else if (node.tagName === 'Speaker')

resources/web/wwi/X3dScene.js

@@ -17,6 +17,7 @@ import WbGroup from './nodes/WbGroup.js';
 import WbImageTexture from './nodes/WbImageTexture.js';
 import WbIndexedFaceSet from './nodes/WbIndexedFaceSet.js';
 import WbIndexedLineSet from './nodes/WbIndexedLineSet.js';
+import WbLidar from './nodes/WbLidar.js';
 import WbLight from './nodes/WbLight.js';
 import WbMaterial from './nodes/WbMaterial.js';
 import WbMesh from './nodes/WbMesh.js';
@@ -37,6 +38,7 @@ import WbVector3 from './nodes/utils/WbVector3.js';
 import WbNormal from './nodes/WbNormal.js';
 import WbSpotLight from './nodes/WbSpotLight.js';
 import WbDirectionalLight from './nodes/WbDirectionalLight.js';
+import WbRangeFinder from './nodes/WbRangeFinder.js';
 
 export default class X3dScene {
   #loader;
@@ -394,6 +396,24 @@ export default class X3dScene {
           object.far = parseFloat(pose[key]);
         else if (key === 'near')
           object.near = parseFloat(pose[key]);
+      } else if (object instanceof WbRangeFinder) {
+        if (key === 'maxRange')
+          object.maxRange = parseFloat(pose[key]);
+        else if (key === 'minRange')
+          object.minRange = parseFloat(pose[key]);
+      } else if (object instanceof WbLidar) {
+        if (key === 'maxRange')
+          object.maxRange = parseFloat(pose[key]);
+        else if (key === 'minRange')
+          object.minRange = parseFloat(pose[key]);
+        else if (key === 'horizontalResolution')
+          object.horizontalResolution = parseInt(pose[key]);
+        else if (key === 'numberOfLayers')
+          object.numberOfLayers = parseInt(pose[key]);
+        else if (key === 'tiltAngle')
+          object.tiltAngle = parseFloat(pose[key]);
+        else if (key === 'verticalFieldOfView')
+          object.verticalFieldOfView = parseFloat(pose[key]);
       }
 
       if (object instanceof WbLight) {

resources/web/wwi/nodes/WbAbstractCamera.js

@@ -7,7 +7,6 @@ import {arrayXPointerFloat} from './utils/utils.js';
 export default class WbAbstractCamera extends WbSolid {
   #fieldOfView;
   #height;
-  #isFrustumEnabled;
   #width;
   constructor(id, translation, scale, rotation, name, height, width, fieldOfView) {
     super(id, translation, scale, rotation, name);
@@ -17,7 +16,7 @@ export default class WbAbstractCamera extends WbSolid {
     this.#width = width;
 
     this._isRangeFinder = false;
-    this.#isFrustumEnabled = false;
+    this._isFrustumEnabled = false;
     this._charType = '';
   }
 
@@ -73,34 +72,38 @@ export default class WbAbstractCamera extends WbSolid {
     this._transform = _wr_transform_new();
     _wr_transform_attach_child(this._transform, this._renderable);
     _wr_transform_attach_child(this.wrenNode, this._transform);
-
-    this.#applyFrustumToWren();
+    this._applyFrustumToWren();
   }
 
-  #applyFrustumToWren() {
+  _applyFrustumToWren() {
     _wr_node_set_visible(this._transform, false);
 
     _wr_static_mesh_delete(this._mesh);
     this._mesh = undefined;
 
-    if (!this.#isFrustumEnabled)
+    if (!this._isFrustumEnabled)
       return;
 
-    const frustumColor = [1, 0, 1];
+    let frustumColor;
+    if (this._charType === 'c')
+      frustumColor = [1, 0, 1];
+    else if (this._charType === 'r')
+      frustumColor = [1, 1, 0];
+
     const frustumColorRgb = _wrjs_array3(frustumColor[0], frustumColor[1], frustumColor[2]);
 
     _wr_phong_material_set_color(this._material, frustumColorRgb);
 
     let drawFarPlane;
     let f;
-    const n = this.minRange();
+    const n = this._minRange();
     // if the far is set to 0 it means the far clipping plane is set to infinity
     // so, the far distance of the colored frustum should be set arbitrarily
-    if (this._charType === 'c' && this.maxRange() === 0) {
+    if (this._charType === 'c' && this._maxRange() === 0) {
       f = n + 2 * _wr_config_get_line_scale();
       drawFarPlane = false;
     } else {
-      f = this.maxRange();
+      f = this._maxRange();
       drawFarPlane = true;
     }
 
@@ -153,21 +156,21 @@ export default class WbAbstractCamera extends WbSolid {
     _wr_node_set_visible(this._transform, true);
   }
 
-  minRange() {
+  _minRange() {
   }
 
-  maxRange() {
+  _maxRange() {
     return 1.0;
   }
 
   _update() {
     if (this.wrenObjectsCreatedCalled)
-      this.#applyFrustumToWren();
+      this._applyFrustumToWren();
   }
 
   applyOptionalRendering(enable) {
-    this.#isFrustumEnabled = enable;
-    this.#applyFrustumToWren();
+    this._isFrustumEnabled = enable;
+    this._applyFrustumToWren();
   }
 
   #addVertex(vertices, colors, vertex, color) {

resources/web/wwi/nodes/WbCamera.js

@@ -39,11 +39,11 @@ export default class WbCamera extends WbAbstractCamera {
     this._update();
   }
 
-  minRange() {
+  _minRange() {
     return this.#near;
   }
 
-  maxRange() {
+  _maxRange() {
     return this.#far;
   }
 }