Publishing the Greatest Common Denominator Nicholas F. Polys Advanced Research Computing Virginia Tech ; Blacksburg, VA 540.231.0968 npolys@vt.edu ABSTRACT count on specific client software being installed. But in the wild This paper presents our experience creating X3DOM web and out on the web, the required plug-in and stand-alone client publications of models and environments from four different models are less successful. To achieve the broadest possible reach domains: a Structure and Form Curriculum, Scientific for our interactive 3D content, we seek a way to publish to the Visualization, Homepage Designs, and Building Visualization. native web browser. Extensible 3D (X3D), as a suite of ISO Through a series of six case studies across these domains, we standard specifications, enables a number of flexible publishing highlight several tools and content pipelines using ISO Extensible paradigms for web and offline consumption [6, 7]. 3D (X3D) and describe our experience publishing this content to For the purposes of this paper specifically, we will describe our X3DOM. We detail our lessons learned through these diverse use tests for X3DOM publication using data from several domains: cases and show that a greatest common denominator exists. We hope these features and lessons contribute to the development of • DOMAIN 1 – Structure and Form Curriculum native Web3D graphics that leverage the standard scene graph and • DOMAIN 2 – Scientific Visualizations web-browser event systems such as the DOM. • DOMAIN 3 – Homepage Designs Categories and Subject Descriptors • DOMAIN 4 – Building Visualization D.2.3 Coding Tools and Techniques; D.2.7 Distribution, Maintenance and Enhancement 2. BACKGROUND Since the ISO VRML and its EAI, declarative languages for scene graphs - 3D models, environments and interactions - have been General Terms widely demonstrated. These ISO scene graphs consist of a Web Publishing, Multimedia, Standardization. ‘Transformation Graph’, which represents the organization and coordinate systems of objects in the environment and a ‘Behavior Keywords Graph’, which describes the event connections between nodes. HTML5, Web3D, X3D, 3D Mashups. While the VRML or X3D files themselves are represented declaratively, most application logic is built from imperative programming languages. The APIs such as the ‘EAI’ or ‘SAI’ are 1. INTRODUCTION exposing the runtime structure to programmatic access- whether Modern enterprises are characterized by a diversity of its through JavaScript, Java, Python, C++, or.Net (name it here). stakeholders and systems. Adopting international standards is a Unlike its predecessor, the ISO Extensible 3D (X3D) standard key strategy to meeting business-critical requirements such as provides both an abstract model of the scene graph encoded in interoperability, portability and durability of information assets several formats (XML, VRML-Classic, or Binary) and a [10, 11]. In this paper, we examine how the ISO X3D standard programming interface, the SAI. The Scene Access Interface can be used to scale technology and support for a large (SAI) may be implemented in any number of languages and the organization with several domain specialties. current ISO specs describe bindings for ECMAScript and Java. We set out to demonstrate a capable platform to deliver interactive Considering recent developments in the Web Architecture, such 3D publications from several tools and domains. Since we use the as WebGL, there have been several innovative systems International Standards Organization (ISO) Extensible 3D (X3D) demonstrated to raise the content author’s abstraction from as our main platform for interchange and delivery of virtual imperative OpenGL ES programming to more of a declarative, environments and visualizations, we are able to view our content web-like, document-oriented model [2, 3, 8]. Integrating the on diverse devices including: laptops, stereo TVs, walls of tiled behavior graph with the web event model provides a unified screens and fully immersive projection rooms. This portability is idiom within which to author rich, interactive 3D hypermedia. very powerful in an IT- controlled environment where we can In this paper, we begin from the greatest common denominator information exchange that serves our enterprise across several domains (X3D). We then describe our initial experiences in Copyright © 2012 for the individual papers by the papers' authors. publishing these resources to a native HTML5 web browser with Copying permitted only for private and academic purposes. This volume WebGL: X3DOM. Each of these examples is posted online at: is published and copyrighted by its editors. Dec3D2012 workshop at WWW2012, Lyon, France http://people.cs.vt.edu/~npolys/DEC2012/ 3. DOMAIN 1 – Structure and Form dataset of pressure and temperature for a heated spinning disc. The tutorial developed color maps, contours, cutting planes, Curriculum streamlines and glyphs from the data. We exported X3D from 3.1 SAFAS Paraview and used this model for testing several immersive We have developed a curriculum and toolset for architectural display platforms in the VT Visionarium (Figure 2). students to study the relationship between structure and form. The curriculum consists of two modules: a Knowledgebase website, which provides explanatory information and multimedia about different aspects of spatial structures, and the Structure And Form Analysis System (SAFAS). Recent years have seen a remarkable exponential proliferation of information and services accessible over the World Wide Web. Because our goal was to publish our curriculum and tools for the broadest possible impact, we chose to use Web-based multimedia with Dublin-Core metadata as a means to publish explanatory resources in an accessible and searchable way [5,11]. SAFAS itself is based on the open-source Java toolkit, Xj3D [12]; here we describe the use of X3DOM to present assembly animations for the web curriculum described in [1]. Figure 2: The Spinning Disc data set from Paraview rendered from X3D in the VT Visionarium VisCube 3.2 Assembly Animations The Fraunhofer IGD team connected the details on demand events The fundamentals of form and structure are presented in an to click the 3D model and show numeric temperature and update a explanatory resource, covering several main chapters and graphic pointer on a 2D thermometer legend. This example is in concepts. These include: Fundamentals, History, Design, Case on the X3DOM website under ‘Data Picking’. Studies, and Assembly and Erection. In order to portray these concepts, a series of 3D models were built in 3D Studio Max. Tools Paraview Videos were created and published with the website. Now the Features • Meshes, surfaces and glyphs researchers are evaluating other e-publishing outlets for these models and animations. These include X3D and X3DOM. • Color An initial set of modules was selected for animation, exported to Lessons • Interactive 2D + 3D information spaces are X3D and then transcoded to X3DOM and HTML5. Screenshots possible are shown in Figure 1. 4.2 Science on a Sphere In 1995, the National Oceanic and Atmospheric Administration (NOAA) created Science On a Sphere (SOS), a system designed to display visualizations projected onto a physical sphere of 68 inch diameter hanging in the middle of a large room. As of 2010, the system had been installed at 49 museums worldwide [4]. NOAA has worked to provide funding for installation and maintenance of SOS. Figure 1: a) Uni strut system, b) Assembly of square-on-square Tools • 3D Studio Max • Fraunhofer IGD’s exporter Features Animation sequence of several objects Lessons • delete any empty Groups or Transforms • time control needed (pause, reverse, slow- motion) Figure 3: Screenshot of the NOAA SOS example showing daily • a special setup (WAMP) is required for offline airtraffic testing of X3DOM NOAA has made all SOS video datasets available for free, online. The SOS datasets are published as conventional MPEG-4 movie 4. DOMAIN 2 – Scientific Visualization files but they are meant to be mapped to a sphere. Consequently, 4.1 Paraview export the spatial reality and impact of global features is reduced when At the SuperComputing 2010 conference, a tutorial was given by the data is displayed in a 2D movie player. We developed a proof members of Kitware, Sandia and Oak Ridge National Labs using of concept that uses X3DOM to portray the videos. We selected Paraview, a multi-platform, open-source scientific visualization three videos 2D Form and through 2D HTML elements provide tool. The tutorial included the visualization of a single timestep control for: which video to load, which navigation style to be active, and a ‘reset view’ button. Video files were transcoded to OGG Theora for X3DOM publication. For the Reset View, we 5.2 CS Professor cloned the original viewpoint, created a new one and set the new Also in the domain of homepage design, we built a world from copy to be bound using a javascript method we defined in the several existing resources such as the Web3D logo and the HTML page. X3DOM earth.png. Here again the Coordinates of an A screenshot is shown in Figure 3 and full details of our IndexedFaceSet were re-used for an IndexedLineSet. Both the experiences for this application can be found in [9]. mesh and polygon logos were animated to spin and in the case of the former, scale as well. Similarly to the example above, we Tools • X3D-Edit spanned the X3DOM model overlay on top of several 2D • Vivaty Studio elements, creating a striking pop-out effect. A screenshot is shown Features • MovieTexture mapped to Sphere in Figure 5. For this case, we added the attribute shadowIntensity=’0.7’ on the • HTML Form elements drive 3D content DirectionalLight. This computed dynamic shadows of the Lessons • broad-based video format support is still animated geometry on the ground platform. The platform ‘Box’, difficult, trans-coding is required on which the earth.png was mapped, was converted to an • X3D Prototypes are not supported IndexedFaceSet and refined (subdivided 3x by triangles) so that the shadow was computed and rendered with suitable resolution. Figure 5 shows a screenshot of the homepage. 5. DOMAIN 3 – Homepage Design 5.1 Musician For a musican’s homepage, we developed a concept for a pwebsite that included several ‘floating’ 3D elements over the 2D webpage. Using the transparency of the X3D element through CSS, we overlayed the models using X3DOM,js and X3DOM.css. These included animations of wireframe 3D text, curved rotating geometry with alpha transparent PNGs, and a 3D pointSet of a guitar. Figure 5: Screenshot of a faculty homepage This is another example where ISO standard VRML and X3D serve as a powerful common denominator. We used the free tool Tools • Vivaty Studio from sourceforge, insight3D to process a set of 17 2D images of a • X3D-Edit guitar into a colored 3D point cloud that captures the main shape and features of the guitar. The point cloud was exported as VRML Features • CSS styling for transparent background and converted to X3D. We animated it in translation, scale, and • dynamic shadows rotation. To add a more visual substance to the final presentation, Lessons • Lines cast shadows we doubled the points and offset the second group in its translation so that they were easier for the eye to track. Figure 4 shows a screen shot of a page with an animated point cloud 6. DOMAIN 4 – Building Visualization overlay (guitar). 6.1 VT Center for the Arts Figure 4: Screenshot of Musician website mockup Tools • insight3D.sourceforge.net • Vivaty Studio • Notepad++ Features • A colored point cloud – pointSet • DEF/USE • Linesets, alpha PNGs Figure 6: Screenshot of the VT Center for the Arts • Animated scale, translation, rotation walkthrough Lessons • Fallback model is crucial to web-wide distribution Virginia Tech is currently building a new Center for the Arts, a sensor-rich, reconfigurable performance space that will blend art and engineering in novel ways. In preparation for its ground breaking, the architecture firm Snohetta provided an exterior 3D model of the building and locale. These files were processed by 9. REFERENCES the VT School of Visual Arts to X3D. We exported X3D from Modo and used this model for testing several immersive display platforms in the VT Visionarium. 1. B ACIM , F., P OLYS, N., CHEN , J., S ETAREH, M., LI, J., AND M A, L. “C OGNITIVE SCAFFOLDING IN WEB3D LEARNING For web publication, we down-sampled (bicubic) the 2048 2 SYSTEMS: A CASE STUDY FOR FORM AND STRUCTURE”. I N textures to 1024. We did not reduce the Coordinate precision of P ROCEEDINGS OF THE 15 TH INTERNATIONAL C ONFERENCE the source model. This environment was processed successfully to ON WEB 3D TECHNOLOGY (LOS ANGELES, CALIFORNIA, X3DOM and although still heavy (8 MB world, 12 MB textures), J ULY 24 - 25, 2010). WEB3D '10. ACM, 2010. it ran quite smoothly on a 2010 era, mid-range laptop. Figure 6 shows a large-format rendering of the VT Center for the Arts. 2. J OHANNES BEHR , P ETER E SCHLER , YVONNE JUNG , AND M ICHAEL Z OLLNER . 2009. X3DOM: A DOM-BASED Tools • Architecture firm in-house HTML5/X3D INTEGRATION MODEL. I N P ROCEEDINGS OF • Unity THE 14 TH I NTERNATIONAL C ONFERENCE ON 3D WEB TECHNOLOGY (WEB3D '09), S TEPHEN N. S PENCER (E D .). • modo ACM, NEW Y ORK, NY, USA, 127-135. Features • Baked light maps 3. J OHANNES B EHR, Y VONNE JUNG , TIMM DREVENSEK, AND • PNG alpha textures ANDREAS ADERHOLD. 2011. D YNAMIC AND INTERACTIVE ASPECTS OF X3DOM. I N P ROCEEDINGS OF THE 16 TH Lessons • emissiveColor on Materials might need to be I NTERNATIONAL C ONFERENCE ON 3D WEB TECHNOLOGY removed from model (WEB3D '11). ACM, NEW Y ORK, NY, USA, 81-87. • X3DOM can handle 8 MB of scene and 12 MB 4. GOLDMAN, K., KESSLER, C., AND DANTER, E. 2010. of textures at interactive rates S CIENCE ON A S PHERE : C ROSS-S ITE S UMMATIVE • models are not protected from duplication E VALUATION . INSTITUTE FOR LEARNING INNOVATION . 5. N ATIONAL S CIENCE DIGITAL LIBRARY WWW.NSDL. ORG 7. DISCUSSION AND CONCLUSION 6. P OLYS, NICHOLAS F. “P UBLISHING P ARADIGMS WITH X3D” Extensible 3D (X3D) provides the interoperability, portability, I N: INFORMATION V ISUALIZATION WITH SVG AND X3D, and durability that is the greatest common denominator for ( EDS .) C HANOMEI CHEN AND V LADIMIR GEROIMENKO , ‘Enterprise 3D IT’. Across six use cases and four domains, the S PRINGER -V ERLAG , 2005. ISO standard for declarative scene graphs, X3D, provides a 7. N ICHOLAS F. P OLYS, MICHAEL S HAPIRO , AND KAREN capable greatest common denominator for interactive 3D D UCA. 2007. IRVE-S ERVE: A VISUALIZATION FRAMEWORK communication. The clear mapping of worlds published to X3D FOR SPATIALLY- REGISTERED TIME SERIES DATA. I N or X3DOM opens a huge opportunity for the publication of 1st P ROCEEDINGS OF THE TWELFTH INTERNATIONAL class, native, interactive virtual environments on the web. While CONFERENCE ON 3D WEB TECHNOLOGY (WEB3D '07). the X3DOM node set and event semantics are different from the ACM, NEW Y ORK, NY, USA, 137-145. ISO X3D Interactive Profile, automatic transcoding provides a clean mapping to the X3DOM tag set. 8. K RISTIAN S ONS , F ELIX K LEIN , DMITRI R UBINSTEIN , S ERGIY B YELOZYOROV , AND P HILIPP S LUSALLEK. 2010. XML3D: The W3C Declarative 3D Community Group is the center of this INTERACTIVE 3D GRAPHICS FOR THE WEB. I N P ROCEEDINGS design and development evolution. We have opened Pandora’s OF THE 15 TH I NTERNATIONAL CONFERENCE ON WEB 3D Box to Deep Media on the web. Now web developers can author TECHNOLOGY (WEB3D '10). ACM, N EW YORK, NY, USA, interactive 3D web environments and applications in their idiom- 175-184. OpenGL and WebGL expertise is not needed. As X3DOM proves, CSS and the scripting basis of HTML 5 can align with proven 9. D AN TILDEN , ANKIT S INGH, N ICHOLAS F. P OLYS, AND scene graph structures. Clearly, native Web3D web clients that P ETER S FORZA. 2011. MULTIMEDIA MASHUPS FOR MIRROR share declarative scene graphs and manage these information WORLDS . I N P ROCEEDINGS OF THE 16 TH I NTERNATIONAL objects through a common Document Object Model (DOM) is a C ONFERENCE ON 3D WEB TECHNOLOGY (WEB3D '11). reality. ACM, NEW Y ORK, NY, USA, 155-164. This set of case studies gives proof to the question that a greatest 10. WEB3D C ONSORTIUM WWW. WEB3 D .ORG common denominator for interactive 3D (X3D) can be aligned 11. WORLD WIDE WEB C ONSORTIUM WWW.W 3 C .ORG with recent W3C standards such as HTML5. Further integrating 12. X J3D: WWW.XJ 3 D. ORG with sensor models and 2D graphic standards is the next step for X3D, perhaps as a new Profile (formalized node set) that lives comfortably on top of WebGL and dovetails with the event systems underwriting the web information ecology. 8. ACKNOWLEDGEMENTS I would like to thank the research community at Virginia Tech for the exciting applications with which to test these declarative publishing techniques. Thanks to Dan Tilden for is work on the NOAA Science on a Sphere; Thanks to Tony Gong for the SAFAS animations, and Dane Webster for the VT Center for the Arts model.