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

2. OpenGL-ES 3.0 And Beyond Boston 2014 22 Development Environments Windows Macintosh OSX Linux (yes!) Android iOS Mac OSX Windows Target Environments

3. OpenGL-ES 3.0 And Beyond Boston 2014 33 Ecosystem Helper 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. OpenGL-ES 3.0 And Beyond Boston 2014 44 Ecosystem Android, 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-ES 3.0 And Beyond Boston 2014 55 OpenGL setup for Android Download latest SDK & NDK Add OpenGL ES requirements to Manifest Ask for the desired OpenGL API context setupEGLContextClientVersion(3);

6. OpenGL-ES 3.0 And Beyond Boston 2014 66 Building your first app Building Native apps - Not using Eclipse! 1.For a new/copied project, make sure all paths are updated in your project (do just once) 2.Build the native part (C++ code, libraries, etc.) ndk-build [switches] 3.Build the app – which will include the native libs ant debug (or release) 4.Push to the default device ant installd

7. OpenGL-ES 3.0 And Beyond Boston 2014 77 Native App Design How to you make a Native app play nice with Android? 1)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 2)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. 3)DIY - SurfaceView/SurfaceHolder? A container for the Surface- you get to roll everything else yourself.

8. OpenGL-ES 3.0 And Beyond Boston 2014 88 OpenGL using GLSurfaceView public class MyActivity extends Activity { private GLSurfaceView view; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); view = new GLSurfaceView(); // Tell EGL to use a ES 3.0 Context view.setupEGLContextClientVersion(3); // Set the renderer view.setRenderer(new MyGLProjectRenderer()); setContentView(view); } @Override protected void onPause() { super.onPause(); view.onPause(); } @Override protected void onResume() { super.onResume(); view.onResume(); } } class MyGLProjectRenderer implements GLSurfaceView.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, int height) { // set rendering surface to screen size gl.glViewport(0, 0, width, height); } public void onSurfaceCreated(GL10 gl, EGLConfig config) { // any OpenGL initialization goes here gl.glClearColor(1.0f, 0.0f, 1.0f, 1.0f); } }

9. OpenGL-ES 3.0 And Beyond Boston 2014 99 OpenGL using GLSurfaceView public class MyActivity extends Activity { private GLSurfaceView view; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); view = new GLSurfaceView(); // Tell EGL to use a ES 3.0 Context view.setupEGLContextClientVersion(3); // Set the renderer view.setRenderer(new MyGLProjectRenderer()); setContentView(view); } @Override protected void onPause() { super.onPause(); view.onPause(); } @Override protected void onResume() { super.onResume(); view.onResume(); } } class MyGLProjectRenderer implements GLSurfaceView.Renderer { public void onSurfaceCreated(GL10 gl, EGLConfig config) { // any OpenGL initialization goes here gl.glClearColor(1.0f, 0.0f, 1.0f, 1.0f); } public void onSurfaceChanged( GL10 gl, int width, int height) { // set rendering surface to screen size gl.glViewport(0, 0, width, height); } public void onDrawFrame(GL10 gl) { gl.glClear(gl.GL_COLOR_BUFFER_BIT); // … other rendering stuff goes here } }

10. OpenGL-ES 3.0 And Beyond Boston 2014 10 OpenGL using GLSurfaceView public class MyActivity extends Activity { private GLSurfaceView view; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); view = new GLSurfaceView(); // Tell EGL to use a ES 3.0 Context view.setupEGLContextClientVersion(3); // Set the renderer view.setRenderer(new MyGLProjectRenderer()); setContentView(view); } @Override protected void onPause() { super.onPause(); view.onPause(); } @Override protected void onResume() { super.onResume(); view.onResume(); } } class MyGLProjectRenderer implements GLSurfaceView.Renderer { public void onSurfaceCreated(GL10 gl, EGLConfig config) { // any OpenGL initialization goes here gl.glClearColor(1.0f, 0.0f, 1.0f, 1.0f); } public void onSurfaceChanged( GL10 gl, int width, int height) { // set rendering surface to screen size gl.glViewport(0, 0, width, height); } public void onDrawFrame(GL10 gl) { gl.glClear(gl.GL_COLOR_BUFFER_BIT); // … other rendering stuff goes here } }

11. OpenGL-ES 3.0 And Beyond Boston 2014 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 3.0 And Beyond Boston 2014 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 SDK http://community.imgtec.com/developers/powervr/http://community.imgtec.com/developers/powervr/ OpenGL ES 3.0 Support ARM’s Mali Tools http://malideveloper.arm.com/develop-for-mali/tools/opengl-es-3-0-emulator/http://malideveloper.arm.com/develop-for-mali/tools/opengl-es-3-0-emulator/ OpenGL-ES 2.0 Support Google’s ANGLE project (3.0 is coming) https://code.google.com/p/angleproject/https://code.google.com/p/angleproject/ AMD’s GL-ES Emulator site http://developer.amd.com/tools-and-sdks/graphics-development/amd-opengl-es-sdk/http://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. OpenGL-ES 3.0 And Beyond Boston 2014 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 iPhone 5iPad AiriPad Mini w/Retina 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. OpenGL-ES 3.0 And Beyond Boston 2014 14 Apple-specific ES 3.0 Support Details 1.Declare your app device compatibility requirements in Info.plist as early as possible 2.UIRequiredDeviceCapabilities key is the entry point in Info.plist declaring caps opengles-3 Include this key if your app requires (or specifically prohibits) the presence of the OpenGL ES 3.0 interfaces. armv7 Include this key if your app is compiled only for the armv7 instruction set. (iOS 3.1 and later)

15. OpenGL-ES 3.0 And Beyond Boston 2014 15 WebGL v1.0 OpenGL 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 EngineDesktopMobile WebKit Chrome (> ver. 9) Safari (> ver. 6.0) Opera (> ver. 11) Chrome (ver. 25) Mobile Safari iOS – only accessible via iAd and devices later than iPhone 3 GeckoFirefox (ver. 4.0)No for iOS / Yes Android Microsoft “Trident”IE v.11 (partially)IE Windows Phone 8.1

16. OpenGL-ES 3.0 And Beyond Boston 2014 16 Multiple JavaScript libraries wrap “raw” WebGL for rapid application development Three.js OSG.js Project Cesium Inka.3D J3D WebGL v1.0 Usage

17. OpenGL-ES 3.0 And Beyond Boston 2014 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. AnDevCon Boston 2014 Backup Material

19. OpenGL-ES 3.0 And Beyond Boston 2014 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 –GLKit framework 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 –CAEAGLayer supports drawing OpenGL content in iPhone applications. –EAGLSharegroup: Sharing of resources created in one EAGL context is possible and highly encouraged

20. OpenGL-ES 3.0 And Beyond Boston 2014 20 WebGL v1.0 Kode <body onload="run();" Your browser does not support the canvas element 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); }