Visualisierung und Animation im Web

Transcription

Vorlesungsreihe
Entwicklung webbasierter Anwendungen
Visualisierung und
Animation im Web
Prof. Dr.-Ing. Thomas Wiedemann
email: [email protected]
HOCHSCHULE FÜR TECHNIK UND WIRTSCHAFT DRESDEN (FH)
Fachbereich Informatik/Mathematik
Gliederung
•
Motivation
•
Allgemeine Optionen zur Grafikanzeige
•
SVG als 2D-Vektorformat
•
VRML (X3J
•
Java 3D
•
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.
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 2
1
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
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 3
Spezifische Probleme im Web bei der Visualisierung
• Problem Bandbreite
• ein Vollbildschirm umfasst einige Megabyte
• -> Content muß im Clientbrowser generiert oder stark
komprimiert übertragen werden
• -> Optionen : als komprimierte Bitmap oder als Vektorgrafik
• Interaktionen bei komplexeren 2D/3D-Grafiken (Welten)
• Behandlung komplexer Interaktionen ( Kollision, Ein-Schalter?)
• Behandlung auf Server -> Grafikrückgabe ??
• Lokal : Beschreibung der neuen Szene ?
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 4
2
Generelle Optionen zur Visualisierung im Web
• Anforderung : Lauffähigkeit im Browser
• mit Bitmap-Grafiken oder Videosequenzen
• Java –Applets als Animationsplayer (teilweise schon veraltet) siehe Java-Applet-Programmierung
• + volle Freiheit bei der Animationssteuerung
• - Probleme mit JRE-Versionen
• SVG - 2D-Grafiken
• VRML-3D-Grafiken (X3D)
• Flash (siehe Vortrag)
• Nicht im Browser, nur webkompatibel (portabel auf allen Rechnern )
• Java 3D
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 5
Bitmap-Grafiken
• Standardanforderungen :
• starke Kompression möglichst ohne Qualitätsverlust
• geringe Lade- und Anzeigezeiten
• Zusätzliche Anforderungen
• Transparenz für Positionierung über anderen Grafiken
• Animationssequenzen
• Die nachfolgenden Grafiktypen sind entsprechend ihrer
historischen Folge aufgelistet.
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 6
3
Bitmap-Grafiken - GIF - ( Graphics Interchange Format )
• Historie :
• 1987 von CompuServe eingeführt
• gute Resonanz durch gute Kompression mit LZW-Algorith.
• offene Lizenz-Politik von CompuServe erlaubte freie
Verwendung des Formats in eignen Anwendungen
• 2 Versionen : „87a“ und „89a“, erkennbar im Dateiheader
• ab 1994 Probleme mit Patent der Fa. Unisys von 1983 auf LZW
• Einigung mit Compuserve und anderen Herstellern bzgl.
Lizenzzahlungen, ab 1999 auch juristische Schritte von Unisys
gegen Entwickler von freier Software
• Ausgangspunkt für die Entwicklung des PNG-Formates
• Patente sind 2003...2004 abgelaufen, damit ist GIF wieder frei
verwendbar ohne zusätzliche Kosten
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 7
Bitmap-Grafiken - GIF - Technische Parameter
•
•
•
•
•
•
max. Größe von GIF-Bildern 16bit x 16bit – ca. 4 Megapixel
Farbtabelle mit nur 256 Einträgen (=Byte-Index) aus 24bit-Farbwert
für einfache Grafiken und kleinere Fotos ggf. ausreichend
bei größeren Fotos mit Farbverläufen ist Farbquantisierung
-> Störungen durch Dithering-Effekte beim Wiederaufbau
Definition einer Farbe als „Transparent“ möglich -> wird damit
nicht gezeichnet -> Hintergrundanzeige
• Unterstützung des Interlacing beim Bildaufbau (zuerst nur Übertragung
jeder 8. Zeile und deren 8facher Anzeige, danach 4. Und 2 Zeile -> Grobansicht zu Beginn)
• Animation durch Speicherung von Bildfolgen
und deren zyklischer Wiedergabe
Bewertung :
• aus technischer Sicht veraltet, jedoch immer noch
sehr weit verbreitet, da das modernere PNG-Format keine Animationen unterstützt
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 8
4
Bitmap-Grafiken - JPEG - JPEG File Interchange Format (JFIF)
Historie
•
•
Anfang der 90er Jahre entwickeltes Grafikformat zur Speicherung entsprechend der JPEG-Norm
JPEG-Norm beschreibt verschiedene Verfahren Bildkompression (als Standard def. in ISO/IEC 10918-1
bzw. CCITT Recom. T.81) – mit über 41 Unterformaten
•
Nachfolgeformat JPEG2000 (technisch besser, jedoch noch nicht sehr verbreitet)
Technische Parameter
•
•
max. Größe 65.535×65.535 Pixel, meist Abdeckung von 24 bit-Farbräumen
Die JPEG-Norm definiert eine Reihe von (teilweise verlustbehafteten) Konvertierungen :
•
•
•
•
Farbraumumrechnung vom (meist) RGB-Farbraum ins YCbCr-Farbmodell (nach IEC 601) - >
trennt Helligkeits- von der Farbinformation und erlaubt Anpassung an menschl. Auge
• Tiefpassfilterung und Unterabtastung der Farbabweichungssignale Cb und Cr (verlustbe.).
• Einteilung in 8×8-Blöcke und diskrete Kosinustransformation dieser Blöcke
• Quantisierung (verlustbehaftet) und Umsortierung.
• Entropiekodierung meist mit Huffman-Algorithmus
Die Rückrechnung wir in umgekehrter Reihenfolge ausgeführt. (Achtung: Bei mehrfachen Zyklen
kommt es auch zu wiederholten Verlusten (nur in Spezialsoftware vermeidbar beim Drehen/Schneiden ))
In Abhängigkeit vom Bild (feine Strukturen /Farbverläufe) sind Kompressionsraten von ca. 15 für visuell
noch einwandfrei erscheinende Bilder und bis zu 35 für Bilder mit akzeptabler Qualität möglich
Einsatzoptionen : für Fotos und Foto-ähnliche Grafiken, nicht für Grafiken mit sehr hohen
Kontrastsprüngen (Liniengrafiken, geditherte Zeitungsfotos, S/W-Fotos)
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 9
Bitmap-Grafiken - PNG - Portable Network Graphics
Historie
•
•
als Reaktion auf die Patentprobleme beim GIF-Format 1994 entstanden
letzte Version 1.2 von 2003 als ISO-Standard ISO/IEC 15948:2003 und W3C-Empfehlung
PNG (Second Edition) definiert, generell keine Patentbeschränkungen
Technische Parameter
•
•
•
Unterschiedliche Farbpaletten : mit 256 Einträgen (wie GIF), Graustufenbilder mit 1, 2, 4,
8 oder 16 Bit, Farbbildern (RGB) mit 8 oder 16 Bit pro Kanal (=24 / 48 Bit pro Pixel)
Verlustfreie Kompression von PNG in der Regel besser als bei GIF.
KEINE Animationsfähigkeit, da 1995 als eigenes Format (MNG) vorgesehen -> hat sich jedoch
nicht durchgesetzt -> damit auch ein Nachteil von PNG ( APNG als neue Option in Entwicklung)
•
•
Unterstützung von Interlaced-Darstellung, Gammawertspeicherung zur optim. Farbdarst.,
Transparenzen möglich : entweder in Form eines Alphakanals (Zusatzbyte/Word pro Pixel
mit Transparenzinfo – bei GIF kann´n nur eine Farbe transparent sein)
•
IE bis V6.0 hat noch Probleme mit Alphakanaldarst. (nur binär möglich), die neuesten Version der
Browser unterstützen die PNG-Transparenz jedoch
•
Unterstützung von optionalen (versteckten Datenblöcke („Chunks“), welche
Zusatzinformationen (z.B. Copyright (!!) oder Verarbeitungsoptionen enthalten können
(bearbeitbar durch Autorenprogramme wie TweakPNG oder Adobe Fireworks)
Bewertung : Durchdringung langsamer als erwartet, aber langfristig als Standardgrafikformat
für „Nicht-Fotos“ vorstellbar
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 10
5
Bitmap-Grafiken - Lurawave
•
•
proprietäres Dateiformat der Firma LuraTech für Pixelgrafiken - www.luratech.com
durch Wavelet-Kompression deutlich bessere Bildqualität als beim JPEG-Format
• günstig für für hoch auflösende Fotos und Bilder mit feinen Farbübergängen mit
weiteren Zusatzoptionen :
• skalierbare Größe: durch Wavelet-Kompression kann das Bild auch aus einem
Bruchteil der Daten näherungsweise rekonstruiert werden bzw. ist ein Zoomen in
die Pixelgrafik möglich
• Passwortschutz für unterschiedliche Auflösungsgrade (geringe Qualität -> ohne
PW, hohe Qualität gegen Bezahlung)
• Anzeige durch kostenlose Plugins in den Browsern
• Erstellung von LuraWave-Grafiken nur mit kostenpflichtigen LuraWave-Plugins in
bekannten Tools (z.B. Photoshop ) oder Softwaretools erforderlich
• Aktuell : Integration der Lurawave-Algor. in JPEG2000/Part1
Bewertung / Einsatz :
• sehr günstig für qualitativ hochwertige Fotos (z.B. Verkauf von Profi-Fotos)
• ggf. Probleme durch notwendige Installation der Plugins – durch JPEG2000Integrationb langfristig nicht mehr notwendig
• gewisse Abhängigkeit von der Fa. Lurasoft, da kein offener Standard
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 11
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: www.w3.org/TR/SVG12/ www.selfsvg.info/ svg.org
http://www.mozilla.org/projects/svg/ www.croczilla.com/svg/samples/
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 12
6
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)
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 13
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 BrowserUnterstützung
nein - Plugin notwendig
teilweise - wird nach und nach in die
wichtigsten Web-Browser integriert
Style SheetUnterstützung
ja - proprietäres Format, kleine CSS-Untermenge
ja - CSS
Skriptsprachen
ActionScript
ECMAScript, Python, etc.
Document Object
Model
ja - nicht-standardkonformes DOM
ja - SVG DOM
Integration (XHTML,
HTML, XML, etc.)
nein
ja - bislang jedoch nur von wenigen
Betrachtern unterstützt
Servergenerierung mit
von Skriptsprachen
ja - z.B. mit zusätzlichen Bibliotheken wie Ming
ja - JSP, Perl, PHP, Python, etc.
Indexierung durch
Suchmaschinen
ja - dazu ist allerdings Macromedias Search
Engine SDK oder eigener Code erforderlich
ja - wird jedoch noch nicht von allen
großen Suchmaschinen unterstützt
Import in/Export aus
Grafiksoftware
ja - einige Produkte besitzen Import- und
Exportfilter
ja - wurde zusätzlich als
Grafikkaustauschformat entworfen
Quelle: selfsvg.info
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 14
7
SVG -Beispieldefinitionen
Beispiele zu Grundelementen
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<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>
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 15
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>
<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>
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 16
8
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" />
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 17
SVG –Beispieldefinitionen - Filter
SVG besitzt bereits sehr viele Filter, welche teilweise an die Funktionen bekannter
Grafikprogramme heranreichen :
<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>
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 18
9
SVG –Beispieldefinitionen - Transformationen
style="fill:none;stroke:grey;stroke-width:2px" />

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-Vererbung
gestattet)
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 19
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:
x2
y2
z2
1
=
a11
a21
a31
a41
a12 a13
a22 a23
a32 a33
a42 a43
a14
a24
a34
1
*
x1
y1
z1
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.
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 20
10
3D-Transformationen als Matrixoperation
Darstellung der Transformationsmatrix A für Standardtransformationen:
• Verschiebung (engl. Translation)
x+a
y+b
z+c
1
=
1
0
0
a
0
1
0
b
0
0
1
c
0
0
0
1
0
a
0
0
0
0
a
0
0
0
0
1
*
x1
y1
z1
1
*
x1
y1
z1
1
• Skalierung (engl. Zoom )
x*a
y*a
z*a
1
=
• Drehung um α
x2
y2
z2
1
a
0
0
0
(engl. Rotation ) – hier um X-Achse (andere Achsen analog)
=
1
0
0
0
0
cos(α)
sin(α)
0
0
-sin(α)
cos(α)
0
0
0
0
1
*
x1
y1
z1
1
• Spiegelung kann abgeleitet werden aus Drehung um 180°
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 21
SVG –Beispieldefinitionen - Pfadangaben
Pfade werden zur Maskierung und zur Verlaufsangabe von Texten und
Animationen mit eigenständiger Syntax im Attr. D verwendet :
<path d="M20 200 C20 150 200 250 200 200"
style="fill:none;stroke-width:3;stroke:black;" />
<path id="text_path" x="0" y="0"
d="M10 10 C100 150 200 200 200 100 C200 100 200 20 250 20"
fill="none" stroke="silver" />
<text style="font-size:24px">
<textPath xlink:href="#text_path">an einem Pfad ausgerichteter
Text</textPath>
</text>
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 22
11
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" />
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 23
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>
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 24
12
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>
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 25
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 14772 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 Ausstieg von SGI gewisse 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 : http://www.web3d.org/x3d/specifications/#vrml97
http://de.wikipedia.org/wiki/Vrml http://www.ai.sri.com/VRMLSets/
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 26
13
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äschenquelle) + 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
• ...
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 27
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 0 0 1 } } }
Transform { # Move the pen up - a second node specifying a translation
translation 0 2 0
children [
Shape {
geometry Sphere {}
}
]
}
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 28
14
VRML und X3D - Beispiel2 - Level of Detail
ist eine Art Switch-Anweisung als Funktion der Betrachterentfernung
LOD {
center
range
level
0.0 0.0 0.0
[10, 15]
[
# LEVEL III: Detail
Inline {
url "inter-persons-2.wrl"
}
# LEVEL II: The bunch as a whole
Anchor {
...... }
# LEVEL III: ....
Shape { .... }
- weitere Beispiele : siehe Quellen
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 29
Java3D
•
Java-Klassenbibliothek zur Erzeugung, Manipulation und Darstellung von 3D- in
von Java-Anwendungsprogrammen und –Applets
• Erste Version von Java 3D ab 1997 von Sun Microsystem, aktuell Version 1.4
• Sun hat 2004 die Weiterentwicklung eingestellt
• seit Sommer 2004 ist Java 3d als Open Source freigegeben unter
https://java3d.dev.java.net/
• Java 3D bildet 3D-Welt auf darunterliegende OpenGL- oder DirectX-Schnittstelle
mit einem objektorientierten Szenengraphen ab (im Szenengraph sind Objekite
und daruf angewendete Transformationen enthalten)
• Versionen für OpenGL (Win/Unix) und Direct3D (nur Win..)
• hoch wie bei direkter Programmierung mit C und OpenGL oder Direct3D. Daher
besteht die Möglichkeit, leistungsfähige 3D-Szenarien zu entwickeln, welche auf
der GUI visualisiert werden können.
• Leider kein direkter Zugriff auf auf OpenGL- oder Direct3D-Funktionen möglich,
daher ist die Einführung neuer Grafikartenfunktionen nur relativ zeitverzögert
durch neue Java3D-Versionen möglich (Problem für Spieleentwickler)
Bewertung : Nach Ausstieg von SUN kritisch, Beobachtung des Open-Sourceprojektes sinnvoll !
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 30
15
Ausblick zu SVG , VRML und X3D
Allgemeine Einschätzung :
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 ...
2. 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. Open-Source-Projekte laufen (aus der Not heraus)
4.
5.
6.
7.
Langfristig könnte 2d/3D-Visualisierung sehr interessant werden:
siehe Vista mit 3D-Menüs
LOD als Formulareffekt (LOD klein -> nur wichtige Stammdaten, LOD ->
groß : alle Daten zur einer Firma ... )
Rückseite eines Formulars -> vertrauliche Info für den Chef ...
-
Prof. T.Wiedemann
- HTW Dresden -
Folie 31
16

Visualisierung und Animation im Web

Transcription

Documents pareils

Imagefilm zeigt die HTW Dresden aus studentischer Sicht

am 16.03.2016 um 17:00 Uhr in der Lukaskirche Dresden

25.11.2015 - Das Großhandelshaus Wiedemann und

Neue Bestimmungen für Kindersitze und Kindertransport

- Ringhotel Residenz Alt Dresden

als PDF speichern

mit dem Linienbus - SVG Sylter Verkehrsgesellschaft

Elternbrief vom 29.10.15

Autobüchlein Sache des Landtags

Kundenliste:

Alumni-Newsletter 1.2015

VRML X3D - CELLmicrocosmos.org