15
Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction

Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

  • Upload
    others

  • View
    20

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

Chapter 1Introduction

Page 2: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

Overview of OpenGL ES in Tizen Most smart devices are equipped with Graphics Processing Units (GPU).

OpenGL ES is an interface to GPU and consists of well-defined subsets of the desktop API OpenGL.

Tizen native applications may use OpenGL ES not only for creating a 3D scene but also for a 2D scene that requires fast interaction. OpenGL ES is also good for improving performance and reducing power consumption when the native application performs computation-intensive tasks which can be run in parallel.

Tizen 2.x (almost completely) supports OpenGL ES 2.0. OpenGL ES 3.0 features are supported starting from Tizen 2.4.

EGL is another specification for binding OpenGL ES to native windowing systems. In order to set up the EGL environment, application developers normally need to understand the native windowing system and EGL specification in detail.

1-2

Page 3: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

Overview of OpenGL ES in Tizen (cont’d) In Tizen native, however, its UI components and 2D canvas (i.e.,

Elementary and Evas, respectively) replace the roles of EGL to provide a simple way to use OpenGL ES.

1-3

OpenGL ES Application

WindowingSystem

Elm_GLView

EFL

EGL OpenGL ES

Page 4: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

Creating OpenGL ES Applications The easiest way to use OpenGL ES API in a Tizen application is to rely on the

Elm_GLView component. (Henceforth, OpenGL ES will be denoted simply by GL.)

Elm_GLView is one of the Elementary UI components, which creates a GL target surface and a context. The Elm_GLView component can be embedded in any Tizen UI application.

Let us now present the steps needed to create a GL application. (From now on, Elm_GLView will be simply denoted by GLView.)

1-4

Page 5: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

Basic Sequence

1. Create a basic application2. Enable HW acceleration3. Initialize GLView4. Get GL function pointer5. Setup callback functions

1-5

Page 6: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

1. Create a basic application Create an application as presented in HelloWorld example

1-6

Page 7: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

2. Enable HW acceleration For developing an application with Elementary, you create a window by using

the Elementary utility function, elm_win_util_standard_add(). To develop a GL application, you have to call

elm_config_accel_preference_set() before creating the window. It makes an application use the GPU.

1-7

Evas_Object *win;elm_config_accel_preference_set(“opengl”);win = elm_win_util_standard_add(name, "OpenGL example");

Page 8: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

3. Initialize GLView After creating a window, you can set the GLView mode by using

elm_glview_mode_set() to enable alpha channel, depth buffer, stencil buffer, MSAA, and the client-side rotation feature.

Additionally, you can select the policies for resizing by using elm_glview_resize_policy_set().

In the following example, the alpha channel and depth buffer are enabled and “recreate” policy for resizing GLView is selected.

1-8

/* Request a surface with alpha and a depth buffer */elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);

/* The resize policy tells GLView what to do with the surface when it* resizes. ELM_GLVIEW_RESIZE_POLICY_RECREATE will tell it to* destroy the current surface and recreate it to the new size.*/elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);

Page 9: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

4. Get GL function pointer When using GL APIs, EFL provides convenient helper macros, which are

defined in Elementary_GL_Helpers.h. ELEMENTARY_GLVIEW_GLOBAL_DEFINE();

ELEMENTARY_GLVIEW_GLOBAL_USE();

ELEMENTARY_GLVIEW_GLOBAL_DECLARE();

1-9

#include <Elementary_GL_Helpers.h>ELEMENTARY_GLVIEW_GLOBAL_DEFINE();// ...

static Evas_Object*add_glview(Evas_Object* parent, appdata_s *ad){

Evas_Object* glview;

/* Create and initialize GLView */glview = elm_glview_add(parent);

/* Prepare to use OpenGL ES APIs directly */ELEMENTARY_GLVIEW_GLOBAL_USE(glview);// ...

}

Page 10: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

4. Get GL function pointer (cont’d) The helper macros should be used only for the following situations:

When a single surface is used for GL rendering When a single API set (either OpenGL ES 1.1, OpenGL ES 2.0, or

OpenGL ES 3.0) is used – In this case, ELEMENTARY_GLVIEW_GLOBAL_DECLARE() should be used in a global header for the application.

1-10

Page 11: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

5. Setup callback functions When you use the GLView component, you can set up necessary callback

functions which are called in the main loop to render a scene.

1-11

/* The initialization callback function gets registered here */elm_glview_init_func_set(glview, init_glview);

/* The resizing callback function gets registered here */elm_glview_resize_func_set(glview, resize_glview);

/* The drawing callback function gets registered here */elm_glview_render_func_set(glview, draw_glview);

/* The deleting callback function gets registered here */elm_glview_del_func_set(glview, del_glview);

Page 12: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

Callback for Initialization The initialization callback is called when the GLView is created, i.e., when the

GL context and surface are created.

1-12

// GL init functionstatic void init_glview(Evas_Object *glview){

// Set gl state color to pinkglClearColor(1.0, 0.2, 0.6, 1.0);

// Do any form of OpenGL ES initialization here// init_shaders();// init_vertices();

}

Page 13: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

Callback for Resizing The resizing callback is called whenever the GLView component is resized. A

common action to take here is to reset the viewport. Because the GLView size can be changed by a parent container, you must set up a resizing callback and reset the viewport size with the new GLView size.

1-13

// GLView resize functionstatic void resize_glview(Evas_Object *glview)

{

int w, h;elm_glview_size_get(glview, &w, &h);glViewport(0, 0, w, h);

}

Page 14: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

Callback for Drawing The initialization callback is called when the GLView is created, i.e., when the

GL context and surface are created.

1-14

// GL draw callbackstatic void draw_glview(Evas_Object *glview){

// Paint it pinkglClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

// The usual OpenGL ES draw commands come here// draw_scene();

}

Page 15: Chapter 1 Introduction - Tizen WikiIntroduction).pdf · 2015-12-21 · Computer Graphics with OpenGL ES (J. Han) Chapter 1 Introduction. Computer Graphics with OpenGL ES (J. Han)

Computer Graphics with OpenGL ES (J. Han)

Callback for Deleting The deleting callback is triggered when the GLView is being destroyed. No

other callback can be called on the same object afterwards.

1-15

// Delete GLView callbackstatic void del_glview(Evas_Object *glview){

// Destroy all the OpenGL ES resources here// destroy_shaders();// destroy_objects();

}