Virtual Computer Project  *
Assemblaggio PC  **

Delivering Content in a VRML World

NIR-IT'99 : "Internet: IL media del 2000"
Milano, 29-30-31 Marzo 1999

 
Carlo Zinzani
carlo@marcat.com
Paolo Caracciolo
paolo@tn.village.it

VRML Dreamers members
http://www.lucia.it/vrml
Abstract

The main aim of this project is to deliver information within a Virtual Reality Modeling Language environment system. The content of Virtual Computer project is: Showing and teaching how to build a computer to an end user.

 

Introduction

The subject we are dealing with could be very complicated. It covers a wide range of levels of complexity. It is possible to single out several levels of approach. 
-One could be a Macro level of information, which regards the external cable connection.
-Another one is represented by a Medium level of information, which concerns the connection of the inside components.
-Another one could be a Micro level of information, which has to do with the internal cable and screw setting.

At present the project covers the Medium level of information. Here the competence to convey to the user are provided by assembling the internal components of the computer.

General Overview

Symbolic codes

"Virtual" is a highly used word today, in particular when it refers to the so-called neo-technologic representations. However, since the earliest symbolic activities, the human being has always made virtual constructs, starting from the use of indicative signs, oral, writen, iconic representation, etc.. In some (more simple) ways, this evolution could be seen also in the baby communication evolution. One of the first baby steps in language acquisition is the symbolic code of the indicative signs (pointing toward an object), then he learns a more complex symbolic code (using different channels), oral language, and then, growing, he learns to use another symbolic code, writing, as well the use of images. In this developing process we acquire more and different competence in communicating using different channels and different tools.
Human communication has always changed towards more complex models. And also the tools affect our way to communicate.
The neo-technologies are organizing the use of signs in a new symbolic code, that better suits their own possibility, with which they can communicate. Therefore a new language system is required, we have to be aware of that. This new language system, is the language of Virtual Reality. 

 

indicative signs = gestual sign
they are organized in gestual language 

speaking = verbal sign
they are organized in verbal language

writing = 2D visual sign
they are organized in written language

images = visual-pictorial sign
they are organized in pictorial language

sounds = auditory signal
they are organized in audible, musical language

VR = tactile visual auditory signal
they are organized in Virtual Reality language


Assuming that Virtual Reality is a kind of Reality, we can say, that also the languages organized by them are quite similar between them selves.
Language structure

A language is a system that uses some physical signals (a gesture, a sound..) to express meaning. Its main use is to communicate.
Hjelmslev in "The Basic Structure of Language" singles out five fundamental distinctive marks, present in the structure of languages. 
Two of these fundamental distinctive marks are always present in the basic structure of any language, and according to the Hjelmslevian terminology, they are called: The Plans of Language, plan of Expression and plan of Content; and The Axes, axis of Process and axis of System.


Plans:
denotation
    E
--(R)--
    C
Denotation is the relation (R) between the plan of expression and the plan of content.
E = phonetic signifier /tree/,  C = item signified "arbor"

Axes:

|
|
|  / the   carpenter   made   a    door /
| --------------------------------------->(process)
" the    carpenter   made   a   door "
|
(system)

/ signs /
" acoustic images "

 
 
Communicate and Learning: The VR way

Studies of modern cognitive psychology tell us that the human cognitive apparatus does not work only in one way, but it can work in two different ways. 
One is recognized from our cultural tradition as symbolic-reconstructive knowledge. This is the one you get from reading a book. The information must be decoded from abstract arbitrary symbols; and the referent, object of knowledge, must be mentally recognized/identified. This process does not imply only the reading, but also thought, reason, etc...
The other way in which the cognition works is as motive-perception: for instance, learning from a skill, as learning how  to cycle. You know the object because you perceive it. It is the feedback of the object, once perceived, that makes up knowledge, this, being which is automatically co-related to the action that it has created (generative action).
We learn to communicate and we grasp the meaning of what we learn about the world in these two different methods. 
The first method operates when, for example, we read a description (it could also be a manual user).
The second one, is operating when looking and interacting with the real world, we are learning because we are dynamically testing our sensorial ability over objects.
The new technologies, giving us the tools to set up new symbolic codes able to clone reality, so are able to move the communication from the symbolic-reconstructive method to the motive - perceptive method.
In a Virtual Reality environment you are called to reach information and communicate with all your body, you are no longer watching the screen, you are inside the screen, and there you can touch the representation (3d) with all the sensors of your body.
 
 

From Reality to Virtuality

What we mean to do with the Virtual Computer project, is to analyze the real experience of assembling a Personal Computer, as it happens in real life, then to translate this with the instruments of Virtual Reality. Here we are required to use the appropriate linguistic system for the VR. Otherwise we will be speaking in a language, without using a pertinent linguistic system experiencing a loss of information.
Basically we are doing a translation from one linguistic system to another (reality - virtuality), trying to keep up the information richness.
When speaking about the language of reality and the language of virtuality, we are always in the same perceptive method of "motive-perception".
We could say that, despite being general, all languages have some common characteristics. On this we can base the translation.
The same thing could be done in a different way. It's possible, for example, to take the information on how to assemble a Personal Computer from a user manual. In that case, the translation required would be from English linguistic writing system, to the virtual reality (representation) linguistic system. But in this case we are passing from the symbolic-representative perceptive method to the perceptive method of the motive-perceptive/on.
(I would like to warn you that following the discussion, you will find some examples where we are using the English linguistic system as the source for translation, that is due to il's simplicity).
We are going to move a packet (cluster) of data (information) from the layer of reality to the layer of virtuality.
We could say that on one side there is a Reality, which is the practical operation of making something (for example: assembling a PC); and on the other side there is a Virtuality, that is the 3D environment we created.
In the Reality of assembling a PC there are several elements: PC components; Tools; And a human operator, who has technical competence.
In Virtuality we are going to use VRML shapes (3D objects) to create the components interface interaction as tools and advanced VRML with Javascript, which brings about technical competence. See table below.

REALITY
Components Tools Human "technician" operator
technical competence
VIRTUALITY
Geometry Interface interaction Animations
time / data ~ memo
VRML objects Sensors + Routing Advanced VRML and JavaScript
Virtual Reality Modeling Language +
Power of VRML

VRML seems to be the only reliable way to build a low cost VR environment.
It also seems the most powerful in terms of interactivity as well as immersivity provided.
The most important thing in the VRML is that, it allows you to speak in Virtual Reality language.
With the VRML it's possible to cover the fundamental distinctive marks of a language system.
N.B. Do not misunderstand the meaning of the word "language" and "modeling language". The first, widely treated here, refers to a linguistic system exploited by human beings to communicate; the second refers to computing programming language. To make this point more clear we should introduce the notion of meta-language, It would be very tricky to do it now.

 

VRML:
- Virtual Reality
- Interactive
- Immersive
- WWW
- Language system
Communication Theory

 

It is now time to deal with the Communication issue. Our intention in the end is to communicate as we are interested in providing information. Furthermore, languages are used to communicate.
Communication Studies tell us that a piece of information is a linguistic act. Here (V. C. Project), we have plenty of linguistic acts, the only difference is that, in this new media communication, we are using (we can use) interactive animations of a 3D Virtual Object to represent the language, instead of language of real life, or 2d graphical signs (for example, the English language writing system in this text, or in an Instruction Manual).
information >> linguistic act >> linguistic signs
deepen..
Every linguistic act is nothing but a Linguistic Sign, just like a word (like "roses" for example). It is the result of the reciprocal interaction (relation) between the layer of Expression and the layer of Contents.
Sign   =
Expression 
acoustic/graphic 
VRML
-------------------
Building PC
-------------- =
------------------ =
Content
mental concept(s)
In terms of speech, "roses" is the sound that we perceive when listening to the word /roses/. (In writing, the Expression of /roses/ is the graphical shape of the alphabetical sequence /R/ /O/ /S/ /E/ /S/, so writing this text we express "roses").
The Content of roses is the mental concept that you reach in the manifestation of it.
Of Course every language system is made of a wide range of signs and a different relation (arrangement) of this can generate a different meaning for the same word.
So our roses are full of passion if they are "red roses" or are a good situation if they are a "bed of roses".

In the same way within a Virtual Reality environment system (or more generically a visual language), we can use a proper sign and give different meanings to it, this is done by using other elements of the related language system.

Let us now go back to the Virtual Computer Project.

 

Applying the theory to our project

The main information in the Virtual Computer Project is: showing how to build a computer. And our first step of course is the segmentation of the message in many events.

See communication diagram below:

Emitter ------> Message ------> Receiver{

ev 1. emitter ------> message 1 ------> receiver

ev 2. emitter ------> message 2 -------> receiver

ev n.n. emitter ------> message n.n. -------> receiver }

Event 1  =  Fix the Motherboard to the mbrd holder and put it in the Case-frame.
Event 2  = Fix the CPU in the proper slot of the motherboard.
Event 2  = Fix the Graphic Card in the proper slot.
Event 4  =  Fix the Audio Card in the PCI slot.
Event 5  =  Fix the Modem Card in the PCI slot.
Event 6  =  Fix the CD-ROM drive in the Case-frame.

Message  =  Showing and teaching how to build a computer.

Plans of the VR (vrml) language
plan of the VRML Expression
______________________

plan of the VRML Content

 

As in every language here we have a plan of the Expression and a related plan of the Content.
Computer =
Real life of building a computer
______________________________     =

Mental concepts 
(representations)
(global knowledge of the pc building process)

Virtual Computer Project    =
Our VRML (interactive virtual) environment

---------------------------------------------------
Mental concepts 
(representations)
(global knowledge of the pc building process)

It is evident from the above table that translation is more visible in the plan of expression.  Real life >> VRML environment. 
Axes of the VR (vrml) Language
axis of the VRML process
axis of the VRML system
|   ev1
|           ev2
|                    ev n.n.
| ------------------------->(process)

|
(system)
The VRML environment in Virtual Computer results from the union of the objects System Personal Computer, plus the Process of building them as a PC.
System PC: Personal Computer as a System of Objects

By analyzing our object Personal Computer   we can visualize two groups of elements: a COMPUTER CASE and EXTERNAL DEVICES. 
The Computer Case is a box and all the components are held inside. To describe these we used geometrical definitions and material descriptions.
  It is the most important  piece so we are only going to work on it at the moment.

External Devices are all the other separated pieces, Monitor, Keyboard, Mouse.
They are usually purchased as ready-to-use products.

 

A) COMPUTER CASE
1) Chassie
2) Main Electronic Circuit
3) Micro Processors
4) Cards pci, agp..
5) Drives
6) Glue objects
B) EXTERNAL DEVICES
1) Monitor
2) Keyboard
3) Mouse
Computer Case

Inside of those global classes there are other subclasses that we can identify as hardware components.
As we can see, the CASE is the most important, and the one that a wide range of people are interested in.

So next we are going to describe all the sub-objects of the CASE and at the end we'll show how to install all the components which the case holds inside. We cannot treat this last here because it is not a matter of the system PC.

 

1) CHASSIE
a) Bonnet
b) Frame + Power S.
c) Motherbrd Holder
2) ELEC. CIRCUIT
a) Motherboard
3) MICRO PROC.
a) CPU
b) RAM 
4) CARDS
a) Graphic
b) Audio
c) Modem
5) DRIVES
a) Hard Disk
b) Floppy Disk
c) CD drive
6) GLUE OBJECTS
a) Screws
b) Supports
c) Power Sup. Cables
d) IDE Cables
The system PC resembles a set of information presented as a state of being (we'll see about this matter in the next chapter), it describes a still object. In this case it is like Technical data, that describes the shape of the object, its dimension, colours, etc... 

 

Technical data (as instructions)

1) Show me the Motherboard, give me info about slots, plugs, technical features.
2) Show me the CPU, give me info about it.
3) Show me the Graphic Card, give me info about it.
4) Show me the Audio Card
5) Show me the Modem Card
6) Show me the CD-ROM
7) Show me the Monitor

 

Process of building a PC: Personal Computer in its building process

The building process is a linear sequence of various operations (set of instructions), mainly describing a state of doing. So, to describe these we used a set of animations, sensors, scripts, timers, and data.

 

Operations - Instructions

Building operations

1) Fix the Motherboard to the mbrd holder and put it in the Case-frame.
2) Fix the CPU in the proper slot of the motherboard.
3) Fix the Graphic Card in the proper slot.
4) Fix the Audio Card in the PCI slot.
5) Fix the Modem Card in the PCI slot.
6) Fix the CD-ROM drive in the Case-frame.

The process could be represented in a Tower of Hanoi problem, of course we are look at it using a problem-reducion approach; see figure below.

hanoi_1.jpg (58773 bytes)
 
 

Building process problem will be solved as here.
hanoi_2.jpg (115229 bytes)

Process and System

Now we are going to make a distribution of all the components analysed in the PC System, considering the role played by them in the Building Process. Obviously, as a process, we can represent it as a horizontal line oriented toward the right (indicating the time-flow). The system will be represented by a vertical line.

In order to see the PC System and the Process of building the PC in a single shot, we drew the table shown below.


|
|
|  / fix  the  motherboard  ... /
| --------------------------------------->(process)
¦ fix   the  motherboard  ... ¦
|
(system)
/ signs - objects /
¦ acoustic images -  semantic - sememe -  ¦
CASE{
Bonnet . . . . Screws
Frame + Power Sup. . . . . .
. . . . Hard drive Screws + Cables
Floppy drive Screws + Cables
CD drive Screws + Cables
Motherboard holder . . . . Screws
. motherboard CPU . . Screws + Cables
RAM .
. . . Graphic card . Screws
Audio card Screws + Cables
Modem card Screws
Chassie Main electronic circuit Micro Processors Cards pci agp.. drives glue objects
}
Process: Fix Main electronic circuit in the Chassie; Fix the Micro processors in the Main electr. circuit; Fix the Cards in the Main electr. circuit; Fix the drives in the Chassie.

System: Bonnet; Frame+Power Supply; Motherboard holder; Motherboard; Cpu; Ram; Graphic card; Audio card; Modem card; Hard drive; Floppy drive; CD-ROM drive.


 
 

 
 
Semionarrative analysis

Every instruction of the building process is a narrative event. The whole series of the narrative events make up the story.

A narrative event is manifested by language signs expressing enunciations. An enunciate could be: an enunciate of state, or an enunciate of "doer". State is related to the being of a thing. Doer or doing is related to the action of doing something. The doing, usually causes a change in the related state of being.

In the most common instruction manuals the narrative events are generated by writing-textual communication (through the English language, for example). Words are the sub-unit of the textual communication. 

Words
---------------->
Textual communication
word --> be
nouns, adjectives, etc..
Sentences
word --> doing
verbs + active actions descriptions, syntax
. . .
.
. . .
3d environ. --> doing
object x + TimeSensor+PositionIinterpolatior etc..
VRML environment
3d environ. --> be
shape, geometry, material, color, etc..
3D Representation
---------------->
Tridimensional communication
We can do the same with a VRML environment, where the 3D representation is the sub-unit of the "tridimensional communication".
"be" is referring to an enunciate of permanence.
"doing" is refering to an enunciate of change.
Be
In a VRML environment a state of being is described by nodes elected to the physical description:

Shape, 
Material, 
descriptors Nodes

Doing
In a VRML environment "doing" is described by nodes elected to the introduction of changes:

TimeSensor,
TouchSensor,
modal Nodes

The Narrative Program

On a semiotic perspective we can look at the main information to deliver as a Narrative Program (something similar, but in a communication perspective, to what we did in the "Applying the theory to our project - Comm Theory" chapter).
A Narrative Program is performed every time a "doing" changes the state of being. For instance, from single components to a computer.

Information  message 1 (ev.1) message 2 (ev.2) message n.n. (ev.nn)
Narrative Program N.P. 1 N.P. 2 N.P. n.n.
N.P. from a language system to another

The above-explained structure of languages must be respected in translating a meaning from a language system (system of signs) to another.

 

The English Language
An example from the English language system:

sentence: 

John   loves  Mary
N.B. Mary loves John is a completely different expression.
E
/ John / / loves / / Mary / 
C
" john " " loves " " mary "

This table shows us how to share out the sentence in the Axes of the Process and the System, and in the Plans of the Expression and the Content.
The VRML Language
Let's try to give a translation of this English language sentence to a VRML (3D) language system. 

manifestation:

VRML environment
E
# Box # # Cylinder + Sph. + Pos.Interpolator + TimeSensor + X # # Sphere #
C
" john " " love " " mary "

Also in this table, the vrml manifestation is described as shared out in the Axes and Plans, however in this case, of the VRML language system.  Of course, on these examples the wide range of opportunity offered by the VR are not exploited, we have translated from a textual source, not from a reality.

At first look it seems something is missing, but trying to dig behind the Expression of the Content " love" you will notice that, the word love in the English language system is different from the two others in the sentence. Love is a verb, it implies an activity, a doing something. 
In the VRML language system, love is Expressed with geometrical physical descriptions (being) on behalf of Cylinder and Sphere nodes, plus an action performance of doing something expressed on behalf of PositionInterpolator and TimeSensor nodes to animate the action.

Tests

A check test could be useful to better explain the characteristics of the language system. I will make a change at the level of the axis of the system, substituting the Expression / love / with the Expression / hate /. The axis of the process will be unchanged.

test 1.1
 

test 1

 

We have two different versions of the test; n. 1.1 the content of the expression is not really / hate / as it is in the n. 1, it is more non-love or something like love expressed with a sarcastic intonation, anyway different.
Here another check test, but this time the exchange will affect only the axis of the process and I will leave the axis of the system unchanged.
test 2
What has happened? A simple syntagmatic and a / or a paradimatic change has affected the whole meaning of the representation.

VRML environment

---------- 

|
|
|  / John loves Mary /
| -------------------------->(process)
" John loves Mary "
|
(system)

test 1 and 1.1

---------- 

|
|
|  / John hates Mary /
| -------------------------->(process)
" John hates Mary "
|
(system)

test 2

---------- 

|
|
|  / Mary loves John /
| -------------------------->(process)
" Mary loves John "
|
(system)
Narrative program (only for deepen)
NP basic :
[ S1 do
S2 be<>O1 ]
NPuse 1
S S<>O2
NPuse 2
S S<>O3
O1=descriptive
O2=modal
O3=modal

Subject of doing S1 has to become rich of the competence of the Subject of state S2. To do that, he has to perform two programs of use (NPuse1, NPuse2) to gain the competence to shift (do) the action, turning himself into a realized S of doing and being actor of the performance.
To turn the question in a more simple matter, we can assuming that the Box-John has to gain a spatial position to be close to the Sphere-Mary, and also to gain the action related to Shape-Flower to express his feeling.

Other translation
All we did in translating some information from an English language system to a VRML language system could also be done with other languages systems.
Here, the image below is an example of how information could be translated in an iconic representation. The blue and red arrows are describing the changes, the action -"doing". The geometrical shapes, colors and the text are describing the state of being of the referred objects.
Scene n.1
scene1.jpg (32006 bytes)
VRML Translation (3D translation)

 

For every set of instructions in the building phases, we have a related VRML code to describe the operation.

 

instruction X (building operation)
--------------------------------------------------------
vrml animation + vrml sensor + vrml script
We simply turn the set of instructions into another symbolic code which is the 3D representation created with the VRML.
The optimal circumstance should be translate directly from the real experience. 
VRML Features as linguistic system

We can classify* the VRML's nodes in relation to their use in the signification activity, at list in tree groups.

descriptors Nodes
of a state of being
modals Nodes
of doing
supporting Nodes
aesthetics
actions
help
Appearance 
Background
Billboard 
Box 
Color 
Cone 
Coordinate 
Cylinder 
DirectionalLight 
ElevationGrid 
Extrusion 
Fog
FontStyle 
ImageTexture 
IndexedFaceSet 
IndexedLineSet 
LOD 
Material
Normal 
PixelTexture
PointLight 
Shape 
Sphere 
SpotLight
Text 
TextureCoordinate 
TextureTransform 
Anchor 
Collision 
ColorInterpolator 
CoordinateInterpolator
CylinderSensor 
NormalInterpolator 
OrientationInterpolator
PlaneSensor 
PositionInterpolator 
ProximitySensor
ScalarInterpolator 
Script 
SphereSensor 
Switch 
TouchSensor 
TimeSensor
VisibilitySensor 
AudioClip 
Group 
Inline 
MovieTexture 
NavigationInfo 
PointSet 
Sound 
Transform 
Viewpoint 
WorldInfo
*N.B. This is a temporary classification.It may change.
Our Case

To create an interactive animation using VRML we need just few things. The object to be animated (Shape node), a TimeSensor to make change the values of the motion, Interpolator nodes (Position, Orientation, Color, etc)   to give the coordinates of the motion path.

As we would like to give the user a set of buttons to command the operations of the building process, we are required some object "buttons" (Shape nodes), a TimeSensor to control the activity of the buttons, a TouchSensor to trigger the actions, and to coordinate all the events and create some signal to drive the user, we need a Script.

With few VRML nodes we have setted up a 3D Virtual Environment. What is left? Just do it in the respect of the grammar of the VR language.


 
 
Building Instruction Translation
number) = descriptive of a state of being
letter ) = descriptive of a state of doing
Instruction
(Building operations)

1) Fix the Motherboard to the mbrd holder and put it in the Case-frame.

VRML environment
 

1) button MB , MB and Holder MB, button CPU.
A) TouchSensor MB >>
                Script MB>>
                                         TimeSensor>>
                                                       ColorInt. 
                                         TimeSensor>>
                                                       ColorInt.
                                     TimerSensor>>
                                                  PositionInter.
                                                  OrientationInt.
                                                 for mb.
                                                  PositionInter.
                                                  OrientationInt.
                                                  for holder.
                         Script cpu
 

example code:

DEF BUTTONMB Transform {
                              children [

DEF ButtonScriptMB Script {
                                          eventIn SFBool isActive
                                          eventIn SFBool isOver
                                          eventIn SFFloat fractionChanged
                                          eventIn SFTime instTocc
                                          eventOut SFBool disablePulsSelf
                                          eventOut SFBool enablePulsNext
                                          eventOut SFTime startTimeAnim
                                          eventOut SFBool enableTMSAnim
                                          eventOut SFColor colorePulsInattivo
                                          field SFBool statotPulsSelf TRUE
                                          field SFBool pointerOver FALSE
                                          field SFBool statoAnim FALSE
                                          field SFBool toccato FALSE
                                          url "vrmlscript:
                                          // Handler for event isActive of type SFBool.
                                                     function isActive (value, time)
                                                     { 
                                                          if (value == true && pointerOver == true)
                                                                      { startTimeAnim = time; 
                                                                        enableTMSAnim = true; 
                                                                        enablePulsNext = true; } 
                                                       }
                                          // Handler for event isOver of type SFBool.
                                                      function isOver (value, timestamp)
                                                       { if (value == true) { pointerOver = true; }}
                                          // Handler for event fractionChanged of type SFFloat.
                                                      function fractionChanged (value, timestamp)
                                                { if (value >= 0.0 && value <= 1.0) { r = 0.0;g = 0.9;b = 0.8;} }
                                          // Handler for event instTocc of type SFTime.
                                                      function instTocc (valToc, timestamp)
                                                      { 
                                                                         toccato = true;
                                                                         colorePulsInattivo = new SFColor(r,g,b);
                                                                         disablePulsSelf = false;
                                                      }
                                                   "
                                                }

DEF MB-TXT Transform {...cut...}

DEF TS-MB-Trig TouchSensor {    enabled TRUE     }

DEF ClockBlink_67 TimeSensor {
                                          enabled TRUE
                                          stopTime -1
                                          cycleInterval 2
                                          loop TRUE
                                          }

DEF BlinkInterp_68 ColorInterpolator {
                                          key [ 0, 0.5, 0.51, 1 ]
                                          keyValue [ 0 0.5 0.4, 0 0.5 0.4, 0 0.9 0.8, 0 0.9 0.8 ]
                                          }

DEF MB-Button Transform {
                         children Shape {
                                       appearance Appearance {
                                         material DEF _69 Material {
                                                                     ambientIntensity 0.2
                                                                     diffuseColor 0.8 0.8 0
                                                                         }
                                                                  }
                                          geometry DEF BUTTN Sphere {  radius 0.015  }
                                          }
                                        }
                                     ]
                                  }
...cut...

example world
In VRML terms E/C
A)Espression level Shape {Mbrd holder}
Shape {Mbrd}
Shape {button 1}
TimeSensor
TouchSensor
TimeSensor
Script
PositionInterpolator
OrientationInterpolator
PositionInterpolator
OrientationInterpolator
 
1)Content level Fix the Motherboard to the mbrd holder and put it in the Case-frame.
Instruction
2) Fix the CPU on the proper slot in the motherboard. 2)button CPU, CPU, button G200(graphic card).
B) Script >> 
        TouchSensor >>
                                        TimeSensor>>
                                                       ColorInt. 
                                         TimeSensor>>
                                                       ColorInt.
                                     TimerSensor>>
                                                  PositionInter.
                                                  OrientationInt.
                                                 for cpu.
                           Script agp
example code:

DEF PULSCPU Transform {
                          children     [
                             DEF PulsanteScriptCPU Script {
                             eventIn SFBool    isActive
                             eventIn SFBool    isOver
                             eventIn SFFloat    fractionChanged
                             eventIn SFTime    instTocc
                             eventOut SFBool    disablePulsSelf
                             eventOut SFBool    enablePulsNext
                             eventOut SFTime    startTimeAnim
                             eventOut SFBool    enableTMSAnim
                             eventOut SFColor    colorePulsInattivo
                             field SFBool    statotPulsSelf    TRUE
                             field SFBool    pointerOver    FALSE
                             field SFBool    statoAnim    FALSE
                             field SFBool    toccato    FALSE
                                url     "vrmlscript:
// Handler for event isActive of type SFBool.
                                          function isActive (value, time) {
                                              if (value == true && pointerOver == true)
                                                  { startTimeAnim = time;
                                                    enableTMSAnim = true;
                                                    enablePulsNext = true; }
                                                  }
// Handler for event isOver of type SFBool.
                                           function isOver (value, timestamp) {
                                               if (value == true) { pointerOver = true; }
                                                  }

// Handler for event fractionChanged of type SFFloat.
                                           function fractionChanged (value, timestamp) {
                                               if (value >= 0.0 && value <= 1.0) {r = 0.0;g = 0.9;b = 0.8;}
                                                  }
// Handler for event instTocc of type SFTime.
                                           function instTocc (valToc, timestamp) {
                                                      toccato = true;
                                                      colorePulsInattivo = new SFColor(r,g,b);
                                                      disablePulsSelf = false;
                                                  }
                                                "
                                             }

    DEF CPU-TXT Transform{......}

    DEF TS-CPU-Trig TouchSensor {    enabled    FALSE    }
    DEF OrologioBlink_12 TimeSensor {
                                        enabled     FALSE
                                        stopTime     -1
                                        cycleInterval     2
                                        loop     TRUE
                                       }
    DEF BlinkInterp_13 ColorInterpolator {
                                   key     [ 0, 0.5, 0.51, 1 ]
                                   keyValue     [ 0 0.5 0.4,  0 0.5 0.4, 0 0.9 0.8, 0 0.9 0.8 ]
                                  }
    DEF CPU-Button Transform {
                                children Shape {
                                               appearance   Appearance {
                                                                    material     DEF _14 Material {
                                                                                                  ambientIntensity   0.2
                                                                                                  diffuseColor   0.8 0.8 0
                                                                                                     }
                                                                                           }
                                                                                              geometry     USE BUTTN
                                                                                              }
                                                                                            }
                                                                                          ]
                                                   }

example world
3) Fix the Graphic Card on the proper slot. 3) button G200, G200, button AWE(audio card).
C) Script>>
       TouchSensor >>
                                        TimeSensor>>
                                                       ColorInt. 
                                         TimeSensor>>
                                                       ColorInt.
                                     TimerSensor>>
                                                  PositionInter.
                                                  OrientationInt.
                                                 for mb.
                                                  PositionInter.
                                                  OrientationInt.
                                                  for holder.
                         Script cpu
example code:

DEF PULSG2 Transform {
children    [
    DEF PulsanteScriptG200 Script {
    eventIn SFBool    isActive
    eventIn SFBool    isOver
    eventIn SFFloat    fractionChanged
    eventIn SFTime    instTocc
    eventOut SFBool    disablePulsSelf
    eventOut SFBool    enablePulsNext
    eventOut SFTime    startTimeAnim
    eventOut SFBool    enableTMSAnim
    eventOut SFColor    colorePulsInattivo
    field SFBool    statotPulsSelf    TRUE
    field SFBool    pointerOver    FALSE
    field SFBool    statoAnim    FALSE
    field SFBool    toccato    FALSE
    url    "vrmlscript:
// Handler for event isActive of type SFBool.
function isActive (value, time)
{
    if (value == true && pointerOver == true)
{ startTimeAnim = time;
enableTMSAnim = true;
enablePulsNext = true;}
}
// Handler for event isOver of type SFBool.
function isOver (value, timestamp) {
    if (value == true) { pointerOver = true; }
}

// Handler for event fractionChanged of type SFFloat.
function fractionChanged (value, timestamp) {
    if (value >= 0.0 && value <= 1.0) {r = 0.0;g = 0.9;b = 0.8;}
}

// Handler for event instTocc of type SFTime.
function instTocc (valToc, timestamp) {
    toccato = true;
    colorePulsInattivo = new SFColor(r,g,b);
    disablePulsSelf = false;
}
"
    }
    DEF G200-TXT Transform {.......}
    DEF TS-G200-Trig TouchSensor {    enabled     FALSE    }
    DEF OrologioBlink_30 TimeSensor {
    enabled    FALSE
    stopTime    -1
    cycleInterval    2
    loop    TRUE
    }
    DEF BlinkInterp_31 ColorInterpolator {
                                    key     [ 0, 0.5, 0.51, 1 ]
                                    keyValue     [ 0 0.5 0.4, 0 0.5 0.4, 0 0.9 0.8, 0 0.9 0.8 ]
                                  }
    DEF G200-Button Transform {
    children    Shape {
    appearance    Appearance {
    material    DEF _32 Material {
        ambientIntensity    0.2
        diffuseColor    0.8 0.8 0
     }
    }
    geometry    USE BUTTN
    }
    }
]
}

example world
4) Fix the Audio Card on the PCI slot. 4)button AWE, AWE, button USR(modem card).
D) Script>>
        TouchSensor>>
                                        TimeSensor>>
                                                       ColorInt. 
                                         TimeSensor>>
                                                       ColorInt.
                                     TimerSensor>>
                                                  PositionInter.
                                                  OrientationInt.
                                                 for mb.
                            Script modem
example code:

DEF PULSAWE Transform {
                           children     [
                              DEF PulsanteScriptAWE Script {
                                                        eventIn SFBool    isActive
                                                        eventIn SFBool    isOver
                                                        eventIn SFFloat    fractionChanged
                                                        eventIn SFTime    instTocc
                                                        eventOut SFBool    disablePulsSelf
                                                        eventOut SFBool    enablePulsNext
                                                        eventOut SFTime    startTimeAnim
                                                        eventOut SFBool    enableTMSAnim
                                                       eventOut SFColor    colorePulsInattivo
                                                        field SFBool    statotPulsSelf    TRUE
                                                        field SFBool    pointerOver    FALSE
                                                        field SFBool    statoAnim    FALSE
                                                        field SFBool    toccato    FALSE
                                            url     "vrmlscript:
// Handler for event isActive of type SFBool.
                                                            function isActive (value, time) {
                                                        if (value == true && pointerOver == true)
                                                            { startTimeAnim = time;
                                                              enableTMSAnim = true;
                                                              enablePulsNext = true;}
                                                            }
// Handler for event isOver of type SFBool.
                                                            function isOver (value, timestamp) {
                                                        if (value == true) { pointerOver = true; }
                                                             }
// Handler for event fractionChanged of type SFFloat.
                                                            function fractionChanged (value, timestamp) {
                                                        if (value >= 0.0 && value <= 1.0) {r = 0.0;g = 0.9;b = 0.8;}
                                                             }

// Handler for event instTocc of type SFTime.
                                                            function instTocc (valToc, timestamp) {
                                                               toccato = true;
                                                               colorePulsInattivo = new SFColor(r,g,b);
                                                               disablePulsSelf = false;
                                                             }
                                                        "
                                                     }
    DEF AWE-TXT Transform {........}
    DEF TS-AWE-Trig TouchSensor {
                                 enabled     FALSE
                                                        }
    DEF OrologioBlink_18 TimeSensor {
                              enabled     FALSE
                              stopTime     -1
                              cycleInterval     2
                              loop     TRUE
                              }
    DEF BlinkInterp_19 ColorInterpolator {
                              key     [ 0, 0.5, 0.51, 1 ]
                              keyValue     [ 0 0.5 0.4, 0 0.5 0.4, 0 0.9 0.8, 0 0.9 0.8 ]
                               }
    DEF AWE-Button Transform {
                                children Shape {
                                              appearance Appearance {
                                                                  material     DEF _20 Material {
                                                                  ambientIntensity     0.2
                                                                  diffuseColor     0.8 0.8 0
                                                               }
                                                        }
                                                        geometry     USE BUTTN
                                                      }
                                                   }
                                                ]
                                 }

example world
5) Fix the Modem Card on the PCI slot. 5)button USR, USR, button CD-ROM.
E) Script>>
       TouchSensor>>
                                        TimeSensor>>
                                                       ColorInt. 
                                         TimeSensor>>
                                                       ColorInt.
                                     TimerSensor>>
                                                  PositionInter.
                                                  OrientationInt.
                                                 for modem.
                           Script cdrom
example code:

DEF PULSUSR Transform {
                         children     [
                          DEF PulsanteScriptUSR Script {
                                               eventIn SFBool    isActive
                                               eventIn SFBool    isOver
                                               eventIn SFFloat    fractionChanged
                                               eventIn SFTime    instTocc
                                               eventOut SFBool    disablePulsSelf
                                               eventOut SFBool    enablePulsNext
                                               eventOut SFTime    startTimeAnim
                                               eventOut SFBool    enableTMSAnim
                                               eventOut SFColor    colorePulsInattivo
                                               field SFBool    statotPulsSelf    TRUE
                                               field SFBool    pointerOver    FALSE
                                               field SFBool    statoAnim    FALSE
                                               field SFBool    toccato    FALSE
                                         url     "vrmlscript:
// Handler for event isActive of type SFBool.
                                           function isActive (value, time) {
                                               if (value == true && pointerOver == true)
                                           { startTimeAnim = time;
                                           enableTMSAnim = true;
                                           enablePulsNext = true;}
                                           }
// Handler for event isOver of type SFBool.
                                           function isOver (value, timestamp) {
                                               if (value == true) { pointerOver = true; }
                                           }
// Handler for event fractionChanged of type SFFloat.
                                           function fractionChanged (value, timestamp) {
                                               if (value >= 0.0 && value <= 1.0) {r = 0.0;g = 0.9;b = 0.8;}
                                           }
// Handler for event instTocc of type SFTime.
                                           function instTocc (valToc, timestamp) {
                                               toccato = true;
                                               colorePulsInattivo = new SFColor(r,g,b);
                                               disablePulsSelf = false;
                                           }
                                        "
                                      }
    DEF USR-TXT Transform {.....}
    DEF TS-USR-Trig TouchSensor {    enabled     FALSE    }
    DEF OrologioBlink_24 TimeSensor {
                                               enabled     FALSE
                                               stopTime     -1
                                               cycleInterval     2
                                               loop     TRUE
                                               }
    DEF BlinkInterp_25 ColorInterpolator {
                                               key     [ 0, 0.5, 0.51, 1 ]
                                               keyValue     [ 0 0.5 0.4, 0 0.5 0.4, 0 0.9 0.8, 0 0.9 0.8 ]
    }
    DEF USR-Button Transform {
                                children   Shape {
                                               appearance Appearance {
                                                                   material     DEF _26 Material {
                                                                   ambientIntensity     0.2
                                                                   diffuseColor     0.8 0.8 0
                                                                     }
                                               }
                                               geometry     USE BUTTN
                                             }
                                          }
                                       ]
                                 }

example world
6) Fix the CD-ROM drive on the Case-frame. 6)button CD-ROM, CD-ROM, button Transparency, Bonnet
F) Script>>
        TouchSensor>>
                                        TimeSensor>>
                                                       ColorInt. 
                                         TimeSensor>>
                                                      ColorInt.
                                     TimerSensor>>
                                                  PositionInter.
                                                  OrientationInt.
                                                 for cd.
                            Script transp
example code:

DEF PULSCDROM Transform {
children    [
    DEF PulsanteScriptCDROM Script {
    eventIn SFBool    isActive
    eventIn SFBool    isOver
    eventIn SFFloat    fractionChanged
    eventIn SFTime    instTocc
    eventOut SFBool    disablePulsSelf
    eventOut SFBool    enablePulsNext
    eventOut SFTime    startTimeAnim
    eventOut SFBool    enableTMSAnim
    eventOut SFColor    colorePulsInattivo
    field SFBool    statotPulsSelf    TRUE
    field SFBool    pointerOver    FALSE
    field SFBool    statoAnim    FALSE
    field SFBool    toccato    FALSE
    url    "vrmlscript:
// Handler for event isActive of type SFBool.
function isActive (value, time) {
    if (value == true && pointerOver == true)
{ startTimeAnim = time;
enableTMSAnim = true;
enablePulsNext = true;}
}
// Handler for event isOver of type SFBool.
function isOver (value, timestamp) {
    if (value == true) { pointerOver = true; }
}

// Handler for event fractionChanged of type SFFloat.
function fractionChanged (value, timestamp) {
    if (value >= 0.0 && value <= 1.0) {r = 0.0;g = 0.9;b = 0.8;}
}

// Handler for event instTocc of type SFTime.
function instTocc (valToc, timestamp) {
    toccato = true;
    colorePulsInattivo = new SFColor(r,g,b);
    disablePulsSelf = false;
}
"
    }
    DEF CDROM-TXT Transform {.......}
    DEF TS-CDROM-Trig TouchSensor {    enabled     FALSE    }
    DEF OrologioBlink_35 TimeSensor {
    enabled    FALSE
    stopTime    -1
    cycleInterval    2
    loop    TRUE
    }
    DEF BlinkInterp_36 ColorInterpolator {
                                    key     [ 0, 0.5, 0.51, 1 ]
                                    keyValue     [ 0 0.5 0.4, 0 0.5 0.4, 0 0.9 0.8, 0 0.9 0.8 ]
                                   }
    DEF CDROM-Button Transform {
    children    Shape {
    appearance    Appearance {
    material    DEF _37 Material {
        ambientIntensity    0.2
        diffuseColor    0.8 0.8 0
     }
    }
    geometry    USE BUTTN
    }
    }
  ]
}

example world
7) Show what is inside the Case. 7)button Transparency, bonnet Case, frame Case.
G) Script>>
        TouchSensor>>
                                        TimeSensor>>
                                                       ColorInt. 
                                         TimeSensor>>
                                                       ColorInt.
                                     TimerSensor>>
                                                  ColorInter.
                                                 for Case.
                                                  ColorInter.
                                                  for frame.
example world
Component data translation
In VRML terms
A)Espression level Shape {Mbrd holder}
Shape {Mbrd}
Shape {button 1}
TimeSensor
TouchSensor
TimeSensor
Script
PositionInterpolator
OrientationInterpolator
PositionInterpolator
OrientationInterpolator
 
1)Content level Fix the Motherboard to the mbrd holder and put it in the Case-frame.
Technical data

1) Show me the Motherboard, give me info about slots, plugs, technical features.

VRML environment

1) MB + sub-componets, html features document
A) (right click - load new ... - in top left frame -in top right frame)

Anchor & Script

example code:

DEF Motherboard Anchor {
                       url "html/mb.htm"
                       description "Motherboard Description"
                       parameter "target=descrobjvrml"
                       children [ ... ]
                     }

The document monitor.htm has TAG HEAD : 

<script LANGUAGE="JavaScript">

             function loadObjSel() {
                                              top.objvrml.location.href="../vpobj/vpmb.wrl";
                                            }
</script>

frame 1 is called 'objvrml'
frame 2 (see next chapter) is called 'descrobjvrml' .

2) Show me the CPU, give me info about it. 2)CPU + sub-componets, html features document
A) Anchor & Script
example code:

DEF Cpu Anchor {
                       url "html/cpu2.htm"
                       description "Cpu Description"
                       parameter "target=descrobjvrml"
                       children [ ... ]
                     }

The document monitor.htm has TAG HEAD : 

<script LANGUAGE="JavaScript">

             function loadObjSel() {
                                              top.objvrml.location.href="../vpobj/vpcpu2.wrl";
                                            }
</script>

frame 1 is called 'objvrml'
frame 2 (see next chapter) is called 'descrobjvrml' .

3) Show me the Graphic Card, give me info about it. 3)G200 + sub-componets, html features document
C) Anchor & Script
example code:

DEF Graphic Anchor {
                       url "html/matrox.htm"
                       description "Graphic Card Description"
                       parameter "target=descrobjvrml"
                       children [ ... ]
                     }

The document monitor.htm has TAG HEAD : 

<script LANGUAGE="JavaScript">

             function loadObjSel() {
                                              top.objvrml.location.href="../vpobj/vpagp3n.wrl";
                                            }
</script>

frame 1 is called 'objvrml'
frame 2 (see next chapter) is called 'descrobjvrml' .

4) Show me the Audio Card, give me info about it. 4)AWE64 + sub-componets, html features document
E) Anchor & Script
example code:

DEF Awe64 Anchor {
                       url "html/awe64.htm"
                       description "Audio Card Description"
                       parameter "target=descrobjvrml"
                       children [ ... ]
                     }

The document monitor.htm has TAG HEAD : 

<script LANGUAGE="JavaScript">

             function loadObjSel() {
                                              top.objvrml.location.href="../vpobj/vpawe64.wrl";
                                            }
</script>

frame 1 is called 'objvrml'
frame 2 (see next chapter) is called 'descrobjvrml' .

5) Show me the Modem Card, give me info about it. 5)Modem + sub-componets, html features document
F) Anchor & Script
example code:

DEF Modem Anchor {
                       url "html/modem.htm"
                       description "Modem Description"
                       parameter "target=descrobjvrml"
                       children [ ... ]
                     }

The document monitor.htm has TAG HEAD : 

<script LANGUAGE="JavaScript">

             function loadObjSel() {
                                              top.objvrml.location.href="../vpobj/vpmodem.wrl";
                                            }
</script>

frame 1 is called 'objvrml'
frame 2 (see next chapter) is called 'descrobjvrml' .

6) Show me the Monitor, give me info about it. 6)Monitor + sub-componets, html features document
G) Anchor & Script
example code:

DEF Monitor Anchor {
                       url "html/monitor.htm"
                       description "Monitor Description"
                       parameter "target=descrobjvrml"
                       children [ ... ]
                     }

The document monitor.htm has TAG HEAD : 

<script LANGUAGE="JavaScript">

             function loadObjSel() {
                                              top.objvrml.location.href="../vpobj/vpmonitor2b.wrl";
                                            }
</script>

frame 1 is called 'objvrml'
frame 2 (see next chapter) is called 'descrobjvrml' .

End notes

What you have just seen, is a very clever and simple use of the VRML code. 
The astonishing thing is that all the elements are integrated to convey a content, and make a VRML environment talk.

Full VRML project

 
 
Appendix:

 

User Interface

 

In the Virtual Computer project there are various formats of data,  both 3D and textual. In order to enable the user to access this information quickly, we thought of setting up an HTML framed window that displays the different kinds of data on one screen.
The browser window is divided in three frames.

frames.jpg (11761 bytes)







The top left end frame (frame1) shows the component that is being used if you decide to scan the system PC.
The top right end frame (frame2) shows a textual description and/or the features of the given component, when the user selects the objects from the frame below (frame 3).
The frame at the bottom end (frame3) shows the assembly-building process of the PC.

3D interaction

The interaction with the VRML environment takes place in  two frames: frame 1 and frame 3 of the above image.
It is organized in 2 ways: 
- One is to interact with the process of building the PC and connecting the components. Here we show how to fix the components and which component to install in the right sequence and in the right place
- Another one is to interact with  the single components as a system and to display the information relating to the components' features. In this way we allow the new users to familiarize  with the components and to get to know what the components look like.

Connecting the components
For most of these instructions we organized a set of buttons represented by a dashboard.
Components features
For most of these instructions we organized sensors and scripts to allow the user to pop up more information (trigger of additional information) on the parts of the component.
down
down
butt1.jpg
pop-up.jpg (42185 bytes)
To be able to interact with the scene and to assemble the PC, the user is provided with
the buttons in the Control Panel. To drive the user in the building operations we set up a flashing effect in the buttons (appeareance).
Starting, only the first button is active butt1.jpg (13660 bytes)
butt2.jpg (13610 bytes) When the first operation ends, the second button becomes active and starts flashing.
When the second operation ends, the third button becomes active and starts flashing. butt3.jpg (13952 bytes)
and so on for all the other buttons.
 
There are three different types of buttons:

A button for each component. The user will be given instructions through the various phases of the assembly by means of a flashing light that appears over the text.

“Transparency” buttons.  When the whole PC has been assembled they become visible and active.
The degree of transparency of the Case depends on these buttons.
These buttons allows you to dissolve and to make visible the case for one cycle.

After this task is done another scene is loaded. In this scene you can power on (button blinks) the computer.
You can see the Power On Sequence Test (POST)  starting.


 
 

Applications

Fields of applications:
  • Information Tecnology: technical support systems
  • Multi/Single user environment: virtual stores
  • Shopping : On-line catalogs
  • Training :User’s Manual, Installation Notes
  • Advertising : on/off line demos

 
 
Bibliographical References:

AAVV. Elementi di Semiotica Generativa, 1991 Esculapio, Bologna.

AAVV. Il Corpo Tecnologico, 1994 Baskerville, Bologna.

Capucci P. L. Realta' del Virtuale, 1993 Clueb, Bologna.

Carey R, Bell G, Marrin C, Virtual Reality Modeling Language,(VRML97)
URL: http://www.vrml.org/Specifications/VRML97

De Kerckhove D. Skin of Culture, 1997 Kogan Page.

De Kerckhove D. Brainframes, 1991 Bosh & Keuning, Utrecht

ECO U. Theory of Semiotics, 1977 Macmillian P. 

Floch J. Identites Visuelles, 1995 Presses Universitaires de France, Paris

Hjelmslev L. Prolegomena to a Theory of Language, Univ. Wisconsin Press,

Price S. Media Studies, 1998 Longman, London.

Stillings N A & AAVV. Cognitive Science, An Inroduction MIT Press.

Tobin Y. Semiotics and Linguistics, 1990 Longman, London.