<li><a href="native/graphics/cairo_n.htm" target="content">Cairo Vector Graphics</a></li>
<li><a href="native/graphics/graphic_buffer_n.htm" target="content">Graphic Buffer and Surface</a></li>
<li><a href="native/graphics/hw_acceleration_n.htm" target="content">Hardware Acceleration</a></li>
- <li><a href="native/graphics/opengl_n.htm" target="content">OpenGL ES</a>
+ <li><a href="native/graphics/opengl_n.htm" target="content">OpenGL® ES</a>
<ul>
- <li><a href="native/graphics/creating_opengles_n.htm" target="content">Creating OpenGL ES Applications</a></li>
- <li><a href="native/graphics/polygon_mesh_n.htm" target="content">Polygon Mesh in OpenGL ES</a></li>
+ <li><a href="native/graphics/creating_opengles_n.htm" target="content">Creating OpenGL® ES Applications</a></li>
+ <li><a href="native/graphics/polygon_mesh_n.htm" target="content">Polygon Mesh in OpenGL® ES</a></li>
<li><a href="native/graphics/vertex_shader_n.htm" target="content">Vertex Shader</a></li>
<li><a href="native/graphics/assembly_n.htm" target="content">Primitive Assembly and Rasterization</a></li>
<li><a href="native/graphics/texturing_n.htm" target="content">Texturing</a></li>
<li><a href="native/graphics/adv_performance_n.htm" target="content">Advanced Performance</a></li>
</ul>
</li>
- <li><a href="native/graphics/vulkan_n.htm" target="content">SDL Graphics with Vulkan</a></li>
+ <li><a href="native/graphics/vulkan_n.htm" target="content">SDL Graphics with Vulkan®</a></li>
</ul>
</li>
<li><a href="native/notification/notification_cover_n.htm" target="content">Notifications and Content Sharing</a>
<p>The first 2 principles are very basic, but still quite important, since the CPU-GPU bandwidth and memory capacity of embedded systems are limited in general.</p>
<ol>
-<li>As presented in <a href="polygon_mesh_n.htm">Polygon Mesh in OpenGL ES</a>, although the vertex array is intuitive, it is inefficient to use only the vertex array. It is almost always recommended to use an <strong>index array</strong> and the <code>glDrawElements()</code> function. This reduces the amount of data transferring from CPU to GPU. The bigger the model is, the more efficient the index array approach is.</li>
-<li>If the polygon mesh is not frequently changed, you can use <strong>vertex buffer objects</strong> (VBO) in order to cache the data into the GPU memory, as illustrated in <a href="vertex_shader_n.htm#uniforms_attributes">Uniforms and Attributes in OpenGL ES</a>.</li>
+<li>As presented in <a href="polygon_mesh_n.htm">Polygon Mesh in OpenGL® ES</a>, although the vertex array is intuitive, it is inefficient to use only the vertex array. It is almost always recommended to use an <strong>index array</strong> and the <code>glDrawElements()</code> function. This reduces the amount of data transferring from CPU to GPU. The bigger the model is, the more efficient the index array approach is.</li>
+<li>If the polygon mesh is not frequently changed, you can use <strong>vertex buffer objects</strong> (VBO) in order to cache the data into the GPU memory, as illustrated in <a href="vertex_shader_n.htm#uniforms_attributes">Uniforms and Attributes in OpenGL® ES</a>.</li>
<li>In general, you do not need to call the <code>glFinish()</code> function. As drawing commands are requested by the <code>draw_glview()</code> callback and are executed in the background, it is enough to call the <code>glFlush()</code> function at the end of the <code>draw_glview()</code> callback.</li>
<li>You are not required to clear every buffer, or to clear them at the same time. Instead, you can obtain the best performance by calling the <code>glClear()</code> function once per frame with all the buffers to be simultaneously cleared.</li>
<li>Do not create and destroy the graphic resources (such as textures and FBO) per frame. You can create and store them in the <code>app_data</code> structure in the <code>init_glview()</code> callback and reuse them later.</li>
<h2 id="renderer" name="renderer">Sample Applications Using the Renderer Architecture</h2>
-<p>In order to increase reusability, this section presents a simple OpenGL ES (GL)-based renderer and a sample view architecture based on the renderer. Its class diagram is shown in the following figure. SampleLauncher creates a sample view instance, such as TexturingView. Each sample view inherits from the SampleView class, which creates the GLView and BasicRenderer instances.</p>
+<p>In order to increase reusability, this section presents a simple OpenGL® ES-based renderer and a sample view architecture based on the renderer. Its class diagram is shown in the following figure. SampleLauncher creates a sample view instance, such as TexturingView. Each sample view inherits from the SampleView class, which creates the GLView and BasicRenderer instances.</p>
<p align="center"><strong>Figure: Class diagram for sample views and renderer</strong></p>
<p align="center"><img alt="Class diagram for sample views and renderer" src="../../images/adv_render_class.png" /></p>
-<p>The callback functions for GLView are registered as presented in <a href="creating_opengles_n.htm">Creating OpenGL ES Applications</a>. At the initialization stage, the sample view uses the FileLoader class to read the resource files, such as shaders, 3D objects, and texture images, from the Tizen application resource file path. These data are passed to BasicRenderer. At the initialization stage when the <code>init_glview()</code> callback is invoked, BasicRenderer uses the shader code and BasicShader to create, compile, and link the program object. </p>
+<p>The callback functions for GLView are registered as presented in <a href="creating_opengles_n.htm">Creating OpenGL® ES Applications</a>. At the initialization stage, the sample view uses the FileLoader class to read the resource files, such as shaders, 3D objects, and texture images, from the Tizen application resource file path. These data are passed to BasicRenderer. At the initialization stage when the <code>init_glview()</code> callback is invoked, BasicRenderer uses the shader code and BasicShader to create, compile, and link the program object. </p>
<p>In addition to BasicShader, BasicRenderer uses, for example, BasicCamera, vertex array, and texture object ID, for rendering a scene. When rendering is requested by the sample view, BasicRenderer initializes color and depth buffers through the <code>glClear()</code> function, and then computes many data needed for rendering, such as world, view, and projection matrices. These are transferred to BasicShader, which invokes the <code>glUniformXXX()</code> function to pass them to the current program object. Finally, the <code>glDrawElements()</code> function is invoked.</p>
-<p>For handling texture images, the sample uses the TexData class. The sample application creates a TexData instance and passes it to FileLoader together with the file name of the texture image. Then, FileLoader stores the decoded pixel data into the TexData instance. When the TexData instance is given to BasicRender, GL functions, such as <code>glGenTexture()</code> and <code>glTexImage2D()</code>, are invoked. After the texture object is created and sampler uniforms, such as <code>sampler2D</code> and <code>samplerCube</code>, are passed to the fragment shader, texturing can be done.</p>
-<p>For convenience, use the OpenGL mathematics library, GLM. GLM is a header only C++ mathematics library for graphics software based on the OpenGL shading language (GLSL) specification. GLM provides classes and functions designed and implemented with the same naming conventions and functionalities as in GLSL.</p>
+<p>For handling texture images, the sample uses the TexData class. The sample application creates a TexData instance and passes it to FileLoader together with the file name of the texture image. Then, FileLoader stores the decoded pixel data into the TexData instance. When the TexData instance is given to BasicRender, OpenGL® ES functions, such as <code>glGenTexture()</code> and <code>glTexImage2D()</code>, are invoked. After the texture object is created and sampler uniforms, such as <code>sampler2D</code> and <code>samplerCube</code>, are passed to the fragment shader, texturing can be done.</p>
+<p>For convenience, use the OpenGL® mathematics library, GLM. GLM is a header only C++ mathematics library for graphics software based on the OpenGL® shading language (GLSL) specification. GLM provides classes and functions designed and implemented with the same naming conventions and functionalities as in GLSL.</p>
<h2 id="framebuffer" name="framebuffer">Framebuffer Object and Render-to-texture</h2>
-<p>In Tizen, the drawing surface is created by GLView. To render a scene, GL receives this surface, which is called 'on-screen buffer'. For simple applications, the on-screen-buffer alone is sufficient. However, if the application needs to render to a texture, for example, an 'off-screen-buffer' is helpful as it can be used as a texture. In GL, the Framebuffer Object (FBO) can be an 'off-screen-buffer' and also supports 'render to texture.'</p>
-<p>GL provides functions to generate, bind, and configure an FBO. As shown in the following figure, the FBO consists of color, depth, and stencil attachments. It can be used as a texture by binding a texture object to its color or depth attachment point. On the other hand, GL supports a renderbuffer object, which is a 2D image buffer and can be bound to color, depth or stencil attachment point. FBO is useful for environment mapping, shadow mapping, post-processing and effects, including, for example, motion blur.</p>
+<p>In Tizen, the drawing surface is created by GLView. To render a scene, OpenGL® ES receives this surface, which is called 'on-screen buffer'. For simple applications, the on-screen-buffer alone is sufficient. However, if the application needs to render to a texture, for example, an 'off-screen-buffer' is helpful as it can be used as a texture. In OpenGL® ES, the Framebuffer Object (FBO) can be an 'off-screen-buffer' and also supports 'render to texture.'</p>
+<p>OpenGL® ES provides functions to generate, bind, and configure an FBO. As shown in the following figure, the FBO consists of color, depth, and stencil attachments. It can be used as a texture by binding a texture object to its color or depth attachment point. On the other hand, OpenGL® ES supports a renderbuffer object, which is a 2D image buffer and can be bound to color, depth or stencil attachment point. FBO is useful for environment mapping, shadow mapping, post-processing and effects, including, for example, motion blur.</p>
<p align="center"><strong>Figure: Framebuffer, renderbuffer, and texture objects</strong></p>
<p align="center"><img alt="Framebuffer, renderbuffer, and texture objects" src="../../images/adv_render_framebuffer.png" /></p>
<p align="center"><img alt="Composition of the cubemap texture" src="../../images/adv_render_cube_composition.png" /></p>
-<p>The <a href="texturing_n.htm">Texturing</a> topic presents how to create texture objects using GL APIs. For using a cube map texture, provide <code>GL_TEXTURE_CUBE_MAP</code> instead of <code>GL_TEXTURE_2D</code> for the <code>glGenTexture()</code> and <code>glBindTexture()</code> functions.</p>
+<p>The <a href="texturing_n.htm">Texturing</a> topic presents how to create texture objects using OpenGL® ES APIs. For using a cube map texture, provide <code>GL_TEXTURE_CUBE_MAP</code> instead of <code>GL_TEXTURE_2D</code> for the <code>glGenTexture()</code> and <code>glBindTexture()</code> functions.</p>
<p>The following code creates a cube map texture for environment mapping:</p>
<pre class="prettyprint">
void
</ul>\r
<p class="toc-title">Related Info</p>\r
<ul class="toc">\r
- <li><a href="opengl_n.htm">OpenGL ES Guide</a></li>\r
+ <li><a href="opengl_n.htm">OpenGL® ES Guide</a></li>\r
<li><a href="../ui/efl/efl_n.htm">EFL Guide</a></li>\r
<li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API for Mobile Native</a></li>\r
<li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API for Wearable Native</a></li>\r
\r
\r
<h2 id="cairotizen" name="cairotizen">Cairo in Tizen</h2>\r
-<p>Cairo is a part of the Tizen Graphics layer. As shown in the following figure, the rendering functionality of Cairo is provided through the use of the APIs of the lower modules, such as Pixman or OpenGL ES.</p>\r
+<p>Cairo is a part of the Tizen Graphics layer. As shown in the following figure, the rendering functionality of Cairo is provided through the use of the APIs of the lower modules, such as Pixman or OpenGL® ES.</p>\r
\r
<p align="center"><strong>Figure: Cairo within the Tizen framework</strong></p>\r
<p align="center"><img alt="Cairo within the Tizen framework" src="../../images/cairo_tizen.png" /></p>\r
\r
-<p>The Cairo GL backend allows hardware-accelerated rendering by targeting the OpenGL ES API. The goal of the Cairo GL backend is to achieve better performance with equal functionality to the Cairo Image backend, whenever possible.</p>\r
+<p>The Cairo GL backend allows hardware-accelerated rendering by targeting the OpenGL® ES API. The goal of the Cairo GL backend is to achieve better performance with equal functionality to the Cairo Image backend, whenever possible.</p>\r
\r
<div class="note">\r
<strong>Note</strong>\r
- Since Tizen only exposes EvasGL binding in place of EGL, Cairo EvasGL APIs have been newly added and specified. To use the Cairo GL backend in Tizen, an application must include in its source code the <code>cairo-evas-gl.h</code> header file instead of <code>cairo-gl.h</code>.\r
+ Since Tizen only exposes EvasGL binding in place of EGL™, Cairo EvasGL APIs have been newly added and specified. To use the Cairo GL backend in Tizen, an application must include in its source code the <code>cairo-evas-gl.h</code> header file instead of <code>cairo-gl.h</code>.\r
</div>\r
\r
<h2 id="prerequisites">Prerequisites</h2>\r
\r
<h3>Creating a Cairo GL Surface in the Evas GL Backend</h3>\r
\r
-<p>With the Cairo GL backend, you can create a Cairo surface using OpenGL. For more information on OpenGL, see the <a href="opengl_n.htm">OpenGL ES</a> guide.</p>\r
+<p>With the Cairo GL backend, you can create a Cairo surface using OpenGL®. For more information on OpenGL®, see the <a href="opengl_n.htm">OpenGL® ES</a> guide.</p>\r
\r
<p>To create the GL surface:</p>\r
\r
<ol>\r
<li>Since an application utilizing the Cairo GL backend in Tizen is based on Evas GL, an Evas GL handler must be created with the <code>evas_gl_new()</code> function during the initial stage.\r
\r
-<p>Afterwards, the <code>evas_gl_config</code>, <code>evas_gl_surface</code>, and <code>evas_gl_context</code> instances are created in that order. For more information on using Evas GL, see <a href="creating_opengles_n.htm">Creating OpenGL ES Applications</a> and the <a href="opengl_n.htm">OpenGL ES</a> guide.</p>\r
+<p>Afterwards, the <code>evas_gl_config</code>, <code>evas_gl_surface</code>, and <code>evas_gl_context</code> instances are created in that order. For more information on using Evas GL, see <a href="creating_opengles_n.htm">Creating OpenGL® ES Applications</a> and the <a href="opengl_n.htm">OpenGL® ES</a> guide.</p>\r
\r
<pre class="prettyprint">\r
Evas_Object *win = elm_win_util_standard_add("Cairo GL Backend guide",\r
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Creating OpenGL ES Applications</title>
+ <title>Creating OpenGL® ES Applications</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="container"><div id="contents"><div class="content">
-<h1>Creating OpenGL ES Applications</h1>
+<h1>Creating OpenGL® ES Applications</h1>
-<p>The easiest way to use the OpenGL ES API in a Tizen application is to rely on the <code>Elm_GLView</code> component. The <code>Elm_GLView</code> component is one of the Elementary UI components, which creates an OpenGL ES (GL) target surface and a context. The <code>Elm_GLView</code> component can be embedded in any Tizen UI application. It is basically a wrapper of <code>Evas_GL</code>, the GL/EGL abstraction layer of EFL. By using the <code>Elm_GLView</code> component, you avoid having to consider how EGL environment is coupled with the native windowing systems. Some macros provided by EFL also allow you to use GL APIs directly. In addition, the UI framework can access the surface where the GPU outputs the rendering result and make the entire scene as a combination of 2D and 3D components in a single canvas.</p>
+<p>The easiest way to use the OpenGL® ES API in a Tizen application is to rely on the <code>Elm_GLView</code> component. The <code>Elm_GLView</code> component is one of the Elementary UI components, which creates an OpenGL® ES target surface and a context. The <code>Elm_GLView</code> component can be embedded in any Tizen UI application. It is basically a wrapper of <code>Evas_GL</code>, the OpenGL®/EGL™ abstraction layer of EFL. By using the <code>Elm_GLView</code> component, you avoid having to consider how the EGL™ environment is coupled with the native windowing systems. Some macros provided by EFL also allow you to use OpenGL® ES APIs directly. In addition, the UI framework can access the surface where the GPU outputs the rendering result and make the entire scene as a combination of 2D and 3D components in a single canvas.</p>
-<p>The following example shows the steps to create a GL application. From now on, the <code>Elm_GLView</code> component is shortened to GLView.</p>
+<p>The following example shows the steps to create an OpenGL® ES application. From now on, the <code>Elm_GLView</code> component is shortened to GLView.</p>
<ol>
<li>Create a basic application as presented in the <a href="../../../../org.tizen.training/html/native/mobile/first_app_mn.htm#create">mobile</a> and <a href="../../../../org.tizen.training/html/native/wearable/first_app_wn.htm#create">wearable</a> Tizen first application example.
<p>The UI application's skeleton makes available the window object, which can contain the GLView component.</p></li>
<li>Enable hardware acceleration.
-<p>To develop a GL application, call the <code>elm_config_accel_preference_set()</code> function before creating the window. It makes an application use the GPU.</p>
+<p>To develop an OpenGL® ES application, call the <code>elm_config_accel_preference_set()</code> function before creating the window. It makes an application use the GPU.</p>
<p>For developing an application with Elementary, create a window with the <code>elm_win_util_standard_add()</code> Elementary utility function.</p>
<pre class="prettyprint">
Evas_Object *win;
elm_config_accel_preference_set("opengl");
-win = elm_win_util_standard_add(name, "OpenGL example");
+win = elm_win_util_standard_add(name, "OpenGL® example");
</pre>
<p>You must also set hardware acceleration in the manifest file. For more information, see <a href="hw_acceleration_n.htm">Hardware Acceleration</a>.</p></li>
<li>Initialize the GLView.
/* Request a surface with alpha and a depth buffer */
elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
</pre>
-<p>Additionally, you can select the policies for resizing and rendering. The following example shows how to decide what to do with the GL surface when the GLView component is resized. With the default <code>ELM_GLVIEW_RESIZE_POLICY_RECREATE</code> option, the GL surface is destroyed and created again with the new size. The resizing policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>. In that case, only the image object is scaled, not the underlying GL surface.</p>
+<p>Additionally, you can select the policies for resizing and rendering. The following example shows how to decide what to do with the OpenGL® ES surface when the GLView component is resized. With the default <code>ELM_GLVIEW_RESIZE_POLICY_RECREATE</code> option, the OpenGL® ES surface is destroyed and created again with the new size. The resizing policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>. In that case, only the image object is scaled, not the underlying OpenGL® ES surface.</p>
<pre class="prettyprint">
/*
Resize policy tells GLView what to do with the surface when it
elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
</pre>
</li>
-<li>Get the GL function pointer.
-<p>Originally, an application must call the GL APIs using the <code>Evas_GL</code> abstraction layer in EFL. It means that you must get a set of function pointers for abstract GL functions from the <code>Evas_GL</code> object and call functions through the object. This can be annoying, especially when you want to reuse GL parts implemented at other platforms. To resolve this problem, EFL provides convenient helper macros, which are defined in the <code>Elementary_GL_Helpers.h</code> header file. The following example shows how to use the macros.</p>
+<li>Get the OpenGL® ES function pointer.
+<p>Originally, an application must call the OpenGL® ES APIs using the <code>Evas_GL</code> abstraction layer in EFL. It means that you must get a set of function pointers for abstract OpenGL® ES functions from the <code>Evas_GL</code> object and call functions through the object. This can be annoying, especially when you want to reuse OpenGL® ES parts implemented at other platforms. To resolve this problem, EFL provides convenient helper macros, which are defined in the <code>Elementary_GL_Helpers.h</code> header file. The following example shows how to use the macros.</p>
<pre class="prettyprint">
#include <Elementary_GL_Helpers.h>
ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
/* Create and initialize GLView */
glview = elm_glview_add(parent);
- /* Prepare to use OpenGL ES APIs directly */
+ /* Prepare to use OpenGL® ES APIs directly */
ELEMENTARY_GLVIEW_GLOBAL_USE(glview);
}
</pre>
<p>The <code>ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</code> and <code>ELEMENTARY_GLVIEW_GLOBAL_USE()</code> macros must be in the same source code. If you have a global header file in your application, the <code>ELEMENTARY_GLVIEW_GLOBAL_DECLARE()</code> macro can be in the header file. However, you must be very careful when using these macros. The recommended solution is to use the <code>ELEMENTARY_GLVIEW_USE()</code> macro in every client function. The following are some situations where you must not use the helper macros:</p>
<ul>
<li>When you use more than one Evas canvas at a time, such as multiple windows.</li>
-<li>If you use multiple GL APIs, such as OpenGL ES 1.1, OpenGL ES 2.0, and OpenGL ES 3.0.</li>
+<li>If you use multiple OpenGL® ES APIs, such as OpenGL® ES 1.1, OpenGL® ES 2.0, and OpenGL® ES 3.0.</li>
<li>If you write or port a library that can be used by other applications.</li>
</ul>
<p>The helper macros must be used only for the following situations:</p>
<ul>
-<li>When a single surface is used for GL rendering.</li>
-<li>When a single API set (either OpenGL ES 1.1, OpenGL ES 2.0, or OpenGL ES 3.0) is used. In this case, the <code>ELEMENTARY_GLVIEW_GLOBAL_DECLARE()</code> macro must be used in a global header for the application.</li>
+<li>When a single surface is used for OpenGL® ES rendering.</li>
+<li>When a single API set (either OpenGL® ES 1.1, OpenGL® ES 2.0, or OpenGL® ES 3.0) is used. In this case, the <code>ELEMENTARY_GLVIEW_GLOBAL_DECLARE()</code> macro must be used in a global header for the application.</li>
</ul>
</li>
<li>Set up callback functions.
<li>Set up the initialization callback.
<p>The initialization callback is called when the GLView is created.</p>
<pre class="prettyprint">
-/* GL init callback */
+/* OpenGL® ES init callback */
static void
init_glview(Evas_Object *glview)
{
- /* Set GL state color to pink */
+ /* Set OpenGL® ES state color to pink */
glClearColor(1.0, 0.2, 0.6, 1.0);
- /* Do any form of OpenGL ES initialization here */
+ /* Do any form of OpenGL® ES initialization here */
/* init_shaders(); */
/* init_vertices(); */
}
</pre>
</li>
<li>Set up the drawing callback.
-<p>The drawing callback is called whenever the GLView must be updated. The GL draw commands must be made here.</p>
+<p>The drawing callback is called whenever the GLView must be updated. The OpenGL® ES draw commands must be made here.</p>
<pre class="prettyprint">
-/* GL draw callback */
+/* OpenGL® ES draw callback */
static void
draw_glview(Evas_Object *glview)
{
/* Paint it pink */
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
- /* Usual OpenGL ES draw commands come here */
+ /* Usual OpenGL® ES draw commands come here */
/* draw_scene(); */
}
</pre>
static void
del_glview(Evas_Object *glview)
{
- /* Destroy all the OpenGL ES resources here */
+ /* Destroy all the OpenGL® ES resources here */
/* destroy_shaders(); */
/* destroy_objects(); */
}
<div class="note">
<strong>Note</strong>
- In case the GL functions are called outside the 4 GLView callback functions, you must call the <code>evas_gl_make_current()</code> function before the GL function is called. However, this results in a performance degradation due to context switching, and only works if the direct rendering mode is not used.
- <p>If Direct Rendering is enabled, all GL functions must be called from the 4 GLView callback functions only. All other operations can break the rendering order and cause unexpected rendering.</p>
+ If the OpenGL® ES functions are called outside the 4 GLView callback functions, you must call the <code>evas_gl_make_current()</code> function before the OpenGL® ES function is called. However, this results in a performance degradation due to context switching, and only works if the direct rendering mode is not used.
+ <p>If Direct Rendering is enabled, all OpenGL® ES functions must be called from the 4 GLView callback functions only. All other operations can break the rendering order and cause unexpected rendering.</p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Graphics</h1>
-<p>The graphics features introduce how you can improve the visual look of your application through efficient use of images. You can handle graphics using various graphic libraries and interfaces, such as Cairo and OpenGL ES. You can also improve the performance of your graphic application with hardware acceleration.</p>
+<p>The graphics features introduce how you can improve the visual look of your application through efficient use of images. You can handle graphics using various graphic libraries and interfaces, such as Cairo and OpenGL® ES. You can also improve the performance of your graphic application with hardware acceleration.</p>
<p>You can use the following graphics features in your native applications:</p>
<li><a href="hw_acceleration_n.htm">Hardware Acceleration</a>
-<p>You can enable hardware acceleration for the application. When the hardware acceleration is active, it increases rendering performance and allows you to use OpenGL ES smoothly.</p></li>
+<p>You can enable hardware acceleration for the application. When the hardware acceleration is active, it increases rendering performance and allows you to use OpenGL® ES smoothly.</p></li>
-<li><a href="opengl_n.htm">OpenGL ES</a>
+<li><a href="opengl_n.htm">OpenGL® ES</a>
-<p>You can create OpenGL ES applications in Tizen with the EGL layer. Tizen native applications can 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 that can be run in parallel.</p></li>
+<p>You can create OpenGL® ES applications in Tizen with the EGL™ layer. Tizen native applications can 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 that can be run in parallel.</p></li>
-<li><a href="vulkan_n.htm">SDL Graphics with Vulkan</a>
-<p>You can get high-efficiency access to graphics and computing on modern GPUs with Vulkan. You can use cutting edge 3D programming tools to create high-quality games and real-time graphics in your applications.</p></li>
+<li><a href="vulkan_n.htm">SDL Graphics with Vulkan®</a>
+<p>You can get high-efficiency access to graphics and computing on modern GPUs with Vulkan®. You can use cutting-edge 3D programming tools to create high-quality games and real-time graphics in your applications.</p></li>
</ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<h1>Hardware Acceleration</h1>
-<p>Tizen supports hardware acceleration since Tizen 2.3.1. If hardware acceleration is enabled, it increases rendering performance and allows you to use OpenGL ES.</p>
+<p>Tizen supports hardware acceleration since Tizen 2.3.1. If hardware acceleration is enabled, it increases rendering performance and allows you to use OpenGL® ES.</p>
<p>You can enable hardware acceleration in the <code>tizen-manifest</code> file, using the manifest editor's <strong>Advanced</strong> tab.</p>
<p>Normally, it is enough to modify the manifest file to enable hardware acceleration. In the following special cases, however, additional actions are required:</p>
-<ul><li>OpenGL ES application
+<ul><li>OpenGL® ES application
<p>In addition to enabling hardware acceleration in the manifest file, you must also call the <code>elm_config_accel_preference_set()</code> function before creating an elm window.</p>
<p>In an indirect rendering mode:</p>
<pre class="prettyprint">
elm_config_accel_preference_set("opengl");
-win = elm_win_util_standard_add(name, "OpenGL example");
+win = elm_win_util_standard_add(name, "OpenGL® example");
</pre>
<p>This function and option are supported since Tizen 2.3.</p>
<p>In a direct rendering mode, if you want to use depth and stencil buffers or multisample, you have to specify them in the <code>elm_config_accel_preference_set()</code> function:</p>
<pre class="prettyprint">
elm_config_accel_preference_set("opengl:depth24:stencil8:msaa_high");
-win = elm_win_util_standard_add(name, "OpenGL example");
+win = elm_win_util_standard_add(name, "OpenGL® example");
</pre>
<p>In the above example, the depth buffer size is 24 bit, stencil buffer size is 8 bit and MSAA is on with a high bit.</p>
-<p>These special options are supported since Tizen 2.3.1. For more information, see the <a href="opengl_n.htm">OpenGL ES</a> guide.</p>
+<p>These special options are supported since Tizen 2.3.1. For more information, see the <a href="opengl_n.htm">OpenGL® ES</a> guide.</p>
</li>
<li>EFL WebKit (EWK) application
<p>In addition to enabling hardware acceleration in the manifest file, you must also call the <code>elm_config_accel_preference_set()</code> function before creating an elm window. Because EWK uses a 24-bit depth buffer and a 8-bit stencil buffer, you must also specify them in the <code>elm_config_accel_preference_set()</code> function:</p>
*/
/*
- NOTE: If you delete OpenGL ES (GL), the animator keeps running trying to access GL
- To prevent it, delete the animator with ecore_animator_del()
+ NOTE: If you delete OpenGL® ES, the animator keeps running trying to access it
+ To prevent this, delete the animator with ecore_animator_del()
*/
Ecore_Animator *ani = ecore_animator_add(anim_cb, glview);
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>OpenGL ES</title>
+ <title>OpenGL® ES</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#declaration">Declaring 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="#getapi">Getting OpenGL® ES APIs</a></li>
<li><a href="#callbacks">Using 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>
+ <li><a href="#ext">Using OpenGL® ES Extensions</a></li>
<li><a href="#evas_ext">Using EvasGL Extensions</a></li>
<li><a href="#direct">Using Direct Rendering</a></li>
<li><a href="#client">Using Client-side Rotation</a></li>
<div id="container"><div id="contents"><div class="content">
-<h1>OpenGL ES</h1>
+<h1>OpenGL® ES</h1>
-<p>Today, most smart devices are equipped with Graphics Processing Units (GPU). This is the case for Tizen devices, as well. OpenGL ES is an interface to the GPU that consists of well-defined subsets of the desktop OpenGL API.</p>
-<p>Tizen native applications can 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 that can be run in parallel.</p>
-<p>Tizen 2.x almost completely supports OpenGL ES 2.0. OpenGL ES 3.0 features are supported from Tizen 2.4 onwards.</p>
-<p>EGL is another specification for binding OpenGL ES to the native windowing systems. To set up the EGL environment, you normally need to understand the native windowing system and EGL specification in detail. In Tizen, however, its native UI components and 2D canvas (Elementary and Evas, respectively) replace the role of EGL to provide a simple way to use OpenGL ES. To maintain the best device performance, the Tizen Studio makes the native windowing system and EGL APIs invisible.</p>
-<p>The main features of the OpenGL ES API include:</p>
+<p>Today, most smart devices are equipped with Graphics Processing Units (GPU). This is the case for Tizen devices, as well. OpenGL® ES is an interface to the GPU that consists of well-defined subsets of the desktop OpenGL® API.</p>
+<p>Tizen native applications can 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 that can be run in parallel.</p>
+<p>Tizen 2.x almost completely supports OpenGL® ES 2.0. OpenGL® ES 3.0 features are supported since Tizen 2.4.</p>
+<p>EGL™ is another specification for binding OpenGL® ES to the native windowing systems. To set up the EGL™ environment, you normally need to understand the native windowing system and EGL™ specification in detail. In Tizen, however, its native UI components and 2D canvas (Elementary and Evas, respectively) replace the role of EGL™ to provide a simple way to use OpenGL® ES. To maintain the best device performance, the Tizen Studio makes the native windowing system and EGL™ APIs invisible.</p>
+<p>The main features of the OpenGL® ES API include:</p>
<ul>
<li>Declaring EvasGL objects
<p>You can <a href="#declaration">declare the application data</a>.</p></li>
<li>Creating the Elm window and EvasGL
<p>You can <a href="#creating">create a window and EvasGL</a>.</p></li>
- <li>Getting OpenGL ES APIs
- <p>You can <a href="#getapi">get OpenGL ES function pointers</a>.</p></li>
+ <li>Getting OpenGL® ES APIs
+ <p>You can <a href="#getapi">get OpenGL® ES function pointers</a>.</p></li>
<li>Using callbacks
<p>You can <a href="#callbacks">set the callbacks</a>.</p></li>
<li>Setting a surface into the image object
<p>You can <a href="#nativeset">set a native surface into the image object</a>.</p></li>
- <li>Using OpenGL ES extensions
+ <li>Using OpenGL® ES extensions
<p>You can <a href="#ext">check whether an extension is available, and call it</a>.</p></li>
<li>Using EvasGL extensions
<p>You can <a href="#evas_ext">check whether an Evas extension is available, and use it</a>.</p></li>
<li>Using client-side rotation
<p>You can <a href="#client">use client-side rotation</a> when the application is using Direct Rendering.</p></li>
</ul>
-<p>Additional OpenGL ES details are covered in the following topics:</p>
+<p>Additional OpenGL® ES details are covered in the following topics:</p>
<ul>
-<li>To set up a native application, which makes a simple 3D cube scene, see <a href="creating_opengles_n.htm">Creating OpenGL ES Applications</a>.</li>
+<li>To set up a native application which makes a simple 3D cube scene, see <a href="creating_opengles_n.htm">Creating OpenGL® ES Applications</a>.</li>
<li>To draw a 3D scene step by step through GPU pipeline stages, see:
<ul>
-<li><a href="polygon_mesh_n.htm">Polygon Mesh in OpenGL ES</a></li>
+<li><a href="polygon_mesh_n.htm">Polygon Mesh in OpenGL® ES</a></li>
<li><a href="vertex_shader_n.htm">Vertex Shader</a></li>
<li><a href="assembly_n.htm">Primitive Assembly and Rasterization</a></li>
<li><a href="texturing_n.htm">Texturing</a></li>
<li><a href="interactive_ui_n.htm">Interactive UI</a></li>
</ul>
</li>
-<li>To enhance your OpenGL ES usage on Tizen devices, see:
+<li>To enhance your OpenGL® ES usage on Tizen devices, see:
<ul>
<li><a href="adv_rendering_n.htm">Advanced Rendering</a></li>
<li><a href="adv_performance_n.htm">Advanced Performance</a></li>
<p>The EvasGL use cases assume that the application uses EvasGL directly instead of using the GLView. (If the application uses a GLView, EvasGL is created internally.)</p>
-<p>To be able to call GL functions directly, first declare the global variable using the <code>EVAS_GL_GLOBAL_GLES2_DEFINE()</code> macro. Then, create an EvasGL and use the <code>EVAS_GL_GLOBAL_GLES2_USE()</code> macro, which is similar to the GLView macro. For more detailed information, see the <code>Evas_GL_GLES2_Helpers.h</code> file.</p>
+<p>To be able to call OpenGL® ES functions directly, first declare the global variable using the <code>EVAS_GL_GLOBAL_GLES2_DEFINE()</code> macro. Then, create an EvasGL and use the <code>EVAS_GL_GLOBAL_GLES2_USE()</code> macro, which is similar to the GLView macro. For more detailed information, see the <code>Evas_GL_GLES2_Helpers.h</code> file.</p>
<pre class="prettyprint">
#include <app.h>
#include <Evas_GL_GLES2_Helpers.h>
/*
- This code is placed at the beginning of any function using GLES 2.0 APIs
+ This code is placed at the beginning of any function using OpenGL® ES 2.0 APIs
When using this macro, you can call all glFunctions without changing their code
For details, see Evas_GL_GLES2_Helpers.h
*/
<pre class="prettyprint">
struct appdata {
Evas_Object *win; /* Application window */
- Evas_Object *img; /* OpenGL ES canvas */
+ Evas_Object *img; /* OpenGL® ES canvas */
- Evas_GL *evasgl; /* EvasGL object for rendering GL in Evas */
- Evas_GL_Context *ctx; /* EvasGL context object, a GL rendering context in Evas GL */
- Evas_GL_Surface *sfc; /* EvasGL surface object, a GL rendering target in Evas GL */
+ Evas_GL *evasgl; /* EvasGL object for rendering OpenGL® ES in Evas */
+ Evas_GL_Context *ctx; /* EvasGL context object, an OpenGL® ES rendering context in Evas GL */
+ Evas_GL_Surface *sfc; /* EvasGL surface object, an OpenGL® ES rendering target in Evas GL */
Evas_GL_Config *cfg; /* EvasGL surface configuration object for surface creation */
Evas_Coord sfc_w;
Evas_Coord sfc_h;
<p>To create the Elm window and EvasGL:</p>
<ol>
<li>Create a window and EvasGL.
- <p>For developing an application with Elementary, you create a window by using the Elementary utility function, <code>elm_win_util_standard_add()</code>. To develop a GL application and make the application use the GPU, you must call the <code>elm_config_accel_preference_set()</code> function before creating the window.</p>
+ <p>For developing an application with Elementary, you create a window by using the Elementary utility function, <code>elm_win_util_standard_add()</code>. To develop an OpenGL® ES application and make the application use the GPU, you must call the <code>elm_config_accel_preference_set()</code> function before creating the window.</p>
<pre class="prettyprint">
Evas_Object *win;
/*
- To use OpenGL ES, the application must switch on hardware acceleration
+ To use OpenGL® ES, the application must switch on hardware acceleration
To enable that, call elm_config_accel_preference_set() with "opengl"
before creating the Elm window
This function is supported since 2.3.
ad->win = elm_win_util_standard_add("Evas_GL Example", "Evas_GL Example");
</pre>
-<p>You can create the EvasGL handler using the <code>evas_gl_new()</code> function. This initializer takes the Evas canvas on which OpenGL ES is to be used as a parameter. When developing an application with Elementary, use the canvas of your window:</p>
+<p>You can create the EvasGL handler using the <code>evas_gl_new()</code> function. This initializer takes the Evas canvas on which OpenGL® ES is to be used as a parameter. When developing an application with Elementary, use the canvas of your window:</p>
<pre class="prettyprint">
ad->evasgl = evas_gl_new(evas_object_evas_get(ad->win));
</pre>
ad->sfc = evas_gl_surface_create(ad->evasgl, ad->cfg, w, h);
</pre>
-<p>To manually delete a GL surface, use the <code>evas_gl_surface_destroy()</code> function.</p></li>
+<p>To manually delete a OpenGL® ES surface, use the <code>evas_gl_surface_destroy()</code> function.</p></li>
<li>Create a context.
ad->ctx = evas_gl_context_create(ad->evasgl, NULL);
/*
- This macro sets the global variable holding the GL API,
+ This macro sets the global variable holding the OpenGL® ES API,
so that it is available to the application
- Use it right after setting up the GL context object
+ Use it right after setting up the OpenGL® ES context object
For details, see Evas_GL_GLES2_Helpers.h
*/
EVAS_GL_GLOBAL_GLES2_USE(ad->evasgl, ad->ctx);
</li>
</ol>
-<h2 id="getapi" name="getapi">Getting OpenGL ES APIs</h2>
+<h2 id="getapi" name="getapi">Getting OpenGL® ES APIs</h2>
-<p>If you want to get the OpenGL ES API, you can get the API for rendering OpenGL ES with the <code>evas_gl_api_get()</code> 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>
+<p>If you want to get the OpenGL® ES API, you can get the API for rendering OpenGL® ES with the <code>evas_gl_api_get()</code> 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>
<p>If you already use a global macro, such as <code>EVAS_GL_GLOBAL_GLES2_XXX()</code>, you need not get the APIs.</p>
<h2 id="callbacks" name="callbacks">Using Callbacks</h2>
-<p>When you have configured the EvasGL environment, you can declare a UI component in which all the OpenGL ES transformation takes place. In the following example, the image component is used, because it provides callbacks that allow you to play with mouse events and coordinates. The image component is set to inherit the size of the parent window.</p>
+<p>When you have configured the EvasGL environment, you can declare a UI component in which all the OpenGL® ES transformation takes place. In the following example, the image component is used, because it provides callbacks that allow you to play with mouse events and coordinates. The image component is set to inherit the size of the parent window.</p>
<ol>
<li>Add the image component:
</li>
<li>
-<p>Define the "OpenGL ES main loop" function that is called every time the program attempts to get pixels from the image. Put all the OpenGL ES statements in charge of rendering the scene in this callback.</p>
+<p>Define the "OpenGL® ES main loop" function that is called every time the program attempts to get pixels from the image. Put all the OpenGL® ES statements in charge of rendering the scene in this callback.</p>
<pre class="prettyprint">
evas_object_image_pixels_get_callback_set(ad->img, img_pixels_get_cb, ad);
</li>
<li>
-<p>Define a function that takes care of the drawing using EvasGL (called the OpenGL ES main loop):</p>
+<p>Define a function that takes care of the drawing using EvasGL (called the OpenGL® ES main loop):</p>
<pre class="prettyprint">
static void
/* Paint it blue */
glClearColor(0.2, 0.2, 0.6, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
- /* Usual OpenGL ES draw commands come here */
+ /* Usual OpenGL® ES draw commands come here */
/* draw_scene(); */
}</pre>
<p>At every tick, set the given context as a current context for the given surface using the <code>evas_gl_make_current()</code> function.</p>
</li>
-<li>You can use the <code>Ecore_Animator</code> to define the OpenGL ES main loop.
+<li>You can use the <code>Ecore_Animator</code> to define the OpenGL® ES main loop.
<p>To use the <code>Ecore_Animator</code>, create a callback that is called on every animation tick. This animation callback is used only to mark the image as "dirty", meaning that it needs an update next time Evas renders. It calls the pixel get callback that redraws the scene.</p>
<p>The animator callback function is also triggered when the display is off. Use the <code>ecore_animator_freeze()</code> and <code>ecore_animator_thaw()</code> functions in the <code>app_pause_cb()</code> and <code>app_resume_cb()</code> callbacks for power saving.</p>
evas_object_image_native_surface_set(ad->img, &ns);
</pre>
-<h2 id="ext" name="ext">Using OpenGL ES Extensions</h2>
+<h2 id="ext" name="ext">Using OpenGL® ES Extensions</h2>
-<p>EvasGL, offering an abstraction layer above OpenGL ES, provides an easy mechanism to check for support and use OpenGL ES extensions:</p>
+<p>EvasGL, offering an abstraction layer above OpenGL® ES, provides an easy mechanism to check for support and use OpenGL® ES extensions:</p>
<ol>
<li>Detect support for an extension.
- <p>In OpenGL ES, you must always call the <code>glGetString(GL_EXTENSIONS)</code> function. Make sure that the extension name is present in the list and then dynamically find the function pointer using the <code>dlsym()</code>, <code>eglGetProcAddress()</code>, or <code>glXGetProcAddress()</code> function.</p>
+ <p>In OpenGL® ES, you must always call the <code>glGetString(GL_EXTENSIONS)</code> function. Make sure that the extension name is present in the list and then dynamically find the function pointer using the <code>dlsym()</code>, <code>eglGetProcAddress()</code>, or <code>glXGetProcAddress()</code> function.</p>
- <p>Since EvasGL exposes only a structure with the function pointers set to internal wrappers or the proper OpenGL ES implementation library, it can also expose all the detected extensions simply by setting their function pointers.</p>
+ <p>Since EvasGL exposes only a structure with the function pointers set to internal wrappers or the proper OpenGL® ES implementation library, it can also expose all the detected extensions simply by setting their function pointers.</p>
<p>To detect support for the <code>GL_OES_get_program_binary</code> extension or equivalent, and to get the function pointer associated:</p>
<h2 id="evas_ext" name="evas_ext">Using EvasGL Extensions</h2>
-<p>EvasGL is not only an abstraction layer on top of OpenGL ES, but also on top of EGL and GLX. As such, EvasGL tries to imitate EGL in a platform-independent manner, and exposes the underlying platform extensions when it can.</p>
+<p>EvasGL is not only an abstraction layer on top of OpenGL® ES, but also on top of EGL™ and GLX. As such, EvasGL tries to imitate EGL™ in a platform-independent manner, and exposes the underlying platform extensions when it can.</p>
<p>Image and sync support are the most commonly used EvasGL extensions. Both can be used for multi-thread rendering, but EvasGL images can also be used to share images between contexts.</p>
<p>Another commonly used extension is the fence sync extension along with the reusable sync and wait sync. This allows creating a semaphore-style object that is released as soon as all the previous render operations have been completed.</p>
-<p>This guide does not explain the details of these extensions, as they must behave in a similar way to their EGL implementations.</p>
+<p>This guide does not explain the details of these extensions, as they must behave in a similar way to their EGL™ implementations.</p>
<p>As usual with extensions, check the support:</p>
<div class="note">
<strong>Caution</strong>
- In the render callback function, call only GL functions.
-<p>In case the GL functions are called outside the render callback function, you must call the <code>evas_gl_make_current()</code> function before the GL function calls. However, this results in a performance degradation due to context switching, and only works if the target surface is not an <code>Evas_GL_Surface</code> with Direct Rendering enabled.</p>
+ In the render callback function, call only OpenGL® ES functions.
+<p>If the OpenGL® ES functions are called outside the render callback function, you must call the <code>evas_gl_make_current()</code> function before the OpenGL® ES function calls. However, this results in a performance degradation due to context switching, and only works if the target surface is not an <code>Evas_GL_Surface</code> with Direct Rendering enabled.</p>
-<p>If the target buffer is an <code>Evas_GL_Surface</code> with Direct Rendering enabled, all GL functions must be called from the render callback function only. All other operations can break the rendering order and the unexpected rendering occurs.</p>
+<p>If the target buffer is an <code>Evas_GL_Surface</code> with Direct Rendering enabled, all OpenGL® ES functions must be called from the render callback function only. All other operations can break the rendering order, causing unexpected rendering.</p>
</div>
</li>
</ul>
</li>
</ul>
-<p align="center"><strong>Figure: OpenGL ES and EFL</strong></p>
+<p align="center"><strong>Figure: OpenGL® ES and EFL</strong></p>
<p align="center"><img src="../../images/opengl_es_efl.png" alt="OpenGL ES and EFL" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<h1>Output Merging</h1>
-<p>The fragment shader returns a colored fragment, often called the <strong>RGBAZ</strong> fragment. A (for alpha) represents the fragment's opacity whereas Z represents the depth. In the output merger, the fragment competes or combines with the pixel in the <strong>color buffer</strong> to update the pixel's color. A and Z are used in this process. In addition to the color buffer, OpenGL ES (GL) supports another buffer named <strong>depth buffer</strong> or <strong>z-buffer</strong>. It has the same resolution as the color buffer and stores the depth values of the pixels.</p>
+<p>The fragment shader returns a colored fragment, often called the <strong>RGBAZ</strong> fragment. A (for alpha) represents the fragment's opacity whereas Z represents the depth. In the output merger, the fragment competes or combines with the pixel in the <strong>color buffer</strong> to update the pixel's color. A and Z are used in this process. In addition to the color buffer, OpenGL® ES supports another buffer named <strong>depth buffer</strong> or <strong>z-buffer</strong>. It has the same resolution as the color buffer and stores the depth values of the pixels.</p>
<h2 id="depth" name="depth">Depth Buffering</h2>
<p>In the following figure, assume that <code>MinZ</code> of the viewport is 0.0, <code>MaxZ</code> is 1.0, the red triangle's depth is 0.8, and the blue triangle's is 0.5. By calling the <code>glClear()</code> function once per frame, the color and depth buffers are simultaneously cleared with the default values selected by the <code>glClearColor()</code> and <code>glClearDepthf()</code> functions, respectively.</p>
<h2 id="alpha" name="alpha">Alpha Blending</h2>
<p>Suppose that the current fragment has a smaller depth than the pixel in the color buffer and is translucent. Then, the pixel must show through the fragment. This is achieved by blending the fragment color with the pixel color. The process uses the alpha value of the fragment, which is in the range of [0,1]: 0 denotes fully transparent and 1 denotes fully opaque.</p>
<p>A typical blending equation is <code>αc<sub>f</sub> + (1-α)c<sub>p</sub></code>, where <code>α</code> represents the fragment's opacity, <code>c<sub>f</sub></code> is the fragment color, and <code>c<sub>p</sub></code> is the pixel color. Assume that, in the <a href="#buffer">Depth buffering visualization</a> figure, all vertices of the blue triangle have the RGBA color, (0,0,1,0.5), and those of the red triangle have (1,0,0,1). The scan conversion algorithm interpolates the RGB channels and the alpha channel in the same manner. Therefore, all fragments of the blue triangle are assigned (0,0,1,0.5), and those of the red triangle are (1,0,0,1). Then, the blue fragment is blended with the red pixel at 3 pixel positions. The blended color is (0.5,0,0.5). This process is named <strong>alpha blending</strong>.</p>
-<p>GL supports the <code>glBlendFunc()</code> function, where the first parameter specifies the blending coefficient for the incoming (source) fragment and the second parameter specifies the blending coefficient for the destination pixel. Many values, such as <code>GL_ZERO</code> and <code>GL_ONE</code>, can be assigned to the parameters, but <code>GL_SRC_ALPHA</code> best fits the incoming fragment while <code>GL_ONE_MINUS_SRC_ALPHA</code> best fits the destination pixel.</p>
+<p>OpenGL® ES supports the <code>glBlendFunc()</code> function, where the first parameter specifies the blending coefficient for the incoming (source) fragment and the second parameter specifies the blending coefficient for the destination pixel. Many values, such as <code>GL_ZERO</code> and <code>GL_ONE</code>, can be assigned to the parameters, but <code>GL_SRC_ALPHA</code> best fits the incoming fragment while <code>GL_ONE_MINUS_SRC_ALPHA</code> best fits the destination pixel.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Polygon Mesh in OpenGL ES</title>
+ <title>Polygon Mesh in OpenGL® ES</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="container"><div id="contents"><div class="content">
-<h1>Polygon Mesh in OpenGL ES</h1>
+<h1>Polygon Mesh in OpenGL® ES</h1>
-<p>In real-time applications, such as games, an object is usually represented as a <strong>polygon mesh</strong>. The only polygon that OpenGL ES (GL) supports is a triangle and because of this, a polygon mesh in GL implies a <strong>triangle mesh</strong>. Given an object, its polygon mesh can have different resolutions, as shown in the following figure.</p>
+<p>In real-time applications, such as games, an object is usually represented as a <strong>polygon mesh</strong>. The only polygon that OpenGL® ES supports is a triangle and because of this, a polygon mesh in OpenGL® ES implies a <strong>triangle mesh</strong>. Given an object, its polygon mesh can have different resolutions, as shown in the following figure.</p>
<p>As the resolution is increased or the number of vertices increased, the polygon mesh samples the original smooth surface more accurately. However, rendering the mesh requires more time.</p>
<p align="center"><strong>Figure: Sphere surface is sampled in different resolutions</strong></p>
<p align="center"><strong>Figure: Fractions of an OBJ file</strong></p>
<p align="center"><img src="../../images/obj_fractions.png" alt="Fractions of an OBJ file" /></p>
-<p>The triangle mesh stored in the OBJ file is imported into the GL program to fill the vertex and index arrays. As the example mesh is composed of 48 triangles, the index array has 144 (48 times 3) elements, as shown in the following figure.</p>
+<p>The triangle mesh stored in the OBJ file is imported into the OpenGL® ES program to fill the vertex and index arrays. As the example mesh is composed of 48 triangles, the index array has 144 (48 times 3) elements, as shown in the following figure.</p>
<p align="center"><strong>Figure: Vertex and index arrays of a low-resolution sphere mesh</strong></p>
<p align="center"><img src="../../images/low_res_arrays.png" alt="Vertex and index arrays of a low-resolution sphere mesh" /></p>
<li><a href="#process">Processing Texture Coordinates</a></li>
<li><a href="#filter">Texture Filtering</a></li>
<li><a href="#mipmap">Mipmapping</a></li>
- <li><a href="#gl">Texturing in GL</a></li>
+ <li><a href="#gl">Texturing in OpenGL® ES</a></li>
<li><a href="#example">Texturing Example</a></li>
</ul>
</div></div>
<h2 id="process" name="process">Processing Texture Coordinates</h2>
-<p>The texture coordinates are assigned to the vertices of the polygon mesh. (This process is called <strong>surface parameterization</strong> or simply <strong>parameterization</strong>, and it is done by graphics packages, such as 3ds Max.) The scan conversion is also done with the texture coordinates. In the following figure, the scan conversion interpolates the per-vertex texture coordinates to determine the per-fragment texture coordinates. For example, the lower-left corner fragment is assigned the texture coordinates, (1/8,1/8). OpenGL ES (GL) simply multiplies the per-fragment texture coordinates by the texture resolution, <code>r<sub>x</sub></code> and <code>r<sub>y</sub></code>. If the resolution is 4x4, the texture coordinates, (1/8,1/8), are mapped to (0.5,0.5) and the lower-left corner texel is retrieved from the image texture.</p>
+<p>The texture coordinates are assigned to the vertices of the polygon mesh. (This process is called <strong>surface parameterization</strong> or simply <strong>parameterization</strong>, and it is done by graphics packages, such as 3ds Max.) The scan conversion is also done with the texture coordinates. In the following figure, the scan conversion interpolates the per-vertex texture coordinates to determine the per-fragment texture coordinates. For example, the lower-left corner fragment is assigned the texture coordinates, (1/8,1/8). OpenGL® ES simply multiplies the per-fragment texture coordinates by the texture resolution, <code>r<sub>x</sub></code> and <code>r<sub>y</sub></code>. If the resolution is 4x4, the texture coordinates, (1/8,1/8), are mapped to (0.5,0.5) and the lower-left corner texel is retrieved from the image texture.</p>
<p align="center"><strong>Figure: From the texture coordinates to the texel position</strong></p>
<p align="center"><img alt="From the texture coordinates to the texel position" src="../../images/texturing_position1.png" /> <img alt="From the texture coordinates to the texel position" src="../../images/texturing_position2.png" /> <img alt="From the texture coordinates to the texel position" src="../../images/texturing_position3.png" /></p>
<p align="center"><img alt="Mipmap generation process" src="../../images/texturing_mipmap1.png" /> <img alt="Mipmap generation process" src="../../images/texturing_mipmap2.png" /></p>
-<h3>Mipmap Generation in GL</h3>
-<p>To automatically generate a mipmap, GL invokes the <code>glGenerateMipmap()</code> function, where the parameter can be, for example, <code>GL_TEXTURE_2D</code> or <code>GL_TEXTURE_CUBE_MAP</code> (textures in GL 2.0 come in 2 forms: 2D textures and cube map textures). Use <code>GL_TEXTURE_2D</code> for general image texturing.</p>
+<h3>Mipmap Generation in OpenGL® ES</h3>
+<p>To automatically generate a mipmap, OpenGL® ES invokes the <code>glGenerateMipmap()</code> function, where the parameter can be, for example, <code>GL_TEXTURE_2D</code> or <code>GL_TEXTURE_CUBE_MAP</code> (textures in OpenGL® ES 2.0 come in 2 forms: 2D textures and cube map textures). Use <code>GL_TEXTURE_2D</code> for general image texturing.</p>
<h3 id="mipmap_mini">Mipmapping for Minification</h3>
<p>In any given a mipmap, you must decide which level you want to use for texture filtering. Observe that a pixel (fragment) covers an area on the screen. For simplicity, consider the area as a square so that the entire screen is tiled by an array of square pixels. Then, a pixel's projection onto the texture space is not a 'point', but an 'area' centered at (<code>s',t'</code>). The projected area is called the <strong>footprint</strong> of the pixel.</p>
<p>There is of course a third option: not to do mipmapping but to use the original image (at level 0) instead. It can be filtered either by nearest point sampling or by bilinear interpolation. Therefore, minification has 6 varieties in total.</p>
-<h2 id="gl" name="gl">Texturing in GL</h2>
+<h2 id="gl" name="gl">Texturing in OpenGL® ES</h2>
-<p>When an image file is to be used as a texture, it is first loaded into the GL program. Then, you must take the following steps:</p>
+<p>When an image file is to be used as a texture, it is first loaded into the OpenGL® ES program. Then, you must take the following steps:</p>
<ol>
<li>Use the <code>glGenTextures()</code> function, where the first parameter defines the number of texture objects to generate and the second parameter returns them in <code>textures</code>.</li>
</ol>
<h2 id="example" name="example">Texturing Example</h2>
-<p>In order to generate a texture in
GL, you usually have to decode the image file stored in the file system. In Tizen, you can use the Evas API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">wearable</a> applications) to get the decoded bitmap buffer from the image file, as shown in the following example. The code creates an independent <code>Ecore_Evas</code> object, which contains <code>Evas_Object</code>. It provides a method to decode the designated image file and store the bitmap data into its own buffer. You can get the internal buffer pointer and then upload the buffer to the texture.</p>
+<p>In order to generate a texture in
OpenGL® ES, you usually have to decode the image file stored in the file system. In Tizen, you can use the Evas API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">wearable</a> applications) to get the decoded bitmap buffer from the image file, as shown in the following example. The code creates an independent <code>Ecore_Evas</code> object, which contains <code>Evas_Object</code>. It provides a method to decode the designated image file and store the bitmap data into its own buffer. You can get the internal buffer pointer and then upload the buffer to the texture.</p>
<pre class="prettyprint">
/*
- Create GL Texture object from image file path
+ Create OpenGL® ES Texture object from image file path
@param[in] parent Evas object
@param[in] filename image file path
@return texture id
<li><a href="#view_frustum">View Frustum and Projection Transform</a></li>
<li><a href="#vertex_shader">Vertex Shader Input and Output</a></li>
<li><a href="#shader_program_objects">Shader and Program Objects</a></li>
- <li><a href="#uniforms_attributes">Uniforms and Attributes in OpenGL ES</a></li>
+ <li><a href="#uniforms_attributes">Uniforms and Attributes in OpenGL® ES</a></li>
<li><a href="#drawcalls">Drawcalls</a></li>
<li><a href="#glview_example">GLView Example</a></li>
</ul>
<p align="center"><strong>Figure: Stages of the GPU rendering pipeline</strong></p>
<p align="center"><img src="../../images/gpu_stages.png" alt="Stages of the GPU rendering pipeline" /></p>
-<p>You have to provide programs for the vertex and fragment shaders. Without them, OpenGL ES (GL) cannot draw anything. The vertex shader operates on every vertex stored in the vertex array and performs various operations. The essential among them is applying a series of <strong>transforms</strong> to the vertices.</p>
+<p>You have to provide programs for the vertex and fragment shaders. Without them, OpenGL® ES cannot draw anything. The vertex shader operates on every vertex stored in the vertex array and performs various operations. The essential among them is applying a series of <strong>transforms</strong> to the vertices.</p>
<p align="center"><strong>Figure: Spaces and transforms for vertex shader</strong></p>
<p align="center"><img src="../../images/vertex_shader_spaces.png" alt="Spaces and transforms for vertex shader" /></p>
<h2 id="object_world_space">Object Space, World Space, and World Transform</h2>
-<p>Whereas the coordinate system used for creating an object is named <strong>object space</strong>, the virtual world containing all required objects is associated with the <strong>world space</strong>. The size, position, and orientation of an object in the world space are determined by what is called <strong>world transform</strong>. (GL calls this <strong>model transform</strong>.) Its main components are scaling, translation, and rotation. A distinct object has its own world transform. The following figure shows a world-transform example.</p>
+<p>Whereas the coordinate system used for creating an object is named <strong>object space</strong>, the virtual world containing all required objects is associated with the <strong>world space</strong>. The size, position, and orientation of an object in the world space are determined by what is called <strong>world transform</strong>. (OpenGL® ES calls this <strong>model transform</strong>.) Its main components are scaling, translation, and rotation. A distinct object has its own world transform. The following figure shows a world-transform example.</p>
<p>In the world space, many objects can exist. Among them, consider a teapot. In this example, its world transform is the combination of "rotation about the Y axis by 90 degrees" and "translation along the X axis by 7 units".</p>
<p align="center"><strong>Figure: Transformation of a teapot object</strong></p>
<p align="center"><img src="../../images/teapot_transformation.png" alt="Transformation of a teapot object" /></p>
<p>Using a vertex or fragment shader stored in a file, create a <strong>shader object</strong>:</p>
<ol>
-<li>Load its source code into the GL program.</li>
+<li>Load its source code into the OpenGL® ES program.</li>
<li>Create a new shader object using the <code>glCreateShader()</code> function, which takes either the <code>GL_VERTEX_SHADER</code> or <code>GL_FRAGMENT_SHADER</code> attribute and returns the ID of the shader object.</li>
<li>Store the source code into the shader object using the <code>glShaderSource()</code> function with the vertex or fragment shader's source code and the shader object ID.</li>
<li>Compile the shader object using the <code>glCompileShader()</code> function.</li>
<li>Invoke the <code>glUseProgram()</code> function to use the program object for rendering.</li>
</ol>
-<h2 id="uniforms_attributes">Uniforms and Attributes in OpenGL ES</h2>
+<h2 id="uniforms_attributes">Uniforms and Attributes in OpenGL® ES</h2>
-<p>Consider a dynamic environment, where the scene objects continuously move. In the example vertex shader, worldMat must be updated per frame. On the other hand, <code>viewProjMat</code> must be updated if the eye moves. The GL program must update and provide them for the vertex shader. For this purpose, first find the uniform locations that have been determined during the link phase. Given a uniform name in the shader, the <code>glGetUniformLocation()</code> function returns its location (denoted by an integer) in the program.</p>
+<p>Consider a dynamic environment, where the scene objects continuously move. In the example vertex shader, worldMat must be updated per frame. On the other hand, <code>viewProjMat</code> must be updated if the eye moves. The OpenGL® ES program must update and provide them for the vertex shader. For this purpose, first find the uniform locations that have been determined during the link phase. Given a uniform name in the shader, the <code>glGetUniformLocation()</code> function returns its location (denoted by an integer) in the program.</p>
<pre class="prettyprint">
/* mProgram denotes the program object */
GLint mWHandle = glGetUniformLocation(mProgram, "worldMat")
<p>Next, consider the attributes.</p>
<p>The vertex and index arrays for a polygon mesh are stored in the CPU memory, which is often called <strong>client memory</strong>. For rendering a mesh, make a <strong>drawcall</strong>. For every drawcall, the arrays have to be 'copied' from the client memory to the GPU memory.</p>
<p>Instead of resending the arrays every time a mesh is drawn, a more efficient way is to cache the data in the GPU memory. The arrays are transferred only once, and the rendering is done from the GPU memory cache. To achieve this, use <strong>vertex buffer objects</strong> (VBO).</p>
-<p>There are 2 types of buffer objects in GL:</p>
+<p>There are 2 types of buffer objects in OpenGL® ES:</p>
<ul>
<li><strong>Array buffer object</strong> represents the vertex array and is specified by <code>GL_ARRAY_BUFFER</code>.</li>
<li><strong>Element array buffer object</strong> represents the index array and is specified by <code>GL_ELEMENT_ARRAY_BUFFER</code>.</li>
<li>Use the <code>glBindBuffer()</code> function, where the first parameter is either <code>GL_ARRAY_BUFFER</code> or <code>GL_ELEMENT_ARRAY_BUFFER</code>. This specifies what the buffer is used for. The <code>glBindBuffer()</code> function call creates a VBO.</li>
<li>The buffer object is filled with data using the <code>glBufferData()</code> function, where the first parameter is either <code>GL_ARRAY_BUFFER</code> or <code>GL_ELEMENT_ARRAY_BUFFER</code> and the third parameter points to the vertex or index array.</li>
</ol>
-<p>The GL program shown in the following example creates 2 VBOs:</p>
+<p>The OpenGL® ES program shown in the following example creates 2 VBOs:</p>
<pre class="prettyprint">
glGenBuffers(2, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, /* Target */
<p align="center"><strong>Figure: Array of vertex structures</strong></p>
<p align="center"><img src="../../images/vertex_structure_array.png" alt="Array of vertex structures" /></p>
-<p>Such a structure must be presented to the shader. For this purpose, the GL program first invokes the <code>glEnableVertexAttribArray()</code> function to enable each parameter. After that, the <code>glVertexAttribPointer()</code> function is called. In this function, the first parameter denotes the parameter index, the second specifies the number (1, 2, 3, or 4) of components per parameter, fifth specifies the byte distance between the consecutive parameters of the same kind, and the sixth points to the first occurrence of the parameter in bytes. The GL program shown in the following example details <code>position</code>, <code>normal</code>, and <code>texCoord</code> parameters.</p>
+<p>Such a structure must be presented to the shader. For this purpose, the OpenGL® ES program first invokes the <code>glEnableVertexAttribArray()</code> function to enable each parameter. After that, the <code>glVertexAttribPointer()</code> function is called. In this function, the first parameter denotes the parameter index, the second specifies the number (1, 2, 3, or 4) of components per parameter, fifth specifies the byte distance between the consecutive parameters of the same kind, and the sixth points to the first occurrence of the parameter in bytes. The OpenGL® ES program shown in the following example details <code>position</code>, <code>normal</code>, and <code>texCoord</code> parameters.</p>
<pre class="prettyprint">
int stride = sizeof(VertexStruct); /* VertexStruct with 3 attributes */
int offset = 0;
<h2 id="glview_example">GLView Example</h2>
-<p>The following example code presents how to use GL APIs in the callbacks of the GLView. In the <code>init_glview()</code> callback function, compile and link the shaders, and create VBOs.</p>
+<p>The following example code presents how to use OpenGL® ES APIs in the callbacks of the GLView. In the <code>init_glview()</code> callback function, compile and link the shaders, and create VBOs.</p>
<pre class="prettyprint">
-/* GL initialization callback */
+/* OpenGL® ES initialization callback */
static void
init_glview(Evas_Object *glview)
{
- /* Set GL state color to black */
+ /* Set OpenGL® ES state color to black */
glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
appdata_s *ad = (appdata_s *)evas_object_data_get(glview, "ad");
}
</pre>
-<p>In the <code>draw_glview()</code> callback, calculate the world, view, and projection matrices and then pass the combined matrix to the vertex shader through the <code>glUniformXXX()</code> function. When all uniforms are passed to the shader, the GL drawcall is made.</p>
+<p>In the <code>draw_glview()</code> callback, calculate the world, view, and projection matrices and then pass the combined matrix to the vertex shader through the <code>glUniformXXX()</code> function. When all uniforms are passed to the shader, the OpenGL® ES drawcall is made.</p>
<pre class="prettyprint">
-/* GL drawing callback */
+/* OpenGL® ES drawing callback */
static void
draw_glview(Evas_Object *glview)
{
<script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>SDL Graphics with Vulkan</title>
+ <title>SDL Graphics with Vulkan®</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#vulkan_1">OpenGL vs. Vulkan</a></li>
+ <li><a href="#vulkan_1">OpenGL® vs. Vulkan®</a></li>
<li><a href="#sdl">SDL</a></li>
<li><a href="#prerequisites">Prerequisites</a></li>
- <li><a href="#render">Rendering a Triangle with Vulkan</a></li>
+ <li><a href="#render">Rendering a Triangle with Vulkan®</a></li>
<li><a href="#SDL_event">Handling General SDL Events</a></li>
<li><a href="#tizen_event">Handling Tizen-specific SDL Events</a></li>
</ul>
<div id="container"><div id="contents"><div class="content">
-<h1>SDL Graphics with Vulkan</h1>
+<h1>SDL Graphics with Vulkan®</h1>
-<p>Vulkan is a generation API for high-efficiency access to graphics and computing on modern GPUs. It is an open-standard, cross-platform API designed from the ground-up by industry experts collaborating under the Khronos consortium. It aims to address the inefficiencies of existing 3D APIs, such as OpenGL, which are designed for single-core processors and lag to map modern hardware. It provides a much lower-level fine-grained control over the GPU to maximize performance and achieve consistent user experience across different operating environments. For general information on Vulkan, and the comparative merits of Vulkan and OpenGL, see the official Khronos's <a href="https://www.khronos.org/vulkan/" target="_blank">Vulkan Web site</a> and <a href="#vulkan_1">OpenGL vs. Vulkan</a>.</p>
-<p>The Tizen platform supports the Vulkan API in order to provide the most cutting edge 3D programming tools for you to create high-quality games and real-time graphics in applications. Vulkan
is especially recommended for performance- or latency-sensitive applications. With Vulkan, you can achieve a much smoother user experience by parallelizing the rendering job across multiple threads which can feed the GPU to the max. Applications demanding explicit control on work submission, synchronization, and less power consumption can seriously consider migrating to Vulkan as well. Tizen allows the <a href="#render">use of the Vulkan API</a> through <a href="#sdl">SDL</a>.</p>
+<p>Vulkan® is a generation API for high-efficiency access to graphics and computing on modern GPUs. It is an open-standard, cross-platform API designed from the ground-up by industry experts collaborating under the Khronos consortium. It aims to address the inefficiencies of existing 3D APIs, such as OpenGL®, which are designed for single-core processors and lag to map modern hardware. It provides a much lower-level fine-grained control over the GPU to maximize performance and achieve consistent user experience across different operating environments. For general information on Vulkan®, and the comparative merits of Vulkan® and OpenGL®, see the official Khronos <a href="https://www.khronos.org/vulkan/" target="_blank">Vulkan® Web site</a> and <a href="#vulkan_1">OpenGL® vs. Vulkan®</a>.</p>
+<p>The Tizen platform supports the Vulkan API in order to provide the most cutting edge 3D programming tools for you to create high-quality games and real-time graphics in applications. Vulkan
® is especially recommended for performance- or latency-sensitive applications. With Vulkan®, you can achieve a much smoother user experience by parallelizing the rendering job across multiple threads which can feed the GPU to the max. Applications demanding explicit control on work submission, synchronization, and less power consumption can seriously consider migrating to Vulkan® as well. Tizen allows the <a href="#render">use of the Vulkan API</a> through <a href="#sdl">SDL</a>.</p>
-<p align="center"><strong>Figure: Vulkan in Tizen</strong></p>
+<p align="center"><strong>Figure: Vulkan® in Tizen</strong></p>
<p align="center"><img alt="Vulkan in Tizen" src="../../images/vulkan_framework.png" /></p>
-<p>Before using the Vulkan API in Tizen, make sure that you are familiar with the following key Vulkan features, which help you to align your application design around Vulkan concepts and exploit the hardware to the fullest:</p>
+<p>Before using the Vulkan API in Tizen, make sure that you are familiar with the following key Vulkan® features, which help you to align your application design around Vulkan® concepts and exploit the hardware to the fullest:</p>
<ul>
<li><strong>Cross-platform</strong>
-<p>Vulkan is designed to run on a wide range of platforms and hardware with very different form factors and power envelopes. While OpenGL has the OpenGL ES variant for mobile and embedded systems and OpenGL for desktops, Vulkan provides a unified API that is completely identical across all these platforms. You simply link to the same library, with the same header and the same code on all targeted platforms, and the application runs everywhere. By not limiting itself to a subset of platforms, Vulkan enables you to "write once and run everywhere". This means that by targeting this API, you can achieve a large market share across both mobile and desktop devices.</p></li>
+<p>Vulkan® is designed to run on a wide range of platforms and hardware with very different form factors and power envelopes. While OpenGL® has the OpenGL® ES variant for mobile and embedded systems and OpenGL® for desktops, Vulkan® provides a unified API that is completely identical across all these platforms. You simply link to the same library, with the same header and the same code on all targeted platforms, and the application runs everywhere. By not limiting itself to a subset of platforms, Vulkan® enables you to "write once and run everywhere". This means that by targeting this API, you can achieve a large market share across both mobile and desktop devices.</p></li>
<li><strong>Explicit control</strong>
-<p>Vulkan is an explicit API, and wants you to define "exactly what you want", rather than relying on hidden driver heuristics to do the right thing. Vulkan, by design, is a very low-level API that provides applications direct control over the GPU. Older higher-level APIs hide most of the costly operations, such as memory management and resource synchronization, denying you any control over them.</p>
-<p>Vulkan attempts to turn as much of the problematic "implicitness" of older APIs as possible into "explicit" application choices. It provides a number of explicit mechanisms for many operations, such as memory allocation, synchronization, and work submission, allowing applications to be more expressive.</p></li>
+<p>Vulkan® is an explicit API, and wants you to define "exactly what you want", rather than relying on hidden driver heuristics to do the right thing. Vulkan®, by design, is a very low-level API that provides applications direct control over the GPU. Older higher-level APIs hide most of the costly operations, such as memory management and resource synchronization, denying you any control over them.</p>
+<p>Vulkan® attempts to turn as much of the problematic "implicitness" of older APIs as possible into "explicit" application choices. It provides a number of explicit mechanisms for many operations, such as memory allocation, synchronization, and work submission, allowing applications to be more expressive.</p></li>
<li><strong>Multi-core friendly</strong>
<p>Older APIs written in the single-core processor age do not do enough to take advantage of today's multi-core processors and thereby max out the single core by over-burdening the render thread with all heavy tasks, such as error checking, implicit resource tracking, synchronization, and state validation.</p>
-<p>Vulkan provides tools and design choices to spread its workload across multiple threads. It achieves this by removing from the driver the thread-specific features, such as global data, access synchronization, thread safety, and order guarantee, and handing the responsibility to you. By carefully handling the threads and scaling across multiple threads on a device with more cores, you can distribute your workload across threads much better. This leads to better efficiency and better performance in applications that otherwise find themselves maxing out a single core.</p></li>
+<p>Vulkan® provides tools and design choices to spread its workload across multiple threads. It achieves this by removing from the driver the thread-specific features, such as global data, access synchronization, thread safety, and order guarantee, and handing the responsibility to you. By carefully handling the threads and scaling across multiple threads on a device with more cores, you can distribute your workload across threads much better. This leads to better efficiency and better performance in applications that otherwise find themselves maxing out a single core.</p></li>
<li><strong>High efficiency</strong>
-<p>With a better design, Vulkan offers the potential to reduce the workload of the render thread and thereby allows the application to draw less power and generate less heat. It achieves better throughput by removing lots of (mostly) unnecessary background work, such as runtime error checking, state validation, and shader compilation, from the main loop. It delegates that background work to the tooling and layers, which are used during development and get removed before the application makes it to a consumer device.</p></li>
+<p>With a better design, Vulkan® offers the potential to reduce the workload of the render thread, thereby allowing the application to draw less power and generate less heat. It achieves better throughput by removing lots of (mostly) unnecessary background work, such as runtime error checking, state validation, and shader compilation, from the main loop. It delegates that background work to the tooling and layers, which are used during development and get removed before the application makes it to a consumer device.</p></li>
<li><strong>Portable</strong>
-<p>With the introduction of an intermediate shader language, called SPIR-V, Vulkan improves the shader program portability and allows you to write shaders in languages other than GLSL (such as C/C++). This avoids the need for the compiler to execute during runtime to translate the shader code and allows offline shader precompilation. It also relieves the vendors from the shader/kernel source shipping and IP leakage.</p></li>
+<p>With the introduction of an intermediate shader language, called SPIR-V, Vulkan® improves the shader program portability and allows you to write shaders in languages other than GLSL (such as C/C++). This avoids the need for the compiler to execute during runtime to translate the shader code and allows offline shader precompilation. It also relieves the vendors from the shader/kernel source shipping and IP leakage.</p></li>
</ul>
-<h2 id="vulkan_1">OpenGL vs. Vulkan</h2>
+<h2 id="vulkan_1">OpenGL® vs. Vulkan®</h2>
-<p>When you consider the differences and advantages between Vulkan and OpenGL, Vulkan basically compliments OpenGL by addressing specific users who want to have a quite low-level API with a much better abstraction of the modern hardware giving a lot of control, predictability, and high performance at much greater efficiency. On the other hand, OpenGL is a much higher-level API that does many things on your behalf inside the driver with less burden on you. It continues to be the API of choice for a wide range of developers who want to have the shortest path to a functionally correct application.</p>
+<p>When you consider the differences and advantages between Vulkan® and OpenGL®, Vulkan® basically complements OpenGL® by addressing specific users who want to have a quite low-level API with a much better abstraction of the modern hardware giving a lot of control, predictability, and high performance at much greater efficiency. On the other hand, OpenGL® is a much higher-level API that does many things on your behalf inside the driver with less burden on you. It continues to be the API of choice for a wide range of developers who want to have the shortest path to a functionally correct application.</p>
-<p>When selecting the open graphics API (Vulkan or OpenGL) to use for a new application, or when considering the need to migrate an existing application from OpenGL to Vulkan, ask yourself the following questions:</p>
+<p>When selecting the open graphics API (Vulkan® or OpenGL®) to use for a new application, or when considering the need to migrate an existing application from OpenGL® to Vulkan®, ask yourself the following questions:</p>
<ul>
<li>Do you want to have really low-level access and explicit control over the underlying GPU?</li>
<li>Is your application/driver CPU-bound, too slow and consuming too much power?</li>
<li>Can your graphic work creation be parallelized and reused?</li>
<li>Can you deal with additional code complexity to squeeze out maximum performance?</li>
</ul>
-<p>If your answer to any of the questions is <strong>Yes</strong>, consider using Vulkan instead of OpenGL. However, remember that Vulkan comes at the cost of taking more responsibility at the application side from the driver.</p>
+<p>If your answer to any of the questions is <strong>Yes</strong>, consider using Vulkan® instead of OpenGL®. However, remember that Vulkan® comes at the cost of taking more responsibility at the application side from the driver.</p>
-<p>The following table describes the practical advantages of Vulkan.</p>
+<p>The following table describes the practical advantages of Vulkan®.</p>
-<p align="center" class="Table"><strong>Table: Vulkan advantages</strong></p>
+<p align="center" class="Table"><strong>Table: Vulkan® advantages</strong></p>
<table>
<tbody>
<tr>
<th></th>
- <th>OpenGL</th>
- <th>Vulkan</th>
+ <th>OpenGL®</th>
+ <th>Vulkan®</th>
</tr>
<tr>
<th>Better GPU control</th>
<tr>
<th>High efficiency</th>
<td>Does a lot of redundant excessive validation for each draw call, such as runtime error checking, implicit tracking of resource usage, and synchronization, leading to much CPU overhead.</td>
- <td>Vulkan greatly reduces the CPU time spent in the driver with external validation and diagnostics layers that can be independently enabled and disabled, as needed. Offloads the render thread by delegating heavy CPU jobs to the application and opt-in layers.</td>
+ <td>Vulkan® greatly reduces the CPU time spent in the driver with external validation and diagnostics layers that can be independently enabled and disabled, as needed. Offloads the render thread by delegating heavy CPU jobs to the application and opt-in layers.</td>
</tr>
<tr>
<th>Shader portability</th>
<td>Only GLSL is supported as a shader language, and the compiler is a part of the driver with vendor-specific semantics. No user control over the front end and higher runtime translation time.</td>
- <td>Vulkan mandates the use of the intermediate byte code (SPIR-V) by the driver for shaders. This allows offline shader precompilation, and allows you to write shaders in languages other than GLSL.</td>
+ <td>Vulkan® mandates the use of the intermediate byte code (SPIR-V) by the driver for shaders. This allows offline shader precompilation, and allows you to write shaders in languages other than GLSL.</td>
</tr>
<tr>
<th>Code complexity</th>
- <td>OpenGL driver manages many tasks inside the driver relieving you from the burden of managing these at the application end.</td>
- <td>Vulkan is a much more verbose API, offering more control at the cost of more code complexity and responsibility at the application side.</td>
+ <td>OpenGL® driver manages many tasks inside the driver relieving you from the burden of managing these at the application end.</td>
+ <td>Vulkan® is a much more verbose API, offering more control at the cost of more code complexity and responsibility at the application side.</td>
</tr>
</tbody>
</table>
<h2 id="sdl">SDL</h2>
-<p>SDL (Simple DirectMedia Layer) is a cross-platform software development library. In Tizen, it enables access to graphics hardware using Vulkan. SDL is used for creating high-performance computer games, multimedia applications, and emulators. It provides a low-level hardware abstraction layer to computer multimedia hardware components. It can run on many operating systems, such as Android™, iOS, Linux, macOS, Windows®, and Tizen. For more information, see the <a href="https://libsdl.org/" target="_blank">SDL Web site</a>.</p>
+<p>SDL (Simple DirectMedia Layer) is a cross-platform software development library. In Tizen, it enables access to graphics hardware using Vulkan
®. SDL is used for creating high-performance computer games, multimedia applications, and emulators. It provides a low-level hardware abstraction layer to computer multimedia hardware components. It can run on many operating systems, such as Android™, iOS, Linux, macOS, Windows®, and Tizen. For more information, see the <a href="https://libsdl.org/" target="_blank">SDL Web site</a>.</p>
-<p>You can manage video, audio, some input devices, threads, and timers with SDL. Tizen supports SDL to provide new means of accessing its 3D APIs (Vulkan), which can currently be accessed only through an EFL wrapper library (Evas GL). For more information on Evas GL, see the <a href="../graphics/opengl_n.htm">OpenGL ES</a> guide.</p>
+<p>You can manage video, audio, some input devices, threads, and timers with SDL. Tizen supports SDL to provide new means of accessing its 3D APIs (Vulkan), which can currently be accessed only through an EFL wrapper library (Evas GL). For more information on Evas GL, see the <a href="../graphics/opengl_n.htm">OpenGL® ES</a> guide.</p>
<p>The following SDL features are currently supported in Tizen:</p>
<ul>
<h2 id="prerequisites">Prerequisites</h2>
-<p>To enable your application to use the Vulkan functionality:</p>
+<p>To enable your application to use the Vulkan® functionality:</p>
<ol>
-<li>To use Vulkan
for 3D rendering, you must create an SDL application, and understand both <a href="https://www.khronos.org/vulkan/" target="blank">Vulkan</a> and <a href="https://www.libsdl.org/" target="blank">SDL</a>.
+<li>To use Vulkan
® for 3D rendering, you must create an SDL application, and understand both <a href="https://www.khronos.org/vulkan/" target="blank">Vulkan®</a> and <a href="https://www.libsdl.org/" target="blank">SDL</a>.
</li>
-<li>Check whether the device supports Vulkan.
-<p>As all Tizen devices available in the market do not support Vulkan yet, check the device support with the <code>system_info_get_platform_bool()</code> function before using the Vulkan APIs. If the device can support Vulkan, the function returns <code>true</code> in the second parameter.</p>
+<li>Check whether the device supports Vulkan®.
+<p>As not all Tizen devices available on the market support Vulkan® yet, check for device support with the <code>system_info_get_platform_bool()</code> function before using the Vulkan APIs. If the device can support Vulkan®, the function returns <code>true</code> in the second parameter.</p>
<pre class="prettyprint">
bool vulkan_support;
</li>
</ol>
-<h2 id="render">Rendering a Triangle with Vulkan</h2>
+<h2 id="render">Rendering a Triangle with Vulkan®</h2>
-<p>To render a triangle using Vulkan in an SDL application:</p>
+<p>To render a triangle using Vulkan® in an SDL application:</p>
<ol>
<li>Initialize SDL and create an SDL window.
<div class="note">
<strong>Note</strong>
- To use the Vulkan context, use the <code>SDL_WINDOW_VULKAN</code> flag when you create a window. Do not use both <code>SDL_WINDOW_VULKAN</code> and <code>SDL_WINDOW_OPENGL</code> simultaneously.
+ To use the Vulkan® context, use the <code>SDL_WINDOW_VULKAN</code> flag when you create a window. Do not use both <code>SDL_WINDOW_VULKAN</code> and <code>SDL_WINDOW_OPENGL</code> simultaneously.
</div>
<p>The <code>SDL_main()</code> function is mandatory for the Tizen framework to initialize the SDL application. You must use the <code>SDL_main()</code> function instead of the usual <code>main()</code> function in your SDL application.</p>
<li><code>applicationVersion</code> contains developer-supplied version number of the application.</li>
<li><code>pEngineName</code> is a pointer to a string containing the name of the engine (if any) used to create the application.</li>
<li><code>engineVersion</code> is an unsigned integer variable containing the developer-supplied version number of the engine used to create the application.</li>
-<li><code>apiVersion</code> is the version of the Vulkan API against which the application expects to run.</li>
+<li><code>apiVersion</code> is the version of the Vulkan® API against which the application expects to run.</li>
</ul>
<pre class="prettyprint">
</pre>
</li>
-<li>Vulkan is a platform-agnostic API, which means that you need an extension to interface with the window system. The <code>SDL_Vulkan_GetInstanceExtensions()</code> SDL function returns the extensions Vulkan needs to interface with the windowing system. Pass them to the <code>VkInstanceCreateInfo</code> struct.
+<li>Vulkan® is a platform-agnostic API, which means that you need an extension to interface with the window system. The <code>SDL_Vulkan_GetInstanceExtensions()</code> SDL function returns the extensions Vulkan® needs to interface with the windowing system. Pass them to the <code>VkInstanceCreateInfo</code> struct.
-<p>Fill in the <code>VkInstanceCreateInfo</code> struct to provide sufficient information for creating an instance. This struct tells the Vulkan driver which global extensions and validation layers you want to use. Global means that they apply to the entire program and not only a specific device.</p>
+<p>Fill in the <code>VkInstanceCreateInfo</code> struct to provide sufficient information for creating an instance. This struct tells the Vulkan® driver which global extensions and validation layers you want to use. Global means that they apply to the entire program and not only a specific device.</p>
<ul>
<li><code>sType</code> and <code>pNext</code> are similar to the <code>VkApplicationInfo</code> structure.</li>
vkCreateInstance(&inst_info, NULL, &demo->inst);
</pre>
-<p>The general pattern that object creation function parameters in Vulkan follow is:</p>
+<p>The general pattern that object creation function parameters in Vulkan® follow is:</p>
<ul>
<li>Pointer to the struct with the creation info</li>
</pre>
</li>
<li>Check for supported queue families.
-<p>Almost every operation in Vulkan, from drawing to uploading textures, requires commands to be submitted to a "queue". There are different types of queues that originate from different queue families, and each queue family allows only a subset of commands. You need to check which queue families are supported by the device and which one of them supports the commands that you want to use. The following example looks for a queue that supports graphics commands:</p>
+<p>Almost every operation in Vulkan®, from drawing to uploading textures, requires commands to be submitted to a "queue". There are different types of queues that originate from different queue families, and each queue family allows only a subset of commands. You need to check which queue families are supported by the device and which one of them supports the commands that you want to use. The following example looks for a queue that supports graphics commands:</p>
<ol type="a">
<li>Check which queue families are supported by the device with the <code>vkGetPhysicalDeviceQueueFamilyProperties()</code> function:
<pre class="prettyprint">
</li>
<li>The creation of a logical device involves specifying a lot of details in structs again. First, fill in the <code>VkDeviceQueueCreateInfo</code> struct, which describes the number of queues you want for a single queue family. In the following example, only 1 queue with graphics capabilities is needed.
<p>The currently available drivers only allow you to create a low number of queues for each family queue, and you do not really need more than one. That is because you can create all of the command buffers on multiple threads and then submit them all at once on the main thread with a single low-overhead call.</p>
-<p>Vulkan lets you assign priorities to queues to influence the scheduling of the command buffer execution using floating point numbers between 0.0 and 1.0. This is required even if there is only a single queue.</p>
+<p>Vulkan® lets you assign priorities to queues to influence the scheduling of the command buffer execution using floating point numbers between 0.0 and 1.0. This is required even if there is only a single queue.</p>
<pre class="prettyprint">
float queue_priorities[1] = {0.0};
</li></ol></li>
<li>Create a window surface.
-<p>Since Vulkan is a platform-agnostic API, it cannot interface directly with the window system on its own. To establish the connection between Vulkan and the window system to present results to the screen, you need to use the WSI (Window System Integration) extensions. The <code>VK_KHR_surface</code> extension exposes a <code>VkSurfaceKHR</code> object that represents an abstract type of surface to present rendered images to. The surface in this example program is backed by the window that you have already created using SDL.</p>
+<p>Since Vulkan® is a platform-agnostic API, it cannot interface directly with the window system on its own. To establish the connection between Vulkan® and the window system to present results to the screen, you need to use the WSI (Window System Integration) extensions. The <code>VK_KHR_surface</code> extension exposes a <code>VkSurfaceKHR</code> object that represents an abstract type of surface to present rendered images to. The surface in this example program is backed by the window that you have already created using SDL.</p>
<p>The <code>VK_KHR_surface</code> extension is an instance-level extension and you have actually already enabled it, because it is included in the list returned by the <code> SDL_Vulkan_GetInstanceExtensions()</code> function. Even though the window surface is created before the logical device in this example, it is only mentioned here after the logical device creation, because window surfaces are part of the render targets and presentation part, and explaining them earlier would have cluttered up the basic setup.</p>
<div class="note">
<strong>Note</strong>
- Window surfaces are an entirely optional component in Vulkan, if you just need off-screen rendering. Vulkan allows you to do that without hacks, such as creating an invisible window (necessary for OpenGL).
+ Window surfaces are an entirely optional component in Vulkan®, if you just need off-screen rendering. Vulkan® allows you to do that without hacks, such as creating an invisible window (necessary for OpenGL®).
</div>
<ol type="a">
</li></ol>
</li>
<li>Create the presentation queue.
-<p>Although the Vulkan implementation can support window system integration, that does not mean that every device in the system supports it. Therefore, you need to ensure that a device can present images to the surface you created. Since the presentation is a queue-specific feature, the problem is actually about finding a queue family that supports presenting to the surface you created.</p>
+<p>Although the Vulkan® implementation can support window system integration, that does not mean that every device in the system supports it. Therefore, you need to ensure that a device can present images to the surface you created. Since the presentation is a queue-specific feature, the problem is actually about finding a queue family that supports presenting to the surface you created.</p>
<ol type="a">
<li>Look for a queue family that has the capability of presenting to your window surface, by using the <code>vkGetPhysicalDeviceSurfaceSupportKHR()</code> function, which takes the physical device, queue family index, and surface as parameters. Then simply check the value of the <code>boolean</code> and store the presentation family queue index. Note that it is very likely that it ends up being the same queue family as previously selected for the physical device, so the example adds logic to explicitly prefer a physical device that supports drawing and presentation in the same queue for improved performance:
<li><a href="graphics/graphics_cover_n.htm">Graphics</a>
-<p>The graphics features introduce how you can improve the visual look of your application through efficient use of images. You can handle graphics using various graphic libraries and interfaces, such as Cairo and OpenGL ES. You can also improve the performance of your graphic application with hardware acceleration.</p></li>
+<p>The graphics features introduce how you can improve the visual look of your application through efficient use of images. You can handle graphics using various graphic libraries and interfaces, such as Cairo and OpenGL® ES. You can also improve the performance of your graphic application with hardware acceleration.</p></li>
<li><a href="notification/notification_cover_n.htm">Notifications and Content Sharing</a>
<div id="container"><div id="contents"><div class="content">
<h1>Dynamic Animation Library (DALi)</h1>
-<p>DALi is a cross-platform 3D UI Toolkit for embedded systems. Its 3D user interface engine enables you to create rich and high-performance UI applications. DALi is based on OpenGL ES 2.0, but provides a clean cross-platform C++ framework. This means that you can use high-level DALi APIs instead of accessing low-level OpenGL APIs directly.</p>
+<p>DALi is a cross-platform 3D UI Toolkit for embedded systems. Its 3D user interface engine enables you to create rich and high-performance UI applications. DALi is based on OpenGL® ES 2.0, but provides a clean cross-platform C++ framework. This means that you can use high-level DALi APIs instead of accessing low-level OpenGL® APIs directly.</p>
<p>When creating a DALi application, make sure you understand the following main features:</p>
<ul>
<li><strong>Event thread</strong>: Main thread in which the application code and event handling run.</li>
<li><strong>Update thread</strong>: Updates the nodes on the scene as well as the running animations and constraints.</li>
- <li><strong>Render thread</strong>: OpenGL drawing, texture, and geometry uploading.</li>
+ <li><strong>Render thread</strong>: OpenGL® drawing, texture, and geometry uploading.</li>
<li><strong>Resource thread</strong>: Loads images and decodes them into bitmaps.</li>
</ul>
<p>This feature is supported in mobile applications only.</p>
-<p>The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity.</p>
-<p>For more information, see the <a href="../../graphics/opengl_n.htm">OpenGL ES</a> guide and the <a href="../../../../../org.tizen.native.mobile.apireference/group__GLView.html">GLView</a> API.</p>
+<p>The GLView component renders OpenGL® in an elementary object, which hides Evas GL complexity.</p>
+<p>For more information, see the <a href="../../graphics/opengl_n.htm">OpenGL
® ES</a> guide and the <a href="../../../../../org.tizen.native.mobile.apireference/group__GLView.html">GLView</a> API.</p>
<p align="center"><strong>Figure: GLView component</strong></p>
<p align="center"><img alt="GLView component" src="../../../images/glview.png" /></p>
</li>
<li>
<p>Set the resize policy.</p>
-<p>To set a policy that decides what to do with the GL surface when the GLView component is resized:</p>
+<p>To set a policy that decides what to do with the OpenGL® ES surface when the GLView component is resized:</p>
<pre class="prettyprint">
elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
</pre>
-<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>, in which case only the image object is scaled, not the underlying GL surface.</p>
+<p>The OpenGL® ES surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>, in which case only the image object is scaled, not the underlying OpenGL® ES surface.</p>
</li>
<li>
<p>Set the GLView rendering policy.</p>
<p>This feature is supported in wearable applications only.</p>
-<p>The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity.</p>
-<p>For more information, see the <a href="../../graphics/opengl_n.htm">OpenGL ES</a> guide and the <a href="../../../../../org.tizen.native.wearable.apireference/group__GLView.html">GLView</a> API.</p>
+<p>The GLView component renders OpenGL® in an elementary object, which hides Evas GL complexity.</p>
+<p>For more information, see the <a href="../../graphics/opengl_n.htm">OpenGL
® ES</a> guide and the <a href="../../../../../org.tizen.native.wearable.apireference/group__GLView.html">GLView</a> API.</p>
<p align="center"><strong>Figure: GLView component</strong></p>
</li>
<li>
<p>Set the resize policy.</p>
-<p>To set a policy that decides what to do with the GL surface when the GLView component is resized:</p>
+<p>To set a policy that decides what to do with the OpenGL® ES surface when the GLView component is resized:</p>
<pre class="prettyprint">
elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
</pre>
-<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>, in which case only the image object is scaled, not the underlying GL surface.</p>
+<p>The OpenGL® ES surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <code>ELM_GLVIEW_RESIZE_POLICY_SCALE</code>, in which case only the image object is scaled, not the underlying OpenGL® ES surface.</p>
</li>
<li>
<p>Set the GLView rendering policy.</p>
<li><code>buffer</code>: All the rendering takes place in a buffer.</li>
<li><code>fb</code>: Rendering takes place in the system's framebuffer.</li>
<li><code>software_x11</code>: Renders to an X11 window; this is the most used engine.</li>
-<li><code>gl_x11</code>: Renders to an X11 window, except that it uses OpenGL.</li>
+<li><code>gl_x11</code>: Renders to an X11 window, except that it uses OpenGL®.</li>
</ul>
<p>The engines implement the rendering of all the basic objects by themselves, because they can often be accelerated by the hardware or backend software libraries to provide fast rendering.</p>
<p>If a particular engine does not have the provision for a certain primitive object, it reverts back to using a default software version.</p>
<li><strong>Small memory footprint</strong>
<p>Despite its fast performance, EFL's memory footprint is smaller than that of other toolkits with similar features. A small memory footprint is useful in the embedded world, since embedded devices do not normally have much memory.</p></li>
<li><strong>Backend engine support</strong>
- <p>EFL supports several backend engines, such as X11 (OpenGL, Xlib, Xcb), Wayland (OpenGL, SHM), Direct Framebuffer, DRM, memory buffers, PS3 native, Windows®, and macOS. Applications do not need to deal with each backend engine separately.</p></li>
+ <p>EFL supports several backend engines, such as X11 (OpenGL®, Xlib, Xcb), Wayland (OpenGL®, SHM), Direct Framebuffer, DRM, memory buffers, PS3 native, Windows®, and macOS. Applications do not need to deal with each backend engine separately.</p></li>
<li><strong>GUI and logic separation</strong>
<p>EFL supports a GUI layout (<a href="learn_edc_intro_n.htm">EDC</a>) and logic separation by having the layout description in a plain text file and the logic code in the C or C++ source files.</p></li>
<li><strong>Themeable</strong>
<li><strong>Animations</strong>
<p>EFL supports different types of animations. Evas supports Evas maps with low-level APIs for performing 2D, 2.5D, and 3D object transformations. Edje supports predefined transitions and wrapping of Evas maps. Elementary supports transit APIs for various types of animations, which can be combined.</p></li>
<li><strong>Hardware acceleration</strong>
- <p>EFL supports OpenGL® and OpenGL ES acceleration.</p></li>
+ <p>EFL supports OpenGL® and OpenGL® ES acceleration.</p></li>
</ul>
<h2 id="library">Libraries in EFL</h2>
<tr>
<td>Evas</td>
<td>Evas (<a href="graphical_objects_n.htm">Primitive Graphical Objects</a>) is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects.
- <p>Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>.</p>
+ <p>Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL
®, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>.</p>
<p>Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows you to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, and calculate minimum drawing calls needed to get the job done.</p></td>
</tr>
<tr>
</ul>
<p>The work minimization allows the application using Evas to worry less about such optimizing and more about its logic flow, as the above "skip the work" optimizations are often done for you.</p>
-<p>A major change caused by having such a canvas and state model for the GUI is that you no longer actually render anything yourself. You must change the mindset from a "I draw" to "I create and manipulate" model. This is very different from almost all lower and even mid-level APIs that developers are used to - everything from Xlib, Cairo, and GDI to OpenGL and more. They all work on the "draw and forget" model, while Evas is a retained-mode scene graph that you manipulate.</p>
+<p>A major change caused by having such a canvas and state model for the GUI is that you no longer actually render anything yourself. You must change the mindset from a "I draw" to "I create and manipulate" model. This is very different from almost all lower and even mid-level APIs that developers are used to - everything from Xlib, Cairo, and GDI to OpenGL® and more. They all work on the "draw and forget" model, while Evas is a retained-mode scene graph that you manipulate.</p>
<p>Evas makes the cost of most operations (such as <code>evas_object_move()</code>, <code>evas_object_resize()</code>, and <code>evas_object_show()</code>) be "zero cost" (or as close to zero as possible). All most of these calls do is to update coordinates within an object and set a changed flag. That is it. They do not draw anything. For example, even setting the file on an image object through the <code>evas_object_image_file_set()</code> function only loads the image header, so the object can have the original image dimensions and alpha channel flag set. It does not decode the image data, avoiding a lot of file IO and decode overhead, and pushes this off until later (render time, if the image is visible and the data needed). If you are sure that you need the data though, Evas has the ability to begin an asynchronous preload of the image data in a background thread and inform you when it is ready.</p>
<tr>
<td>Hardware acceleration</td>
<td><a href="component_glview_mn.htm">GLView</a></td>
- <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
+ <td>The GLView component can render OpenGL® in an Elementary object, hiding EvasGL complexity.</td>
</tr>
<tr>
<tr>
<td>Hardware acceleration</td>
<td><a href="component_glview_wn.htm">GLView</a></td>
- <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
+ <td>The GLView component can render OpenGL® in an Elementary object, hiding EvasGL complexity.</td>
</tr>
<tr>
<td>Miscellaneous</td>
<li><a href="dali/dali_n.htm">Dynamic Animation Library (DALi)</a>
-<p>You can use the DALi 3D UI toolkit if you are creating a high-performance rich UI application. DALi is based on OpenGL ES 2.0 and 3.0; however it hides the complexity of the OpenGL ES API from you. DALi requires a GPU (Graphical Processing Unit) on the device.</p></li>
+<p>You can use the DALi 3D UI toolkit if you are creating a high-performance rich UI application. DALi is based on OpenGL® ES 2.0 and 3.0; however it hides the complexity of the OpenGL® ES API from you. DALi requires a GPU (Graphical Processing Unit) on the device.</p></li>
</ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<li><a href="#shape">Drawing Shapes to the Canvas</a></li>
<li><a href="#mask">Drawing Masks to the Canvas</a></li>
<li><a href="#text">Creating Text and Lines on the Canvas</a></li>
- <li><a href="#comparison">Performance Comparison of Canvas 2D and WebGL</a></li>
+ <li><a href="#comparison">Performance Comparison of Canvas 2D and WebGL™</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div class="note">
<strong>Note</strong>
- The canvas currently supports 2D graphics only, since the 3D graphics specification is still in progress. The <a href="https://www.khronos.org/registry/webgl/specs/1.0/" target="_blank">WebGL</a> API is currently called 3D Canvas, and is used to express 3D graphics. For more information on the performance differences between Canvas 2D and WebGL in mobile applications, see <a href="#comparison">Performance Comparison of Canvas 2D and WebGL</a>.
+ The canvas currently supports 2D graphics only, since the 3D graphics specification is still in progress. The <a href="https://www.khronos.org/registry/webgl/specs/1.0/" target="_blank">WebGL™</a> API is currently called 3D Canvas, and is used to express 3D graphics. For more information on the performance differences between Canvas 2D and WebGL™ in mobile applications, see <a href="#comparison">Performance Comparison of Canvas 2D and WebGL™</a>.
</div>
<p>For a practical example of using canvas contexts to create and display a clock on the canvas, see the <a href="task_basicwatch_w.htm">Basic Watch</a> wearable sample task.</p>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">Text_Styles_4.html</a></li>
</ul>
-<h2 id="comparison" name="comparison">Performance Comparison of Canvas 2D and WebGL in Mobile Applications</h2>
+<h2 id="comparison" name="comparison">Performance Comparison of Canvas 2D and WebGL™ in Mobile Applications</h2>
<p>In Web documents prior to HTML5, only simple image loading was supported. To create graphic animations, you had to use a separate plug-in. However, as the graphic-related APIs have become more standardized, you can now express graphics by using only JavaScript, without a separate plug-in.</p>
-<p>When developing Web applications that need to express complex graphics, such as games, the most important issue to consider is graphic performance. Currently, the HTML Canvas 2D Context API and <a href="https://www.khronos.org/registry/webgl/specs/1.0/" target="_blank">WebGL</a> are used to express graphic elements in many games. The following example illustrates how to create an effective graphic animation by comparing the performance of the renderers in the Canvas 2D Context API and WebGL.</p>
+<p>When developing Web applications that need to express complex graphics, such as games, the most important issue to consider is graphic performance. Currently, the HTML Canvas 2D Context API and <a href="https://www.khronos.org/registry/webgl/specs/1.0/" target="_blank">WebGL™</a> are used to express graphic elements in many games. The following example illustrates how to create an effective graphic animation by comparing the performance of the renderers in the Canvas 2D Context API and WebGL™.</p>
-<p>To compare the performance, 2 simple Web applications must be created, using respectively the Canvas 2D Context API and WebGL:</p>
+<p>To compare the performance, 2 simple Web applications must be created, using the Canvas 2D Context API and WebGL™:</p>
<ol>
<li>Create the applications with the following logic:
<li>Increase only the number of objects so that the same 1~N images, under the same conditions, are shown repeatedly based on 1~N.</li>
<li>Measure the FPS as the number of repeatedly shown objects increase.</li> </ol>
-<p>The following figure shows the result of the test: As the number of objects increase, the performance of the Canvas 2D Context API rapidly decreases when compared to WebGL (the result is subject to change according to the complexity of the application logic). As such, when expressing many graphic objects all differently, it is much more efficient to use WebGL than the Canvas 2D Context API.</p>
+<p>The following figure shows the result of the test: As the number of objects increase, the performance of the Canvas 2D Context API rapidly decreases compared to WebGL™ (the result is subject to change according to the complexity of the application logic). As such, when expressing many graphic objects all differently, it is much more efficient to use WebGL™ than the Canvas 2D Context API.</p>
<p align="center"><strong>Figure: Test result</strong></p>
<p align="center"><img alt="Test result" src="../../../images/comp_test_result.png" /></p>
-<p>There is one problem with using WebGL
; the ratio of mobile browsers supporting it is quite low compared to the Canvas 2D Context API, and even when it is supported, usually only partial features are included (support for 3D acceleration, reflection effect, and camera effect is particularly low). The following figure shows the support status of WebGL in computer (top) and mobile (bottom) browsers, as published in <a href="http://webglstats.com/" target="_blank">http://webglstats.com/</a> in June 2013.</p>
+<p>There is one problem with using WebGL
™; the ratio of mobile browsers supporting it is quite low compared to the Canvas 2D Context API, and even when it is supported, usually only partial features are included (support for 3D acceleration, reflection effect, and camera effect is particularly low). The following figure shows the support status of WebGL™ in computer (top) and mobile (bottom) browsers, as published in <a href="http://webglstats.com/" target="_blank">http://webglstats.com/</a> in June 2013.</p>
- <p align="center"><strong>Figure: WebGL support in computer and mobile browsers</strong></p>
+ <p align="center"><strong>Figure: WebGL™ support in computer and mobile browsers</strong></p>
<p align="center"><img alt="WebGL support in computer and mobile browsers" src="../../../images/comp_test_support.png" /></p>
-<p>Many mobile browsers do not support WebGL or only partially support WebGL. Even though Tizen supports WebGL, it is recommended to use the Canvas 2D Context API for small amount of 2D drawings, since the API is supported in most mobile browsers. However, for performance critical applications, use WebGL for faster 2D performance.</p>
+<p>Many mobile browsers do not support WebGL™ or only partially support WebGL™. Even though Tizen supports WebGL™, it is recommended to use the Canvas 2D Context API for small numbers of 2D drawings, since the API is supported in most mobile browsers. However, for performance critical applications, use WebGL™ for faster 2D performance.</p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<p>Using the <code>Gruntfile.js</code> file, tasks, such as <code>concat</code>, <code>uglify</code>, and <code>cssmin</code>, are registered.</p></li>\r
</ol>\r
<h2 id="improvement" name="improvement">Improvement through Grunt</h2>\r
- <p>After running the Grunt plug-in, the below comparison result is shown through Chrome inspector. The expected results vary depending on the application, but since the improvement effects are certain, it is recommended to use Grunt.</p>\r
+ <p>After running the Grunt plug-in, the below comparison result is shown through the inspector in the Google Chrome™ browser. The expected results vary depending on the application, but since the improvement effects are certain, it is recommended to use Grunt.</p>\r
\r
<div class="note">\r
<strong>Note</strong>\r
<li><a href="typedarray_w.htm">Typed Array - Khronos</a> <strong>in mobile and wearable applications only</strong>
<p>Enables you to access binary data in JavaScript.</p></li>
<li><a href="webgl_w.htm">WebGL - Khronos</a> <strong>in mobile and wearable applications only</strong>
- <p>Enables you to use the WebGL graphics library to create 3D visual elements.</p></li>
+ <p>Enables you to use the WebGL™ graphics library to create 3D visual elements.</p></li>
<li><a href="fullscreen_w.htm">FullScreen API - Mozilla</a> <strong>in mobile applications only</strong>
<p>Enables you to display an element on fullscreen.</p></li>
<li><a href="camera_w.htm">Camera API (Tizen Extension)</a> <strong>in wearable applications only</strong>
<h1>Typed Array - Khronos</h1>
-<p>Typed Array - Khronos is an HTML5 feature that allows you to access binary data in JavaScript. It is designed to effectively handle complex binary data of WebGL. It provides better performance than the WebGL - Khronos API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webgl">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webgl">wearable</a> applications), while manipulating binary data and handling the data of other HTML APIs.</p>
+<p>Typed Array - Khronos is an HTML5 feature that allows you to access binary data in JavaScript. It is designed to effectively handle the complex binary data of WebGL™. It provides better performance than the WebGL - Khronos API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webgl">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webgl">wearable</a> applications) when manipulating binary data and handling the data of other HTML APIs.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<li>Using typed arrays
<p>You can <a href="#use">deliver binary data</a> effectively in other HTML5 APIs that employ a typed array, such as:</p>
<ul>
-<li><a href="webgl_w.htm">WebGL</a></li>
+<li><a href="webgl_w.htm">WebGL™</a></li>
<li><a href="../graphics/canvas_w.htm">Canvas</a></li>
<li><a href="../communication/xmlhttprequest_w.htm">XMLHttpRequest Level 2</a></li>
</ul></li>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#import">Importing the WebGL Context</a></li>
+ <li><a href="#import">Importing the WebGL™ Context</a></li>
<li><a href="#shader">Initializing Programs and Shaders</a></li>
<li><a href="#buffer">Initializing Buffers</a></li>
<li><a href="#draw">Drawing Shapes on the Screen</a></li>
<li><a href="#threed">Creating a 3D Perspective</a></li>
<li><a href="#touch">Using Touch Events</a></li>
</ul></li>
- <li><a href="#framework">Using WebGL Frameworks</a></li>
+ <li><a href="#framework">Using WebGL™ Frameworks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<p>This feature is supported in mobile and wearable applications only.</p>
- <p>WebGL is designed as a rendering context of the <a href="../graphics/canvas_w.htm">HTML5 <canvas> element</a>. The WebGL context is still being developed and has not been standardized. WebGL uses 3D rendering APIs derived from <a href="http://www.opengl.org/documentation/specs/version2.0/glspec20.pdf" target="_blank">OpenGL® ES 2.0</a>, and is realized by binding shaders and <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES) as JavaScript.
+ <p>WebGL™ is designed as a rendering context of the <a href="../graphics/canvas_w.htm">HTML5 <canvas> element</a>. The WebGL™ context is still being developed and has not been standardized. WebGL™ uses 3D rendering APIs derived from <a href="http://www.opengl.org/documentation/specs/version2.0/glspec20.pdf" target="_blank">OpenGL® ES 2.0</a>, and is realized by binding shaders and <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.00.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES) as JavaScript.
</p>
- <p>The main features of the WebGL include:</p>
+ <p>The main features of WebGL™ include:</p>
<ul>
- <li>Importing the WebGL context
- <p>You can use the <code>getContext()</code> method of the <code>Canvas</code> object to <a href="#import">import the WebGL context</a>.</p>
+ <li>Importing the WebGL™ context
+ <p>You can use the <code>getContext()</code> method of the <code>Canvas</code> object to <a href="#import">import the WebGL™ context</a>.</p>
</li>
<li>Using programs and shaders
<p>You can use shaders, such as the vertex shader and fragment shader, to convert shape data to display it on the screen as pixels. <a href="#shader">Shaders must be initialized</a> and attached to programs.
</li>
<li>Using buffers
- <p>A buffer is a memory block for storing temporary data. In WebGL, you must <a href="#buffer">create a vertex buffer object (VBO) to store vertex attributes</a>, such as location, color, and texture coordinates.</p>
+ <p>A buffer is a memory block for storing temporary data. In WebGL
™, you must <a href="#buffer">create a vertex buffer object (VBO) to store vertex attributes</a>, such as location, color, and texture coordinates.</p>
<div class="note">
<strong>Note</strong>
<p>You can use shader attributes to define which buffer to pass to the application, and then record the buffer in the drawing buffer to <a href="#draw">display the content on the screen</a>.</p>
</li>
<li>Applying realistic 3D effects
- <p>To apply a more realistic 3D effect to objects in WebGL, you can use the following features:</p>
+ <p>To apply a more realistic 3D effect to objects in WebGL™, you can use the following features:</p>
<ul><li><p>Texture</p>
<p>You can <a href="#color">set the color value</a> and <a href="#texture">map an image</a> on the object surface.</p>
<p>Each vertex can have a unique color. When converting a vertex shader to a fragment shader, all the middle pixels are filled, and through linear interpolation of the vertex attributes, the color differences between vertices are automatically given gradation effects.</p>
</li></ul>
<p>You can also <a href="#touch">use touch effects</a> with textures and 3D perspectives.</p></li>
- <li>WebGL frameworks
-<p>Numerous <a href="http://www.khronos.org/webgl/wiki/User_Contributions#Frameworks" target="_blank">frameworks</a> exist to easily import low-level methods to WebGL and to develop WebGL more productively.</p>
-<p>The <a href="https://github.com/mrdoob/three.js/" target="_blank">three.js</a> is one of the most widely used WebGL frameworks. It is a lightweight JavapScript library, in which many settings that need to be performed when developing WebGL are already set as basis. Consequently, three.js reduces the overlapping code due to repetitive setting works.</p>
+ <li>WebGL™ frameworks
+<p>Numerous <a href="http://www.khronos.org/webgl/wiki/User_Contributions#Frameworks" target="_blank">frameworks</a> exist to easily import low-level methods to WebGL™ and to develop WebGL™ more productively.</p>
+<p>The <a href="https://github.com/mrdoob/three.js/" target="_blank">three.js</a> is one of the most widely used WebGL™ frameworks. It is a lightweight JavaScript library, in which many settings that need to be performed when developing WebGL™ are already set as basis. Consequently, three.js reduces the amount of overlapping code due to repetitive setting works.</p>
<p>You can use the three.js framework to, for example, <a href="#framework">apply light and camera effects</a>.</p></li>
</ul>
-<h2 id="import" name="import">Importing the WebGL Context</h2>
+<h2 id="import" name="import">Importing the WebGL™ Context</h2>
-<p>To enhance the user experience of your application with WebGL features, you must learn to import the WebGL context from the HTML5 <code><canvas></code> element:</p>
+<p>To enhance the user experience of your application with WebGL™ features, you must learn to import the WebGL™ context from the HTML5 <code><canvas></code> element:</p>
<ol>
<li><p>Define the <code><canvas></code> element ID and set its width and height:</p>
<pre class="prettyprint">
</div>
</li>
-<li><p>Use the <code>getContext()</code> method of the <code>Canvas</code> object to import the WebGL context:</p>
+<li><p>Use the <code>getContext()</code> method of the <code>Canvas</code> object to import the WebGL™ context:</p>
<pre class="prettyprint">
<script>
function startWegGL()
<h2 id="shader" name="shader" >Initializing Programs and Shaders</h2>
-<p>To enhance the user experience of your application with WebGL features, you must learn to bind the shaders and GLSL ES in WebGL by using shaders and programs:
+<p>To enhance the user experience of your application with WebGL™ features, you must learn to bind the shaders and GLSL ES in WebGL™ by using shaders and programs:
</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
</pre>
</li>
-<li><p>Import the <code>useProgram()</code> method to enable WebGL to use the program:</p>
+<li><p>Import the <code>useProgram()</code> method to enable WebGL™ to use the program:</p>
<pre class="prettyprint">
/* Shaders are loaded and used */
gl.useProgram(program);
<div class="note">
<strong>Note</strong>
- After a WebGL program has been used, you can use the <code>deleteProgram()</code> method to delete it.
+ After a WebGL™ program has been used, you can use the <code>deleteProgram()</code> method to delete it.
</div>
</li>
</ol>
<h2 id="buffer" name="buffer">Initializing Buffers</h2>
-<p>To enhance the user experience of your application with WebGL features, you must learn to create buffers, bind them, and store data in them:
+<p>To enhance the user experience of your application with WebGL™ features, you must learn to create buffers, bind them, and store data in them:
</p>
<ol>
- <li><p>To create a triangle (shown on the left in the figure), define the coordinates of a triangle according to the WebGL coordinate system (shown on the right):</p>
+ <li><p>To create a triangle (shown on the left in the figure), define the coordinates of a triangle according to the WebGL™ coordinate system (shown on the right):</p>
<p align="center"><img alt="WebGL native coordinate system" src="../../../images/initializing_buffers_coordsystem.png" /></p>
<li><p>Import the <code>bufferData()</code> method to store data to the VBO:</p>
<pre class="prettyprint">
- /* Convert to Float32Array format that allows the array to be used in WebGL */
+ /* Convert to Float32Array format that allows the array to be used in WebGL™ */
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
</script>
</pre>
<h2 id="draw" name="draw">Drawing Shapes on the Screen</h2>
-<p>To enhance the user experience of your application with WebGL features, you must learn to display shapes on the screen using attribute array data and a drawing buffer:
+<p>To enhance the user experience of your application with WebGL™ features, you must learn to display shapes on the screen using attribute array data and a drawing buffer:
</p>
<ol>
- <li><p>Import the <code>getAttribLocation()</code> method to bring the attribute location from the WebGL program:</p>
+ <li><p>Import the <code>getAttribLocation()</code> method to bring the attribute location from the WebGL™ program:</p>
<pre class="prettyprint">
<script>
var vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
<h2 id="color" name="color">Setting Colors</h2>
-<p>To enhance the user experience of your application with WebGL features, you must learn to set colors using attributes and a buffer:</p>
+<p>To enhance the user experience of your application with WebGL™ features, you must learn to set colors using attributes and a buffer:</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
<h2 id="texture" name="texture">Setting Textures</h2>
-<p>To enhance the user experience of your application with WebGL features, you must learn to use a texture, which is an image applied to the surface:</p>
+<p>To enhance the user experience of your application with WebGL™ features, you must learn to use a texture, which is an image applied to the surface:</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES). In this example, the texture coordinate attribute is used instead of the vertex coordinate attribute.</p>
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
</pre>
-<p>The image data loaded in HTML has the opposite y-axis as the webGL direction. Use the <code>gl.UNPACK_FLIP_Y_WEBGL</code> attribute to reverse the data and store it.</p>
+<p>The image data loaded in HTML has the opposite y-axis as the WebGL™ direction. Use the <code>gl.UNPACK_FLIP_Y_WEBGL</code> attribute to reverse the data and store it.</p>
</li>
<li><p>Use the loaded image file to fill the texture data. The <code>texImage2D()</code> method assigns the image to be used as a texture, and the <code>textParameteri()</code> method assigns a filter.</p>
<h2 id="animation" name="animation">Creating an Animation</h2>
-<p>To enhance the user experience of your application with WebGL features, you must learn to adjust and move object coordinates to create an animation:</p>
+<p>To enhance the user experience of your application with WebGL™ features, you must learn to adjust and move object coordinates to create an animation:</p>
<ol>
<li>Calculate the central point:
<h2 id="threed" name="threed">Creating a 3D Perspective</h2>
- <p>To enhance the user experience of your application with WebGL features, you must learn to create 3D perspective using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>:</p>
+ <p>To enhance the user experience of your application with WebGL
™ features, you must learn to create 3D perspective using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>:</p>
<ol>
<li><p>Set the vertex coordinate and color buffer values to draw 2 triangles:</p>
<h2 id="touch" name="touch">Using Touch Events</h2>
-<p>To enhance the user experience of your application with WebGL features, you must learn to apply a texture and 3D perspective with touch events using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>. The following example demonstrates how to display and turn a dice on the screen based on touch events.</p>
+<p>To enhance the user experience of your application with WebGL
™ features, you must learn to apply a texture and 3D perspective with touch events using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>. The following example demonstrates how to display and turn a dice on the screen based on touch events.</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
</pre>
</li>
-<li><p>Use the <code>getContext()</code> method of the <code>canvas</code> object to import the WebGL context:</p>
+<li><p>Use the <code>getContext()</code> method of the <code>canvas</code> object to import the WebGL™ context:</p>
<pre class="prettyprint">
<script>
function getWebGLContext()
</pre>
</li>
-<li><p>Initialize the WebGL texture and load the image to be used as the texture (the figure shows the coordinates of the image to be loaded):</p>
+<li><p>Initialize the WebGL™ texture and load the image to be used as the texture (the figure shows the coordinates of the image to be loaded):</p>
<pre class="prettyprint">
function initTexture(callback)
<div class="note">
<strong>Note</strong>
- The <code>perspective()</code> method is not WebGL-embedded, so it must be used directly, or a third-party matrix library must be used.
+ The <code>perspective()</code> method is not WebGL™-embedded, so it must be used directly, or a third-party matrix library must be used.
</div>
<pre class="prettyprint lang-js">
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/images" target="_blank">dice.gif</a></li>
</ul>
- <h2 id="framework" name="framework">Using WebGL Frameworks</h2>
+ <h2 id="framework" name="framework">Using WebGL™ Frameworks</h2>
-<p>To enhance the user experience of your application with WebGL features, you must learn to use the three.js framework:</p>
+<p>To enhance the user experience of your application with WebGL™ features, you must learn to use the three.js framework:</p>
<ol>
<li><p>Download the <a href="http://threejs.org/" target="_blank">three.js library</a> and included it in HTML file:</p>
<div class="note">
<strong>Note</strong>
- In WebGL, there is no <code>Camera</code> object.
+ In WebGL™, there is no <code>Camera</code> object.
</div>
</li>
<p>Images can be used in Web applications in the following ways:</p>
<ul><li><code>IMG</code> tag linking images directly to HTML</li>
<li>CSS <code>background</code> property expressing images as a background in HTML</li>
- <li><a href="../graphics/svg_w.htm">SVG (Scalable Vector Graphics)</a>, <a href="../graphics/canvas_w.htm">Canvas</a>, and <a href="http://www.khronos.org/registry/webgl/specs/latest/" target="blank">WebGL</a> APIs implementing graphics in HTML</li>
+ <li><a href="../graphics/svg_w.htm">SVG (Scalable Vector Graphics)</a>, <a href="../graphics/canvas_w.htm">Canvas</a>, and <a href="http://www.khronos.org/registry/webgl/specs/latest/" target="blank">WebGL™</a> APIs implementing graphics in HTML</li>
</ul>
<p>When selecting an option from the list above, consider the type of the image resource you are going to use.</p>
<p>You can use the following types of image resources:</p>
</ul>
-<p>When using the CSS transform properties, the Tizen browser requires no prefix, the Firefox browser requires the <code>-moz-</code> prefix, the Chrome and Safari browsers require the <code>-webkit-</code> prefix, and the Opera browser requires the <code>-o-</code> prefix.</p>
+<p>When using the CSS transform properties, the Tizen browser requires no prefix, the Firefox browser requires the <code>-moz-</code> prefix, the Google Chrome™ and Safari browsers require the <code>-webkit-</code> prefix, and the Opera browser requires the <code>-o-</code> prefix.</p>
<h2 name="prop_trans" id="prop_trans">Defining Transform Properties</h2>
animation: trans-ani 10s infinite linear;
backface-visibility: visible;
- /* Chrome and Safari browsers */
+ /* Google Chrome™ and Safari browsers */
-webkit-transform: rotate(30deg);
-webkit-transform-origin: 30% 30%;
-webkit-perspective: 220;
transform-style: preserve-3d;
perspective-origin: 30% 30%;
- /* Chrome and Safari browsers */
+ /* Google Chrome™ and Safari browsers */
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin: 30% 30%;
}
<li><a href="useful/useful_guide_w.htm">Useful Guides for W3C/HTML5 Features</a>
<p>You can use common W3C features to play sounds to provide responsiveness on user interaction, and to improve the performance of wearable Web applications.</p></li>
<li><a href="supplement/supplement_guide_w.htm">Supplementary Features</a>
- <p>You can take advantage of supplementary features in creating Tizen Web applications. You can access binary data in JavaScript with typed arrays, create 3D visual elements with the WebGL graphics library, display elements on full screen views, and control the device camera.</p></li>
+ <p>You can take advantage of supplementary features in creating Tizen Web applications. You can access binary data in JavaScript with typed arrays, create 3D visual elements with the WebGL™ graphics library, display elements on full screen views, and control the device camera.</p></li>
<li><a href="ui/ui_guide_w.htm">User Interface</a>
<p>You can create a visual outlook for the UI application to ensure the best possible user experience. The Tizen platform provides the W3C/HTML5 UI toolkit framework for developing a Web application.</p></li>
</ul>
<topic href="html/native/graphics/cairo_n.htm" label="Cairo Vector Graphics"></topic>
<topic href="html/native/graphics/graphic_buffer_n.htm" label="Graphic Buffer and Surface"></topic>
<topic href="html/native/graphics/hw_acceleration_n.htm" label="Hardware Acceleration"></topic>
- <topic href="html/native/graphics/opengl_n.htm" label="OpenGL ES">
- <topic href="html/native/graphics/creating_opengles_n.htm" label="Creating OpenGL ES Applications"></topic>
- <topic href="html/native/graphics/polygon_mesh_n.htm" label="Polygon Mesh in OpenGL ES"></topic>
+ <topic href="html/native/graphics/opengl_n.htm" label="OpenGL® ES">
+ <topic href="html/native/graphics/creating_opengles_n.htm" label="Creating OpenGL® ES Applications"></topic>
+ <topic href="html/native/graphics/polygon_mesh_n.htm" label="Polygon Mesh in OpenGL® ES"></topic>
<topic href="html/native/graphics/vertex_shader_n.htm" label="Vertex Shader"></topic>
<topic href="html/native/graphics/assembly_n.htm" label="Primitive Assembly and Rasterization"></topic>
<topic href="html/native/graphics/texturing_n.htm" label="Texturing"></topic>
<topic href="html/native/graphics/adv_rendering_n.htm" label="Advanced Rendering"></topic>
<topic href="html/native/graphics/adv_performance_n.htm" label="Advanced Performance"></topic>
</topic>
- <topic href="html/native/graphics/vulkan_n.htm" label="SDL Graphics with Vulkan"></topic>
+ <topic href="html/native/graphics/vulkan_n.htm" label="SDL Graphics with Vulkan®"></topic>
</topic>
<topic href="html/native/notification/notification_cover_n.htm" label="Notifications and Content Sharing">
<topic href="html/native/notification/noti_n.htm" label="Notifications"></topic>
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#chart">OpenGL® chart</a></li>
+ <li><a href="#chart">OpenGL chart</a></li>
<li><a href="#statistics">Statistics</a></li>
<li><a href="#api_list">API Lists</a></li>
<li><a href="#redundant">Redundant</a></li>
<p>The <strong>OpenGL ES</strong> (Open Graphics Library) tab of the Dynamic Analyzer displays information about OpenGL® 2.0 and EvasGL.</p>
<p>The tab consists of the following views:</p>
<ul>
-<li><a href="#chart">OpenGL® chart</a> shows the elapsed time of the frame.</li>
-<li><a href="#statistics">Statistics</a> table displays statistics of APIs related to EvasGL and OpenGL.</li>
-<li><a href="#api_list">API List</a> table shows the OpenGL® APIs that are associated with the values selected in the OpenGL® chart.</li>
+<li><a href="#chart">OpenGL chart</a> shows the elapsed time of the frame.</li>
+<li><a href="#statistics">Statistics</a> table displays statistics of APIs related to EvasGL and OpenGL®.</li>
+<li><a href="#api_list">API List</a> table shows the OpenGL® APIs that are associated with the values selected in the OpenGL chart.</li>
<li><a href="#redundant">Redundant</a> table displays the APIs that are called repeatedly with the same parameters.</li>
<li><a href="#context">Context</a> table displays the render state of the API context selected in the API List table.</li>
<li><a href="#program">Program</a> table shows all the shader program information.</li>
<p align="center"><strong>Figure: OpenGL analysis</strong></p>
<p align="center"><img alt="OpenGL analysis" src="../images/da_opengl_analysis.png" /></p>
-<h2 id="chart">OpenGL® Chart</h2>
-<p>The OpenGL® chart displays the elapsed frame time with 2 charts:</p>
+<h2 id="chart">OpenGL Chart</h2>
+<p>The OpenGL chart displays the elapsed frame time with 2 charts:</p>
<ul>
<li>The Frame time chart shows the elapsed frame time. The X axis value of the frame time chart means the frame index number. A small chart value means a good status frame. Only the frames smaller than the value specified by the user and changed to yellow are visible.
<tr>
<td>Graphics</td>
<td><img alt="OpenGL ES Analysis" src="../images/dynamic_analyzer_opengl.png"/><p>OpenGL ES Analysis</p></td>
- <td>Analyzes OpenGL (Open Graphics Library) 2.0 and EvasGL information used on a process. It shows detailed OpenGL API lists, and context, program, and texture information at a particular point in time.</td>
+ <td>Analyzes OpenGL® (Open Graphics Library) 2.0 and EvasGL information used on a process. It shows detailed OpenGL® API lists, and context, program, and texture information at a particular point in time.</td>
<td><strong>OpenGL ES</strong></td>
</tr>
<tr>
<li>Web Inspector
<ul>
- <li>If your Chrome™ browser version is higher than 54, the Web Inspector console and some other functions do not work properly due to Web core compatibility issues.</li>
+ <li>If your Google Chrome™ browser version is higher than 54, the Web Inspector console and some other functions do not work properly due to Web core compatibility issues.</li>
</ul>
</li>
<li>Emulator
<ul>
<li>The bug that sometimes caused NFC to work improperly or not at all on the emulator has been fixed.</li>
- <li>The bug that caused WebGL to fail in watch applications has been fixed.</li>
+ <li>The bug that caused WebGL™ to fail in watch applications has been fixed.</li>
</ul>
</li>
</ul>
<li>Web Inspector
<ul>
- <li>If your Chrome™ browser version is higher than 54, the Web Inspector console and some other functions do not work properly due to Web core compatibility issues.</li>
+ <li>If your Google Chrome™ browser version is higher than 54, the Web Inspector console and some other functions do not work properly due to Web core compatibility issues.</li>
<li>To debug your watch application, you must use the latest emulator version.</li>
</ul>
</li>
</ul></li>
<li>Web Inspector
<ul>
- <li>If your Chrome™ browser version is higher than 54, the Web Inspector console and some other functions do not work properly due to Web core compatibility issues.</li>
+ <li>If your Google Chrome™ browser version is higher than 54, the Web Inspector console and some other functions do not work properly due to Web core compatibility issues.</li>
</ul></li>
</ul>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<li><a href="#system">OS and System Requirements</a></li>
<li><a href="#java">Java Development Kit (JDK) Requirements</a></li>
<li><a href="#emulator">Emulator Requirements</a></li>
- <li><a href="#chrome">Web Browser (Chrome™) Requirements</a></li>
+ <li><a href="#chrome">Google Chrome™ Browser Requirements</a></li>
<li><a href="#additional">Additional Requirements</a></li>
</ul>
</div></div>
</tr>
<tr>
<td rowspan="2">Driver</td>
- <td colspan="3">You must update to the latest vendor-provided version of the graphic card driver for OpenGL ES acceleration.</td>
+ <td colspan="3">You must update to the latest vendor-provided version of the graphic card driver for OpenGL® ES acceleration.</td>
</tr>
<tr>
<td>Check and install the necessary drivers in the <strong>Control Panel > System and Security > Windows Update</strong>.
</tbody>
</table>
-<h2 id="chrome">Web Browser (Chrome™) Requirements</h2>
+<h2 id="chrome">Google Chrome™ Browser Requirements</h2>
-<p>You must install
a Chrome™ Web browser to use the <a href="../web_tools/web_inspector_w.htm">Web Inspector</a> tool.</p>
+<p>You must install
the Google Chrome™ browser to use the <a href="../web_tools/web_inspector_w.htm">Web Inspector</a> tool.</p>
-<p>Since the Web Inspector server uses the Web core in the platform, there is a limit on the Chrome™ version in your environment. For all functions of the Web Inspector to work properly, use the <a href="http://www.slimjet.com/chrome/google-chrome-old-version.php" target="_blank">Chrome™ 52 or lower version</a>.</p>
+<p>Since the Web Inspector server uses the Web core in the platform, there is a limit on the Google Chrome™ browser version in your environment. For all functions of the Web Inspector to work properly, use the <a href="http://www.slimjet.com/chrome/google-chrome-old-version.php" target="_blank">Google Chrome™ browser version 52 or lower</a>.</p>
<h2 id="additional" name="additional">Additional Requirements</h2>
<div class="note">
<strong>Note</strong>
- To operate the T-trace, you must first install Python (2.7.x) and Google Chrome™ on your computer.
+ To operate the T-trace, you must first install Python (2.7.x) and the Google Chrome™ browser on your computer.
</div>
<p>To run the T-trace in the Tizen Studio:</p>
<ul class="toc">
<li><a href="#preferences">Setting Web Preferences</a></li>
<li><a href="#widget">Widget ID</a></li>
- <li><a href="#chrome">Chrome™ Browser Path</a></li>
+ <li><a href="#chrome">Google Chrome™ Browser Path</a></li>
<li><a href="#editor">Editor</a></li>
<li><a href="#config">Configuration Editor</a></li>
<li><a href="#css">CSS Editor</a></li>
<p align="center"><strong>Figure: Widget ID</strong></p>
<p align="center"><img alt="Widget ID" src="../images/ide_pref_widget_id.png" /></p>
-<h2 id="chrome">Chrome™ Browser Path</h2>
+<h2 id="chrome">Google Chrome™ Browser Path</h2>
<p>Go to <strong>Tizen Studio > Web > Chrome</strong>.</p>
-<p>The Google Chrome™ browser location is automatically set as default if the Chrome™ browser is installed in your system.</p>
+<p>The Google Chrome™ browser location is automatically set if the browser is installed on your system.</p>
<p>In case you install the browser in a custom path, the Tizen Studio cannot automatically detect the path and you must set the location manually.</p>
<h2 id="editor">Editor</h2>
<p>You can run and test your application using the Tizen emulator. In addition, you can use the <strong>Connection Explorer</strong> view to manage connections to the emulator and various other target devices. The Smart Development Bridge (SDB) tool allows you to communicate with a connected target device, and the unit test tool allows you to create test projects to verify the reliability of your code.</p></li>
<li><a href="web_simulator_w.htm">Using the Web Simulator</a>
- <p>You can run your Web application in a Google Chrome™-based simulator, which provides many settings and features for debugging your application. You can test how the application behaves, and even send in events and messages.</p></li>
+ <p>You can run your Web application in a Google Chrome™ browser-based simulator, which provides many settings and features for debugging your application. You can test how the application behaves, and even send in events and messages.</p></li>
</ul>
<p>If you prefer a command line interface to the graphical Tizen Studio window, you can use the <a href="../common_tools/command_line_interface.htm">Command Line Interface (CLI)</a> tool during the entire development process.</p>
<div class="note">
<strong>Note</strong>
- If the computer does not fully support WebGL, the simulated device in the <strong>Sensors</strong> panel looks like in the following figure.
- <p align="center"><strong>Figure: Sensor without WebGL</strong></p>
+ If the computer does not fully support WebGL™, the simulated device in the <strong>Sensors</strong> panel looks like in the following figure.
+ <p align="center"><strong>Figure: Sensor without WebGL™</strong></p>
<p align="center"><img alt="Sensor without WebGL" src="../images/simulator_sensor_webgl.png" /></p>
</div>
<li>Supports running and debugging modern HTML5 Web applications.</li>
<li>Simulates Tizen Web APIs using a JavaScript backend. For more information about the Tizen Web APIs supported by the simulator, see <a href="#api">Tizen API Coverage</a>.</li>
<li>Includes configuration panels for sending in events and messages to debug features, such as Geolocation, Accelerometer, and Messaging.</li>
- <li>Runs on Google Chrome™.</li>
+ <li>Runs on the Google Chrome™ browser.</li>
<li>Provides <a href="#pref">preferences</a> to allow you to customize how it works.</li>
</ul>
<p>The Tizen Web Simulator is based on the <a href="https://github.com/blackberry-webworks/Ripple-UI" target="_blank">Ripple-UI Framework</a> and is licensed under Apache Software License v.2.0. </p>
<h2 id="pref" name="pref">Simulator Preferences</h2>
<p>To view the Tizen Web Simulator preferences, select <strong>Window > Preferences > Tizen Studio > Web > Simulator</strong> in the Tizen Studio.</p>
- <h3 id="google" name="google">Google Chrome™ Settings</h3>
- <p>In this section, you can modify Google Chrome™-related preferences.</p>
- <h4 id="chrome" name="chrome">Google Chrome™ Location</h4>
- <p>Enter the full path to the Google Chrome™ program. When first started, the Tizen Studio attempts to discover the location. However, it can be necessary to enter or modify this value manually.</p>
+ <h3 id="google" name="google">Google Chrome™ Browser Settings</h3>
+ <p>In this section, you can modify Google Chrome™ browser-related preferences.</p>
+ <h4 id="chrome" name="chrome">Google Chrome™ Browser Location</h4>
+ <p>Enter the full path to the Google Chrome™ browser program. When first started, the Tizen Studio attempts to discover the location. However, it can be necessary to enter or modify this value manually.</p>
<ul>
<li>For Linux: <code>/opt/google/chrome/google-chrome</code>.</li>
<li>For Windows® 64-bit: <code> C:\Program Files (x86)\Google\Chrome\Application\chrome.exe</code></li>
<li>Internal: Use the simulator that is part of the Tizen Studio.</li>
<li>External: Use a custom build or other simulator version. Enter the full path to the <code>index.html</code> file for the version you want to use.</li>
</ul></li>
- <li> <p>Selecting <strong>Launch simulator in Google Chrome™ application mode</strong> launches the simulator without the Google URL bar or tabs at the top. The result is that the simulator appears as a standalone application. The setting has no effect on the simulator features.</p></li>
+ <li> <p>Selecting <strong>Launch the simulator in Google Chrome application mode</strong> launches the simulator without the Google URL bar or tabs at the top. The result is that the simulator appears as a standalone application. The setting has no effect on the simulator features.</p></li>
</ul>
<h2 id="api" name="api">Tizen API Coverage</h2>
<ul>
<li>Edje library provides a powerful theme. You can use it to create your own UI components and use them in your application. You can also extend the default theme.</li>
<li>Ecore library manages the main loop of your application. The main loop is one of the most important concepts you need to know to develop an application. The main loop is where events are handled, and where you interact with the user through the callback mechanism.</li>
- <li>Evas library is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. Evas handles the window state by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows you to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, and calculate minimum drawing calls needed to get the job done.</li>
+ <li>Evas library is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. Evas handles the window state by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL®, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows you to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, and calculate minimum drawing calls needed to get the job done.</li>
<li>Eina library is the basis of all the EFL libraries. Eina is a toolbox that implements an API for data types in an efficient way. It contains all the functions needed to create lists and hashes, manage shared strings and open shared libraries, and handle errors and memory pools.</li>
</ul></li>
</ul>
</tr>
<tr>
<td>Supplementary</td>
- <td>These APIs enable you to manage some supplementary features, such as displaying an element on full screen, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.</td>
+ <td>These APIs enable you to manage some supplementary features, such as displaying an element on full screen, accessing binary data in JavaScript, and using the WebGL™ graphics library to create 3D visual elements.</td>
<td>
<ul>
<li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li>
</tr>
<tr>
<td>Supplementary</td>
- <td>These APIs enable you to manage some supplementary features, such as managing the device camera, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.</td>
+ <td>These APIs enable you to manage some supplementary features, such as managing the device camera, accessing binary data in JavaScript, and using the WebGL™ graphics library to create 3D visual elements.</td>
<td>
<ul>
<li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li>
<div class="note">
<strong>Note</strong>
- The Tizen Web Simulator runs only on the Google Chrome™ browser. To use the Web Simulator, download and install
<a href="http://www.google.com/chrome/" target="_blank">Google Chrome</a>. You can manually specify the installation location of the browser in the <a href="../../../../org.tizen.studio/html/web_tools/web_simulator_w.htm#pref">simulator preferences</a>.
+ The Tizen Web Simulator runs only on the Google Chrome™ browser. To use the Web Simulator, download and install
the <a href="http://www.google.com/chrome/" target="_blank">Google Chrome™</a> browser. You can manually specify the installation location of the browser in the <a href="../../../../org.tizen.studio/html/web_tools/web_simulator_w.htm#pref">simulator preferences</a>.
</div>
<p>If you are running your Web application on the Web Simulator for the first time, create a running configuration by selecting <strong>Run > Run Configurations > Tizen Web Simulator Application</strong> in the Tizen Studio menu. The running configuration contains the application launch settings.</p>
<li>In the Tizen Studio menu, go to <strong>Run > Debug As > Tizen Web Application</strong>.</li>
<li>On the Tizen Studio toolbar, click <strong>Debug</strong>.</li>
</ul>
- <p>The Web Inspector tool is displayed in a new Chrome browser window. You can perform the following debugging tasks using the Web Inspector:</p>
+ <p>The Web Inspector tool is displayed in a new Google Chrome™ browser window. You can perform the following debugging tasks using the Web Inspector:</p>
<ul>
<li>Inspect styles</li>
<li>Inspect the DOM</li>
<div class="note">
<strong>Note</strong>
The Web Inspector always opens in a new window. Life-cycle synchronization between the application to be debugged and the Web Inspector browser is not supported.
- <p>Installing Google Chrome on the device is mandatory for the Web Inspector to work. When Google Chrome is installed on the device, the Tizen Studio automatically detects it. To select the browser path, go to <code>Window > Preferences > Tizen Studio > Web > Chrome</code>.</p>
+ <p>Installing the Google Chrome™ browser on the device is mandatory for the Web Inspector to work. When the Google Chrome™ browser is installed on the device, the Tizen Studio automatically detects it. To select the browser path, go to <code>Window > Preferences > Tizen Studio > Web > Chrome</code>.</p>
</div>
</li>
projects / sdk / online-doc.git / commitdiff