x_ite 8.11.7 → 8.11.9

package/docs/_posts/tutorials/mapping-textures.md

@@ -1,217 +0,0 @@
----
-title: Mapping Textures
-date: 2022-11-28
-nav: tutorials-textures-lights-and-environment
-categories: [Tutorials]
-tags: [Mapping, Textures]
----
-## Motivation
-
-You can model every tiny texture detail of a world using a vast number of colored faces:
-
-- Takes a long time to write the X3D
-- Takes a long time to draw
-
-Use a trick instead:
-
-- Take a picture of the real thing
-- Paste that picture on the shape, like sticking on a decal
-
-This technique is called Texture Mapping
-
-## Using image textures
-
-Image texture:
-
-- Uses a single image from a file in one of these formats:
-
-|      |                                                                                                                              |
-|------|------------------------------------------------------------------------------------------------------------------------------|
-| GIF  | 8-bit lossless compressed images 1 transparency color                                                                        |
-| JPEG | Usually a poor choice for texture mapping 8-bit thru 24-bit lossy compressed images No transparency support                  |
-| PNG  | An adequate choice for texture mapping 8-bit thru 24-bit lossless compressed images 8-bit transparency per pixel Best choice |
-
-## Using pixel textures
-
-Pixel texture:
-
-- A single image, given in the VRML file itself
-- The image is encoded using hex
-  - Up to 10 bytes per pixel
-  - Very inefficient
-  - Only useful for very small textures
-  - Stripes
-  - Checkerboard patterns
-
-## Using movie textures
-
-Movie texture:
-
-- A movie from an MP4 file
-- The movie plays back on the textured shape
-
-## Syntax: Appearance
-
-An [Appearance](../components/shape/appearance) node describes overall shape appearance:
-
-- *texture* - texture source
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance>
-    <Material ... />
-    <ImageTexture ... />
-  </Appearance>
-  <!-- geometry ... -->
-</Shape>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance {
-    material Material { ... }
-    texture ImageTexture { ... }
-  }
-  geometry ...
-}
-```
-
-## Syntax: ImageTexture
-
-An [ImageTexture](../components/texturing/imagetexture) node selects a texture image for texture mapping:
-
-- *url* - texture image file URL
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance>
-    <Material/>
-    <ImageTexture
-        url='"wood.jpg"'/>
-  </Appearance>
-  <!-- geometry ... -->
-</Shape>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance {
-    material Material { }
-    texture ImageTexture {
-      url "wood.jpg"
-    }
-  }
-  geometry ...
-}
-```
-
-## Syntax: PixelTexture
-
-A [PixelTexture](../components/texturing/pixeltexture) node specifies texture image pixels for texture mapping:
-
-- *image* - texture image pixels
-- Image data - width, height, bytes/pixel, pixel values
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance>
-    <Material/>
-    <PixelTexture
-        image='2 1 3
-          0xFFFF00 0xFF0000'/>
-  </Appearance>
-  <!-- geometry ... -->
-</Shape>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance {
-    material Material { }
-    texture PixelTexture {
-      image 2 1 3
-        0xFFFF00 0xFF0000
-    }
-  }
-  geometry ...
-}
-```
-
-## Syntax: MovieTexture
-
-A [MovieTexture](../components/texturing/movietexture) node selects a texture movie for texture mapping:
-
-- *url* - texture movie file URL
-- When to play the movie, and how quickly (like a TimeSensor node)
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance>
-    <Material/>
-    <MovieTexture
-        url='"movie.mp4"'
-        loop='true'
-        speed='1.0'
-        startTime='0.0'
-        stopTime='0.0'/>
-  </Appearance>
-  <!-- geometry ... -->
-</Shape>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance {
-    material Material { }
-    texture MovieTexture {
-      url "movie.mp4"
-      loop TRUE
-      speed 1.0
-      startTime 0.0
-      stopTime 0.0
-    }
-  }
-  geometry ...
-}
-```
-
-## Using materials with textures
-
-- Color textures override the color in a [Material](../components/shape/material) node
-- Grayscale textures multiply with the Material node color
-  - Good for colorizing grayscale textures
-- If there is no Material node, the texture is applied emissively
-
-## Using transparent textures
-
-Texture images can include color and transparency values for each pixel:
-
-- Pixel transparency is also known as alpha
-
-Pixel transparency enables you to make parts of a shape transparent:
-
-- Windows, grillwork, holes
-- Trees, clouds
-
-## Summary
-
-- A texture is like a decal pasted to a shape
-- Specify the texture using an [ImageTexture](../components/texturing/imagetexture), [PixelTexture](../components/texturing/pixeltexture), or [MovieTexture](../components/texturing/movietexture) node in an [Appearance](../components/shape/appearance) node
-- Color textures override material, grayscale textures multiply
-- Textures with transparency create holes

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

@@ -1,168 +0,0 @@
----
-title: Naming Nodes
-date: 2022-11-28
-nav: tutorials-shapes-geometry-and-appearance
-categories: [Tutorials]
-tags: [Naming, Nodes]
----
-## Motivation
-
-- If several shapes have the same geometry or appearance, you must use multiple duplicate nodes, one for each use
-- Instead, define a name for the first occurrence of a node
-- Later, use that name to share the same node in a new context
-
-## Syntax: DEF
-
-The **DEF** syntax gives a name to a node.
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance>
-    <Material DEF='RedColor'
-        diffuseColor='1.0 0.0 0.0'/>
-  </Appearance>
-  <!-- geometry ... -->
-</Shape>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance {
-    material DEF RedColor Material {
-      diffuseColor 1.0 0.0 0.0
-    }
-  }
-  geometry ...
-}
-```
-
-## Using DEF
-
-- **DEF** must be in upper-case
-- You can name any node
-- Names can be most any sequence of letters and numbers
-  - Names must be unique within a file
-
-## Syntax: USE
-
-The **USE** syntax uses a previously named node
-
-### XML Encoding
-
-```xml
-<Shape>
-  <Appearance>
-    <Material USE='RedColor'/>
-  </Appearance>
-  <!-- geometry ... -->
-</Shape>
-```
-
-### Classic Encoding
-
-```js
-Shape {
-  appearance Appearance {
-    material USE RedColor
-  }
-  geometry ...
-}
-```
-
-## Using USE
-
-- **USE** must be in upper-case
-- A re-use of a named node is called an instance
-- A named node can have any number of instances
-  - Each instance shares the same node description
-  - You can only instance names defined in the same file
-
-## Using named nodes
-
-Naming and using nodes:
-
-- Saves typing
-- Reduces file size
-- Enables rapid changes to shapes with the same attributes
-- Speeds browser processing
-
-Names are also necessary for animation ...
-
-## A sample use of node names
-
-### XML Encoding
-
-```xml
-<Inline
-    url='"table.x3dv"'/>
-<Transform
-    translation='0.95 0 0'>
-  <Inline DEF='Chair'
-      url='"chair.x3dv"'/>
-</Transform>
-<Transform
-    translation='-0.95 0 0'
-    rotation='0 1 0 3.14'>
-  <Inline USE='Chair'/>
-</Transform>
-<Transform
-    translation='0 0 0.95'
-    rotation='0 1 0 4.71318530717959'>
-  <Inline USE='Chair'/>
-</Transform>
-<Transform
-    translation='0 0 -0.95'
-    rotation='0 1 0 1.57'>
-  <Inline USE='Chair'/>
-</Transform>
-```
-
-### Classic Encoding
-
-```js
-Inline {
-  url "table.x3dv"
-}
-
-Transform {
-  translation 0.95 0.0 0.0
-  children DEF Chair Inline {
-    url "chair.x3dv"
-  }
-}
-
-Transform {
-  translation -0.95 0.0 0.0
-  rotation 0.0 1.0 0.0 3.14
-  children USE Chair
-}
-
-Transform {
-  translation 0.0 0.0 0.95
-  rotation 0.0 1.0 0.0 -1.57
-  children USE Chair
-}
-
-Transform {
-  translation 0.0 0.0 -0.95
-  rotation 0.0 1.0 0.0 1.57
-  children USE Chair
-}
-```
-
-### Example
-
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/dinette/dinette.x3dv" update="auto">
-  <img src="https://create3000.github.io/media/tutorials/scenes/dinette/screenshot.png" alt="Dinette"/>
-</x3d-canvas>
-
-[Download ZIP Archive](https://create3000.github.io/media/tutorials/scenes/dinette/dinette.zip)
-
-## Summary
-
-- **DEF** names a node
-- **USE** uses a named node

package/docs/_posts/tutorials/overview.md

@@ -1,83 +0,0 @@
----
-title: Tutorials
-date: 2022-11-28
-nav: none
-categories: [Tutorials]
-tags: [Tutorials]
----
-## Overview
-
-We offer here a couple of introductory X3D tutorials on X3D concepts. It serves as background material for Titania and X_ITE.
-
-The only hardware and software requirement for most of the tutorials is a computer with the latest version of Titania or your favorite text editor and X_ITE. Titania has extensive documentation. It is the perfect environment to get started in creating sensational X3D scenes.
-
-## Let’s See What We Can Do…
-
-Simple, fast and efficient, our X3D tutorials give you all the tips and tricks to advance in the construction of your project.
-
-- [Hello, World](hello-world)
-  - First let's go over to the »Hello World« tutorial, which displays a simple earth and the text »Hello World!«.
-- [A Quick Overview: Basic Nodes](basic-nodes)
-  - Here are the basic nodes described, which are often used in an X3D world.
-
-Shapes, Geometry, and Appearance
-
-- [Introducing X3D](introducing-x3d)
-- [Building an X3D World](building-a-x3d-world)
-- [Building Primitive Shapes ](building-primitive-shapes)
-- [Transforming Shapes](transforming-shapes)
-- [Controlling Appearance with Materials ](controlling-appearance-with-materials)
-- [Grouping Nodes ](grouping-nodes)
-- [Naming Nodes](naming-nodes)
-
-Animation, Sensors, and Geometry
-
-- [Introducing Animation](introducing-animation)
-- [Animating Transforms](animating-transforms)
-- [Sensing Viewer Actions](sensing-viewer-actions)
-- [Building Shapes out of Points, Lines, and Faces](building-shapes-out-of-points-lines-and-faces)
-- [Building Elevation Grids](building-elevation-grids)
-- [Building Extruded Shapes](building-extruded-shapes)
-- [Controlling Color on Coordinate-Based Geometry](controlling-color-on-coordinate-based-geometry)
-- [Controlling Shading on Coordinate-Based Geometry](controlling-shading-on-coordinate-based-geometry)
-
-Textures, Lights, and Environment
-
-- [Mapping Textures](mapping-textures)
-- [Controlling How Textures are Mapped](controlling-how-textures-are-mapped)
-- [Lighting Your World](lighting-your-world)
-- [Adding Backgrounds](adding-backgrounds)
-- [Adding Fog](adding-fog)
-- [Adding Sound](adding-sound)
-- [Controlling the Viewpoint](controlling-the-viewpoint)
-- [Controlling Navigation](controlling-navigation)
-- [Sensing the Viewer](sensing-the-viewer)
-
-Scripts and Prototypes
-
-- [Controlling Detail](controlling-detail)
-- [Introducing Script Use](introducing-script-use)
-- [Writing Program Scripts with ECMAScript](writing-program-scripts-with-ecmascript)
-- [Creating New Node Types](creating-new-node-types)
-- [Providing Information About Your wWorld](providing-information-about-your-world)
-
-Some words about optimizing a scene
-
-- [Improve Performance](improving-performance)
-  - To optimize a scene is an important task when creating an X3D scene. There are several ways to improve performance.
-- [Increasing Rendering Speed](increasing-rendering-speed)
-  - Using WebGL and JavaScript needs to look at speed all the time. Learn ways to increase rendering speed.
-
-### See Also
-
-- [Script Node Authoring Interface](../reference/script-node-authoring-interface)
-- [ECMAScript Object and Function Definitions](../reference/ecmascript-object-and-function-definitions)
-- [Custom Shaders](../custom-shaders)
-
-## There are also Books for Further Reading
-
-[X3D: Extensible 3D Graphics for Web Authors](https://www.amazon.com/gp/product/012088500X?ie=UTF8&tag=x3dext3dgrafo-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=012088500X) by Don Brutzman and Leonard Daly
-
-## Don't Compromise on Development Experience
-
-Use the full power of the modern X3D ecosystem – Titania’s got you covered! Enjoy the intelligent build system, powerful navigation and support for JavaScript, on-the-fly error detection, integrated Route Graph Editor, and X_ITE compatibility.

package/docs/_posts/tutorials/providing-information-about-your-world.md

@@ -1,35 +0,0 @@
----
-title: Providing Information About Your World
-date: 2022-11-28
-nav: tutorials-scripts-and-prototypes
-categories: [Tutorials]
-tags: [Providing, Information, World]
----
-## Motivation
-
-- After you've created a great world, sign it!
-- You can provide a title and a description embedded within the file
-
-## Syntax: WorldInfo
-
-A [WorldInfo](../components/core/worldinfo) node provides title and description information for your world:
-
-- *title* - the name for your world
-- *info* - any additional information
-
-### XML Encoding
-
-```xml
-<WorldInfo
-    title='Our Masterpiece'
-    info='"License GPLv3, https://www.gnu.org/licenses/gpl-3.0.en.html"'/>
-```
-
-### Classic Encoding
-
-```js
-WorldInfo {
-  title "Our Masterpiece"
-  info  [ "License GPLv3, https://www.gnu.org/licenses/gpl-3.0.en.html" ]
-}
-```

package/docs/_posts/tutorials/sensing-the-viewer.md

@@ -1,210 +0,0 @@
----
-title: Sensing the Viewer
-date: 2022-11-28
-nav: tutorials-textures-lights-and-environment
-categories: [Tutorials]
-tags: [Sensing, Viewer]
----
-## Motivation
-
-Sensing the viewer enables you to trigger animations:
-
-- when a region is visible to the viewer
-- when the viewer is within a region
-- when the viewer collides with a shape
-
-The [LOD](../components/navigation/lod) and [Billboard](../components/navigation/billboard) nodes are special-purpose viewer sensors with built-in responses.
-
-## Sensing the viewer
-
-There are three types of viewer sensors:
-
-- A [VisibilitySensor](../components/environmentalsensor/visibilitysensor) node senses if the viewer can see a region
-- A [ProximitySensor](../components/environmentalsensor/proximitysensor) node senses if the viewer is within a region
-- A [Collision](../components/navigation/collision) node senses if the viewer has collided with shapes
-
-## Using visibility and proximity sensors
-
-[VisibilitySensor](../components/environmentalsensor/visibilitysensor) and [ProximitySensor](../components/environmentalsensor/proximitysensor) nodes sense a box-shaped region:
-
-- *center* - region center
-- *size* - region dimensions
-
-Both nodes have similar outputs:
-
-- *enterTime* - sends time on visible or region entry
-- *exitTime* - sends time on not visible or region exit
-- *isActive* - sends true on entry, false on exit
-
-## Syntax: VisibilitySensor
-
-A [VisibilitySensor](../components/environmentalsensor/visibilitysensor) node senses if the viewer sees or stops seeing a region:
-
-- *center* and *size* - the region's location and size
-- *enterTime* and *exitTime* - sends time on entry/exit
-- *isActive* - sends true/false on entry/exit
-
-### XML Encoding
-
-```xml
-<VisibilitySensor DEF='Sensor'
-    center='0.0 0.0 0.0'
-    size='14.0 14.0 14.0'/>
-
-<ROUTE fromNode='Sensor' fromField='enterTime' toNode='Clock' toField='set_startTime'/>
-```
-
-### Classic Encoding
-
-```js
-DEF Sensor VisibilitySensor {
-  center 0.0 0.0 0.0
-  size   14.0 14.0 14.0
-}
-
-ROUTE Sensor.enterTime TO Clock.set_startTime
-```
-
-## Syntax: ProximitySensor
-
-A [ProximitySensor](../components/environmentalsensor/proximitysensor) node senses if the viewer enters or leaves a region:
-
-- *center* and *size* - the region's location and size
-- *enterTime* and *exitTime* - sends time on entry/exit
-- *isActive* - sends true/false on entry/exit
-
-### XML Encoding
-
-```xml
-<ProximitySensor DEF='Sensor'
-    center='0.0 0.0 0.0'
-    size='14.0 14.0 14.0'/>
-
-<ROUTE fromNode='Sensor' fromField='enterTime' toNode='Clock' toField='set_startTime'/>
-```
-
-### Classic Encoding
-
-```js
-DEF Sensor ProximitySensor {
-  center 0.0 0.0 0.0
-  size   14.0 14.0 14.0
-}
-
-ROUTE Sensor.enterTime TO Clock.set_startTime
-```
-
-A [ProximitySensor](../components/environmentalsensor/proximitysensor) node senses the viewer while in a region:
-
-- *position* and *orientation* - sends position and orientation while viewer is in the region
-
-### XML Encoding
-
-```xml
-<ProximitySensor DEF='Sensor' ... />
-
-<ROUTE fromNode='Sensor' fromField='position_changed' toNode='PetRobotFollower' toField='set_translation'/>
-```
-
-### Classic Encoding
-
-```js
-DEF Sensor ProximitySensor { ... }
-
-ROUTE Sensor.position_changed TO PetRobotFollower.set_translation
-```
-
-## Detecting viewer-shape collision
-
-A [Collision](../components/navigation/collision) grouping node senses shapes within the group:
-
-- Detects if the viewer collides with any shape in the group
-- Automatically stops the viewer from going through the shape
-
-Collision occurs when the viewer's avatar gets close to a shape:
-
-- Collision distance is controlled by the avatar size in the [NavigationInfo](../components/navigation/navigationinfo) node
-
-## Creating collision groups
-
-Collision checking is expensive so, check for collision with a proxy shape instead:
-
-- Proxy shapes are typically extremely simplified versions of the actual shapes
-- Proxy shapes are never drawn
-
-A collision group with a proxy shape, but no children, creates an invisible collidable shape:
-
-- Windows and invisible railings
-- Invisible world limits
-
-## Syntax: Collision
-
-A [Collision](../components/navigation/collision) grouping node senses if the viewer collides with group shapes:
-
-- *enabled* - enable/disable sensor
-- *proxy* - simple shape to sense instead of children
-- *children* - children to sense
-- *collideTime* - sends time on collision
-
-### XML Encoding
-
-```xml
-<Collision DEF='Collide'
-    enabled='true'>
-  <Shape containerField='proxy'>
-    <Box ... />
-  </Shape>
-  <!-- children ... -->
-</Collision>
-
-<ROUTE fromNode='Collide' fromField='collideTime' toNode='OuchSound' toField='set_startTime'/>
-```
-
-### Classic Encoding
-
-```js
-DEF Collide Collision {
-  enabled TRUE
-  proxy Shape {
-    geometry Box { ... }
-  }
-  children [ ... ]
-}
-
-ROUTE Collide.collideTime TO OuchSound.set_startTime
-```
-
-## Optimizing collision detection
-
-- Collision is on by default
-  - Turn it off whenever possible!
-- However, once a parent turns off collision, a child can't turn it back on!
-- Collision results from viewer colliding with a shape, but not from a shape colliding with a viewer
-
-## Using multiple sensors
-
-Any number of sensors can sense at the same time:
-
-- You can have multiple visibility, proximity, and collision sensors
-- Sensor areas can overlap
-- If multiple sensors should trigger, they do
-
-## Summary
-
-A [VisibilitySensor](../components/environmentalsensor/visibilitysensor) node checks if a region is visible to the viewer:
-
-- The region is described by a center and a size
-- Time is sent on entry and exit of visibility
-- True/false is sent on entry and exit of visibility
-
-A [ProximitySensor](../components/environmentalsensor/proximitysensor) node checks if the viewer is within a region:
-
-- The region is described by a center and a size
-- Time is sent on viewer entry and exit
-- True/false is sent on viewer entry and exit
-- Position and orientation of the viewer is sent while within the sensed region
-
-A [Collision](../components/navigation/collision) grouping node checks if the viewer has run into a shape:
-
-- The shapes are defined by the group's children or a proxy
-- Collision time is sent on contact