x_ite 4.0.5 → 4.7.5

package/docs/tutorials/Controlling-appearance-with-materials.md

@@ -0,0 +1,186 @@
+# Controlling Appearance whith Materials
+
+## Motivation
+
+The primitive shapes have a default emissive (glowing) white appearance
+
+You can control a shape's
+
+- Shading color
+- Glow color
+- Transparency
+- Shininess
+- Ambient intensity
+
+## Syntax: Shape
+
+Recall that [Shape](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/shape.html#Shape) nodes describe:
+
+- *appearance* - color and texture
+- *geometry* - form, or structure
+
+### XML Encoding
+
+```xml
+<Shape>
+  <!-- appearance ... -->
+  <!-- geometry ... -->
+</Shape>
+```
+
+### Classic Encoding
+
+```js
+Shape {
+  appearance ...
+  geometry ...
+}
+```
+
+## Syntax: Appearance
+
+An [Appearance](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/shape.html#Appearance) node describes overall shape appearance
+
+- *material* properties - color, transparency, etc.
+
+### XML Encoding
+
+```xml
+<Shape>
+  <Appearance>
+    <!-- material ... -->
+  </Appearance>
+  <!-- geometry ... -->
+</Shape>
+```
+
+### Classic Encoding
+
+```js
+Shape {
+  appearance Appearance {
+    material ...
+  }
+  geometry ...
+}
+```
+
+## Syntax: Material
+
+A [Material](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/shape.html#Material) node controls shape material attributes
+
+- *diffuseColor* - main shading color
+- *emissiveColor* - glowing color
+- *transparency* - opaque or not
+
+### XML Encoding
+
+```xml
+<Shape>
+  <Appearance>
+    <Material
+        diffuseColor='0.8 0.8 0.8'
+        emissiveColor='0.0 0.0 0.0'
+        transparency='0.0'/>
+  </Appearance>
+  <!-- geometry ... -->
+</Shape>
+```
+
+### Classic Encoding
+
+```js
+Shape {
+  appearance Appearance {
+    material Material {
+      diffuseColor  0.8 0.8 0.8
+      emissiveColor 0.0 0.0 0.0
+      transparency  0.0
+    }
+  }
+  geometry ...
+}
+```
+
+## Specifying colors
+
+Colors specify:
+
+- A mixture of red, green, and blue light
+- Values between 0.0 (none) and 1.0 (lots)
+
+| Color  | Red | Green | Blue | Result      |
+|--------|-----|-------|------|-------------|
+| White  | 1.0 | 1.0   | 1.0  | ![white][]  |
+| Red    | 1.0 | 0.0   | 0.0  | ![red][]    |
+| Yellow | 1.0 | 1.0   | 0.0  | ![yellow][] |
+| Cyan   | 0.0 | 1.0   | 1.0  | ![cyan][]   |
+| Brown  | 0.5 | 0.2   | 0    | ![brown][]  |
+
+  [white]: https://via.placeholder.com/15/ffffff/000000?text=+
+  [red]: https://via.placeholder.com/15/ff0000/000000?text=+
+  [yellow]: https://via.placeholder.com/15/fff000/000000?text=+
+  [cyan]: https://via.placeholder.com/15/00ffff/000000?text=+
+  [brown]: https://via.placeholder.com/15/692929/000000?text=+
+
+## Syntax: Material
+
+A [Material](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/shape.html#Material) node also controls shape shininess
+
+- *specularColor* - highlightcolor
+- *shininess* - highlightsize
+- *ambientIntensity* - ambient lighting effects
+
+## A sample world using appearance
+
+### XML Encoding
+
+```xml
+<Shape>
+  <Appearance>
+    <Material
+        diffuseColor='0.2 0.2 0.2'
+        emissiveColor='0.0 0.0 0.8'
+        transparency='0.25'/>
+  </Appearance>
+  <Box
+      size='2.0 4.0 0.3'/>
+</Shape>
+<!-- ... -->
+```
+
+### Classic Encoding
+
+```js
+Shape {
+  appearance Appearance {
+    material Material {
+      diffuseColor  0.2 0.2 0.2
+      emissiveColor 0.0 0.0 0.8
+      transparency  0.25
+    }
+  }
+  geometry Box {
+    size 2.0 4.0 0.3
+  }
+}
+...
+```
+
+[![Box1](https://create3000.github.io/media/tutorials/scenes/box1/screenshot.png)](https://create3000.github.io/media/tutorials/scenes/box1/example.html)
+
+[View scene in this window.](https://create3000.github.io/media/tutorials/scenes/box1/example.html)
+
+[Download ZIP Archive](https://create3000.github.io/media/tutorials/scenes/box1/box1.zip)
+
+## Summary
+
+The [Appearance](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/shape.html#Appearance) node controls overall shape appearance
+
+The [Material](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/shape.html#Material) node controls overall material properties including:
+
+- Shading color
+- Glow color
+- Transparency
+- Shininess
+- Ambient intensity

package/docs/tutorials/Controlling-color-on-coordinate-based-geometry.md

@@ -0,0 +1,208 @@
+# 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
+
+## 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):
+
+### XML Encoding
+
+```xml
+<Color
+    color='1.0 0.0 0.0, ...'/>
+```
+
+### Classic Encoding
+
+```js
+Color {
+  color [ 1.0 0.0 0.0, ... ]
+}
+```
+
+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.
+
+## Binding colors
+
+- Colors in the Color node override those in the Material node
+- You can bind colors
+  - To each point, line, or face
+  - To each coordinate in a line, or face
+
+## 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:
+
+- *color* - provides a list of colors
+- Always binds one color to each point, in order
+
+### XML Encoding
+
+```xml
+<Shape>
+  <Appearance><!-- ... --></Appearance>
+  <PointSet>
+    <Color ... />
+    <Coordinate ... />
+  </PointSet>
+</Shape>
+```
+
+### Classic Encoding
+
+```js
+Shape {
+  appearance Appearance { ... }
+  geometry PointSet {
+    color Color { ... }
+    coord Coordinate { ... }
+  }
+}
+```
+
+## 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:
+
+- *color* - list of colors
+- *colorIndex* - selects colors from list
+- *colorPerVertex* - control color binding
+
+### XML Encoding
+
+```xml
+<Shape>
+  <Appearance><!-- ... --></Appearance>
+  <IndexedLineSet
+      colorPerVertex='true'
+      colorIndex='...'
+      coordIndex='...'>
+    <Color ... />
+    <Coordinate ... />
+  </IndexedLineSet>
+</Shape>
+```
+
+### Classic Encoding
+
+```js
+Shape {
+  appearance Appearance { ... }
+  geometry IndexedLineSet {
+    colorPerVertex TRUE
+    colorIndex [ ... ]
+    coordIndex [ ... ]
+    color Color { ... }
+    coord Coordinate { ... }
+  }
+}
+```
+
+## Controlling color binding for line sets
+
+The *colorPerVertex* field controls how color indexes are used:
+
+- **FALSE:** one color index to each line (ending at -1 coordinate indexes)
+- **TRUE:** one color index to each coordinate index of each line (including -1 coordinate indexes)
+
+## 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:
+
+- *color* - list of colors
+- *colorIndex* - selects colors from list
+- *colorPerVertex* - control color binding
+
+### XML Encoding
+
+```xml
+<Shape>
+  <Appearance><!-- ... --></Appearance>
+  <IndexedFaceSet
+      colorPerVertex='true'
+      colorIndex='...'
+      coordIndex='...'>
+    <Color ... />
+    <Coordinate ... />
+  </IndexedFaceSet>
+</Shape>
+```
+
+### Classic Encoding
+
+```js
+Shape {
+  appearance Appearance { ... }
+  geometry IndexedFaceSet {
+    colorPerVertex TRUE
+    colorIndex [ ... ]
+    coordIndex [ ... ]
+    color Color { ... }
+    coord Coordinate { ... }
+  }
+}
+```
+
+## Controlling color binding for face sets
+
+The *colorPerVertex* field controls how color indexes are used (similar to line sets):
+
+- **FALSE:** one color index to each face (ending at -1 coordinate indexes)
+- **TRUE:** one color index to each coordinate index of each face (including -1 coordinate indexes)
+
+## Syntax: ElevationGrid
+
+An [ElevationGrid](https://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/components/geometry3D.html#ElevationGrid) geometry node creates terrains:
+
+- *color* - list of colors
+- *colorPerVertex* - control color binding
+- Always binds one color to each grid point or square, in order
+
+### XML Encoding
+
+```xml
+<Shape>
+  <Appearance><!-- ... --></Appearance>
+  <ElevationGrid
+      ...
+      colorPerVertex='true'
+      height='...'>
+    <Color ... />
+  </ElevationGrid>
+</Shape>
+```
+
+### Classic Encoding
+
+```js
+Shape {
+  appearance Appearance { ... }
+  geometry ElevationGrid {
+    ...
+    colorPerVertex TRUE
+    color Color { ... }
+    height [ ... ]
+  }
+}
+```
+
+## Controlling color binding for elevation grids
+
+The *colorPerVertex* field controls how color indexes are used (similar to line and face sets):
+
+- **FALSE:** one color to each grid square
+- **TRUE:** one color to each height for each grid square
+
+## 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:
+
+- 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
+
+The *colorPerVertex* field selects color per line/face/grid square or color per coordinate.

package/docs/tutorials/Controlling-detail.md

@@ -0,0 +1,130 @@
+# Controlling Detail
+
+## Motivation
+
+The further the viewer can see, the more there is to draw.
+
+If a shape is distant:
+
+- The shape is smaller
+- The viewer can't see as much detail
+- So ... draw it with less detail
+
+Varying detail with distance reduces upfront download time, and increases drawing speed.
+
+## Creating multiple shape versions
+
+To control detail, model the same shape several times:
+
+- high detail for when the viewer is close up
+- medium detail for when the viewer is nearish
+- low detail for when the viewer is distant
+
+Usually, two or three different versions is enough, but you can have as many as you want.
+
+## 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:
+
+- 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:
+
+- *center* - the center of the shape
+- *range* - a list of level switch ranges
+- *children* - a list of shape levels
+
+### XML Encoding
+
+```xml
+<LOD
+    center='0.0 0.0 0.0'
+    range='...'>
+  <!-- children ... -->
+</LOD>
+```
+
+### Classic Encoding
+
+```js
+LOD {
+  center 0.0 0.0 0.0
+  range [ ... ]
+  children [ ... ]
+}
+```
+
+## Choosing detail ranges
+
+Use a list of ranges for level switch points:
+
+- If you have 3 levels, you need 2 ranges
+- Ranges are hints to the browser
+
+**range \[ 5.0, 10.0 \]**
+
+![lod-level](https://create3000.github.io/media/tutorials/images/lod-level.png)
+
+## Optimizing a shape
+
+Suggested procedure to make different levels (versions):
+
+- Make the high detail shape first
+- Copy it to make a medium detail level
+- Move the medium detail shape to a desired switch distance
+- Delete parts that aren't dominant
+- Repeat for a low detail level
+
+Lower detail levels should use simpler geometry, fewer textures, and no text.
+
+## A sample LOD
+
+### XML Encoding
+
+```xml
+<LOD
+    center='0.0 0.0 0.0'
+    range='7.0, 10.0'>
+  <Inline
+      url='"torch1.x3d"'/>
+  <Inline
+      url='"torch2.x3d"'/>
+  <Inline
+      url='"torch3.x3d"'/>
+</LOD>
+```
+
+### Classic Encoding
+
+```js
+LOD {
+  center 0.0 0.0 0.0
+  range [ 7.0, 10.0 ]
+  children [
+    Inline { url "torch1.x3dv" }
+    Inline { url "torch2.x3dv" }
+    Inline { url "torch3.x3dv" }
+  ]
+}
+```
+
+[![LOD](https://create3000.github.io/media/tutorials/scenes/lod/screenshot.png)](https://create3000.github.io/media/tutorials/scenes/lod/example.html)
+
+[View scene in this window.](https://create3000.github.io/media/tutorials/scenes/lod/example.html)
+
+[Download ZIP Archive](https://create3000.github.io/media/tutorials/scenes/lod/lod.zip)
+
+## Summary
+
+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:
+
+- Ordered from high detail to low detail
+- Ranges to select switching distances