Add pen optional rendering to the web proto viewer

resources/web/wwi/FloatingProtoParameterWindow.js

@@ -4,6 +4,7 @@ import WbCamera from './nodes/WbCamera.js';
 import WbHingeJoint from './nodes/WbHingeJoint.js';
 import WbLidar from './nodes/WbLidar.js';
 import WbLightSensor from './nodes/WbLightSensor.js';
+import WbPen from './nodes/WbPen.js';
 import WbRadar from './nodes/WbRadar.js';
 import WbWorld from './nodes/WbWorld.js';
 import WbRangeFinder from './nodes/WbRangeFinder.js';
@@ -508,7 +509,7 @@ export default class FloatingProtoParameterWindow extends FloatingWindow {
       const device = nodes.get(key);
       // TODO once all the optional rendering are implemented, replace this list by device instanceof WbDevice
       if (device instanceof WbCamera || device instanceof WbRangeFinder || device instanceof WbLidar ||
-        device instanceof WbRadar || device instanceof WbLightSensor) {
+        device instanceof WbRadar || device instanceof WbLightSensor || device instanceof WbPen) {
         numberOfDevices++;
 
         let div = document.createElement('div');

resources/web/wwi/Parser.js

@@ -640,9 +640,10 @@ export default class Parser {
         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') {
+    else if (node.tagName === 'Pen') {
+      const write = getNodeAttribute(node, 'write', 'true').toLowerCase() === 'true';
+      newNode = new WbPen(id, translation, scale, rotation, name === '' ? 'pen' : name, write);
+    } else if (node.tagName === 'Radar') {
       const horizontalFieldOfView = parseFloat(getNodeAttribute(node, 'horizontalFieldOfView', '0.78'));
       const verticalFieldOfView = parseFloat(getNodeAttribute(node, 'verticalFieldOfView', '0.1'));
       const maxRange = parseFloat(getNodeAttribute(node, 'maxRange', '50'));

resources/web/wwi/X3dScene.js

@@ -8,6 +8,7 @@ import WbBox from './nodes/WbBox.js';
 import WbCadShape from './nodes/WbCadShape.js';
 import WbCamera from './nodes/WbCamera.js';
 import WbCapsule from './nodes/WbCapsule.js';
+import WbColor from './nodes/WbColor.js';
 import WbCone from './nodes/WbCone.js';
 import WbCoordinate from './nodes/WbCoordinate.js';
 import WbCylinder from './nodes/WbCylinder.js';
@@ -21,10 +22,10 @@ import WbLidar from './nodes/WbLidar.js';
 import WbLight from './nodes/WbLight.js';
 import WbMaterial from './nodes/WbMaterial.js';
 import WbMesh from './nodes/WbMesh.js';
+import WbPen from './nodes/WbPen.js';
 import WbPbrAppearance from './nodes/WbPbrAppearance.js';
 import WbPlane from './nodes/WbPlane.js';
 import WbPointLight from './nodes/WbPointLight.js';
-import WbColor from './nodes/WbColor.js';
 import WbRadar from './nodes/WbRadar.js';
 import WbSphere from './nodes/WbSphere.js';
 import WbTextureCoordinate from './nodes/WbTextureCoordinate.js';
@@ -424,6 +425,9 @@ export default class X3dScene {
           object.verticalFieldOfView = parseFloat(pose[key]);
         else if (key === 'horizontalFieldOfView')
           object.horizontalFieldOfView = parseFloat(pose[key]);
+      } else if (object instanceof WbPen) {
+        if (key === 'write')
+          object.write = pose[key].toLowerCase() === 'true';
       }
 
       if (object instanceof WbLight) {

resources/web/wwi/nodes/WbAbstractCamera.js

@@ -3,7 +3,6 @@ import WbWrenShaders from '../wren/WbWrenShaders.js';
 import WbWrenRenderingContext from '../wren/WbWrenRenderingContext.js';
 import {arrayXPointerFloat} from './utils/utils.js';
 
-// This class is used to retrieve the type of device
 export default class WbAbstractCamera extends WbSolid {
   #fieldOfView;
   #height;

resources/web/wwi/nodes/WbCamera.js

@@ -1,6 +1,5 @@
 import WbAbstractCamera from './WbAbstractCamera.js';
 
-// This class is used to retrieve the type of device
 export default class WbCamera extends WbAbstractCamera {
   #near;
   #far;

resources/web/wwi/nodes/WbLidar.js

@@ -3,7 +3,6 @@ import WbWrenShaders from '../wren/WbWrenShaders.js';
 import WbWrenRenderingContext from '../wren/WbWrenRenderingContext.js';
 import {arrayXPointerFloat} from './utils/utils.js';
 
-// This class is used to retrieve the type of device
 export default class WbLidar extends WbAbstractCamera {
   #frustumMaterial;
   #frustumMesh;

resources/web/wwi/nodes/WbLightSensor.js

@@ -3,7 +3,6 @@ import WbWrenRenderingContext from '../wren/WbWrenRenderingContext.js';
 import WbWrenShaders from '../wren/WbWrenShaders.js';
 import {arrayXPointerFloat} from './utils/utils.js';
 
-// This class is used to retrieve the type of device
 export default class WbLightSensor extends WbSolid {
   #transform;
   #material;

resources/web/wwi/nodes/WbPen.js

@@ -1,5 +1,82 @@
 import WbSolid from './WbSolid.js';
+import WbWrenRenderingContext from '../wren/WbWrenRenderingContext.js';
+import WbWrenShaders from '../wren/WbWrenShaders.js';
+import {arrayXPointerFloat} from './utils/utils.js';
 
 // This class is used to retrieve the type of device
 export default class WbPen extends WbSolid {
+  #material;
+  #mesh;
+  #renderable;
+  #transform;
+  #write;
+  constructor(id, translation, scale, rotation, name, write) {
+    super(id, translation, scale, rotation, name);
+    this.#write = write;
+  }
+
+  get write() {
+    return this.#write;
+  }
+
+  set write(newWrite) {
+    this.#write = newWrite;
+    this.#update();
+  }
+
+  createWrenObjects() {
+    super.createWrenObjects();
+
+    const coords = [0, 0, -1, 0, 0, 0];
+    const coordsPointer = arrayXPointerFloat(coords);
+    this.#transform = _wr_transform_new();
+    this.#renderable = _wr_renderable_new();
+    this.#material = _wr_phong_material_new();
+
+    this.#mesh = _wr_static_mesh_line_set_new(2, coordsPointer, undefined);
+    _free(coordsPointer);
+
+    const color = _wrjs_array3(0.5, 0.5, 0.5);
+    _wr_phong_material_set_color(this.#material, color);
+    _wr_material_set_default_program(this.#material, WbWrenShaders.lineSetShader());
+
+    _wr_renderable_set_drawing_mode(this.#renderable, Enum.WR_RENDERABLE_DRAWING_MODE_LINES);
+    _wr_renderable_set_mesh(this.#renderable, this.#mesh);
+    _wr_renderable_set_material(this.#renderable, this.#material, undefined);
+    _wr_renderable_set_cast_shadows(this.#renderable, false);
+    _wr_renderable_set_receive_shadows(this.#renderable, false);
+    _wr_renderable_set_visibility_flags(this.#renderable, WbWrenRenderingContext.VM_REGULAR);
+
+    _wr_transform_attach_child(this.#transform, this.#renderable);
+    _wr_transform_attach_child(this.wrenNode, this.#transform);
+    _wr_node_set_visible(this.#transform, false);
+
+    this.#applyOptionalRenderingToWren();
+  }
+
+  applyOptionalRendering(enable) {
+    _wr_node_set_visible(this.#transform, enable);
+  }
+
+  #applyOptionalRenderingToWren() {
+    if (!this.wrenObjectsCreatedCalled)
+      return;
+
+    const lineScale = _wr_config_get_line_scale();
+    const scale = _wrjs_array3(lineScale, lineScale, lineScale);
+    _wr_transform_set_scale(this.#transform, scale);
+
+    if (this.#write) {
+      const enabledColor = _wrjs_array3(0.5, 0, 1);
+      _wr_phong_material_set_color(this.#material, enabledColor);
+    } else {
+      const disabledColor = _wrjs_array3(0.5, 0.5, 0.5);
+      _wr_phong_material_set_color(this.#material, disabledColor);
+    }
+  }
+
+  #update() {
+    if (this.wrenObjectsCreatedCalled)
+      this.#applyOptionalRenderingToWren();
+  }
 }

resources/web/wwi/nodes/WbRadar.js

@@ -3,7 +3,6 @@ import WbWrenShaders from '../wren/WbWrenShaders.js';
 import WbWrenRenderingContext from '../wren/WbWrenRenderingContext.js';
 import {arrayXPointerFloat} from './utils/utils.js';
 
-// This class is used to retrieve the type of device
 export default class WbRadar extends WbSolid {
   #horizontalFieldOfView;
   #material;

resources/web/wwi/nodes/WbRangeFinder.js

@@ -1,6 +1,5 @@
 import WbAbstractCamera from './WbAbstractCamera.js';
 
-// This class is used to retrieve the type of device
 export default class WbRangeFinder extends WbAbstractCamera {
   #maxRange;
   #minRange;

resources/web/wwi/protos/ProtoSensor.proto

@@ -3,8 +3,9 @@
 EXTERNPROTO "https://raw.githubusercontent.com/cyberbotics/webots/R2022b/projects/appearances/protos/Asphalt.proto"
 
 PROTO ProtoSensor [
-field SFVec3f translation 0 0 0.3
-field SFRotation rotation 0 0 1 1.5708
+field SFVec3f      translation    0 0 0.3
+field SFRotation   rotation       0 0 1 1.5708
+field SFBool       write          TRUE
 ]
 {
   Robot {
@@ -20,6 +21,10 @@ field SFRotation rotation 0 0 1 1.5708
           }
         ]
       }
+      Pen {
+        translation IS translation
+        write IS write
+      }
     ]
   }
 }