Visualisierung und Animation im Web

Transkript

1 Visualisierung und Animation im Web Prof. Dr.-Ing. Thomas Wiedemann HOCHSCHULE FÜR TECHNIK UND WIRTSCHAFT DRESDEN (FH) Fachbereich Informatik/Mathematik

2 Gliederung Motivation Technologien : SVG VRML (X3J Fazit Hinweis: Aufgrund des sehr zahlreich und detailliert vor-liegenden Online-Materials stellen die folgenden Folien nur eine Übersicht und Zusammenfassung zum Thema dar. Details und konkrete Beispiele können den jeweils angegebenen Quellen entnommen werden. Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 2

3 Motivation Warum sind grafische Darstellungen, auch in 3D (meist) besser als rein textuelle Darstellungen? Menschen sind dreidimensionale Ansichten aus ihrer Umgebung gewöhnt 3D-Computergrafiken werden zunehmend zum Aufbau virtueller Welten verwendet (siehe Werbung, "Matrix2",...) Anteile und Zeitverläufe lassen sich grafisch mit einem Blick erfassen Größer / Kleiner Relationen sind schneller erfassbar Wichtiges / Unwichtiges kann durch Größe ausgedrückt werden (-> LOD) Komplexe Maschinen oder Bauwerke lassen sich mit 2D-Grafiken (=herkömmlicher technischer Zeichnung) nur schwer veranschaulichen Komplizierte Blechabwicklungen können am 3D-Modell berechnet werden Animation veranschaulichen den zeitlichen Ablauf Animation können auch komplizierte Bewegungen und Zusammenhänge darstellen Komplexe Umgebungen können durchwandert werden (Computerspiele)n Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 3

4 Spezifische Probleme im Web bei der Visualisierung Bandbreite Vollbildschirm umfasst einige Megabyte -> Content muß im Clientbrowser generiert werden Interaktionen Behandlung komplexer Interaktionen ( Kollison, Ein-Schalter?) Behandlung auf Server -> Grafikrückgabe?? Lokal : Beschreibung der neuen Szene? Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 4

5 Generelle Optionen zur Visualisierung im Web Anforderung : Lauffähigkeit im Browser Java Applets (schon veraltet) - siehe Java-Applet- Programmierung + volle Freiheit, - Probleme mit JRE-Versionen Flash SVG - 2D-Grafiken VRML-3D-Grafiken (X3D) Nicht im Browser, nur webkompatibel (portabel auf allen Rechnern ) Java 3D Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 5

6 SVG-Historie und Überblick Scalable Vector Graphics (SVG) (dt.: Skalierbare Vektorgrafiken) ist ein Standard für zweidimensionale Vektorgrafiken Version 1.0 im Jahr 2001 vom W3C als Empfehlung veröffentlicht aktuell Version 1.2 von 2005 Standard kann von den meisten Webbrowsern OHNE ZUSÄTZLICHE Plugins dargestellt werden (ggf. SVG-Viewer Plugin) liegt im XML-Format vor und kann mit anderen XML-Formaten kombiniert werden Datei-Kennung (MIME-Type).svg.svgz (gezippte Version) SVG unterstützt alle grafischen Primitive sehr ausgefeilte Farbverläufe und Schriftmanipulationen Animationen eine Veränderung der Grafiken zur LAUFZEIT über das SVG-DOM mit eingebetteten Funktionen über Skriptsprachen (Standardisierung läuft noch) Quellen: svg.org Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 6

7 Einsatzoptionen von SVG freie Alternative zu Flash auch als Datenaustauschformat zwischen unterschiedlichen Grafikprogrammen immer interessanter zusätzliche Impulse durch Mobile SVG : SVG Tiny (SVGT) für Mobilfunktelefone u.ä. SVG Basic (SVGB) für PDA s damit können folgende Bereiche abgedeckt werden neue Benutzerschnittstellen im Web (2D, 2,5D) ecommerce animierte Dokumentationen Unterhaltung (2D-Spiele) GPS und mobile Kartographie Multimedia Messaging Service (MMS) mit allen obigen Contents Industrielle Anwendungen (z.b. grafische Anlagenüberwachung per PDA) Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 7

8 Vergleich SVG - Flash SWF-Format Eigenschaft SWF (Flash) SVG offener Standard nein - Macromedia Flash (SWF) and Flash Video (FLV) File Format Specification 8.0 [ Ado06] ja - Scalable Vector Graphics (SVG) 1.1 Specification [ W3C03] Datenformat binär textbasiert - XML-konform MIME-Type application/x-shockwave-flash image/svg+xml Kompression ja - zlib ja - gzip Native Browser- Unterstützung Style Sheet- Unterstützung nein - Plugin notwendig ja - proprietäres Format, kleine CSS-Untermenge teilweise - wird nach und nach in die wichtigsten Web-Browser integriert ja - CSS Skriptsprachen ActionScript ECMAScript, Python, etc. Document Object Model Integration (XHTML, HTML, XML, etc.) Servergenerierung mit von Skriptsprachen Indexierung durch Suchmaschinen Import in/export aus Grafiksoftware ja - nicht-standardkonformes DOM nein ja - z.b. mit zusätzlichen Bibliotheken wie Ming ja - dazu ist allerdings Macromedias Search Engine SDK oder eigener Code erforderlich ja - einige Produkte besitzen Import- und Exportfilter ja - SVG DOM ja - bislang jedoch nur von wenigen Betrachtern unterstützt ja - JSP, Perl, PHP, Python, etc. ja - wird jedoch noch nicht von allen großen Suchmaschinen unterstützt ja - wurde zusätzlich als Grafikkaustauschformat entworfen Quelle: selfsvg.info Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 8

9 SVG -Beispieldefinitionen Beispiele zu Grundelementen <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg version="1.1" xmlns=" <rect x ="10" y ="10" width ="100" height ="50" rx ="15" ry ="15" /> <circle cx ="40" cy ="40" r ="20" /> <line x1="5" y1="5" x2="200" y2="100" style="stroke:red;stroke-width:3;" /> <polyline points="10,10 20,40 140,50 55,62 12,70 120,80" style="stroke:blue;stroke-width:2;fill:none" /> </svg> Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 9

10 SVG Beispieldefinitionen - Text Text kann auch gegliedert und unterschiedlich formatiert werden : <text x="10" y="40" style="font-size:30"> <tspan style="font-weight:900">s</tspan> <tspan style="fill:silver">v</tspan> <tspan style="text-decoration:underline">g</tspan> <tspan x="10" y="75">inkl. Zeilenumbruch</tspan> </text> <text x="20" y="10" style="font-size:30" writing-mode="tb"> SVG </text> <svg version="1.1" xmlns=" <text x="20" y="10" style="font-size:30;writing-mode:tb; glyph-orientation-vertical:360"> SVG </text> <text x="10" y="40" style="font-size:26px"> (a+b)<tspan style="baseline-shift:super;font-size:18px"> 2</tspan> </text> Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 10

11 SVG Beispieldefinitionen - Füllen und Farbverläufe... <defs> <radialgradient id="verlauf"> <stop offset="0%" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> </defs> <rect x="20" y="20" width="200" height="100" fill="url(#verlauf)" /> <defs> <pattern id="muster" x="10" y="10" width="20" height="20" patternunits="userspaceonuse"> <circle cx="10" cy="10" r="5" fill="silver" stroke-width="1" stroke="black" /> </pattern> </defs> <rect x="20" y="20" width="200" height="100" stroke-width="2" stroke="black" fill="url(#muster)" /> </svg> <defs><pattern id="picture" x="20" y="20 width="50" height="60" patternunits="userspaceonuse"> <image x="0" y="0" width="50" height="60 xlink:href="tux.png" /> </pattern> </defs> <rect x="20" y="20" width="200" height="120" fill="url(#picture)" stroke-width="2" stroke="black" /> Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 11

12 SVG Beispieldefinitionen - Filter SVG besitzt bereits sehr viele Filter, welche teilweise an die Funktionen bekannter Grafikprogramme heranreichen : <svg version="1.1" xmlns=" <defs> <filter id="button" x="-10%" y="30%" width="120%" height="40%"> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur" /> <fespecularlighting in="blur" surfacescale="6" specularconstant="0.4" specularexponent="4" result="spec" style="lighting-color:white"> <fepointlight x="-6000" y="-8000" z="20000" /> </fespecularlighting> <fecomposite in="spec" in2="sourcealpha" operator="in" result="comp" /> <fecomposite in="comp" in2="sourcegraphic" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="comp2" /> </filter> </defs> <circle cx="60" cy="30" r="50" style="fill:blue;stroke:blue;stroke-width:3px" filter="url(#button)" /> </svg> Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 12

13 SVG Beispieldefinitionen - Transformationen <rect x="0" y="0" width="200" height="100" style="fill:none;stroke:grey;stroke-width:2px" /> <!-- transformiertes Rechteck --> <rect x="0" y="0" width="200" height="100" style="fill:#00ff00;stroke:black;stroke-width:2px" transform="scale(0.5)" /> Transformationen können auch sequentiell abgearbeitet werden : (dabei aber ggf. Reihenfolge relevant!!)... transform="translate(10, 10) scale(2) translate(-10, -10) rotate(22, 50, 200) ". Für Transformationen und Animationen sind Gruppierungen sehr nützlich : <g style="stroke:black;stroke-width:3px"> <rect x="10" y="10" height="75" width="150" fill="red" /> <rect x="25" y="25" height="75" width="150" fill="blue" /> </g> (analog auch use-funktion, welche eine Wiederverwendung (Quasi-Verebung gestattet) Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 13

14 Hintergrundwissen zu 3D-Transformationen entsprechend der darstellenden Geometrie lassen sich Bewegungen von Objekten im Raum bzw. die räumliche Anordnung von Standardobjekten (Quader, Kreis, Ellipse ) auf Matrixoperationen abbilden zur Vermeidung von Problemen durch den Koordinatenursprung (0,0,0) führt man eine künstliche 4. Dimension ein und homogenisiert damit die Daten (-> Mathemat.) ein Punkt wird danach beschrieben durch x y z 1 T Alle Transformationen lassen sich dann abbilden auf eine Matrixoperation der Form: x 2 y 2 z 2 1 a a a 13 a 14 a a a 23 a 24 = a a a 33 a 34 a a a 43 1 * Die Transformationsmatrix A kann für viele Standardtransformationen und auch deren Kombination (z.b. Drehen + Verschieben) relativ einfach bestimmt werden Die einheitliche Berechnungsweise erlaubt in aktuellen 3D-Grafikkarten eine Realisierung dieser Berechnung per Hardware und damit maximale Performance! Diese Vorgehensweise ist bei Weglassen von Z auch für 2D-Operationen gültig! Bei der finalen Anzeige wird die 4. Dimension ignoriert. Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 14 x 1 y 1 z 1 1

15 3D-Transformationen als Matrixoperation Darstellung der Transformationsmatrix A für Standardtransformationen: Verschiebung (engl. Translation) x+a y+b z+c 1 = Skalierung (engl. Zoom ) x*a y*a z*a 1 = a b c 1 a a a Drehung um α (engl. Rotation ) hier um X-Achse (andere Achsen analog) x 2 y 2 z 2 1 = Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 15 * * x 1 y 1 z 1 1 x 1 y 1 z cos(α) -sin(α) 0 0 sin(α) cos(α) Spiegelung kann abgeleitet werden aus Drehung um 180 * x 1 y 1 z 1 1

16 SVG Beispieldefinitionen - Pfadangaben Pfade werden zur Maskierung und zur Verlaufsangabe von Texten und Animationen mit eigenständiger Syntax im Attr. D verwendet : <path d="m C " style="fill:none;stroke-width:3;stroke:black;" /> <path id="text_path" x="0" y="0" d="m10 10 C C " fill="none" stroke="silver" /> <text style="font-size:24px"> <textpath xlink:href="#text_path">an einem Pfad ausgerichteter Text</textPath> </text> Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 16

17 SVG Beispieldefinitionen - Animation Prinzipiell können fast alle Eigenschaften (XYZ, Farbe, Lage etc.)( verändert werden : <circle cx="100" cy="50" r="40" fill="red"> <animate attributename="cx" begin="0" dur="1s" by="100" repeatcount="3" fill="freeze" /> </circle> <circle cx="100" cy="190" r="40" fill="red"> <animate attributename="cx" begin="0" dur="1s" by="100" repeatcount="3" accumulate="sum" fill="freeze" /> </circle> <ellipse cx="140" cy="100" rx="120" ry="70" fill="green"> <animatecolor attributename="fill" from="green" to="gold" begin="0s" dur="2s" fill="freeze" /> </ellipse> <text x="75" y="40" text-anchor="middle" fill="#000" font-size="18px"> <set xlink:href="#extern" attributename="fill" begin="mouseover" to="#0f0" /> <set xlink:href="#extern" attributename="fill" begin="mouseout" to="#f00" /> Touch me! </text> <circle id="extern" cx="75" cy="75" r="25" fill="#f00" /> Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 17

18 SVG Beispieldefinitionen - Nutzer-Interaktionen Über Events können Nutzeraktionen angebunden werden : <g id="gruppe" transform="scale(3)" style="font-size:12pt;text-anchor:middle;"> <text x="75" y="20" height="25" width="50" fill="#000"> <set xlink:href="#ext" attributename="fill" begin="mouseover" to="#0f0" /> <set xlink:href="#ext" attributename="fill" begin="mouseout" to="#f00" /> Touch me! </text> <circle id="ext" cx="75" cy="50" r="25" fill="#f00" /> <text x="75" y="55" > <tspan style="font-weight:bold;fill:#fff;"> SVG </tspan> </text> </g> Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 18

19 SVG Beispieldefinitionen - Nutzer-Interaktionen in HTML II <html > <head> <script> <![CDATA[ var dx,dy; var circle; function init() { circle = document.getelementbyid('circ'); circle.addeventlistener("mousedown", mousedown_listener, false); } function mousedown_listener(evt) { dx = circle.cx.baseval.value - evt.clientx; dy = circle.cy.baseval.value - evt.clienty; document.addeventlistener("mousemove", mousemove_listener, true); document.addeventlistener("mouseup", mouseup_listener, true); } function mouseup_listener(evt) { document.removeeventlistener("mousemove", mousemove_listener, true); document.removeeventlistener("mouseup", mouseup_listener, true); } function mousemove_listener(evt) { var id = circle.ownersvgelement.suspendredraw(1000); circle.cx.baseval.value = evt.clientx + dx; circle.cy.baseval.value = evt.clienty + dy circle.ownersvgelement.unsuspendredraw(id); } ]]> </script> </head> <body onload="init();"> <h3>svg + event handler demo</h3> <p>drag the circle with the mouse!</p> <svg:svg width="600px" height="400px"> <svg:polyline points="0,0 600,0 600,400 0,400 0,0" style="stroke:black; fill:none;"/> <svg:circle id="circ" r="1cm" cx="5cm" cy="3cm" style="fill:red; stroke:blue; stroke-width:3;"/> </svg:svg> </body> </html> Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 19

20 VRML und X3D Virtual Reality Modeling Language (VRML) standardisierte Beschreibungssprache für 3D-Szenen basiert(e) vom Grundkonzept her auf OpenGL von Silicon Graphics erste Version von 1995 von Silicon Graphics als Webversion eingeführt 1997 wurde VRML 2.0 spezifiziert und nach kleineren Änderungen als VRML97-ISO Standard festgeschrieben (völlige Überarbeitung des Szenengraphenkonzepts, neue Sensorknoten für bessere Interaktivität, Animationsmöglichkeiten über TimeSensoren, Skriptfähigkeit mittels JavaScript (VRMLScript), Multimedia> Sounds, Animated GIF und MPEG-Movies) 1999 VRML NG (Next Generation bzw. VRML99) mit Ziel Komplexitätsreduzierung (durch Austiege von SGI gewiesse Stagnation ) ab 2004 Entwicklung des VRML-Nachfolgers X3D als XML-Format, jedoch noch keine größere Marktdurchdringung (VRML ist KEIN XML!) 3 Codierungsoptionen: VRML, X3D (XML), binär Funktionalität und Stabilität hängen sehr stark vom Plugin ab! Dateierweiterungen : *.wrl *.wrz (gezippt) Quellen : Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 20

21 VRML _ Basis Elemente Viele Konzepte von VRML/X3D ähneln SVG! Basiskörper : Quader, Zylinder, Kegel und Kugel als eigene Knotentypen Kompliziertere Graphikobjekte bauen auf Punktwolken, Flächen (IndexedFaceSet) oder Linien (IndexedLineSet) auf. Zusammenfassung durch Transform-Knoten mit den Transformationsoperationen Skalierung, Rotation und Translation (auch kombiniert) Anzeige Materialeigenschaften, auch mit transparenten Texturen möglich. diverse Lichtquellen (Punkt- / Flächenquelle) + Schattierungsoptionen Sensoren für Benutzeraktionen bzw. Time-sensor für Animationen. Interpolatoren für Animation, auch für Bewegung des Betrachters... Knotenmanipulation durch Skripte USE-Befehl für Wiederverwendung ( DEF für Definiton) LOD (Level of Detail) ermöglicht eine entfernungsabhängige Anzeige von Details (Betrachter: weit weg -> nur Quader+Prisma, nah: Haus mit Fenstern) Billboards (Tafeln immer in Richtung Betrachter) für Visualisierung von Texten und Hilfen (Eingabe???) ie dem Benutzer immer ihre Breitseite zudrehen... Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 21

22 VRML und X3D - Beispiel1 - Statische Codierung #VRML V2.0 utf8 # ^^^^^ this is the MANDATORY header line # The VRML Primer # 1997 Daniel K. Schneider, TECFA # No Copyright # Draw a blue cylinder - a first node specifying an object # Radius and height can be floating numbers Shape { geometry Cylinder { radius 0.1 height 3.0 } appearance Appearance { material Material { diffusecolor } } } Transform { # Move the pen up - a second node specifying a translation translation children [ Shape { geometry Sphere {} } ] } Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 22

23 VRML und X3D - Beispiel2 - Level of Detail ist eine Art Switch-Anweisung als Funktion der Betrachterentfernung LOD { center range [10, 15] level [ # LEVEL III: Detail Inline { url "inter-persons-2.wrl" } # LEVEL II: The bunch as a whole Anchor {... } # LEVEL III:... Shape {... } - weitere Beispiele : siehe Quellen Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 23

24 Ausblick zu SVG, VRML und X3D Allgemeine Einschätzung (etwas subjektiv gefärbt) : Nach einer Boomphase Ende der 90er Jahre ist es wieder relativ ruhig! 1. Die realen Effekte rechtfertigen nicht immer die Aufwendungen, insbesondere Ärger mit den Plugins Es gibt keine großen IT-Hersteller, welche die Standards richtig vorantreiben : 1. Adobe hat SVG bis zum Kauf vom Macromedia stark unterstützt, danach die Entwicklung eingestellt 2. SUN hat das Entwicklerteam von Java 3D gefeuert und erst nach großen Protesten der Community teilweise wieder eingestellt 3. Opensource-Projekte laufen (aus der Not heraus) 4. Langfristig könnte 2d/3D-Visualisierung sehr interessant werden: 5. Siehe Vista mit 3D-Menüs 6. LOD als Formulareffekt (LOD klein -> nur wichtige Stammdaten, LOD -> groß : alle Daten zur einer Firma... ) 7. Rückseite eines Formulars -> vertrauliche Info für den Chef... Entwicklung webbasierter Anwendungen - Prof. T.Wiedemann - HTW Dresden - Folie 24