Presentation on computer graphics systems used in mobile devices and on web. Overview of techniques with details and capabilities, with aim on 2D and 3D graphics. Presentation is in Slovak language.

1. Grafika na internete a pre
mobilné zariadenia
LUKÁŠ TENCER

2. 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

3. 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

4. Video 1

5. Flash, Silverlight, JavaFX
 Propertiálne technológie, Adobe, Microsoft, Oracle
 Flash:
 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

6. Video 2

7. Unity3D
 Riešenie vyžadujúce plugin
 Natívna podpora v Google Chrome a na Android
platforme
 Hárdverová podpora
 Multiplatformové riešenie: Windows, MacOS, Web, Wii,
iPhone/iPad, Android, Xbox360, Playstation 3
 Používa OpenGL, Direct3D, OpenGL ES
 Paralax 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

8. Demo 1
 http://helloracer.com/

9. 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ácie
 WebGL:
 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

10. Video 3

11. Demo 2
 http://helloracer.com/webgl/

12. 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

13. 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

14. iPhone, iPad
 OpenGL ES 2.0
 Podmnožina funkcií OpenGL prispôsobená pre
mobilné zariadenia
 3 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

15. Video 4

16. Android
 OpenGL ES 2.0
 Hárdverová akcelerácia pre 3D a viacjadrové
procesory
 Okrem 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)

17. Video 5

18. 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

19. 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

20. Ďakujem za pozornosť
lukas.tencer@gmail.com
www.tencer.hustej.net

21. 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/

22. Demá
 VRML:
http://edition.cnn.com/SPECIALS/multimedia/vrml/hurricane/fra
mes.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/

23. Otázky?