Upload
anarocha
View
225
Download
0
Embed Size (px)
Citation preview
8/10/2019 EON Tutorials
1/169
EON Tutorials
8/10/2019 EON Tutorials
2/169
Copyright !2005 EON Reality, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced,translated or converted to any electronic or machine-readable form in whole or in part without prior written approvalof EON Reality, Inc.
Portions of the PolyTrans 3D geometry import/export documentation included in this manual are
Copyright!
1988, 1998 Okino Computer graphics, Inc. All rights reserved.
Other product and company names herein may be the trademarks of their respective owners.
First edition: January 2005
EON Reality, Inc.13766 Alton, Suite 152Irvine, CA 92618USA
8/10/2019 EON Tutorials
3/169
iii
Table Of Contents
1. Introducing EON Studio 1
Introducing EON Studio windows ....................................................................................................... 1
2. General 3
Quick Start tutorial.............................................................................................................................. 3
Introduction ................................................................................................................................ 3
File import .................................................................................................................................. 4
Viewing the simulation................................................................................................................ 9
Creating interactivity................................................................................................................... 9
Optimizing the model................................................................................................................ 19
Publish the content to the Internet ............................................................................................ 23
Living room tutorial........................................................................................................................... 28
Introduction .............................................................................................................................. 28
Importing a 3D scene ............................................................................................................... 28
Changing the viewpoint in the scene ........................................................................................ 32
Adding a multimedia file ........................................................................................................... 39
Creating a movable object........................................................................................................ 49Adding keyboard interactivity.................................................................................................... 55
Adding ClickSensor activity ...................................................................................................... 58
Adding an extra viewport .......................................................................................................... 65
Adding a panorama view.......................................................................................................... 67
Saving the simulation ............................................................................................................... 70
Running the simulation............................................................................................................. 70
3. Distribution 71
Web Publisher tutorial ...................................................................................................................... 71
Introduction .............................................................................................................................. 71
Create in/out event to html application...................................................................................... 71
Publish the content to the web.................................................................................................. 74Uploading the final application to the Web site.......................................................................... 83
4. ICatcher 85
Stereoscopic tutorial......................................................................................................................... 85
Introduction .............................................................................................................................. 85
Displaying scenes in stereo ...................................................................................................... 85
Stereo settings for a single object............................................................................................. 86
Stereo settings for a scenery.................................................................................................... 90
8/10/2019 EON Tutorials
4/169
EON Tutorials
iv
5. EON Professional 93
CG shaders tutorial .......................................................................................................................... 93
Introduction .............................................................................................................................. 93
Requirements to run this tutorial............................................................................................... 93
Painting the Car with CG shaders............................................................................................. 94
Change Color of the Car......................................................................................................... 102
Change plate of the car .......................................................................................................... 104
Add a CG shader (stone) with bumpmaps to the ground......................................................... 106
EON CAD tutorial ........................................................................................................................... 111
Introduction ............................................................................................................................ 111
Requirements......................................................................................................................... 111
Preview a 3D model in EON Viewer window........................................................................... 111
Change material..................................................................................................................... 113
Add new material.................................................................................................................... 118
MAP and PACK/ Realight Tool ............................................................................................... 119
Polygon reduction................................................................................................................... 122
Collapse Hierarchy (merging Wheel and Tire to one object) ....... ........ ....... ........ ....... ........ ...... 126
Move Pivot Point .................................................................................................................... 127
Select objects......................................................................................................................... 129
Remove Internal Parts............................................................................................................ 131
Create animations .................................................................................................................. 135Export to EON Studio ............................................................................................................. 143
Add behaviours in EON Studio ............................................................................................... 144
EON Humans tutorial ..................................................................................................................... 150
Introduction ............................................................................................................................ 150
File import .............................................................................................................................. 150
8/10/2019 EON Tutorials
5/169
1
Introducing EON StudioEON Studio is a complete GUI based authoring tool for developing real-time 3D multimedia applications focused
on Sales/Marketing, Training/Support and Visualization.
The development process includes importing 3D objects, usually originating from various modeling tools like 3ds
max, Lightwave etc, or from CAD systems such as Solidworks, ArchiCAD or AutoCad.
Once the model is imported, behaviors can easily be associated with the models through EON's intuitive graphicalprogramming interface, scripting or even compiled C++ code, using the EON SDK together with EON Studio.
Finally, EON applications can be deployed over the Internet, stand-alone on a CD-ROM, or a kiosk. EON
applications can also be integrated in other tools that support Microsoft's ActiveX components, such as PowerPoint,
Word, Macromedia Authorware, Director, Shockwave, Visual Basic etc.
Please check our web site on a regular basis for new updates at ww.eonreality.com/support.
Note: By selecting a Node or Prototype in the Component Window and pressing the F1 key, detailed information
about how it works will show up in a pop-up window (EON Help).
Introducing EON Studio windows
Within EON Studio's main window are a number of child windows. The three most important are the Components
window, the Simulation Tree window and the Routes window.
" Components window: The Components window lists the nodes and prototypes used when creating
simulations.
" Simulation Tree: The nodes are arranged in the Simulation Tree structure. The Simulation Tree is built
up by copying nodes from the Component window.
" Routes window: This is where you connect the nodes and define how they will behave when data is sent
between them. This window have been moved and as default it is located to the left at the same place as
the component window
8/10/2019 EON Tutorials
6/169
EON Tutorials
2
" Log window:The Log window provides current information on EON Studio's internal operations. This
feature is for debugging and fine tuning simulation behavior.
" Property BarView has been added, and is available on the right side of the simulation tree.
" Route viewhas been relocated to the left side to give room for the new Property Bar.
" Findwindow opens up default in floating mode, which makes it functions very similar to a dialog
window.
" Butterflyview also opens up as a floating window.
" Selection toolsmakes it easier to find objects in the simulation window and see where they are located in
the simulation tree. The selection tools can also find and zoom in after it is selected in the simulation tree.
Note: Selection, Paint and Face fixing tools require a modifier key (ALT) to activate.
8/10/2019 EON Tutorials
7/169
3
General
Quick Start tutorial
IntroductionThis Quickstart will help new and advanced users to get started with EON Studio. The tutorial will go reveal how
to import a file, adding interactivity, optimization (polygon and compression) and publish application to the
Internet. All necessary files for this tutorial are found in the TutorialFiles directory (C:\Program Files\EON
Reality\EON Studio\TutorialFiles).
Note: The user can be directed to correct EON help filesfor any Node or Prototypes by selecting the node in the
Component view, Simulation Tree or PropertyBar, and pressing the F1 key.
This tutorial will cover a few useful nodes and features using the Visual nodes, and also a few prototypes. You will
learn to import a 3D scene into EON Studio, add interactivity, change textures and colors, compress the file size and
finally publish it to the Web.
The following topics are included in the tutorial:
"File import
o Import an object
! Create interactivity
o Using Rotate/Zoom/Pan navigation (Object Navigation)
o Open/close the lid of the phone
o Apply a lightmap to the screen
o Swap textures on the screen with a time delay after the lid is opened
o Change color on the antenna
8/10/2019 EON Tutorials
8/169
EON Tutorials
4
o Create 2D buttons to control the interactivity in the simulation
o Make the lid transparent
o Add a nice background image and toggle it on/off
" Optimize the performance and the file size of the content
o Texture compression
o Geometry compression
" Publish the content
o Publish to the Web using the EON Web Publisher Wizard
File import
The import procedureThe import procedure for all plug-in converted formats is executed in two steps after the file is opened. First, the
converter loads and converts the file to an internal database representation. In this step the options dialog for
loading the 3D file into the converter is specific for each format. In the second step an EON hierarchy is built from
the database created by the plug-in converter. Here, you enter the options for building the EON simulation tree. All
geometry is converted to polygon meshes and all textures are converted to an EON compatible format. You will see
them as a hierarchy of Frame nodes and Mesh nodes under the Frame node from which you started the importprocedure.
Note:When importing files the original 3D formats are converted to one that is compatible with EON Studio. This is
the .eozformat.
Importing a 3D sceneIn this example, a 3D Studio file is imported. The procedure is the same for all converter imported formats, but the
first import options dialog is specific for each format. (In this dialog options for loading the 3D file into an internal
converter format is entered, see also more about Import procedure). Note that all Import options are described in
the Import options section in the Reference Guide.
1. Open EON Studio.
2. Choose File>Import and select .3ds. Browse for the filePhone.3dsin the TutorialFiles directory and click
on Open(C:\Program Files\EON Reality\TutorialFiles).
8/10/2019 EON Tutorials
9/169
General
5
3. Add search paths to files associated with the main file. These could be texture files, stored in a directory
apart from the main file. Click the Add Path; button. A dialog box is displayed that enables you to browse
the directories that you would like to add to the search path. You can specify several directories by
separating them with a semi-colon (for example, C:\Textures;C:\More_Textures). If the importer cannot
find a texture file, it will report this in the EON Studio Log Window.
4. After pressing Openin the Import file - dialog box, a new dialog for entering import options for loading
the file into an internal database format will be displayed. Note that these options that are specific to the
import file format, in this case 3ds max. Enter the same options as in the dialog blow and click OK.
Note:A full description of all plug-in dialog box options is found in either the Reference Guide in the
Import options chapter or in the Okino help guide by clicking the Help button.
8/10/2019 EON Tutorials
10/169
EON Tutorials
6
8/10/2019 EON Tutorials
11/169
General
7
5. A dialog (Geometry import) to defines import options for building the EON simulation tree is displayed.
Enter the path in the Target path field to a directory (e.g. C:\Temp) that will temporary store imported
texture and mesh files (this directory is only used until you have saved your application the first time).
Enter the following and then click OK.
Target path:C:\Temp
Scaling:No scaling
Check:
" Center geometry to (0,0,0)
" Import pivot points
" Make texture square
" Set material of textured surfaces to white
8/10/2019 EON Tutorials
12/169
EON Tutorials
8
6. When the 3ds file is imported, the expanded Simulation tree should look like this. Note that EON Studio
is using new mesh and texture nodes and these nodes can be shared from the Resource directory. They
are called Visual nodes and more details can be found in the Reference Guide.
8/10/2019 EON Tutorials
13/169
General
9
Viewing the simulation
1. Click the Start button on the toolbar to run the simulation. You should see this:
2. Stop the simulation by clicking on the Stop button on the toolbar, or by clicking the X in the upper-
right corner of the simulation window. The simulation can be refreshed with the refresh button (or
Ctrl-R).
Creating interactivity
Object NavigationNote: By selecting a Node or Prototype in the Component Window and pressing the F1 key, detailed
information about how it works will show up in a pop-up window (EON Help).
1. Select the Prototype tab in the lower left corner of the Component windowand drag the ObjectNavLITE
Prototype to Scenein the Simulation tree.
Note: The easiest way to find a Node or a Prototype in the Component window is to type in the first letter
of the node name in the text window at the top of the Component window.
2. Delete the Walk node from Scene/Camera in the Simulation Tree.
3. Open the simulation.
Note:Please see images below how to control the navigation.
8/10/2019 EON Tutorials
14/169
EON Tutorials
10
4. Navigate using left (rotate), right (zoom) or pan (both left and right) until you have the view that you
want to have when you restart the simulation, press the Initial Viewbutton next to the selection
tools. Close the simulation window.
5. Re-open the simulation window and see if you have the initial view that you want. If not, move to a new
camera position and press the button before closing the window.
Note: Make sure the Simulation window is closed when doing the changes in prototypes, otherwise they
will be lost when the Simulation window is closed.
Open/Close the Phone1. Drag two Placenodes from the Component node windowto Scene/Phone/Phone/Phone0/TOP. Rename
them to Openand Close (click two times on the node with a slightly delay and type in the new name or
press the F2key).
2. Double-click the Opennode (You can also right-click and select Properties). Change the pitch angle in the
Opennode to 120 degrees, the time to 2 secondsand check AbsP (so that it is moving to an absolute
orientation). Check RelX,Y,Z,H and R, which means relative value. Set the Pitch angle in the Closenode to
0 degrees and the rest of the values to the same settings as the Opennode.
3. Drag a new Latch node and a ClickSensorto the same place as the Placenodes
(Scene/Phone/Phone/Phone0/TOP).
8/10/2019 EON Tutorials
15/169
General
11
4. Drag the ClickSensor, Placeand Latchnodes from the Component Node Window to the Route View.
5. Make the following connections in the Routes window:
Source node Out-field Destination node In-field
ClickSensor OnButtonDownTrue Latch Toggle
Latch OnSet Open (Place node) SetRun
Latch OnClear Close (Place node) SetRun
Note: To make a connection between two nodes, start with left clicking on the green arrowon the first node
and select the out-field, move the mouse and left-click the blue doton the second node and select the in-
fieldand release the mouse button. There should now be a green line connecting the nodes. To delete a
link, right-click on the green line and select Delete.
6. Open the Simulation window and click on the lid to open and close.
Apply a lightmap to the phone screen1. Drag a new Texture2node from Component node window to Scene/Resources/Texturesand rename it
Lightmap.
8/10/2019 EON Tutorials
16/169
EON Tutorials
12
2. Select the Lightmap node and click on the icon in the upper right corner of the Property Bar and browse
the light map texture clouds_soft.jpglocated in the tutorial directory.
3. Go to Scene/ResourcesMaterials/material #6and expand the LightmapTexturefolder. Then go to the
Lightmaptexture node again, right-click and select Copy as link.Go back to the material #6node anpaste it in the LightmapTexturefolder.
4. Select the material #6node and go to the Property Bar.
5. Change the Light map intensity to 0.3. (the higher value the more reflection).
Note: For chromed object, close to 1 is a good value and for objects with more soft reflection like
furnitures, 0.2-0.3is better).
6. Change the LightmapAddto 0.25 0.25 0.25(add color/brightness to lightmap).
Note: It is also possible to click the colored icon to the right of the changed values to get a color dialog for
easy editing of new colors.
8/10/2019 EON Tutorials
17/169
General
13
7. Open the simulation and click the lid to open the phone. See how the sky is "reflected" on the phone
display when you turn the phone.
Turn the screen on/off with a time delay when the phone is turned on1. Drag a new Switchnode from the Component Window to Scene/Phone/Phone/Phone0/TOP/top_even/. The
node will switch between an empty screen and one with an image.
2. Drag two new Frame nodes from the Component Window to the Switchnode (release the mouse
button when the Frame node is over the Switch node). The Frame nodes should now be located beneath
the Switch node as a Child. Rename the first Frame node to empty_screenand the second one to
screen_on.
3. Drag the DOF node top_eveninScene/Phone/Phone/Phone0/TOP/top_even/ to the empty_screen
node under theSwitchnode. Duplicate (Copy, Ctrl-C, Paste, Ctrl-V) the top_even node and paste it toscreen_on.
Note: The Switch node will swap between the (see image below) two nodes empty_screenand
screen_onthat will contain different materials (one textured and one with only gray color).
4. Delete the reference to material #6under Material folder under
Scene/Phone/Phone/Phone0/TOP/top_even/Switch/empty_screen/top_even/top_evenShape/.
5. Go to Scene/Resources/Materials/default, right-click and Copy as linkand paste it in the empty Material
folder of the top_evenShapenode.
8/10/2019 EON Tutorials
18/169
EON Tutorials
14
6. Drag a new Counternode from the Component Window to Scene/Phone/Phone/Phone0/TOP/top_even.
7. Double-click on the Counter node. Change the Counter Interval to 1 and to Cycle mode.
Note: The counter interval is the value that is going to be sent to the Switch node swapping between the
objects in the Switch node. With this setting it will cycle between 0 and 1.
8. Drag a new TimeSensornode from the Component Window to
Scene/Phone/Phone/Phone0/TOP/top_even.
8/10/2019 EON Tutorials
19/169
General
15
9. Double-click on the TimeSensor and set the Stop time to 2 seconds. UncheckActive when simulation starts.
Note: The TimeSensor is used to get a delay for the screen to turn on 2 seconds after the lid is opened.
10. Drag the Switch, Counterand Timesensor node to the Route window.
11. Make the following connections in the Routes window:
Source node Out-field Destination node In-field
a) Open (Place node) OnRunFalse TimeSensor SetRun
b) TimeSensor OnStopPulse Counter Increment
c) Counter Value Switch Value
d) Close (Place node) OnRunTrue Counter Increment
a) When the Place node ends its animation (lid is up) it sends an out-event (OnRunFalse) to the
TimeSensor. SetRun will start the timer in the TimeSensor.
b) After 2 seconds the TimeSensor sends an out-event (OnStopPulse) to the Counter node.
c) The Counter will increment with one step and send the value to the Switch node that will switch the
objects under that node (screen turns on). The Switch node can keep multiple objects.
d) When the lid close, the Closenode will send an event to Counternode, that sends an event to the Switch
node that swaps back to the empty screen again.
8/10/2019 EON Tutorials
20/169
EON Tutorials
16
12. Open the simulation and open the lid of the phone. The cell phone display should be gray from beginning
and turned on two seconds after the lid is completely opened. When the lid is closed the display turns off
without delay.
Change the color of the antennaThe Prototype Colorswill be used to change between two different colors on the antenna. By selecting a
Node or Prototype in the Component Window and pressing the F1 key, detailed information about how it
works will show up in a pop-up window (EON Help).
1. Add a TextBoxButtonPrototype to the Camera.
Note: Make sure to close the simulation window before you place any prototypes in the Simulation Tree.
2. Change name of the TextBoxButtonprototype to ChangeColorButton
3. Change the Textfield in the Property Bar to "Change antenna color", TBPositionto 0.05 0.9, TBSizeto 165
22.
4. Add a ColorsPrototype to Scene/Phone/.
5. Add a LatchNode to Scene/Phone/.
6. Drag Colorand ChangeColorButton prototypes and the Latchnode to the Route view
Note: (Shortcut to the Route window is Alt+2).
7. Drag material #4in Scene/Resources/Materials/to the Route view.
8. Make the following connections in the Routes window:
Source node Out-field Destination node In-field
ChangeColorButton OnDown Latch Toggle
8/10/2019 EON Tutorials
21/169
General
17
Latch OnSet Colors DarkBlue
Latch OnClear Colors White
Colors Color material #4 (Material node) Diffuse
Note: Use the diffuse field when changing color on an object.
8. Open the Simulation window. Push the button and the color of the antenna will change between darkblue and white/gray.
Make the lid transparent
1. Add a new TextBoxButtonprototype to Scene/Camera.
8/10/2019 EON Tutorials
22/169
EON Tutorials
18
2. Change name of the TextBoxButtonprototype to ChangeTransperancyButton
3. Change the Text field to Transparency, TBPositionto 0.05 0.8, TBSizeto 105 22.
4. Add a SmoothOperatorprototype to Scene/Phone. Change the State0Valuefield in Property Bar to
0.5.
Note: In this case the State0Value stands for 50% transparency, i.e. when the SmoothOperator achieves the
value 0 the transparency will be at 0.5 or 50%. The SmoothOperator starts with a value of 1 (State1Value) by
default. State0Time value 2 means it will take 2 seconds to 50% transparency.4. Add a Latchnode to Scene/Phone/
5. Drag the Latch, ChangeTransperancyButtonand SmoothOperatorand the material #27node
(Scene/Resources/Materials)to the Route view.
6. Make the following connections in the Routes window:
Source node Out-field Destination node In-field
ChangeTransperancyButton OnDown Latch Toggle
Latch OnChanged SmoothOperater Toggle
SmoothOperater FloatValue material #27 (Material node) Opacity
7. Open the Simulation window. Click the Transparency button to toggle the transparency of the lid.
Toggle background image on/off1. Add a TexturedBackground(BP)prototype to the Camera.
2. Add a Latchnode to the Camera. Double click the Latch node and check the checkbox called Initial value.
3. Add a KeyboardSensornode to the Camera. Double-click on the node and set the Virtual key name to
VK_B.
8/10/2019 EON Tutorials
23/169
8/10/2019 EON Tutorials
24/169
EON Tutorials
20
2. ChangeQualitylevel to 30% and setMaxWidthto 256andMinWidthto 256. If the texture has a lower
resolution that 256 X 256 the texture will keep that resolution.
Geometry compressionGeometry compression is another way to reduce the size of the distributed edz file (the eoz file size will
never be affected by any polygon reduction, texture or geometry compression). The result of the geometry
compression can be seen instantly in the simulation window and too much compression will result in gaps
between polygons and distortion of the geometry. Decreased file size is specially important for webdistribution.
Note: Geometry compression will reduce the file size a little and does not affect the performance very
much.
1. Go to Scene/Resource/Meshes. In the MeshResourceGroup node it is possible to change the mesh
compression reduction for all meshes under that node.
8/10/2019 EON Tutorials
25/169
General
21
2. Make sure all meshes under the MeshResourceGroup have checked the UseGroupSettingsfield. Set the
desired overall compression level using the GeometryCompressionLevelfield. Select Preset 7.
Note: To verify that the geometry data has been compressed, you can check the difference between the
OriginalSize and DistributionSize fields, which should be positive. Note that the DistributionSize figure is
just an estimation, since the actual reduction in size cannot be determined until a final compression is
done on the underlying geometry file (which happens when creating a distribution file of the simulation).
8/10/2019 EON Tutorials
26/169
EON Tutorials
22
8/10/2019 EON Tutorials
27/169
General
23
Publish the content to the InternetThe EON Web Publisher Wizard is a step-by-step wizard that enables you to create an EON application
embedded inside an html shell. It automatically create the correct html and JavaScript code. The result
(html files etc) that comes out from the Wizard can be further edited in any html editor e.g. DreamWeaver,
FrontPage etc.
1. Select File/Save As... (it is necessary to save the file before using the Web Publisher Wizard).
2. Select File/Create Web Distribution...
3. Click OKif a window appears stating that it needs to be saved before publishing.
4. Click Nextwhen the Web Publisher window comes up.
8/10/2019 EON Tutorials
28/169
EON Tutorials
24
5. Select the Product Visualization template. Click Nextand Continue to click Next until Step 5of the wizard.
6. Enter a folder to designate where to store the application. For example at C:\EON Demos\Web_Phone.
7. Check Internetas Distribution type.
8/10/2019 EON Tutorials
29/169
General
25
8. Check Use Default Plugin Folder. This means that the EON Plug-in will be downloaded from EON Reality's
download server.
Note: Put the whole published directory to the web site. Direct the users to index.htm and the users will
get the plug-in automatically downloaded the first time. With this selection it is necessary to have Internet
connection since some components will be downloaded from EON Reality's server. Please see EON
Distribution guidefor more info about the Web Publisher Wizard.
9. Click Next and then click Finish.
10. The final application should look like this:
8/10/2019 EON Tutorials
30/169
EON Tutorials
26
9. Open the directory where the files were saved and upload it to the web site.
8/10/2019 EON Tutorials
31/169
8/10/2019 EON Tutorials
32/169
EON Tutorials
28
Living room tutorial
IntroductionThis tutorial is made for new and advanced EON Studio user. It shows simple ways to create a powerful simulation
in just a few minutes. All necessary files for this tutorial are found in the TutorialFiles directory (C:\ProgramFiles\EON Reality\EON Studio\TutorialFiles).
Note: The user can be directed to correct EON help filesfor any Node or Prototypes by selecting the node in the
Component view, Simulation Tree or PropertyBar, and pressing the F1 key.
The following topics are included in the tutorial:
" Import a 3D scene (3ds max file)
" Change a viewpoint in a scene
" Move an object in the virtual room
" Add a movie to the simulation
" Create interactivity by using keyboard and mouse
" Get an additional viewport
" Add a panorama landscape
" Run and save your simulation
Importing a 3D scene
Importing a 3D Studio MAX - file1. Open EON Studio.
2. In the Simulation Tree select the Scene - frame.
8/10/2019 EON Tutorials
33/169
General
29
3. Select File/Import/3DStudio .3ds. Browse for the file Livingroom.3dsand click Open. The 3ds file Import
Plug-In appears. Check the boxes as show in the picture. Click OK.
8/10/2019 EON Tutorials
34/169
EON Tutorials
30
4. The Geometry Import - dialog appears. Check the boxes as shown. Click OK.
8/10/2019 EON Tutorials
35/169
General
31
5. Viewing the simulation. Now, the 3D - scene is imported. To watch the simulation click in the
toolbar. The Simulation- window appears. You should see this:
8/10/2019 EON Tutorials
36/169
EON Tutorials
32
To stop the simulation click in the toolbar or click the cross on the top right of the Simulation -
window.
Changing the viewpoint in the sceneYou can find different camera - nodes in the Simulation Tree. EON Studio usually creates one camera as default. In
the imported file you can find another default camera. This is the 3D Studio MAX default camera. All the other
cameras are created in 3D Studio MAX in order to change the different fields of view.
1. Next step is to change the default camera. In the Simulation Tree, expand Viewports/Viewport/Camera
and delete the link to the Camera node. Usually the Viewport Camera is linked to the default camera of
EON Studio.
8/10/2019 EON Tutorials
37/169
General
33
2. Right-click Camera_StartCamand select Copy as Link.
8/10/2019 EON Tutorials
38/169
EON Tutorials
34
3. Paste the link into Viewports/Viewport/Camera right clicking the camera - node. Now, the camera of the
viewport is linked to the Camera_StartCam.
4. Drag a Walknode and drop it below Scene/Livingroom/Camera_StartCam. The Walk node lets you navigate
in the room by clicking the mouse button and moving the mouse.
8/10/2019 EON Tutorials
39/169
General
35
5. Double click on the walk node and change Walk:to Right buttonand Elevate:to Unassigned. To
navigate you need to hold down the right mouse button and drag.
Tip: In order to find the nodes in the Components - Nodes - window you can search for classifications in the
classification field. EON Studio shows the nodes accordingly to their classification.
8/10/2019 EON Tutorials
40/169
EON Tutorials
36
The second possibility is to type a letter in the search - field. EON Studio shows all the nodes in alphabetic
order.
8/10/2019 EON Tutorials
41/169
General
37
6. Move the Headlight - node from Scene/Cameraand place it into Scene/Camera_StartCam. The Headlight is
usually connected with the EON Studio default camera. You also can see the other Walk node under
Scene/Camera. The Walk node is normally connected with the EON Studio default camera too.
8/10/2019 EON Tutorials
42/169
EON Tutorials
38
7. The Simulation Tree should now look like this:
8/10/2019 EON Tutorials
43/169
8/10/2019 EON Tutorials
44/169
EON Tutorials
40
2. Drag a MovieTexture- node from the Components - Nodes - window into the Simulation Tree and place
it under the Scene/Resources/Textures.
Note: The MovieTexture - node allows you to import video clips and view it inside the real-time
simulation.
8/10/2019 EON Tutorials
45/169
General
41
3. Select the MovieTexturenode, right-click and select Copy as Link.
4. Right-click on the DiffuseTexture folder under Scene/Resources/Materials/material#1/and select Paste.
5. In order to get a video clip, click the "folder" in the Property Bar and browse for the SkiMovie.avi.
8/10/2019 EON Tutorials
46/169
EON Tutorials
42
6. Check the link to the material#1in the TV_Screen - structure. The linking allows using the very same
material for various objects in the simulation. Your Simulation Tree should look like this:
8/10/2019 EON Tutorials
47/169
General
43
7. The video clip can be activated by checking Activein the Property Bar. Run the simulation and the movie
will start instantly.
8. In order to run the movie by clicking the TV we have to add interactivity using the Routes: Simulation -
window. Add a ClickSensor- node by dragging and dropping to the Simulation Tree. Place it below the
TV - node.
8/10/2019 EON Tutorials
48/169
EON Tutorials
44
Note: It is very important where you place the nodes! Once a node is placed in a wrong position, the
simulation will not work properly. So always make sure that the node is in the correct position.
9. Double click the ClickSensor- node in the Simulation Tree. The ClickSensor Properties - pop-up appears.
Check the box "Change cursor when clickable". This changes the appearance of the cursor once you move
over an object in the running simulation. Click OK.
10. Expand the Resources - node. Make sure that the Active - box of the MovieTexture- node in the Property
Bar is unchecked.
8/10/2019 EON Tutorials
49/169
General
45
11. You will now start "routing" (programming the interactivity using EON's graphical user interface). Click
the Routes: Simulation - tab in order to get the Routes: Simulation - window. Drag and drop the
ClickSensor- node and the MovieTexture- node into the Routes: Simulation - window.
Note: It is not possible to drag a "reference" of a node ("copied as link") to the route window. So in this
case you have to drag the MovieTexture from Scene/Resources/Textures.
8/10/2019 EON Tutorials
50/169
EON Tutorials
46
12. Make the following connections: Pressing the green arrow of the ClickSensor - node a pop-up - menu
appears. You can see various "events". The events are behaviors which send an impulse to the target
node. In this simulation the target node is the MovieTexture. Click OnButtonDownTrue.
8/10/2019 EON Tutorials
51/169
General
47
13. An arrow appears. Connect the arrow with the little blue sphere on the MovieTexture by clicking on it.
Go to SetRun and release the mouse button and the two nodes will connect. The ClickSensor will activate
the MovieTexture as soon as it is clicked. This means that the movie will start as soon as the TV is clicked,
because the ClickSensor is placed below the TV - node.
Note: If you have to delete the arrow just click on it and press Delete.
8/10/2019 EON Tutorials
52/169
EON Tutorials
48
Source node Out-field Destination node In-field
ClickSensor OnButtonDownTrue MovieTexture OnButtonDownTrue
8/10/2019 EON Tutorials
53/169
General
49
14. Run the simulation and enjoy the show!
Creating a movable objectThis part shows you how to move objects, in this case the lamp, by left-clicking the object and drag.
1. Place a new Frame node in Scene/Livingroom.
8/10/2019 EON Tutorials
54/169
8/10/2019 EON Tutorials
55/169
General
51
Tip: Rename the nodes by clicking on them and pressing F2.
3. Move the nodes "Floorlamp" and "Spot01" below the "Movable Floorlamp" - node.
8/10/2019 EON Tutorials
56/169
EON Tutorials
52
4. Place a DragManagerprototype below the "Camera"- node. (The Drag prototypes let you move around
objects by left clicking on an object and drag.)
5. Place a DragSelectorprototype below the "Movable Floorlamp"- node.
6. Place a ClickSensornode below the "Movable Floorlamp"- node.
The structure should now look like this:
8/10/2019 EON Tutorials
57/169
General
53
7. Right-click on the DragManagerprototype and select Copy as Link. Open the DragManagerfolder
under the DragSelectorprototype and Paste(This creates a reference to the DragManager).
8. Right-click on the Movable Floorlamp node and select Copy as Link. Open the DragNodefolder under
the DragSelectorprototype and Paste(This creates a reference to the parent frame).
8/10/2019 EON Tutorials
58/169
EON Tutorials
54
9. Drag the DragSelectorprototype and the ClickSensornode to the Route Window.
10. Drag and drop the DragSelector- prototype and the ClickSensor- node into the Routes: Simulation -
window.
Make the following connections in the Routes window:
Source node Out-field Destination node In-field
8/10/2019 EON Tutorials
59/169
General
55
ClickSensor OnButtonDownTrue DragSelector Select
9. Run the simulation. You are now able to move around the lamp by left-clicking the lamp and drag.
Note: To save the objects position and orientation, you would need to open the Movable Floorlamp frame
Properties and click Start Values.
Adding keyboard interactivityIn this chapter you will learn how to switch on and off the light in the room.
1. Add a KeyboardSensor node to the Scene - node in the Simulation Tree.
2. Double-click the KeyboardSensor and change the "Virtual key name" to "VK_SPACE". Click OK. This
defines a key from your keyboard - in this case the space - key. Later, this key will start the action in the
simulation.
8/10/2019 EON Tutorials
60/169
EON Tutorials
56
3. Add a Latch - node to the Scene - node in the Simulation Tree. The Latch - node will be necessary for the
"routing" later.
4. Click the Routes: Simulation - tab. Drag and drop the KeyboardSensor, the Latch - and Ambient - node
from the Scene - node into the Routes window.
8/10/2019 EON Tutorials
61/169
General
57
Note: The Latch- node is like a switch. It gives a connected node different behaviors, in this case the on- and
off - turning of the Ambient light.
5. Make the following connections in the Routes window.
Source node Out-field Destination node In-field
KeyboardSensor OnKeyDown Latch Toggle
Latch OnSet Ambient SetRun_
Latch OnClear Ambient SetRun
Note: A black dot is displayed at the Latch node to indicate that there are two connections between two
nodes. In this case, it means that the Ambient - node can be turned off and on.
6. Run the simulation and turn on and off the light in the room pressing the Space - key.
8/10/2019 EON Tutorials
62/169
EON Tutorials
58
Adding ClickSensor activityIn this chapter you will learn to disassemble the sofa. First you'll create a node structure in the simulation tree, then
assign the parameters and last routing the nodes in the Routes: Simulation - window. Let's start with the node -
structure.
1. Place a new Frame- node below the Back- node of the Sofa. Rename it "Disassemble_Back".
2. Drag and drop two Place- nodes below the Disassemble_Back- node. Rename them "disassemble" and
"assemble".
8/10/2019 EON Tutorials
63/169
General
59
3. Place a Latch- node under the Disassemble_Back- node.
8/10/2019 EON Tutorials
64/169
EON Tutorials
60
4. Add a ClickSensorbelow the Disassemble_Back- node.
8/10/2019 EON Tutorials
65/169
General
61
5. Move the DegreeOfFreedom(DOF) - node under the Disassemble_Back- node. This is an important
step. When we move the Back in the simulation, its origin will follow now.
8/10/2019 EON Tutorials
66/169
EON Tutorials
62
Note: The DegreeOfFreedom, or short, DOF - node defines the position of an object due to its origin. The
DOF - node can also be used for transforming the object as well as its origin.
6. Now, we'll assign some parameters to the Place - nodes. Double click the "disassembly"- node. The Place
Properties - pop-up appears. Enter the parameters shown below in the Place Properties. Click OK.
8/10/2019 EON Tutorials
67/169
General
63
Note: You can see three columns in the Place Properties: The Movement - column defines the movement of
the object in meter and degrees. The Time to move - column sets the time of movement in seconds. The Type
- column shows the type of movement: Movement can be relative, i.e. regarding the current position, or
absolute. The absolute movement moves to the specified position in the coordinate system of the object's
parent, regardless of the current position. Checking Yes in the Active - column activates the Place - node
when the simulation starts. Checking Noinactivates it until an external impulse activates the Place - node.
7. Double click the "assemble" - node. In the Place Properties type the parameters as shown below.
8/10/2019 EON Tutorials
68/169
EON Tutorials
64
8. Drag- and drop the nodes shown below into the Route: Simulation - window.
8/10/2019 EON Tutorials
69/169
General
65
9. Make the following routing:
Source node Out-field Destination node In-field
ClickSensor OnButtonDownTrue Latch Toggle
Latch OnSet Disassemble SetRun
Latch OnClear Assemble SetRun
10. Run the simulation. Click on the back of the sofa. It now moves back. If you click again, it will move into
its start position.
Adding an extra viewportIn this chapter you'll learn how to create an extra viewport in the simulation.
1. Place a new Viewport node in the Viewports - folder and rename it "Topview".
2. Double-click the Topview - node and enter the following values as shown below. Click OK.
8/10/2019 EON Tutorials
70/169
EON Tutorials
66
Note: The Position - column of the Viewport Properties determines the viewport's relative position within
the simulation window. Range 0-1. (0,0) is at the upper left corner while (0.5,0.5) is at the center of the
window.
The Size - column determines the viewport's relative size within the simulation window. Range 0-1. A
width value of 0.5 would set the viewport to half the simulation window width.
In the View region - column determines the clipping plane and the field of view:
Far clipping plane: Objects further away than this distance are not drawn.
Near clipping plane: Objects closer than this distance are not drawn.
Field of view: Determines the viewer's field of view in degrees.
Note: By selecting a Node or Prototype in the Component Window and pressing the F1 key, detailed
information about how it works will show up in a pop-up window (EON Help).
3. Copy as linkthe Camera_TopCam and place it into the camera - folder of the Topview - viewport.
8/10/2019 EON Tutorials
71/169
General
67
4. Run the simulation. You'll remark an additional viewport in the top left position of the simulationwindow.
Adding a panorama viewIn this chapter you'll learn how to get a panorama view in the simulation.
1. Drag- and drop a Panorama - node in the Scene.
8/10/2019 EON Tutorials
72/169
EON Tutorials
68
Note: With the Panorama - node you can get a panorama view made of maximally three layers. These layers
consist of three different textures (ground, horizon and sky) which fit automatically.
1. Double click the Panorama- node. The Panorama Properties pop-up appears. Make sure that the Settings
- tab looks like this:
8/10/2019 EON Tutorials
73/169
General
69
Note: When Horizon in the Mirroring - field is selected, every second texture is flipped to eliminate
discontinuous edges.
2. In the Textures - tab browse for the files shown below.
3. Click on the Horizon coordinates - tab. Make sure that it looks like this:
8/10/2019 EON Tutorials
74/169
EON Tutorials
70
Note: The angle in the Strip occupies an angle of ... degrees - field defines the height of the horizon texture.
The range is 0-90. By selecting a Node or Prototype in the Component Window and pressing the F1 key,
detailed information about how it works will be displayed in a pop-up window (EON Help).
4. Run the simulation. Now you can see a big city around you!
Saving the simulationSelect File/Save As... and save the file (.eoz).
Running the simulationThese are the instructions for running the finished Livingroom.eoz demo:
" Navigate in the room by holding down the right mouse button as you move the mouse. Middle mouse
button will change direction of the camera.
" Move the lamp by left clicking on the lamp and drag.
" Click on the TV screen to start the film.
" Press the spacebar to change the lighting.
" Click the Sofa to disassemble it.
8/10/2019 EON Tutorials
75/169
71
Distribution
Web Publisher tutorial
IntroductionThis tutorial will help users to get started with the EON Web Publisher Wizard. The tutorial is using an eoz file
prepared with an in- and out-event that eventually will communicate with the Web page after the complete files are
created with the Web Publisher.
The Wizard will step by step guide the user through various Web pre-defined html templates, presenting choices
where from the plug-in should be downloaded. It will result in a complete set of files that are ready to be uploaded
to a Web site. It is very simple to use and no programming experiences are necessary.
The file for this tutorial can be found in the Sample directory (C:\Program Files\EON Reality\EON
Studio\TutorialFiles).
Note: By selecting a Node or Prototype in the Component Window and pressing the F1 key and detailed
information about how it works will show up in a pop-up window (EON Help).
Create in/out event to html application1. Open the file WebEventExample.eozthat can be found in the TutorialFiles directory (C:\Program
Files\EON Reality\Tutorial Files).
2. Open up the Route View (Window/Routes). Click on the green arrow in the lower left corner to create an
in-event.
8/10/2019 EON Tutorials
76/169
EON Tutorials
72
3. A pop-up window appears. Select field type SFVEC3Fand call the event ChangeSphereColor.
Note: The field type represent what kind of event that is going to be send to the node. In this case it is a
SFVEC3Fvector that will send the color code (for example 1 0.5 0which is orange) from the Web page to
the EON simulation. The name of the in-event ChangeSphereColorwill be used in the javascript code for the
communication between the Web page and the EON simulation and will be created automatically by the
Web publisher.
4. Drag the Prototype Sphere(Scene/Sphere)to the route window.
5. Click the green arrow and connect it to the Sphere prototype.
Make the following connections in the Routes window:
8/10/2019 EON Tutorials
77/169
Distribution
73
Source Out-field Destination In-field
ExternalEvent
(green arrow)
ChangeSphereColor Sphere Color
Note: The in/out events can not be tested from inside EON Studio. It can only be tested form an html page.
The code for the html page can either be created manually (javascript) or it can be created automatically by
Web publisher template (with in/out events included). When the html page is created, the events can be
tested in a Web browser, or by using EONWebTool(please see EON Studio Distribution Guide).
5. Select File/Save As..
8/10/2019 EON Tutorials
78/169
8/10/2019 EON Tutorials
79/169
Distribution
75
4. Select the EON Five Optionstemplate. Click Next.
Note: Read more in the User Guide about how to create your own web template.
8/10/2019 EON Tutorials
80/169
EON Tutorials
76
5. Check all the boxes (representing all in/out external events created in the eoz simulation). Click Next.
8/10/2019 EON Tutorials
81/169
8/10/2019 EON Tutorials
82/169
EON Tutorials
78
8. Enter a folder where to store the result from this wizard. Select Use Default Eon Functions Folderand
select Internetas distribution type (If there are no Internet connection please use CD Distribution type).
Click Next.
Note: If you use CD distribution, the plug-in will be installed directly from the CD.
8/10/2019 EON Tutorials
83/169
8/10/2019 EON Tutorials
84/169
EON Tutorials
80
10. Go to the place where you saved the content (C:\EON Demos\WebEventExample) and open the file
index4.htm.
Note: If you have Windows Service Pack 2(SP2) installed, the pop-up windows is blocked and you need
to click on the warning, To help protect your security,and select Allow Blocked Content..., to be able to
continue.
8/10/2019 EON Tutorials
85/169
Distribution
81
11. Click Yesto allow the demo to run.
12. The created Web page will show all in- and out-events as either buttons, images (icons) or as buttons with
a text field, that can be changed interactively, to put True/False, text string or a vector.
" Set the value to Truein the first four fields below Send your values via buttons(the field type is SFBOOL
which is Trueor False). Click the button after the text field.
8/10/2019 EON Tutorials
86/169
EON Tutorials
82
" Set the TextBoxPositionto 0.1 0.5(the field type is SFVEC2Fand in this case it describes the x and y
coordinates of the position of the TextBoxButton). Click the button.
" Set the TextBoxTextto Show room. (the field type is SFSTRINGand can contain any text and it will be send
in to EON, in this case it will change the name of the button that can toggle the Show room on and off).
Click the button.
" Set the Lap time to 2 seconds(the field type is SFFLOATand is a single number, and in this case it will
change the Sphere's lap time). Click the button.
" Set the Sphere text to Click me to rotate(field type SFSTRING, in this case it will send a text string to the
ToolTip node and change the ToolTip name in the node). Click the button.
" Set the ChangeSphereColorvalue to 0.2 0.7 0.3(field type SFVEC3F, and it will send the color value of Red,
Green, Bluewith 0 0 0 as black and 1 1 1 as white). Click the button.
" The fields in the lower left corner are three out events.
o ClickSphere(SFBOOLout event, Truewhen the Sphere starts rotating and Falsewhen it stops)
o CameraPosition(SFVEC3Fout event, shows x, y and zcoordinates of the Camera position).
8/10/2019 EON Tutorials
87/169
Distribution
83
Uploading the final application to the Web site1. Open the directory where the files where saved (C:\EON Demos\WebEventExample).
Note: When creating the final application, the page created from the Web publisher can be edited and
customized in any html editor (DreamWeaver, Front Page etc). There the layout can easily be changed,
buttons removed and the buttons below Inevents sent by image linkscan be changed to other images. The
template is meant to be a help to make it easier to create interactive Web application, but it is most helpful
to know both html and javasrcipt to create more Web advanced applications.
8/10/2019 EON Tutorials
88/169
EON Tutorials
84
2. Since index4.htmis the file that have been used in this tutorial the rest of the files in the directory are not
going to be used. Delete all html files except index4.html, then change index4.html to index.html
3. Upload the whole published directory to the web site. Direct the users to index.htm and the users will get
the plug-in automatically downloaded the first time. The plug-in is about 1MB and is free of charge.
Note: With this selection it is necessary to have Internet connection since some components will be
downloaded from EON Reality's server. Please see EON Distribution guidein the User Guide for
additional information about the Web Publisher Wizard.
8/10/2019 EON Tutorials
89/169
8/10/2019 EON Tutorials
90/169
EON Tutorials
86
SceneryWhen viewing scenery or an interior of a building, it is best to keep Zero Parallax close to 0 (which will put zero
distance at the near clipping plane). This way no part of the scene will have negative parallax, and it will feel like
we are looking out a window.
Stereo settingsZero parallax distance: This field is used to define the distance from the camera where we want zero parallax. Zero
parallax means that the images from the left and right eye coincide. This means that any object at the specified
distance is perceived to be at the screen plane. Any objects closer than this value seem to be located between the
screen and the observer. Objects farther away seem to be located inside the screen.
Maximum parallax: This setting controls the maximum amount of positive parallax that you want. This value is
specified in pixels and it indicates the maximum separation between the left and right eye images for distant objects
(objects at the far clipping plane). NOTE: For comfortable viewing, this parameter should be kept as low as possible
while still giving the desired stereo effect. If this parameter is too large, the stereo effect will break down
completely. If there are no distant objects in the scene, this parameter can be increased to increase the stereo effect. If
you have problems with ghost-images, try to decrease this setting.
Stereo settings for a single object1. Open the file StereoTractor.eozthat can be found in the TutorialFilesdirectory (C:\Program Files\EON
Reality\TutorialFiles).
2. Go to Simulationat the top of EON Studio window and select Configuration/Render.
3. Select Advanced and change to the stereo mode you are going to use.
Note:InterleavedandAbove/Belowstereo will lose resolution in vertical direction but it does not need a more
expensive graphics card with support for stereographics like Quadbuffer/Page flipmode.
8/10/2019 EON Tutorials
91/169
ICatcher
87
4. When showing single objects its easiest to use the StereoZeroParallaxFrame to put zero parallax at a fixed
place on the object, for example, in the center. Then half the object will seem to be outside the screen and
half the object will seem to be inside, no matter of the distance to the camera. When setting the Zeroparallax distance manually in the viewport node the distance is a fixed distance from the camera and
when zooming out the object/scene will appear inside the screen.
Press the material button in the selection tool.
5. Open the simulation window and left click on the cabin on the tractor. The selected object will be marked
with a yellow box.
8/10/2019 EON Tutorials
92/169
EON Tutorials
88
6. The selection tool will open the simulation tree and show the selected object. Right click on cabMain-1
and Choose Copy as Link. Paste the link in Viewports/Viewport/StereoZeroParallaxFrame.
7. Double-click the Viewport node and select the Advanced settings tab. Since the StereoZeroParallaxFrame
is used that will override the Zero parallax distance. The next value is the Max eye separation (parallax)
and for comfortable viewing, this parameter should be kept as low as possible while still giving the
desired stereo effect. Normally a value around 20 is recommended.
8. Change the monitor framerate to as high as possible, at least 85Hz.
8/10/2019 EON Tutorials
93/169
ICatcher
89
9. Open the simulation (if you are using Interleaved stereo it will look something like this). With the glasses
turned on it will appear to be in stereo standing out from the screen. Left and right eye can be swapped
with the S key in this simulation.
Note:The Zero parallax distance is in this case the cabin and it is possible to see that there is no double
image at this point. That is the zero parallax distance and is the clippingplane between inside the screen
and outside.
With shutter glasses that support interleaved stereo it is possible to see this still image in stereo
10. If no stereo effect appear, press the S keyand left and right eyes will swap.
Note:With a graphics card without a sync signal it is not possible for the software to start with the correct
image for each eye so it is random every time the simulation starts. The result will be that there will not be
any stereo effect in the simulation. In the simulation node it is possible to swap eyes when the simulation is
started. This feature needs to be created in the EON simulation by sending an event to the Simulation node.
8/10/2019 EON Tutorials
94/169
EON Tutorials
90
Stereo settings for a scenery1. Open the file StereoTrain.eoz can be found in the Media directory (C:\Program Files\EON
Reality\TutorialFiles).
2. Open the Simulation window.
Note:This simulation is created in correct scale in meters so one unit in the simulation is one meter (3 feet).
If the Zero parallax distance is set to 2, meaning that everything between the camera and 2 meters forward
(first chair to the left facing the camera) will appear to stand out from the screen. When setting the Zero
parallax distance in a scenery, this distance needs to be adjusted if the scene is scaled.
3. Double-click the Viewport node and select theAdvanced settingstab. Set the Zero parallax distance to 0, 1,
2 and 3and see the difference.
4. Try different values of theMax eye separation(parallax) between 10and 30and see what gives the best
stereo effect. Normally a value around 20 is recommended.
Note:For comfortable viewing, this parameter should be kept as low as possible while still giving the
desired stereo effect.
8/10/2019 EON Tutorials
95/169
8/10/2019 EON Tutorials
96/169
8/10/2019 EON Tutorials
97/169
93
EON Professional
CG shaders tutorial
IntroductionThis tutorial will illustrate how to add CG shaders to an existing 3D model (car) and describe how to obtain as high
visual quality as possible, using environmental- and bump mapping. All necessary files for this tutorial are found in
the TutorialFiles directory (C:\Program Files\EON Reality\EON Studio\TutorialFiles).
Note: The user can be directed to correct EON help filesfor any Node or Prototypes by selecting the node in the
Component view, Simulation Tree or PropertyBar, and pressing the F1 key.
This tutorial will explain how to import and edit CG shaders, use the Paint tool, change colors using the Keyboard,
replace a texture, add bumpmapped texture and edit the Texture UV coordinates.
The following topics are included in the tutorial:
" Paint with the Paint tool
" Import CG shaders
" Use the MaterialChanger prototype to change car color with the press of a button
" Change texture of the car's plate
" Learn how to use bumpmaps
Requirements to run this tutorial
" To view Cg-based materials DirectX 9.0b or later is required. However, note that the EON rendering
mode must be set to OpenGL. Cg-materials do not work in Direct3D mode.
8/10/2019 EON Tutorials
98/169
EON Tutorials
94
" NVidia-based graphics cards:ForceWare 53.03 or later. FX 5200 or higher is required to view simulations
with Cg-materials.
" ATI-based graphics cards:Catalysator 4.10 or later. Radeon 9500 or higher is required to view
simulations with Cg-materials.
" Other brands:The graphics card must support vertex and fragment shader object OpenGL extension. Use
the latest driver.
Painting the Car with CG shaders1.
Open the file Car.eoz in the Tutorial Files directory (C:\Program Files\EON Reality\TutorialFiles).
2.
To be able to navigate, you need a prototype called ObjectNavLite. Place it directly under the Scene.
8/10/2019 EON Tutorials
99/169
EON Professional
95
3.
Select the node, called Car Paint_silver (HDR shader), and then open the Simulation window.
8/10/2019 EON Tutorials
100/169
EON Tutorials
96
4.
Press the Paint material button. You are now in Paint modeand everything you click in the simulation
window, at the same time you hold down the Alt-key, will acquire the material that you have selected in
the Simulation tree (Car Paint_Silver).
8/10/2019 EON Tutorials
101/169
EON Professional
97
5.
Hold down the Alt-key and select the body of the car and it should change material.
Note: Remember that EON does not have an Undo button, so if you paint something by mistake you have
to locate and select the old material and repaint that part. Its easily done if you first use the selection tool
and then paint that material to your mistakenly painted object.
8/10/2019 EON Tutorials
102/169
EON Tutorials
98
6.
Make sure the Car Paint_silvernode is selected in the Simulation Tree, then go to the PropertyBar to the
right. Select Car paint1from the Preset drop down menu. This preset selection can load different values
of that specific shader (HDR shader).
7.
The next step is to paint all the white parts black. Since its already a shader for black material in the
scene, we do not need to import it. Just go to Scene/PlainCar/CG Resources/Materials/and select Black
plastic. Press the Paint tool button and open the Simulation window. Start painting all the remaining
white parts.
8/10/2019 EON Tutorials
103/169
EON Professional
99
8/10/2019 EON Tutorials
104/169
EON Tutorials
100
8.
The next step is to import a glass shader. Go to File/Import/CGMaterial and import the file
plain_glass.emt from C:\Program Files\EON Reality\EON Studio\MediaLibrary\Presets.
8/10/2019 EON Tutorials
105/169
EON Professional
101
9.
Select the new shader called Paint Glassunder Scene/Resources/Materials,and press the Paint Tool button.
10.
Open the Simulation and Paint the windows.
Note: Remember to hold down the Alt-key when using the Selection and Paint tools.
8/10/2019 EON Tutorials
106/169
EON Tutorials
102
Change Color of the Car1.
The next step would be to add some interactivity to the car. To change the color, you need a prototype
called MaterialChanger. Place it directly under the Scene in the Simulation Tree.
2.
Right click on the MergedShapenode under Scene/PlainCar/body and select Copy As Link. Paste it under
SendToShapesin the MaterialChanger node.3.
Copy the node Car Paint_Silver and paste it under (same place) Scene/PlainCar/CG Resources/Material in
order to obtain two nodes. Change the name of the new node to Car Paint_Red. Select the node and go to
PropertyBar. Change the following fields: BaseColor: 0.475 0 0, EnvironmentalLevel: 1.5, Glosslevel:
11.2, DiffusseLevel: 15, Reflectivity: 0.91.
4.
Select Car Paint_Silver node and perform Copy As Link. Paste it to the MaterialNoderefsin the
MaterialChangerprototype. Repeat this step with the Car Paint_Rednode.
8/10/2019 EON Tutorials
107/169
EON Professional
103
5.
Open the simulation window. Use the PageUp and PageDown keys on the keyboard to switch between
red and silver color. Create one more color the same way as before and add to the MaterialChanger
prototype.
6. If we add more colors it will be more convenient to have direct interaction for each color. Go to Scene and
drag the KeyBoard nodes 1_Silver and 2_red to the Route window.
7.
Route the nodes as below:
8/10/2019 EON Tutorials
108/169
EON Tutorials
104
Source node Out-field Destination node In-field
1_Silver OnKeyDown MaterialChanger DoNodeRef1
2_Red OnKeyDown MaterialChanger DoNodeRef2
8.
Start the Simulation and use the keys 1 and 2 to change the color. If you desire other keys, just double
click on the keyboard node and change to another trigger key.
Change plate of the car1.
The next step is to replace the existing plate that says Foresterwith a new texture. Open the Simulation
window and rotate the car so that you can see the car plate that says Forester. Press the Texture selection
button and click on the plate in the Simulation window. The texture node called NUMBERshould now
be selected in the Simulation Tree.
2.
Close the Simulation window and go to the PropertyBar for the texture node NUMBER. Click the browse
button and browse for a new texture file called EON_Plate.png(C:\Program Files\EONReality\TutorialFiles).
8/10/2019 EON Tutorials
109/169
EON Professional
105
3.
The Car plates (front and back) should now have been changed to a California plate that displays EON
5.0.
Note: In this case the plate already had texture UV map coordinates. If you don't already have a texture
on an object when you import it to EON, you can create texture UV maps inside EON Studio. Just place a
node called TextureUVMap in the folder of the Material node that also holds the texture. With the
TextureUVMap node, you can change how the texture should appear on the 3D object.
8/10/2019 EON Tutorials
110/169
8/10/2019 EON Tutorials
111/169
EON Professional
107
3.
Open the Simulation window and paint the ground with the new shader.
8/10/2019 EON Tutorials
112/169
EON Tutorials
108
4.
Since the actual texture mapping on the ground shows very large stones of the shader you need to
recreate new Texture UV maps in EON. Place a TextureUVMapnode under the DiffusseTextureUVMap
folder in the ParallaxMappingnode. Change the UVScaleto 0.2, 0.2 (this will change how the texture
appear on the ground).
8/10/2019 EON Tutorials
113/169
EON Professional
109
5.
Select the ParallaxMapping node and go to the PropertyBar. Change the Bumpinessto 0.38.
6.
The simulation window can be open while you change the bumpiness values. See how the edges between
the stones change and makes it appear to be an uneven ground. The mesh and texture is still flat; it just
looks like its "bumpy.
8/10/2019 EON Tutorials
114/169
EON Tutorials
110
7.
Run the Simulation and enjoy the CG visual effects!
8/10/2019 EON Tutorials
115/169
8/10/2019 EON Tutorials
116/169
EON Tutorials
112
3. Press the EON Previewbutton to open the simulation in the EON Viewer.
4. Close the EON Viewer window.
Note: You can rotate with left mouse button, zoom with right and pan with both. In the toolbar are four EON
buttons: EON preview, EON Studio, EON Export and Export Options.
- Will open a preview window and show exactly how it will look when published.
- Opens EON Studio directly, where you can add interactivity, behavior, etc.
- Can batch convert both to .eop and .eoz format.
- Export Options for EON Preview, EON Studio and EON Export.
- Lets you view the EON CAD documentation
8/10/2019 EON Tutorials
117/169
EON Professional
113
- If you're online it will connect you directly to the EON developer site
Change material1. Double click on the yellow part of the Tractor in the EON CAD 3D window.
8/10/2019 EON Tutorials
118/169
EON Tutorials
114
2. Select the Materials tab.
3. Double click on mat3.
8/10/2019 EON Tutorials
119/169
8/10/2019 EON Tutorials
120/169
EON Tutorials
116
5. Select Red from the color palette and click Close.
8/10/2019 EON Tutorials
121/169
EON Professional
117
6. Press the EON Preview window
7. Close the preview window.
8/10/2019 EON Tutorials
122/169
EON Tutorials
118
Add new material1. Right click in the Scene Tree. Select New Material.
2. Designate the new color as Blue. You do this by rightclicking the material and select Rename,
alternatively press F2 on your keyboard.
3. Double click on the Blue material. Change Diffuse to Blue color.
8/10/2019 EON Tutorials
123/169
EON Professional
119
4. Drag the Blue material icon to the Exhaust pipe and it will change to blue color.
MAP and PACK/ Realight ToolThe UV Mapping tools allow you to apply UV mapping coordinates to selected objects to preparethem for further modification. For example, once you have mapped a model, you can then use theRealight tool to simulate global illumination. The realight tool simulates self - shadowing and makesmodels appear more realistic, it is especially useful for rendering models that lack texture, lightingand bump.etc.
1. Select everything but the windshield. (For multiselection press Ctrl while clicking on theobjects. You can aslo uncheck the windshields box, rightclick somewhere in the 3D windowand select Select all )
2. Click the Map and Pack button
3. Go toView/Controls and Toolbars/Realight and select the realigt checkbox. Click the
Realight button
8/10/2019 EON Tutorials
124/169
EON Tutorials
120
4. The Realight tool includes a number of settings that are used render models with ambientocclusion illumination. Change the Outcome to Add new AO light map in the drop downmenu.Then change to Modulate under Map mode and click ok.
8/10/2019 EON Tutorials
125/169
EON Professional
121
8/10/2019 EON Tutorials
126/169
EON Tutorials
122
5. The shadows has now been baked into the tractor
Polygon reduction1. Go to Tools/Options .
8/10/2019 EON Tutorials
127/169
8/10/2019 EON Tutorials
128/169
EON Tutorials
124
4. Press the Processbutton.
8/10/2019 EON Tutorials
129/169
EON Professional
125
5. Drag the slider and reduce the model until it start to lose it shape.
Note: Depending on how close you are going to get to the object in the final application, determines how
much should be reduced. In this case 50% is a reasonable reduction value.
6. Press Apply.
7. Continue to reduce all tires.
Real-Time ReductionSliderDetermines the percentage of polygons to keep. With the slider positioned to the left, no polygon
are kept, and with the slider positioned to the right, all polygons are kept. The Remove%, Keep%, and Keep
Triangles fields are automatically updated as the slider moves.
Remove %The percentage of polygons to remove. The slider and the Keep%, and Keep Triangles fieldsare automatically updated.
Keep %The percentage of polygons to keep. The slider and the Remove%, and Keep Triangles fields are
automatically updated.
Keep TrianglesThe number of polygons to keep. The slider and the Remove %, and Keep% fields are
automatically updated.
10%-100% buttonsSpecifies the percentage of polygons to keep. The slider and the Remove%, Keep%,
and Keep Triangles fields are automatically updated.
StatisticsDisplays the number of meshes that are selected for reduction.
Progress barDisplays the name and progress of each of the reduction process' operations.
8/10/2019 EON Tutorials
130/169
EON Tutorials
126
ProcessPrepares the model for reduction by applying the Polygon Reduction settings and processing the
reduction. Once the processing is complete the Real-time Reduction tools are able to be used.
Note: Once the reduction is processed, you must click Cancel > Settings if you want to modify the settings
again.
SettingsUsed to open the Polygon Reduction Setting dialog to modify the reduction settings.
CancelCloses the dialog if you have not yet processed the reduction or, if not, cancels the current process
to modify the settings again.
ApplyApplies the reduction to the selected objects.
Collapse Hierarchy (merging Wheel and Tire to one object)1. We want to merge the tireand the wheelto one object. Select the left front tire, hold down CTRL button
and select the wheel. Both the wheel and the tire should be highlighted in the scene.
Note: The reason why we do this is to make it easier to program in EON if you, for example, want both
wheel and tire to rotate at the same time.
8/10/2019 EON Tutorials
131/169
EON Professional
127
2. Right click on in the scene and select Tool/Collapse Hierarchy.
3. The two object are now merged and the new object name is Object #64. Change the name to
LeftFrontWheel.
4. Repeat the procedure for the three remaining wheels and rename the LeftBackWheel, RightFrontWheel,
RightBackWheel
Move Pivot Point1. Select the Left front wheel.
8/10/2019 EON Tutorials
132/169
EON Tutorials
128
2. Press the Move pivot point button.
Note: If the Move pivot point buttonis missing from your toolbar, select View > Toolbars > 3D Editor to
display the 3D Editor toolbar.
3. Right now the pivot point is in the middle of the scene. We need to change the pivot to the center of the
wheel, otherwise it will not rotate around its center.
8/10/2019 EON Tutorials
133/169
EON Professional
129
4. The pivot point can be moved manually by selecting one of the arrows and drag until its in correct
position. Its is usually necessary to rotate the object around so that you can see if the pivot point comes to
a correct position.
Note: If you have a symmetrical object like a wheel, it is faster and more correct to use another tool that
will center it automatically to the center of the object.
5. Keep the wheel selected and right click in the scene. Select Tools/Move pivot point to object center.
Note: It is possible to center the pivot point on all four wheels at the same time if you select all wheelsbefore you select Tools/Move pivot point to object center.
Select objectsWhen optimizing 3D objects for real-time applications its important to not show more details than necessary. Using
the Select object tool you can select objects by name, size, polygon count or point count. In this case we are going to
show how to select by size. This means that it will select the smallest objects and when you move the slider to the
right it will select bigger and bigger objects.
1. Press the Select objectbutton .
2. Drag the slider to the right until some of the smallest parts show up in the window. PressClosebutton.
8/10/2019 EON Tutorials
134/169
EON Tutorials
130
3. Right click in the Scene Tree. Here you can choose to either hide, invert or delete the selected objects. In
this case you should not delete or hide any objects.
8/10/2019 EON Tutorials
135/169
EON Professional
131
Remove Internal PartsAnother option to optimize a scene is to use the Hide internal parts option.
1. Press the Remove Internal Partsbutton.
8/10/2019 EON Tutorials
136/169
8/10/2019 EON Tutorials
137/169
EON Professional
133
4. All internal parts (steering wheel) are selected and removed.
8/10/2019 EON Tutorials
138/169
EON Tutorials
134
8/10/2019 EON Tutorials
139/169
EON Professional
135
Note: If you check the steering wheel in the Scene Tree, you can display it again.
Create animationsWe will create two different animations, one for each wheel and one for the whole tractor.
1. Check the Groundin the Scene tree. The ground will be displayed in the 3D window.
2. If you don't have the timeline displayed Click View > Controls and Toolbars>Animation Timeline on the
menu bar to display the timeline.
8/10/2019 EON Tutorials
140/169
EON Tutorials
136
3. Drag the top edge of the timeline upward, so that it is displayed in about 1/3 of the total screen space.
4. Click the Edit keyframeanimation button . The animation controls are displayed within a red box.
6. Open the Animation Options dialog by double-clicking the frame slider on the Animation toolbar.
8/10/2019 EON Tutorials
141/169
EON Professional
137
7. Select Time Display to seconds. Double-click on the first row ("Explode") or press Edit.
8. Change the name to from Explode to Animationand the End time to from 100 to 10 seconds, click OK
8/10/2019 EON Tutorials
142/169
8/10/2019 EON Tutorials
143/169
8/10/2019 EON Tutorials
144/169
EON Tutorials
140
13. Slide the frame slider back and forth between frames 0 and 10, to see the wheel rotate back and forth. As
the wheel rotates you should see the display in the timeline changing. A black point (keyframe) should be
moving downward taking the blue Y axis curve with it.
8/10/2019 EON Tutorials
145/169
EON Professional
141
14. Before you move to a new camera position and start with the animation of the next wheel, make sure to
press the selection tool .
Note: It is possible to animate all four wheels at the same time if you select all wheels before animating
the wheels. To do a multiple selection, hold down Ctrl-button and select the wheels, one at the time.
15. When all wheels are rotating, it is time to create an animation of the tractor it self. Select the
mainassemblyin the Scene tree.
8/10/2019 EON Tutorials
146/169
EON Tutorials
142
16. Press the Translationbutton.
17. Move the slider to 3 secondsand relocate the tractor to a new position. Change to the Rotation tool and
rotate the tractor slightly to the right.
18. Move the slider to 6 secondsand relocate to a new position and rotation.
8/10/2019 EON Tutorials
147/169
EON Professional
143
19. Move the slider to 10 secondsand relocate to a new position and rotation.
20. Drag the slider back and forth and see how the tractor is moving together with the wheels.
Export to EON Studio
1. Click the Export Optionsbutton
2. Check Walk andOptimize objects and uncheck Re-scale to EON units (if Activate animations at
simulation start is active uncheck it so that the animation will not start from beginning).
8/10/2019 EON Tutorials
148/169
EON Tutorials
144
3. Click OK.
4. Click the EON Studiobutton . The file will automatically be converted to eoz format and EON Studio
will open.
Add behaviours in EON Studio1. Click on the + sign of the Sceneand then the Cameraand select the walknode (navigation speed).
Change the maxSpeedto 2in the Property Barto the right.
2. Open the simulation window, by pressing the green arrowin the toolbar, or with the Ctrl-Gkeys.
8/10/2019 EON Tutorials
149/169
EON Professional
145
3. The Walk node lets you navigate in the room by holding down left mouse button and moving the mouse.
Hold down right button and move to go up/down.
4. Close the simulation window.
5. Go to the Component windowto the left and drag the ClickSensornode to the Simulation Tree. Drop
the node below Scene/Objects/mainassembly/Left Back wheel.
6. Drag a Latch to the same place as the click sensor.
8/10/2019 EON Tutorials
150/169
8/10/2019 EON Tutorials
151/169
EON Professional
147
10. Drag the following nodes to the Route view: mainassembly_animation, Left Back wheel_animation,
Right Back wheel_animation, Right Front wheel_animation, Left Front wheel_animation, ClickSensor
and Latch.
11. Click the green arrow on the ClickSensornode in the Route window. Select OnButtonDownTrue. Click
the blue dot on the Latchnode and select Toggle. Connect the rest of the nodes according to the table
below.
Note: The routing will do so that you toggle the animation off/on when you click the wheel.
Source node Out-field Destination node In-field
ClickSensor OnButtonDownTrue Latch Toggle
Latch OnChanged mainassembly_animation Pause
Latch OnChanged Left Back wheel_animation Pause
Latch OnChanged Right Back wheel_animation Pause
Latch OnChanged Right Front wheel_animation Pause
Latch OnChanged Left Front wheel_animation Pause
8/10/2019 EON Tutorials
152/169
EON Tutorials
148
12. Click the green arrow and start the simulation. Click the left back wheel to toggle the animation off/on.
Close the Simulation window.
8/10/2019 EON Tutorials
153/169
EON Professional
149
13. To make the whole tractor clickable, move the clicksensornode from the Left Back wheelnode to the
mainassemblynode. After you dropped the node it will