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

Demo 1

http://helloracer.com/

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

Demo 2

http://helloracer.com/webgl/

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ťlukas.tencer@gmail.comwww.tencer.hustej.net

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?