OpenGLES Android Graphics
-
Upload
arvind-devaraj -
Category
Technology
-
view
552 -
download
1
description
Transcript of OpenGLES Android Graphics
![Page 1: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/1.jpg)
Introduction To OpenGLES in Android
![Page 2: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/2.jpg)
OpenGLES
● Graphics Library for 3D
![Page 3: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/3.jpg)
OpenGLES Terms
● OpenGLES : Graphics API for doing 3D operations on GPU / CPU
● Primitives : lines, point, triangles
● Texture : make the image
realistic by adding bitmap
![Page 4: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/4.jpg)
CPU versus GPU
● CPU – good at executing sequential code
– Handles branches well
● GPU– Same code, multiple data
– Parallelism (ideal for image rendering)
![Page 5: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/5.jpg)
Android Graphics
● The View class handles display and interaction with the user
● GLSurfaceView class provides the glue to connect OpenGLES to View system and activity lifecycle
![Page 6: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/6.jpg)
View
● Manages the memory that can be composited into the Android view system
● Renders display in a separate thread, decoupling from UI thread
![Page 7: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/7.jpg)
Renderer
● The renderer is responsible for making OpenGL calls to render a frame.
![Page 8: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/8.jpg)
Two Steps
GLSurfaceViewGLSurfaceView.Renderer
![Page 9: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/9.jpg)
GLSurfaceView
GLSurfaceView view = new GLSurfaceView(this);
view.setEGLContextClientVersion(2);
view.setRenderer(new SquareRenderer());
![Page 10: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/10.jpg)
GLSurfaceView.Renderer
● The renderer is responsible for making OpenGL calls to render a frame. – onDrawFrame() responsible for drawing the
current frame
– OnSurfaceChanged() called when surface size changes
– OnSurfaceCreated() called when surface is created
![Page 11: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/11.jpg)
GLSurfaceView.Renderer
public class SquareRenderer implements GLSurfaceView.Renderer {
public void onSurfaceCreated(GL10 unused, EGLConfig config) { } public void onDrawFrame(GL10 unused) {
} public void onSurfaceChanged(GL10 unused, int width, int height) {
}}
GLES20.glViewport(0, 0, width, height);
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
GLES20.glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
![Page 12: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/12.jpg)
Make sure to add this!
![Page 13: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/13.jpg)
Drawing a Basic Shape
![Page 14: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/14.jpg)
Define a Square
• All the 2D/ 3D objects needs to be defined using Primitives.
• Vertex - A vertex is a point where two or more edges meet
• Edges - A vertex (vertices in plural) is the smallest building block of 3D model. A vertex is a point where two or more edges meet
• Face is a triangle. Face is a surface between three corner vertices and three surrounding edges.
![Page 15: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/15.jpg)
-0.5f, -0.5f, 0.0f, // Bottom Left0.5f, -0.5f, 0.0f, // Bottom Right-0.5f, 0.5f, 0.0f, // Top Left0.5f, 0.5f, 0.0f, // Top Right
![Page 16: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/16.jpg)
private void initShapes(){ float squareCoords[] = { //The coordinates };
// initialize vertex Buffer for square ByteBuffer vbb = ByteBuffer.allocateDirect(squareCoords.length * 4);
vbb.order(ByteOrder.nativeOrder()); squareVB = vbb.asFloatBuffer(); squareVB.put(squareCoords); squareVB.position(0);}
![Page 17: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/17.jpg)
Draw Methods o glDrawArrays()o glDrawElements()
Available Primitives in OpenGL ES
• GL_POINTS• GL_LINE_STRIP• GL_LINE_LOOP• GL_LINES• GL_TRIANGLES• GL_TRIANGLE_STRIP• GL_TRIANGLE_FAN
Draw a square
![Page 18: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/18.jpg)
GL_POINTS GL_LINES GL_LINE_STRIP
GL_TRIANGLES GL_TRIANGLE_STRIP GL_TRIANGLE_FAN
![Page 19: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/19.jpg)
OpenGL Rendering Pipeline Simplified
![Page 20: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/20.jpg)
Shader Programs
• Vertex Shader• Fragment Shader• Loading the shader objects• Attaching the Shader objects to Shader program• Linking the program to create executable shader
program
![Page 21: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/21.jpg)
![Page 22: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/22.jpg)
Vertex Shader
Fragment Shader
attribute vec4 vertexPosition;void main(){ gl_Position = vertexPosition;
}
precision mediump float;void main(){ gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);}
![Page 23: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/23.jpg)
Loading the Shader
GLES20.glCompileShader(vertexShader);
• GLES20.GL_FRAGMENT_SHADER
int vertexShader = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER);
GLES20.glShaderSource(vertexShader, shaderCode);
![Page 24: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/24.jpg)
Compiling and Linking the Shader program
shaderProgram = GLES20.glCreateProgram();
GLES20.glAttachShader(shaderProgram, vertexShader); GLES20.glAttachShader(shaderProgram, fragmentShader);
GLES20.glLinkProgram(shaderProgram);
![Page 25: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/25.jpg)
![Page 26: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/26.jpg)
attributePositionHandle = GLES20.glGetAttribLocation(shaderProgram,"vertexPosition");
![Page 27: OpenGLES Android Graphics](https://reader031.fdocuments.in/reader031/viewer/2022020101/554f7c8eb4c905d25b8b483b/html5/thumbnails/27.jpg)
Drawing the square
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
GLES20.glUseProgram(shaderProgram);
GLES20.glVertexAttribPointer(attributePositionHandle, 3, GLES20.GL_FLOAT, false, 12, squareVB);
GLES20.glEnableVertexAttribArray(attributePositionHandle);
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);