x_ite 8.11.6 → 8.11.8

package/docs/_posts/tutorials/building-shapes-out-of-points-lines-and-faces.md

@@ -1,315 +0,0 @@
----
-title: Building Shapes out of Points, Lines, and Faces
-date: 2022-11-28
-nav: tutorials-animation-sensors-and-geometry
-categories: [Tutorials]
-tags: [Building, Shapes, Points, Lines, Faces]
----
-## Motivation
-
-Complex shapes are hard to build with primitive shapes:
-
-- TerrainAnimals
-- Plants
-- Machinery
-
-Instead, build shapes out of atomic components:
-
-- Points, lines, and faces
-
-## Building shapes using coordinates
-
-Shape building is like a 3-D connect-the-dots game:
-
-- Place dots at 3-D locations
-- Connect-the-dots to form shapes
-
-A coordinate specifies a 3-D dot location. Measured relative to a coordinate system origin. A geometry node specifies how to connect the dots.
-
-## Syntax: Coordinate
-
-A [Coordinate](../components/rendering/coordinate) node contains a list of coordinates for use in building a shape.
-
-### XML Encoding
-
-```xml
-<!-- X Y Z -->
-<Coordinate
-    point='2.0 1.0 3.0, 4.0 2.5 5.3, ...'/>
-```
-
-### Classic Encoding
-
-```js
-Coordinate {
-  point [
-   #X   Y   Z
-    2.0 1.0 3.0,
-    4.0 2.5 5.3,
-    ...
-  ]
-}
-```
-
-## Using geometry coordinates
-
-Build coordinate-based shapes using geometry nodes:
-
-- [PointSet](../components/rendering/pointset)
-- [IndexedLineSet](../components/rendering/indexedlineset)
-- [IndexedFaceSet](../components/geometry3d/indexedfaceset)
-
-For all three nodes, use a [Coordinate](../components/rendering/coordinate) node as the value of the coord field.
-
-## Syntax: PointSet
-
-A [PointSet](../components/rendering/pointset) geometry node creates geometry out of points:
-
-- One point (a dot) is placed at each coordinate
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance><!-- ... --></Appearance>
-  <PointSet>
-    <Coordinate
-        point='...'/>
-  </PointSet>
-</Shape>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance { ... }
-  geometry PointSet {
-    coord Coordinate {
-      point [  ...  ]
-    }
-  }
-}
-```
-
-## Syntax: IndexedLineSet
-
-An [IndexedLineSet](../components/rendering/indexedlineset) geometry node creates geometry out of lines:
-
-- A straight line is drawn between pairs of selected coordinates
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance><!-- ... --></Appearance>
-  <IndexedLineSet
-      coordIndex='...'>
-    <Coordinate>
-        point='...'/>
-  </IndexedLineSet>
-</Shape>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance { ... }
-  geometry  IndexedLineSet {
-    coordIndex [ ... ]
-    coord Coordinate {
-      point [ ... ]
-    }
-  }
-}
-```
-
-## Using line set coordinate indexes
-
-Each coordinate in a [Coordinate](../components/rendering/coordinate) node is implicitly numbered
-
-- Index 0 is the first coordinate
-- Index **1** is the second coordinate, etc.
-
-To build a line shape:
-
-- Make a list of coordinates, using their indexes
-- List coordinate indexes in the *coordIndex* field of the [IndexedLineSet](../components/rendering/indexedlineset) node
-
-A line is drawn between pairs of coordinate indexes:
-
-- **-1** marks a break in the line
-- A line is not automatically drawn from the last index back to the first
-
-|                                                |                                 |
-|------------------------------------------------|---------------------------------|
-| *coordIndex* \[ 1, 0, 3, 8, -1, 5, 9, 0, -1 \] |                                 |
-| 1, 0, 3, 8,                                    | Draw line from 1 to 0 to 3 to 8 |
-| -1,                                            | End line, start next            |
-| 5, 9, 0                                        | Draw line from 5 to 9 to 0      |
-
-## Syntax: IndexedFaceSet
-
-An [IndexedFaceSet](../components/geometry3d/indexedfaceset) geometry node creates geometry out of faces:
-
-- A flat face (polygon) is drawn using an outline specified by coordinate indexes
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance><!-- ... --></Appearance>
-  <IndexedFaceSet
-      coordIndex='...'>
-    <Coordinate>
-        point='...'/>
-  </IndexedFaceSet>
-</Shape>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance { ... }
-  geometry IndexedFaceSet {
-    coordIndex [ ... ]
-    coord Coordinate {
-      point [  ...  ]
-    }
-  }
-}
-```
-
-## Using face set coordinate index lists
-
-To build a face shape
-
-- Make a list of coordinates, using their indexes
-- List coordinate indexes in the *coordIndex* field of the [IndexedFaceSet](../components/geometry3d/indexedfaceset) node
-
-A triangle is drawn connecting sequences of coordinate indexes:
-
-- **-1** marks a break in the sequence
-- Each face is automatically closed, connecting the last index back to the first
-
-|                                                |                                      |
-|------------------------------------------------|--------------------------------------|
-| *coordIndex* \[ 1, 0, 3, 8, -1, 5, 9, 0, -1 \] |                                      |
-| 1, 0, 3, 8                                     | Draw face from 1 to 0 to 3 to 8 to 1 |
-| -1,                                            | End face, start next                 |
-| 5, 9, 0                                        | Draw face from 5 to 9 to 0 to 5      |
-| -1                                             | End face                             |
-
-## Syntax: IndexedFaceSet
-
-An [IndexedFaceSet](../components/geometry3d/indexedfaceset) geometry node creates geometry out of faces:
-
-- *solid* - shape is solid
-- *ccw* - faces are counter-clockwise
-- *convex* - faces are convex
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance><!-- ... --></Appearance>
-  <IndexedFaceSet
-      solid='true'
-      ccw='true'
-      convex='true'
-      coordIndex='...'>
-    <Coordinate ... />
-  </IndexedFaceSet>
-</Shape>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance { ... }
-  geometry IndexedFaceSet {
-    solid TRUE
-    ccw TRUE
-    convex TRUE
-    coordIndex [ ... ]
-    coord Coordinate { ... }
-  }
-}
-```
-
-## Using shape control
-
-A solid shape is one where the insides are never seen:
-
-- If never seen, don't attempt to draw them
-- When *solid* **TRUE**, the back sides (inside) of faces are not drawn
-
-The front of a face has coordinates in counter-clockwise order:
-
-- When *ccw* **FALSE**, the other side is the front
-
-Faces are assumed to be convex
-
-- When *convex* **FALSE,** concave faces are automatically broken into multiple convex faces
-
-## Syntax: CoordinateInterpolator
-
-A [CoordinateInterpolator](../components/interpolation/coordinateinterpolator) node describes a coordinate path:
-
-- *keys* - key fractions
-- *keyValues* - key coordinate lists (X, Y, Z lists)
-
-### XML Encoding
-
-```xml
-<CoordinateInterpolator
-    key='0.0, ...'
-    keyValue='0.0 1.0 0.0, ...'/>
-```
-
-### Classic Encoding
-
-```js
-CoordinateInterpolator {
-  key [ 0.0, ... ]
-  keyValue [ 0.0 1.0 0.0, ... ]
-}
-```
-
-Typically route into a [Coordinate](../components/rendering/coordinate) node's set\_point input.
-
-## Interpolating coordinate lists
-
-A [CoordinateInterpolator](../components/interpolation/coordinateinterpolator) node interpolates lists of coordinates:
-
-- Each output is a list of coordinates
-
-If n output coordinates are needed for t fractional times:
-
-- n × t coordinates are needed in the key value list
-
-## Summary
-
-- Shapes are built by connecting together coordinates
-- Coordinates are listed in a [Coordinate](../components/rendering/coordinate) node
-- Coordinates are implicitly numbers starting at 0
-- Coordinate index lists give the order in which to use coordinates
-
-The [PointSet](../components/rendering/pointset) node draws a dot at every coordinate:
-
-- The *coord* field value is a Coordinate node
-
-The [IndexedLineSet](../components/rendering/indexedlineset) node draws lines between coordinates:
-
-- The *coord* field value is a Coordinate node
-- The *coordIndex* field value is a list of coordinate indexes
-
-The [IndexedFaceSet](../components/geometry3d/indexedfaceset) node draws faces outlined by coordinates:
-
-- The *coord* field value is a Coordinate node
-- The *coordIndex* field value is a list of coordinate indexes
-
-The [CoordinateInterpolator](../components/interpolation/coordinateinterpolator) node converts times to coordinates.

package/docs/_posts/tutorials/controlling-appearance-with-materials.md

@@ -1,193 +0,0 @@
----
-title: Controlling Appearance with Materials
-date: 2022-11-28
-nav: tutorials-shapes-geometry-and-appearance
-categories: [Tutorials]
-tags: [Controlling, Appearance, 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](../components/shape/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](../components/shape/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](../components/shape/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/ffffff
-  [red]: https://via.placeholder.com/15/ff0000/ff0000
-  [yellow]: https://via.placeholder.com/15/fff000/fff000
-  [cyan]: https://via.placeholder.com/15/00ffff/00ffff
-  [brown]: https://via.placeholder.com/15/692929/692929
-
-## Syntax: Material
-
-A [Material](../components/shape/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
-  }
-}
-...
-```
-
-### Example
-
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/box1/box1.x3dv" update="auto">
-  <img src="https://create3000.github.io/media/tutorials/scenes/box1/screenshot.png" alt="Box 1"/>
-</x3d-canvas>
-
-[Download ZIP Archive](https://create3000.github.io/media/tutorials/scenes/box1/box1.zip)
-
-## Summary
-
-The [Appearance](../components/shape/appearance) node controls overall shape appearance
-
-The [Material](../components/shape/material) node controls overall material properties including:
-
-- Shading color
-- Glow color
-- Transparency
-- Shininess
-- Ambient intensity

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

@@ -1,213 +0,0 @@
----
-title: Controlling Color on Coordinate-Based Geometry
-date: 2022-11-28
-nav: tutorials-animation-sensors-and-geometry
-categories: [Tutorials]
-tags: [Controlling, Color, Coordinate, Geometry]
----
-## Motivation
-
-- The [Material](../components/shape/material) node gives an entire shape the same color
-- You can provide colors for individual parts of a shape using a [Color](../components/rendering/color) node
-
-## Syntax: Color
-
-A [Color](../components/rendering/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](../components/geometry3d/indexedfaceset), [IndexedLineSet](../components/rendering/indexedlineset), [PointSet](../components/rendering/pointset) or [ElevationGrid](../components/geometry3d/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](../components/rendering/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](../components/rendering/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](../components/geometry3d/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](../components/geometry3d/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](../components/rendering/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](../components/shape/material) node
-
-The *colorPerVertex* field selects color per line/face/grid square or color per coordinate.