x_ite 8.10.0 → 8.11.0

package/docs/_posts/getting-started.md

@@ -35,7 +35,7 @@ If you ever get into trouble, please [report a bug](report-a-bug). If you have a
 
 Yeah, tell me!
 
-Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
+X_ITE needs your support, with a small contribution you can make a big difference. To support us, have a look at [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
 
 ## X3D Examples
 
@@ -141,6 +141,9 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Core/STL/STL.x3d" title="Core » STL"><img src="https://create3000.github.io/media/examples/Core/STL/screenshot-small.png" alt="STL"/></a>
     </td>
+    <td>
+      <a href="https://create3000.github.io/media/examples/Core/glTF/glTF.x3d" title="Core » glTF"><img src="https://create3000.github.io/media/examples/Core/glTF/screenshot-small.png" alt="glTF"/></a>
+    </td>
     <td>
       <a href="https://create3000.github.io/media/examples/CubeMapTexturing/ComposedCubeMapTexture/ComposedCubeMapTexture.x3d" title="CubeMapTexturing » ComposedCubeMapTexture"><img src="https://create3000.github.io/media/examples/CubeMapTexturing/ComposedCubeMapTexture/screenshot-small.png" alt="ComposedCubeMapTexture"/></a>
     </td>
@@ -153,11 +156,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/EnvironmentalEffects/Fog/Fog.x3d" title="EnvironmentalEffects » Fog"><img src="https://create3000.github.io/media/examples/EnvironmentalEffects/Fog/screenshot-small.png" alt="Fog"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/EnvironmentalEffects/LocalFog/LocalFog.x3d" title="EnvironmentalEffects » LocalFog"><img src="https://create3000.github.io/media/examples/EnvironmentalEffects/LocalFog/screenshot-small.png" alt="LocalFog"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/EnvironmentalEffects/TextureBackground/TextureBackground.x3d" title="EnvironmentalEffects » TextureBackground"><img src="https://create3000.github.io/media/examples/EnvironmentalEffects/TextureBackground/screenshot-small.png" alt="TextureBackground"/></a>
     </td>
@@ -176,11 +179,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Followers/ColorChaser/ColorChaser.x3d" title="Followers » ColorChaser"><img src="https://create3000.github.io/media/examples/Followers/ColorChaser/screenshot-small.png" alt="ColorChaser"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Followers/ColorDamper/ColorDamper.x3d" title="Followers » ColorDamper"><img src="https://create3000.github.io/media/examples/Followers/ColorDamper/screenshot-small.png" alt="ColorDamper"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Followers/CoordinateChaser/CoordinateChaser.x3d" title="Followers » CoordinateChaser"><img src="https://create3000.github.io/media/examples/Followers/CoordinateChaser/screenshot-small.png" alt="CoordinateChaser"/></a>
     </td>
@@ -199,11 +202,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Geometry2D/Disk2D/Disk2D.x3d" title="Geometry2D » Disk2D"><img src="https://create3000.github.io/media/examples/Geometry2D/Disk2D/screenshot-small.png" alt="Disk2D"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Geometry2D/Polyline2D/Polyline2D.x3d" title="Geometry2D » Polyline2D"><img src="https://create3000.github.io/media/examples/Geometry2D/Polyline2D/screenshot-small.png" alt="Polyline2D"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Geometry2D/Polypoint2D/Polypoint2D.x3d" title="Geometry2D » Polypoint2D"><img src="https://create3000.github.io/media/examples/Geometry2D/Polypoint2D/screenshot-small.png" alt="Polypoint2D"/></a>
     </td>
@@ -222,11 +225,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Geometry3D/Cylinder/Cylinder.x3d" title="Geometry3D » Cylinder"><img src="https://create3000.github.io/media/examples/Geometry3D/Cylinder/screenshot-small.png" alt="Cylinder"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Geometry3D/ElevationGrid/ElevationGrid.x3d" title="Geometry3D » ElevationGrid"><img src="https://create3000.github.io/media/examples/Geometry3D/ElevationGrid/screenshot-small.png" alt="ElevationGrid"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Geometry3D/Extrusion/Extrusion.x3d" title="Geometry3D » Extrusion"><img src="https://create3000.github.io/media/examples/Geometry3D/Extrusion/screenshot-small.png" alt="Extrusion"/></a>
     </td>
@@ -245,11 +248,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Geospatial/GeoViewpoint/GeoViewpoint.x3d" title="Geospatial » GeoViewpoint"><img src="https://create3000.github.io/media/examples/Geospatial/GeoViewpoint/screenshot-small.png" alt="GeoViewpoint"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Grouping/Group/Group.x3d" title="Grouping » Group"><img src="https://create3000.github.io/media/examples/Grouping/Group/screenshot-small.png" alt="Group"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Grouping/Switch/Switch.x3d" title="Grouping » Switch"><img src="https://create3000.github.io/media/examples/Grouping/Switch/screenshot-small.png" alt="Switch"/></a>
     </td>
@@ -268,11 +271,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Interpolation/OrientationInterpolator/OrientationInterpolator.x3d" title="Interpolation » OrientationInterpolator"><img src="https://create3000.github.io/media/examples/Interpolation/OrientationInterpolator/screenshot-small.png" alt="OrientationInterpolator"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Interpolation/PositionInterpolator/PositionInterpolator.x3d" title="Interpolation » PositionInterpolator"><img src="https://create3000.github.io/media/examples/Interpolation/PositionInterpolator/screenshot-small.png" alt="PositionInterpolator"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Interpolation/PositionInterpolator2D/PositionInterpolator2D.x3d" title="Interpolation » PositionInterpolator2D"><img src="https://create3000.github.io/media/examples/Interpolation/PositionInterpolator2D/screenshot-small.png" alt="PositionInterpolator2D"/></a>
     </td>
@@ -291,11 +294,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/KeyDeviceSensor/StringSensor/StringSensor.x3d" title="KeyDeviceSensor » StringSensor"><img src="https://create3000.github.io/media/examples/KeyDeviceSensor/StringSensor/screenshot-small.png" alt="StringSensor"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Layering/LayerSet/LayerSet.x3d" title="Layering » LayerSet"><img src="https://create3000.github.io/media/examples/Layering/LayerSet/screenshot-small.png" alt="LayerSet"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Layering/Viewport/Viewport.x3d" title="Layering » Viewport"><img src="https://create3000.github.io/media/examples/Layering/Viewport/screenshot-small.png" alt="Viewport"/></a>
     </td>
@@ -314,11 +317,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/NURBS/NurbsCurve/NurbsCurve.x3d" title="NURBS » NurbsCurve"><img src="https://create3000.github.io/media/examples/NURBS/NurbsCurve/screenshot-small.png" alt="NurbsCurve"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/NURBS/NurbsPatchSurface/NurbsPatchSurface.x3d" title="NURBS » NurbsPatchSurface"><img src="https://create3000.github.io/media/examples/NURBS/NurbsPatchSurface/screenshot-small.png" alt="NurbsPatchSurface"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/NURBS/NurbsSweptSurface/NurbsSweptSurface.x3d" title="NURBS » NurbsSweptSurface"><img src="https://create3000.github.io/media/examples/NURBS/NurbsSweptSurface/screenshot-small.png" alt="NurbsSweptSurface"/></a>
     </td>
@@ -337,11 +340,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Navigation/OrthoViewpoint/OrthoViewpoint.x3d" title="Navigation » OrthoViewpoint"><img src="https://create3000.github.io/media/examples/Navigation/OrthoViewpoint/screenshot-small.png" alt="OrthoViewpoint"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Navigation/Viewpoint/Viewpoint.x3d" title="Navigation » Viewpoint"><img src="https://create3000.github.io/media/examples/Navigation/Viewpoint/screenshot-small.png" alt="Viewpoint"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Networking/Anchor/Anchor.x3d" title="Networking » Anchor"><img src="https://create3000.github.io/media/examples/Networking/Anchor/screenshot-small.png" alt="Anchor"/></a>
     </td>
@@ -360,11 +363,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/ParticleSystems/ForcePhysicsModel/ForcePhysicsModel.x3d" title="ParticleSystems » ForcePhysicsModel"><img src="https://create3000.github.io/media/examples/ParticleSystems/ForcePhysicsModel/screenshot-small.png" alt="ForcePhysicsModel"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/ParticleSystems/ParticleSystem/ParticleSystem.x3d" title="ParticleSystems » ParticleSystem"><img src="https://create3000.github.io/media/examples/ParticleSystems/ParticleSystem/screenshot-small.png" alt="ParticleSystem"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/ParticleSystems/PointEmitter/PointEmitter.x3d" title="ParticleSystems » PointEmitter"><img src="https://create3000.github.io/media/examples/ParticleSystems/PointEmitter/screenshot-small.png" alt="PointEmitter"/></a>
     </td>
@@ -383,11 +386,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Picking/LinePickSensor/LinePickSensor.x3d" title="Picking » LinePickSensor"><img src="https://create3000.github.io/media/examples/Picking/LinePickSensor/screenshot-small.png" alt="LinePickSensor"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Picking/PointPickSensor/PointPickSensor.x3d" title="Picking » PointPickSensor"><img src="https://create3000.github.io/media/examples/Picking/PointPickSensor/screenshot-small.png" alt="PointPickSensor"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Picking/PrimitivePickSensor/PrimitivePickSensor.x3d" title="Picking » PrimitivePickSensor"><img src="https://create3000.github.io/media/examples/Picking/PrimitivePickSensor/screenshot-small.png" alt="PrimitivePickSensor"/></a>
     </td>
@@ -406,11 +409,11 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Rendering/Color/Color.x3d" title="Rendering » Color"><img src="https://create3000.github.io/media/examples/Rendering/Color/screenshot-small.png" alt="Color"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Rendering/ColorRGBA/ColorRGBA.x3d" title="Rendering » ColorRGBA"><img src="https://create3000.github.io/media/examples/Rendering/ColorRGBA/screenshot-small.png" alt="ColorRGBA"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Rendering/Coordinate/Coordinate.x3d" title="Rendering » Coordinate"><img src="https://create3000.github.io/media/examples/Rendering/Coordinate/screenshot-small.png" alt="Coordinate"/></a>
     </td>
@@ -426,14 +429,17 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Rendering/LineSet/LineSet.x3d" title="Rendering » LineSet"><img src="https://create3000.github.io/media/examples/Rendering/LineSet/screenshot-small.png" alt="LineSet"/></a>
     </td>
+    <td>
+      <a href="https://create3000.github.io/media/examples/Rendering/OrderIndependentTransparency/OrderIndependentTransparency.x3d" title="Rendering » OrderIndependentTransparency"><img src="https://create3000.github.io/media/examples/Rendering/OrderIndependentTransparency/screenshot-small.png" alt="OrderIndependentTransparency"/></a>
+    </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Rendering/PointSet/PointSet.x3d" title="Rendering » PointSet"><img src="https://create3000.github.io/media/examples/Rendering/PointSet/screenshot-small.png" alt="PointSet"/></a>
     </td>
     <td>
       <a href="https://create3000.github.io/media/examples/RigidBodyPhysics/BallJoint/BallJoint.x3d" title="RigidBodyPhysics » BallJoint"><img src="https://create3000.github.io/media/examples/RigidBodyPhysics/BallJoint/screenshot-small.png" alt="BallJoint"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/RigidBodyPhysics/CollidableShape/CollidableShape.x3d" title="RigidBodyPhysics » CollidableShape"><img src="https://create3000.github.io/media/examples/RigidBodyPhysics/CollidableShape/screenshot-small.png" alt="CollidableShape"/></a>
     </td>
@@ -449,14 +455,14 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/RigidBodyPhysics/SingleAxisHingeJoint/SingleAxisHingeJoint.x3d" title="RigidBodyPhysics » SingleAxisHingeJoint"><img src="https://create3000.github.io/media/examples/RigidBodyPhysics/SingleAxisHingeJoint/screenshot-small.png" alt="SingleAxisHingeJoint"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/RigidBodyPhysics/SliderJoint/SliderJoint.x3d" title="RigidBodyPhysics » SliderJoint"><img src="https://create3000.github.io/media/examples/RigidBodyPhysics/SliderJoint/screenshot-small.png" alt="SliderJoint"/></a>
     </td>
     <td>
       <a href="https://create3000.github.io/media/examples/Shaders/ComposedShader/ComposedShader.x3d" title="Shaders » ComposedShader"><img src="https://create3000.github.io/media/examples/Shaders/ComposedShader/screenshot-small.png" alt="ComposedShader"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Shaders/FloatVertexAttribute/FloatVertexAttribute.x3d" title="Shaders » FloatVertexAttribute"><img src="https://create3000.github.io/media/examples/Shaders/FloatVertexAttribute/screenshot-small.png" alt="FloatVertexAttribute"/></a>
     </td>
@@ -472,14 +478,14 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Shape/LineProperties/LineProperties.x3d" title="Shape » LineProperties"><img src="https://create3000.github.io/media/examples/Shape/LineProperties/screenshot-small.png" alt="LineProperties"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Shape/Material/Material.x3d" title="Shape » Material"><img src="https://create3000.github.io/media/examples/Shape/Material/screenshot-small.png" alt="Material"/></a>
     </td>
     <td>
       <a href="https://create3000.github.io/media/examples/Shape/TwoSidedMaterial/TwoSidedMaterial.x3d" title="Shape » TwoSidedMaterial"><img src="https://create3000.github.io/media/examples/Shape/TwoSidedMaterial/screenshot-small.png" alt="TwoSidedMaterial"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Sound/AudioClip/AudioClip.x3d" title="Sound » AudioClip"><img src="https://create3000.github.io/media/examples/Sound/AudioClip/screenshot-small.png" alt="AudioClip"/></a>
     </td>
@@ -495,14 +501,14 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/Texturing/ImageTexture/ImageTexture.x3d" title="Texturing » ImageTexture"><img src="https://create3000.github.io/media/examples/Texturing/ImageTexture/screenshot-small.png" alt="ImageTexture"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Texturing/MovieTexture/MovieTexture.x3d" title="Texturing » MovieTexture"><img src="https://create3000.github.io/media/examples/Texturing/MovieTexture/screenshot-small.png" alt="MovieTexture"/></a>
     </td>
     <td>
       <a href="https://create3000.github.io/media/examples/Texturing/MultiTexture/MultiTexture.x3d" title="Texturing » MultiTexture"><img src="https://create3000.github.io/media/examples/Texturing/MultiTexture/screenshot-small.png" alt="MultiTexture"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/Texturing/PixelTexture/PixelTexture.x3d" title="Texturing » PixelTexture"><img src="https://create3000.github.io/media/examples/Texturing/PixelTexture/screenshot-small.png" alt="PixelTexture"/></a>
     </td>
@@ -518,14 +524,14 @@ Have a look at: [https://patreon.com/X_ITE](https://patreon.com/X_ITE).
     <td>
       <a href="https://create3000.github.io/media/examples/VolumeRendering/EdgeEnhancementVolumeStyle/EdgeEnhancementVolumeStyle.x3d" title="VolumeRendering » EdgeEnhancementVolumeStyle"><img src="https://create3000.github.io/media/examples/VolumeRendering/EdgeEnhancementVolumeStyle/screenshot-small.png" alt="EdgeEnhancementVolumeStyle"/></a>
     </td>
+  </tr>
+  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/VolumeRendering/IsoSurfaceVolumeData/IsoSurfaceVolumeData.x3d" title="VolumeRendering » IsoSurfaceVolumeData"><img src="https://create3000.github.io/media/examples/VolumeRendering/IsoSurfaceVolumeData/screenshot-small.png" alt="IsoSurfaceVolumeData"/></a>
     </td>
     <td>
       <a href="https://create3000.github.io/media/examples/VolumeRendering/SegmentedVolumeData/SegmentedVolumeData.x3d" title="VolumeRendering » SegmentedVolumeData"><img src="https://create3000.github.io/media/examples/VolumeRendering/SegmentedVolumeData/screenshot-small.png" alt="SegmentedVolumeData"/></a>
     </td>
-  </tr>
-  <tr>
     <td>
       <a href="https://create3000.github.io/media/examples/VolumeRendering/ShadedVolumeStyle/ShadedVolumeStyle.x3d" title="VolumeRendering » ShadedVolumeStyle"><img src="https://create3000.github.io/media/examples/VolumeRendering/ShadedVolumeStyle/screenshot-small.png" alt="ShadedVolumeStyle"/></a>
     </td>
@@ -731,6 +737,10 @@ Type: script code. This event handler will be called on the \<x3d-canvas\> eleme
 
 A Boolean value (`true` or `false`). If the value is true the drawing buffers will not be cleared and will preserve their values. The default value for the *preserveDrawingBuffer* attribute is `false`. Set *preserveDrawingBuffer* to `true` if you want to save the image from the internal canvas. Keep in mind setting *preserveDrawingBuffer* to true can have performance implications.
 
+### orderIndependentTransparency
+
+A Boolean value (`true` or `false`) to indicate whether order independent transparency rendering technique should be used. The default value for the *orderIndependentTransparency* attribute is `false`. Can slow down rendering speed if *antialiased* is `true`, but can be used in conjunction with *contentScale*.
+
 ### splashScreen
 
 A Boolean value (`true` or `false`) to indicate whether the splash screen should be displayed. The default value for the *splashScreen* attribute is `true`. The display of the splash screen can also be toggled via the browser option »SplashScreen« in JavaScript. Call `Browser .setBrowserOption ("SplashScreen", booleanValue)` to toggle the display of the splash screen.

package/docs/_posts/reference/browser-services.md

@@ -269,6 +269,12 @@ Returns a browser option with the corresponding name.
          <td>Boolean</td>
          <td>true</td>
       </tr>
+      <tr>
+         <td>OrderIndependentTransparency</td>
+         <td>Whether to use order independent transparency rendering technique. (non standard)</td>
+         <td>Boolean</td>
+         <td>false</td>
+      </tr>
       <tr>
          <td>StraightenHorizon</td>
          <td>Whether the Examine viewer should straighten the horizon when navigating. (non standard)</td>

package/docs/_posts/what's-new.md

@@ -5,6 +5,29 @@ nav: main
 categories: []
 tags: [New, Releases]
 ---
+## X_ITE v8.10.0 Released
+
+*Leipzig, 17th July 2023:* We right now released a new version.
+
+### New Features
+
+* The component/profile messages in the console from HAnim should be gone now.
+* HAnimHumanoid is now GPU accelerated, try high poly objects.
+* glTF skin object is now completely translated into HAnimHumanoid even with animations.
+
+With the [glTF Sample Viewer](https://create3000.github.io/x_ite/laboratory/gltf-sample-viewer) you can test glTF and HAnimHumanoid if you like. Files of interest are:
+
+#### glTF Random Models
+
+* Animated Bee (lots of joints)
+
+#### glTF Sample Models
+
+* Brain Stem (high poly)
+* Cesium man
+* Fox
+* Recursive Skeletons (stress test)
+
 ## X_ITE v8.7.0 Released
 
 *Leipzig, 14th May 2023:* This release comes with a breaking change: `Browser.createX3DFromString` is now asynchronous and returns now a Promise. This ensures that all components are loaded, and all necessary nodes can be provided.

package/docs/_tabs/playground.html

@@ -5,7 +5,21 @@ order: 4
 icon: fas fa-rocket
 ---
 <style>
+#main {
+   padding: 0 !important;
+}
+
+#main > .row {
+   height: 100%;
+}
+
+#core-wrapper {
+   padding: 0 !important;
+}
+
 .post, .post-content {
+   margin: 0 !important;
+   padding: 0 !important;
    height: 100%;
 }
 
@@ -14,10 +28,49 @@ icon: fas fa-rocket
 }
 
 /* Table */
+.playground {
+   box-sizing: border-box;
+   height: 100%;
+   border-bottom: 5px solid var(--playground-toolbar-color);
+}
+
+.toolbar {
+   user-select: none;
+   -moz-user-select: none;
+   -webkit-user-select: none;
+   -ms-user-select: none;
+   padding: 0 2rem;
+   height: 30px;
+   width: 100%;
+   background-color: var(--playground-toolbar-color);
+}
+
+.toolbar span {
+   cursor: pointer;
+   padding: 0 3px;
+}
+
+.toolbar span.selected {
+   color: var(--h2-color);
+}
+
+.toolbar span.separator {
+   border-left: 1px solid var(--text-color);
+   margin: 0 5px 0 10px;
+}
+
+.toolbar span.dot::before {
+   content: "·";
+   margin: 0 3px 0 4px;
+}
+
+.toolbar span.separator + .separator {
+   display: none;
+}
 
 .viewer-row {
    display: flex;
-   height: calc(100vh - 180px);
+   height: calc(100% - 30px);
 }
 
 .viewer-column {
@@ -88,15 +141,24 @@ $(function ()
    console .info (X3D .getBrowser () .getWelcomeMessage ());
 
    const box = `<X3D profile='Full' version='4.0'>
-   <Scene>
-      <Shape>
-         <Appearance>
-            <Material
-                  diffuseColor='0 0.5 1'></Material>
-         </Appearance>
-         <Box></Box>
-      </Shape>
-   </Scene>
+  <Scene>
+    <Viewpoint
+        description='Initial View'
+        position='4.737889 4.718629 7.435519'
+        orientation='-0.640652763184828 0.744770464531058 0.186764536745701 0.746185800293648'/>
+    <ParticleSystem
+        geometryType='GEOMETRY'
+        maxParticles='10'>
+      <PointEmitter
+          direction='0 0 0'
+          speed='1'/>
+      <Appearance>
+        <Material
+            diffuseColor='0 0.5 1'/>
+      </Appearance>
+      <Box/>
+    </ParticleSystem>
+  </Scene>
 </X3D>
 `;
 
@@ -157,12 +219,147 @@ $(function ()
          }
 
          monaco .editor .setModelLanguage (editor .getModel (), Browser .currentScene .encoding .toLowerCase ());
+
+         updateToolbar ($(".playground .toolbar"), $("x3d-canvas"));
       });
 
       if (!url)
          editor .setValue (box .replace (/ {3}/g, "  "));
    });
 })
+
+let shading = "PHONG";
+
+function updateToolbar (toolbar, canvas)
+{
+   const browser = canvas .prop ("browser");
+
+   toolbar .empty ();
+
+   const play = $("<span></span>")
+      .text ("▶")
+      .attr ("title", "Toggle browser update.")
+      .addClass (browser .isLive () ? "selected" : "")
+      .on ("click", () =>
+      {
+         if (browser .isLive ())
+            browser .endUpdate ();
+         else
+            browser .beginUpdate ();
+
+         play .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("separator") .appendTo (toolbar);
+
+   const antialiased = $("<span></span>")
+      .text ("antialiased")
+      .attr ("title", "Toggle antialiasing.")
+      .addClass ("selected")
+      .on ("click", () =>
+      {
+         const value = !browser .getBrowserOption ("Antialiased");
+
+         canvas .attr ("antialiased", value);
+
+         antialiased .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("dot") .appendTo (toolbar);
+
+   const contentScale = $("<span></span>")
+      .text ("contentScale 1.0")
+      .attr ("title", "Toggle contentScale between 0.1, 1.0 and 2.0.")
+      .on ("click", () =>
+      {
+         const
+            index = ((contentScale .attr ("index") ?? 1) + 1) % 3,
+            value = [0.1, 1, 2][index];
+
+          canvas .attr ("contentScale", value);
+
+         contentScale
+            .attr ("index", index)
+            .text ("contentScale " + value .toFixed (1))
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("dot") .appendTo (toolbar);
+
+   const pixelated = $("<span></span>")
+      .text ("pixelated")
+      .attr ("title", "Set CSS property image-rendering to pixelated.")
+      .on ("click", () =>
+      {
+         canvas .css ("image-rendering", pixelated .hasClass ("selected") ? "unset" : "pixelated");
+
+         pixelated .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("separator") .appendTo (toolbar);
+
+   const oit = $("<span></span>")
+      .text ("oit")
+      .attr ("title", "Toggle order independent transparency.")
+      .on ("click", () =>
+      {
+         const value = !browser .getBrowserOption ("OrderIndependentTransparency");
+
+         canvas .attr ("orderIndependentTransparency", value);
+
+         oit .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("separator") .appendTo (toolbar);
+
+   $("<span></span>")
+      .text ("point")
+      .attr ("title", "Set shading to POINT.")
+      .on ("click", () =>
+      {
+         browser .setBrowserOption ("Shading", shading = "POINT");
+      })
+      .appendTo (toolbar);
+
+    $("<span></span>") .addClass ("dot") .appendTo (toolbar);
+
+    $("<span></span>")
+      .text ("wireframe")
+      .attr ("title", "Set shading to WIREFRAME.")
+      .on ("click", () =>
+      {
+         browser .setBrowserOption ("Shading", shading = "WIREFRAME");
+      })
+      .appendTo (toolbar);
+
+    $("<span></span>") .addClass ("dot") .appendTo (toolbar);
+
+    $("<span></span>")
+      .text ("flat")
+      .attr ("title", "Set shading to FLAT.")
+      .on ("click", () =>
+      {
+        browser .setBrowserOption ("Shading", shading = "FLAT");
+      })
+      .appendTo (toolbar);
+
+    $("<span></span>") .addClass ("dot") .appendTo (toolbar);
+
+    $("<span></span>")
+      .text ("phong")
+      .attr ("title", "Set shading to PHONG.")
+      .on ("click", () =>
+      {
+        browser .setBrowserOption ("Shading", shading = "PHONG");
+      })
+      .appendTo (toolbar);
+
+    browser .setBrowserOption ("Shading", shading);
+}
 </script>
 </pre>
 
@@ -198,10 +395,13 @@ $(function ()
 })();
 </script>
 
-<div class="viewer-row">
-   <div class="viewer-column">
-      <x3d-canvas splashScreen="false"></x3d-canvas>
-      <div class="console"></div>
+<div class="playground">
+   <div class="toolbar"></div>
+   <div class="viewer-row">
+      <div class="viewer-column">
+         <x3d-canvas splashScreen="false"></x3d-canvas>
+         <div class="console"></div>
+      </div>
+      <div class="viewer-column"><div id="editor"></div></div>
    </div>
-   <div class="viewer-column"><div id="editor"></div></div>
 </div>