index home

To download Seamless3d click here
To download latest Seamless Way To VRML Example files click here

Making high quality skin animated creations using a

Minimalist Approach


 

The picture of the face above shows what I have made starting with a single triangle as a demonstration of what can be done when only simple hand editing methods are used and when you don't have good drawing skills. If you are an artists who is good at getting proportions right you could do a lot better i am sure.

By using low-level ways like hand editing triangles as opposed to using advanced shape generating techniques and only using color per vertex we can have great versatility with a minimum amount of functions and concepts. I want to write a tutorial that demonstrates that you don't need to learn and use lots of advanced concepts before you can start developing original worth while quality creations without loosing a sense of being fully in control of the position of each vertex the color of it and how it animates. Something I have learnt over the years in building computers from chips and years of low-level programming is that you can take many short cuts and do what many would otherwise think could only be achieved by those who have been in the business for years and read many books on the subject. Although this tutorial will revolve around a low-level approach there will be no need to do any VRML hand coding in a text editor in order to edit a vertex since this can instead be done with ease using Seamless3D's graphics user interface. This tutorial is aimed to make it non intellectually taxing by keeping everything simple and using the more intuitively straight forward approach of hand editing triangles. Animation requires a little more intellectual effort but by only attempting the basics it should be pretty easy for anyone to quickly feel at home with all the essential concepts and skills to be able to feel no barrier to mastering sophisticated skin animated creations, all this using just a few  functions from Seamless3d. I don't want to give the impression that I am against using the more advanced features in Seamless3d they can save a lot of time and give us the joy of experiencing enlightenment but I really want to stress the point in establishing the security of a rock solid foundation one can always depend on to be versatile enough for anyone to be able to do what they want even if it means they did not take the most efficient path to achieve it. With a stable platform the more advanced features can be learned with time at a pleasant pace without getting caught up in the stress of "must learn lots before any fun can be had". This is my goal in this tutorial!

Some tips when using Seamless3d
If seamless wont open anymore but use to, go to the folder where the Seamless3d.exe file is located and delete the seamless3dSetup.wrl file. If this fails try renaming or deleting the file named untitled.smls. This should force seamless to create a brand new smls file with an introductory sphere.
Scaling the whole seamless shape is best done using the scale field from the Seamless node. Try to avoid using the scale field to scale any of the part nodes because for some reason related to Direct X (that i have yet to fix) the parts color and shading will be displayed horribly wrong if this is done. Scaling a part can be done without leaving side effects if you compile the scale field. This is done by selecting the part and then selecting compileTransform/scale from the main menu. This function will restore scale field back to 1 1 1 (not-scaled) but the part's geometry and the geometry for any descendant parts will remain the same size when it was scaled.
Many of the commands in the cursor/view control sub menu show commands like zoomIn and zoomOut that only work if keys are used because such keys have to be held down or to little would be noticed to be worth making them menu commands as well. They are shown in the menu simply as guides to show the keys.

Crashes and Manual Undo/Redo
There are so many combinations possible in seamless its hard to make it guard against all possible combinations the user may attempt without it crashing. Most functions should work but because you see a function in a menu or window it does not necessarily mean it works in the current version and may always cause a crash for that version. I like to think however that all the functions in this minimalist tutorial are pretty stable all of the time and is one reasons for writing a tutorial like this as it serves as a standard of what should work. If you find any function here unreliable please let me know. Seamless3d II does not have any automatic undo or redo feature yet unless you include the standard windows system undo for text cells (this undo lets you undo only once and only works for text cells) Many who are use to auto undo may think it is essential but you can do undos your self manually by simply going to the folder where you save your file in windows explorer, right click on the smls file (make sure its saved first) and then select copy then right click again near the file where there is no file and select paste. By doing this windows will automatically paste a copy of the file with a unique numbered name making it easy to be able to go back in time knowing which file is which (we can also look at the date of the file). By doing this every so often you have a rock solid undo, one that can even survive power cuts! This is what i use in conjunction with the frequent pressing of Ctrl+S to save everything.

Making a new Seamless file that contains a Seamless node
Move the mouse to the top left corner of the 3d window to open the main menu.

select file/new and save the new smls file as the name you desire.

To see the nodes our new file contains open the scene tree window

Nodes are the building blocks of VRML
The nodes in the scene tree window are represented by icons

In this minimalist tutorial we will be using 5 nodes:

Scene
Seamless
ColorEffect
Part
TimeSensor
OrientationInterpolator

and a Proto (a blueprint for a node)

which always consists of the 3 components:

ProtoDeclare
ProtoInterface
ProtoBody

We will also need one more node, a:

ProtoInstance

so that we get an instance of the proto ( a user defined node created to the form of the proto)

To select a node or a proto component in the scene tree window, click on the node's icon. This will also cause the control panel for the node to open.

The Scene node always exists at the top of the scene tree window though it may be hidden from view if the window is scrolled. The Scene node is the base or root node in the scene tree. This means all nodes in the scene tree will be descendants of this node. When the Scene node is selected (by clicking on it in the scene tree window ) we will see the Scene node's control panel open.
 
 Scene
output

The Scene node's control panel has just one field called output. This button generates a VRML file that will have the same file name as the current .smls file that is open in seamless except it will have a .wrl, .x3d;.x3dz;.x3dv;.x3dvz extension instead of a .smls extension. The generated VRML/X3D file will have any nodes that are not standard VRML/X3D nodes converted to standard VRML/X3D nodes and or nodes specific to Bitmanagement/Blaxxun Contact if this is specified in the Settings window (genContactSBVT checked).

When we create a new smls file by default we have a Seamless  node already added with a  ColorEffect node added to the Seamless node.

The  ColorEffect node will make all the triangles use the color per vertex method, the only method of coloring vertices used in this minimalist tutorial.

Adding Part nodes in the scene tree to make a skeleton of parts
Until we get to animate anything the only node we really need to know much about is the Part node. Part nodes are the nodes that contain the actual triangles.

To add a part node to the Seamless node:

right click on the Seamless node and select paste/skeleton/new/Part

To add a Part node to a Part node:

right click on the Part node and select paste/part/new/Part

To DEFine a node select it (if not already selected) then click it again to the right of the node's icon and then type in the name.
The following example shows the first Part node DEFined as torso and the second  DEFined as l_arm

To delete a node:
    right click on the node and select delete

 

Adding the first triangle to a Part
To add a triangle to a part first select the Part you want the triangle to belong to (which can be done by clicking on the Part in the scene tree window) then from the main menu select paste/new triangle

Wire frame mode (space bar)
When the 3d window is selected (when the 3d windows's title bar is blue) you can toggle between wire frame mode and solid mode by pressing the space bar.

Background color (ctrl+B)
Often it is hard to see dark triangles on a black background or vice versa. To toggle the background color between black and white press Ctrl+B

Dragging a vertex to change the shape
If we click on a vertex (a triangle corner) and drag it we can easily modify the shape of any triangle/s that use this vertex for a corner.


The little yellow sphere you see in wireframe mode shows the location of the selected part but we will get to that later.

Viewing triangles from a different Angle

If we right click and drag on the 3d scene we can view our work from any orientation. This allows us to be able to drag a vertex to any location in 3d space.

Viewing triangles from a different Position

Use the keys from the num pad

Viewing triangles from a different orientation using keyboard
Pressing the key Esc is very useful for resetting the view orientation translation and zoom.
Pressing the key , (comma) is very useful for resetting only the orientation in the view

Pressing Esc or the , key and then using the number keys above the alpha keys is good for viewing work from clean precise angles (I do this a lot to see the sides and back of my work)


Zooming In and Zooming Out

press the key that has + sign on it (can be from the num pad) to zoom in
press the key that has - sign on it (can be from the num pad) to zoom out

Hiding Parts

Often triangles from other parts make it hard to edit the triangles in the part we want to work on. When this is the case parts can be hidden in the 3d window by left clicking on the Part node's icon in the scene tree window. The scene tree window shows a hidden part by showing the icon as a dash as shown in the following example for the part DEFined as torso.

 clicking on the dash will return the node back to it's visible status

Vertex and Triangle Selection using Mouse and W, E, F7 and F8 keys

When ever we click on a vertex successfully we will see the little red sphere or dot lock onto the vertex. This means its the "selected vertex". When ever a vertex is selected a triangle is selected as well. The red, green and blue dots show which triangle is selected.

We can usually select any vertex by clicking on it but often this is not so straightforward when a vertex is very close to another also we may need to select a different triangle to the one that gets selected. To get around these problems we can use the keys W, E, F7 and F8

Suppose we have the following triangle selected


If we press E this will cause the next triangle that shares the selected vertex to be selected.

and if we press E again this will cause the next triangle that shares the selected vertex to be selected.

If we press F8 we will select the next vertex in the selected triangle

and if we press F8 again we will select the next vertex in the selected triangle

Using the keyboard to move the selected vertex
I have found sometimes its easier to move a vertex using the keyboard instead of the mouse when doing detailed work on vertices that are close to each other and when you only want to move a vertex a precise small amount. Also when using the keyboard we have the possibility of being able to move a vertex in the z dimension when looking straight into the z dimension.

To move the selected vertex Press Ctrl and one of the following keys from the numb pad

To change how much the keyboard moves a vertex at a time select settings from the main menu

and change the value to the amount you want in the incDecRes field


 

Using the mouse to select a vertex without changing the position of the vertex

Hold down the ctrl key before clicking on a vertex. While ctrl is down the mouse is unable to drag a vertex but ctrl does not prevent the vertex from being selected when it is clicked on.

Adding more Triangles

We can split any triangle selected by pressing the key S. The split will be made between the red and green dots in the selected triangle.

Triangle Before Split

Split Triangle (Key S)

Another way of creating a triangle is to use  the mirrorTriangle function. To do this press the key M. This will cause a new triangle to be made that joins the selected triangle. The new triangle will be created sharing vertices with the corners marked by the red and green dots.

Triangle Before Mirror function

Mirrored Triangle (Key M)

Changing the triangle Divide of Two Triangles (D)
This function though we could get by without using it I use it so often when hand editing I decided to add it to the minimalist list of functions.
Often we have two triangles divided like this

 when we would rather them be divided like this

To swap the triangle divide first select one of the triangles, press R then select the other triangle and press D

Forcing a vertex to Mirror a Vertex (F)
We can get by without ever useing this function but its simple to understand and can save a lot of time.
Often when making a model we want it to be symmetrical, we want the left vertices to be in the same positions as the right except in mirrored form. This can be done using the function move mirrorX
In the following example we see a triangle whose left vertex is not the same as the vertex to the right.

To make the left vertex mirror the right select the left vertex, press R and then select the right vertex and press F

After move vertex to mirrorX function (key F)

Centering a Vertex in the X Dimension (Alt+X)
We can get by without ever useing this function but its simple to understand and can save a lot of time.
This function simply causes any selected vertex to go to the center in the x dimension (in the middle of left and right)  This function is useful for when making symmetrical models when we want to make vertices that are meant to be exactly in the middle exactly that.

before selected vertex not in middle

after zero x function (Alt+X)

Delete a single Triangle
Select the triangle then press Delete

Joining a Vertex to another Vertex (J)
Select the vertex whose position (coord value) and color you wish to keep and then press R to copy it, then select the other vertex and press J to paste in the coord and color value. For more options in joining vertices see Breaking and Joining Vertices.

Break a Vertex away from another Vertex (B)
Select the triangle and the vertex you want to break away and press B

Changing the Color of a Vertex
To change the color of the selected vertex press down control and one of the 6 decrement/increment keys from the keyboard

       [ ]
      ; '
     . /

to save time we can copy a vertex by pressing R (or Ctrl+C) and paste the color of this vertex into another vertex by pressing C

Finding triangles to thin or small to see (Alt+F)
The findThinTriangle function might not seem like a function you would have in a minimalist list of essential functions but I think it is one because making triangles to hard to see by mistake can cause annoying problems and is something that can easily happen when triangle structures get complex. Triangles to thin to be considered triangles don't generate normals properly and so you end up with points in your model that don't look how they should (to dark or to bright). To find a thin triangle in all the part's that belong to a seamless node first select the seamless node or one of the parts that belongs to it and then press the short cut keys Alt+F. If there is a triangle that owns 2 vertices that are close to each other within the range of about 1 mm this triangle will get selected. When such triangles are selected you may only be able to see 2 of the 3 colored dots at one time but you can reveal all 3 by pressing F8 to rotate the dots round the corners. When a thin triangle is found you can either tug it's vertices to make the triangle wider or delete it.

Changing which part owns a vertex (Alt+o)

Changing the ownership of a vertex wont make any noticeable changes to the vertex or the whole shape when not animated but changing a vertex to be owned by a different part will logically affect how the vertex gets animated. To be able to see which Part a vertex belongs to select the vertex in question and look at the blue title bar in the 3d window. The name seen here shows which part the selected vertex belongs to. To paste in the ownership from a part into a vertex first right click on the part you want to be the owner in the scene tree window and select copy then click on any vertex you want to be owned by the copied part and select Alt+o the short cut keys for paste ownership. You do not have to copy the owner before each time you press Alt+o Only once for the first vertex does this have to be done. So like this it is relatively fast to change a number of vertices ownership one at a time. Pasting the ownership might seem a bit strange to grasp at first but the concept is like pasting the color of a vertex into another except we are pasting the ownership of the vertex instead of it's color.

Changing the location of a part for animation

To change the location of a part ( which is logically the same as changing the location of a part's joint or hinge) change the value in the Part's translation field. In wireframe mode the little yellow sphere shows the location point of the part. When a part is rotated during animation it will rotate around this point. Pressing Alt+0 will move the view so that we see the part's location point in the center of the 3d window.
(feature soon to be added) Clicking on the yellow dot and dragging it changes the location of the part.
(feature soon to be added) Right Clicking on the yellow dot and dragging it changes the orientation of the part.

TimeSensor and OrientationInterpolator nodes

The best way to learn how to use the TimeSensor node and OrientationInterpolator node is to play about with the following simple example we will make;
First set up the scene tree with a part DEFined as triangle (or what ever name you like)

and paste in a triangle to the part

so that we see a triangle in the 3d window.

then....
select the Scene node, right click and select paste/children/new/TimeSensor

DEFine the TimeSensor as timeSensor or any name you like

Right click on the TimeSensor node and select paste/sibling below/new/OrientationInterpolator

DEFine the OrientationInterpolator as orientationInterpolator or any name you like.

Now we have the 2 nodes for animation added we need to wire up the signals so that the time sensor node sends it's timing to the OrientationInterpolator and in turn the OrientationInterpolator node sends it's rotation values to the Part node
We will start by first adding the ROUTE from the OrientationInterpolator to the Part
To do this we must first right click on the destination node for the ROUTE and copy it

so that seamless will remember this node so that when we now right click on the OrientationInterpolator in the scene tree window


we can select paste/value_changed/TO triangle/rotation
for the destination of the ROUTE

Now that our ROUTE is added we should see the ROUTE displayed in the OrientionInterpolator's control panel at the bottom of the window:

this line specifies that a ROUTE exists from the field named value_changed to the field named rotation owned by the Part DEFined as triangle.

We must also add a ROUTE from the TimeSensor to the OrientationInterpolator.
To Do this:
copy the destination node (the OrientationInterpolator) for our ROUTE

right click on the TimeSensor node and select paste/fraction_changed/TO orientationInterpolator/set_fraction


We should now see the ROUTE from the TimeSensor to the OrientationInterpolator completing all the routes we need for this simple animation.

Check ( make TRUE) the loop field so that the TimeSensor will continuously send timing signals out via the ROUTE.

Our TimeSensor node is now powering away but our triangle is still because we have not added any values to the OrientationInterpolator.
To add 2 values to the OrientationInterpolator click on the count up button twice so that we see count = 2

the part node is now receiving rotation values from the OrientationInterpolator but we see no movement yet because the rotation values being sent out via the ROUTE are all 0 1 0 0
If we now click and hold down on the last button owned by the field keyValue (the z axis button for the keyValue field)

we should see our triangle animate from the first rotation value (the value at index 0) to the last rotation value (the value at index 1) and then jump back to the first value repeating the cycle endlessly. To make it animate smoothly back to the first value the rule is you must have the last value = the first. We can do this by simply clicking on the up count button  to add one more value of 0 1 0 0 (making count = 3)

When we add extra values using the count button seamless automatically works out the values for the key field. The key values can be altered manually but if you don't know what you are doing and want to keep everything minimalist leave the key values alone and only play with the keyValue values.
We can add as many rotation values as we like by clicking on the count up button.
The TimeSensor node's field cycleInterval specifies the time in seconds how long it takes the OrientationInterpolator to complete the cycle of sending out the sequence or rotation values.

Removing Routes
Normally we don't disable routes by removing them but if we find the need to delete a route this can easily be done by right clicking on the route displayed in the node's control panel and then selecting delete this ROUTE.

Tugging vertices after they have animated
If we want to now work on our triangle and drag a vertex we must turn off the TimeSensor node
This can be done by un-checking the loop field or un-checking the enabled field.
Because when the OrientationInterpolator was active it sent it's rotation values via the route to the Part's rotation field, the Part's rotation field will be left with values it received at the point in time we disable the TimeSensor. To reset the Part rotation fields back to values of 0 1 0 0 (no rotation) for all the Seamless and Part nodes press Alt+R or select resetRotations from the main menu

Making an avatar with triggered gestures.
To make our triangle only animate from a gesture when used in Blaxxun multi-user mode we must wrap all our nodes into a single Proto.
This is best done by first saving our current work and then loading a Proto from a file already set up with the gesture fields set up for a multi user blaxxun avatar.
So after first saving our avatar from the main menu select open

and select the file AvatarProto.smls (from the seamlessWayExamples.zip) and open it

we should now see the empty AvatarProto and an instance of it in the scene tree window already named Avatar for us.
So that we don't corrupt the file we just loaded:
open the main menu select file/saveAs

save the file with a brand new name for your avatar
then go to the scene tree and right click on the ProtoBody in the scene tree window and select paste/children/import/nodes from file

in the Open a file dialogue box change the Files of type drop down menu to seamless files (*.smls) and select our minimalists avatar the same file we just saved a short time ago

After importing our minimalist avatar back we have our nodes (and routes) wrapped inside the Avatar Proto where we want them for an av.

To make it so that the TimeSensor is triggered by a gesture select the TimeSensor node in the scene tree window and then in the control panel uncheck the loop field so that the TimeSensor will start an animation sequence only when it is triggered by a gesture. To select a gesture right click on the name for the field startTime and select IS/gesture1

We will now see the startTime field displayed as:

which shows it is now connected to the ProtoInterface field gesture1

Because all nodes for an avatar should be inside the ProtoBody, from now on when we add more TimeSensor and OrientationInterpolator nodes, instead of adding them to the Scene node we should add them to the ProtoBody
this is done by right clicking on the ProtoBody's icon and selecting paste/children/new/ and the node you desire

Setting the position of the eyes
In a Blaxxun multi-user environment avatars should be set to have the eyes located at 0 meters in height.
To be able to see where a model is centered in relation to the world we will import a model of a cross hair.
To do this:

right click on the Scene node and select paste/children/import/nodes from file
In the Open a file dialogue box change the Files of type drop down menu to seamless files (.smls)
select the crosshairs.smls file and click open

now we should see a crosshairs object marking the center of the scene.

To get the eye at centre in height change the translation field for the root Part node (in this case our only Part) by clicking down on the translation field's middle button (the Y dimension button ) until we see our avs eyes at center.

If our av has more than one part we should always change the translation field that belongs to the first Part at the top in the scene tree (the root Part) to change the position of the whole av.

After getting the eyes centered right click on the Seamless node named crosshairs and select delete to get rid of the corsshairs object now we no longer need it.

Outputing the avatar as a wrl
Now if we select the scene node and press the output button we have an animated avatar triggered by a gesture.
This av may be pretty simple but if we can make this av knowing that vertices are animated in accordance to which part they belong to and that the position of the joint is determined by the rotation field there is no barrier preventing us from making very detailed sophisticated animated seamless avs and all done without the need of a text editor!

Viewing the gestures in single user mode
If we want to view our gestures open the file showGesture.wrl in a text editor and change the file name (shown in red) in the following line of text:
["myAvatar.wrl#Avatar" ]
to the name of our avatar
now if we open the showGesture.wrl in a VRML viewer we can view our animations by clicking on the gesture buttons.


index home
 
 
 
  

Copyright © 2000-2004 Graham Perrett gperrett@tpg.com.au