Now there should be your text somewere around the previous place of the box. But it can be rotated or translated, also experiment with size field of FontStyle node. The only advantage is that the text object is somewhere around the place, where it should be. Of course, do NOT use export of font objects directly from 3DS Max, numbers of faces and vertices would increase catastrophically.

Examples: Box | Replaced text

How to build "navigation web" in the scene

This is very important part of scene design. If navigation works badly or doesn't work at all, the system becomes unusable because the user interface is hidden. First we need to decide, where we can go in the scene and each place should be linked to the others at least in one direction. Connections are built in 3DS Max using standard free cameras.

• At first put the first camera in the scene in 3DS Max and experiment with its FOV - field of visibility (I would recommend to extend default 45 degrees to 60).
• Then move this camera to the first entry-point of the scene.
• Decide, where the paths could split, then you get some virtual plan of nodes and connections between them - I call it "navigation web".
• Now animate camera to the first node (that means turn on the Animate button, set different time and move and/or rotate the camera to its new position. If another path continues from this point, do not use this camera. Set the time to the key where the camera reaches the final position, now Shift-click the camera object and create a copy of it. Edit keys of this copy - delete all but the final position and rotation, then move these final keys to frame 0. Now we got another camera that starts its movement in the place, where has previous stopped. Repeat this task until all paths are created. (remark - it is highly recommended to name every object - you'll probably script them and so CAM-entrance is probably better name than default Camera01.

• Create TouchSensors - buttons, which start the animation. At first place one button (I use blue arrows rotated to the direction of next movement) per one camera somewhere around its start position. Under the panel Create/Dummies/VRML2.0 you can find TouchSensor object - put these objects close to the buttons you have just created - one sensor per one button - and set their properties: First pick the trigger - the button object, then pick the action object - the camera. Keep the sensor enabled. Now is basic animation finished, if you set in the VRML player appropriate viewport and click the button, you should be navigated through the scene. But we still need to improve logic of the scene and by clicking the button we have to also set the viewport as current one.

• Export the scene into the VRML file and load the file into the editor. We must add some ROUTE directives to the file. Each path between two nodes must consist of these nodes: DEF Camera01 Viewpoint {...} DEF Camera01-TIMER TimeSensor { loop FALSE ... } DEF Camera01-POS-INTERP PositionInterpolator {...} DEFButton-ROOT Group {     children [         Shape {...}     DEF TouchSensor01-SENSOR TouchSensor { enabled TRUE }     ] } ROUTE TouchSensor01-SENSOR.touchTime TO Camera01-TIMER.startTime ROUTE Camera01-TIMER.fraction_changed TO Camera01-POS-INTERP.set_fraction ROUTE Camera01-POS-INTERP.value_changed TO Camera01.set_position The example above is a code generated for a camera named Camera01. There is set initial viewport posiotion, TimeSensor (generates timer events for the camera animation), Position and/or Rotation interpolator with large list of key values (is responsible for definition of position of the camera in space and time), button shape grouped with TouchSensor (responsible for sending the start event). Routes link all these elements together. First one sets the start time of timer and activates it, second passes periodic events from timer to interpolator, calculated new position of the camera is then passed to the camera object. We need to hang another route to the first event of the TouchSensor. When one comes to some node, there is still set old viewport. We need to set new viewport, otherwise the viewport would be animated but we would be looking into the scene through different one. Just add this line: ROUTE TouchSensor01-SENSOR.isActive TO Camera01.set_bind Now when the sensor is clicked, it sends one message of boolean type to the camera object and the camera is bound as the current viewport. I still have not explained why it was necessary to create so many cameras. If one doesn't want to split one animated path into more parts, 3DSMax simply exports data for one interpolator from the first to the last key of the object; if we used one camera for more than one path, it would be impossible to stop on the next node. We can also use different process - we can hang more TimeSensor helpers to one object, there we can set start and stop values and this way we split whole animation of the camera to more parts. Some extra work on WRL file may be necessary this way.

Refining the interaction

Now we have created basic navigation, we can refine it a bit. Note that the WRL file is now changed and any export from 3DS Max to this file would overwrite the changes!

• It is not necessary to have all the start buttons visible everytime. We can use LODs to hide them. In 3DS Max there is another VRML helper called LOD. Create it near the button and pick the button. Now click on the line with button's name and set the distance - you can see a blue sphere painted in the scene. If one comes inside the sphere, the button becomes to be visible. Next, pick another object (for instance some box) and set its distance bigger than button's (if only one object exists in LOD's list, the LOD node is not exported because it would be useless). Now export the scene and wiev the WRL file. There should appear LOD node in the text. In children field you should first find the button object grouped together with the TouchSensor, then another node you picked as the second object - delete this object and put Group { } instead. Now copy whole LOD node to the final WRL you got in previous step instead of previos button node. The result is very simple - the button is hidden until user navigates to the node button belong to (or passes by in the near distance).

• Buttons can change their colors when are clicked. To do this, we must add a script node: DEF MyScript Script {    field SFColor ActiveColor 1 0 1 #this is the color object gets after click     eventIn SFBool RecolorIn     eventOut SFColor RecolorOut     url ["javascript:         function RecolorIn()             {RecolorOut=ActiveColor;}         "] } and two new routes (we suppose TouchSensor for this button is DEF-named "TS" and material node (note: not the Shape node!) of the button is DEF-named "ButtonMaterial": ROUTE TS.isActive TO MyScript.RecolorIn ROUTE MyScript.RecolorOut TO ButtonMaterial.diffuseColor When the sensor is clicked, it sends the message to the script and the script generates new event and recolors the button. The script is necessary because of the type conversion - we convert SFBool (boolean value) to SFColor (color RGB representation). One can catch boolean values incoming to RecolorIn function and can change the color of the button only in the moment when the button is actually pressed: field SFColor PassiveColor 0 1 0 #add another field in the header of the node - passive color function RecolorIn(switch) //message sent twice: TRUE-button down, FALSE-button up     {     if (sw==TRUE)         RecolorOut=ActiveColor;     else         RecolorOut=PassiveColor;     } We can also catch event isOver sent by Sensor, the button would recolor, when the mouse was over it. For instance instead of ROUTE with isActive event just write ROUTE TS.isOver TO MyScript.RecolorIn

• Adding periodically moving objects is another quite simple way how to refine the scene. These objects can be lifts, moving stairs and so on. Simply animate the object in 3DS Max and add the TimeSensor from VRML helpers. In sensor's menu check LOOP on check StartOnWorldLoad on, fill-in numbers of the first and the last key of the animation, pick animated object and export the scene. That is all you have to do.
• Synchronising start of animations with periodically moving objects is not so simple, for instance if we need to wait until moment it is possible to get on the lift, we need extra scripts. Every TimeSensor attached to moving object generates lots of events and it is possible to catch them. For instance imagine box moving upside as a floor of an lift and animation, when one gets on it. We need to synchronize start of animation with moment when the floor of the elevator is down. I developed one solution. First we catch an event from TouchSensor and using script bind new viewport and change global boolean field to TRUE. We still have not started any animation. We also catch another event cycleTime sent everytime new loop of TimeSensor, that animates the lift, starts. In this function we test, if user is not waiting (global variable set to true), and in that case we reset the variable and start the animation of the viewport. It means that in the first step there's no movement, perhaps only start button can change its color. In the second step, after sychronisation is reached, is also started animation.

Adding real views of the scene

VRML2 supports technology QuickTime VR (first introduced by Apple Inc.). It is based on a very simple idea: the user is put in the centre of big sphere, from where he can not move to the surface of the sphere. On the sphere there is painted surrounding area and because it is not displayed in stereovision, it is realistic vision of the scene.

The environment rendered by VRML browser consists of up to six unique pictures, which show surrounding scene from front, left, right, back, top and bottom (it is not necessary to define all six pictures, for instance we can define only four side pictures and leave top and bottom unset. These pictures can be generated using special 3D modelling tools or one can create them using special software and snapshot or videocamera.

• Very important is a resolution of the pictures - it should be perhaps at least 400*400 pixels each, otherwise there is not enough information for the rendering available and the scene does not look well.
• Also, the pictures must create perfect box and must continue on edges.
• The pictures can not be distorted, spherical transformations are done by browser!
• It may be necessary to rotate top and bottom images 90 degrees CW or CCW or even 180 degrees, because their orientation is undefined. The pictures are, of course, different, if camera looks down from "front" orientation or "left" orientation. The solution of the problem is very simple, every common 2D pictures editor, such as Adobe Photoshop, has the ability to rotate bitmaps.
• It is possible to link these scenes to anchor nodes present at the correct location in the 3D scene - after clicking user can jump to different VRML file and see real picture of the building. We believe that this combination should help much, because 3D scene creates idea of the movement and real pictures create idea of "where I am".

Examples: Environment 1 | Environment 2 | Cylindrical environment

Adding pictures and texture maps

Important objects should be mapped with textures or at least painted with the different color. Mapping of the surface is done in 3DS Max as normal definition of the object's surface, diffuse map is exported to VRML file. It is also possible to add special partially transparent pictures - it is the only reasonable way how to add flowers or even trees in the scene. For this task we have to have pictures exported in PNG or GIF format with defined transparency. For instance in Adobe Photoshop, transparent colors are set in export plug-in GIF89 export as selected colors of no more than 8-bit palette. In 3DS Max this information is not used for rendering, but in VRML players interpret it correctly. It is also possible to use tiling of the map on an object, so if client computers are powerful, we can snap wall and floor in the building, scan the pictures and map these pictures in the model; because of tiling, these maps can be quite small and then repeated on bigger objects.

Example: Final VRML scene

Index | Previous Topic | Next topic