Android Graphics API, OpenGL ES

1. Renard Wellnitz & Dominik Helleberg | inovex
Rich Graphics
für Android

2. Rich
Graphics
Renard Wellnitz Dominik Helleberg
rwellnitz@inovex.de dhelleberg.inovex.de

3. Agenda
Basics / Architektur
Custom Drawing
Tipps
Renderscript
OpenGL ES & Android

4. Basics - Glossar
o View
o ViewGroup
o Canvas
o SGL
o Surface
o SurfaceFlinger

5. Basics - Drawing
Anwendung
Java
Widgets OpenGL ES
Java (ab 3.x)
Canvas Bindings
(ab 3.x)
Render
SGL OpenGL ES script
Native
Surface

6. Basics - Architektur
Anwendung Statusbar
Surface Surface Surface
Surface Surface
(Views) (Dialog) (Menu)
(SurfaceView)
SurfaceFlinger
Display

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. Custom Drawing
public class MyView extends View {
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
}
}

9. Custom Drawing
Demo
Vintage
Thermometer
By Ivan Memruk
• http://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/
• http://code.google.com/p/widgets4androidhmi/

10. Custom Drawing
Demo
ListView
Die 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. Tipps
Blockiere nie den UI Thread

12. Tipps
if (BuildConfig.DEBUG) {
StrictMode.setThreadPolicy(new
StrictMode.ThreadPolicy.Builder()
.detectAll()
.penaltyDeath()
.build());
}

13. Tipps
Bitmaps nicht zur Laufzeit skalieren lassen
Achtung: Es gibt ein Bitmap Budget!
OutOfMemoryError

14. Tipps
Hardwarebeschleunigung
ab 3.0
android:hardwareAccelerated="true"
http://www.google.com/events/io/2011/sessions/accelerated-android-rendering.html

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. 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. Renderscript
„RenderScript offers a high
performance 3D graphics
rendering and compute API
at the native level“

18. Renderscript
Anwendung
Message Queue
Renderscript
OpenGL ES
engine
RSSurfaceView

20. Zwischenstand
Das Android GUI-Framework gibt uns
• kleinere 3D Effekte
• mächtige 2D Drawing API
• umfangreiche Animation API
• Ab 3.0
• Hardwarebeschleunigung
• Renderscript

22. Aufgabe: Portierung einer iPad-App

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

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

25. OpenGL ES
Open Graphics Library
ca 250 Befehle
Open GL ES
OpenGL® ES is a low-level, lightweight API for advanced
embedded graphics using well-defined subset profiles of
OpenGL
2 Versionen
1.1 und 2.0

26. OpenGL ES -Versionen
OpenGL 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

27. OpenGL ES -Kompatibilität

28. Welche Version nehme ich jetzt?
OpenGL ES 1.1
Größtmögliche Kompatibilität
Einfachster Einstieg
OpenGL ES 2.0
Flexibilität
Performance

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

30. Lösung für die Challenges
Frameworks?

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

32. 3 Möglichkeit?

33. Zwischenstand
Lö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)

34. Hallo GLSurfaceView
• Verbindet OpenGL ES mit dem View System
• Kümmert sich um den Activity Lifecycle
• Managed einen eigenen Renderthread für uns

35. Hallo GLSurfaceView
private GLSurfaceView mGLView;
protected void onCreate(Bundle b) {
super.onCreate(b);
mGLView = new GLSurfaceView(this);
mGLView.setRenderer(new MyRenderer());
setContentView(mGLView);
}

36. Hallo GLSurfaceView
@Override
protected void onPause() {
super.onPause();
mGLView.onPause();
}
@Override
protected void onResume() {
super.onResume();
mGLView.onResume();
}

37. Hallo GLSurfaceView
public 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);
}
}

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

39. Demo
Learnings
• GLSurfaceView kann nicht gut animiert werden
• Aber Position kann durch LayoutParameter animiert werden
• Mit Ruckeln
• onPause zerstört den Context
• Neuladen der Texturen notwendig

40. OpenGL ES - SurfaceView
Learnings
setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
setRenderMode(GLSurfaceView.RENDERMODE_CONTINUOUSLY);

41. OpenGL ES - SurfaceView
Dialog 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

42. Fazit
Canvas API
• Hauptsächlich 2D und (kleinere) 3D-Effekte
• für eigene UI Controls (CustomViews)
Renderscript
• Gute Alternative ab 3.x
OpenGL
• wenn Performance, Kompatiblität und
aussergewöhnliche GUI das Ziel ist
• Bei größeren Projekten Frameworks einsetzen

43. Danke!
http://inovex.mobi/mtc2012-g/

44. Links
Vintage Thermometer
• http://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/
• http://code.google.com/p/widgets4androidhmi/
3D Listview
http://developer.sonymobile.com/wp/2010/05/20/android-tutorial-making-your-own-3d-list-part-1/
Layoutoptimierungen
http://android-developers.blogspot.de/2009/03/android-layout-tricks-3-optimize-by.html
Talk zu hardware acceleration
http://www.google.com/events/io/2011/sessions/accelerated-android-rendering.html
Das 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.html
Infos 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/