Development and Target Environments

1. Development and Target Environments Presenters: Ron Fosner and Rudy Cazabón

2. Development Environments Target Environments • Windows • Macintosh OSX • Linux (yes!) • Android • iOS • Mac OSX • Windows

3. EcosystemHelper and Utility Libraries • OpenGL ES does not do loading of images • Simple OpenGL Image Library (SOIL) • SOIL is a tiny C library used primarily for uploading textures into OpenGL • http://www.lonesock.net/soil.html • OpenGL ES does not do math • GLM - OpenGL Math Library • library provides classes and functions provides extended capabilities: matrix transformations, quaternions, half-based types, random number generation, procedural noise functions, etc. • http://glm.g-truc.net/0.9.5/index.html • OpenGL ES does not do object loading • NOTE: depends on the source 3D file format – e.g. OBJ, FBX, DAE, IV, PLY • Our recommendation, pick your source format and use the “Power of the Web”

4. EcosystemAndroid, OpenGL and the NDK • By design Android apps are Java. But for high-performing apps (like games) you need to avoid Dalvik and run at the native layer in C/C++. • OpenGL-ES is easily programmed in native code and looks like OpenGL-ES code in just about any other C++ app. • Native Apps are more challenging to write for Android, but once you do it, you can cut & paste the code

5. OpenGL setup for Android • Download latest SDK & NDK • Add OpenGL ES requirements to Manifest • <uses-feature android:glEsVersion="0x00030000"android:required="true"/><uses-sdkandroid:minSdkVersion="18"/> • Ask for the desired OpenGL API context • setupEGLContextClientVersion(3);

6. Building your first app • Building Native apps - Not using Eclipse! • For a new/copied project, make sure all paths are updated in your project (do just once) • Build the native part (C++ code, libraries, etc.) ndk-build [switches] <your project – local path> • Build the app – which will include the native libs ant debug (or release) • Push to the default device ant installd

7. Native App Design • How to you make a Native app play nice with Android? • GLSurfaceView • Has a JNI layer – enaeasy to add new Java event to Native code • Rendering thread in Java, which forces you to use Java thread locking mechanisms • Some rudimentary control of the EGL context • NativeActivity • Just a NDK layer around a regular Android Activity • Tough to call up to the Java layer – thus Java specific tasks, such as playing video, playing streamed audio or starting other activities are harder to implement. • DIY - SurfaceView/SurfaceHolder? • A container for the Surface- you get to roll everything else yourself.

8. OpenGL using GLSurfaceView • public class MyActivityextends Activity{ private GLSurfaceView view; @Override public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); view = new GLSurfaceView(); // Tell EGL to use a ES 3.0 Contextview.setupEGLContextClientVersion(3); // Set the rendererview.setRenderer(new MyGLProjectRenderer());setContentView(view); } @Override protected void onPause() {super.onPause();view.onPause(); } @Override protected void onResume() {super.onResume();view.onResume(); }} • class MyGLProjectRenderer implementsGLSurfaceView.Renderer{ • public void onDrawFrame(GL10 gl) {gl.glClear(gl.GL_COLOR_BUFFER_BIT); // … other rendering stuff goes here } • public void onSurfaceChanged( GL10 gl, int width, intheight) { // set rendering surface to screen sizegl.glViewport(0, 0, width, height); } • public void onSurfaceCreated(GL10 gl, EGLConfigconfig) { // any OpenGL initialization goes heregl.glClearColor(1.0f, 0.0f, 1.0f, 1.0f); }}

9. OpenGL using GLSurfaceView • public class MyActivityextends Activity{ private GLSurfaceView view; @Override public void onCreate(BundlesavedInstanceState) {super.onCreate(savedInstanceState);view = new GLSurfaceView(); // Tell EGL to use a ES 3.0 Contextview.setupEGLContextClientVersion(3);// Set the rendererview.setRenderer(new MyGLProjectRenderer());setContentView(view); } @Override protected void onPause() {super.onPause();view.onPause(); } @Override protected void onResume() {super.onResume();view.onResume(); }} • class MyGLProjectRenderer implementsGLSurfaceView.Renderer{ • public void onSurfaceCreated(GL10 gl, EGLConfigconfig) { // any OpenGL initialization goes heregl.glClearColor(1.0f, 0.0f, 1.0f, 1.0f); } public void onSurfaceChanged( GL10 gl, int width, int height) { // set rendering surface to screen sizegl.glViewport(0, 0, width, height); } • public void onDrawFrame(GL10 gl) {gl.glClear(gl.GL_COLOR_BUFFER_BIT); // … other rendering stuff goes here } • }

10. OpenGL using GLSurfaceView • public class MyActivityextends Activity{ private GLSurfaceView view; @Override public void onCreate(BundlesavedInstanceState) {super.onCreate(savedInstanceState); view = new GLSurfaceView(); // Tell EGL to use a ES 3.0 Contextview.setupEGLContextClientVersion(3); // Set the rendererview.setRenderer(new MyGLProjectRenderer());setContentView(view); } @Override protected void onPause() {super.onPause();view.onPause(); } @Override protected void onResume() {super.onResume();view.onResume(); }} • class MyGLProjectRenderer implementsGLSurfaceView.Renderer{ • public void onSurfaceCreated(GL10gl, EGLConfigconfig) { // any OpenGL initialization goes heregl.glClearColor(1.0f, 0.0f, 1.0f, 1.0f);} public void onSurfaceChanged( GL10 gl, int width, int height) { // set rendering surface to screen sizegl.glViewport(0, 0, width, height); } • public void onDrawFrame(GL10gl) {gl.glClear(gl.GL_COLOR_BUFFER_BIT); // … other rendering stuff goes here } • }

11. OpenGL using NativeActivity • Starting with a NativeActivity sample • Use NativeActivity glue code to link Java code to Native • Set up makefiles to include glue code, your code, and probably STL • Customize manifest file(s) • Build Native code (build native library code) • Build the APK (links in the native code)

12. OpenGL-ES on Windows • Requirements: A Windows machine with an OpenGL 3.3 or better GPU • Step 1 – get an OpenGL-ES API abstraction layer. • OpenGL ES 3.1 support (new!)Imagination’s PowerVR SDKhttp://community.imgtec.com/developers/powervr/ • OpenGL ES 3.0 SupportARM’s Mali Toolshttp://malideveloper.arm.com/develop-for-mali/tools/opengl-es-3-0-emulator/ • OpenGL-ES 2.0 SupportGoogle’s ANGLE project (3.0 is coming)https://code.google.com/p/angleproject/ • AMD’s GL-ES Emulator sitehttp://developer.amd.com/tools-and-sdks/graphics-development/amd-opengl-es-sdk/ • Step 2 – Create Environment Variables pointing to the SDK. • This will allow you to get to the GL headers and library's. • Step 3 – Edit the project setting to use these locations to find the GL-ES and EGL headers and libraries. • This will allow you to build & run GL-ES on you PC.

13. iOS Support for OpenGL ES 3.0 Development • OpenGL ES 3.0 available on iPhone/iPad devices capable of iOS 7 runtime and using the iOS 7.0 SDK • As of 5/2014 only A7 GPU HW is ES 3.0 capable XCode (curr. Version 5.1.1) is the approved toolchain for development, debugging, performance analysis and testing prior to installation on the target hardware Installing XCode will additionally install other tools in the development environment Texturetool - tool to compress your textures into the PVR texture compression format OpenGL ES Frame Debugger Performance Analyzer Formally part of XCode, but can be called up via command-line extensions

14. Apple-specific ES 3.0 Support Details • Declare your app device compatibility requirements in Info.plist as early as possible • UIRequiredDeviceCapabilities key is the entry point in Info.plist declaring caps

15. WebGL v1.0OpenGL ES 2.0 for the Web • 3D graphics JavaScript API based on OpenGL ES 2.0 accessible via HTML5 Canvas element in the Document Object Model (DOM) • No plug-ins are required • It can interact with existing HTML elements – compositing mix • Browser Support

16. WebGL v1.0Usage • Multiple JavaScript libraries wrap “raw” WebGL for rapid application development • Three.js • OSG.js • Project Cesium • Inka.3D • J3D

17. Summary • There are many options to use and test OpenGL ES functionalities and features beyond the Android OS • WebGL 1.0 though nascent at this time has very flexible, feature-rich, and good development ecosystem so consider using it as a “pre-production” development environment to test out ideas, workflow, and look-development

18. Backup Material

19. EAGL – Apple Def’ns its own OpenGL ES 3.0 Contexts • EAGL = Apple defines its own OGL ES rendering context • EAGLContext – implements rendering context • GLKitframework provides functions and classes that reduce the effort required to create new shader-based apps or port existing apps that rely on fixed-function vertex or fragment processing provided by earlier versions of OpenGL ES or OpenGL • CAEAGLayersupports drawing OpenGL content in iPhone applications. • EAGLSharegroup: Sharing of resources created in one EAGL context is possible and highly encouraged

20. WebGL v1.0Kode <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body onload="run();" <canvas id="myWebGLCanvas" width="640" height="480">Your browser does not support the canvas element</canvas> <script id="code_vert" wrap="logical"> attribute vec3 inputPosition; attribute vec2 inputTexCoord; attribute vec3 inputNormal; uniform mat4 projection, modelview, normalMat; uniform int mode; varying vec4 forFragColor; const vec3 lightPos = vec3(1.0, 1.0, 1.0); const vec3 diffuseColor = vec3(0.5, 0.0, 0.0); const vec3 specColor = vec3(1.0, 1.0, 1.0); void main(){ gl_Position = projection * modelview * vec4(inputPosition, 1.0); // all following gemetric computations are performed in the // camera coordinate system (aka eye coordinates) vec3 normal = vec3(normalMat * vec4(inputNormal, 0.0)); vec4 vertPos4 = modelview * vec4(inputPosition, 1.0); vec3 vertPos = vec3(vertPos4) / vertPos4.w; vec3 lightDir = normalize(lightPos - vertPos); vec3 reflectDir = reflect(-lightDir, normal); vec3 viewDir = normalize(-vertPos); float lambertian = max(dot(lightDir,normal), 0.0); float specular = 0.0; if(lambertian > 0.0) { float specAngle = max(dot(reflectDir, viewDir), 0.0); specular = pow(specAngle, 4.0); // the exponent controls the shininess (try mode 2) if(mode == 2) specular = pow(specAngle, 16.0); // according to the rendering equation we would need to multiply // with the the "lambertian", but this has little visual effect if(mode == 3) specular *= lambertian; // switch to mode 4 to turn off the specular component if(mode == 4) specular *= 0.0; } forFragColor = vec4(lambertian*diffuseColor + specular*specColor, 1.0); } </script> </body> </html>