x_ite 8.0.0 → 8.3.0

package/docs/{tutorials/Controlling-color-on-coordinate-based-geometry.md → _posts/tutorials/controlling-color-on-coordinate-based-geometry.md}

@@ -1,19 +1,18 @@
 ---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: single
+title: Controlling Color on Coordinate-Based Geometry
+date: 2022-11-28
+nav: tutorials-animation-sensors-and-geometry
+categories: [Tutorials]
+tags: [controlling, color, coordinate, geometry]
 ---
-# Controlling Color on Coordinate-Based Geometry
-
 ## Motivation
 
-- The [Material](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/shape.html#Material) node gives an entire shape the same color
-- You can provide colors for individual parts of a shape using a [Color](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/rendering.html#Color) node
+- The [Material](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/shape.html#Material){:target="_blank"} node gives an entire shape the same color
+- You can provide colors for individual parts of a shape using a [Color](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/rendering.html#Color){:target="_blank"} node
 
 ## Syntax: Color
 
-A [Color](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/rendering.html#Color) node contains a list of RGB values (similar to a Coordinate node):
+A [Color](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/rendering.html#Color){:target="_blank"} node contains a list of RGB values (similar to a Coordinate node):
 
 ### XML Encoding
 
@@ -30,7 +29,7 @@ Color {
 }
 ```
 
-Used as the color field value of [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#IndexedFaceSet), [IndexedLineSet](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/rendering.html#IndexedLineSet), [PointSet](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/rendering.html#PointSet) or [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#ElevationGrid) nodes.
+Used as the color field value of [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#IndexedFaceSet){:target="_blank"}, [IndexedLineSet](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/rendering.html#IndexedLineSet){:target="_blank"}, [PointSet](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/rendering.html#PointSet){:target="_blank"} or [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#ElevationGrid){:target="_blank"} nodes.
 
 ## Binding colors
 
@@ -41,7 +40,7 @@ Used as the color field value of [IndexedFaceSet](https://www.web3d.org/document
 
 ## Syntax: PointSet
 
-A [PointSet](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/rendering.html#PointSet) geometry node creates geometry out of points:
+A [PointSet](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/rendering.html#PointSet){:target="_blank"} geometry node creates geometry out of points:
 
 - *color* - provides a list of colors
 - Always binds one color to each point, in order
@@ -72,7 +71,7 @@ Shape {
 
 ## Syntax: IndexedLineSet
 
-An [IndexedLineSet](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/rendering.html#IndexedLineSet) geometry node creates geometry out of lines:
+An [IndexedLineSet](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/rendering.html#IndexedLineSet){:target="_blank"} geometry node creates geometry out of lines:
 
 - *color* - list of colors
 - *colorIndex* - selects colors from list
@@ -117,7 +116,7 @@ The *colorPerVertex* field controls how color indexes are used:
 
 ## Syntax: IndexedFaceSet
 
-An [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#IndexedFaceSet) geometry node creates geometry out of faces:
+An [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#IndexedFaceSet){:target="_blank"} geometry node creates geometry out of faces:
 
 - *color* - list of colors
 - *colorIndex* - selects colors from list
@@ -162,7 +161,7 @@ The *colorPerVertex* field controls how color indexes are used (similar to line
 
 ## Syntax: ElevationGrid
 
-An [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#ElevationGrid) geometry node creates terrains:
+An [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#ElevationGrid){:target="_blank"} geometry node creates terrains:
 
 - *color* - list of colors
 - *colorPerVertex* - control color binding
@@ -205,10 +204,10 @@ The *colorPerVertex* field controls how color indexes are used (similar to line
 
 ## Summary
 
-The [Color](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/rendering.html#Color) node lists colors to use for parts of a shape:
+The [Color](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/rendering.html#Color){:target="_blank"} node lists colors to use for parts of a shape:
 
 - Used as the value of the color field
 - Color indexes select colors to use
-- Colors override [Material](http://create3000.de/users-guide/components/shape/material/) node
+- Colors override [Material](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/shape.html#Material){:target="_blank"} node
 
 The *colorPerVertex* field selects color per line/face/grid square or color per coordinate.

package/docs/{tutorials/Controlling-detail.md → _posts/tutorials/controlling-detail.md}

@@ -1,11 +1,10 @@
 ---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: single
+title: Controlling Detail
+date: 2022-11-28
+nav: tutorials-scripts-and-prototypes
+categories: [Tutorials]
+tags: [controlling, detail]
 ---
-# Controlling Detail
-
 ## Motivation
 
 The further the viewer can see, the more there is to draw.
@@ -30,14 +29,14 @@ Usually, two or three different versions is enough, but you can have as many as
 
 ## Controlling level of detail
 
-Group the shape versions as levels in an [LOD](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/navigation.html#LOD) grouping node:
+Group the shape versions as levels in an [LOD](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/navigation.html#LOD){:target="_blank"} grouping node:
 
 - LOD is short for Level of Detail
 - List them from highest to lowest detail
 
 ## Syntax: LOD
 
-An [LOD](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/navigation.html#LOD) grouping node creates a group of shapes describing different levels (versions) of the same shape:
+An [LOD](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/navigation.html#LOD){:target="_blank"} grouping node creates a group of shapes describing different levels (versions) of the same shape:
 
 - *center* - the center of the shape
 - *range* - a list of level switch ranges
@@ -117,9 +116,11 @@ LOD {
 }
 ```
 
-[![LOD](https://create3000.github.io/media/tutorials/scenes/lod/screenshot.png)](https://create3000.github.io/media/tutorials/scenes/lod/example.html)
+### Example
 
-[View scene in this window.](https://create3000.github.io/media/tutorials/scenes/lod/example.html)
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/lod/lod.x3dv">
+  <img src="https://create3000.github.io/media/tutorials/scenes/lod/screenshot.png" alt="LOD"/>
+</x3d-canvas>
 
 [Download ZIP Archive](https://create3000.github.io/media/tutorials/scenes/lod/lod.zip)
 
@@ -130,7 +131,7 @@ Increase performance by making multiple levels of shapes:
 - High detail for close up viewing
 - Lower detail for more distant viewing
 
-Group the levels in an [LOD](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/navigation.html#LOD) node:
+Group the levels in an [LOD](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/navigation.html#LOD){:target="_blank"} node:
 
 - Ordered from high detail to low detail
 - Ranges to select switching distances

package/docs/{tutorials/Controlling-how-textures-are-mapped.md → _posts/tutorials/controlling-how-textures-are-mapped.md}

@@ -1,11 +1,10 @@
 ---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: single
+title: Controlling How Textures are Mapped
+date: 2022-11-28
+nav: tutorials-textures-lights-and-environment
+categories: [Tutorials]
+tags: [controlling, textures, mapped]
 ---
-# Controlling How Textures are Mapped
-
 ## Motivation
 
 - By default, an entire texture image is mapped once around the shape
@@ -75,7 +74,7 @@ Bind the texture to a face (stretch the cookie and stick it):
 
 ## Syntax: TextureCoordinate
 
-A [TextureCoordinate](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/texturing.html#TextureCoordinate) node contains a list of texture coordinates:
+A [TextureCoordinate](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/texturing.html#TextureCoordinate){:target="_blank"} node contains a list of texture coordinates:
 
 ### XML Encoding
 
@@ -92,11 +91,11 @@ TextureCoordinate {
 }
 ```
 
-Used as the *texCoord* field value of [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#IndexedFaceSet) or [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#ElevationGrid) nodes.
+Used as the *texCoord* field value of [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#IndexedFaceSet){:target="_blank"} or [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#ElevationGrid){:target="_blank"} nodes.
 
 ## Syntax: IndexedFaceSet
 
-An [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#IndexedFaceSet) geometry node creates geometry out of faces:
+An [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#IndexedFaceSet){:target="_blank"} geometry node creates geometry out of faces:
 
 - texCoord and texCoordIndex - specify texture pieces
 
@@ -130,7 +129,7 @@ Shape {
 
 ## Syntax: ElevationGrid
 
-An [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#ElevationGrid) geometry node creates terrains:
+An [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#ElevationGrid){:target="_blank"} geometry node creates terrains:
 
 - *texCoord* - specify texture pieces
 - Automatically generated texture coordinate indexes
@@ -161,7 +160,7 @@ Shape {
 
 ## Syntax: Appearance
 
-An [Appearance](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/shape.html#Appearance) node describes overall shape appearance:
+An [Appearance](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/shape.html#Appearance){:target="_blank"} node describes overall shape appearance:
 
 - *textureTransform* - transform
 
@@ -193,7 +192,7 @@ Shape {
 
 ## Syntax: TextureTransform
 
-A [TextureTransform](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/texturing.html#TextureTransform) node transforms texture coordinates:
+A [TextureTransform](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/texturing.html#TextureTransform){:target="_blank"} node transforms texture coordinates:
 
 - *translation* - position
 - *rotation* - orientation

package/docs/{tutorials/Controlling-navigation.md → _posts/tutorials/controlling-navigation.md}

@@ -1,11 +1,10 @@
 ---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: single
+title: Controlling Navigation
+date: 2022-11-28
+nav: tutorials-textures-lights-and-environment
+categories: [Tutorials]
+tags: [controlling, navigation]
 ---
-# Controlling Navigation
-
 ## Motivation
 
 - Different types of worlds require different styles of navigation
@@ -36,11 +35,11 @@ Some browsers support additional navigation types.
 - By default, a headlight is placed on the avatar's head and aimed in the head direction
 - You can turn this headlight on and off
   - Most browsers provide a menu option to control the headlight
-  - You can also control the headlight with the [NavigationInfo](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/navigation.html#NavigationInfo) node
+  - You can also control the headlight with the [NavigationInfo](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/navigation.html#NavigationInfo){:target="_blank"} node
 
 ## Syntax: NavigationInfo
 
-A [NavigationInfo](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/navigation.html#NavigationInfo) node selects the navigation type and avatar characteristics:
+A [NavigationInfo](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/navigation.html#NavigationInfo){:target="_blank"} node selects the navigation type and avatar characteristics:
 
 - *type* - navigation style
 - *avatarSize* and speed - avatar characteristics

package/docs/{tutorials/Controlling-shading-on-coordinate-based-geometry.md → _posts/tutorials/controlling-shading-on-coordinate-based-geometry.md}

@@ -1,11 +1,10 @@
 ---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: single
+title: Controlling Shading on Coordinate-Based Geometry
+date: 2022-11-28
+nav: tutorials-animation-sensors-and-geometry
+categories: [Tutorials]
+tags: [controlling, shading, coordinate, geometry]
 ---
-# Controlling Shading on Coordinate-Based Geometry
-
 ## Motivation
 
 - When shaded, the faces on a shape are obvious
@@ -19,16 +18,16 @@ By default, faces are drawn with faceted shading.
 
 You can enable smooth shading using the creaseAngle field for:
 
-- [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#IndexedFaceSet)
-- [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#ElevationGrid)
-- [Extrusion](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#Extrusion)
+- [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#IndexedFaceSet){:target="_blank"}
+- [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#ElevationGrid){:target="_blank"}
+- [Extrusion](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#Extrusion){:target="_blank"}
 
 ## Selecting crease angles
 
 A crease angle is a threshold angle between two faces:
 
-- If face angle >= crease angle, use facet shading
-- If face angle < crease angle, use smooth shading
+- If face angle \>= crease angle, use facet shading
+- If face angle \< crease angle, use smooth shading
 
 ## Using normals
 
@@ -38,7 +37,7 @@ A normal vector indicates the direction a face is facing
 
 By default, normals are automatically generated by the X3D browser:
 
-- You can specify your own normals with a [Normal](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/rendering.html#Normal) node
+- You can specify your own normals with a [Normal](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/rendering.html#Normal){:target="_blank"} node
 - Usually automatically generated normals are good enough
 
 ## Syntax: Normal
@@ -60,11 +59,11 @@ Normal {
 }
 ```
 
-Normals can be given for [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#IndexedFaceSet) and [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#ElevationGrid) nodes.
+Normals can be given for [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#IndexedFaceSet){:target="_blank"} and [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#ElevationGrid){:target="_blank"} nodes.
 
 ## Syntax: IndexedFaceSet
 
-An [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#IndexedFaceSet) geometry node creates geometry out of faces:
+An [IndexedFaceSet](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#IndexedFaceSet){:target="_blank"} geometry node creates geometry out of faces:
 
 - *normal* - list of normals
 - *normalIndex* - selects normals from list
@@ -109,7 +108,7 @@ The *normalPerVertex* field controls how normal indexes are used
 
 ## Syntax: ElevationGrid
 
-An [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#ElevationGrid) geometry node creates terrains:
+An [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#ElevationGrid){:target="_blank"} geometry node creates terrains:
 
 - *normal* - list of normals
 - *normalPerVertex* - control normal binding
@@ -150,11 +149,11 @@ The *normalPerVertex* field controls how normal indexes are used (similar to fac
 
 ## Syntax: NormalInterpolator
 
-A [NormalInterpolator](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/interp.html#NormalInterpolator) node describes a normal set:
+A [NormalInterpolator](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/interpolators.html#NormalInterpolator){:target="_blank"} node describes a normal set:
 
 - *keys* - key fractions
 - *keyValues* - key normal lists (X,Y,Z lists)
-- Interpolates lists of normals, similar to the [CoordinateInterpolator](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/interp.html#CoordinateInterpolator)
+- Interpolates lists of normals, similar to the [CoordinateInterpolator](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/interpolators.html#CoordinateInterpolator){:target="_blank"}
 
 ### XML Encoding
 
@@ -173,14 +172,14 @@ NormalInterpolator {
 }
 ```
 
-Typically route into a [Normal](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/rendering.html#Normal) node's set\_vector input.
+Typically route into a [Normal](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/rendering.html#Normal){:target="_blank"} node's set\_vector input.
 
 ## Summary
 
 - The *creaseAngle* field controls faceted or smooth shading
-- The [Normal](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/rendering.html#Normal) node lists normal vectors to use for parts of a shape
+- The [Normal](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/rendering.html#Normal){:target="_blank"} node lists normal vectors to use for parts of a shape
   - Used as the value of the normal field
   - Normal indexes select normals to use
 - Normals override *creaseAngle* value
 - The *normalPerVertex* field selects normal per face/grid square or normal per coordinate
-- The [NormalInterpolator](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/interp.html#NormalInterpolator) node converts times to normals
+- The [NormalInterpolator](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/interpolators.html#NormalInterpolator){:target="_blank"} node converts times to normals

package/docs/{tutorials/Controlling-the-viewpoint.md → _posts/tutorials/controlling-the-viewpoint.md}

@@ -1,11 +1,10 @@
 ---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: single
+title: Controlling the Viewpoint
+date: 2022-11-28
+nav: tutorials-textures-lights-and-environment
+categories: [Tutorials]
+tags: [controlling, viewpoint]
 ---
-# Controlling the Viewpoint
-
 ## Motivation
 
 - By default, the viewer enters a world at (0.0, 0.0, 10.0)
@@ -22,7 +21,7 @@ layout: single
 
 ## Syntax: Viewpoint
 
-A [Viewpoint](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/navigation.html#Viewpoint) node specifies a named viewing location:
+A [Viewpoint](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/navigation.html#Viewpoint){:target="_blank"} node specifies a named viewing location:
 
 - *position* and *orientation* - viewing location
 - *fieldOfView* - camera lens angle
@@ -51,5 +50,5 @@ Viewpoint {
 
 ## Summary
 
-- Specify favorite viewpoints in [Viewpoint](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/navigation.html#Viewpoint) nodes
+- Specify favorite viewpoints in [Viewpoint](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/navigation.html#Viewpoint){:target="_blank"} nodes
 - The first viewpoint in the file is the entry viewpoint

package/docs/{tutorials/Creating-new-node-types.md → _posts/tutorials/creating-new-node-types.md}

@@ -1,11 +1,10 @@
 ---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: single
+title: Creating New Node Types
+date: 2022-11-28
+nav: tutorials-scripts-and-prototypes
+categories: [Tutorials]
+tags: [creating, node, types]
 ---
-# Creating New Node Types
-
 ## Motivation
 
 You can create new node types that encapsulate:
@@ -173,9 +172,9 @@ BouncingBall {
 
 Recall that node use must be appropriate for the context:
 
-- A [Shape](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/shape.html#Shape) node specifies shape, not color
-- A [Material](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/shape.html#Material) node specifies color, not shape
-- A [Box](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#Box) node specifies geometry, not shape or color
+- A [Shape](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/shape.html#Shape){:target="_blank"} node specifies shape, not color
+- A [Material](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/shape.html#Material){:target="_blank"} node specifies color, not shape
+- A [Box](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/geometry3D.html#Box){:target="_blank"} node specifies geometry, not shape or color
 
 The context for a new node type depends upon the first node in the **PROTO** body.
 

package/docs/{tutorials/Grouping-nodes.md → _posts/tutorials/grouping-nodes.md}

@@ -1,11 +1,10 @@
 ---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: single
+title: Grouping Nodes
+date: 2022-11-28
+nav: tutorials-shapes-geometry-and-appearance
+categories: [Tutorials]
+tags: [grouping, nodes]
 ---
-# Grouping Nodes
-
 ## Motivation
 
 You can group shapes to compose complex shapes
@@ -38,7 +37,7 @@ and more
 
 ## Syntax: Group
 
-The [Group](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/group.html#Group) node creates a basic group.
+The [Group](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/grouping.html#Group){:target="_blank"} node creates a basic grouping.
 
 - Every child node in the group is displayed.
 
@@ -60,7 +59,7 @@ Group {
 
 ## Syntax: Switch
 
-The [Switch](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/group.html#Switch) group node creates a switched group
+The [Switch](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/grouping.html#Switch){:target="_blank"} group node creates a switched group
 
 - Only one child node in the group is displayed
 - You select which child
@@ -87,7 +86,7 @@ Switch {
 
 ## Syntax: Transform
 
-The [Transform](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/group.html#Transform) group node creates a group with its own coordinate system.
+The [Transform](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/grouping.html#Transform){:target="_blank"} group node creates a group with its own coordinate system.
 
 - Every child node in the group is displayed.
 
@@ -115,7 +114,7 @@ Transform {
 
 ## Syntax: Billboard
 
-The [Billboard](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/navigation.html#Billboard) group node creates a group with a special coordinate system.
+The [Billboard](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/navigation.html#Billboard){:target="_blank"} group node creates a group with a special coordinate system.
 
 - Every child node in the group is displayed.
 - The coordinate system is turned to face viewer.
@@ -184,7 +183,7 @@ Billboard {
 
 ## Syntax: Anchor
 
-An [Anchor](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/networking.html#Anchor) node creates a group that acts as a clickable anchor
+An [Anchor](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/networking.html#Anchor){:target="_blank"} node creates a group that acts as a clickable anchor
 
 - Every child node in the group is displayed
 - Clicking any child follows a URL
@@ -212,7 +211,7 @@ Anchor {
 
 ## Syntax: Inline
 
-An [Inline](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/networking.html#Inline) node creates a special group from another X3D file's contents
+An [Inline](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/networking.html#Inline){:target="_blank"} node creates a special group from another X3D file's contents
 
 - Children read from file selected by a URL
 - Every child node in group is displayed
@@ -234,10 +233,10 @@ Inline {
 
 ## Summary
 
-- The [Group](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/group.html#Group) node creates a basic group
-- The [Switch](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/group.html#Switch) node creates a group with 1 choice used
-- The [Transform](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/group.html#Transform) node creates a group with a new coordinate system
-- The [Billboard](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/navigation.html#Billboard) node creates a group with a coordinate system that rotates to face the viewer
-- The [Anchor](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/networking.html#Anchor) node creates a clickable group
+- The [Group](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/grouping.html#Group){:target="_blank"} node creates a basic group
+- The [Switch](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/grouping.html#Switch){:target="_blank"} node creates a group with 1 choice used
+- The [Transform](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/grouping.html#Transform){:target="_blank"} node creates a group with a new coordinate system
+- The [Billboard](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/navigation.html#Billboard){:target="_blank"} node creates a group with a coordinate system that rotates to face the viewer
+- The [Anchor](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/networking.html#Anchor){:target="_blank"} node creates a clickable group
   - Clicking any child in the group loads a URL
-- The [Inline](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/networking.html#Inline) node creates a special group loaded from another X3D file
+- The [Inline](https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/networking.html#Inline){:target="_blank"} node creates a special group loaded from another X3D file

package/docs/{tutorials/Hello,-World!.md → _posts/tutorials/hello-world.md}

@@ -1,11 +1,10 @@
 ---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: single
+title: Hello, World!
+date: 2022-11-28
+nav: tutorials-basic
+categories: [Tutorials]
+tags: [hello, world]
 ---
-# Hello, World!
-
 ## Overview
 
 In this tutorial, you will learn how to create a simple hello world scene with X3D. Firstly, let explains some of the X3D basics.
@@ -20,9 +19,9 @@ In this tutorial, you will learn how to create a simple hello world scene with X
 
 ### Example
 
-[![Hello World Image](https://create3000.github.io/media/tutorials/hello-world/screenshot.png)](https://create3000.github.io/media/tutorials/hello-world/example.html)
-
-[View scene in this window.](https://create3000.github.io/media/tutorials/hello-world/example.html)
+<x3d-canvas src="https://create3000.github.io/media/tutorials/hello-world/hello-world.x3d">
+  <img src="https://create3000.github.io/media/tutorials/hello-world/screenshot.png" alt="Hello World Image"/>
+</x3d-canvas>
 
 [Download ZIP Archive](https://create3000.github.io/media/tutorials/hello-world/hello-world.zip)
 
@@ -32,8 +31,7 @@ As first a very easy example, we will create a sphere with a texture and a text
 
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>
-
-<X3D profile='Full' version='3.3' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.3.xsd'>
+<X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
   <Scene>
     <Transform>
       <Shape>
@@ -47,7 +45,7 @@ As first a very easy example, we will create a sphere with a texture and a text
 ### Classic Encoding
 
 ```js
-#X3D V3.3 utf8
+#X3D V4.0 utf8
 
 Transform {
   children Shape {
@@ -64,8 +62,7 @@ Now we have a sphere, but we don't see if it is rotating, let's assign a texture
 
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>
-
-<X3D profile='Full' version='3.3' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.3.xsd'>
+<X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
   <Scene>
     <Transform>
       <Shape>
@@ -83,7 +80,7 @@ Now we have a sphere, but we don't see if it is rotating, let's assign a texture
 ### Classic Encoding
 
 ```js
-#X3D V3.3 utf8
+#X3D V4.0 utf8
 
 Transform {
   children Shape {
@@ -97,16 +94,12 @@ Transform {
 }
 ```
 
-![Hello World in the Outliner](https://create3000.github.io/media/tutorials/hello-world/hello-world-outliner.png)
-
-Outline Editor view
-
 We take a Appearance node and assign it to the *appearance* field of the Shape node. For the texture we take an ImageTexture node. It would be possible a MovieTexture as texture too. But this later. The ImageTexture has a field *url*. Here we say the ImageTexture should fetch the image from ".earth.png". We could assign multiple urls:
 
 ### XML Encoding
 
 ```xml
-url='"earth.png", "http://example.com/earth.png"'
+url='"earth.png", "https://example.com/earth.png"'
 ```
 
 ### Classic Encoding
@@ -114,7 +107,7 @@ url='"earth.png", "http://example.com/earth.png"'
 ```js
 url [
   "earth.png",
-  "http://example.com/earth.png"
+  "https://example.com/earth.png"
 ]
 ```
 
@@ -126,8 +119,7 @@ Now the sphere looks like an earth and you are very curious how the text will be
 
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>
-
-<X3D profile='Full' version='3.3' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.3.xsd'>
+<X3D profile='Full' version='4.0' xmlns:xsd='https://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='https://www.web3d.org/specifications/x3d-4.0.xsd'>
   <Scene>
     <Viewpoint
         description='Home'
@@ -163,7 +155,7 @@ Now the sphere looks like an earth and you are very curious how the text will be
 ### Classic Encoding
 
 ```js
-#X3D V3.3 utf8
+#X3D V4.0 utf8
 
 META "title" "about:hello_world"
 
@@ -204,7 +196,3 @@ Transform {
 ```
 
 We position the text below the sphere by a translation of about 1 Meter along the y-axis. We want a blue colored text, so we assign a Material node to the *material* field of the Appearance node and set the *diffuseColor* field to 1 0 0. As geometry we take a Text node and set the *string* field to "Hello World!".
-
-## Hello World in Titania
-
-![Hello World in Titania](https://create3000.github.io/media/tutorials/hello-world/hello-world-titania.png)