Update documentation to 2022b+ (cyberbotics#5782)

* Update documentation to 2022b+

Signed-off-by: Gaël Écorchard <gael.ecorchard@cvut.cz>

Co-authored-by: Olivier Michel <Olivier.Michel@cyberbotics.com>

* Minor improvements

* Updated screenshots

---------

Co-authored-by: Olivier Michel <Olivier.Michel@cyberbotics.com>

Author: galou

docs/reference/images/three_chairs_proto_example.png

@@ -12,14 +12,14 @@ This allows to store the position and orientation of the PROTO instances.
 "TwoColorChair.proto":
 
 ```
-#VRML_SIM R2023a utf8
+#VRML_SIM {{ webots.version.major }} utf8
 # license: Creative Commons Attribution 4.0 International License.
 # license url: https://creativecommons.org/licenses/by/4.0/legalcode
 # documentation url: https://www.cyberbotics.com/doc/guide/object-chairs
 # A two-color chair
 
 PROTO TwoColorChair [
-  field SFVec3f    translation       0 0.91 0
+  field SFVec3f    translation       0 0 0.91
   field SFRotation rotation          0 0 1 0
   field SFString   name              "two-color chair"
   field SFColor    legColor          1 1 0
@@ -33,11 +33,11 @@ PROTO TwoColorChair [
     rotation IS rotation
     children [
       Transform {
-        translation 0 0 -0.27
+        translation 0.27 0 0
         children IS seatExtensionSlot
       }
       Transform {
-        translation 0 -0.35 0
+        translation 0 0 -0.35
         children [
           Shape {
             appearance Appearance {
@@ -48,26 +48,26 @@ PROTO TwoColorChair [
         ]
       }
       Transform {
-        translation 0.25 -0.65 -0.23
+        translation 0.23 -0.25 -0.65
         children [
           DEF LEG_SHAPE Shape {
             appearance Appearance {
               material Material { diffuseColor IS legColor }
             }
-            geometry Box { size 0.075 0.52 0.075 }
+            geometry Box { size 0.075 0.075 0.52 }
           }
         ]
       }
       Transform {
-        translation -0.25 -0.65 -0.23
+        translation 0.23 0.25 -0.65
         children [ USE LEG_SHAPE ]
       }
       Transform {
-        translation 0.25 -0.65 0.2
+        translation -0.2 -0.25 -0.65
         children [ USE LEG_SHAPE ]
       }
       Transform {
-        translation -0.25 -0.65 0.2
+        translation -0.2 0.25 -0.65
         children [ USE LEG_SHAPE ]
       }
     ]
@@ -88,30 +88,39 @@ Field values which differ from the default must be specified.
 "ThreeChairs.wbt":
 
 ```
-#VRML_SIM R2023a utf8
+#VRML_SIM {{ webots.version.major }} utf8
+
+EXTERNPROTO "https://raw.githubusercontent.com/cyberbotics/webots/{{ webots.version.major }}/projects/appearances/protos/DamascusSteel.proto"
+EXTERNPROTO "https://raw.githubusercontent.com/cyberbotics/webots/{{ webots.version.major }}/projects/appearances/protos/VarnishedPine.proto"
+EXTERNPROTO "https://raw.githubusercontent.com/cyberbotics/webots/{{ webots.version.major }}/projects/objects/backgrounds/protos/TexturedBackground.proto"
+EXTERNPROTO "https://raw.githubusercontent.com/cyberbotics/webots/{{ webots.version.major }}/projects/objects/backgrounds/protos/TexturedBackgroundLight.proto"
+EXTERNPROTO "https://raw.githubusercontent.com/cyberbotics/webots/{{ webots.version.major }}/projects/objects/floors/protos/Floor.proto"
+EXTERNPROTO "../protos/TwoColorChair.proto"
 
 WorldInfo {
 }
 Viewpoint {
-  orientation -0.47498 0.85080 0.22479 1.07385
-  position 4.45734 2.27766 4.69356
+  orientation -0.141 0.263 0.954 1.078
+  position -0.863 -3.489 1.757
+}
+TexturedBackground {
 }
 TexturedBackgroundLight {
+  luminosity 0.5
   castShadows FALSE
 }
 PointLight {
   attenuation 0 0 1
-  intensity 21
-  location 4 4 -1
+  intensity 20
+  location -4 -4 1
   radius 10
   castShadows TRUE
 }
 Floor {
-  translation 0 -0.91 0
   size 20 20
 }
 DEF GREEN_STOOL TwoColorChair {
-  translation 1 0 3
+  translation 0 0 0.9
   name "two-color chair(2)"
   legColor 0 0.666667 0
   seatColor 0.235294 0.470588 0
@@ -121,13 +130,13 @@ DEF GREEN_STOOL TwoColorChair {
   }
 }
 DEF YELLOW_CHAIR TwoColorChair {
-  translation 1 0 2
+  translation 1 0 0.9
   seatGeometry Box {
-    size 0.6 0.1 0.6
+    size 0.6 0.6 0.1
   }
   seatExtensionSlot [
     Transform {
-      translation -0.28 -0.014 0.27
+      translation -0.27 0.28 -0.014
       children [
         Shape {
           appearance PBRAppearance {
@@ -136,20 +145,20 @@ DEF YELLOW_CHAIR TwoColorChair {
             metalness 0
           }
           geometry Box {
-            size 0.03 0.7 0.6
+            size 0.6 0.03 0.7
           }
         }
       ]
     }
   ]
 }
 DEF DAMACUS_SPHERE TwoColorChair {
-  translation 1 0 0
+  translation 3 0 0.9
   name "two-color chair(1)"
   legColor 0.678431 0.678431 0.678431
   seatExtensionSlot [
     Transform {
-      translation 0 -0.29 0.27
+      translation -0.27 0 -0.29
       children [
         Shape {
           appearance DamascusSteel {
@@ -164,22 +173,22 @@ DEF DAMACUS_SPHERE TwoColorChair {
   ]
 }
 DEF WOODEN_CHAIR TwoColorChair {
-  translation 1 0 1
+  translation 2 0 0.9
   name "two-color chair(3)"
   legColor 0.478431 0.239216 0
   seatColor 0.666667 0.333333 0
   seatGeometry Box {
-    size 0.6 0.1 0.6
+    size 0.6 0.6 0.1
   }
   seatExtensionSlot [
     Transform {
-      translation -0.25 0.05 0.27
+      translation -0.27 0.25 0.05
       children [
         Shape {
           appearance VarnishedPine {
           }
           geometry Box {
-            size 0.1 0.7 0.6
+            size 0.6 0.1 0.7
           }
         }
       ]