[Graphics] modify GLView tutorial to EvasGL tutorial
authorDaeKwang Ryu <dkdk.ryu@samsung.com>
Thu, 31 Dec 2015 00:39:47 +0000 (09:39 +0900)
committerDaeKwang Ryu <dkdk.ryu@samsung.com>
Thu, 31 Dec 2015 00:41:29 +0000 (09:41 +0900)
Change-Id: Ibb6d96721a1ebf8cdc8b7873436252b98652eb38
Signed-off-by: DaeKwang Ryu <dkdk.ryu@samsung.com>
org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm

index b44c69f..28fbec3 100644 (file)
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Content</p>
                <ul class="toc">         
-                <li>GLView component
+                <li><a href="#evasgl">EvasGL Tutorial</a>
                         <ul class="toc">
-                               <li><a href="#basic">Creating a Basic Application</a></li>
-                               <li><a href="#cube">Creating a Cube</a></li>
-                               <li><a href="#draw">Drawing the Cube with GLView</a></li>
-                               <li><a href="#render">Rendering the Cube</a></li>
-                               <li><a href="#animate">Animating the Cube</a></li>
-                               <li><a href="#component">Implementing UI Component Interaction</a></li>
-                               <li><a href="#effect">Implementing Effects</a></li>
-                               <li><a href="#source">Viewing the Entire Cube Source</a></li>
+                               <li><a href="#declaration">Declaration of EvasGL Objects</a></li>
+                               <li><a href="#creating">Creating the Elm Window and EvasGL</a></li>
+                               <li><a href="#getapi">Getting OpenGL ES APIs</a></li>
+                               <li><a href="#callbacks">Callbacks</a></li>
+                               <li><a href="#nativeset">Setting a Surface into the Image Object</a></li>
                        </ul>
                </li>
                 <li><a href="#ext">Using OpenGL ES Extensions</a></li>
 <h1>OpenGL ES: Using OpenGL ES Graphics</h1>
 
 
-       <p>This tutorial demonstrates how you can handle OpenGL ES graphics with the GLView component and EvasGL.</p>
+       <p>This tutorial demonstrates how you can handle OpenGL ES graphics with the GLView component EvasGL. Before reading this page, it is recommended to read <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES Guide</a> page first.</p>
 
 <h2>Warm-up</h2>
 <p>Become familiar with the OpenGL ES API basics by learning about:</p>
 <ul>    
-         <li>GLView component
+         <li><a href="#evasgl">EvasGL Tutorial</a>
          <ul>
-               <li><a href="#basic">Creating a Basic Application</a>
-               <p>Create a basic application with a multicolored 3D rotating cube using OpenGL ES 2.0 API provided by the GLView library.</p></li>
-               <li><a href="#cube">Creating a Cube</a>
-               <p>Create and color a cube.</p></li>
-               <li><a href="#draw">Drawing the Cube with GLView</a>
-               <p>Draw a cube.</p></li>
-               <li><a href="#render">Rendering the Cube</a>
-               <p>Render a cube.</p></li>
-               <li><a href="#animate">Animating the Cube</a>
-               <p>Create an animation.</p></li>
-               <li><a href="#component">Implementing UI Component Interaction</a>
-               <p>Create UI components that interact with the rendering.</p></li>
-               <li><a href="#effect">Implementing Effects</a>
-               <p>Create fancy effects for the screen.</p></li>
-               <li><a href="#source">Viewing the Entire Cube Source</a>
-               <p>View the entire source code of the cube example.</p></li>  
+               <li><a href="#declaration">Declaration of EvasGL Objects</a>
+               <p>Declare the application data</p></li>
+               <li><a href="#creating">Creating the Elm Window and EvasGL</a>
+               <p>Create a window and a EvasGL</p></li>
+               <li><a href="#getapi">Getting OpenGL ES APIs</a>
+               <p>Get OpenGL ES function pointers</p></li>
+               <li><a href="#callbacks">Callbacks</a>
+               <p>Set callbacks</p></li>
+               <li><a href="#nativeset">Setting a Surface into the Image Object</a>
+               <p>Set a native surface into the image object</p></li>
          </ul>   </li>
          <li><a href="#ext">Using OpenGL ES Extensions</a>
          <p>Check whether an extension is available, and call it.</p></li>
          <p>Use client-side rotation when the application is using Direct Rendering.</p></li>
 </ul>
 
-<h2 id="basic" name="basic">Creating a Basic Application</h2>
+<h2 id="evasgl" name="evasgl">EvasGL Tutorial</h2>
 
-<p>This tutorial demonstrates how you can create a multicolored 3D rotating cube using the OpenGL ES 2.0 API provided by the GLView library. Several concepts are explained, such as the cube geometry, the initialization phase of the model, the adjustment of the model frame by frame, and the way to design the OpenGL ES rendering loop.</p>
-<p>To create the basic application:</p>
-<ol>
-<li><p>Create a basic application as explained in the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
-<p>The basic UI application skeleton already makes available the window object that contains the GLView canvas.</p>
-</li>
-<li>Build the environment:
-
-<p>Define the application data structure that holds all the objects pertinent for the GLView application:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">win</span>: Application window</li>
-<li><span style="font-family: Courier New,Courier,monospace">conform</span>: Conformant object for the indicator</li>
-<li><span style="font-family: Courier New,Courier,monospace">glview</span>: GLView object</li>
-<li><span style="font-family: Courier New,Courier,monospace">main_box</span>: Box object which contains <span style="font-family: Courier New,Courier,monospace">glview</span> and <span style="font-family: Courier New,Courier,monospace">inner_box</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">inner_box</span>: Box object for the toolbox</li>
-</ul>
-<pre class="prettyprint">
-typedef struct 
-appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;Evas_Object *glview;
-
-&nbsp;&nbsp;&nbsp;Evas_Object *main_box;
-&nbsp;&nbsp;&nbsp;Evas_Object *inner_box;
-} appdata_s;
-</pre></li>
-
-<li>
+<p>This tutorial assumes that the application uses EvasGL directly instead of using the GLView. (If the application uses a GLView, EvasGL is created internally.)</p>
 
-<p>Create the OpenGL ES canvas:</p>
-<ol type="a">
-<li>
-<p>When developing an application with Elementary, you can create a window by using the Elementary utility function.</p>
-<p>To develop a GL application, you have to call the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function before creating a window which makes an application to use the GPU.</p>
-<pre class="prettyprint">
-elm_config_accel_preference_set(&quot;opengl&quot;); 
-ad-&gt;win = elm_win_util_standard_add(&quot;GLView Example&quot;, &quot;GLView Example&quot;);</pre>
-</li>
-<li>
-<p>Create the GLView and prepare the application to call the GL functions:</p>
-<pre class="prettyprint">
-ad-&gt;glview = elm_glview_add(ad-&gt;main_box);</pre>
+<p>First, you can declare the global variable using the <span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLOBAL_GLES2_DEFINE()</span> macro. Then, create an EvasGL and use <span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLOBAL_GLES2_USE(evasgl, evasgl context)</span>. This is similar to the GLView macro. Both macros help you to call GL functions directly.</p>
 
-<p>There are 2 different methods to call GL functions:</p>
+<p>Now, you can call GL functions. For more detailed information, see the <span style="font-family: Courier New,Courier,monospace">Evas_GL_GLES2_Helpers.h</span> file.</p>
 
-<ul><li>Use Elementary GL Helper functions. You have to include the <span style="font-family: Courier New,Courier,monospace">Elementary_GL_Helpers.h</span> header file and define a global variable using <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span>. Before calling GL functions, write <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE()</span>.
-<p>This tutorial uses this method.</p>
 <pre class="prettyprint">
-#include &lt;Elementary_GL_Helpers.h&gt;
-ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
+#include &lt;app.h&gt;
+#include &lt;Evas_GL_GLES2_Helpers.h&gt;
 
-static void 
-create_gl_canvas(appdata_s *ad) 
-{
-&nbsp;&nbsp;&nbsp;ad-&gt;glview = elm_glview_add(ad-&gt;main_box);
-&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(ad-&gt;glview);
-}
+// This code is to be placed at the beginning of any function using GLES 2.0 APIs
+// When using this macro, you can call all glFunctions without changing their code
+// For details, see Evas_GL_GLES2_Helpers.h
+EVAS_GL_GLOBAL_GLES2_DEFINE();
+</pre>
 
-static void 
-draw_gl(Evas_Object *obj) 
-{ 
-&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
-}</pre></li>
+<h3 id="declaration" name="declaration">Declaration of EvasGL Objects</h3>
 
-<li><p>Get the Evas_GL instance from the <span style="font-family: Courier New,Courier,monospace">elm_glview_gl_api_get()</span> function, and call the OpenGL ES functions with the instance:</p>
+<p>This is how to define the application data structure to hold all the objects for your EvasGL application:</p>
 
 <pre class="prettyprint">
-ad-&gt;glview = elm_glview_add(ad-&gt;main_box);
-Evas_GL_API *glapi = elm_glview_gl_api_get(ad-&gt;glview);
-glapi-&gt;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);</pre></li></ul>
-</li>
-<li>
-<p>Set the GLView mode. The <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set()</span> function supports alpha, depth, stencil, MSAA, and client-side rotation.</p>
+typedef struct appdata
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *win;
+&nbsp;&nbsp;&nbsp;Evas_Object *img;
 
-<pre class="prettyprint">
-elm_glview_mode_set(ad-&gt;glview, ELM_GLVIEW_DEPTH);</pre>
-</li>
-<li>
-<p>Set up callbacks:</p>
-<ul>
-       <li>Callback for initialization
-       <p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface have been created. This is called from the main loop, just as the 3 other callbacks.</p>
-       <pre class="prettyprint">
-elm_glview_init_func_set(ad-&gt;glview, init_gl);
-</pre>
-       </li>
-       <li>Callback for resizing
-       <p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport.</p>
-       <pre class="prettyprint">
-elm_glview_resize_func_set(ad-&gt;glview, resize_gl);
-</pre>
-       </li>
-       <li>Callback for drawing
-       <p>The drawing callback is called whenever a new frame has to be drawn.</p>
-       <pre class="prettyprint">
-elm_glview_render_func_set(ad-&gt;glview, draw_gl);
-</pre>
-       <p>The exact moment when this function is called depends on the policy set when calling.</p>
+&nbsp;&nbsp;&nbsp;Evas_GL *evasgl;
+&nbsp;&nbsp;&nbsp;Evas_GL_Context *ctx;
+&nbsp;&nbsp;&nbsp;Evas_GL_Surface *sfc;
+&nbsp;&nbsp;&nbsp;Evas_GL_Config *cfg;
+&nbsp;&nbsp;&nbsp;Evas_Coord sfc_w;
+&nbsp;&nbsp;&nbsp;Evas_Coord sfc_h;
 
-       <pre class="prettyprint">
-elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
+&nbsp;&nbsp;&nbsp;unsigned int program;
+&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;
+&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;
+&nbsp;&nbsp;&nbsp;unsigned int vbo;
+} appdata_s;</pre>
 
-       <p>Another policy is <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_POLICY_ALWAYS</span>, which always requests render, even when it is not visible. So the on demand policy is probably what you are looking for. The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created. Here it covers the whole window.</p>
-       </li>
-       <li>Callback for deleting
-       <p>The delete callback is triggered when the GLView is being destroyed, from the main loop, and no other callback can be called on the same object afterwards.</p>
-       <pre class="prettyprint">
-elm_glview_del_func_set(ad-&gt;glview, del_gl);
-</pre>
-       </li>
+<ul>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *win</span>: Application window.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_Object *img</span>: OpenGL ES canvas.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_GL *evasgl</span>: EvasGL Object for rendering gl in Evas.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Context *ctx</span>: EvasGL Context object, a GL rendering context in Evas GL.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Surface *sfc</span>: EvasGL Surface object, a GL rendering target in Evas GL.</li>
+   <li><span style="font-family: Courier New,Courier,monospace">Evas_GL_Config *cfg</span>: EvasGL Surface configuration object for surface creation.</li>
 </ul>
-</li>
-       <li>Add an animator.
-       <p>The application above is technically working but the scene does not get updated unless the object is marked as such. Games may want to use an animator to have a regular update of the scene.</p>
-       <pre class="prettyprint">
-ad-&gt;ani = ecore_animator_add(animate_cb, ad-&gt;glview);</pre>
 
-       <p>Any other event, for example, user input, can be used to refresh the view if the view needs to be updated.</p>
-       </li>
-</ol>
-</li>
-</ol>
+<h3 id="creating" name="creating">Creating the Elm Window and EvasGL</h3>
 
-<h2 id="cube" name="cube">Creating a Cube</h2>
-
-<p>Creating and coloring the cube can be separated into 2 distinct tasks: define the vertices and then add the colors to the faces.</p>
+<p>To create the Elm window and EvasGL:</p>
+<ol>
+    <li>Creating a window and a EvasGL.
+        <p>For developing an application with Elementary, you create a window by using the Elementary utility function, <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add().</span> To develop a GL application, you have to call <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> before creating the window. It makes an application use the GPU. See the following code.
+        </p>
 
+<pre class="prettyprint">
+Evas_Object *win;
 
-  <p class="figure">Figure: Cube</p> 
-  <p align="center"><img alt="Cube" src="../../images/cube.png" /></p>
-<p>To create and color the cube:</p>
-<ol>
-<li><p>Declare an array that stores the vertices of the cube to make it look like the drawing above.</p>
- <pre class="prettyprint">
-static const float 
-vertices[] =
-{
-&nbsp;&nbsp;&nbsp;// Front
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;// Right
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;// Back
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;// Left
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;// Top
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;// Bottom
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f
-};
+// To use OpenGL ES, the application must switch on hardware acceleration
+// To enable that, call elm_config_accel_preference_set() with &quot;opengl&quot;
+// before creating the Elm window
+// This function is supported since 2.3.
+elm_config_accel_preference_set(&quot;opengl&quot;);
+// Creating Elm window
+ad-&gt;win = elm_win_util_standard_add(&quot;Evas_GL Example&quot;, &quot;Evas_GL Example&quot;);
 </pre>
 
-  <p class="figure">Figure: Cube matrix</p> 
-  <p align="center"><img alt="Cube matrix" src="../../images/cube_matrix.png" /></p>
+<p>You can create your EvasGL handler using the <span style="font-family: Courier New,Courier,monospace">evas_gl_new(Evas * e)</span> function. This initializer takes as a parameter the Evas canvas on which OpenGL ES is to be used. When developing an application with Elementary, use the canvas of your window:</p>
+<pre class="prettyprint">ad-&gt;evasgl = evas_gl_new(evas_object_evas_get(ad-&gt;win));</pre>
 
-<p>Each triangle is defined with 3 point coordinates, 3 vertices for each triangle, 2 triangles per face and 6 faces. There are 36 vertices is total.</p>
-</li>
-<li>
-<p>Specify a color for each face of the cube. Each color is represented in the RGBA format for the corresponding vertex, where each component is ranged from 0 to 1 where 1 is the maximum value. For example, in 32-byte color space, the RGB color of (16, 147, 237) is translated as (0.0625, 0.57421875, 0.92578125). The A of RGBA stands for the alpha channel, which represents the transparency of the color. All colors defined in this tutorial are opaque to make it simpler, so each alpha value is set to 1.0. In this example, different variants of blue are used for the faces of the cube.</p>
-<p>Specify the colors of the cube into an array dedicated to this vertex:</p>
-<pre class="prettyprint">
-static const float 
-colors[] =
-{
-&nbsp;&nbsp;&nbsp;// Front
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;// Right
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;// Back
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;// Left
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;// Top
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;// Bottom
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f
-};
-</pre>
+<p>To free the memory allocated to this handler, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_free(Evas_GL *evas_gl)</span> function.</p>
 </li>
-</ol>
-
-<h2 id="draw" name="draw">Drawing the Cube with GLView</h2>
+<li>Create a surface.
 
-<p>After the model is initialized, create functionality to manipulate the scene. OpenGL ES 2.0 provided by GLView requires more preliminary work than the previous version of the library, but it gives you more power and flexibility, although this example does not take much benefit.</p>
-<p>To draw the cube with GLView and use mathematical functions for matrices:</p>
+<p>You must allocate a new config object to fill the surface out using the <span style="font-family: Courier New,Courier,monospace">evas_gl_config_new()</span> function. As long as Evas creates a config object for the user, it takes care of the backward compatibility issue. Once you have your config object, you can specify the surface settings:</p>
 
-<ol>
-<li>
-<p>Declare additional global variables for tasks specific to OpenGL ES 2.0. A program object is needed, an identifier for the vertices buffer, and another for the colors. Variables are also required to ensure the connection with the shader language:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">mvpLoc</span>: Identifier for model-view-projection matrix</li>
-<li><span style="font-family: Courier New,Courier,monospace">positionLoc</span>: Identifier for the vertex position</li>
-<li><span style="font-family: Courier New,Courier,monospace">colorLoc</span>: Identifier for the vertex color</li>
-</ul>
-<p>Declare all these variables in the <span style="font-family: Courier New,Courier,monospace">appdata</span> object as static variables so that each function can use variables and that they exist for the whole duration of the program:</p>
-<pre class="prettyprint">
-typedef struct 
-appdata 
-{
-&nbsp;&nbsp;&nbsp;unsigned int program;
-&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;
-&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;
-&nbsp;&nbsp;&nbsp;unsigned int vertexID;
-&nbsp;&nbsp;&nbsp;unsigned int colorID;
-&nbsp;&nbsp;&nbsp;unsigned int mvpLoc;
-&nbsp;&nbsp;&nbsp;unsigned int positionLoc;
-&nbsp;&nbsp;&nbsp;unsigned int colorLoc;
-}
-</pre>
-</li>
-<li>
-<p>Since OpenGL ES 2.0, some functions for matrix transformations have been removed. Define 3 matrices (projection matrix, model-view matrix, and a combination of these) to allow you to perform any transformations on the initial vertices matrix.</p>
-<ul>
-<li>Create the matrix multiplication function.
-<p>Define a function that is able to return the inner product of 2 matrices. This function reproduces the behavior of the <span style="font-family: Courier New,Courier,monospace">glMultMatrix()</span> function available in OpenGL ES 1.1. This function is very useful since almost every matrix transformation can be translated as multiplications of matrices.</p>
-<p>The function takes 3 parameters, 1 is for the result and the other 2 matrices are operands.</p>
 <pre class="prettyprint">
-static void
-customMutlMatrix(float matrix[16], const float matrix0[16], const float matrix1[16])
-{
-&nbsp;&nbsp;&nbsp;int i, row, column;
-&nbsp;&nbsp;&nbsp;float temp[16];
-&nbsp;&nbsp;&nbsp;for (column = 0; column &lt; 4; column++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (row = 0; row &lt; 4; row++) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp[column * 4 + row] = 0.0f;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 4; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp[column * 4 + row] += matrix0[i * 4 + row] * matrix1[column * 4 + i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 16; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;matrix[i] = temp[i];
-}
+appdata_s *ad;
+ad-&gt;cfg = evas_gl_config_new();
+ad-&gt;cfg-&gt;color_format = EVAS_GL_RGBA_8888; // Surface Color Format
+ad-&gt;cfg-&gt;depth_bits = EVAS_GL_DEPTH_BIT_24; // Surface Depth Format
+ad-&gt;cfg-&gt;stencil_bits = EVAS_GL_STENCIL_NONE; // Surface Stencil Format
+ad-&gt;cfg-&gt;options_bits = EVAS_GL_OPTIONS_NONE; // Configuration options (here, no extra options)
 </pre>
-</li>
-<li>Create the matrix identity function.
-<p>Implement a function equivalent to the <span style="font-family: Courier New,Courier,monospace">glLoadIdentity()</span> function that replaces the current matrix with the identity matrix.</p>
-<pre class="prettyprint">
-const float 
-unit_matrix[] = 
-{
-&nbsp;&nbsp;&nbsp;1.0f, 0.0f, 0.0f, 0.0f,
-&nbsp;&nbsp;&nbsp;0.0f, 1.0f, 0.0f, 0.0f,
-&nbsp;&nbsp;&nbsp;0.0f, 0.0f, 1.0f, 0.0f,
-&nbsp;&nbsp;&nbsp;0.0f, 0.0f, 0.0f, 1.0f
-}
 
-static void
-customLoadIdentity(float matrix[16])
-{
-&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; 16; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;matrix[i] = unit_matrix[i];
-}
-</pre>
-</li>
-<li>Create the matrix projection function.
-<p>Since the <span style="font-family: Courier New,Courier,monospace">glFrustum()</span> function has been deprecated, implement a function that produces perspective projection matrices that are used to transform from eye coordinate space to clip coordinate space. This matrix projects a portion of the space (the &quot;frustum&quot;) to your screen. Many caveats apply (such as normalized device coordinates and perspective divide), but that is the idea.</p>
-<pre class="prettyprint">
-static int
-customFrustum(float result[16], 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const float left, const float right, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const float bottom, const float top, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const float near, const float far)
-{
-&nbsp;&nbsp;&nbsp;if ((right - left) == 0.0f || (top - bottom) == 0.0f || (far - near) == 0.0f) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-
-&nbsp;&nbsp;&nbsp;result[0] = 2.0f / (right - left);
-&nbsp;&nbsp;&nbsp;result[1] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[2] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[3] = 0.0f;
-
-&nbsp;&nbsp;&nbsp;result[4] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[5] = 2.0f / (top - bottom);
-&nbsp;&nbsp;&nbsp;result[6] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[7] = 0.0f;
-
-&nbsp;&nbsp;&nbsp;result[8] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[9] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[10] = -2.0f / (far - near);
-&nbsp;&nbsp;&nbsp;result[11] = 0.0f;
-
-&nbsp;&nbsp;&nbsp;result[12] = -(right + left) / (right - left);
-&nbsp;&nbsp;&nbsp;result[13] = -(top + bottom) / (top - bottom);
-&nbsp;&nbsp;&nbsp;result[14] = -(far + near) / (far - near);
-&nbsp;&nbsp;&nbsp;result[15] = 1.0f;
-
-&nbsp;&nbsp;&nbsp;return 1;
-}
-</pre>
-</li>
-<li>Create the matrix scaling function.
-<p>The deprecated <span style="font-family: Courier New,Courier,monospace">glScale()</span> function represents a non-uniform scaling along the X, Y, and Z axes. The 3 parameters indicate the desired scale factor along each of the 3 axes.</p>
-<pre class="prettyprint">
-const float 
-scale_matrix[] = 
-{
-&nbsp;&nbsp;&nbsp;x, 0.0f, 0.0f, 0.0f,
-&nbsp;&nbsp;&nbsp;0.0f, y, 0.0f, 0.0f,
-&nbsp;&nbsp;&nbsp;0.0f, 0.0f, z, 0.0f,
-&nbsp;&nbsp;&nbsp;0.0f, 0.0f, 0.0f, 1.0f
-}
-</pre>
-<p>The following example shows the implementation of the matrix scaling function:</p>
-<pre class="prettyprint">static void
-customScale(float matrix[16], const float sx, const float sy, const float sz)
-{ 
-&nbsp;&nbsp;&nbsp;matrix[0]  *= sx; 
-&nbsp;&nbsp;&nbsp;matrix[1]  *= sx; 
-&nbsp;&nbsp;&nbsp;matrix[2]  *= sx; 
-&nbsp;&nbsp;&nbsp;matrix[3]  *= sx; 
-
-&nbsp;&nbsp;&nbsp;matrix[4]  *= sy; 
-&nbsp;&nbsp;&nbsp;matrix[5]  *= sy; 
-&nbsp;&nbsp;&nbsp;matrix[6]  *= sy; 
-&nbsp;&nbsp;&nbsp;matrix[7]  *= sy; 
-
-&nbsp;&nbsp;&nbsp;matrix[8]  *= sz; 
-&nbsp;&nbsp;&nbsp;matrix[9]  *= sz; 
-&nbsp;&nbsp;&nbsp;matrix[10] *= sz; 
-&nbsp;&nbsp;&nbsp;matrix[11] *= sz; 
-}
-</pre>
-</li>
+<p>Once we have configured the surface behavior, we must initialize the surface using <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_create(Evas_GL* evas_gl, Evas_GL_Config * cfg, int w, int h)</span>. This function takes the given Evas_GL object as the first parameter and the pixel format, and configuration of the rendering surface as the second parameter. The last two parameters are the width and height of the surface, which we recover directly from the window.</p>
 
-<li>Create the matrix rotation function.
-<p>Define a function to represent a rotation by the vector (X Y Z). The current matrix is multiplied by a rotation matrix.</p>
-<pre class="prettyprint">
-static void
-customRotate(float matrix[16], const float anglex, const float angley, const floatanglez)
-{
-&nbsp;&nbsp;&nbsp;const float pi = 3.141592f;
-&nbsp;&nbsp;&nbsp;float temp[16];
-&nbsp;&nbsp;&nbsp;float rz = 2.0f * pi * anglez / 360.0f;
-&nbsp;&nbsp;&nbsp;float rx = 2.0f * pi * anglex / 360.0f;
-&nbsp;&nbsp;&nbsp;float ry = 2.0f * pi * angley / 360.0f;
-&nbsp;&nbsp;&nbsp;float sy = sinf(ry);
-&nbsp;&nbsp;&nbsp;float cy = cosf(ry);
-&nbsp;&nbsp;&nbsp;float sx = sinf(rx);
-&nbsp;&nbsp;&nbsp;float cx = cosf(rx);
-&nbsp;&nbsp;&nbsp;float sz = sinf(rz);
-&nbsp;&nbsp;&nbsp;float cz = cosf(rz);
-
-&nbsp;&nbsp;&nbsp;customLoadIdentity(temp);
-
-&nbsp;&nbsp;&nbsp;temp[0] = cy * cz - sx * sy * sz;
-&nbsp;&nbsp;&nbsp;temp[1] = cz * sx * sy + cy * sz;
-&nbsp;&nbsp;&nbsp;temp[2] = -cx * sy;
-
-&nbsp;&nbsp;&nbsp;temp[4] = -cx * sz;
-&nbsp;&nbsp;&nbsp;temp[5] = cx * cz;
-&nbsp;&nbsp;&nbsp;temp[6] = sx;
-
-&nbsp;&nbsp;&nbsp;temp[8] = cz * sy + cy * sx * sz;
-&nbsp;&nbsp;&nbsp;temp[9] = -cy * cz * sx + sy * sz;
-&nbsp;&nbsp;&nbsp;temp[10] = cx * cy;
-
-&nbsp;&nbsp;&nbsp;customMultMatrix(matrix, matrix, temp);
-}
-</pre>
-</li>
-</ul>
-</li>
-<li>Create the shader:
-<ol type="a">
-<li>
-<p>Define the source for the shader using a string array. First build a vertex shader, which is used to a medium precision for float values. Then build a uniform matrix with dimensions 4x4 intended to hold the model-view-projection matrix. In addition, create 2 vector attributes which have 4 components for the vertex position and the color. Finally, the varying <span style="font-family: Courier New,Courier,monospace">v_color</span> variable can be accessed from the fragment shader.</p>
-<p>In the main function of the shader, initialize the position of the current vertex, <span style="font-family: Courier New,Courier,monospace">gl_Position</span>, with the product of the vertex position and the model-view-projection matrix, to normalize the position for the target screen. The pixel color is calculated by the varying variable from the vertex shader.</p>
-<p>In the fragment shader, declare a varying variable, and set the color of the pixel with this interpolated color.</p>
 <pre class="prettyprint">
-static const char 
-vertex_shader[] =
-&nbsp;&nbsp;&nbsp;&quot;precision mediump float;&quot;
-&nbsp;&nbsp;&nbsp;&quot;uniform mat4 u_mvpMat;&quot;
-&nbsp;&nbsp;&nbsp;&quot;attribute vec4 a_position;&quot;
-&nbsp;&nbsp;&nbsp;&quot;attribute vec4 a_color;&quot;
-&nbsp;&nbsp;&nbsp;&quot;varying vec4 v_color;&quot;
-&nbsp;&nbsp;&nbsp;&quot;void main()&quot;
-&nbsp;&nbsp;&nbsp;&quot;{&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;gl_Position = u_mvpMat * a_position;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;v_color = a_color;&quot;
-&nbsp;&nbsp;&nbsp;&quot;}&quot;;
-
-static const char 
-fragment_shader[] =
-&nbsp;&nbsp;&nbsp;&quot;varying lowp vec4 v_color;&quot;
-&nbsp;&nbsp;&nbsp;&quot;void main()&quot;
-&nbsp;&nbsp;&nbsp;&quot;{&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;gl_FragColor = v_color;&quot;
-&nbsp;&nbsp;&nbsp;&quot;}&quot;;
+Evas_Coord w, h;
+evas_object_geometry_get(ad-&gt;win, NULL, NULL, &amp;w, &amp;h);
+ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, w, h);
 </pre>
-</li>
-<li>
-<p>Create the shaders, attach the source code defined above, and compile the program object:</p>
-<pre class="prettyprint">
-static void
-initShaders(void* data)
-{
-&nbsp;&nbsp;&nbsp;const char *p;
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
 
-&nbsp;&nbsp;&nbsp;p = vertex_shader;
-&nbsp;&nbsp;&nbsp;ad-&gt;vtx_shader = glCreateShader(GL_VERTEX_SHADER);
-&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;vtx_shader, 1, &amp;p, NULL);
-&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;vtx_shader);
-
-&nbsp;&nbsp;&nbsp;p = fragment_shader;
-&nbsp;&nbsp;&nbsp;ad-&gt;fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);
-&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
-&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
-</pre>
-</li>
-<li>
-<p>Once the shaders are ready, instantiate the program object and link the shaders. If the linking succeeds, you can destroy the shaders afterwards (using the <span style="font-family: Courier New,Courier,monospace">glDeleteShader()</span> function). Since they are inside the program object, it is pointless to keep them in memory.</p>
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
+<p>To manually delete a GL surface, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_surface_destroy(Evas_GL *evas_gl, Evas_GL_Surface *surf)</span> function.</p></li>
 
-&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
-&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;fgmt_shader);
+<li>Create a context.
 
-&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;vtx_shader);
-&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;fgmt_shader);
+<p>Create a context for Evas_GL using the <span style="font-family: Courier New,Courier,monospace">evas_gl_context_create(Evas_GL * evas_gl, Evas_GL_Context * share_ctx)</span> function. You can merge the context with a higher context definition you must pass as a second parameter.</p>
 
-&nbsp;&nbsp;&nbsp;glLinkProgram(ad-&gt;program);
-</pre>
-</li>
-<li>
-<p>For shader process, create identifiers for the attribute variables used in the shader program. Create an identifier for the model-view-projection matrix, another one for the current vertex position, and a last one for the vertex color.</p>
-<pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;ad-&gt;mvpLoc = glGetUniformLocation(ad-&gt;program, &quot;u_mvpMat&quot;);
-&nbsp;&nbsp;&nbsp;ad-&gt;positionLoc = glGetAttribLocation(ad-&gt;program, &quot;a_position&quot;);
-&nbsp;&nbsp;&nbsp;ad-&gt;colorLoc = glGetAttribLocation(ad-&gt;program, &quot;a_color&quot;);
-</pre>
-</li>
-<li>
-<p>Generate the buffers for the vertex positions and colors:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;vertexID);
-&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vertexID);
-&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
+ad-&gt;ctx = evas_gl_context_create(ad-&gt;evasgl, NULL);
 
-&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;colorID);
-&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;colorID);
-&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, sizeof(colors), colors, GL_STATIC_DRAW);
-}
+// This macro sets the global variable holding the GL API,
+// so that it is available to the application
+// Use it right after setting up the GL context object
+// For details, see Evas_GL_GLES2_Helpers.h
+EVAS_GL_GLOBAL_GLES2_USE(ad-&gt;evasgl, ad-&gt;ctx);
 </pre>
-</li>
-<li>
-<p>Allocate memory for the matrix and load a unit matrix into it. Define the value that is used to build the perspective projection matrix with the <span style="font-family: Courier New,Courier,monospace">customFrustum()</span> function. Multiply this resulting matrix with a resizing matrix, so the model is correctly adjusted to the screen.</p>
-<pre class="prettyprint">
-float aspect;
-customLoadIdentity(view);
 
-if (w &gt; h) 
-{
-&nbsp;&nbsp;&nbsp;aspect = (float)w/h;
-&nbsp;&nbsp;&nbsp;customFrustum(view, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0, -1.0, 1.0);
-}
-else 
-{
-&nbsp;&nbsp;&nbsp;aspect = (float)h/w;
-&nbsp;&nbsp;&nbsp;customFrustum(view, -1.0, 1.0, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0);
-}
-</pre>
-</li>
-</ol>
-</li>
+<p>To delete the context later, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_context_destroy(Evas_GL *evas_gl, Evas_GL_Context *ctx)</span> function. To delete the entire configuration object, use the <span style="font-family: Courier New,Courier,monospace">evas_gl_config_free(Evas_GL_Config *cfg)</span> function instead.</p>
+   </li>
 </ol>
 
-<h2 id="render" name="render">Rendering the Cube</h2>
+<h3 id="getapi" name="getapi">Getting OpenGL ES APIs</h3>
 
-<p>To render the cube:</p>
-<ol>
-<li>
-<p>Set the viewport at 0,0 corresponding to the bottom left edge of the window, and the height and width of the GL surface. Clear the depth and the color buffers to the values that were selected during initialization. Call the <span style="font-family: Courier New,Courier,monospace">glUseProgram()</span> function to trigger the shader program.</p>
-<pre class="prettyprint">
-glViewport(0, 0, w, h);
-glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+<p>If you want to get the API of OpenGL ES, you can get the API for rendering OpenGL ES with the <span style="font-family: Courier New,Courier,monospace">evas_gl_api_get(Evas_GL *evas_gl_)</span>function. This function returns a structure that contains all the OpenGL ES functions you can use to render in Evas. These functions consist of all the standard OpenGL ES 2.0 functions and any extra ones Evas has decided to provide in addition. If you have your code ported to OpenGL ES 2.0, it is easy to render to Evas.</p>
 
-glUseProgram(ad-&gt;program);
-</pre>
-</li>
-<li>
-<p>Bind the position and color identifiers to the buffers defined above:</p>
-<pre class="prettyprint">
-glEnableVertexAttribArray(ad-&gt;positionLoc);
-glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vertexID);
-glVertexAttribPointer(ad-&gt;positionLoc, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), 0);
+<p>If you already use a global macro, such as <span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLOBAL_GLES2_XXX</span>, you need not get the APIs.</p>
 
-glEnableVertexAttribArray(ad-&gt;colorLoc);
-glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;colorID);
-glVertexAttribPointer(ad-&gt;colorLoc, 4, GL_FLOAT, GL_FALSE, 4 * sizeof(float), 0);
-</pre>
-</li>
-<li>
-<p>Initialize and calculate the transformation matrix of the model-view matrix by calling the <span style="font-family: Courier New,Courier,monospace">customRotate()</span> function. This makes the cube view rotate a little for a better perspective. Once the model-view matrix is ready to display, multiply the projection matrix with the model-view matrix.</p>
 <pre class="prettyprint">
-customLoadIdentity(model);
-customRotate(ad-&gt;model, 45.0f, 45.0f, 0.0f);
-customMutlMatrix(ad-&gt;mvp, ad-&gt;view, ad-&gt;model);
-</pre>
-</li>
-<li>
-<p>Load the model-view-projection matrix into the shader and call the <span style="font-family: Courier New,Courier,monospace">glDrawArrays()</span> function to draw the model:</p>
-<pre class="prettyprint">
-glUniformMatrix4fv(ad-&gt;mvpLoc, 1, GL_FALSE, mvp);
-glDrawArrays(GL_TRIANGLES, 0, 36);
-glFlush();
-</pre>
-</li>
-</ol>
+Evas_GL_API *glapi;
+glapi = evas_gl_api_get(ad-&gt;evasgl);</pre>
 
-  <p class="figure">Figure: Static cube</p> 
-  <p align="center"><img alt="Static cube" src="../../images/static_cube.png" /></p>
 
-<h2 id="animate" name="animate">Animating the Cube</h2>
+<h3 id="callbacks" name="callbacks">Callbacks</h3>
 
-<p>To animate the cube:</p>
-<ol>
-<li>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> to create an animation.</p>
-
-<p>The animator callback function is also triggered when the display is off. Use the <span style="font-family: Courier New,Courier,monospace">ecore_animator_freeze()</span> and <span style="font-family: Courier New,Courier,monospace">ecore_animator_thaw()</span> functions in the <span style="font-family: Courier New,Courier,monospace">app_pause_cb</span> and <span style="font-family: Courier New,Courier,monospace">app_resume_cb</span> callbacks for power saving.</p>
+<p>Now that we have configured the EvasGL environment, we declare a UI component in which all the OpenGL ES transformation takes place. In the example below, we selected the image component because it provides callbacks that allow us to play with the mouse events and coordinates, and we set up an image object that inherits the size of the parent window.</p>
 
 <pre class="prettyprint">
-static Eina_Bool
-animate_cb(void *data)
-{
-&nbsp;&nbsp;&nbsp;elm_glview_changed_set(data);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-
-static void
-create_gl_canvas(appdata_s *ad)
-{
-&nbsp;&nbsp;&nbsp;ad-&gt;ani = ecore_animator_add(animate_cb, ad-&gt;glview);
-}
+ad-&gt;img = evas_object_image_filled_add(evas_object_evas_get(ad-&gt;win));</pre>
 
-static void 
-app_pause(void *data) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ecore_animator_freeze(ad-&gt;ani);
-}
+<p>We define the &quot;OpenGL ES main loop&quot; function that is called every time the program attempts to have pixels from the image. We put all the OpenGL ES statements in charge of rendering the scene in this callback.</p>
 
-static void 
-app_resume(void *data) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ecore_animator_thaw(ad-&gt;ani);
-}
-</pre>
-</li>
-<li>
-<p>Define the global variables which are used as parameters of the rendering process. Add parameters to the application data object that are used to control the scaling and the rotation of the cube. Make the cube rotate on 1 axis (Z), and allow the user to interact with the mouse to make the cube rotate on the other axes (X and Y). To figure out whether the user is holding the mouse down, add a Boolean variable to have this information. Operations, such as shader initialization or program compilation, are not required at each tick of the animation loop. For better performance, isolate such tasks from the repetitive rendering loop. For such purpose, add a Boolean variable which tells whether the initialization is already done.</p>
-<pre class="prettyprint">
-typedef struct 
-appdata 
-{
-&nbsp;&nbsp;&nbsp;float xangle;
-&nbsp;&nbsp;&nbsp;float yangle;
-&nbsp;&nbsp;&nbsp;float zangle;
-&nbsp;&nbsp;&nbsp;Eina_Bool mouse_down: 1;
-&nbsp;&nbsp;&nbsp;Eina_Bool initialized: 1;
-}  appdata_s;
-</pre>
-</li>
-<li><p>Modify the rendering loop for animation.</p>
-<ul>
-<li>
-<p>Lighten the recurrent rendering process by adding an initialization step:</p>
 <pre class="prettyprint">
-if (ad-&gt;initialized) 
-{
-&nbsp;&nbsp;&nbsp;initShaders(ad);
-&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
-}
-</pre>
-</li>
-<li>
-<p>Before drawing the vertices, the rotation angle for the model-view matrix must be incremented for every tick. This makes the cube rotate automatically.</p>
-<pre class="prettyprint">
-customLoadIdentity(ad-&gt;model);
-customRotate(ad-&gt;model, ad-&gt;xangle, ad-&gt;yangle, ad-&gt;zangle++);
-customMutlMatrix(ad-&gt;mvp, ad-&gt;view, ad-&gt;model);
-</pre>
-</li>
-</ul>
-</li>
-<li>
-<p>Use the mouse to drag the cube around. To do so, add callbacks for mouse events. The first callback defines whether the user is holding the mouse down while moving the cursor around.</p>
-<pre class="prettyprint">
-static void
-mouse_down_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_TRUE;
-}
+evas_object_image_pixels_get_callback_set(ad-&gt;img, img_pixels_get_cb, ad);</pre>
 
-static void
-mouse_up_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;
-}
-</pre>
+<p>To define a function that takes care of the drawing using EvasGL (called the OpenGL ES main loop), use:</p>
 
-<p>When the mouse is down, calculate the new rotation angle with the mouse movement along the X and Y axis:</p>
 <pre class="prettyprint">
 static void
-mouse_move_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+img_pixels_get_cb(void *data, Evas_Object *obj)
 {
-&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev;
-&nbsp;&nbsp;&nbsp;ev = (Evas_Event_Mouse_Move *)event_info;
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;float dx = 0, dy = 0;
 
-&nbsp;&nbsp;&nbsp;if (ad-&gt;mouse_down) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dx = ev-&gt;cur.canvas.x - ev-&gt;prev.canvas.x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = ev-&gt;cur.canvas.y - ev-&gt;prev.canvas.y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;xangle += dy;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;yangle += dx;
-&nbsp;&nbsp;&nbsp;}
-}
-</pre>
-</li>
-<li>
-<p>Define the mouse event callbacks when creating the image canvas:</p>
-<pre class="prettyprint">
-evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
-evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
-evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
-</pre>
-</li>
-</ol>
+&nbsp;&nbsp;&nbsp;// Rendering process
+&nbsp;&nbsp;&nbsp;evas_gl_make_current(ad-&gt;evasgl, ad-&gt;sfc, ad-&gt;ctx);
+&nbsp;&nbsp;&nbsp;// Because the surface size can be changed, set the viewport in this callback
+&nbsp;&nbsp;&nbsp;glViewport(0, 0, ad-&gt;sfc_w, ad-&gt;sfc_h);
+&nbsp;&nbsp;&nbsp;// Paint it blue
+&nbsp;&nbsp;&nbsp;glClearColor(0.2, 0.2, 0.6, 1.0);
+&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT);
+&nbsp;&nbsp;&nbsp;// The usual OpenGL ES draw commands come here
+&nbsp;&nbsp;&nbsp;// draw_scene();
+}</pre>
 
-<h2 id="component" name="component">Implementing UI Component Interaction</h2>
+<p>At every tick, we must set the given context as a current context for the given surface using <span style="font-family: Courier New,Courier,monospace">evas_gl_make_current(Evas_GL *evas_gl, Evas_GL_Surface *surf, Evas_GL_Context *ctx)</span>.</p>
 
-<p>To control some aspects of the rendering, implement UI component interaction (in this use case, sliders):</p>
-<ol>
-<li>
-<p>Use sliders to control the shape of the cube. Declare 3 sliders to play with the scaling coordinates of the cube.</p>
-<pre class="prettyprint">
-typedef struct 
-appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *slx;
-&nbsp;&nbsp;&nbsp;Evas_Object *sly;
-&nbsp;&nbsp;&nbsp;Evas_Object *slz;
-}
-</pre>
-</li>
-<li>
-<p>Build and show the sliders when rendering the UI. The sliders accept values in a range from 0.0 to 1.5. They control the scaling of each axis of the cube.</p>
-<pre class="prettyprint">
-// Slider for X axis scale
-ad-&gt;slx = elm_slider_add(ad-&gt;inner_box);
-evas_object_size_hint_align_set(ad-&gt;slx, EVAS_HINT_FILL, 0);
-elm_slider_horizontal_set(ad-&gt;slx, EINA_TRUE);
-elm_slider_unit_format_set(ad-&gt;slx, &quot;%1.2f units&quot;);
-elm_slider_indicator_format_set(ad-&gt;slx, &quot;%1.2f units&quot;);
-elm_slider_indicator_show_set(ad-&gt;slx, EINA_TRUE);
-elm_slider_min_max_set(ad-&gt;slx, 0, 1.5);
-elm_slider_value_set(ad-&gt;slx, 0.75);
-evas_object_color_set(ad-&gt;slx, 0.0, 0.0, 120, 255);
-elm_box_pack_end(ad-&gt;inner_box, ad-&gt;slx);
-evas_object_show(ad-&gt;slx);
-
-// Slider for Y axis scale
-ad-&gt;sly = elm_slider_add(ad-&gt;inner_box);
-evas_object_size_hint_align_set(ad-&gt;sly, EVAS_HINT_FILL, 0);
-elm_slider_horizontal_set(ad-&gt;sly, EINA_TRUE);
-elm_slider_unit_format_set(ad-&gt;sly, &quot;%1.2f units&quot;);
-elm_slider_indicator_format_set(ad-&gt;sly, &quot;%1.2f units&quot;);
-elm_slider_indicator_show_set(ad-&gt;sly, EINA_TRUE);
-elm_slider_min_max_set(ad-&gt;sly, 0, 1.5);
-elm_slider_value_set(ad-&gt;sly, 0.75);
-evas_object_color_set(ad-&gt;sly, 0.0, 0.0, 120, 255);
-elm_box_pack_end(ad-&gt;inner_box, ad-&gt;sly);
-evas_object_show(ad-&gt;sly);
-
-// Slider for Z axis scale
-ad-&gt;slz = elm_slider_add(ad-&gt;inner_box);
-evas_object_size_hint_align_set(ad-&gt;slz, EVAS_HINT_FILL, 0);
-elm_slider_horizontal_set(ad-&gt;slz, EINA_TRUE);
-elm_slider_unit_format_set(ad-&gt;slz, &quot;%1.2f units&quot;);
-elm_slider_indicator_format_set(ad-&gt;slz, &quot;%1.2f units&quot;);
-elm_slider_indicator_show_set(ad-&gt;slz, EINA_TRUE);
-elm_slider_min_max_set(ad-&gt;slz, 0, 1.5);
-elm_slider_value_set(ad-&gt;slz, 0.75);
-evas_object_color_set(ad-&gt;slz, 0.0, 0.0, 120, 255);
-elm_box_pack_end(ad-&gt;inner_box, ad-&gt;slz);
-evas_object_show(ad-&gt;slz);
-</pre>
-</li>
-<li>
-<p>Use the actual sliders&#39;s values and pass them to the scaling function in the rendering loop:</p>
-<pre class="prettyprint">double scalex = elm_slider_value_get(ad-&gt;slx);
-double scaley = elm_slider_value_get(ad-&gt;sly);
-double scalez = elm_slider_value_get(ad-&gt;slz);
-
-customLoadIdentity(ad-&gt;model);
-customRotate(ad-&gt;model, ad-&gt;xangle, ad-&gt;yangle, ad-&gt;zangle++);
-customScale(ad-&gt;model, scalex, scaley, scalez);
-customMutlMatrix(ad-&gt;mvp, ad-&gt;view, ad-&gt;model);
-</pre>
-</li>
-</ol>
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> to define the OpenGL ES main loop. To do so, create a callback that is called on every animation tick. This animation callback is used only to mark the image as &quot;dirty&quot;, meaning that it needs an update next time Evas renders. It calls the pixel get callback that redraws the scene.</p>
 
-<h2 id="effect" name="effect">Implementing Effects</h2>
+<p>The animator callback function is also triggered when the display is off. Use the <span style="font-family: Courier New,Courier,monospace">ecore_animator_freeze()</span> and <span style="font-family: Courier New,Courier,monospace">ecore_animator_thaw()</span> functions in the <span style="font-family: Courier New,Courier,monospace">app_pause_cb</span> and <span style="font-family: Courier New,Courier,monospace">app_resume_cb</span> callbacks for power saving.</p>
 
-<p>To implement effects:</p>
-<ol>
-<li>
-<p>Create a button that resets the scene by putting the background color to black and makes the cube bounce back to its original scale. Add the button to the application data object.</p>
-<pre class="prettyprint">
-typedef struct 
-appdata 
-{
-&nbsp;&nbsp;&nbsp;Evas_Object *button;
-}
-</pre>
-</li>
-<li>
-<p>Add the button to the UI:</p>
-<pre class="prettyprint">
-elm_object_text_set(ad-&gt;button, &quot;Reset&quot;);
-elm_box_pack_start(ad-&gt;reset_vbox, ad-&gt;button);
-evas_object_smart_callback_add(ad-&gt;button, &quot;clicked&quot;, btn_reset_cb, ad);
-elm_box_pack_end(ad-&gt;inner_box, ad-&gt;button);
-evas_object_show(ad-&gt;button);
-</pre>
-</li>
-<li>
-<p>Declare a callback that resets the variables that have influence on the drawing of the cube. In addition, animate the sliders when they get back to their original position using the <span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span>.</p>
 <pre class="prettyprint">
-typedef struct 
-appdata 
-{
-&nbsp;&nbsp;&nbsp;float slx_value;
-&nbsp;&nbsp;&nbsp;float sly_value;
-&nbsp;&nbsp;&nbsp;float slz_value;
-} appdata_s;
-
 static Eina_Bool
-animate_reset_cb(void *data, double pos)
+animate_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;double frame = pos;
-&nbsp;&nbsp;&nbsp;float x, y, z;
-
-&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.8, 7);
-&nbsp;&nbsp;&nbsp;x = ad-&gt;slx_value*(1-frame) + 0.75*frame;
-&nbsp;&nbsp;&nbsp;y = ad-&gt;sly_value*(1-frame) + 0.75*frame;
-&nbsp;&nbsp;&nbsp;z = ad-&gt;slz_value*(1-frame) + 0.75*frame;
-
-&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slx, x);
-&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;sly, y);
-&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slz, z);
+&nbsp;&nbsp;&nbsp;Evas_Object *img = data;
+&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(img, EINA_TRUE);
 
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
 }
 
-static void
-btn_reset_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ad-&gt;slx_value = elm_slider_value_get(ad-&gt;slx);
-&nbsp;&nbsp;&nbsp;ad-&gt;sly_value = elm_slider_value_get(ad-&gt;sly);
-&nbsp;&nbsp;&nbsp;ad-&gt;slz_value = elm_slider_value_get(ad-&gt;slz);
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, animate_reset_cb, ad);
-}
-</pre>
-</li>
-</ol>
+ecore_animator_add(animate_cb, ad-&gt;img);</pre>
 
-<h2 id="source" name="source">Viewing the Entire Cube Source</h2>
+<p>You can define several other callbacks that have an impact on the drawing depending on the mouse, resize, and deletion events.</p>
 
-<p>The following code snippet contains the full code of the cube example. The details are explained in the other use cases.</p>
 <pre class="prettyprint">
-// Copyright (c) 2014 Samsung Electronics Co., Ltd All Rights Reserved
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_DEL, img_del_cb, ad);
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
+evas_object_event_callback_add(ad-&gt;img, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
+evas_object_event_callback_add(ad-&gt;win, EVAS_CALLBACK_RESIZE, win_resize_cb, ad);</pre>
 
-#include &lt;app.h&gt;
-#include &lt;Elementary.h&gt;
-#include &lt;Elementary_GL_Helpers.h&gt;
-#include &lt;efl_extension.h&gt;
-#include &lt;dlog.h&gt;
-
-#if !defined(PACKAGE)
-#define PACKAGE &quot;org.tizen.glviewtutorial&quot;
-#endif
-
-ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
-
-typedef struct 
-appdata 
-{
-&nbsp;&nbsp;&nbsp;// Elm_UI components
-&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;Evas_Object *glview;
-&nbsp;&nbsp;&nbsp;Evas_Object *main_box;
-&nbsp;&nbsp;&nbsp;Evas_Object *inner_box;
-&nbsp;&nbsp;&nbsp;Evas_Object *slx;
-&nbsp;&nbsp;&nbsp;Evas_Object *sly;
-&nbsp;&nbsp;&nbsp;Evas_Object *slz;
-&nbsp;&nbsp;&nbsp;Evas_Object *button;
-&nbsp;&nbsp;&nbsp;Ecore_Animator *ani;
-
-&nbsp;&nbsp;&nbsp;unsigned int program;
-&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;
-&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;
-&nbsp;&nbsp;&nbsp;unsigned int vertexID;
-&nbsp;&nbsp;&nbsp;unsigned int colorID;
-&nbsp;&nbsp;&nbsp;unsigned int mvpLoc;
-&nbsp;&nbsp;&nbsp;unsigned int positionLoc;
-&nbsp;&nbsp;&nbsp;unsigned int colorLoc;
-&nbsp;&nbsp;&nbsp;float model[16], mvp[16];
-&nbsp;&nbsp;&nbsp;float view[16];
-&nbsp;&nbsp;&nbsp;float xangle;
-&nbsp;&nbsp;&nbsp;float yangle;
-&nbsp;&nbsp;&nbsp;float zangle;
-&nbsp;&nbsp;&nbsp;Eina_Bool mouse_down: 1;
-&nbsp;&nbsp;&nbsp;Eina_Bool initialized: 1;
-
-&nbsp;&nbsp;&nbsp;float slx_value;
-&nbsp;&nbsp;&nbsp;float sly_value;
-&nbsp;&nbsp;&nbsp;float slz_value;
-} appdata_s;
-
-
-static const float 
-vertices[] =
-{
-&nbsp;&nbsp;&nbsp;// Front
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;// Right
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;// Back
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;// Left
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;// Top
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, 0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;// Bottom
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, 0.5f,
-&nbsp;&nbsp;&nbsp;-0.5f, -0.5f, -0.5f,
-&nbsp;&nbsp;&nbsp;0.5f, -0.5f, -0.5f
-};
-
-static const float 
-colors[] =
-{
-&nbsp;&nbsp;&nbsp;// Front
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;// Right
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;// Back
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;// Left
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.0625f, 0.57421875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;// Top
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.29296875f, 0.66796875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;// Bottom
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f,
-&nbsp;&nbsp;&nbsp;0.52734375f, 0.76171875f, 0.92578125f, 1.0f
-};
-
-// Vertex shader source
-static const char 
-vertex_shader[] =
-&nbsp;&nbsp;&nbsp;&quot;precision mediump float;&quot;
-&nbsp;&nbsp;&nbsp;&quot;uniform mat4 u_mvpMat;&quot;
-&nbsp;&nbsp;&nbsp;&quot;attribute vec4 a_position;&quot;
-&nbsp;&nbsp;&nbsp;&quot;attribute vec4 a_color;&quot;
-&nbsp;&nbsp;&nbsp;&quot;varying vec4 v_color;&quot;
-&nbsp;&nbsp;&nbsp;&quot;void main()&quot;
-&nbsp;&nbsp;&nbsp;&quot;{&quot;
-&nbsp;&nbsp;&nbsp;&quot;&nbsp;&nbsp;&nbsp;gl_Position = u_mvpMat * a_position;&quot;
-&nbsp;&nbsp;&nbsp;&quot;&nbsp;&nbsp;&nbsp;v_color = a_color;&quot;
-&nbsp;&nbsp;&nbsp;&quot;}&quot;;
-
-// Fragment shader source
-static const char 
-fragment_shader[] =
-&nbsp;&nbsp;&nbsp;&quot;varying lowp vec4 v_color;&quot;
-&nbsp;&nbsp;&nbsp;&quot;void main()&quot;
-&nbsp;&nbsp;&nbsp;&quot;{&quot;
-&nbsp;&nbsp;&nbsp;&quot;&nbsp;&nbsp;&nbsp;gl_FragColor = v_color;&quot;
-&nbsp;&nbsp;&nbsp;&quot;}&quot;;
-
-static void
-customLoadIdentity(float matrix[16])
-{
-&nbsp;&nbsp;&nbsp;matrix[0] = 1.0f;
-&nbsp;&nbsp;&nbsp;matrix[1] = 0.0f;
-&nbsp;&nbsp;&nbsp;matrix[2] = 0.0f;
-&nbsp;&nbsp;&nbsp;matrix[3] = 0.0f;
-
-&nbsp;&nbsp;&nbsp;matrix[4] = 0.0f;
-&nbsp;&nbsp;&nbsp;matrix[5] = 1.0f;
-&nbsp;&nbsp;&nbsp;matrix[6] = 0.0f;
-&nbsp;&nbsp;&nbsp;matrix[7] = 0.0f;
-
-&nbsp;&nbsp;&nbsp;matrix[8] = 0.0f;
-&nbsp;&nbsp;&nbsp;matrix[9] = 0.0f;
-&nbsp;&nbsp;&nbsp;matrix[10] = 1.0f;
-&nbsp;&nbsp;&nbsp;matrix[11] = 0.0f;
-
-&nbsp;&nbsp;&nbsp;matrix[12] = 0.0f;
-&nbsp;&nbsp;&nbsp;matrix[13] = 0.0f;
-&nbsp;&nbsp;&nbsp;matrix[14] = 0.0f;
-&nbsp;&nbsp;&nbsp;matrix[15] = 1.0f;
-}
-
-static void
-customMutlMatrix(float matrix[16], const float matrix0[16], const float matrix1[16])
-{
-&nbsp;&nbsp;&nbsp;int i, row, column;
-&nbsp;&nbsp;&nbsp;float temp[16];
-&nbsp;&nbsp;&nbsp;for (column = 0; column &lt; 4; column++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (row = 0; row &lt; 4; row++) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp[column * 4 + row] = 0.0f;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 4; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp[column * 4 + row] += matrix0[i * 4 + row] * matrix1[column * 4 + i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 16; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;matrix[i] = temp[i];
-}
-
-static void
-customScale(float matrix[16], const float sx, const float sy, const float sz)
-{
-&nbsp;&nbsp;&nbsp;matrix[0]  *= sx;
-&nbsp;&nbsp;&nbsp;matrix[1]  *= sx;
-&nbsp;&nbsp;&nbsp;matrix[2]  *= sx;
-&nbsp;&nbsp;&nbsp;matrix[3]  *= sx;
-
-&nbsp;&nbsp;&nbsp;matrix[4]  *= sy;
-&nbsp;&nbsp;&nbsp;matrix[5]  *= sy;
-&nbsp;&nbsp;&nbsp;matrix[6]  *= sy;
-&nbsp;&nbsp;&nbsp;matrix[7]  *= sy;
-
-&nbsp;&nbsp;&nbsp;matrix[8]  *= sz;
-&nbsp;&nbsp;&nbsp;matrix[9]  *= sz;
-&nbsp;&nbsp;&nbsp;matrix[10] *= sz;
-&nbsp;&nbsp;&nbsp;matrix[11] *= sz;
-}
-
-static void
-customRotate(float matrix[16], const float anglex, const float angley, const float anglez)
-{
-&nbsp;&nbsp;&nbsp;const float pi = 3.141592f;
-&nbsp;&nbsp;&nbsp;float temp[16];
-&nbsp;&nbsp;&nbsp;float rz = 2.0f * pi * anglez / 360.0f;
-&nbsp;&nbsp;&nbsp;float rx = 2.0f * pi * anglex / 360.0f;
-&nbsp;&nbsp;&nbsp;float ry = 2.0f * pi * angley / 360.0f;
-&nbsp;&nbsp;&nbsp;float sy = sinf(ry);
-&nbsp;&nbsp;&nbsp;float cy = cosf(ry);
-&nbsp;&nbsp;&nbsp;float sx = sinf(rx);
-&nbsp;&nbsp;&nbsp;float cx = cosf(rx);
-&nbsp;&nbsp;&nbsp;float sz = sinf(rz);
-&nbsp;&nbsp;&nbsp;float cz = cosf(rz);
-
-&nbsp;&nbsp;&nbsp;customLoadIdentity(temp);
-
-&nbsp;&nbsp;&nbsp;temp[0] = cy * cz - sx * sy * sz;
-&nbsp;&nbsp;&nbsp;temp[1] = cz * sx * sy + cy * sz;
-&nbsp;&nbsp;&nbsp;temp[2] = -cx * sy;
-
-&nbsp;&nbsp;&nbsp;temp[4] = -cx * sz;
-&nbsp;&nbsp;&nbsp;temp[5] = cx * cz;
-&nbsp;&nbsp;&nbsp;temp[6] = sx;
-
-&nbsp;&nbsp;&nbsp;temp[8] = cz * sy + cy * sx * sz;
-&nbsp;&nbsp;&nbsp;temp[9] = -cy * cz * sx + sy * sz;
-&nbsp;&nbsp;&nbsp;temp[10] = cx * cy;
-
-&nbsp;&nbsp;&nbsp;customMutlMatrix(matrix, matrix, temp);
-}
-
-static int
-customFrustum(float result[16], const float left, const float right, const float bottom, const float top, const float near, const float far)
-{
-&nbsp;&nbsp;&nbsp;if ((right - left) == 0.0f || (top - bottom) == 0.0f || (far - near) == 0.0f) return 0;
-
-&nbsp;&nbsp;&nbsp;result[0] = 2.0f / (right - left);
-&nbsp;&nbsp;&nbsp;result[1] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[2] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[3] = 0.0f;
-
-&nbsp;&nbsp;&nbsp;result[4] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[5] = 2.0f / (top - bottom);
-&nbsp;&nbsp;&nbsp;result[6] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[7] = 0.0f;
-
-&nbsp;&nbsp;&nbsp;result[8] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[9] = 0.0f;
-&nbsp;&nbsp;&nbsp;result[10] = -2.0f / (far - near);
-&nbsp;&nbsp;&nbsp;result[11] = 0.0f;
-
-&nbsp;&nbsp;&nbsp;result[12] = -(right + left) / (right - left);
-&nbsp;&nbsp;&nbsp;result[13] = -(top + bottom) / (top - bottom);
-&nbsp;&nbsp;&nbsp;result[14] = -(far + near) / (far - near);
-&nbsp;&nbsp;&nbsp;result[15] = 1.0f;
-
-&nbsp;&nbsp;&nbsp;return 1;
-}
+<p>Because the window size can be changed, you must set a resize callback for the window. In addition, you must recreate an <span style="font-family: Courier New,Courier,monospace">Evas_GL_Surface</span> in the resize callback and reset the viewport size with the new window size:</p>
 
+<pre class="prettyprint">
 static void
-initShaders(void* data)
+win_resize_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;const char *p;
 &nbsp;&nbsp;&nbsp;appdata_s *ad = data;
 
-&nbsp;&nbsp;&nbsp;p = vertex_shader;
-&nbsp;&nbsp;&nbsp;ad-&gt;vtx_shader = glCreateShader(GL_VERTEX_SHADER);
-&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;vtx_shader, 1, &amp;p, NULL);
-&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;vtx_shader);
-
-&nbsp;&nbsp;&nbsp;p = fragment_shader;
-&nbsp;&nbsp;&nbsp;ad-&gt;fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);
-&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
-&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
-
-&nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
-
-&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
-&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;fgmt_shader);
-
-&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;vtx_shader);
-&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;fgmt_shader);
-
-&nbsp;&nbsp;&nbsp;glLinkProgram(ad-&gt;program);
-
-&nbsp;&nbsp;&nbsp;ad-&gt;mvpLoc&nbsp;&nbsp;&nbsp;  = glGetUniformLocation(ad-&gt;program, &quot;u_mvpMat&quot;);
-&nbsp;&nbsp;&nbsp;ad-&gt;positionLoc = glGetAttribLocation(ad-&gt;program, &quot;a_position&quot;);
-&nbsp;&nbsp;&nbsp;ad-&gt;colorLoc&nbsp;&nbsp;&nbsp;= glGetAttribLocation(ad-&gt;program, &quot;a_color&quot;);
-}
-
-static void 
-init_gl(Evas_Object *obj) 
-{
-&nbsp;&nbsp;&nbsp;int w, h;
-&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
-
-&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
-
-&nbsp;&nbsp;&nbsp;if (!ad-&gt;initialized) 
+&nbsp;&nbsp;&nbsp;if (ad-&gt;sfc)
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initShaders(ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;vertexID);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vertexID);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;colorID);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;colorID);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, sizeof(colors), colors, GL_STATIC_DRAW);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_native_surface_set(ad-&gt;img, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_surface_destroy(ad-&gt;evasgl, ad-&gt;sfc);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = NULL;
 &nbsp;&nbsp;&nbsp;}
-}
-
-void 
-resize_gl(Evas_Object *obj) 
-{
-&nbsp;&nbsp;&nbsp;int w, h;
-&nbsp;&nbsp;&nbsp;float aspect;
-&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
-
-&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;customLoadIdentity(ad-&gt;view);
-
-&nbsp;&nbsp;&nbsp;if (w &gt; h) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float) w / h;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;customFrustum(ad-&gt;view, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0, -1.0, 1.0);
-&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float) h / w;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;customFrustum(ad-&gt;view, -1.0, 1.0, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0);
-&nbsp;&nbsp;&nbsp;}
-}
-
-static void 
-draw_gl(Evas_Object *obj) 
-{
-&nbsp;&nbsp;&nbsp;int w, h;
-&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
 
-&nbsp;&nbsp;&nbsp;double scalex = elm_slider_value_get(ad-&gt;slx);
-&nbsp;&nbsp;&nbsp;double scaley = elm_slider_value_get(ad-&gt;sly);
-&nbsp;&nbsp;&nbsp;double scalez = elm_slider_value_get(ad-&gt;slz);
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, NULL, NULL, &amp;ad-&gt;sfc_w, &amp;ad-&gt;sfc_h);
+&nbsp;&nbsp;&nbsp;evas_object_image_size_set(ad-&gt;img, ad-&gt;sfc_w, ad-&gt;sfc_h);
+&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;img, ad-&gt;sfc_w, ad-&gt;sfc_h);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;img);
 
-&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
-
-&nbsp;&nbsp;&nbsp;glClearDepthf(1.0f);
-&nbsp;&nbsp;&nbsp;glClearColor(0.0, 0.0, 0.0, 1.0);
-&nbsp;&nbsp;&nbsp;glEnable(GL_CULL_FACE);
-
-&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);
-&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
-
-&nbsp;&nbsp;&nbsp;glUseProgram(ad-&gt;program);
-
-&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;positionLoc);
-&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vertexID);
-&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;positionLoc, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), 0);
-
-&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;colorLoc);
-&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;colorID);
-&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;colorLoc, 4, GL_FLOAT, GL_FALSE, 4 * sizeof(float), 0);
-
-&nbsp;&nbsp;&nbsp;customLoadIdentity(ad-&gt;model);
-&nbsp;&nbsp;&nbsp;customRotate(ad-&gt;model, ad-&gt;xangle, ad-&gt;yangle, ad-&gt;zangle++);
-&nbsp;&nbsp;&nbsp;customScale(ad-&gt;model, scalex, scaley, scalez);
-&nbsp;&nbsp;&nbsp;customMutlMatrix(ad-&gt;mvp, ad-&gt;view, ad-&gt;model);
-
-&nbsp;&nbsp;&nbsp;glUniformMatrix4fv(ad-&gt;mvpLoc, 1, GL_FALSE, ad-&gt;mvp);
-&nbsp;&nbsp;&nbsp;glDrawArrays(GL_TRIANGLES, 0, 36);
-
-&nbsp;&nbsp;&nbsp;glFlush();
-}
-
-static void 
-del_gl(Evas_Object *obj) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = evas_object_data_get(obj, &quot;ad&quot;);
-
-&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;vtx_shader);
-&nbsp;&nbsp;&nbsp;glDeleteShader(ad-&gt;fgmt_shader);
-&nbsp;&nbsp;&nbsp;glDeleteProgram(ad-&gt;program);
-
-&nbsp;&nbsp;&nbsp;evas_object_data_del((Evas_Object*) obj, &quot;ad&quot;);
-}
-
-static Eina_Bool 
-animate_cb(void *data) 
-{
-&nbsp;&nbsp;&nbsp;elm_glview_changed_set(data);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-
-static void 
-del_animate_cb(void *data, Evas *evas, Evas_Object *obj, void *event_info) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ecore_animator_del(ad-&gt;ani);
-}
-
-static void 
-mouse_down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_TRUE;
-}
-
-static void 
-mouse_move_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
-{
-&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev;
-&nbsp;&nbsp;&nbsp;ev = (Evas_Event_Mouse_Move *) event_info;
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;float dx = 0, dy = 0;
-
-&nbsp;&nbsp;&nbsp;if (ad-&gt;mouse_down) 
+&nbsp;&nbsp;&nbsp;if (!ad-&gt;sfc)
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dx = ev-&gt;cur.canvas.x - ev-&gt;prev.canvas.x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = ev-&gt;cur.canvas.y - ev-&gt;prev.canvas.y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;xangle += dy;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;yangle += dx;
-&nbsp;&nbsp;&nbsp;}
-}
-
-static void 
-mouse_up_cb(void *data, Evas *e, Evas_Object *obj, void *event_info) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;
-}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Native_Surface ns;
 
-static Eina_Bool 
-animate_reset_cb(void *data, double pos) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;double frame = pos;
-&nbsp;&nbsp;&nbsp;float x, y, z;
-
-&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.8, 7);
-&nbsp;&nbsp;&nbsp;x = ad-&gt;slx_value * (1 - frame) + 0.75 * frame;
-&nbsp;&nbsp;&nbsp;y = ad-&gt;sly_value * (1 - frame) + 0.75 * frame;
-&nbsp;&nbsp;&nbsp;z = ad-&gt;slz_value * (1 - frame) + 0.75 * frame;
-
-&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slx, x);
-&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;sly, y);
-&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slz, z);
-
-&nbsp;&nbsp;&nbsp;return EINA_TRUE;
-}
-
-static void 
-btn_reset_cb(void *data, Evas_Object *obj, void *event_info) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ad-&gt;slx_value = elm_slider_value_get(ad-&gt;slx);
-&nbsp;&nbsp;&nbsp;ad-&gt;sly_value = elm_slider_value_get(ad-&gt;sly);
-&nbsp;&nbsp;&nbsp;ad-&gt;slz_value = elm_slider_value_get(ad-&gt;slz);
-&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(1, animate_reset_cb, ad);
-}
-
-static void 
-win_back_cb(void *data, Evas_Object *obj, void *event_info) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;// Let the window go to the hidden state
-&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
-}
-
-static void
-win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;ui_app_exit();
-}
-
-static void 
-create_base_gui(appdata_s *ad) 
-{
-&nbsp;&nbsp;&nbsp;// Window
-&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;opengl&quot;);
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *) (&amp;rots), 4);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, ad-&gt;sfc_w, ad-&gt;sfc_h);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(ad-&gt;img, EINA_TRUE);
 &nbsp;&nbsp;&nbsp;}
+}</pre>
 
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
-&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_TRANSPARENT);
-
-&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND,   EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;ad-&gt;main_box = elm_box_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;main_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;main_box);
-
-&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;main_box);
-
-&nbsp;&nbsp;&nbsp;// Show the window after the base GUI is set up
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-}
-
-static void 
-create_gl_canvas(appdata_s *ad) 
-{
-&nbsp;&nbsp;&nbsp;// Create and initialize GLView
-&nbsp;&nbsp;&nbsp;ad-&gt;glview = elm_glview_add(ad-&gt;main_box);
-&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(ad-&gt;glview);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;glview, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;glview, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-
-&nbsp;&nbsp;&nbsp;// Request a surface with alpha and a depth buffer
-&nbsp;&nbsp;&nbsp;elm_glview_mode_set(ad-&gt;glview, ELM_GLVIEW_DEPTH);
-
-&nbsp;&nbsp;&nbsp;// The resize policy tells GLView what to do with the surface when it
-&nbsp;&nbsp;&nbsp;// resizes. ELM_GLVIEW_RESIZE_POLICY_RECREATE tells it to
-&nbsp;&nbsp;&nbsp;// destroy the current surface and recreate it to the new size
-&nbsp;&nbsp;&nbsp;elm_glview_resize_policy_set(ad-&gt;glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
-
-&nbsp;&nbsp;&nbsp;// The render policy sets how GLView must render GL code.
-&nbsp;&nbsp;&nbsp;// ELM_GLVIEW_RENDER_POLICY_ON_DEMAND has the GL callback
-&nbsp;&nbsp;&nbsp;// called only when the object is visible.
-&nbsp;&nbsp;&nbsp;// ELM_GLVIEW_RENDER_POLICY_ALWAYS causes the callback to be
-&nbsp;&nbsp;&nbsp;// called even if the object were hidden
-&nbsp;&nbsp;&nbsp;elm_glview_render_policy_set(ad-&gt;glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);
-
-&nbsp;&nbsp;&nbsp;// The initialize callback function gets registered here
-&nbsp;&nbsp;&nbsp;elm_glview_init_func_set(ad-&gt;glview, init_gl);
-
-&nbsp;&nbsp;&nbsp;// The delete callback function gets registered here
-&nbsp;&nbsp;&nbsp;elm_glview_del_func_set(ad-&gt;glview, del_gl);
-
-&nbsp;&nbsp;&nbsp;// The resize callback function gets registered here
-&nbsp;&nbsp;&nbsp;elm_glview_resize_func_set(ad-&gt;glview, resize_gl);
-
-&nbsp;&nbsp;&nbsp;// The render callback function gets registered here
-&nbsp;&nbsp;&nbsp;elm_glview_render_func_set(ad-&gt;glview, draw_gl);
-
-&nbsp;&nbsp;&nbsp;// Add the GLView to the box and show it
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;main_box, ad-&gt;glview);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;glview);
-
-&nbsp;&nbsp;&nbsp;// This adds an animator so that the app regularly
-&nbsp;&nbsp;&nbsp;// triggers updates of the GLView using elm_glview_changed_set()
-&nbsp;&nbsp;&nbsp;//
-&nbsp;&nbsp;&nbsp;// NOTE: If you delete GL, this animator keeps running trying to access
-&nbsp;&nbsp;&nbsp;// GL so this animator needs to be deleted with ecore_animator_del()
-&nbsp;&nbsp;&nbsp;ad-&gt;ani = ecore_animator_add(animate_cb, ad-&gt;glview);
-&nbsp;&nbsp;&nbsp;evas_object_data_set(ad-&gt;glview, &quot;ad&quot;, ad);
-&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_DEL, del_animate_cb, ad-&gt;glview);
-&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
-&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
-&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
-
-&nbsp;&nbsp;&nbsp;// Set rotation variables
-&nbsp;&nbsp;&nbsp;ad-&gt;xangle = 45.0f;
-&nbsp;&nbsp;&nbsp;ad-&gt;yangle = 45.0f;
-&nbsp;&nbsp;&nbsp;ad-&gt;zangle = 0.0f;
-&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;
-&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_FALSE;
-}
-
-static void 
-create_toolbox(appdata_s *ad) 
-{
-&nbsp;&nbsp;&nbsp;ad-&gt;inner_box = elm_box_add(ad-&gt;main_box);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;inner_box, EVAS_HINT_FILL, 0);
-&nbsp;&nbsp;&nbsp;elm_box_horizontal_set(ad-&gt;inner_box, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_box_homogeneous_set(ad-&gt;inner_box, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;main_box, ad-&gt;inner_box);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;inner_box);
-
-&nbsp;&nbsp;&nbsp;// Slider for X axis scale
-&nbsp;&nbsp;&nbsp;ad-&gt;slx = elm_slider_add(ad-&gt;inner_box);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;slx, EVAS_HINT_FILL, 0);
-&nbsp;&nbsp;&nbsp;elm_slider_horizontal_set(ad-&gt;slx, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_slider_unit_format_set(ad-&gt;slx, &quot;%1.2f units&quot;);
-&nbsp;&nbsp;&nbsp;elm_slider_indicator_format_set(ad-&gt;slx, &quot;%1.2f units&quot;);
-&nbsp;&nbsp;&nbsp;elm_slider_indicator_show_set(ad-&gt;slx, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(ad-&gt;slx, 0, 1.5);
-&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slx, 0.75);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;slx, 0.0, 0.0, 120, 255);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;slx);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;slx);
-
-&nbsp;&nbsp;&nbsp;// Slider for Y axis scale
-&nbsp;&nbsp;&nbsp;ad-&gt;sly = elm_slider_add(ad-&gt;inner_box);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;sly, EVAS_HINT_FILL, 0);
-&nbsp;&nbsp;&nbsp;elm_slider_horizontal_set(ad-&gt;sly, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_slider_unit_format_set(ad-&gt;sly, &quot;%1.2f units&quot;);
-&nbsp;&nbsp;&nbsp;elm_slider_indicator_format_set(ad-&gt;sly, &quot;%1.2f units&quot;);
-&nbsp;&nbsp;&nbsp;elm_slider_indicator_show_set(ad-&gt;sly, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(ad-&gt;sly, 0, 1.5);
-&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;sly, 0.75);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;sly, 0.0, 0.0, 120, 255);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;sly);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;sly);
-
-&nbsp;&nbsp;&nbsp;// Slider for Z axis scale
-&nbsp;&nbsp;&nbsp;ad-&gt;slz = elm_slider_add(ad-&gt;inner_box);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;slz, EVAS_HINT_FILL, 0);
-&nbsp;&nbsp;&nbsp;elm_slider_horizontal_set(ad-&gt;slz, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_slider_unit_format_set(ad-&gt;slz, &quot;%1.2f units&quot;);
-&nbsp;&nbsp;&nbsp;elm_slider_indicator_format_set(ad-&gt;slz, &quot;%1.2f units&quot;);
-&nbsp;&nbsp;&nbsp;elm_slider_indicator_show_set(ad-&gt;slz, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(ad-&gt;slz, 0, 1.5);
-&nbsp;&nbsp;&nbsp;elm_slider_value_set(ad-&gt;slz, 0.75);
-&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;slz, 0.0, 0.0, 120, 255);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;slz);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;slz);
-
-&nbsp;&nbsp;&nbsp;// Reset button
-&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;inner_box);
-&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Reset&quot;);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;button, &quot;clicked&quot;, btn_reset_cb, ad);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;button, EVAS_HINT_FILL, 0);
-&nbsp;&nbsp;&nbsp;elm_box_pack_end(ad-&gt;inner_box, ad-&gt;button);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;button);
-}
-
-static bool 
-app_create(void *data) 
-{
-&nbsp;&nbsp;&nbsp;// Hook to take necessary actions before main event loop starts
-&nbsp;&nbsp;&nbsp;// Initialize UI resources and application&#39;s data
-&nbsp;&nbsp;&nbsp;// If this function returns true, the main loop of application starts
-&nbsp;&nbsp;&nbsp;// If this function returns false, the application is terminated
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-&nbsp;&nbsp;&nbsp;create_gl_canvas(ad);
-&nbsp;&nbsp;&nbsp;create_toolbox(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-static void 
-app_control(app_control_h app_control, void *data) 
-{
-&nbsp;&nbsp;&nbsp;// Handle the launch request
-}
-
-static void 
-app_pause(void *data) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ecore_animator_freeze(ad-&gt;ani);
-}
-
-static void 
-app_resume(void *data) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;ecore_animator_thaw(ad-&gt;ani);
-}
-
-static void 
-app_terminate(void *data) 
-{
-&nbsp;&nbsp;&nbsp;// Release all resources
-}
+<h3 id="nativeset" name="nativeset">Setting a Surface into the Image Object</h3>
 
-int 
-main(int argc, char *argv[]) 
-{
-&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
-&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
-
-&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, PACKAGE, &quot;The application failed to start, and returned %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;}
+<p>We can also fill in the native Surface information from the given EvasGL surface. For example, to adapt the surface to the target image when the size of the canvas changes, use the following code.</p>
 
-&nbsp;&nbsp;&nbsp;return ret;
-}
-</pre>   
+<pre class="prettyprint">
+Evas_Native_Surface ns;
+evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
+evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);</pre>
 
 <h2 id="ext" name="ext">Using OpenGL ES Extensions</h2>