A simple, visual mesh editor

Sz. Kiss

May 15, 2001

1

Abstract

The purpose of the work presented is to provide an easy to use tool forthe visual editing of three dimensional objects. These objects are basedon vertices arranged in regular grids, which gives consistency to the modelmesh itself and to the editing tools by providing the base for higher levelmesh manipulation operations. The vertices of such a mesh are forminga conceptual structure of rings and columns with each of the rings havingan equal number of vertices and each of the columns having also an equalnumber of vertices. This approach allows dynamic handling of data, asthe visuals are created from a small amount of actual data, and permits aswell a speed-up of the editing process using the combination of low levelediting with the possibility to select groups of target vertices. As a resultof using a combination of VRML, Java and EAI in the application, theediting process can be viewed instantly, in real-time. The ”engine” thusis a java enabled web browser with a VRML plugin, with client-side meshdata handling.

Keywords: Mesh editor, visual GUI, Virtual Reality, interactivity,VRML, EAI, Java.

2

Contents

1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 Editor appearance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

4 Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

5 Structure of the editor . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

5.1 EAI component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

5.2 VRML component . . . . . . . . . . . . . . . . . . . . . . . . . . 8

5.2.1 VRML ”PROTO” prototypes . . . . . . . . . . . . . . . . 9

5.2.2 Scene graph . . . . . . . . . . . . . . . . . . . . . . . . . . 9

5.2.3 Some conlusions from the structure . . . . . . . . . . . . . 11

5.3 Java component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

5.3.1 Connections to the elements of the VRML component . . 12

5.3.2 File operations . . . . . . . . . . . . . . . . . . . . . . . . 13

5.3.3 Generating VRML code . . . . . . . . . . . . . . . . . . . 14

5.3.4 User actions . . . . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.5 Geometry operations . . . . . . . . . . . . . . . . . . . . . 16

5.3.6 Updating the VRML scene . . . . . . . . . . . . . . . . . 17

5.3.7 Quick conclusions . . . . . . . . . . . . . . . . . . . . . . 17

6 Symmetry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

7 Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

8 Enhancements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

9 Going further . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3

1 Introduction

We present a tool for editing simple meshes, using a mixture of editing ap-proaches. First of all, the editing operations can work on simple vertices of amesh, which means a low-level visual editing approach, but the same editingoperations are valid also on collections of vertices, giving to the editor a higher-level status. Second, additional operations enforce this higher-level approach tomodeling, providing more possibilities to operate on sets of vertices. Anotherobjective is to allow a modeling approach that gives control over the complexityof the edited mesh, as the user sets the number of vertices as needed.

Modeling software and animation software commercially available are usuallyoriented for off-line rendering. Furthermore, such systems tend to be fairlycomplex, thus a steep learning curve is necessary to deal with these products,which is acceptable for a professional user, but not for casual users or computerilliterate users who would aventure into virtual reality just for the sake of build-ing homepages or objects for online communities. If somebody wants to createmodels that are suitable for online rendering, he/she has to be satisfied withmodelers that use pre-built and non-alterable subparts for the models. There-fore, a 3D model editor based on low-level manipulation of the model (namelythe direct manipulation of the model vertices) should bring a solution which istailored more to on-line deployment and real-time visualization.

Since the requirements for the editor were to be able to provide a visual, in-teractive, web enabled environment, it was only natural to use VRML (Vir-tual Reality Modeling Language[1]) as a ”graphics engine”. But that was notenough, as the VRML is a modeling language and not a programming language,and that’s why the EAI (External Authoring Interface[2]), a set of Java classesdefined for binding the VRML environment to the Java programming languagewere used additionally. This allowed to extend the VRML scripting possibilitieswith a Java applet to aid in the mesh handling processes of the editor. The Javaapplet receive events from the environment, and executes the sought operationson the mesh.

2 Background

Most textbooks (see for instance [3]) and modeling systems[4][5] use approachesto modeling that don’t take into account the complexity of the models theycreate. However, there are a few examples that use a more vertex-centeredapproach for representing meshes, for instance [6] presents a H-anim shapebased on contours with the same number of points in each contour (ring).Polygon control is also important in the games industry, where the models haveto be created in the boundaries of a polygon budget.

When it comes to the process of generating and visualizing data dynamically,there are a few examples of papers that use this approach. [7] is storing behaviordata in a database and generating VRML content dynamically, [8] and [5] storeas data control points and generate surfaces automatically.

Everybody knows the meaning of a preview button, and it is known that systemswith an integrated preview (called WYSWYG - What You See is What YouGet) type approach can increase the usability of a system by great length.

4

However, few 3D modeling systems use this approach or solely this approachto visualization.

3 Editor appearance

Figure 1. is a screenshot of the editor in action. The visual elements aregrouped and marked according to their functionality in the editor system, andtheir functions are presented below. The system provides a simple, easy to useinterface for all the operations possible, without any elements that must belooked up from menus or lists. Such systems (see also [9]) could be targeted toa much breader audience, as heir use can be learned quite easily.

Figure 1: Annotated screenshot of the editor

1. Buttons of the Java applet for loading, saving the mesh data and exportingto VRML format. They use the familiar load/save window of the underlayingplatform, provided by the Java AWT classes, and they perform file readingsand writings of the internal format and file writings to VRML file format.

2. Editing buttons in the VRML environment. From left to right and fromtop to bottom in order: add ring and add column (which increase the meshcomplexity), enlarge ring and reduce ring (for the ring-wise scaling of the mesh),enlarge column and reduce column (for the column-wise scaling, which has aglobal scope, affecting the whole mesh) and last the smooth ring button whichis used for smoothing the mesh surface ring-wise.

5

3. Rotation widget (box). On the figure it has been already rotated, and theelements noted with 4. and 6. follow its rotation exactly. Used for positioningthe mesh in a manner that allows to perform the desired selection of verticesand to preview the mesh from different positions.

4. Editing widget. Composited of 6 arrows, with different colour for each pairof arrows that represent the positive and negative direction of the main axes.A click on an arrow will displace the selection in the direction the arrow ispointing by the displacement unit selected using the unit selection widget(nextwidget).

5. Editing unit selection widget. The default value is set to 100 millimeters,this can be changed by dragging the triangle on the left. A wide range of values(from one millimeter to one meter) gives the possibility to handle meshes atdifferent scales, and to perform scale transitions easily.

6. Edited mesh. a) is the current selection, a ring, while b) is a column whichis not yet selected, but the pointing device is over the column sensor, and thecolumn is highlighted as a possible next selection.

4 Data

The editor uses an internal format for the storing of mesh data. This is donefor two reasons. First, there is a data parsing reason, meaning that a simpledata format would allow a more comprehensible parsing method. Second, aninternal format ensures no complications regarding the use of a data file withpossibly non-regular structure. The latter would not be anyway a good idea(to create the mesh elsewhere and import it in the application) as the goal isto use as simple meshes as possible. The definition of the data file is as follows:

Before the first hash mark, everything is comment.

Even the second line

Or the third ...

#segment segment-namerings nr-of-rings \rpoints nr-of-points-in-a-ring \p[Between these brackets, the x y z values of vertices separated by spaces, and

with commas between the different vertices. Rings are separated with new linecharacters.]

This is the composition of a data file. However, users are not required toedit this data manually (it would be a low-level editing intervention), as theapplication provides a visual and also low-level approach to editing. Althoughmanual edit is certainly possible, it is more cumbersome than the possibilitiesoffered by the editor, for instance to select a single vertex, and move it in anyof 6 degrees of freedom even with a displacement unit of one millimeter. Ofcourse, the same operation can be effectuated more globally, on a set of selectedvertices.

6

5 Structure of the editor

We have already mentioned that the editor uses the combination of VRML,Java and EAI technologies to provide it’s functionality. Since these are distincttechnologies, and the EAI component handles all the interaction between theVRML and Java components, it is possible to discuss these components sepa-rately. Taking in account that the communication between the components isa two-way communication, it is best to show it in the flow diagram from figure2. and explain it’s mechanisms step by step.

The VRML component is a VRML file which at the beginning contains no mesh,just an anchor point for the locking of generated mesh geometry (this will beloaded and generated at user request). The file does instead contain beside theanchor point for geometry, a set of ”widgets” that are tools inside the virtualenvironment that aid in the editing process. Depending on their functionality,these widgets act directly upon the virtual environment, or indirectly by sendingtheir events to be handled by the Java applet, which in turn passes modifieddata back to the VRML component. This second component (the Java applet)is used for the data handling necessary for opening, generating, modifying andsaving meshes. The applet is used also for translating into the environment theeffects of user actions effectuated through some of the widget tools.

These two components that work together using EAI are packed in an HTMLfile for presentation in a web browser. As they are side by side in a commonenvironment (that of a web browser), it is possible to use code that is able tomake the communication possible between the Java and VRML components,and this code is the EAI.

5.1 EAI component

This is the simplest component of the structure, it connects the virtual environ-ment and the applet that are inside the same web page. It gives the possibilityfor the Java methods to access the VRML content, and does this by providingJava wrapper objects around the internal VRML browser, nodes and fields.As it can be observed from figure 2. there are a multitude of connections be-tween the VRML and Java components, and yet these are not all. These are infact representing only conceptual connections, and the number of real connec-tions are much higher, since the VRML ”objects” (single nodes, grouped nodesor new prototypes) usually have multiple event sending/receiving possibilities,which has to be used to provide interaction possibilities to the system.

The components of the editor are event-based, they are sending and receivingevents depending on the user interaction with the environment. This means thecode of the editor is not executing sequentially (let’s say as in a C-program)and it is impossible to describe it in a consequent manner. We will start offwith the EAI component which explains the bindings between the other twocomponents, the VRML component and the Java component, and then we willtake a look at the VRML and Java components, in that particular order, toprovide at first the description of the editing environment, and then to explainin detail how the user interaction is achieved through the Java component.

7

Figure 2: Flow graph

5.2 VRML component

The VRML component provides the ”graphics engine” for the editor. It hasthe role of visualizing the mesh and all the user controls in real-time. It allowsthe run-time linking of code into the system, which permits truly dynamicalinteraction to be built that aid in the user-computer interaction.

In the following we will present the elements of the virtual environment oneby one, possibly in a hierarchical structure, this will allow a more accurateview over the component. We start with the VRML prototypes, which arecustom groups of nodes generally used to store reusable code (groups of nodesin this case), then we present the scene graph, how these elements build up theenvironment.

8

5.2.1 VRML ”PROTO” prototypes

The first reusable code segment inside the VRML file is a HUD (Heads UpDisplay) prototype. This prototype is used generally for creating custom displaypanels inside the virtual environment, for instance a custom navigation bar,or a tool-bar. Its purpose is to mirror the effect of user movement on thesepanels, in other words keeping the panel unchanged, in its initial position onthe screen, indifferently how the user navigates in the environment. It is usedgenerally for panels, but that is just a common usage scheme, that is certainlynot a limitation. This particular HUD prototype is more general, it acceptsa subtree of nodes as parameter, practically accepts any type of valid childrennode or node tree. Therefore it can be used for different purposes, as we will seewhen discussing the other elements of the VRML component. The only otherparameter of the HUD is a starting position, which is used for positioning thevisual elements of the virtual environment on the screen.

The second prototype is a geometrical assemble, representing a three-dimensional arrow. Its functionality is related for specifying the DOF (or axis)operations, which will be discussed as the prototype is used in the scenegraph(section 5.2.2). The parameters used for the prototype are color, translationand rotation, these specifying the appearance as well as the starting positionand orientation of the object to be created. The parameters can be choosedto represent the different axes of the three dimensional space, while the arrowpoints to the positive or negative directions of those axes.

The last prototype of the application is a button prototype. The geometry ofthe prototype is very simple, consisting of a small rectangle, on top of which apicture is mapped, picture that explains in text (this is the method currentlyused) the functionality of that particular button. Its main purpose is howeverthe capability to track user actions with a sensor that signals when the user’spointing device (mouse) enters the influence area of the button and when thebutton is actually pressed by the user, and the capability of switching the buttonon/off. The parameters of this prototype are related to appearance (color andtexture) or initial positioning.

5.2.2 Scene graph

After the prototype declaration and the usual general settings code of a VRMLfile, the editing environment is created using the prototypes defined earlier andsome additional nodes. First, an editing ”widget” (or tool) is created. Thisis embedded in a HUD instance, thus user navigation does not affect it, sinceallways stays is in the same position. The widget itself consists of 6 instanti-ations of the arrow widget, sensors attached to all of them, and a script thathandles the events of the sensors. The 6 arrows represent the 6 DOFs of a threedimensional space, the +X, -X, +Y, -Y, +Z, and -Z directions. As a visualaid, X directions are colored red, Y directions green and Z directions blue (as asort of direct mapping between the enumeration of the three dimensional coor-dinates and the enumeration of the three basic RGB color components). Theirpurpose is to collect the user’s displacement commands regarding the selectedmesh vertices. As the user clicks on such an arrow, the sensor attached to thearrow sends a ”clicked” message to the script. Each arrow has this function-ality, and the script, depending on which arrow was clicked and depending on

9

the current displacement unit, will issue a displacement event containing thevalue of displacement. This value is catched by an event listener defined in theJava component, where the data will be processed. The current displacementunit is stored in a variable inside the script, and it’s value can be modified byan another element of the VRML environment. The value of the unit variableis also transmitted to the Java component, as this component is responsible forall the calculations and geometry generation tasks.

The next elements of the virtual environment are seven instantiated buttons.Their functionality is to transmit their activation status to functions from theJava component that will effectuate the actions related to the buttons. Thebutton functionalities are:

• adding a ring. This button triggers a Java function that adds a newring right after the selected ring or after the ring that the selected vertexbelongs to. The order of the rings is defined by the data enumerationorder. This button is not enabled if a column is selected.

• adding a column. Same functionality as above, except that it is effec-tuated on columns. The new column is inserted between the selectedcolumn and the column following it, and the following order is calculatedfrom the data using the right hand rule, with the thumb representing thering data direction and the bent remaining fingers representing the vertexenumeration direction.

• positive scale ring. Selected ring or the ring of the selected vertex isenlarged triggering a Java function that adds the value of the displacementunit vector to the selected vertex values. The button is not active if acolumn is selected.

• negative scale ring. Same as above, only the displacement in this case issubstracted not added. Results in ring shrinking. [Ring scaling introduceschanges in the object thickness.]

• positive scale column. Unlike the ring scale operations that are acting ona subset of mesh vertices (rings), a column scale operation acts on everyvertex of the mesh. A positive scale in this case means that the objectwill become a longer (taller) object, while the thickness does not change.

• negative scale column. Object will become shorter. Scale column oper-ations are ditributed between the mesh rings based on percentages cal-culated from the ring positions relative to the mesh center, this way themesh will retain its original shape.

• smooth ring. The counterpart Java function calculates the relative dis-tances of vertices from the center point of the mesh, and uses a fractionof it to smooth the contour line of the ring vertices. Eventually, withenough activations of the smoothing button, the vertices will approxi-mate the same distance from the center point, as if they were on the samecircle.

Another element embedded in a HUD is a container element, which at startis empty, and is filled by the code generated by the Java component. The

10

container is used only as a linking point, and contains no other functionality.The functionalities will be added at the same time with the generated geometryas the Java component generates the code simultaneously and links it to theVRML container element as one piece of code.

The next item is the rotating widget or tool. The tool is represented as a threedimensional box, which has a rotation sensor linked to it. There is a backdrawto this construction, which lies in the mapping of the two-dimensional inputdevice (the mouse) to three-dimensional manipulation, done by the VRMLviewer implementation (this is a general difficulty, all implementations havethis problem, mapping from 2D to 3D is a shortcoming due to input devicelimitations). However, as the user becomes acquainted with this particularmanipulation possibility, it can provide enough control for editing purposes.The function of this widget is to enable the viewing of the mesh from all anglesand also the favorable positioning of the mesh in the course of the editingprocess. As the user drags the rotating widget, the box itself rotates, and thesame rotation is conveyed to the edited mesh container (and consequently tothe edited mesh itself) and to the editing arrows. This way, not only the meshis positioned, but the axes of the editing arrows and the actual axes of thevertices remain aligned, meaning the arrows point in the direction the verticeswill be deplaced by the arrow actions. The example figures from section 7 arescreenshots of various objects, and it can be observed right away that all are indifferent orientations. From figure 1. it also can be observed that the mesh andarrows are facing/pointing in exact correlation, as both elements are driven bythe same rotational widget.

The last element of the environment is an editing unit selection slider. The userhas the possibility to select the edit unit between the 1 mm, 5 mm, 10 mm, 50mm, 100 mm, 500 mm and 1000 mm values, allowing a wide scale of the meshesto be edited. A triangle is pointing to the current value, represented as a panelwith the enumerated values written on it. By dragging the triangle, these editvalues can be selected. This element consists of a HUD which incorporates thetriangle slider and the values panel and consists of a script that helps mappingthe slider values to editing values corresponding to the values written on thepanel.

5.2.3 Some conlusions from the structure

- Navigation is possible, but it does not affect the appearance of the environmentat all, as all geometry in the environment is embedded in HUDs and it will movetogether with the user, wich causes the illusion of standing still. This howeverdoes not exclude the possibility to view the edited geometry from differentviews, which is bundled to the rotation widget for synchronization and interfacecontinuity purposes.

- Undo operations are not implemented. However, the editing actions are ef-fectuated by clicking on an arrow sensor, and such an action can be undoneby clicking on the arrow pointing in the opposite direction. Furthermore, someof the operations represented by buttons have their symmetric counterparts,and that enables the restoring action to be effectuated (for instance, enlargingaccidentally a ring can be undone by reducing the same ring in the next step).

11

5.3 Java component

The Java component is the part of the editor that essentially does all the workrelated to the interaction that occurs inside the editor. It receives the eventsof the VRML component, effectuates the functions/commands associated withthe particular events and it returns the result in some form to the environment.

Its function is somewhat analogous to the client-server architecture. The editingdata is stored by objects/variables inside the Java component, which could beconsidered as the server. The VRML component (the client) that tracks the useractions, sends data over these actions to the server Java component, which firstcalculates and accomodates the new data in its own data containers, then sendsthe new informations back to the client VRML component for visualization.

5.3.1 Connections to the elements of the VRML component

To have access to the VRML component, the Java component uses code fromthe EAI packages. This way, it can get hold of the objects inside the virtualenvironment. It is not necessary to explain how exactly this has to be accom-plished, a list of connections and their purpose should give enough insight tothe event flow of figure 2.

Note: Not all the connections will be set up when the environment is created.To be able to communicate fully with the VRML component, the dynamic codecreated by the system must also be linked with the Java component. This isdone using the EAI in the same manner as used for the static code of the VRMLcomponent, after each VRML code generating operation.

The purpose of the connections will be explained in more detail when the Javaupdating functions will be described (see 5.3.6). Below is the list of connectionsmade with EAI:

• connection to the browser. Without this connection, the environmentcannot be accessed at all by the Java component.

• connection to the seven editing buttons, to their generated events, andto the active/inactive properties of them. For each of the buttons, thereis a handling function that executes all the necessary calculations andeffectuates the right back-linking steps, updating all the changes in data.

• a mesh node and a coordinate setting event. The mesh node will alwayshold the VRML representation of the edited mesh, and as the coordinatesof the mesh change due to user actions, the coordinate setting event isused to replace the VRML geometry that is visualized in the virtual en-vironment.

• selector setting event. An event that resembles the coordinate settingevent, has the same function, only it acts not on vertices, but on thepositioning fields of boxes that are acting as selectors. As the coordi-nates change, the sensor boxes must also change to provide an accuraterepresentation for the location of mesh vertices.

• a node that contains all the generated VRML code. The VRML code isgenerated when a data file is loaded, or the mesh changes complexity by

12

adding rings or columns. In this latter case, vertices and selectors areadded to the data and the VRML code is regenerated.

• other less important events such as those for removing the generated ge-ometry (before the new geometry is transmitted to the VRML compo-nent), centering the mesh, scaling the mesh (to always provide a com-plete and maximal view of the mesh), or translating the mesh in the rightposition (also for viewing purposes).

• events to transfer vertex selection statuses (a single vertex, a ring of ver-tices or a column of vertices can be selected at a time) for the Java com-ponent to know which vertices are the target vertices at all times.

• events to handle the editing unit selection process, which sets the magni-tude of the editing operations.

• events to handle the rotations generated by the rotation widget. Althoughthe rotation widget has only effect on the VRML environment itself, itis used in the Java component as a trigger for object positioning, as therotation event is the most probable operation a user would perform aftermesh modifications. It is needed as mesh modifications could cause partialocclusions of the edited mesh surface by exiting the viewable area.

The applet starting method (which also executes every time the applet getsfocus, e.g. when te user returns to the applet containing window) contains allthe code that makes the connections possible between the VRML and Javacomponents. Connections are made for all the nodes and events enumeratedabove. To each event there is a serial number assigned, which makes it possiblefor a callback method to identify the source event and dependig on what thisevent’s function is, it handles the event itself, or in case the event is morecomplicated, it triggers the method responsible for handling that particularevent.

Simpler events that are handled within the callback method are related to theselection of vertices. The selection events are of three types, a single vertexselection, a ring of vertices selection and a column of vertices selection event.For instance, if a single vertex is selected, the serial number of the vertex isstored in a variable (previous vertex selections are discarded) and all the editingbuttons of the VRML component are set active. In the case of ring or columnvertices selection, the selection variables are also set, but in this case only apart of the VRML buttons are set active, those effectuating ring operations inthe case of ring vertices selection, and those operating on columns in the caseof column vertices selection. All other events are handled by separate methods.These methods will be described in section 5.3.4, together with the events towhich they respond to.

5.3.2 File operations

The applet is initialized with three buttons. These are Java buttons, and theyare the single Java GUI elements of the editor besides the load/save file dialogwindow. The buttons trigger functionalities related to file operations. These arethe following functionalities: loading a datafile, saving a datafile and converting

13

the data to VRML format. The name of these buttons are ”Load”, ”Save”respectively ”Export to VRML”, suggesting the functions they accomplish.

The first file handling method is the file reading (loading) method. If thedata file is opened succesfully, its content is read in character by characterinto a string variable and a parsing method is called to analyze the data. Theparsing method extracts from the read in file the relevant data, and sets up thedata parameters used by the Java component, like number of rings, number ofcolumns and creates a dynamical parameter depending on the previous values tostore the vertex coordinates (the number of vertex coordinates is seldomly thesame, therefore the variable holding this data is always created dynamically).At the end, the method calls the VRML code generation method describednext, sets up initial values for a number of parameters for data consistency,and calls VRML-Java connection initializing methods for the newly generatedVRML content.

The remaining two file operation methods deal with the storage of the editedmesh: one method for saving the data in the described internal format, and onemethod to export the mesh into VRML format (building a separate VRML filefrom the mesh), ready to be used.

The save method opens a window to specify the desired name and directory ofthe file to be saved, then it constructs the data file format and populates withthe required data, extracting the data from the variables stored in the sameJava component.

The last method, exporting onto VRML format resembles the previous method,only there is extra data to be generated beside the geometry (header, settingsnodes), and the vertex data must be accompanied by facets indexing data,extracted also from data variables stored inside the Java component.

5.3.3 Generating VRML code

The VRML code creation method is the most interesting method of the Javacomponent. It is responsible for creating the mesh geometry, the selection ge-ometry and sensors, the script code that handles the selection process internallyin the VRML component, and the events used for communicating with the Javacomponent. It does all this by creating a single string packed with code, andsending it to the VRML component to be integrated in it. We call this VRMLcode dynamical because it is generated on the fly (multiple times during theediting process, when the mesh changes complexity) and it is modified con-stantly, with every operation commited.

The dynamic code generation process has the following steps:

• Creating the indexes for the mesh geometry. These indexes specify thepolygons of the mesh. Since the indexes are generated automatically andnot stored within the data file, it explains the reason why a regular gridof vertices is used, allowing a logical connection between the vertices,namely every item (cell) of a grid made from the vertices can be coveredalgorithmically by two solid triangle facets.

• Creating an empty vertex coordinate node, that acts as a container forthe vertex data. It is filled after the datafile is parsed (also when the

14

VRML code is re-generated), and modified later as user editing actionsare performed.

• Creating the mesh geometry string itself, an IndexedFaceSet VRML node,instantiating the data from the vertex coordinate container and using thepreviously created triangle indexes.

• The next step is the creation of sensors, handles and a script with func-tions (events) to manage the properties and events of vertex operations.After the script header is declared and stored in a string along with out-going events that transmit selection data back to the Java component,sensors, handlers and script functions will be created for each of the ver-tices from the mesh. To be able to generate all the necessary code for theediting environment with a single pass over the array of vertices, separatestring variables were used to store the generated nodes, fields, functionsand routes which are concatenated after all the necessary code is gener-ated. The cycle executes as follows:

– First, it calculates the sizes of the sensor boxes. The exact calculationmethod is described in section 5.3.5, Geometry operations.

– Next, a box is created with the calculated size, and a touch sensor isassigned to it. The boxes are created 90% transparent, and becomehalf-transparent when the mouse is rolled over. The event receiversfrom the touch sensor are also declared, and their code is producednext.

– The functions that receive the sensor-over and sensor-pressed eventsfrom the sensor boxes manage the appearance of the same sensorboxes. If the pointing device is over a sensor box (e.g. close to avertex) then the box will become half-transparent and if the pointingdevice exits the sensor area, the box will become transparent. Other(previous) selections are not affected, they remain unchanged. If thebox sensor is activated with the input device (mouse click) then thesensor box becomes opaque, other selections will be removed and thevertex assigned to the activated sensor will become the only selection.The script is designed to be able to transmit back to the Java com-ponent information regarding the selection actions after it is placedinto the VRML environment.

Note: to be able to perform ring and column operations, selection of a set ofvertices that construct rings and columns also must be possible. Therefore, ringand column sensors are set up next to the vertex sensors with two iterationsthat go through the vertex data ring-wise respectively columnm-wise, describedin the remaining steps of the dynamic VRML code generation process:

• A ring iteration creates the code that handles the vertex grouping intorings. The code generated contains a line-set geometry, which connectsthe vertices of the ring together, reusing the same coordinates the meshuses. A touch sensor is connected to the line-set, with the same behavioras described in the case of box sensors, with the difference that the line-set sensor triggers also the behaviors of the box sensors assigned to the

15

vertices contained within the line-set, meaning that if a line is selected,the boxes along that line are also selected.

• The column iteration has the same functionality and structure as the ringiteration, only the vertices are grouped based on columns instead of rings.

• The next step consists of generating two general functions, used by allthe sensor functions (there are vertex, line or column sensors). Thesefunctions are executed every time a sensor is activated (clicked) and theirconcern is to remove the previous selections (making the previously se-lected sensors transparent) and to make the new selections visible.

• The last script function generated is the initialization function, which hasthe task that in the case the code is created anew, it ”recalls” the previousselection, and makes the selection also visible with the new code.

5.3.4 User actions

Next, there are the methods that handle the editing actions of the user. Theyare executed as the user activates the buttons described in the VRML compo-nent. Part of them act on the vertex coordinates stored in the Java componentand they send the new data back to the VRML component, while the others givecommands even to recreate the whole dynamic part of the VRML component,as in case of change in complexity.

5.3.5 Geometry operations

To be able to provide an effective manipulation environment, the Java com-ponent has to implement geometry operations that aid in the positioning andediting of the mesh, providing for instance the rotation center of the mesh,sensor box sizes, etc. We will enumerate the geometry operations below.

The most frequently used method is a method witch catches the displacementevent transmitted from the VRML component. In function of the current se-lection, applies the displacement to the data stored in the Java component (thedisplacement can be applied to a single vertex or to a set of vertices) and sendsthat data back to the VRML component. It also sends the same displacementsto the sensor box(es) assigned to the selected vertex or vertices.

The size of a sensor box assigned to a certain vertex depends on the distanceof the vertex from its neighbors. This way, sensors do not overlap, and remainscaled according to the complexity and the size of the edited mesh geometry.Sensor boxes are regenerated when mesh complexity changes, when the wholeediting VRML code is regenerated.

Another method of the Java component is a mesh positioning method. Theimportance of this method lies in providing an interface where the visibilityof the edited mesh is maximal, being entirely visible and without occludingby rotation the other elements of the interface. It scales and translates thegeometry to a convenient position.

The ring adding method inserts a new ring in order after the selected ring (orafter the ring containing the selected vertex), this in case that the selection isnot the last ring, when no action is performed. The data for the new vertices

16

are calculated as the mean values of the vertices from the neighboring rings,and the dimension of the vertex data variable is changed to be able to hold thenew values along the old values. Then, the dynamic code generation method iscalled, with all other methods necessary after such a step: vertex data setting,connections setting with the new code and mesh positioning.

The column addition method is the same, only the inserted vertex data mustbe handled in a different order. The difference between the two methods lies inthe structure of the vertices, and since after the last column comes again thefirst one, there is no restriction in adding a column after the last column likein the case of adding rings.

Smoothing the rings is another method assigned to a VRML button element.If activated, it calculates the center of the current ring (a ring selection orthe ring containing the selected single vertex can be conceived as the currentring) and depending on the distance of vertices from the center and from themean center distance, the vertex values are increased or decreased to achievesmoother surfaces. The new data is transmitted to the VRML component.

The ring scaling method affects the vertices of the current ring. For everyvertex, distances from the center position are calculated in the horizontal (XZ)plane, and the scale value (the current editing unit is used for scaling as well)is distributed to the vertex X and Y values proportional to the previous values,such as the resulting vector from the center point overlaps with the originalvector.

Column scaling is different in functionality from ring scaling. While ring scalingacts locally, only affecting one ring of vertices, column scaling affects all verticesof the mesh. It can be used for enlarging the distance between the ring vertices,thus longer/taller meshes can be obtained. A column centerpoint is calculated(from the current column) and depending on the distances of the current columnvertices from the center point, each ring is displaced proportionally by a certaincalculated fraction of the scale value.

5.3.6 Updating the VRML scene

There are two types of update operations of the VRML scene, as we could seefrom the previous sections. The first one (which is the most time-consumingoperation) consists of generating the whole mesh and editing VRML code, andlinking it to the VRML container node. This method is executed only when adata file is loaded or the structure of the geometry changes (rings or columns areadded to the geometry). The second type of operation is an update operation,that can have as its target the mesh vertices itself, the mesh position or thesensor positions. These last operations are real-time operations.

5.3.7 Quick conclusions

- Some numbers: the simplest mesh (2 by 3 vertices) requires 2*3+2+3=11 sen-sors (box sensors plus ring sensors plus column sensors), each having two sensorfunctions, that is already 22 functions in the generated script code, not countingthe few general functions, and the generated sensor geometry. As the size of thegeometry increases, the number of functions generated increases proportionally.This might seem as too much for a simple mesh, but this complexity influences

17

only the performance of the VRML code creation process, not the performanceof the visualization and editing processes (it takes up more memory, but theextra code executes sequentially, having a minimal inpact on visualization).

- Regular mesh structure is important for the automatic mesh generation pos-sibility, as well as for the ability to map higher level editing possibilities to themesh (ring, column operations).

- The vertices (single or in group) are displaced by sending new coordinatevalues to the coordinate container from the VRML component, without needinganother VRML code generation process.

6 Symmetry

The editor was continuously tested and modified during the developing processto eliminate undesirable effects or enhance its usability. First, the constructionof selection boxes was adapted to abort the production of static boxes in favorof controls scaled to the complexity of meshes, thus eliminating control boxesoverlap, and permitting greater visibility of the mesh. Next, to enhance meshsize control, the editing unit selection widget was developed, allowing precisionsbetween one millimeter and one meter. This allows the editing of objects withdifferent magnitudes, approximately from an apple to an iceberg (but also keepin mind that all of this applies to relatively simple, structured objects).

Another enhancement made is regarding the speed of the editor. As the gener-ated VRML code tends to be lengthy (this appears when a complicated meshis loaded or when mesh complexity is increased and the VRML code is againgenerated), sectioning the code string variables into multiple pieces increasesthe system’s performance. The sectioning of the initial string into three smallerstring variables produced a doubling in the editor’s speed with regard to VRMLcode generating.

After all these enhancements, the system still was missing something in func-tionality. Trying to construct different objects, finally it turned out the missingingredient. Either it was an apple, a vase or a chess figure mesh that wascreated, it had symmetry, which had to be introduced by hand to the mesh,making the user’s task unnecessarely complicated. To eliminate this overheadwith symmetric objects modeling, the system was modified to provide this sym-metric editing functionality. The mesh, according to this approach, is editedonly on one side of the symmetry plane. This method gives even at the firstglance the following advantages:

• Less control points. By using less control points, the size of the generatedVRML code drops also, thus gain in speed can be achieved.

• Using one side of the object for editing, the other side can be used forpreview purposes, as selections are not visible on that side.

• As a preview side is available, the edited side can use a semi-transparentappearance for non-selected controls, giving more comprehensibility tothe mesh structure.

• Finally, if one side follows automatically the changes made to the other

18

side of the mesh, the result will be a perfect symmetry, without the userhaving to worry about this.

For this functionality, changes had to be implemented to the methods from theJava component that are responsible for mesh editing and generating. Thesemethod changes are described next. Overall, the most important changes madeare related to the indexes of vertices. Since the number of control points di-minishes, the cycles that handle the changes run less iterations, but increase incomplexity. They need to handle inside them the editing actions of the selectedvertex or vertices, as well as the editing that must happen at the symmetricvertex or vertices.

An important method that is modified is the VRML code generating method.First, the indexes for the mesh faces are handled separately for the two sym-metric sides, resulting in symmetric facets, even in vertex ordering. Next, thecontrol box sizes are calculated, not using this time the symmetrical data (whichin this case is redundant, the symmetric vertices have the same properties), thusa little gain in execution speed arizes. Control boxes also are reduced in num-ber. They have to connect to the vertices from only one side of the mesh, andeventually to the vertices that are on the symmetry plane. The same is true forcontrol rings and columns, control rings become half rings, and control columnsare not created for symmetric columns. For not created controls, there is noneed for functions that handle their interaction, and the interaction functionshave a more restricted set of actions to perform (for instance, when a ring des-elect operation occurs, the number of controls to be deselected is smaller thanpreviously).

Another change in this method (that has no connection with symmetry) is thedisplacement of control points embedded in the mesh surface to a little bitabove the surface, giving more visibility to the mesh and the controls at thesame time.

The mesh displacement handling method suffers also changes. In the case whena single vertex is selected and displaced, if that vertex has a symmetric coun-terpart, the inverse displacement (relative to the YZ plane) is applied to thecounterpart also, otherwise just the vertex and its control is displaced. In caseof (half) ring selection, the right displacements are applied to the symmetrichalf ring. In case of column selections, if the column has a symmetric column,symmetric changes are applied to both columns, and if there is no symmetriccolumn (column is on the symmetry plane) than only the column is displaced.

The column adding method is also changed. Due to symmetry, the methodin this case asks actually for the adding of two columns, the column that wasasked, and its symmetric counterpart. The method of inserting new vertices isthe same as before, except that double as much vertices are added. The taskof creating the new mesh is passed to the VRML code generating method, thisaspect is not changed.

Contrary to the column adding method, the ring adding method needs nochanges, as the rings used in this case are symmetrical, and the differencesof this approach and the previous non-symmetrical one are resolved by theVRML code generating method.

The ring smoothing method was also modified to reflect conceptual changes.Center point calculations require fewer equations (due to symmetry) and fewer

19

displacements must be calculated, the symmetric ones come automatically. Alsofewer control boxes must be displaced.

Other methods remain unchanged, or bear only little notational changes. Onlythe ring scale method is modified to reflect the new symmetric structure ap-proach, applying calculated changes in symmetry.

The editor in its current state gives a high level of control over a loaded mesh,making possible precise editing, new mesh construction, instant visibility andit is web deployable. However, its functionality and manipulation ease can beimproved with the enhancements described in section 8.

7 Examples

For illustration of the possibilities offered by the system, figure 3. presents a fewexamples of the models created using the system. Textures were not applied tothis objects, to reproduce exactly the output of the system. However, a textureapplying utility inside the system would enhance the appearance of models andthe system’s usability.

8 Enhancements

Here is a list of enhancements that can be introduced to the application. Theseenhancements are mentioned for completeness, and are ordered in no mannerof preference or importance.

• Default (simple) mesh generation as a starting point. The current stageassumes there is a data file that can be loaded. The most simple of mesheswas created by hand, all other meshes relay on that first one. Creatingsuch a simple mesh by hand requires less than five minutes, however astarting mesh generation method would give more confidence and the urgeto try the editor.

• Specifying the number of rings and columns from user input (for reasonsas above).

• Rotation widget is not precise enough, a different representation or mod-ified functionality may function better.

• The editor was developed locally, thus file operations are done also locally.Paths need to be changed to be able to work through the web. No fileextension filtering is performed, this also could be added.

• Crease-angle support for interactively setting the smoothness of the editedmesh.

• The possibility to delete rings and columns from the mesh. This wouldmean extra buttons in the VRML component and their correspondingmethods in the Java component, methods that would have to adjust thestored data (remove a set of vertices from the data set) and call the VRMLcode generating method for the new data set.

20

Figure 3: Example meshes created with the system

9 Going further

The editor in itself provides reduced functionality regarding combined shapes.It is limited to single mesh editing. To be able to edit combined shapes, it needsa wrapper application and a coequal module that takes care of the complexityof combined shapes.

Primarily, the combined shapes that are aimed by further development are theones conforming to the H-anim VRML humanoid proposal[10]. The proposaldescribes a virtual humanoid in terms of joints representing bone connectionsand segments representing body surfaces by building a hierarchy out of thesesegments. Similar approach to human modeling and animation based on seg-ments and bone structure is presented in [11].

In our approach, the mesh editor is capable of handling single segments andthere is clearly a need for a wrapper aplication which allows the selection of sin-gle segments in order for the mesh editor to be able to provide it’s functionality.This way, the mesh editor would be able to modify one by one the appearance of

21

combined, complex shapes that can be used in the virtual environments alreadydeveloped and being developed by our group [12].

But the mesh surface of H-anim models are only a part of the whole model. Insuch a circumstance, the hierarchy of the models would be static, not trivialto change. Thus, a coequal module which would handle the model’s hierarchywould be beneficial to the editor, if not necessary taking in account that theH-anim humanoid proposal gives the possibility to use different sets/levels ofthe same hierarchy.

This module would provide the capacity to handle the joint/segment hierarchies.Operations like adding/removing joints in different circumstances (dependingon the joint type, whether it is terminal or not, has symmetric equivalent, it issymmetric itself) combined with code that handles automaticly the accompany-ing segment data, would provide an efficient tool for hierarchy creation/editing.This module will then allow the creation/editing of arbitrary hierarchies, notonly those that conform to the H-anim standard proposal.

The interface of the ”hierarchy editor” module follows the same principles ofsimplicity and handling ease used in the mesh editing system presented. Therewill be no menus, every tool must be displayed on the screen, the tools must beintuitive and easy to use. The hierarchy itself is displayed as boxes representingjoints and lines representing the connections between joints and also the seg-ments that are attached to joints. The joints are selectable, they are at the baseof the editing operations. Beside the operations permitting complexity changes(adding or removing joints) the possibility of displacing the joints is also al-lowed, to be able to control not only the complexity of the model, but also it’sappearance, by having code that translates the joint displacements to segmentdeformations. This would allow a high level, ”pseudo-appearance” modeling ofthe whole hierarchical mesh.

In conclusion, the purpose of the current work is to provide a virtual environ-ment with integrated modules that are capable of handling hierarchical modelsfor meshes (also H-anim models) on different levels, starting with the hierar-chy editing possibilities, and finishing with the detail editing of the composingsingle meshes.

To provide a more complete functionality for the created/edited models, twomore modules have to be added. One of them would be a texture mappingmodule to visually assign texture coordinates to model vertices, thus providinga fast and accurate texturing tool with instant preview. The other modulewould allow the creation of basic animations (data), which could be used whenthe created complex models have to be animated.

References

[1] Web3D Consortium. VRML97: The Virtual Re-ality Modeling Language. On-line standardhttp://www.web3d.org/technicalinfo/specifications/vrml97/index.htm,1997.

[2] Chris Marrin - Silicon Graphics, Inc. External Authoring Interface Refer-ence. On-line http://www.graphcomp.com/info/specs/eai.html, 1997. Pro-

22

posal for a VRML 2.0 Informative Annex.

[3] George Maestri. Digital Character Animation 2, volume 1 - Essential Tech-niques. New Riders Publishing, 1999.

[4] Yuichiro Goto and Alexander Pasko. Interactive Modeling of ConvolutionSurfaces with an Extendable User Interface. In A. de Sousa and J. C.Torres, editors, EuroGraphics 2000 - Short Presentations, pages 37–42.EuroGraphics, 2000.

[5] Akira Wakita, Makoto Yajima, Tsuyoshi Harada, Hiroshi Toriya, and Hi-roaki Chiyokura. XVL: A Compact And Qualified 3D Representation WithLattice Mesh and Surface for the Internet. In Proceedings of the Web3D-VRML 2000 Fifth Symposium on Virtual Reality Modeling Language, pages45–51. ACM Press, 2000.

[6] Christian Babski and Daniel Thalmann. A Seamless Shape For HANIMCompliant Bodies. In Proceedings of the Fourth International Conferenceon the Virtual Reality Modeling Language and Web 3D Technologies, pages21–28. ACM Press, 1999.

[7] John F. Richardson. VRML Based Behaviour Database Editor. InJ.-C. Heudin, editor, Virtual Worlds - First International Conference,VW’98, volume 1434 of Lecture Notes in Artificial Intelligence, pages 49–62. Springer, 1998.

[8] Holger Grahn, Thomas Volk, and Hans J. Wolters. NURBS in VRML. InProceedings of the Web3D-VRML 2000 Fifth Symposium on Virtual RealityModeling Language, pages 35–43. ACM Press, 2000.

[9] Takeo Igarashi, Satoshi Matsuoka, and Hidehiko Tanaka. Teddy: A Sketch-ing Interface for 3D Freeform Design. In Proceedings of the SIGGRAPH1999 Annual Conference on Computer Graphics, pages 409–416. ACMPress, 1999.

[10] Humanoid Animation Working Group - Web3D Consortium. H-Anim:Specification for a Standard VRML Humanoid, version 1.1. On-line stan-dard proposal http://ece.uwaterloo.ca/ h-anim/spec1.1/index.html, 1999.

[11] Norman I. Badler, Cary B. Phillips, and Bonnie L. Webber. SimulatingHumans: Computer Graphics, Animation, and Control. Oxford UniversityPress, 1993.

[12] Anton Nijholt and Hendri Hondorp. Towards Communicating Agents andAvatars in Virtual Worlds. In A. de Sousa and J. C. Torres, editors, Eu-roGraphics 2000 - Short Presentations, pages 91–95. EuroGraphics, 2000.

23