Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Chapter 12 Visualization on the Web Yingcai Xiao Visualization on the Web Purposes: •Online visualization of data •Speedy distribution of research results •Web-based collaboration •… Visualization on the Web Considerations: • Division of visualization pipe line • Speed of generating, transmitting and displaying graphics elements • Interactivities on generating and viewing graphics elements • Compatibility of software Visualization on the Web Server Data Client Visualization Filter Data Software Computer Graphic Graphics Primitives Image Rendering Engine VRML(Virtual Reality Moduling Language) .wrl JPEG(Join Picture Expert Group) GIF(Graphic Information Format) MPEG(Motion Picture Expert Group) html Interaction Highly interactive No interactive PNM write PPM Visualization on the Web Data ->Vis-> 3D Graphics ->Rendering ->2D Images ->Display ->Interaction Serverserver ®½¬ client Side 1. Slow to transfer image. (Static) 2. No interaction. 3. Can be viewed by any browser. Serverserver ®½¬ client Side · A little more interaction through server side programming. (Dynamic) Sequenced images dynamically generated by CGI, JSP, ASP or Web Services. · Slow to transfer images. · Slow interaction. · Can be viewed by any browser. · Platform dependence on the server. Server side programs (currently in unmanaged C++, Java, www.Python.org) need to be made compatible with what’s supported by the server. Data ->Vis-> 3D Graphics ->Rendering ->2D Images ->Display ->Interaction Client-Side ½¬ client server 1. Too slow to transfer data & programs. 2. Platform dependence on the client. 3. Very interactive generating and viewing the 3D graphics. 4. Very fast after initial fetching. 5. Java applet type of programming, out dated. Both-Sides server ®½¬ client Þ Server side programs generate VRML or Java 3D graphics. Þ Client side plug-ins to view the 3D graphics. Þ Speed of transfer depends on the number of vertexes in the graphics elements. Þ Platform independence on the client as long as the browser supports the plug-in. Þ Platform dependence on the server. Þ Very interactive in viewing. Þ Medium interactivity for visualization (generating 3D graphics). A “Failed” Case of Web Visualization • Live podcast of IBM’s Deep Blue vs. world champion Garry Kasparov • http://en.wikipedia.org/wiki/Deep_Blue_versus_Garry_Kasp arov • Java Applets: small Java Applications running on the clients) • Right before the game was to start, the network bandwidth was overwhelmed at the server to sent the chess visualization applets to millions of clients who just joined the podcast. JAVA 3D : client-side processing User -> HTML page-> Java Applet (embedded) -> Imbedded VTK in Java Applet-> Graphics generation (client side)-> Rendering (client side) Everything is done at the client side after initial download of the applet. Architecture of a Four-Tier Application Supporting Software App User Interface W E B W E B Application Logic S E R V E R C L I E N T User Interface Database Engine Database DBMS / Database Server Database API Application Server Architecture of a Four-Tier Application Architecture of a Four-Tier Application Supporting Software App User Interface User Interface VTK Database Engine Database DBMS / Database Server Database API Application Server Architecture of a Four-Tier Application W E B W E B S E R V E R C L I E N T Server-side Programming Clients “run” the visualization programs on the server, serverside programs dynamically generate web pages for the clients. User -> Web pages with imbedded scripts -> Client interaction -> Server-side processing -> Dynamically generated web pages -> Client browser Both-side processing: VRML HTML forms-> Client selections -> Server-side programs-> Dynamically generated VRML pages-> Client browser (renders VRML) •3D graphical elements are generated at the server. •3D graphics elements are rendered at the client. •Regenerate graphics elements if geometry or attributes are changed. •Can change display parameters (vantage point, zoom level, …) at the client without regenerating graphics elements at the server. VRML: Virtual Reality Modeling Language VRML Plug-in: http://www.cortona3d.com/cortona3d-viewers Floppy’s VRML Tutorial http://rvirtual.free.fr/programmation/VRML/tuto_eng/ VRML: Virtual Reality Modeling Language World Light Proterty Group Node Actor Transformation Geometry VRML: Virtual Reality Modeling Language #VRML V2.0 UTF8 Shape { appearance Appearance { material Material { diffuseColor 1 0 0 } } geometry Box { } } VRML: Virtual Reality Modeling Language IndexedFaceSet { coord Coordinate { point [ -2 0 2, 2 0 2, 2 0 -2, -2 0 -2 -2 4 2, 2 4 2, 2 4 -2, -2 4 -2] } coordIndex [ 0 4 7 3 -1 1 2 6 5 -1 4 5 6 7 -1 2 3 7 6 -1 ] solid FALSE } • List points in an array of (xyz) values • Index into it to form a polygonal surfaces • -1 to end the list of points forming the surface VRML: Virtual Reality Modeling Language Web-based 3D graphics programming . VTK can generate VRML (.wrl) files. vtkVRMLExporter *exp= vtkVRMLExporter::New(); expSetRenderWindow(renWin); expSetFileName(“VrmlTest.wrl”); expWrite(); VRML: Virtual Reality Modeling Language There are many ways to send the dynamically generated VRML page to the client. • CGI (Common Gate Interface) which takes the standard output from any server program and sends it to the client. For vis, the standard output should be a VRML embedded HTML page. • ASP.NET takes an ASP ((Active Server Page) generated by the application and sends it the client browser via the web server. The application can be written in any language supported by .NET (C#, C++, Java, Basic, …) • J2EE (Java Enterprise Edition) is a server side container that takes the output generated by a server side Java program, e.g., JSP (Java Server Page), to the client. VRML Server: CGI example Add form action in the .html page. <FORM METHOD=’POST’ ACTION=’/cgi-bin/make-vis.csh’> CGI programs can be C++ vtk programs in the cgi-bin directory. vtkVRMLExporter *exp= vtkVRMLExporter::New(); expSetInput(renWin); expSetFilePointer(stdout); expWrite(); // generating VRML file JAVA 3D Java + 3D Graphics (More powerful in computing than VRML) JAVA 3D : both-side processing User -> Client interactions -> Server side JSP VTK processing -> Dynamically generated Java3D web pages -> Client browser with Java3D plug-in 3D graphics elements rendered Java Script & WebGL : both-side processing User -> Client interactions -> Server side VTK processing -> Dynamically generated WebGL web pages -> Client browser with WebGL support 3D graphics elements rendered EAI: External Authoring Interface • Provides the same power as Java3D. • Allows interactions between VRML and Java. • Java + VRML + EAI == Java3D Future of Web Visualization • Bandwidth (Vis Grid, OARNet 100Gbit network). • Interface and language may change. • The algorithms in VTK remain.