LUKÁŠ TENCER
Grafika na internete a pre mobilné zariadenia
Prehľad
Grafika na Webe Predchádzajúce prístupy (VRML, X3D,..) Súčasné riešenia (HTML5, Silverlight,
Flash,Unity3D...) Vízie do budúcnosti…
Grafika v mobilných zariadeniach Android iPhone BlackBerry Multi-platformové riešenia
VRML, X3D
VRML: Špecifikované 1994, v súčasnosti verzia VRML97 Formát na popis 3D dát, interakcia pomocou JavaScriptu Na beh v prehliadači je potrebný plugin Následník X3D, neskôr COLLADA Konkurencia: Microsoft Chrome, Adobe Atmosphere
X3D: nasledovník VRML, nízka podpora zo strany vývojárov Integrovaný do HTML5 špecifikácie Možnosť natívnej podpory pomocou WebGL + JavaScript
COLLADA: otvorený XML štandard pre (nielen) 3D aplikácie Podporovaná vo väčšine mainstream softvérov (.dae formát) Integrovaný formát na podporu fyzikálnych atribútov scény
Video 1
Flash, Silverlight, JavaFX
Propertiálne technológie, Adobe, Microsoft, OracleFlash:
Najrozšírenejšia platforma pre grafiku na webe Hárdverová akcelerácia pre video a 3D (IE9) Slabá multiplatformová podpora
Silverlight: Alternatíva od Microsoftu k Adobe Flash Zabudovaná 3D podpora Hárdverová akcelerácia videa Vývojová platforma pre Windows Mobile 7 Ukončenie podpory pre desktopovú verziu
JavaFX: Menej rozšírená alternatíva, založená na jazyku Java
Video 2
Unity3D
Riešenie vyžadujúce pluginNatívna podpora v Google Chrome a na Android
platformeHárdverová podporaMultiplatformové riešenie: Windows, MacOS, Web,
Wii, iPhone/iPad, Android, Xbox360, Playstation 3Používa OpenGL, Direct3D, OpenGL ESParalax mapping, reflection mapping, shadow maps,
screen space ambient occlusion, renderovanie do textury, GLSL a Cg shading, PhysX engine
Voľne dostupná verzia pre edukačné účely
HTML5 Canvas, WebGL, O3D
HTML5: nový štandard definovaný W3C konzorciom Natívna podpora v prehliadačoch Canvas pre rastrovú grafiku, SVG pre vektorovú grafiku Podpora 2D ale i 3D obsahu, DOM model, CSS3
transformácieWebGL:
nie je súčasť HTML5 štandardu, pod záštitou Khronos Group OpenGL ES 2.0 Podpora v Google Chrome, FF4 bude v Safari, Opera 3D obsah pre HTML5 Canvas
O3D: Pôvodne 3D plugin od Google, teraz sada API nad WebGL
Video 3
Záver
Vývoj sa uberá smerom k natívnej podpore zo strany prehliadačov
Otvorené štandardy ako HTML5 alebo WebGL stále nemajú dostatočnú natívnu podporu, no je možné ich pustiť i v starších prehliadačoch pomocou pluginov
Zúženie množstva podporovaných platforiem pre Flash, ukončenie podpory Silverlightu dávajú priestor pre nové, otvorené štandardy
Počítačové videnie a web: <device> tag pre priamy prístup k farebnej informácii obrazu zo zariadenia
Grafika pre mobilné zariadenia
Platformovo závislé riešenia: Funkcionalita poskytnutá priamo z SDK Portované riešenia:
Unity3D Flash CS5 Android aplikácie na BlackBerry
Platformovo nezávislé riešenia: Fungujúce na platforme webového prehliadača: Flash,
JavaFX, HTML5 Nevýhodou je potreba webového pripojenia HTML5 Offline aplikácie: multiplatformové, škálovateľné PhoneGap – HTML do Native aplikácie
iPhone, iPad
OpenGL ES 2.0Podmnožina funkcií OpenGL prispôsobená
pre mobilné zariadenia3 hlavné rozdiely:
Odstránenie glBegin a glEnd volaní Pre neprítomnosť Flotaing Point Unit, textúrovacie
koordináty sú ako fixed-point dátový typ, tj. 1.23 bude 1230 so škálovacím faktorom 1/1000
Nastavenia materiálov, svetla nemiesto fixných parametrov nahradené shader-ami
Video 4
Android
OpenGL ES 2.0Hárdverová akcelerácia pre 3D a viacjadrové
procesoryOkrem interpretovaného JAVA kódu,
umožňuje spúšťať i natívny C++ kód, využíva sa napríklad na prístup ku grafickému zariadeniu pomocou SGL (Skia Graphic Library)
Video 5
BlackBerry, Symbian...
Väčšina systémov podporuje OpenGL ES BlackBerry 5, Symbian 3 systémy založené na linuxe
V niektorých prípadoch možná priama multiplatformová podpora
Windows 7 Podpora DirectX 10 a 11
Záver
Väčšina zariadení sa spolieha no otvorený štandard OpenGL ES
Stále populárnejšia je multiplatformová alternatíva pomocou offline webových aplikácií za použitia WebGL a HTML5, problémom je rýchlosť
Pre vývoj je možné použiť programy tretích strán, Grafické Enginy Unity 3D Unreal Engine Ogre 3D – open source
Ďakujem za pozornosť[email protected]
Zdroje
VRML: http://www.w3.org/MarkUp/VRML/X3D: http://www.web3d.org/realtime-3d/COLLADA: http://www.khronos.org/collada/HTML5 Canvas:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
WebGL: http://www.khronos.org/webgl/O3D: http://code.google.com/apis/o3d/JavaFX: http://javafx.com/Silverlight: http://www.silverlight.net/Flash: http://www.adobe.com/products/flashplayer/PhoneGap: http://www.phonegap.com/
Demá
VRML: http://edition.cnn.com/SPECIALS/multimedia/vrml/hurricane/frames.html
X3D: http://cic.nist.gov/vrml/cis/ramcis2_x3dom.html COLLADA: http://maps.google.com HTML5 Canvas:
http://www.kevs3d.co.uk/dev/canvask3d/k3d_test.html http://onepixelahead.com/2010/09/24/10-awesome-html5-
canvas-3d-examples/ WebGL:
http://www.lewpen.com/articles/3d-graphics/webgl/ O3D:
http://code.google.com/apis/o3d/http://code.google.com/apis/o3d/docs/samplesdirectory.html
Flash: http://www.flashmagazine.com/tutorials/detail/flash_3d_basics/
Otázky?
