Quick Start tutorial - sagopramen.se · 2019-09-23 · (C:\Program Files\EON Reality\TutorialFiles). 3. Add search paths to files associated with the main file. These could be texture

$Page 1: Quick Start tutorial - sagopramen.se · 2019-09-23 · (C:\Program Files\EON Reality\TutorialFiles). 3. Add search paths to files associated with the main file. These could be texture$
Quick Start tutorial

Introduction

This 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\EONReality\EONStudio\TutorialFiles).

Note: The user can be directed to correct EON help files for 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 itto the Web.

The following topics are included in the tutorial:

File import

Import an object

Create interactivity

Using Rotate/Zoom/Pan navigation (Object Navigation)

Open/close the lid of the phone

Apply a lightmap to the screen

Swap textures on the screen with a time delay after the lid is opened

Change color on the antenna

Create 2D buttons to control the interactivity in the simulation

Make the lid transparent

Add a nice background image and toggle it on/off

Optimize the performance and the file size of the content

Texture compression

Geometry compression

Publish the content

Publish to the Web using the EON Web Publisher Wizard

File import

Page 1 of 19Quickstart tutorial

2005-12-08mk:@MSITStore:C:\Program%20Files\EON%20Reality\EON%20Studio\Help\Tutorials....

The import procedure

The 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 import procedure. Note: When importing files the original 3D formats are converted to one that is compatible with EON Studio. This is the .eoz format.

Importing a 3D scene

In 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 file Phone.3ds in the TutorialFiles directory and click on Open (C:\Program Files\EON Reality\TutorialFiles).

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 Open in 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.



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



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.



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 Navigation



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).

1. Select the Prototype tab in the lower left corner of the Component window and drag the ObjectNavLITE Prototype to Scene in 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.

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 View button 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 Phone

1. Drag two Place nodes from the Component node window to Scene/Phone/Phone/Phone0/TOP. Rename them to Open and Close (click two times on the node with a slightly delay and type in the new name or press the F2 key).

2. Double-click the Open node (You can also right-click and select Properties). Change the pitch angle in the Open node to 120 degrees, the time to 2 seconds and 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 Close node to 0 degrees and the rest of the values to the same settings as the Open node.



3. Drag a new Latch node and a ClickSensor to the same place as the Place nodes (Scene/Phone/Phone/Phone0/TOP).

4. Drag the ClickSensor, Place and Latch nodes from the Component Node Window to the Route View.

5. Make the following connections in the Routes window:

Note: To make a connection between two nodes, start with left clicking on the green arrow on the first node and select the out-field, move the mouse and left-click the blue dot on the second node and select the in-field and release the mouse button. There should now be a green line connecting the nodes. To delete a link, right-click on thegreen line and select Delete.

Source node Out-field Destination node In-field

ClickSensor OnButtonDownTrue Latch Toggle

Latch OnSet Open (Place node) SetRun

Latch OnClear Close (Place node) SetRun



6. Open the Simulation window and click on the lid to open and close.

Apply a lightmap to the phone screen

1. Drag a new Texture2 node from Component node window to Scene/Resources/Textures and rename it Lightmap.

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.jpg located in the tutorial directory.

3. Go to Scene/ResourcesMaterials/material #6 and expand the LightmapTexture folder. Then go to the Lightmap texture node again, right-click and select Copy as link. Go back to the material #6 node an paste it in the LightmapTexture folder.

4. Select the material #6 node 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.3 is better).

6. Change the LightmapAdd to 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.

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 on

1. Drag a new Switch node from the Component Window to Scene/Phone/Phone/Phone0/TOP/top_even/. The node willswitch between an empty screen and one with an image.

2. Drag two new Frame nodes from the Component Window to the Switch node (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_screen and the second one to screen_on.

3. Drag the DOF node top_even in Scene/Phone/Phone/Phone0/TOP/top_even/ to the empty_screen node

under the Switch node. Duplicate (Copy, Ctrl-C, Paste, Ctrl-V) the top_even node and paste it to screen_on.

Note: The Switch node will swap between the (see image below) two nodes empty_screen and screen_on that will contain different materials (one textured and one with only gray color).

4. Delete the reference to material #6 under 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 link and paste it in the empty Material folder of the top_evenShape node.



6. Drag a new Counter node 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 TimeSensor node from the Component Window to Scene/Phone/Phone/Phone0/TOP/top_even.

9. Double-click on the TimeSensor and set the Stop time to 2 seconds. Uncheck Active 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, Counter and Time sensor node to the Route window.


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 Close node will send an event to Counter node, that sends an event to the Switch node that swaps back to the empty screen again.

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 antenna


a) Open (Place node) OnRunFalse TimeSensor SetRun

b) TimeSensor OnStopPulse Counter Increment

c) Counter Value Switch Value

d) Close (Place node) OnRunTrue Counter Increment



The Prototype Colors will 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 TextBoxButton Prototype 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 TextBoxButton prototype to ChangeColorButton

3. Change the Text field in the Property Bar to "Change antenna color", TBPosition to 0.05 0.9, TBSize to 165 22.

4. Add a Colors Prototype to Scene/Phone/.

5. Add a Latch Node to Scene/Phone/.

6. Drag Color and ChangeColorButton prototypes and the Latch node to the Route view Note: (Shortcut to the Route window is Alt+2).

7. Drag material #4 in Scene/Resources/Materials/ to the Route view.


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 dark blue and white/gray.


ChangeColorButton OnDown Latch Toggle

Latch OnSet Colors DarkBlue

Latch OnClear Colors White

Colors Color material #4 (Material node) Diffuse



Make the lid transparent

1. Add a new TextBoxButton prototype to Scene/Camera.

2. Change name of the TextBoxButton prototype to ChangeTransperancyButton

3. Change the Text field to Transparency, TBPosition to 0.05 0.8, TBSize to 105 22.

4. Add a SmoothOperator prototype to Scene/Phone. Change the State0Value field 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 Latch node to Scene/Phone/

5. Drag the Latch, ChangeTransperancyButton and SmoothOperator and the material #27 node (Scene/Resources/Materials) to the Route view.



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/off

1. Add a Background prototype to the Camera.

2. Add a Latch node to the Camera.

3. Add a KeyboardSensor node to the Camera. Double-click on the node and set the Virtual key name to VK_B.

4. Drag the Background prototype, Latch and KeyboardSensor nodes to the Route view. The Latch node will send True and False values every second time you press the key set in the KeyboardSensor and that will toggle the background image on/off.


Note: In the Background prototype it is also a built-in Latch function so it is possible to skip the Latch node and connect directly from KeyBoardSensor (OnKeyDown) to Background prototype (ToggleImageBG).

6. Open the Simulation window. Toggle (press the B - key on the keyboard) the background between the image with the blue sky and a solid color. The solid color can be changed in the BGColor field in the Property Bar.

7. Select the Background prototype in the Simulation tree. Go to the Property Bar to the right and browse for a new image file (in the tutorial directory) called Paradise.jpg (C:\Program Files\EON Reality\TutorialFiles)

Optimizing the model

Texture compression

To reduce the file size and improve the performance it is important to compress the textures as much as possible, without loosing important information. When reducing the texture in EON Studio it is possible to see the result of the compression in the simulation window and also get an approximation of the compressed texture size. The compression of the texture in EON will be most effective if the original 3D model is textured with textures in PNG format. When compressing texture in EON the texture will be converted to JPEG2000 format (internally) that is usingan extremely effective compression without losing information.

Note: Texture compression will mainly reduce the file size (if you use large uncompressed textures) but can also improve the performance if you have many textures in the simulation.


KeyboardSensor OnKeyDown Latch Toggle

Latch OnChanged Background ShowBG



1. Select Scene/Resources/Texture. In the TextureResourceGroup node it is possible to set the global texture compression for all nodes in that directory. All the textures will get the same compression except for the texture nodes that have individual compression and have UseGroupSettings unchecked.

2. Change Quality level to 30% and set MaxWidth to 256 and MinWidth to 256. If the texture has a lower resolution that 256 X 256 the texture will keep that resolution.

Geometry compression

Geometry 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 web distribution.

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.

2. Make sure all meshes under the MeshResourceGroup have checked the UseGroupSettings field. Set the desired overall compression level using the GeometryCompressionLevel field. 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).



Publish the content to the Internet

The 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 OK if a window appears stating that it needs to be saved before publishing.

4. Click Next when the Web Publisher window comes up.



5. Select the Product Visualization template. Click Next and Continue to click Next until Step 5 of the wizard.

6. Enter a folder to designate where to store the application. For example at C:\EON Demos\Web_Phone.



7. Check Internet as Distribution type.

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 guide for more info about the Web Publisher Wizard.

9. Click Next and then click Finish.

10. The final application should look like this:



9. Open the directory where the files were saved and upload it to the web site.

10. Direct the user to the index.html file and the EON plug-in will be downloaded automatically, if it's not already installed on the computer. The plug-in is about 1MB and is free of charge.



Quick Start tutorial - sagopramen.se · 2019-09-23 · (C:\Program Files\EON Reality\TutorialFiles). 3. Add search paths to files associated with the main file. These could be texture

Documents