Slide 1

Slide 1 text

OpenGL A noob's guide for Android developers Benjamin Monjoie

Slide 2

Slide 2 text

The promise https://www.turbosquid.com/3d-models/3d-pine-tree-model/700221

Slide 3

Slide 3 text

The reality http://www.script-tutorials.com/demos/145/img1.jpg 300 lines of code later ...

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

The challenge

Slide 6

Slide 6 text

Roadmap ● What is OpenGL ? ● What about with Android ? ● OpenGL’s internals ● Shaders ● Enter the matrix ● Advices ● Bonus

Slide 7

Slide 7 text

Roadmap ● What is OpenGL ? ● What about with Android ? ● OpenGL’s internals ● Shaders ● Enter the matrix ● Advices ● Bonus

Slide 8

Slide 8 text

What is OpenGL ? http://infos-reportages.com/wp-content/uploads/2016/10/phone_hero-module_hero-image_144 0_2x.png http://fr.ubergizmo.com/wp-content/uploads/2013/02/chromebook-pixel.png http://www.samsung.com/us/explore/family-hub-refrigerator/assets/images/glance/food-manag ement-slide01-mb.png http://www.samsung.com/us/2012-smart-blu-ray-player/img/tv-front.png

Slide 9

Slide 9 text

OpenGL & Android ● OpenGL ES 1.0 & 1.1 since Android 1.0 (API 4)

Slide 10

Slide 10 text

OpenGL & Android ● OpenGL ES 1.0 & 1.1 since Android 1.0 (API 4) ● OpenGL ES 2.0 since Android 2.2 (API 8)

Slide 11

Slide 11 text

OpenGL & Android ● OpenGL ES 1.0 & 1.1 since Android 1.0 (API 4) ● OpenGL ES 2.0 since Android 2.2 (API 8) ● OpenGL ES 3.0 since Android 4.3 (API 18) (almost)

Slide 12

Slide 12 text

OpenGL & Android ● OpenGL ES 1.0 & 1.1 since Android 1.0 (API 4) ● OpenGL ES 2.0 since Android 2.2 (API 8) ● OpenGL ES 3.0 since Android 4.3 (API 18) (almost) ● OpenGL ES 3.1 since Android 5.0 (API 21)

Slide 13

Slide 13 text

OpenGL & Android ● OpenGL ES 1.0 & 1.1 since Android 1.0 (API 4) ● OpenGL ES 2.0 since Android 2.2 (API 8) ● OpenGL ES 3.0 since Android 4.3 (API 18) (almost) ● OpenGL ES 3.1 since Android 5.0 (API 21)

Slide 14

Slide 14 text

Graphics driver http://international.download.nvidia.com/webassets/en_US/shared/images/articles/gtx-680m/gtx-680m-chip.png

Slide 15

Slide 15 text

Roadmap ● What is OpenGL ? ● What about with Android ? ● OpenGL’s internals ● Shaders ● Enter the matrix ● Advices ● Bonus

Slide 16

Slide 16 text

What about with Android ? GLSurfaceView & GLSurfaceView.Renderer onSurfaceCreated (GL10 gl, EGLConfig config) onSurfaceChanged (GL10 gl, int width, int height) onDrawFrame (GL10 gl)

Slide 17

Slide 17 text

Roadmap ● What is OpenGL ? ● What about with Android ? ● OpenGL’s internals ● Shaders ● Enter the matrix ● Advices ● Bonus

Slide 18

Slide 18 text

OpenGL’s internals https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html

Slide 19

Slide 19 text

Roadmap ● What is OpenGL ? ● What about with Android ? ● OpenGL’s internals ● Shaders ● Enter the matrix ● Advices ● Bonus

Slide 20

Slide 20 text

Shaders (GLSL)

Slide 21

Slide 21 text

Vertex shader - Example precision mediump float; uniform mat4 uMVPMatrix; attribute vec4 vPosition; attribute vec4 vTextureCoordinate; varying vec2 position; void main() { gl_Position = uMVPMatrix * vPosition; position = vTextureCoordinate.xy; }

Slide 22

Slide 22 text

Vertex shader - Example precision mediump float; uniform mat4 uMVPMatrix; attribute vec4 vPosition; attribute vec4 vTextureCoordinate; varying vec2 position; void main() { gl_Position = uMVPMatrix * vPosition; position = vTextureCoordinate.xy; }

Slide 23

Slide 23 text

Vertex shader - Example precision mediump float; uniform mat4 uMVPMatrix; attribute vec4 vPosition; attribute vec4 vTextureCoordinate; varying vec2 position; void main() { gl_Position = uMVPMatrix * vPosition; position = vTextureCoordinate.xy; }

Slide 24

Slide 24 text

Vertex shader - Example precision mediump float; uniform mat4 uMVPMatrix; attribute vec4 vPosition; attribute vec4 vTextureCoordinate; varying vec2 position; void main() { gl_Position = uMVPMatrix * vPosition; position = vTextureCoordinate.xy; }

Slide 25

Slide 25 text

Vertex shader - Example precision mediump float; uniform mat4 uMVPMatrix; attribute vec4 vPosition; attribute vec4 vTextureCoordinate; varying vec2 position; void main() { gl_Position = uMVPMatrix * vPosition; position = vTextureCoordinate.xy; }

Slide 26

Slide 26 text

Fragment shader - Example precision mediump float; uniform sampler2D uTexture; varying vec2 position; void main() { gl_FragColor = texture2D(uTexture, position); }

Slide 27

Slide 27 text

Fragment shader - Example precision mediump float; uniform sampler2D uTexture; varying vec2 position; void main() { gl_FragColor = texture2D(uTexture, position); }

Slide 28

Slide 28 text

Fragment shader - Example precision mediump float; uniform sampler2D uTexture; varying vec2 position; void main() { gl_FragColor = texture2D(uTexture, position); }

Slide 29

Slide 29 text

Fragment shader - Example precision mediump float; uniform sampler2D uTexture; varying vec2 position; void main() { gl_FragColor = texture2D(uTexture, position); }

Slide 30

Slide 30 text

Roadmap ● What is OpenGL ? ● What about with Android ? ● OpenGL’s internals ● Shaders ● Enter the matrix ● Advices ● Bonus

Slide 31

Slide 31 text

Enter the matrix https://developer.android.com/guide/topics/graphics/opengl.html#coordinate-mapping

Slide 32

Slide 32 text

The strip https://en.wikipedia.org/wiki/Triangle_strip

Slide 33

Slide 33 text

The strip POSITION_MATRIX = { -1,-1, 1, // X1,Y1,Z1 1,-1, 1, // X2,Y2,Z2 -1, 1, 1, // X3,Y3,Z3 1, 1, 1, // X4,Y4,Z4 }; TEXTURE_COORDS[] = { 0, 1, // X1,Y1 1, 1, // X2,Y2 0, 0, // X3,Y3 1, 0, // X4,Y4 };

Slide 34

Slide 34 text

The strip 0,0 1,0 0,1 1,1 https://pbs.twimg.com/profile_images/616076655547682816/6gMRtQyY.jpg

Slide 35

Slide 35 text

The strip 0,0 1,0 0,1 1,1

Slide 36

Slide 36 text

Roadmap ● What is OpenGL ? ● What about with Android ? ● OpenGL’s internals ● Shaders ● Enter the matrix ● Advices ● Bonus

Slide 37

Slide 37 text

Advices ● Abstract as much as possible

Slide 38

Slide 38 text

Advices ● Abstract as much as possible ● Crash often but crash well !

Slide 39

Slide 39 text

Advices ● Abstract as much as possible ● Crash often but crash well ! ● Test, a lot !

Slide 40

Slide 40 text

Advices ● Abstract as much as possible ● Crash often but crash well ! ● Test, a lot ! ● Use Google’s Play Store’s Alpha & Beta channels

Slide 41

Slide 41 text

Roadmap ● What is OpenGL ? ● What about with Android ? ● OpenGL’s internals ● Shaders ● Enter the matrix ● Advices ● Bonus

Slide 42

Slide 42 text

https://www.androidleakspodcast.com

Slide 43

Slide 43 text

OpenGL A noob's guide for Android developers https://plus.google.com/+BenjaminMonjoieXzan https://medium.com/@Xzan https://twitter.com/Xzan https://twitter.com/android_leaks https://medium.com/@xzan/opengl-le-guide-du-noob-pour-développeur-android