Renard Wellnitz & Dominik Helleberg | inovexRich Graphicsfür Android
RichGraphicsRenard Wellnitz       Dominik Hellebergrwellnitz@inovex.de   dhelleberg.inovex.de
Agenda         Basics / Architektur         Custom Drawing         Tipps         Renderscript         OpenGL ES & Android
Basics - Glossaro  Viewo  ViewGroupo  Canvaso  SGLo  Surfaceo  SurfaceFlinger
Basics - Drawing                          AnwendungJava         Widgets       OpenGL ES                          Java     ...
Basics - Architektur               Anwendung                       Statusbar          Surface                    Surface  ...
Zwischenstand•  Als Entwickler kommen wir mit den Surfaces nicht direkt in Kontakt•  Sondern wir nutzen APIs oder Standard...
Custom Drawingpublic class MyView extends View {		     	public MyView(Context context, AttributeSet attrs) {	     	     	s...
Custom DrawingDemoVintageThermometerBy Ivan Memruk •  http://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-...
Custom Drawing                                                                   Demo                                     ...
Tipps Blockiere nie den UI Thread
Tippsif (BuildConfig.DEBUG) {	   StrictMode.setThreadPolicy(new	   StrictMode.ThreadPolicy.Builder()	   .detectAll()	   .p...
TippsBitmaps nicht zur Laufzeit skalieren lassen   Achtung: Es gibt ein Bitmap Budget!                OutOfMemoryError    ...
Tipps             Hardwarebeschleunigung                                    ab 3.0               android:hardwareAccelerat...
Tipps   Nutzt das neue   Animation-Framework   Nine old Androids•  http://android-developers.blogspot.de/2011/02/animation...
Tipps      Premature optimization is      the root of all evil      Donald Knuth•    http://developer.android.com/resource...
Renderscript„RenderScript offers a highperformance 3D graphicsrendering and compute APIat the native level“
Renderscript                   AnwendungMessage Queue    Renderscript                                OpenGL ES      engine...
ZwischenstandDas Android GUI-Framework gibt uns•    kleinere 3D Effekte•    mächtige 2D Drawing API•    umfangreiche Anima...
Aufgabe: Portierung einer iPad-App
Anforderungen•  große Bitmaps betrachten (Graphikintensiv)•  Flüssiges Scrollen und Zoomen•  Use Cases mit vielen GUI Komp...
Lösungsansätze•  ImageView    •  zeigt nur ein Bild an    •  Performance•  Canvas    •  mehr Kontrolle aber immer noch nic...
OpenGL ESOpen Graphics Libraryca 250 BefehleOpen GL ESOpenGL® ES is a low-level, lightweight API for advancedembedded grap...
OpenGL ES -VersionenOpenGL ES 2.0                       OpenGL ES 1.1•  Programmable Graphics            •  Fixed Function...
OpenGL ES -Kompatibilität
Welche Version nehme ich jetzt?OpenGL ES 1.1Größtmögliche KompatibilitätEinfachster Einstieg                              ...
OpenGL ES Challenges                      Benefits•  Kein GUI-Framework         •  kein Bitmap-Budget    •  Event System   ...
Lösung für die Challenges          Frameworks?
2 OpenGL ES Frameworks      libgdx                                          AndEngine      •  Entwicklung auf             ...
3 Möglichkeit?
ZwischenstandLösung für•    Picking•    Animationen•    einfache UI Controls•    (theoretisch) Kompatibilität bis zu 1.6  ...
Hallo GLSurfaceView•  Verbindet OpenGL ES mit dem View System•  Kümmert sich um den Activity Lifecycle•  Managed einen eig...
Hallo GLSurfaceView 	private GLSurfaceView mGLView;	 		 	protected void onCreate(Bundle b) {	 	    	super.onCreate(b);	 	 ...
Hallo GLSurfaceView 	@Override	 	protected void onPause() {	 	    	super.onPause();	 	    	mGLView.onPause();	 	}	 	@Overr...
Hallo GLSurfaceViewpublic class MyRenderer implements Renderer {	      	@Override	      	public void onSurfaceCreated(GL10...
Hallo GLSurfaceView Continuous Rendering •    Für Games und Simulationen •    onDrawFrame wird pausenlos aufgerufen Render...
DemoLearnings•  GLSurfaceView kann nicht gut animiert werden•  Aber Position kann durch LayoutParameter animiert werden   ...
OpenGL ES - SurfaceView Learnings setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);setRenderMode(GLSurfaceView.RENDERMOD...
OpenGL ES - SurfaceViewDialog nicht vergessen•    Kapseln Funktionalität•    Verwendung ist unkompliziert•    können (einf...
FazitCanvas API  • Hauptsächlich 2D und (kleinere) 3D-Effekte  • für eigene UI Controls (CustomViews)Renderscript  •  Gute...
Danke!http://inovex.mobi/mtc2012-g/
LinksVintage Thermometer•    http://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/•    http://c...
Rich Graphics & OpenGL mit Android
Rich Graphics & OpenGL mit Android
Nächste SlideShare
Wird geladen in …5
×

Rich Graphics & OpenGL mit Android

2.427 Aufrufe

Veröffentlicht am

Android Graphics API, OpenGL ES

Veröffentlicht in: Technologie
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.427
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Rich Graphics & OpenGL mit Android

  1. 1. Renard Wellnitz & Dominik Helleberg | inovexRich Graphicsfür Android
  2. 2. RichGraphicsRenard Wellnitz Dominik Hellebergrwellnitz@inovex.de dhelleberg.inovex.de
  3. 3. Agenda Basics / Architektur Custom Drawing Tipps Renderscript OpenGL ES & Android
  4. 4. Basics - Glossaro  Viewo  ViewGroupo  Canvaso  SGLo  Surfaceo  SurfaceFlinger
  5. 5. Basics - Drawing AnwendungJava Widgets OpenGL ES Java (ab 3.x) Canvas Bindings (ab 3.x) Render SGL OpenGL ES scriptNative Surface
  6. 6. Basics - Architektur Anwendung Statusbar Surface Surface SurfaceSurface Surface(Views) (Dialog) (Menu) (SurfaceView) SurfaceFlinger Display
  7. 7. Zwischenstand•  Als Entwickler kommen wir mit den Surfaces nicht direkt in Kontakt•  Sondern wir nutzen APIs oder Standard Views zum Rendern der Inhalte •  Canvas API (2D) •  Renderscript (3D) •  OpenGL (3D)
  8. 8. Custom Drawingpublic class MyView extends View { public MyView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onDraw(Canvas canvas) { } }
  9. 9. Custom DrawingDemoVintageThermometerBy Ivan Memruk •  http://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/ •  http://code.google.com/p/widgets4androidhmi/
  10. 10. Custom Drawing Demo ListViewDie Canvas API erlaubt auch 3D-Transformationen•  Nutze dazu die Camera Klasse•  Achtung: Pre Honeycomb keine Hardwarebeschleunigung•  Beispielcode und ausührliche Anleitung im Link•  http://developer.sonymobile.com/wp/2010/05/20/android-tutorial-making-your-own-3d-list-part-1/
  11. 11. Tipps Blockiere nie den UI Thread
  12. 12. Tippsif (BuildConfig.DEBUG) { StrictMode.setThreadPolicy(new StrictMode.ThreadPolicy.Builder() .detectAll() .penaltyDeath() .build()); }
  13. 13. TippsBitmaps nicht zur Laufzeit skalieren lassen Achtung: Es gibt ein Bitmap Budget! OutOfMemoryError
  14. 14. Tipps Hardwarebeschleunigung ab 3.0 android:hardwareAccelerated="true"http://www.google.com/events/io/2011/sessions/accelerated-android-rendering.html
  15. 15. Tipps Nutzt das neue Animation-Framework Nine old Androids•  http://android-developers.blogspot.de/2011/02/animation-in-honeycomb.html•  http://jakewharton.com/advanced-pre-honeycomb-animation/
  16. 16. Tipps Premature optimization is the root of all evil Donald Knuth•  http://developer.android.com/resources/articles/track-mem.html•  http://developer.android.com/guide/developing/debugging/debugging-tracing.html•  http://android-developers.blogspot.de/2010/10/traceview-war-story.html•  http://developer.android.com/guide/developing/debugging/debugging-ui.html
  17. 17. Renderscript„RenderScript offers a highperformance 3D graphicsrendering and compute APIat the native level“
  18. 18. Renderscript AnwendungMessage Queue Renderscript OpenGL ES engine RSSurfaceView
  19. 19. ZwischenstandDas Android GUI-Framework gibt uns•  kleinere 3D Effekte•  mächtige 2D Drawing API•  umfangreiche Animation API•  Ab 3.0 •  Hardwarebeschleunigung •  Renderscript
  20. 20. Aufgabe: Portierung einer iPad-App
  21. 21. Anforderungen•  große Bitmaps betrachten (Graphikintensiv)•  Flüssiges Scrollen und Zoomen•  Use Cases mit vielen GUI Komponenten(ListView, RadioButtons, Labels ...)•  Soll auf ab 2.1 laufen
  22. 22. Lösungsansätze•  ImageView •  zeigt nur ein Bild an •  Performance•  Canvas •  mehr Kontrolle aber immer noch nicht Hardwarebeschleunigt•  Gallery Widget •  kein Zooming •  keine Hardwarebeschleunigung•  Renderscript •  erst ab Honeycomb
  23. 23. OpenGL ESOpen Graphics Libraryca 250 BefehleOpen GL ESOpenGL® ES is a low-level, lightweight API for advancedembedded graphics using well-defined subset profiles ofOpenGL 2 Versionen 1.1 und 2.0
  24. 24. OpenGL ES -VersionenOpenGL ES 2.0 OpenGL ES 1.1•  Programmable Graphics •  Fixed Function Pipeline Hardware•  direkte Kontrolle durch eigene •  weniger Kontrolle -> Shader einfachere Api•  Effekte möglich die in OpenGL •  Schnellerer Einstieg für 1.x sehr schwer umzusetzen Neulinge sind•  höhere Performance
  25. 25. OpenGL ES -Kompatibilität
  26. 26. Welche Version nehme ich jetzt?OpenGL ES 1.1Größtmögliche KompatibilitätEinfachster Einstieg OpenGL ES 2.0 Flexibilität Performance
  27. 27. OpenGL ES Challenges Benefits•  Kein GUI-Framework •  kein Bitmap-Budget •  Event System •  Performance •  Picking •  mächtige API mit viel •  Layouting Kontrolle •  Logik für Widgets •  Wird von allen Devices •  Animationen/Tweening unterstützt•  Device spezifische Besonderheiten
  28. 28. Lösung für die Challenges Frameworks?
  29. 29. 2 OpenGL ES Frameworks libgdx AndEngine •  Entwicklung auf •  Für 2d Games gemacht dem Desktop •  Einfacherer Einstieg möglich •  Ca 17k loc •  Enthält UI –Library •  Etwas höhere Lernkurve •  flexibel •  Ca 85k loc•  http://webcache.googleusercontent.com/search?q=cache:http://www.dustypixels.com/ 2010/11/17/native-android-ogl-game-libraries-3-of-the-best/•  ttp://www.dozer-games.com/spacetale/blog/2011/09/19/andengine-vs-libgdx/
  30. 30. 3 Möglichkeit?
  31. 31. ZwischenstandLösung für•  Picking•  Animationen•  einfache UI Controls•  (theoretisch) Kompatibilität bis zu 1.6 Aber Wie implementiere ich die Bereiche mit komplizierter UI ? (Settings und ähnliche Screens)
  32. 32. Hallo GLSurfaceView•  Verbindet OpenGL ES mit dem View System•  Kümmert sich um den Activity Lifecycle•  Managed einen eigenen Renderthread für uns
  33. 33. Hallo GLSurfaceView private GLSurfaceView mGLView; protected void onCreate(Bundle b) { super.onCreate(b); mGLView = new GLSurfaceView(this); mGLView.setRenderer(new MyRenderer()); setContentView(mGLView); }
  34. 34. Hallo GLSurfaceView @Override protected void onPause() { super.onPause(); mGLView.onPause(); } @Override protected void onResume() { super.onResume(); mGLView.onResume(); }
  35. 35. Hallo GLSurfaceViewpublic class MyRenderer implements Renderer { @Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { gl.glClearColor(0.5f, 0.5f, 0.5f, 1.0f); } @Override public void onSurfaceChanged(GL10 gl, int width, int height) { gl.glViewport(0, 0, width, height); } @Override public void onDrawFrame(GL10 gl) { gl.glClear( GL10.GL_COLOR_BUFFER_BIT); } }
  36. 36. Hallo GLSurfaceView Continuous Rendering •  Für Games und Simulationen •  onDrawFrame wird pausenlos aufgerufen Render When Dirty •  Für reaktive Apps die hauptsächlich auf Usereingaben reagieren •  requestRender() um neu zu rendern
  37. 37. DemoLearnings•  GLSurfaceView kann nicht gut animiert werden•  Aber Position kann durch LayoutParameter animiert werden •  Mit Ruckeln•  onPause zerstört den Context •  Neuladen der Texturen notwendig
  38. 38. OpenGL ES - SurfaceView Learnings setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);setRenderMode(GLSurfaceView.RENDERMODE_CONTINUOUSLY);
  39. 39. OpenGL ES - SurfaceViewDialog nicht vergessen•  Kapseln Funktionalität•  Verwendung ist unkompliziert•  können (einfach) animiert werden•  Höhere Performance durch 16bit Surface möglich dialog.getWindow().setFormat(PixelFormat.RGB_565); Achtung•  Rendern anhalten wenn der Dialog angezeigt wird
  40. 40. FazitCanvas API • Hauptsächlich 2D und (kleinere) 3D-Effekte • für eigene UI Controls (CustomViews)Renderscript •  Gute Alternative ab 3.xOpenGL • wenn Performance, Kompatiblität und aussergewöhnliche GUI das Ziel ist • Bei größeren Projekten Frameworks einsetzen
  41. 41. Danke!http://inovex.mobi/mtc2012-g/
  42. 42. LinksVintage Thermometer•  http://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/•  http://code.google.com/p/widgets4androidhmi/3D Listviewhttp://developer.sonymobile.com/wp/2010/05/20/android-tutorial-making-your-own-3d-list-part-1/Layoutoptimierungenhttp://android-developers.blogspot.de/2009/03/android-layout-tricks-3-optimize-by.htmlTalk zu hardware accelerationhttp://www.google.com/events/io/2011/sessions/accelerated-android-rendering.htmlDas neue Animation Framework•  http://android-developers.blogspot.de/2011/02/animation-in-honeycomb.html•  http://jakewharton.com/advanced-pre-honeycomb-animation/Debugging& Optimierungs-Tools•  http://developer.android.com/resources/articles/track-mem.html•  http://developer.android.com/guide/developing/debugging/debugging-tracing.html•  http://android-developers.blogspot.de/2010/10/traceview-war-story.html•  http://developer.android.com/guide/developing/debugging/debugging-ui.htmlInfos zu OpenGL Framworks•  http://webcache.googleusercontent.com/search?q=cache:http://www.dustypixels.com/2010/11/17/native-android-ogl-game-libraries-3-of- the-best/•  ttp://www.dozer-games.com/spacetale/blog/2011/09/19/andengine-vs-libgdx/

×