computer graphics on mobile devices - tu wien€¦ · use sdk tools to build application. load...
TRANSCRIPT
![Page 1: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/1.jpg)
Computer Graphics on Mobile Devices
VL SS2010 3.0 ECTS
Peter Rautek
![Page 2: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/2.jpg)
Rückblick
Peter Rautek 1
MotivationVorbesprechung
SpielVL FrameworkAblauf
Android BasicsAndroid Specifics
Activity, Layouts,Service, Intent, Permission, etc.
Entwicklung mit Eclipse
![Page 3: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/3.jpg)
Overview
Development with EclipseOverviewDemo
Advanced Android Topics3D Graphics
The Java WayThe C/C++ Way
Debugging OpenGLConfiguration, Resources and Localization
OpenGL ESHistoryOverview
Lab Phase IIPeter Rautek 2
![Page 4: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/4.jpg)
Development with Eclipse
BreakpointsVariablesPerspectivesLogCat
FiltersCallstackSubclipse
Team itemBrowserImport
Peter Rautek 3
![Page 5: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/5.jpg)
OpenGL „The Java Way“
Implement the lifecycle methods in ActivityonPauseonResume
Extend the GLSurfaceViewCall the setRenderer method in GLSurfaceView
Implement the GLSurfaceView.RendereronSurfaceCreatedonSurfaceChangedonDrawFrame
Peter Rautek 4
![Page 6: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/6.jpg)
GLSurfaceView
Manages memory (surface), composited into the view systemManages OpenGL rendering to the surfaceRequires a implementation of the GLSurfaceView.Renderer interfaceRendering runs in own threadOn-demand vs. continuous renderingOpenGL debuggingDefault: 16-bit R5G6B5, 16-bit depth buffer
Peter Rautek 5
![Page 7: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/7.jpg)
Renderer
Runs in separate threadonSurfaceCreated
Called when The activity is startedThe OpenGL context was destroyed and recreated
Load TexturesonSurfaceChanged
Called when size/orientation changesonDrawFrame
Peter Rautek 6
![Page 8: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/8.jpg)
OpenGL „The Java Way“
ProVery easy to implement
ConLower performanceGarbage collection can lead to hickupsThreading problem
Game engine loop runs in render thread Thread synchronization
Check out the API demos!
Peter Rautek 7
![Page 9: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/9.jpg)
OpenGL “The C/C++ Way”Native development kit (NDK)
Native implementationGenerate make filesBuild shared libraryUse SDK tools to build application
Load shared library from Javastatic {
System.loadLibrary(„mylibrary“);}
Declare native methodsprivate static native void nativeMyFunction();
Call native functions from GLSurfaceViewTwo demo apps in the NDK
san-angeles: OpenGL 1.xhello-gl2: OpenGL 2.x
Android 2.0 and higherNot running in emulator
Peter Rautek 8
![Page 10: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/10.jpg)
OpenGL “The C/C++ Way”
ProPerformance
ConHarder to implementCumbersome developmentDebugging
Check out the NDK demos!
Peter Rautek 9
![Page 11: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/11.jpg)
Debugging OpenGL
@Overridepublic void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mGLSurfaceView.setGLWrapper(new GLWrapper(){private Writer logger = new Writer(){
//implementing the writer interface};
@Overridepublic GL wrap(GL gl) {
return GLDebugHelper.wrap(gl, GLDebugHelper.CONFIG_CHECK_GL_ERROR|GLDebugHelper.CONFIG_LOG_ARGUMENT_NAMES,logger);
}});
}
Peter Rautek 10
Context Wrapper (see AboutActivity)
![Page 12: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/12.jpg)
Android Development
MultithreadingUser interface (Activity)Rendering (GLSurfaceView.Renderer)Your own threads
SynchronizationNecessary to avoid concurrency problemsHandler class provides message queueExample: Display frame rate
Peter Rautek 11
![Page 13: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/13.jpg)
Performance
Always know your frame rate!Log (+easy, -floods your Log, -bad visibility)Onscreen
OpenGL Overlay Write text to bitmapRender as texture
GUI Overlay Use FrameLayoutOverlay TextView
Peter Rautek 12
![Page 14: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/14.jpg)
GUI Overlay
Peter Rautek 13
![Page 15: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/15.jpg)
Android Development
How to add sources No short answer to this<sdk>\platforms\android-1.6\Create sources -> <sdk>\platforms\android-1.6\sourcesCopy sources to this folderAdditional info and sources for other versions:http://code.google.com/p/android/issues/detail?id=979
Peter Rautek 14
![Page 16: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/16.jpg)
Resources and Configurations
Configurations depend onDevice
Screen sizeKeyboard
User preference Language
Situation Orientation
SolutionMultiple resources in one apk
Peter Rautek 15
![Page 17: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/17.jpg)
Resources and Configurations
Change of configurationDestroying activityRestarting activity with new configuration
Resource foldersLoading of resource in appropriate folderDepending on
Peter Rautek 16
![Page 18: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/18.jpg)
Example: Different Languages
Localizationres/values/string.xml The default must contain all stringsres/values-de/string.xmlThe de folder may contain localized strings for German versionres/values-fr/string.xmlThe fr folder may contain localized strings for French version
Peter Rautek 17
![Page 19: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/19.jpg)
Example: Switching Orientation
Orientationres/layout-port/main.xmlres/layout-land/main.xml
Handle orientation changeFixed orientation (no change occurs)
Specifiy in AndroidManifest fileCustom behavior
Specify in AndroidManifest fileImplement onConfigurationChanged()
Peter Rautek 18
![Page 20: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/20.jpg)
Overview
Development with EclipseOverviewDemo
Advanced Android Topics3D Graphics
The Java WayThe C/C++ Way
Debugging OpenGLConfiguration, Resources and Localization
OpenGL ESHistoryOverview
Lab Phase IIPeter Rautek 19
![Page 21: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/21.jpg)
Vienna University of Technology 20
OpenGL – Who, What, and Most Importantly Why?
Windows/Linux OpenGL
Hardware
Renderengine / Scenegraph / Graphics Library
Application
![Page 22: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/22.jpg)
Vienna University of Technology 21
OpenGL Specification
Since 2006 under control of Khronos GroupNon profit consortiumOpen standardsRoyalty free
Working GroupsOpenGL, OpenGL ES, OpenCL, COLLADA, OpenVG, OpenSL ES, EGL, WebGL, etc.
MembersAMD, Apple Inc., ARM Holdings, Creative Labs, id Software, Ericsson, Intel Corporation, Motorola, Nokia, Nvidia, Samsung Electronics, Sony Computer Entertainment, Sun Microsystems, Texas Instruments, etc.
Links: www.khronos.org, www.opengl.org
![Page 23: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/23.jpg)
Vienna University of Technology 22
OpenGL Design Goals
Platform independentLanguage independentConsistency
Conformance tests and required verificationNot pixel exact, but invariant across passes
Complete implementationsMissing features emulated in software
Clean interface State machineMost states are orthogonal
ExtensibilityFavors innovation
![Page 24: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/24.jpg)
Vienna University of Technology 23
OpenGL in a Nutshell
Small number of primitivesDefined by vertices
![Page 25: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/25.jpg)
Vienna University of Technology 24
OpenGL in a Nutshell
Shading
wire frame hidden line flat shading
gouraud textured combination
![Page 26: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/26.jpg)
Vienna University of Technology 25
Graphics Pipeline
Application
Geometry
Rasterization
Texture
Fragment
Display
Command
ApplicationScene traversalObject, and camera movementAnimationOcclusion/Visibility CullingLevel of Detail (LoD) selection
GeometryTransformation (model, world, view) View ProjectionCulling (e.g., back-face)Perspective DivisionClippingScreen space transformation
Triangle SetupRasterizationTexturingFragment
ShadingDepth Buffering
![Page 27: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/27.jpg)
OpenGL vs. OpenGL ES
Specification OpenGL ES 1.0 written against OpenGL 1.3OpenGL ES 1.1 written against OpenGL 1.5OpenGL ES 2.0 written against OpenGL 2.0
DifferencesSingle vs. DoubleFixed vs. FloatingNo glBegin(), glEnd(), glVertex()No display listsetc.
Peter Rautek 26
![Page 28: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/28.jpg)
Example
SupportedNot supportedFixed pointSingle precisionOther restrictionsAdditional enumerant
Peter Rautek 27
![Page 29: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/29.jpg)
Vienna University of Technology 28
Short History of OpenGL (ES)1991 OpenGL ARB created1992 OpenGL 1.0 (June 30)1995 OpenGL 1.11996 OpenGL specification made public1998 OpenGL 1.22000 OpenGL goes open source2001 OpenGL 1.32001 OpenGL ES 1.02002 OpenGL 1.42003 OpenGL 1.52003 OpenGL ES 1.12004 OpenGL 2.0 (shaders)2004 OpenGL ES 2.02008 OpenGL 3.02010 OpenGL 4.0
![Page 30: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/30.jpg)
Vienna University of Technology 29
OpenGL ES 1.0 vs. 2.0
Main novelty: shading language GLSLVertex and fragment shaders
Replace fixed functionalityShader: high-level language (C-like)OpenGL driver: compiler and linker for shadersVertex-, texture coordinates etc.: abstract input values to shader functionArbitrary calculations possible
![Page 31: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/31.jpg)
Overview
Development with EclipseOverviewDemo
Advanced Android Topics3D Graphics
The Java WayThe C/C++ Way
Debugging OpenGLConfiguration, Resources and Localization
OpenGL ESHistoryOverview
Lab Phase IIPeter Rautek 30
![Page 32: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/32.jpg)
Phase II
Targeting und LocalizationLanguage, screen size
Implement a stubLevelActivity, GLSurfaceView, Renderer
Framework IntegrationIcon, return values, documentation
Implement your levelFunctions, game play, first hardware tests
Detailed instructions online
Peter Rautek 31
![Page 33: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/33.jpg)
Ankündigung - Nächste VO
Anton PirkerCross-Platform DevelopmentLaptop mitnehmen
EclipseJavaAndroid
Peter Rautek 32
![Page 34: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/34.jpg)
Where to Start - Links
Graphics Pipeline Overview (by Dave Salvator)http://www.extremetech.com/article2/0,2845,9722,00.aspMany, many more – google for it!
Open GL ES Specifications:http://www.khronos.org/opengles/spec/
AndroidGLSurfaceViewhttp://developer.android.com/reference/android/opengl/GLSurfaceView.htmlResources and Internationalizationhttp://developer.android.com/guide/topics/resources/resources-i18n.htmlNDKhttp://developer.android.com/sdk/ndk/index.htmlAPI demoshttp://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/index.html
Peter Rautek 33
![Page 35: Computer Graphics on Mobile Devices - TU Wien€¦ · Use SDK tools to build application. Load shared library from Java. static {System.loadLibrary(„mylibrary“);} ... OpenVG,](https://reader031.vdocuments.mx/reader031/viewer/2022022015/5b5243087f8b9a7b648d0f6e/html5/thumbnails/35.jpg)
Danke für Ihre Aufmerksamkeit
Peter Rautek 34
Fragen?