A novel approach in converting SVG architectural data to X3D worlds

A novel approach in converting SVG architectural data to X3D worlds K. Kapetanakis 1, P. Spala 2, P. Sympa 3, G. Mamakis 4 and A. G. Malamos 5 1 Department of Applied Informatics and Multimedia, Technological Educational Institute of Crete, Heraklion, Greece, e-mail: epp1932@epp.teicrete.gr 2 Department of Applied Informatics and Multimedia, Technological Educational Institute of Crete, Heraklion, Greece, e-mail: pspala@epp.teicrete.gr 3 Department of Applied Informatics and Multimedia, Technological Educational Institute of Crete, Heraklion, Greece, Faculty of Advanced Technology Unversity of Glamorgan, Wales, e-mail: esympa@teicrete.gr 4 Department of Applied Informatics and Multimedia, Technological Educational Institute of Crete, Heraklion, Greece, Faculty of Advanced Technology Unversity of Glamorgan, Wales, e-mail: gmamakis@epp.teicrete.gr 5 Department of Applied Informatics and Multimedia, Technological Educational Institute of Crete, Heraklion, Greece, e-mail: amalamos@epp.teicrete.gr Abstract This paper presents a new conversion mechanism utilizing 2D and 3D web-oriented technologies, for the production of real-time decoration instances. This approach is based on the CAD-friendly SVG format and employs the XML-file format for both 2D and 3D representations, which is ideal for rich Internet applications with X3D visually rendered scenes. The application based on this approach generates a three-dimensional X3D visual representation of a 2D room plan stored as SVG, after considering ontological metadata provided and appropriately converting between the two-dimensional and three-dimensional coordinate systems. Therefore, this application method combines all the advantages of a 2D environment facilitating in simplifying the design process and maintaining the correct design proportions in conjunction with a visually enhanced interactive 3D representation environment. The advantage of our approach is that is exclusively employs XML-based Internet friendly technologies. Thus, it can be effectively utilized for service oriented CAD applications.

Keywords Web3D, SVG, X3D, SVG to X3D conversion 1. Introduction A vast range of technologies has been developed for the representation of images, followed by other similar technologies developed to reduce the size of such images facilitating in the production of internet friendly applications. The evolution of cross-platform Web applications has led to the use of XML-encoded textual files providing an ideal lightweight file format. SVG (Scalable Vector Graphics) is an XML-based open standard that provides the necessary tools for the development of open source 2D-graphics. SVG is a W3C recommendation [W3C 2001] that can be integrated with other standards such as DOM and XSL. A number of developing and authoring tools have been developed in order to assist in the creation of SVG compliant graphics, which can be easily implemented by users to produce an SVG image, based on their custom needs. For instance, SVG development tools can be used to produce an architectural plan of a building where the corresponding result contains all the advantages of the SVG standard. Meanwhile, user interactivity and animation characteristics can be integrated in the SVG representation file through Javascript. With the use of XML-encoded representation files the authors are able to produce accurate graphic results by describing vectors in XML tags that contain detailed characteristics in their attributes. SVG graphics can be easily resized or zoomed without any quality loss, transferred in the same manner as any other text files (compressed, encoded etc). SVG utilizes text annotations on the images represented thus providing additional functionality. Internet Search Engines and end-users can search and select such text annotations to retrieve similar content based on each individual users needs. X3D is an open standard, as developed by the Web3D Consortium [Web3D 2004], for developing 3D graphic representations in an XML-encoded file format, ideal for internet use. This Open Standard is considered to be the descendent of VRML and is commonly used to develop applications and games in 3D environments with additional user interaction. X3D supports real-time communication and integration with web-service architectures, distributed networks, cross-platform applications, inter-application file and data transfer. It supports the development of additional 3D components for a variety of applications with the ability to be displayed on any type of device, from mobile phones to computers. 3D environments built with this technology can support high-quality graphics, real-time interaction and audio-video sequences as 3D data. X3D browser plug-ins can be easily installed on any web browser to render X3D files and X3D browsers can also be found as standalone applications. Sets of additional functionalities can be provided, depending on the type of application being developed, through modules known as profiles. The conversion of 2D to 3D in the area of architectural plans is a topic of great interest, especially in the CAD community, with many proposed implementations using mainly CAD platforms [Wang et al, 2002][Lu et al, 2005][Yan et al, 2006][So et al, 1998][Fahiem et al, 2009][Sommaruga et al., 2007][Meyer et al., 2006]. The main advantage of our approach is

that is exclusively employs Internet technology. Thus, it can be effectively utilized under the forthcoming Service Oriented perspective. The rest of this paper is structured as follows. In Section 2 we analyze the transformation method between the SVG and X3D coordinate systems and literally present the conversion of each respective SVG element to the equivalent X3D model. In Section 3 we provide an illustrative example of the conversion process through a demonstrative room plan. In Section 4, we conclude our work providing a brief description of future application potentials. 2. Converting two-dimensional sketch designs to three-dimensional model designs The conversion of SVG files to X3D is more than merely translating XML tags and transferring values between attributes. We had to overcome a number of problems regarding the differences between the two-dimensional and three-dimensional coordinate systems. 2.1. The coordinate system transformations The SVG format uses two dimensions, x which corresponds to width and y which corresponds to height which are the same as the coordinate system of the computer screen, with the up left corner as the point O (0,0) and the positive values ranging from left to right of the screen in ascending order. On the other hand, X3D uses the y axis for height, z for depth and x for width, as shown in the image below. X3D uses meters in the virtual word whereas SVG uses pixels. In addition, SVG uses degrees whereas X3D uses radians, so the mathematic formula used for this conversion is 1 degree = /180 radians and 1 radian = 180/ degrees. Due to the difference in the measuring systems, we had to recalculate the values during the SVG conversion process. (a) SVG coordinate system (b) X3D coordinate system Figure 1 Coordinate Systems In this application some basic shapes like circles, lines, curves, text were required and we used the equivalent nodes from X3D to convert each object. In the SVG file, the rotation of an object is represented as an attribute in the appropriate tag, named as rotation and holds the value of the degrees of the angle between the object and the x

axis. In X3D, the rotation attribute is defined by 4 values, rotation(x,y,z,θ). The first three floating point values represent a normalized axis of rotation and the last value is the corresponding rotation angle in radians. Depending on the type of the model (wall, floor, ceiling) and the transform tag which is assigned to the sensor dynamically, we calculate the rotation axis to be horizontal or vertical to the object. Figure 2 vector AB in SVG For example, in order to convert the vector depicted above, we calculate the rotation value from the data provided in the SVG file. It contains x1, y1, x2, y2 values for each vector. If the vector is rotated according to a new given coordinate system (grouping tag) the extra rotation value is given in degrees in this formula: rotation= θ. For the X3D file we have to calculate the width of the line first and use it as width for a box, by adding the value to scale it on the z axis, whereas the wall height is provided from SVG s metadata and the width value is calculated from the line s attribute in SVG named as stroke-width. The Boxes color is chosen from the SVG field named as stroke, which is covered from the chosen items texture. Next, we calculate the angle between the vector and the x axis subtracted by ( /2) because the zero degrees in SVG correspond to when the line is horizontal to the screen in contrast with X3D where it refers to the line when vertical. So the formula used to calculate the angle is 1 y2 y1 π θ = tan ( ) + θ 2 x2 x1 2, where θ 2 represents the degrees set from an external grouping tag. In conclusion, these techniques were applied in order to overcome the coordination problem and calculate the exact position of the objects in the 3D world. The outcome of the conversion is accurate and efficient, making the application ideal for architectural plans and engineering design. 2.2. Conversion of respective SVG elements to X3D objects Each SVG element has a unique equivalent representation in X3D. The following table illustrates the basic SVG elements available.

1 line Line element given x1, x2, y1, y2, color, fillstroke,markers, Graphics. 2 rect Rectangle with attributes x, y, width, height, color, fillstroke, Graphics. 3 circle Circle element with cx, cy, r, color, fillstroke, Graphics. 4 ellipse Ellipse element with cx, cy, rx, ry, color, fillstroke, Graphics. 5 polygon Polygon element given points of the polygon (even number) and fill rule. 6 polyline A polyline according to the points given in attributes. 7 path Similar to polyline but not closed shape. 8 text A written text given the coordinates and the style. Table 1 Basic SVG Elements On the other hand, in X3D the most common nodes available are: 1 Box a box with size and solid attributes 2 Cone A 3D cone, with or without the bottom side, radius, height, side, solid 3 Cylinder A cylinder with or without bottom or top, height, radius, side, solid

4 Sphere A 3D sphere, radius, solid 5 IndexedFaceSet A free formed shape setting coordinates to make a 3D shape Table 2 X3D 3D Geometry nodes 1 Arc2D Simple arc line (open) 2 ArcClose2D Simple 2D closed arc 3 Circle2D A simple 2D circle 4 Disk2D 2D disk filled with chosen color 5 Polyline2D 2D line from point to point 6 Polypoint2D 2D points at given coordinates 7 Rectangle2D A 2D rectangle shape at given coordinates 8 Triangle2D 2D triangles at given coordinates 9 Text Text node String Table 3 X3D 2D Geometry nodes

The 2D line element in SVG is assigned to the Box node in X3D, which is ideal for a wall building in interior design, where the height is preset from corresponding metadata and elements like color, position, width, length and rotation are calculated using the formulas described in Section 2.1. Figure 3 Conversion of an SVG line element to an X3D Box node The rect element which draws a 2D rectangle in SVG documents is assigned to one Rectangle2D and 4 boxes as walls on the rectangles edges. The height of the walls is also set from metadata in the same way as any other walls. Figure 4 Conversion of an SVG rect element to an X3D Rectangle2D and Box nodes The Circle element is assigned to a cylinder in X3D with the same height as the walls, and the upper side is drawn only when that cylindrical piece is used as a room. If it is just a colon, the upper side is drawn closed and objects are disallowed to be placed inside.

(a) Conversion to an X3D Cylindrical Room (b) Conversion to an X3D Room Colon with enclosed sides Figure 5 Conversion of an SVG Circle element to an X3D Cylinder node The SVG Text element is used in the same manner in both formats; the only difference is the third dimension which is chosen as the default wall height value read from SVG s metadata and placed in the X3D scene. Figure 6 SVG and X3D Text element Representations The Path element is used in SVG to draw a 2D curved line. Since no equivalent or similar node in X3D for drawing curved 3D lines exists given the coordinates, the IndexedFaceSet node from X3D which is a free-form 3D object is used to replace the 2D curve. Figure 7 Conversion of an SVG 2D curve to an X3D IndexedFaceSet 3D Arc The following table summarizes the basic elements assigned between the SVG and X3D formats.

SVG X3D Line Box Rectangle Rectangle2D & 4 x Box Circle Cylinder Path IndexedFaceSet Text Text 15 pixels 1 meter Table 4 SVG to X3D element assignment Objects such as windows, doors and interior furniture items cannot be converted by calculating data from lines and curves from the shapes symbolized in the architectural ontology. Therefore, we implement external metadata to merge such objects with the 3D worlds and calculate their placement position and orientation. The necessary textures are chosen according to the specific metadata. Wall floor ceiling objects. Metadata may be attached to SVG either as an external X3D file or as an embedded element. Since there is no state of the art meta structure proposed in the literature, any XML based scheme may be considered as a potential candidate. In our implementation we used a simplified version of the DEC-O ontology we have proposed in [Malamos et al, 2009]. 3. Illustrative example A complete X3D conversion example of an SVG room plan follows. The SVG design of the 2D room layout consists of a living room with several windows, a door and an interior wall extended by some decorative colons. The room also consists of a number of furniture items, such as the armchair and TV set, and interior decorations such as curtains and plants. The following figure depicts the SVG ground view room plan representation.

Figure 8 SVG 2D Living Room Top View Plan with furniture items The application then converts the SVG room plan and produces the equivalent scaled X3D scene with the correct 3D coordinate system. Figure 9 shows the equivalent X3D Ground View room plan scene that was produced based on the previously depicted SVG design. Figure 9 Corresponding converted X3D 3D Top View of the scene Figure 10 shows the X3D room plan scene from an interior side viewpoint with the various X3D modeled furniture items present.

Figure 10 Converted X3D 3D Interior Side View of the scene with furniture items 4. Conclusions This current research presents a conversion mechanism from SVG room designs to their equivalent X3D modeled scenes, effectively utilizing future service oriented platforms. The proposed application presented above provides an automated conversion method from any SVG room layout with the appropriate coordinate system transformation between these two standards. As such, this research is deemed as a valuable potential candidate for future implementations. Rich Web-oriented content applications will be created based on this approach with the ability to employ related web resources and can be integrated on any terminal device to facilitate any prospective users needs. 5. References Wang, L. Shen, W., Xie, H., Neelamkavil, J. Pardasani, A. (2002), Collaborative conceptual design--state of the art and future trends, Computer-Aided Design, Volume 34, Issue 13, November 2002, pp981-996 Lu, T., Tai, C., Bao, L., Su, F. and Cai, S. (2005), 3D Reconstruction of Detailed Buildings from Architectural Drawings, Computer-Aided Design & Applications, Vol. 2, Nos. 1-4, pp527-536

Yan, W. (2006), Integrating Web 2D and 3D Technologies for Architectural Visualization, Web3D 2006, Columbia, Maryland, 18 21 April 2006. 2006 ACM, pp37-45 So, C., Baciu, G., Sun, H. (1998), Reconstruction of 3D virtual buildings from 2D architectural floor plans, Proceedings of the ACM symposium on Virtual reality software and technology, November 02-05, 1998, Taipei, Taiwan, p.17-23 WORLD WIDE WEB CONSORTIUM W3C (2001), Scalable Vector Graphics (SVG) 1.0 Specification, http://www.w3.org/tr/svg10/, (Accessed 19 May 2010) WEB3D CONSORTIUM (2004), Extensible 3D (X3D) ISO/IEC 19775:2004. http://www.web3d.org/x3d/specifications/#x3d-spec, (Accessed 19 May 2010) Muhammad Abuzar Fahiem, Anita Malik,(2009) 3D reconstruction and isometric representation of engineering drawings, N. Mastorakis, J. Sakellaris (eds.), Advances in Numerical Methods, Lecture Notes in Electrical Engineering 11, Springer,2009 Lorenzo Sommaruga, Nadia Catenazzi,(2007) Curriculum visualization in 3D, Web3D 2007, Perugia, Italy, April 15 18, 2007. Élise Meyer, Pierre Grussenmeyer, Jean-Pierre Perrin (2006) First proposals for a web-based information system in archaeology: storage and interactivity for the preservation and the handling of Cultural Heritage data., The Third Taiwanese-French Conference on Information Technology (TFIT), Nancy : France 2006 Malamos, A.G, Sympa, P., Mamakis, G. (2009), Xml Annotation Of Conceptual Characteristics In Interior Decoration, 6th International Conference, New Horizons in Industry, Business and Education (NHIBE 2009), 27-28 August 2009, Santorini