Introductory material X3D Basics Introductory material

Declarative Web3D programming Web3D – X3DOM Declarative Web3D programming

X3DOM is the HTML5 expression of X3D Introduction X3DOM is the HTML5 expression of X3D X3DOM = X3D + DOM Advantages*: No plugin is needed to display X3DOM scenes - X3DOM is solely based on standard browser technology, such as HTML5 and WebGL. Based on a new HTML Profile of the ISO Standard X3D, large parts of X3DOM are standard-conformant. This greatly facilitates not only learning X3DOM, but also exchanging X3DOM content. Since the development started in 2009, the X3DOM users and developers have become a large, vital community. If you know how to build simple Web pages, you can exploit your existing knowledge about HTML and the DOM, instead of learning a new programming API like WEBGL, 3js , etc. * From www.x3dom.org

Introduction into X3D language

Sample X3D Code <Scene> <Transform rotation="0 1 0 0.5" translation="0 3 0"> <Shape> <Sphere radius="3" solid="true"/> <Appearance> <ImageTexture url="earth.jpg"/> </Appearance> </Shape> </Transform> </Scene>

The scene graph Κατευθυνόμενος ακυκλικός γράφος (δενδρική δομή) Κόμβος-ρίζα <X3D> στην κορυφή Model-centric approach Γεωμετρία, μέγεθος, εμφάνιση, τοποθεσία μοντέλου –και σχέση με άλλα μοντέλα Κόμβοι (nodes) του δέντρου που περιέχουν πεδία (fields) τα οποία μπορεί να είναι κι άλλοι κόμβοι η απλές τιμές (datatype values)

The scene graph

X3D rendering and animation Διάσχιση top-down, depth-first Single-pass: οι κλήσεις οφείλουν να έπονται των ορισμών Transform nodes: τροποποίηση του συστήματος συντεταγμένων Appearance/material: τροποποίηση των παραμέτρων rendering των γεωμετριών Geometry: rendering πολυγώνων USE: επανασχεδίαση δομών που έχουν οριστεί προηγουμένως με DEF ROUTE: γεγονότα (events) περνούν από ένα πεδίο ενός κόμβου προς ένα σχετικό πεδίο σε έναν άλλο

X3D rendering and animation Η διάσχιση επαναλαμβάνεται συνεχώς Οι τιμές εντός των κόμβων ανανεώνονται, και μια νέα εικόνα επανυπολογίζεται Η νέα εικόνα αντικαθιστά την παλιά (double buffering) Frame rates άνω των 7-10 Hz This drawing process is defined as rendering Other tricks can speed up the process Στοχευμένα φώτα Επανυπολογισμός μόνο των τροποποιημένων υπο-γραφημάτων κλπ…

The X3D event model Μέσω ROUTEs, οι κόμβοι και τα πεδία του γράφου σκηνής αλληλοσυνδέονται Δηλωτική (declarative) προσομοίωση Εμείς απλώς ορίζουμε σχέσεις μεταξύ κόμβων Η προκύπτουσα συμπεριφορά απλώς αναδύεται …συχνά βάσει των επιλογών του χρήστη σε αντίθεση με τον τυπικό προγραμματισμό βάσει εντολών (imperative) Κι όλ’ αυτά σε πραγματικό χρόνο, ώστε να είναι ανεξάρτητο του επεξεργαστή Ισχυρή αλλά και απλή, αναδυόμενη, μοντελοποίηση

X3D file structure File Header X3D header statement Profile statement Full, Immersive, Interactive, Interchange, Core Component statement (optional, multiple) NURBS, Human animation, CAD, META statement (optional, multiple) Authoring and editing information X3D root node X3D scene graph child nodes (multiple)

Primitives Shape Node Box Node Cone Node Cylinder Node Sphere Node Text Node FontStyle Node

Shape and geometry Κάθε κόμβος Shape περιέχει: Appearance and material Κάθε Shape περιέχει μια μοναδική γεωμετρία Η παράλληλη καταγραφή γεωμετρίας και εμφάνισης βελτιστοποιεί την απόδοση στη GPU

Box Node <Box DEF="MyBoxNode" size="8 2 2" solid="true" /> Type accessType Name Default Range Profile SFVec3f initializeOnly size 2 2 2  Interchange SFBool solid true SFNode inputOutput metadata NULL [X3DMetadataObject] Core <Box DEF="MyBoxNode" size="8 2 2" solid="true" />

Box Node

Cone Node Type accessType Name Default Range Profile SFFloat initializeOnly bottomRadius 1  Interchange height 2 SFBool bottom true side solid SFNode inputOutput metadata NULL [X3DMetadataObject] Core <Cone DEF="MyConeNode" bottomRadius="1" height="2" bottom="true" side="true" solid="true"/>

Cone Node

Cylinder Node <Cylinder DEF="MyCylinderNode" Type accessType Name Default Range Profile SFFloat initializeOnly radius 1  Interchange height 2 SFBool bottom true side top solid SFNode inputOutput metadata NULL [X3DMetadataObject] Core <Cylinder DEF="MyCylinderNode" radius="1" height="2" bottom="true" side="true" top="true" solid="true"/>

Cylinder Node

Cylinder Node (cont'd) side = "false" solid = "false" top = "false" solid = "true"

Sphere Node Type accessType Name Default Range Profile SFVec3f initializeOnly radius 1  Interchange SFBool solid true SFNode inputOutput metadata NULL [X3DMetadataObject] Core <Sphere DEF="MySphereNode" radius="2" solid="true" />

Sphere Node

Text Node <Text DEF="MyTextode" length=" " maxExtent="0.0" Type accessType Name Default Range Profile SFNode inoutOutput fontStyle NULL [X3DFontStyleNode] Interchange MFString initializeOnly string [] MFFloat inputOutput length  SFFloat maxExtent 0.0 SFBool solid false metadata [X3DMetadataObject] Core <Text DEF="MyTextode" length=" " maxExtent="0.0" string='"some" "text"' solid="false"> <FontStyle DEF="MyFontStyle"/> </Text> Προσοχή: αν ορίσουμε ταυτόχρονα length και maxExtent, το length κυριαρχεί, αλλά οι χαρακτήρες συμπιέζονται λόγω του maxExtent σαν να επρόκειτο να καταλάβουν το προσδιορισμένο μήκος.

FontStyle Node Type accessType Name Default Range Profile MFString initializeOnly family "SERIF" ["SERIF" | "SANS" | "TYPEWRITER"], plus any valid font name Interchange justify "BEGIN" ["BEGIN" | "END" | "FIRST" | "MIDDLE" | " "] style "PLAIN" ["PLAIN" | "BOLD" | "ITALIC" | "BOLDITALIC" | " "] SFString language " " SFBool horizontal true leftToRight topToBottom SFFloat size 1.0 ( spacing  SFNode inputOutput metadata NULL [X3DMetadataObject] Core

My first example in X3DOM <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>My first X3DOM page</title> <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script> <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link> </head> <body> <h1>Hello, X3DOM!</h1> <p> This is my first html page with some 3d objects. </p> Συνέχεια στην άλλη σελίδα……->

<x3d width='500px' height='400px'> <scene> <shape> <appearance> <material diffuseColor='1 0 0'></material> </appearance> <box></box> </shape> <transform translation='-3 0 0'> <material diffuseColor='0 1 0'></material> <cone></cone> </transform> <transform translation='3 0 0'> <material diffuseColor='0 0 1'></material> <sphere></sphere> </scene> </x3d> </body> </html>

Css + HTML+javascript+X3dom <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>My first X3DOM page</title> <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script> <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'> <script> function changeColor() { if(document.getElementById("color").getAttribute('diffuseColor')=="1 0 0") document.getElementById("color").setAttribute('diffuseColor', '0 0 1'); else document.getElementById("color").setAttribute('diffuseColor', '1 0 0'); } </script>

<style> x3d { border:2px solid darkorange; background: rgba(128, 128, 128, 0.4); } body font-size:110%; font-family:verdana, sans-serif; background-image: url('pattern.png'); margin: 3em; color: lightgray; h1 color: darkorange; </style> </head> <body> <h1>Hello, X3DOM!</h1> <p> This is my first html page with some 3d objects. </p>

<x3d width='500px' height='400px'> <scene> <shape onclick="changeColor();"> <appearance> <material id ="color" diffuseColor='1 0 0'></material> </appearance> <box></box> </shape> <transform translation='-3 0 0'> <shape> <material diffuseColor='0 1 0'></material> <cone></cone> </transform> <transform translation='3 0 0'> <material diffuseColor='0 0 1'></material> <sphere></sphere> </scene> </x3d> </body> </html>

Image Textures in X3DOM You can use  PNG, JPEG or GIF to encode your static Texture data. JPG has a low memory profile but has a lossy compression and it does not support alpha channels (transparency). PNG compression is lossless and can handle alpha (transparency). GIF is also lossless and has alpha support however GIF is not used anymore. PNG supports palette-based images with 24-bit RGB or 32-bit RGBA colors with or without alpha channel. PNG is internet oriented and doesnot support non-RGB color spaces such as CMYK. <x3d width='500px' height='400px'> <scene> <shape> <appearance> <ImageTexture url="myTexture.png"><ImageTexture/> </appearance> <box> </box> </shape> </scene> </x3d>

Movie Textures For using movies as textures we simply need to use the MovieTexture Node. The best solution right now is to encode your content as MP4 and OGV movie and provide alternative sources in your MovieTexture node. <x3d width='500px' height='400px'> <scene> <shape> <appearance> <MovieTexture url='”foo.mp4″,”foo.ogv”'><MovieTexture/> </appearance> <box> </box> </shape> </scene> </x3d>

Audio <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>My first X3DOM page</title> <script type='text/javascript' src='http://www.x3dom.org/download/dev/x3dom.js'> </script> <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'/> </head> <body> <h1>Hello, X3DOM!</h1> <p> Learn how to use sound. </p> <x3d width='500px' height='400px'> <scene> <shape> <appearance> <material diffuseColor='1 0 0'></material> </appearance> <sphere></sphere> </shape> <Sound> <AudioClip loop='true' enabled="true" url='"sound.mp3" "sound.wav"'/> </Sound> </scene> </x3d> </body> </html>