x_ite 8.11.7 → 8.11.8

package/docs/_posts/tutorials/animating-transforms.md

@@ -1,390 +0,0 @@
----
-title: Animating Transforms
-date: 2022-11-28
-nav: tutorials-animation-sensors-and-geometry
-categories: [Tutorials]
-tags: [Animating, Transforms]
----
-## Motivation
-
-An animation changes something over time:
-
-- position - a car driving
-- orientation - an airplane banking
-- color - seasons changing
-
-Animation requires control over time:
-
-- When to start and stop
-- How fast to go
-
-## Controlling time
-
-- A [TimeSensor](../components/time/timesensor) node is similar to a stop watch
-  - You control the start and stop time
-- The sensor generates time events while it is running
-- To animate, route time events into other nodes
-
-## Using absolute time
-
-- A [TimeSensor](../components/time/timesensor) node generates absolute and fractional time events
-- Absolute time events give the wall-clock time
-  - Absolute time is measured in seconds since 12:00am January 1, 1970!
-  - Useful for triggering events at specific dates and times
-
-## Using fractional time
-
-- Fractional time events give a number from 0.0 to 1.0
-  - When the sensor starts, it outputs a 0.0
-  - At the end of a cycle, it outputs a 1.0
-  - The number of seconds between 0.0 and 1.0 is controlled by the cycle interval
-- The sensor can loop forever, or run through only one cycle and stop
-
-## Syntax: TimeSensor
-
-- A [TimeSensor](../components/time/timesensor) node generates events based upon time
-  - *startTime* and *stopTime* - when to run
-  - *cycleInterval* - how long a cycle is
-  - *loop* - whether or not to repeat cycles
-
-### XML Encoding
-
-```xml
-<TimeSensor
-    cycleInterval='1.0'
-    loop='false'
-    startTime='0.0'
-    stopTime='0.0'/>
-```
-
-### Classic Encoding
-
-```js
-TimeSensor {
-  cycleInterval 1.0
-  loop FALSE
-  startTime 0.0
-  stopTime 0.0
-}
-```
-
-## Using timers
-
-To create a continuously running timer:
-
-- *loop* **TRUE**
-- *stopTime* \<= *startTime*
-
-When stop time \<= start time, stop time is ignored
-
-To run until the stop time:
-
-- *loop* **TRUE**
-- *stopTime* \> *startTime*
-
-To run one cycle then stop:
-
-- *loop* **FALSE**
-- *stopTime* \<= *startTime*
-
-The *set\_startTime* input event:
-
-- Sets when the timer should start
-
-The *set\_stopTime* input event:
-
-- Sets when the timer should stop
-
-## Using timer outputs
-
-The isActive output event:
-
-- Outputs TRUE at timer start
-- Outputs FALSE at timer stop
-
-The time output event:
-
-- Outputs the absolute time
-
-The fraction\_changed output event:
-
-- Outputs values from 0.0 to 1.0 during a cycle
-- Resets to 0.0 at the start of each cycle
-
-## A sample time sensor
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance>
-    <Material DEF='Monolith1Facade'
-        diffuseColor='0.2 0.2 0.2'/>
-  </Appearance>
-  <Box size='2.0 4.0 0.3'/>
-</Shape>
-<TimeSensor DEF='Monolith1Timer'
-    cycleInterval='4.0'
-    loop='false'
-    startTime='0.0'
-    stopTime='0.1'/>
-
-<ROUTE fromNode='Monolith1Touch' fromField='touchTime' toNode='Monolith1Timer' toField='set_startTime'/>
-<ROUTE fromNode='Monolith1Timer' fromField='fraction_changed' toNode='Monolith1Facade' toField='set_transparency'/>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance {
-    material DEF Monolith1Facade Material {
-      diffuseColor 0.2 0.2 0.2
-    }
-  }
-  geometry Box { size 2.0 4.0 0.3 }
-}
-DEF Monolith1Timer TimeSensor {
-  cycleInterval 4.0
-  loop FALSE
-  startTime 0.0
-  stopTime  0.1
-}
-
-ROUTE Monolith1Touch.touchTime TO Monolith1Timer.set_startTime
-ROUTE Monolith1Timer.fraction_changed TO Monolith1Facade.set_transparency
-```
-
-## Converting time to position
-
-To animate the position of a shape you provide:
-
-- A list of key positions for a movement path
-- A time at which to be at each position
-
-An interpolatorsolator node converts an input time to an output position
-
-- When a time is in between two key positions, the interpolatorsolator computes an intermediate position
-
-## Interpolating positions
-
-Each key position along a path has:
-
-- A key value (such as a position)
-- A key fractional time
-
-Interpolation fills in values between your key values:
-
-| Fractional Time | Position      |
-|-----------------|---------------|
-| 0.0             | 0.0 0.0 0.0   |
-| *0.1*           | *0.4 0.1 0.0* |
-| *0.2*           | *0.8 0.2 0.0* |
-| *...*           | *...*         |
-| 0.5             | 4.0 1.0 0.0   |
-| *...*           | *...*         |
-
-## Syntax: PositionInterpolator
-
-A [PositionInterpolator](../components/interpolation/positioninterpolator) node describes a position path
-
-- *key* - key fractional times
-- *keyValue* - key positions
-
-### XML Encoding
-
-```xml
-<PositionInterpolator
-    key='0.0, ...'
-    keyValue='0.0 0.0 0.0, ...'/>
-```
-
-### Classic Encoding
-
-```js
-PositionInterpolator {
-  key [ 0.0, ... ]
-  keyValue [ 0.0 0.0 0.0, ... ]
-}
-```
-
-Typically route into a [Transform](../components/grouping/transform) node's *set\_translation* input
-
-## Using position interpolatorsolator inputs and outputs
-
-The *set\_fraction* input:
-
-- Sets the current fractional time along the key path
-
-The *value\_changed* output:
-
-- Outputs the position along the path each time the fraction is set
-
-## A sample using position interpolatorsolators
-
-### XML Encoding
-
-```xml
-<Transform DEF='Particle1'
-  <Shape><!-- ... --></Shape>
-</Transform>
-
-<TimeSensor DEF='Timer1'
-    cycleInterval='12.0'
-    loop='true'
-    startTime='0.0'
-    stopTime='-1.0'/>
-
-<PositionInterpolator DEF='Position1'
-    key='0.0, ...'
-    keyValue='0.0 0.0 0.0, ...'/>
-
-<ROUTE fromNode='Timer1' fromField='fraction_changed' toNode='Position1' toField='set_fraction'/>
-<ROUTE fromNode='Position1' fromField='value_changed' toNode='Particle1' toField='set_translation'/>
-```
-
-### Classic Encoding
-
-```js
-DEF Particle1 Transform {
-  children [
-    Shape { ... }
-  ]
-}
-
-DEF Timer1 TimeSensor {
-  cycleInterval 12.0
-  loop TRUE
-  startTime 0.0
-  stopTime -1.0
-}
-
-DEF Position1 PositionInterpolator {
-  key  [ 0.0, ... ]
-  keyValue [ 0.0 0.0 0.0, ... ]
-}
-
-ROUTE Timer1.fraction_changed TO Position1.set_fraction
-ROUTE Position1.value_changed TO Particle1.set_translation
-```
-
-## Using other types of interpolatorsolators
-
-|                      |                             |
-|----------------------|-----------------------------|
-| Animate position     | [PositionInterpolator][]    |
-| Animate rotation     | [OrientationInterpolator][] |
-| Animate scale        | [PositionInterpolator][]    |
-| Animate color        | [ColorInterpolator][]       |
-| Animate transparency | [ScalarInterpolator][]      |
-
-  [PositionInterpolator]: https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/interpolators.html#PositionInterpolator
-  [OrientationInterpolator]: https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/interpolators.html#OrientationInterpolator
-  [ColorInterpolator]: https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/interpolators.html#ColorInterpolator
-  [ScalarInterpolator]: https://www.web3d.org/documents/specifications/19775-1/V4.0/Part01/components/interpolators.html#ScalarInterpolator
-
-## Syntax: OrientationInterpolator
-
-A [OrientationInterpolator](../components/interpolation/orientationinterpolator) node describes an orientation path
-
-- *key* - key fractional times
-- *keyValue* - key rotations (axis and angle)
-
-### XML Encoding
-
-```xml
-<OrientationInterpolator
-    key='0.0, ...'
-    keyValue='0.0 1.0 0.0 0.0, ...'/>
-```
-
-### Classic Encoding
-
-```js
-OrientationInterpolator {
-  key [ 0.0, ... ]
-  keyValue [ 0.0 1.0 0.0 0.0, ... ]
-}
-```
-
-Typically route into a [Transform](../components/grouping/transform) node's *set\_rotation* input
-
-## Syntax: ColorInterpolator
-
-[ColorInterpolator](../components/interpolation/colorinterpolator) node describes a color path
-
-- *key* - key fractional times
-- *keyValue* - key colors (red, green, blue)
-
-### XML Encoding
-
-```xml
-<ColorInterpolator
-    key='0.0, ...'
-    keyValue='1.0 1.0 0.0, ...'/>
-```
-
-### Classic Encoding
-
-```js
-ColorInterpolator {
-  key [ 0.0, ... ]
-  keyValue [ 1.0 1.0 0.0, ... ]
-}
-```
-
-Typically route into a [Material](../components/shape/material) node's *set\_diffuseColor* or *set\_emissiveColor* inputs
-
-## Syntax: ScalarInterpolator
-
-[ScalarInterpolator](../components/interpolation/scalarinterpolator) node describes a scalar path
-
-- *key* - key fractional times
-- *keyValue* - key scalars (used for anything)
-
-### XML Encoding
-
-```xml
-<ScalarInterpolator
-    key='0.0, ...'
-    keyValue='4.5, ...'/>
-```
-
-### Classic Encoding
-
-```js
-ScalarInterpolator {
-  key [ 0.0, ... ]
-  keyValue [ 4.5, ... ]
-}
-```
-
-Often route into a [Material](../components/shape/material) node's *set\_transparency* input
-
-## Summary
-
-The [TimeSensor](../components/time/timesensor) node's fields control:
-
-- Timer start and stop times
-- The cycle interval
-- Whether the timer loops or not
-
-The sensor outputs:
-
-- true/false on *isActive* at start and stop
-- absolute time on time while running
-- fractional time on *fraction\_changed* while running
-
-Interpolators use key times and values and compute intermediate values
-
-All interpolatorsolators have:
-
-- a *set\_fraction* input to set the fractional time
-- a *value\_changed* output to send new values
-
-Some interpolatorsolators are:
-
-- The [PositionInterpolator](../components/interpolation/positioninterpolator) node converts times to positions (or scales)
-- The [OrientationInterpolator](../components/interpolation/orientationinterpolator) node converts times to rotations
-- The [ColorInterpolator](../components/interpolation/colorinterpolator) node converts times to colors
-- The [ScalarInterpolator](../components/interpolation/scalarinterpolator) node converts times to scalars (such as transparencies)

package/docs/_posts/tutorials/basic-nodes.md

@@ -1,312 +0,0 @@
----
-title: Basic Nodes
-date: 2022-11-28
-nav: tutorials-basic
-categories: [Tutorials]
-tags: [Basic, Nodes]
----
-## Overview
-
-X3D is capable of representing static and animated objects and it can have hyperlinks to other media such as sound, movies, and image. X\_ITE is a browsers for X3D and available for many different platforms as well as Titania is an authoring tools for the creation X3D files. For programmers there is an JavaScript API interface to access X3D nodes and commonly used 3D application programmer interface features.
-
-## Let The Games Begin…
-
-A X3D file has four basic elements:
-
-1. A header which tells the browser that the file is X3D and which version also. A header line is mandatory.
-2. Comments are preceded by a #.
-3. Nodes: Most everything else are nodes. Nodes generally contain:
-  1. The type of node (required). Nodes always are in Capital letters.
-  2. A set of curly braces {.....} (required)
-  3. A number of fields, all or some of which are optional. Note that there is no mandatory ordering of fields.
-  4. Fields which that can have multiple values require braces \[...\]. Fields always start with lowerCase letters.
-4. Routes: Theses are connections between field where events are send. Events are generated from output fields (if it changes) and received by input fields.
-
-Here is a typical X3D Classic Encoded file with a single node:
-
-### XML Encoding
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<X3D profile='Full' version='{{ site.x3d_latest_version }}' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-{{ site.x3d_latest_version }}.xsd'>
-  <Scene>
-    <PlaneSensor DEF='Sensor'
-        offset='0 2 0'/>
-    <Transform DEF='XForm'
-        translation='0 2 0'>
-      <Shape>
-        <Sphere/>
-      </Shape>
-    </Transform>
-    <ROUTE fromNode='Sensor' fromField='translation_changed' toNode='XForm' toField='set_translation'/>
-  </Scene>
-</X3D>
-```
-
-### Classic Encoding
-
-```js
-#X3D V{{ site.x3d_latest_version }} utf8
-
-# A sample file with a simple scene
-
-DEF Sensor PlaneSensor {
-  offset 0 2 0
-}
-
-DEF XForm Transform {
-  translation 0 2 0
-  children [
-    Shape {
-      geometry Sphere {}
-    }
-  ]
-}
-
-# Make a connection between the PlaneSensor and the Transform
-
-ROUTE Sensor.translation_changed TO XForm.set_translation
-```
-
-Be careful! X3D is a case sensitive language.
-
-## Key Concept
-
-Now we can start to add information to the file. The first node to deal with is the [WorldInfo](../components/core/worldinfo) node. This node contains general information about the world, such as a *title* for the world. [WorldInfo](../components/core/worldinfo) can also contain an *info* field, which contain other information about the file such as copyright information. You can put what you like in it. A sample [WorldInfo](../components/core/worldinfo) node is shown below:
-
-### XML Encoding
-
-```xml
-<WorldInfo
-    title='Tutorial'
-    info='"Basic Nodes", "https://create3000.github.io/x_ite/"'/>
-```
-
-### Classic Encoding
-
-```js
-WorldInfo {
- title "Tutorial"
- info [
-   "Basic Nodes"
-   "https://create3000.github.io/x_ite/"
-  ]
-}
-```
-
-You can have multiple strings in the *info* field, by putting them all inside square brackets. The *title* must not have square brackets, as it is only a single string.
-
-## Shape
-
-A [Shape](../components/shape/shape) node is the node to specify material and geometry properties. We add a Shape node to the world now, as shown below.
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance>
-    <Material/>
-  </Appearance>
-  <Box/>
-</Shape>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance {
-    material Material { }
-  }
-  geometry Box { }
-}
-```
-
-## Geometry Nodes
-
-There are a lot geometry nodes defined in X3D. The basic geometry nodes are:
-
-- [Box](../components/geometry3d/box)
-- [Cone](../components/geometry3d/cone)
-- [Cylinder](../components/geometry3d/cylinder)
-- [ElevationGrid](../components/geometry3d/elevationgrid)
-- [Extrusion](../components/geometry3d/extrusion)
-- [IndexedFaceSet](../components/geometry3d/indexedfaceset)
-- [Sphere](../components/geometry3d/sphere)
-- [Text](../components/text/text)
-
-The most important to define various geometries is probably the [IndexedFaceSet](../components/geometry3d/indexedfaceset) node.
-
-## Transform
-
-In order to make our world any use at all, we need to be able to transform objects. X3D has three types of transformations we can apply to objects. These are *translation, rotation, and scale.* These are used in a [Transform](../components/grouping/transform) node. A Transform node doesn't have to have all three in it. You can just have a *rotation,* for instance. The transformations within a Transform apply to the children of the node. This is called nesting, where a node can have any number of child nodes. The syntax for this is shown in the example below, along with the syntax for a Transform node.
-
-### XML Encoding
-
-```xml
-<Transform
-    translation='1 1 1'
-    rotation='0 1 0 0.78'
-    scale='2 1 2'/>
-  <Shape USE='House'/>
-</Transform>
-```
-
-### Classic Encoding
-
-```js
-Transform {
-  translation 1 1 1
-  rotation 0 1 0 0.78
-  scale 2 1 2
-  children [
-    USE House
-  ]
-}
-```
-
-A Transform node can have another Transform nested inside it as a child, which allows you to do sequences of transformations. Remember, the order of transformations matters. A rotation followed by a translation is not the same as a translation followed by a rotation. Within a single Transform node, the transformations are carried out in strict order: scale, then rotate, the translate. So, if you want a translation followed by a rotation, you need to nest Transform nodes inside one another.
-
-## Anchor
-
-In X3D, you navigate between pages the same way as in HTML. You have an object that, when the user clicks on it, links to another page. Exactly what you're all used to. In X3D, this is done with the [Anchor](../components/networking/anchor) node.
-
-### XML Encoding
-
-```xml
-<Anchor
-    url='"next-page.html"'
-    description='Look forward'>
-  <Transform USE='ButtonWithText'/>
-</Anchor>
-```
-
-### Classic Encoding
-
-```js
-Anchor {
-  url "next-page.html"
-  description "Look forward"
-  children [
-     USE ButtonWithText
-  ]
-}
-```
-
-The Anchor node is activated whenever one of its children is clicked, and opens up the page specified in *url.* The description field is a piece of text that appears somewhere in the browser when the mouse is over the hyperlink, just as in HTML.
-
-There are a couple of extra fields not shown above. One of these is *parameter* field, which can take extra information, such as a window name.
-
-### XML Encoding
-
-```xml
-parameter='"target=_blank"'
-```
-
-### Classic Encoding
-
-```js
-parameter [ "target=_blank" ]
-```
-
-## Background
-
-There are two ways we can change the background of our scene. One is to specify colors for the [Background](../components/environmentaleffects/background), and the other is to provide images to be mapped onto the background. Both of these are implemented with the Background node. First of all, I'll describe how to add color to the background of your scene.
-
-### XML Encoding
-
-```xml
-<Background
-    skyColor='0.5 0.5 0.5'/>
-```
-
-### Classic Encoding
-
-```js
-Background {
-  skyColor [0.5 0.5 0.5]
-}
-```
-
-This will display a gray background. You can also make the background transparent by setting the *transparency* field to some value.
-
-## Viewpoint
-
-To give the world camera another position or orientation there is a [Viewpoint](../components/navigation/viewpoint) node. The viewpoint node can be placed anywhere within the scene graph.
-
-### XML Encoding
-
-```xml
-<Viewpoint DEF='LookAtHouse'
-    position='0 2 10'
-    orientation='0 1 0 3.14'/>
-```
-
-### Classic Encoding
-
-```js
-DEF LookAtHouse Viewpoint {
-  position 0 2 10
-  orientation 0 1 0 3.14
-}
-```
-
-Beside the Viewpoint node there is also an [OrthoViewpoint](../components/navigation/orthoviewpoint) node to define an orthographic camera.
-
-If you define more than once viewpoint in an X3D file, the first viewpoint defined will be bound if the world is loaded. To bind one of the other viewpoints send a *set\_bind* event with the value TRUE to the viewpoint. You must use a [Script](../components/scripting/script) node for that or use a Anchor node with the name of the viewpoint in the *url* field preceded by '#'.
-
-### XML Encoding
-
-```xml
-<Anchor
-    url='"#LookAtHouse"'/>
-```
-
-### Classic Encoding
-
-```js
-Anchor {
-  url "#LookAtHouse"
-}
-```
-
-## Lighting in X3D
-
-The first thing to mention is the way that the X3D lighting model works. All lights have the following fields: *color, ambientIntensity,* and *intensity.* Each light has an intensity, which a value between 0 and 1 corresponding to its brightness. It also has an ambient intensity, also between 0 and 1, which is how much light it contributes to the general ambient light in the scene. Because of this, the more lights in the scene, the brighter the ambient illumination, which makes sense. Ambient light is light that shines on every surface in the scene, simulating light scattered from other objects. Each light also has a *color* field associated with it, which is the color of the light it emits. The direct light emitted by a light source is calculated by *intensity × color.* The ambient light contributed to the scene is *ambientIntensity × color.* Each light source also has an area of effect, so as to keep X3D worlds enclosed and scalable. The method of doing this varies between the different types.
-
-When using Gouraud shading browsers calculate lighting by working it out for each corner of a face, and interpolating the shading between these vertices. By default, X3D worlds will have the user's headlight ON. Remember to turn it off if you feel it necessary. Use a [NavigationInfo](../components/navigation/navigationinfo) node to do that.
-
-### XML Encoding
-
-```xml
-<NavigationInfo
-    headlight='false'/>
-```
-
-### Classic Encoding
-
-```js
-NavigationInfo {
-  headlight FALSE
-}
-```
-
-There are three different light nodes that can be used within a scene.
-
-- [DirectionalLight](../components/lighting/directionallight)
-- [PointLight](../components/lighting/pointlight)
-- [SpotLight](../components/lighting/spotlight)
-
-You can place any light node within a grouping node (e.g. [Group](../components/grouping/group), [Transform](../components/grouping/transform), [Switch](../components/grouping/switch)) and set the global field to **FALSE** to define a local light.
-
-## Grouping Nodes
-
-The following nodes are the most important grouping nodes (there are much more in X3D) which means that they can contain other nodes in their children field.
-
-- [Anchor](../components/networking/anchor)
-- [Billboard](../components/navigation/billboard)
-- [Collision](../components/navigation/collision)
-- [Group](../components/grouping/group)
-- [LOD](../components/navigation/lod)
-- [Switch](../components/grouping/switch)
-- [Transform](../components/grouping/transform)