X3D. Im Rahmen des Lehrfaches Virtual Reality Prof. Dr.-Ing. Brunthaler, Stefan [TH Wildau]

Transkript

1 X3D Im Rahmen des Lehrfaches Virtual Reality Prof. Dr.-Ing. Brunthaler, Stefan [TH Wildau] Team: Tim Liepe Sven Kaden Christin Schulz Dalibor Iljkic David Lenk Julian S. Christian Liebisch

2 Themenbereiche Einführung / X3D Format / Einsatzmöglichkeiten Aufbau & Funktionalität Player und Plug-in`s X3D Browser / Xj3D / SAI X3D Augmented & Mixed Reality X3DOM / Unterschiede / Vorgehensweise Liepe, Kaden, Liebisch, Iljkic, 2 Schulz, Lenk, Julian

3 Inhaltsverzeichnis I Was ist X3D? Geschichtlicher Abriss Das X3D Format Einsatzmöglichkeiten Vor- und Nachteile Tim Liepe 3

4 Was ist X3D? Steht für extensible 3D ISO (-19775) Standardisierte Beschreibungssprache für dreidimensionale Grafikobjekte und Szenen Basierend auf dem XML Standard Betreut durch Web3D Consortium Tim Liepe s 4

5 Geschichtlicher Abriss I X3D liegt der Virtual Reality Modeling Language (VRML) zu Grunde 1995: Veröffentlichung der VRML 1.0 Spezifikation Enthielt noch keine Möglichkeit zur Animation und Interaktion Tim Liepe 5

6 Geschichtlicher Abriss II 1996: Veröffentlichung der VRML 2.0 Spezifikation und Gründung des VRML Consortiums Ergänzung von Animation, Interaktions und Möglichkeit zur Einbindung von Skripten (VRMLScript) Tim Liepe s 6

7 Geschichtlicher Abriss III 1997: nach geringen Änderungen von der ISO unter VRML97 standardisiert Danach Rückzug vieler Firmen, die die Weiterentwicklung voran getrieben hatten Problem: Bandbreite und Rechnerleistung der damaligen Web-Nutzer zu gering für angemessene Nutzung Tim Liepe 7

8 Geschichtlicher Abriss IV 2004: Comeback der 3D Sprache in Form einer XML Darstellung X3D Im gleichen Jahr als internationaler Standard anerkannt Wird bis heute vom Web3D Consortium (vorher VRMLC) betreut und weiterentwickelt Tim Liepe 8

9 Das X3D Format I Grundfunktionalitäten von VRML übernommen und erweitert Unterstützung von aktuellen Hardwaretechnologien Hohe Flexibilität durch XML Tim Liepe 9

10 Das X3D Format II Dateiformate:.x3d = Standard X3D Datei.x3dv = VRML Format.x3db = komprimiertes Format ( b = binär ), auch Verschlüsselung Möglich Verwendung von anderen Formaten: JPEG, PNG, GIF, MPEG, WAV, MIDI, JAVA, JavaScript, Webseiten Tim Liepe 10

11 Das X3D Format III Baukasten Prinzip durch Komponenten, Level und Profile Profile fassen Komponenten und Level zusammen, wobei jedes übergeordnete Profil alle Elemente des jeweils niedrigen enthält Standardprofile: Core, Interchange, Interaktive, Immersive, Full Tim Liepe 11

12 Das X3D Format IV Tim Liepe 12

13 Einsatzmöglichkeiten I Geo- und Rauminformationssysteme z.b. X3D-Earth Tim Liepe 13

14 Einsatzmöglichkeiten II Simulation komplexer physikalischer, technischer, chemischer oder biomedizinischer Abläufe Marketing: Informationen über Produkte, die nach Baukastenprinzip individualisiert werden können Tim Liepe 14

15 Einsatzmöglichkeiten III Visualisierung großer komplexer Informationsmengen, z.b. aus Datenbanken Zusammenarbeit von Entwicklungsingenieuren über große Entfernungen Tim Liepe 15

16 Vor- und Nachteile + Plattformunabhängigkeit (ASCII Format) + Dynamik: z.b. durch Animationen + Interaktivität + Multimedialität + leicht erweiterbar, leichter Austausch von Objekten zwischen anderen Plattformen Tim Liepe 16

17 Vor- und Nachteile II - geringe Geschwindigkeit, bzw. viel Rechenleistung nötig um eine Szene darzustellen - geringe Verbreitung von X3D - Browser-Plugin / Spezieller Viewer wird benötigt Tim Liepe 17

18 Inhaltsverzeichnis II Aufbau und Funktionalitäten von X3D Elemente Interaktionen Player und Plug-in s Performance Voraussetzungen und Installation Christian Liebisch 18

19 X3D Elemente I Aufbau in Baumstruktur Transform (Anordnung jedes Elementes) Shape (Formen des Elements) Apperance (optische Eigenschaften) z.b. Material, MovieTexture Geometrische Type Christian Liebisch 19

20 X3D Elemente II Beispiel <Transform> <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Box size="2 2 2"/> </Shape> </Transform> <Transform> <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Sphere radius="0.1"/> </Shape> </Transform> Christian Liebisch 20

21 X3D Elemente III Translation <Transform translation=" 5 0 0" > <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Box size="2 2 2"/> </Shape> </Transform> <Transform translation=" 0 5 0" > <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Box size="2 2 2"/> </Shape> </Transform> <Transform translation=" " > <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Box size="2 2 2"/> </Shape> </Transform> Christian Liebisch 21

22 X3D Elemente IV Rotation <Transform rotation=" " > <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Box size="2 2 2"/> </Shape> </Transform> <Transform rotation=" " > <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Box size="2 2 2"/> </Shape> </Transform> Christian Liebisch 22

23 Auslagerung ProtoTypen Auslagerung von Elementen zur Strukturierung Beispiel container.x3d <ProtoDeclare name='container1'> <ProtoBody> <Transform> <Shape > <Appearance > <Material ambientintensity="1.0" transparency="0.0" shininess="0.145" diffusecolor=" specularcolor=" "/> <ImageTexture url='"../maps/containermap1.jpg"'/> </Appearance> <Box size=" " /> </Shape> </Transform> </ProtoBody> </ProtoDeclare> Christian Liebisch 23

24 Auslagerung ProtoTypen Einbettung eines ProtoTypen Deklaration über ExternProtoDeclare Tag Einbinden bspw. über das Transform Tag <ExternProtoDeclare name='container1' url=' "komponenten/container.x3d#container1" '/> <Transform translation=" > <ProtoInstance name='container1'/> </Transform> <Transform translation=" "> <ProtoInstance name='container1'/> </Transform> Vorteile: + mehrfach Nutzung möglich + besser Übersichtlichkeit Christian Liebisch 24

25 Interaktionen Elemente einer Aktion Sensoren Routes Interpolatoren Christian Liebisch 25

26 Sensoren I TouchSensor Objekte anklickbar machen wird ins Transform-Tag integriert Eindeutigen Namen vergeben (DEF) <Transform> <TouchSensor DEF= Box' description= Knopf' /> <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Box size="2 2 2"/> </Shape> </Transform> Christian Liebisch 26

27 Sensoren II ProximitySensor Näherungssensor Eindeutigen Namen vergeben (DEF) Reichweite in x, y und z Richtung festlegen wird ins TransformTag integriert <Transform> <ProximitySensor DEF='GlassesProxiSens' description='test' size="8 8 8 /> <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Box size="2 2 2"/> </Shape> </Transform> Christian Liebisch 27

28 Sensoren III Timesensor Realisierung zeitlicher Abläufe Angabe des Zeitintervals Evtl. Wiederholung setzen <Transform> <TimeSensor DEF='TIMER' cycleinterval='20' loop='true'/> <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Box size="2 2 2"/> </Shape> </Transform> Christian Liebisch 28

29 Verknüpfungen ROUTE Reaktionen auf Events Verknüpfung von zwei Knoten 1. Event werfender Knoten 2. Reagierender Knoten Christian Liebisch 29

30 Verknüpfungen ROUTE Struktur: Funktion des Eingangsknotens wird mit Funktion des Ausgangsknotens verbunden <ROUTE fromnode='glassesproxisens' fromfield='entertime' tonode='controller' tofield='entertime'/> Christian Liebisch 30

31 Bewegungen Interpolator PositionInterpolator (Änderung der Position) OrientationInterpolator (Änderung der Rotation) ColorInterpolator (Änderung der Farbe) Scalarinterpolator (Änderung der Transparenz) <Transform> <TimeSensor DEF='TIMER' cycleinterval='20' loop='true'/> <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Box size="2 2 2"/> </Shape> </Transform> Christian Liebisch 31

32 Bewegungen Interpolator II OrientationInterpolator (Änderung der Rotation) Angabe der durchzuführenden Schritte (innerhalb des Zeitintervals) Angabe der zu vollziehenden Drehung (in Schritten und in Bogenmaß <Transform> <TimeSensor DEF='TIMER' cycleinterval='20' loop='true'/> <OrientationInterpolator DEF='ORIENT key=' ' keyvalue=' , , , , '/> <Shape> <Appearance> <Material diffusecolor="0 1 0"/> </Appearance> <Box size="2 2 2"/> </Shape> </Transform> Christian Liebisch 32

33 Struktur: Komplexe Logik Skript <Script DEF= ScriptName"> Felderdeklaration Eingaben, Ausgaben und Interne Variablen Name, Accesstype, Type, [Value] <![CDATA[ ecmascript: Beschreibung der Funktionen Funktionsnamen = Eingabevariablen ]]> </Script> Christian Liebisch 33

34 Beispiel: Komplexe Logik Skript <Script DEF="Controller"> <field name="entertime" accesstype="inputonly" type="sftime" /> <field name="bindbruecke" accesstype="outputonly" type="sfbool" /> <field name="positionhinten" accesstype="initializeonly" type="sfvec3f" value="-2 0 7"/> <field name="sperreinit2" accesstype="initializeonly" type="sfbool" value="true"/> <![CDATA[ ecmascript: function entertime (value) </Script> ]]> { } sperreinit2 = false; Christian Liebisch 34

35 Ansichten ViewPoints Sicht des Nutzers verändert - einzelne Blickpunkte auf die Welt definieren - oder dem Nutzer das Wechsel der Position erleichtern <Group> <Viewpoint DEF='Brueke' description='bruecke' position=" " orientation=' ' /> </Group> Christian Liebisch 35

36 instantplayer Christian Liebisch 36

37 Contact VRML/X3D BS Contact Kommerziell X3D Player der Firma Bitmanagment Viewer für die meisten Browser und viele Betriebssystem Systemvoraussetzungen > 500 MHz CPU Min 256 MB RAM Christian Liebisch 37

38 Editor Software X3D Edit Blender NetBeans mit Plugin Christian Liebisch 38

39 X3D Edit Freies X3D Modelierungs-Software Entwicklung durch Don Brutzman + einfache und plattformunabhängige Installation (Java) + fehlerfreies Programmieren durch Validierung + erleichtertes Programmieren durch Tooltips und Autovervollständigung Homepage: Edit.html Christian Liebisch 39

40 Blender Freie 3D Modelierungs-Software - hoher und komplexer Einarbeitungsaufwand + hohe Funktionalität + starke Community + Export der Ergebnisse in X3D und VRMLmöglich Homepage: Christian Liebisch 40

41 Inhaltsverzeichnis III X3D Browser X3D Browser Architektur X3D Browser Kompatibilität Xj3D Xj3D Applet Beispiel Scene Authoring Interface (SAI) SAI Beispiel X3D Augmented- und Mixed-Reality Live-Daten Übertragung Abkürzungsverzeichnis Quellenangabe Dalibor Iljkic 41

42 X3D Browser Browser-Plugin für HTML/Java oder als standalone Applikation Parsed und zeigt X3D Welt an Browser ermöglicht Animation von und Interaktion mit 3D-Objekten Arbeitsweise eines X3D Browser im Bild 1. beschrieben Dalibor Iljkic 42

43 X3D Browser Architektur Bild 1. Example software architecture for an X3D browser. (link) Dalibor Iljkic 43

44 X3D Browser - Kompatibilität Browser Java Java (ECMA) script FLUX no yes Vivaty no yes Octaga yes yes Xj3D yes yes FreeWRL yes no Tabelle 1. Browser-Plugin Kompatibilität mit anderen Sprachen Dalibor Iljkic 44

45 Xj3D OpenSource Projekt des Web3D Consortium Source Working Group Java-basiertes X3D Toolkit und Browser Xj3D dient zur Integration von X3D-Content in Java-basierte Anwendungen/Applets Zusammen mit Java 2D User Interfaces ein mächtiges Werkzeug Man kann über Scene Authoring Interface (SAI) X3D-Elemente manipulieren Dalibor Iljkic 45

46 Xj3D Applet Beispiel(1) import java.applet.applet; import java.awt.*; import java.util.hashmap; import org.web3d.x3d.sai.*; import org.xj3d.sai.xj3dbrowser; /** * An example class showing how to deploy the Xj3D Browser as an applet. */ public class Xj3D extends Applet{ // The only global variable we need ExternalBrowser browser; // Since this is an Applet, very little is guaranteed about the constructor public Xj3D() { } // Methods from Applet public void init() { setlayout(new BorderLayout()); browser = getbrowser(); loadscene(); } Dalibor Iljkic 46

47 Xj3D Applet Beispiel(2) // Local methods // Generate the browser private ExternalBrowser getbrowser() { HashMap<String, Boolean> requestedparameters = new HashMap<String, Boolean>(); requestedparameters.put("xj3d_consoleshown", Boolean.TRUE); requestedparameters.put("xj3d_locationshown", Boolean.FALSE); X3DComponent comp = BrowserFactory.createX3DComponent(requestedParameters); Xj3DBrowser browser = (Xj3DBrowser) comp.getbrowser(); setbackground(color.blue); add((component) comp, BorderLayout.CENTER); setvisible(boolean.true); } return browser; // Create the scene implementation and add it to the world private void loadscene() { X3DScene mainscene = browser.createx3dfromurl(new String[] {getparameter("modelurl")}); browser.replaceworld(mainscene); } } Dalibor Iljkic 47

48 Scene Authoring Interface (SAI) Software-Schnittstelle die Zugriff auf X3D- Elemente bereitstellt SAI-Plugin für Java, C/C++, JavaScript SAI ermöglicht externer Software X3D-Elemente zur Laufzeit zu manipulieren Sensoren auswerten Objektbewegungen einbinden Echtzeit-Daten lassen sich in VR-Welt einbinden Dalibor Iljkic 48

49 SAI - Create Nodes Beispiel(1) /** * A simple example of how to use SAI to load a scene and create a node. */ public class CreateNodeSAIDemo extends JFrame { /** * Constructor for the demo. */ public CreateNodeSAIDemo() { setdefaultcloseoperation(exit_on_close); Container contentpane = getcontentpane(); // Setup browser parameters HashMap requestedparameters = new HashMap(); // Create an SAI component X3DComponent x3dcomp = BrowserFactory.createX3DComponent(requestedParameters); // Add the component to the UI JComponent x3dpanel = (JComponent)x3dComp.getImplementation(); contentpane.add(x3dpanel, BorderLayout.CENTER); // Get an external browser ExternalBrowser x3dbrowser = x3dcomp.getbrowser(); setsize(600,500); setvisible(true); ProfileInfo profile = null; Dalibor Iljkic 49

50 SAI Create Nodes Beispiel(2) try { profile = x3dbrowser.getprofile("immersive"); } catch(notsupportedexception nse) { System.out.println("Immersive Profile not supported"); System.exit(-1); } X3DScene mainscene = x3dbrowser.createscene(profile, null); //We can now begin to create nodes and add them to our world. //The createnode method is used to create new nodes. X3DNode shape = mainscene.createnode("shape"); SFNode shape_geometry = (SFNode) (shape.getfield("geometry")); X3DNode box = mainscene.createnode("box"); shape_geometry.setvalue(box); } mainscene.addrootnode(shape); x3dbrowser.replaceworld(mainscene); public static void main(string[] args) { } CreateNodeSAIDemo demo = new CreateNodeSAIDemo(); } Dalibor Iljkic 50

51 X3D Augmented und Mixed Reality Bild 2. Erleuterung von dem Begriffen Virtual, Augmented und Mixed Reality (link) Dalibor Iljkic 51

52 Live-Daten Übertragung Sensors Server DB Bild 3. Wie live-data Übertragung funktioniert Dalibor Iljkic 52

53 Inhaltsverzeichnis IV Allgemein Hello World Programm Unterschiede zu X3D Vorgehensweise Modelle generieren Interaktionen Live-Daten einbinden Fazit Sven Kaden 53

54 Allgemein I Entwicklung um 2010 durch: Fraunhofer-Institut für graphische Datenverarbeitung (IGB) TU Darmstadt Web3D-Konsortium Ziel: 3D Content genauso wie eine HTML-Seite im Browser deklarativ darstellen Ohne Browser-Plugins Sven Kaden 54

55 Allgemein II Aktueller Status: Verwendet WebGL Browser die WebGL unterstützen sind für X3DOM geeignet Alle aktuellen Browser Auch auf Mobilgeräte möglich Integraler Bestandteil von HTML5 X3D-Standard komplett übernommen Sven Kaden 55

56 Motivation I X3DOM Dynamische Menü- Führung Sven Kaden 56

57 Motivation II X3DOM GIS-Daten darstellen Von der TU- Freiberg Sven Kaden 57

58 Motivation III X3DOM & Physics Mit JS-DOM werden neue Transforms erzeugt Sven Kaden 58

59 Installation I Downloade x3dom.js, x3dom.css und x3dom.swf von Kopiere alle Dateien in den selben Ordner wie die index.html/.php Binde die x3dom.js und die x3dom.css in die index.html/.php ein Aktuelle Version: Sven Kaden 59

60 Installation II Basisprogramm <!DOCTYPE html > <html xmlns=" <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>hello World</title> <link rel="stylesheet" type="text/css" href="x3dom.css" /> <script type="text/javascript" src="x3dom.js"></script> </head> <body>... </body> </html> Sven Kaden 60

61 Hello World Programm I Sven Kaden 61

62 Hello World Programm II <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>hello World</title> <link rel="stylesheet" type="text/css" href="x3dom.css" /> <script type="text/javascript" src="x3dom.js"></script> </head> <body> <h1>xhtml Hello World</h1> <p>with X3D-namespace and case senstive...</p> <X3D xmlns=" showstat="false" showlog="false x="0px" y="0px" width="400px" height="400px" altimg="hellox3d-alt.png"> <Scene> <Viewpoint position=' ></Viewpoint> <Shape> <Appearance> <Material diffusecolor=' ' ></Material> </Appearance> <Box DEF='box'></Box> </Shape> </Scene> </X3D> </body> </html> Sven Kaden 62

63 Unterschiede zu X3D I Syntax X3DOM unterstützt keine selbstschließenden Tags <Material diffusecolor=' ' specularcolor=' ' shininess='0.145 /> <Material diffusecolor=' ' specularcolor=' ' shininess='0.145 > </Material> Sven Kaden 63

64 Unterschiede zu X3D II Prototype I X3DOM unterstützt keine Deklaration von Prototypen Abhilfe schafft PHP <Transform> <Shape > <Appearance > <Material ambientintensity="1.0" transparency="0.0" shininess="0.145" diffusecolor=" " specularcolor=" "></Material> <ImageTexture url='"containermap1.jpg"'></imagetexture> </Appearance> <Box size=" " ></Box> </Shape> </Transform> container.html Sven Kaden 64

65 Unterschiede zu X3D III Prototype II <html xmlns=" <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>hello World</title> <link rel="stylesheet" type="text/css" href="x3dom.css" /> <script type="text/javascript" src="x3dom.js"></script> </head> <body> <h1>html5 Hello World</h1> <x3d xmlns=" showstat="false" showlog="false" x="0px" y="0px" width="400px" height="400px" altimg="hellox3d-alt.png"> <scene> <viewpoint position='0 0 10' ></viewpoint> <?php include('container.html');?> </scene> </x3d> </body> </html> index.php Sven Kaden 65

66 Unterschiede zu X3D IV Animation I Durch CSS3-Transformation Bisher nur in Google Chrome implementiert <style type="text/css"> #container{-webkit-animation: spincontainer 3s infinite linear; spincontainer { from{ -webkit-transform: rotatey(0); } to { -webkit-transform: rotatey(360deg); } } </style> <Transform id="container"> <Shape > <Appearance > <Material ambientintensity="1.0" transparency="0.0" shininess="0.145" diffusecolor=" " specularcolor=" "></Material> <ImageTexture url='"containermap1.jpg"'></imagetexture> </Appearance> <Box size=" " ></Box> </Shape> </Transform> 17 Beispiel Sven Kaden 66

67 Unterschiede zu X3D V Animation II X3D-Animation weiterhin verwendbar Wird von allen Browser unterstützt! <Transform DEF="container"> <Shape > <Appearance > <Material ambientintensity="1.0" transparency="0.0" shininess="0.145" diffusecolor=" " specularcolor=" "></Material> <ImageTexture url='"containermap1.jpg"'></imagetexture> </Appearance> <Box size=" " ></Box> </Shape> </Transform> <TimeSensor DEF='TS_container' cycleinterval='3' loop='true'></timesensor> <OrientationInterpolator DEF='OI_container' key='0, 0.5, 1' keyvalue=' , , '> </OrientationInterpolator> <ROUTE fromnode='ts_container' fromfield='fraction_changed' tonode='oi_container' tofield='set_fraction'> </ROUTE> <ROUTE fromnode='oi_container' fromfield='value_changed' tonode='container' tofield='set_rotation'> </ROUTE> 17 Beispiel Sven Kaden 67

68 Unterschiede zu X3D VI Interaktion I JavaScript-Events können an Shape oder Transform angemeldet werden JS-Event Beschreibung Beispiel onclick Einfacher Mausklick hier onmouseover Mit Maus über Objekt fahren hier onmousedown Bei Mausdruck hier onmousemove Mit Maus über Objekt bewegen hier onmouseout Mit Maus aus Objekt bewegen hier onmouseup Bei Mausdruck loslassen hier Sven Kaden 68

69 Unterschiede zu X3D VII Animation II Beispiel <script type="text/javascript"> var active = true; function dosth() { if(active){ document.getelementbyid("ts_containertoright").setattribute("enabled","false"); document.getelementbyid("ts_containertoleft").setattribute("enabled","true"); active = false; } else { document.getelementbyid("ts_containertoleft").setattribute("enabled","false"); document.getelementbyid("ts_containertoright").setattribute("enabled","true"); active = true; } } </script> Beispiel Sven Kaden 69

70 Unterschiede zu X3D VIII Sensoren Die X3D-Sensoren sind nur zu einem Bruchteil übernommen X3D TouchSensor ProximitySensor TimeSensor VisibiltySensor CylinderSensor PlaneSensor X3DOM JS-Event onclick Noch nicht implementiert. Frage von Wochen. Übernommen Nicht implementiert Nicht implementiert Nicht implementiert Sven Kaden 70

71 Unterschiede zu X3D IX Tutorials IX-Kompakt Webdesign Magazin nach Anfrage bei Sven Kaden ausleihbar Sven Kaden 71

72 Modelle generieren I Landschaftsgenerator Sven Kaden 72

73 Modelle in X3D konvertieren VrmlMerge instantreality.com Vizx3D (kommerziell) X3D-Edit Sven Kaden 73

74 Live-Daten einbinden I Einmalig laden: PHP 1. Bei Ladevorgang der Seite, werden mit PHP die aktuellen Daten aus der Datenbank oder andere Services ausgelesen. 2. Abhängig von den Daten werden die X3DOM-Objekte dynamisch über den Befehl include() eingebunden und angezeigt Sven Kaden 74

75 Live-Daten einbinden II Periodisches Aktualisieren: AJAX 1. Bei dem Ladenvorgang der Seite wird eine JavaScript-Funktion gestartet, die periodisch die Daten aktualisiert. 2. Bei jeder Aktualisierung wird mittels httprequest eine entfernte PHP-Datei auf dem Server aufgerufen. 3. Die PHP-Datei liest die aktuellen Daten aus der Datenbank oder andere Services aus und schickt diese zur HTML-Seite zurück. 4. Mittels JS-DOM aktualisiert die JavaScript-Methode alle Daten auf der HTML-Seite Sven Kaden 75

76 Live-Daten einbinden III Periodisches Aktualisieren: JQuery JavaScript auf höhere Abstraktionsebene Unterscheidung für Mobile-Browser nötig 1. Bei dem Ladenvorgang der Seite wird eine JavaScript-Funktion gestartet, die periodisch die Daten aktualisiert. 2. Bei jeder Aktualisierung werden über JQuery die aktuellen Daten aus der Datenbank gelesen. 3. Mittels JQuery aktualisiert die JavaScript-Methode alle Daten auf der HTML-Seite Sven Kaden 76

77 Alternativen XML3D Entwickler: Universität Saarland (Computergrafik-Labor) Erweitert HTML und CSS durch die Möglichkeit 3D-Elemente darzustellen Sven Kaden 77

78 Fazit Recht junges OpenSource-Projekt (2010) Bis auf wenige Objekte ist X3D vollständig adaptiert Selbst auf mobile Endgeräte lauffähig Verwendet die Grafikkarte (WebGL) Alle aktuellen Browser unterstützen WebGL Keine Plugins wie Octaga notwendig Sven Kaden 78

79 Abkürzungsverzeichnis Abkürzung Bezeichnung DB Datenbank HTML Hypertext Markup Language SAI Scene Authoring Interface WebGL Web Graphics Library X3D Extensible 3D Liepe, Kaden, Liebisch, Iljkic, Schulz, Lenk, Julian 79

80 Quellenangabe [1] Kloss, Jörg H. (2010), X3D - Programmierung interaktiver 3D-Anwendungen für das Internet, Addison-Wesley Verlag, ISBN [2] Henning, Peter A. (2007), Taschenbuch Multimedia, Carl Hanser Verlag München, ISBN [3] Web3D Consortium: (Zugriff ). [1-2] Sebastian Rikowski (Zugriff ) [2-2] David Lee, Teri Day, Mirco Zehnder, Hochschule für Wirtschaft Luzern : (Zugriff ) [3-2] VRML & X3D (2005): Christian Fritsche, Florian Moritz, Christoph Gerstle (Zugriff ) [4-3] Plug-in and browser compliance (Zugriff ). [5-3] Hudson, Alan (2007), SAI Tutorial (Zugriff ) Liepe, Kaden, Liebisch, Iljkic, Schulz, Lenk, Julian 80

81 Quellenangabe II [6-3] SAI Example (Zugriff ). [7-3] Xj3D Homepage (Zugriff ). [8-3] Xj3D Browser Applet Example (Zugriff ). [1-4] IX Kompakt Wegdesign (2/2012), Heise Verlag, ISBN (Zugriff ). [2-4] X3DOM Forum: (Zugriff ). [3-4] X3DOM Portal: (Zugriff ). [4-4] X3DOM IX Portal: (Zugriff ) Liepe, Kaden, Liebisch, Iljkic, Schulz, Lenk, Julian 81