Download C12-WebVis

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();
expSetRenderWindow(renWin);
expSetFileName(“VrmlTest.wrl”);
expWrite();
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();
expSetInput(renWin);
expSetFilePointer(stdout);
expWrite(); // 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.