x_ite 8.11.7 → 8.11.8

package/docs/_posts/tutorials/hello-world.md

@@ -1,198 +0,0 @@
----
-title: Hello, World!
-date: 2022-11-28
-nav: tutorials-basic
-categories: [Tutorials]
-tags: [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.
-
-1. X3D is stands for **E**xtensible **T**hree-**D**imensional.
-2. X3D is a text file if when saved as Classic Encoding consists of a set of nodes like (Transform { … }).
-3. All of the nodes start with the node type name like Transform follow by a open curly brace »{«. They end with a close curly brace »}«
-4. The syntax is just like a command to tell X3D browser (like X\_ITE) what should do.
-5. A X3D XML Encoding file must have the extension .x3d or .x3dz. A X3D Classic Encoding file must have .x3dv or .x3dvz as file extension.
-6. X3D file is case sensitive. *Transform, transform* or *tRansForm* are not the same.
-7. X3D file can be edit with any text editor like GEdit or Emacs for Linux or Unix, Notepad++ or Wordpad for Windows, and Coda or Simple Text for Mac.
-
-### Example
-
-<x3d-canvas src="https://create3000.github.io/media/tutorials/hello-world/hello-world.x3d" update="auto">
-  <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)
-
-As first a very easy example, we will create a sphere with a texture and a text below the sphere. Let's start with the sphere:
-
-### 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>
-    <Transform>
-      <Shape>
-        <Sphere/>
-      </Shape>
-    </Transform>
-  </Scene>
-</X3D>
-```
-
-### Classic Encoding
-
-```js
-#X3D V{{ site.x3d_latest_version }} utf8
-
-Transform {
-  children Shape {
-    geometry Sphere { }
-  }
-}
-```
-
-The Sphere has a radius field, which which is by default 1. The units in X3D are measured in Meters. The Sphere here is a node that is assigned to the *geometry* field of the Shape node. The Shape node has a second field *appearance*, which we will use later for texturing. The Shape node is assigned to the *children* field of the Transform node. The Transform node could have as many children as you want, but this is not always desired. The Transform node has special fields *translation*, *rotation* and *scale* for positioning it's children in space.
-
-Now we have a sphere, but we don't see if it is rotating, let's assign a texture:
-
-### 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>
-    <Transform>
-      <Shape>
-        <Appearance>
-          <ImageTexture
-              url='"earth.jpg"'/>
-        </Appearance>
-        <Sphere/>
-      </Shape>
-    </Transform>
-  </Scene>
-</X3D>
-```
-
-### Classic Encoding
-
-```js
-#X3D V{{ site.x3d_latest_version }} utf8
-
-Transform {
-  children Shape {
-    appearance Appearance {
-      texture ImageTexture {
-        url "earth.jpg"
-      }
-    }
-    geometry Sphere { }
-  }
-}
-```
-
-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", "https://example.com/earth.png"'
-```
-
-### Classic Encoding
-
-```js
-url [
-  "earth.png",
-  "https://example.com/earth.png"
-]
-```
-
-If one image from the *url* field is not found or something went wrong the next one is taken.
-
-Now the sphere looks like an earth and you are very curious how the text will be made:
-
-### 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>
-    <Viewpoint
-        description='Home'
-        position='0 -1.01581 6.02612'
-        centerOfRotation='0 -1.01581 0'/>
-    <Transform>
-      <Shape>
-        <Appearance>
-          <ImageTexture
-              url='"earth.jpg"'/>
-        </Appearance>
-        <Sphere/>
-      </Shape>
-    </Transform>
-    <Transform
-        translation='0 -1.5 0'>
-      <Shape>
-        <Appearance>
-          <Material
-              diffuseColor='0 0.5 1'/>
-        </Appearance>
-        <Text
-            string='"Hello", "World!"'>
-          <FontStyle
-              justify='"MIDDLE", "BEGIN"'/>
-        </Text>
-      </Shape>
-    </Transform>
-  </Scene>
-</X3D>
-```
-
-### Classic Encoding
-
-```js
-#X3D V{{ site.x3d_latest_version }} utf8
-
-META "title" "about:hello_world"
-
-Viewpoint {
-  description "Home"
-  position 0 -1.01581 6.02612
-  centerOfRotation 0 -1.01581 0
-}
-
-Transform {
-  children Shape {
-    appearance Appearance {
-      texture ImageTexture {
-        url "earth.jpg"
-      }
-    }
-    geometry Sphere { }
-  }
-}
-
-Transform {
-  translation 0 -1.5 0
-  children Shape {
-    appearance Appearance {
-      material Material {
-        diffuseColor 0 0.5 1
-      }
-    }
-    geometry Text {
-      string [ "Hello", "World!" ]
-      solid FALSE
-      fontStyle FontStyle {
-        justify [ "MIDDLE", "BEGIN" ]
-      }
-    }
-  }
-}
-```
-
-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!".

package/docs/_posts/tutorials/improving-performance.md

@@ -1,229 +0,0 @@
----
-title: Improving Performance
-date: 2022-11-28
-nav: tutorials-optimize-your-scene
-categories: [Tutorials]
-tags: [Improving, Performance]
----
-## Overview
-
-By this time, you may have spend weeks creating complex and interesting X3D scenes. You've refined the models until they're lifelike and perfected their colors and texturing. You've experimented with lighting, and now you're ready to share your creation with the world.
-
-One problem: It takes a long time to download your scene. Another problem: Even on a high-powered computer, navigating through your scene is cumbersome and painful. You move the mouse and it seems to take minutes for the scene to catch up.
-
-This tutorial describes how to optimize your X3D files to decrease download time and increase rendering speed. Once you're familiar with the process, you should incorporate many of these tips in the initial planning and creation of your X3D scenes. If possible, view your world using X\_ITE and see how performance and rendering vary on different platforms. Titania provides tools for implementing some of these optimizations. Others require human inspection and judgment and the creation of additional models for your scene. In all cases, knowledge of these techniques can help you create X3D worlds that are usable and easy to explore as well as visually compelling.
-
-This tutorial is divided into two parts:
-
-- Reducing file size (to speed up transmission time)
-- Increasing rendering speed, with the goal of achieving a minimum frame rate of 25 frames per second, which is the frame rate required to simulate the visual continuity of moving through the real world
-
-## Reducing File Size
-
-The larger the file size, the more time required to transmit it over the World Wide Web. If it takes too long to fetch the data for your scene, many users lose patience and move on to another site. The moral of the story is: Reduce file size when you can. Techniques for making files smaller include the following:
-
-- Cloning objects
-- Using prototypes
-- Using Text nodes
-- Using space-efficient geometry nodes
-- Relying on automatic normals
-- Eliminating white spaces
-- Rounding floating point numbers
-- Compress files
-
-The following sections describe each of these techniques in more detail.
-
-## Use Cloned Objects
-
-If the same object is used more than once in the scene, it's most efficient to give the object a name the first time it's used (with DEF) and then refer to the object by name (with USE) in subsequent uses. For example, if you use a tree more then once you can define them in this manner. The tree if it has a reasonable size can be represented as Inline node. Here is an example of defining a tree and then using that object at another place with a simple translation.
-
-**Example:** Using multiple instances of the same object.
-
-### XML Encoding
-
-```xml
-<Transform DEF='Tree1'>
-  <Inline DEF='Tree'
-      url='"tree.x3d"'/>
-</Transform>
-<Transform DEF='Tree2'
-    translation='10 0 8'>
-  <Inline USE='Tree'/>
-</Transform>
-```
-
-### Classic Encoding
-
-```js
-DEF Tree1 Transform {
-  children DEF Tree Inline {
-    url "tree.x3d"
-  }
-}
-DEF Tree2 Transform {
-  translation 10 0 8
-  children USE Tree
-}
-```
-
-## Use Prototypes
-
-Prototyping objects that are used frequently with a few modifications is another way to reduce file size. As with DEF/USE, the object is defined once, and only the public interface that changes needs to be specified. In addition, because prototypes expose which parts of the scene hierarchy are changeable, the browser is free to optimize the parts that remain the same.
-
-**Example:** Defining a prototype.
-
-### 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'>
-  <head>
-    <meta name='comment' content='World of Titania'/>
-    <meta name='created' content='Fri, 29 Jun 2018 13:24:34 GMT'/>
-    <meta name='creator' content='Holger Seelig'/>
-    <meta name='identifier' content='file:///home/holger/scene.x3dv'/>
-    <meta name='modified' content='Fri, 29 Jun 2018 13:24:34 GMT'/>
-  </head>
-  <Scene>
-    <ProtoDeclare name='BooleanSwitch'>
-      <ProtoInterface>
-        <field accessType='inputOutput' type='SFBool' name='whichChoice'/>
-        <field accessType='initializeOnly' type='SFVec3f' name='bboxSize' value='-1 -1 -1'/>
-        <field accessType='initializeOnly' type='SFVec3f' name='bboxCenter'/>
-        <field accessType='inputOnly' type='MFNode' name='addChildren'/>
-        <field accessType='inputOnly' type='MFNode' name='removeChildren'/>
-        <field accessType='inputOutput' type='MFNode' name='children'/>
-      </ProtoInterface>
-      <ProtoBody>
-        <Switch DEF='Switch'
-            whichChoice='0'>
-          <IS>
-            <connect nodeField='bboxSize' protoField='bboxSize'/>
-            <connect nodeField='bboxCenter' protoField='bboxCenter'/>
-            <connect nodeField='addChildren' protoField='addChildren'/>
-            <connect nodeField='removeChildren' protoField='removeChildren'/>
-            <connect nodeField='children' protoField='children'/>
-          </IS>
-        </Switch>
-        <Script
-            directOutput='true'>
-          <field accessType='inputOutput' type='SFBool' name='whichChoice'/>
-          <field accessType='initializeOnly' type='SFNode' name='group'>
-            <Switch USE='Switch'/>
-          </field>
-          <IS>
-            <connect nodeField='whichChoice' protoField='whichChoice'/>
-          </IS>
-<![CDATA[ecmascript:
-
-function initialize ()
-{
-  set_whichChoice (whichChoice);
-}
-
-function set_whichChoice (value)
-{
-  group .whichChoice = value
-}
-]]>
-        </Script>
-      </ProtoBody>
-    </ProtoDeclare>
-    <TouchSensor DEF='Touch'/>
-    <ProtoInstance name='BooleanSwitch' DEF='Button'>
-      <fieldValue name='children'>
-        <Transform DEF='Normal'>
-          <Shape/>
-        </Transform>
-        <Transform DEF='Highlight'>
-          <Shape/>
-        </Transform>
-      </fieldValue>
-    </ProtoInstance>
-    <ROUTE fromNode='Touch' fromField='isOver' toNode='Button' toField='set_whichChoice'/>
-  </Scene>
-</X3D>
-```
-
-### Classic Encoding
-
-```js
-#X3D V{{ site.x3d_latest_version }} utf8
-
-PROTO BooleanSwitch [
-  inputOutput    SFBool  whichChoice FALSE
-  initializeOnly SFVec3f bboxSize -1 -1 -1
-  initializeOnly SFVec3f bboxCenter 0 0 0
-  inputOnly      MFNode  addChildren
-  inputOnly      MFNode  removeChildren
-  inputOutput    MFNode  children [ ]
-]
-{
-  DEF Switch Switch {
-    whichChoice 0
-    bboxSize IS bboxSize
-    bboxCenter IS bboxCenter
-    addChildren IS addChildren
-    removeChildren IS removeChildren
-    children IS children
-  }
-
-  Script {
-    inputOutput    SFBool whichChoice IS whichChoice
-    initializeOnly SFNode group USE Switch
-
-    url "ecmascript:
-
-function initialize ()
-{
-  set_whichChoice (whichChoice);
-}
-
-function set_whichChoice (value)
-{
-  group .whichChoice = value
-}
-"
-    directOutput TRUE
-  }
-}
-
-DEF Touch TouchSensor { }
-
-DEF Button BooleanSwitch {
-  children [
-    DEF Normal Transform {
-      children Shape {
-        # Attractive shape
-      }
-    }
-    DEF Highlight Transform {
-      children Shape {
-        # Highlighted shape
-      }
-    }
-  ]
-}
-
-ROUTE Touch.isOver TO Button.set_whichChoice
-```
-
-## Use the Text node
-
-Be sure to use the Text node for text. Some translators convert text to polygons, resulting in very large numbers of polygons for a simple string of text. Using the Text node reduces polygon count and allows the browser to optimize for rendering performance, using cached versions of glyphs.
-
-## Use Space-Efficient Geometry Nodes
-
-Nodes such as Box, Cone, Cylinder, Sphere, Extrusion, and ElevationGrid provide a compact way of describing objects with many polygons. Using these nodes saves transmission time. X\_ITE provides optimizations for these shapes.
-
-## Use Automatic Normals
-
-Rely on automatic normal generation when possible instead of supplying your own normals for each shape. Many geometry nodes have a *creaseAngle* field which controls the normal generation.
-
-## Compress Files
-
-Use JPEG or PNG format for textures. GIF is also acceptable in some cases. JPEG is a lossy form of compression (that is, when the file is compressed originally, some of the information is lost), but it can achieve a compression in the range of 100 to one. Utilities for JPEG compression allow you to control the tradeoff between compression and image quality. This form of image compression is generally very effective and results in little noticeable degradation of the image.
-
-Use MPG4 format for movies and animated textures.
-
-Finally, use with GZip compressed formats (.x3dz, .x3dvz) before you publish them. It's faster to uncompress a file that to transmit a large file over the network. All browsers automatically decompress files. Using GZip can result in up to 10 times reduction in file size. When you compress a file with GZip, white spaces are automatically compacted.

package/docs/_posts/tutorials/increasing-rendering-speed.md

@@ -1,115 +0,0 @@
----
-title: Increasing Rendering Speed
-date: 2022-11-28
-nav: tutorials-optimize-your-scene
-categories: [Tutorials]
-tags: [Increasing, Rendering, Speed]
----
-## Overivew
-
-Another major concern for scene authors is to ensure that users can navigate smoothly and continuously through the virtual world, with the scene rendering instantly on the screen as the user moves or the scene is displayed. A minimum frame rate (redraw) of 25 frames per second is required to make the X3D world feel interactive, with visual continuity that simulates animations and moving through the real world.
-
-This tutorial describes many ways to author X3D scenes that render more efficiently. By using Inline, Anchor, LOD nodes, polygon reduction, spatial scene organization, and a variety of other methods, you'll learn how to create scenes that the browsers on many platforms can render efficiently. These are the basic techniques for increasing rendering speed.
-
-- Simplify the scene.
-- Divide the scene into chunks so that the browser can perform optimizations during rendering. Techniques include spatial organization withing the X3D file, creating nested hierarchies of groups, and using Inline and Anchor nodes.
-- Use nodes that facilitate browser optimization, including LOD nodes, performance LOD nodes (without explicit ranges), geometric primitives, and nodes with geometric hints fields.
-- Use scripts effectively.
-
-The following sections describe each of these techniques in more detail. Note that these are general guidelines, not absolute rules, since browsers perform different kinds of optimizations, rendering libraries also have different characteristics.
-
-## Simplify the Scene
-
-As a scene author, you'll often constantly need to monitor the tradeoff between visual complexity and performance. Keep in mind that simplifying the scene results in faster rendering and a better experience for visitors to your world, but consider not to overdo optimizations.
-
-### Reduce Polygon Count
-
-The cold, harsh reality is that you have a limited polygon budget for your scene. Many computers cannot handle scenes with more than 2,000,000 polygons and maintain an acceptable interactive frame rate. To appeal to the widest audience, consider this limitation when designing and planning your X3D scene. Wherever possible, try to create models that are visually appealing yet economical in their use of polygons. Sometimes it's more important to convey the »idea« of the object, and less important to use a visually complex object. For example, chairs come in all styles. Do you need an ornate Windsor chair, or could a more streamlined model suffice? Simplifying models and textures in your scene may result in vast performance improvements. Many modeling software provide tools for reducing polygon count of an object.
-
-### Use Textures Instead of Polygons
-
-Effective use of textures can be a relative inexpensive way to add interest and detail to a scene. An image of a sign, textured onto the front of a building, will probably render much more quickly and with more fidelity than a model of the sign's typography that is constructed with hundreds of flat polygons.
-
-### Use Lights Sparingly
-
-Lights are expensive in terms of performance. On most platforms, an X3D file should contain no more than two or three local lights per shape. Placing a directional light under a Transform node with the *global* field set to FALSE localizes the effect of the light.
-
-### Use Fewer Nodes
-
-Use as few nodes as possible to achieve the desired effect. You can hide nodes that are not visible to the user with the Switch node if they are not needed. For geometry nodes that contain a Color field (such as IndexedFaceSet), for example, you could create one Color node defining all the colors in your standard »palette« and then index into individual nodes to select colors form it. Use the DEF/USE syntax to create multiple instances of the same Color node.
-
-## Divide and Conquer
-
-Dividing a large file into smaller chunks can greatly increase rendering speed, since it allows the browser to perform certain optimizations during rendering. Authoring techniques for dividing a large file into smaller pieces include the following:
-
-- Create nested hierarchy of groups
-- Arranging objects spatially in the X3D file
-- Using Inline Nodes
-- Using StaticGroup Nodes
-- Using Anchor Nodes
-
-### Create a Nested Hierarchy
-
-The first step in structuring an efficient X3D file is to place each object in its own grouping node (usually Group or Transform). You may already have placed each object in its own group, since Titania allows you to create objects individually.
-
-Create hierarchies of objects by nesting groups of objects inside related groups. For example, a large house consist of sides, the staircases, the roof, and so on.
-
-Note that an object can be composed of multiple shapes, and you don't need to put each shape under its own grouping node. Instead, shapes that make up reasonable sized objects should be grouped together under a common grouping node.
-
-**Example:** Creating a hierachy of grouped objects.
-
-### XML Encoding
-
-```xml
-<Group DEF='House'>
-  <Transform DEF='InsideHouse'>
-    <Shape>
-      <!-- ... -->
-      <!-- Inside the house -->
-      <!-- ... -->
-    </Shape>
-  </Transform>
-  <Transform DEF='ExteriorFacade'>
-    <Shape>
-      <!-- ... -->
-      <!-- Exterior facade of the house -->
-      <!-- ... -->
-    </Shape>
-  </Transform>
-</Group>
-```
-
-### Classic Encoding
-
-```js
-DEF House Group {
-  children [
-    DEF InsideHouse Transform {
-      children Shape {
-        ...
-        # Inside the house
-        ...
-      }
-    }
-    DEF ExteriorFacade Transform {
-      children Shape {
-        ...
-        # Exterior facade of the house
-        ...
-      }
-    }
-  ]
-}
-```
-
-### Arrange Objects Spatially
-
-As you collect objects into groups, look in relation to each other. Are things close to each other in the scene. In other words, is the X3D file organized spatially. Buildings on the west side of the city should be grouped together. Objects on each face of an individual building should be together, and objects inside each building should be grouped according to their location. Organizing the X3D file spatially helps the browser move through the scene quickly, drawing only the parts that are visible. This is on of the key behind-the-scenes job performed by browser, which uses a feature built into the Group and Transform node.
-
-### Use StaticGroup Nodes
-
-If you know that the children are guaranteed to not change, send events, receive events or contain any USE references outside the StaticGroup, then the browser can optimize this content for faster rendering and less memory usage. For example, the floor or the mountains in a scene will seldom change and is likely to be subject to place it into a StaticGroup node.
-
-### Turn of Collision Detection
-
-One way to reduce the cost of detecting collisions is to set up collision detection only for those objects that a user is likely to try to navigate through. For instance, if you expect users to be »walking« along a floor, it may be a good idea to put the room's ceiling inside a Collision node with the *collide* field set to FALSE.