Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(120)

Side by Side Diff: native_client_sdk/doc_generated/devguide/coding/3D-graphics.html

Issue 254033002: [NaCl SDK Docs] Remove links to developers.google.com (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: . Created 6 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 {{+bindTo:partials.standard_nacl_article}} 1 {{+bindTo:partials.standard_nacl_article}}
2 2
3 <section id="d-graphics"> 3 <section id="d-graphics">
4 <span id="devguide-coding-3d-graphics"></span><h1 id="d-graphics"><span id="devg uide-coding-3d-graphics"></span>3D Graphics</h1> 4 <span id="devguide-coding-3d-graphics"></span><h1 id="d-graphics"><span id="devg uide-coding-3d-graphics"></span>3D Graphics</h1>
5 <p>Native Client applications use the <a class="reference external" href="http:/ /en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES 2.0</a> API for 3D rendering. This d ocument 5 <p>Native Client applications use the <a class="reference external" href="http:/ /en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES 2.0</a> API for 3D rendering. This d ocument
6 describes how to call the OpenGL ES 2.0 interface in a Native Client module and 6 describes how to call the OpenGL ES 2.0 interface in a Native Client module and
7 how to build an efficient rendering loop. It also explains how to validate GPU 7 how to build an efficient rendering loop. It also explains how to validate GPU
8 drivers and test for specific GPU capabilities, and provides tips to help ensure 8 drivers and test for specific GPU capabilities, and provides tips to help ensure
9 your rendering code runs efficiently.</p> 9 your rendering code runs efficiently.</p>
10 <aside class="note"> 10 <aside class="note">
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after
87 <ul class="small-gap"> 87 <ul class="small-gap">
88 <li>If you are using textures in vertex shaders, make sure 88 <li>If you are using textures in vertex shaders, make sure
89 <code>glGetIntegerv(GL_MAX_VERTEX_TEXTURE_IMAGE_UNITS, ...)</code> and 89 <code>glGetIntegerv(GL_MAX_VERTEX_TEXTURE_IMAGE_UNITS, ...)</code> and
90 <code>glGetIntegerv(GL_MAX_TEXTURE_SIZE, ...)</code> return values greater than 0.</li> 90 <code>glGetIntegerv(GL_MAX_TEXTURE_SIZE, ...)</code> return values greater than 0.</li>
91 <li>If you are using more than 8 textures in a single shader, make sure 91 <li>If you are using more than 8 textures in a single shader, make sure
92 <code>glGetIntegerv(GL_MAX_TEXTURE_IMAGE_UNITS, ...)</code> returns a value grea ter 92 <code>glGetIntegerv(GL_MAX_TEXTURE_IMAGE_UNITS, ...)</code> returns a value grea ter
93 than or equal to the number of simultaneous textures you need.</li> 93 than or equal to the number of simultaneous textures you need.</li>
94 </ul> 94 </ul>
95 </section></section><section id="vetting-the-driver-in-the-chrome-web-store"> 95 </section></section><section id="vetting-the-driver-in-the-chrome-web-store">
96 <h3 id="vetting-the-driver-in-the-chrome-web-store">Vetting the driver in the Ch rome Web Store</h3> 96 <h3 id="vetting-the-driver-in-the-chrome-web-store">Vetting the driver in the Ch rome Web Store</h3>
97 <p>If you choose to place your application in the <a class="reference external" href="https://developers.google.com/chrome/web-store/docs/">Chrome Web 97 <p>If you choose to place your application in the <a class="reference external" href="/webstore">Chrome Web Store</a>,
98 Store</a>, its Web Store 98 its Web Store <a class="reference external" href="/extensions/manifest">manifest file</a> can include the <code>webgl</code>
99 <a class="reference external" href="http://code.google.com/chrome/extensions/man ifest.html">manifest file</a> can 99 feature in the requirements parameter. It looks like this:</p>
100 include the <code>webgl</code> feature in the requirements parameter. It looks l ike this:</p>
101 <pre class="prettyprint"> 100 <pre class="prettyprint">
102 &quot;requirements&quot;: { 101 &quot;requirements&quot;: {
103 &quot;3D&quot;: { 102 &quot;3D&quot;: {
104 &quot;features&quot;: [&quot;webgl&quot;] 103 &quot;features&quot;: [&quot;webgl&quot;]
105 } 104 }
106 } 105 }
107 </pre> 106 </pre>
108 <p>While WebGL is technically a JavaScript API, specifying the <code>webgl</code > feature 107 <p>While WebGL is technically a JavaScript API, specifying the <code>webgl</code > feature
109 also works for OpenGL ES 2.0 because both interfaces use the same driver.</p> 108 also works for OpenGL ES 2.0 because both interfaces use the same driver.</p>
110 <p>This manifest item is not required, but if you include it, the Chrome Web Sto re 109 <p>This manifest item is not required, but if you include it, the Chrome Web Sto re
111 will prevent a user from installing the application if the browser is running on 110 will prevent a user from installing the application if the browser is running on
112 a machine that does not support OpenGL ES 2.0 or that is using a known 111 a machine that does not support OpenGL ES 2.0 or that is using a known
113 blacklisted GPU driver that could invite an attack.</p> 112 blacklisted GPU driver that could invite an attack.</p>
114 <p>If the Web Store determines that the user&#8217;s driver is deficient, the ap p won&#8217;t 113 <p>If the Web Store determines that the user&#8217;s driver is deficient, the ap p won&#8217;t
115 appear on the store&#8217;s tile display. However, it will appear in store searc h 114 appear on the store&#8217;s tile display. However, it will appear in store searc h
116 results or if the user links to it directly, in which case the user could still 115 results or if the user links to it directly, in which case the user could still
117 download it. But the manifest requirements will be checked when the user reaches 116 download it. But the manifest requirements will be checked when the user reaches
118 the install page, and if there is a problem, the browser will display the 117 the install page, and if there is a problem, the browser will display the
119 message &#8220;This application is not supported on this computer. Installation has 118 message &#8220;This application is not supported on this computer. Installation has
120 been disabled.&#8221;</p> 119 been disabled.&#8221;</p>
121 <p>The manifest-based check applies only to downloads directly from the Chrome W eb 120 <p>The manifest-based check applies only to downloads directly from the Chrome W eb
122 Store. It is not performed when an application is loaded via <a class="reference external" href="https://developers.google.com/chrome/web-store/docs/inline_inst allation">inline 121 Store. It is not performed when an application is loaded via <a class="reference external" href="/webstore/inline_installation">inline
123 installation</a>.</p> 122 installation</a>.</p>
124 </section><section id="what-to-do-when-there-are-problems"> 123 </section><section id="what-to-do-when-there-are-problems">
125 <h3 id="what-to-do-when-there-are-problems">What to do when there are problems</ h3> 124 <h3 id="what-to-do-when-there-are-problems">What to do when there are problems</ h3>
126 <p>Using the vetting procedure described above, you should be able to detect the 125 <p>Using the vetting procedure described above, you should be able to detect the
127 most common problems before your application runs. If there are problems, your 126 most common problems before your application runs. If there are problems, your
128 code should describe the issue as clearly as possible. That&#8217;s easy if ther e is a 127 code should describe the issue as clearly as possible. That&#8217;s easy if ther e is a
129 missing feature. Failure to create a graphics context is tougher to diagnose. At 128 missing feature. Failure to create a graphics context is tougher to diagnose. At
130 the very least, you can suggest that the user try to update the driver. You 129 the very least, you can suggest that the user try to update the driver. You
131 might want to linke to the Chrome page that describes <a class="reference extern al" href="http://support.google.com/chrome/bin/answer.py?hl=en&amp;answer=120294 6">how to do updates</a>.</p> 130 might want to linke to the Chrome page that describes <a class="reference extern al" href="http://support.google.com/chrome/bin/answer.py?hl=en&amp;answer=120294 6">how to do updates</a>.</p>
132 <p>If a user can&#8217;t update the driver, or their problem persists, be sure t o gather 131 <p>If a user can&#8217;t update the driver, or their problem persists, be sure t o gather
(...skipping 74 matching lines...) Expand 10 before | Expand all | Expand 10 after
207 OpenGL ES 2.0, you should stick with the Pepper APIs or pure OpenGL ES 2.0 calls 206 OpenGL ES 2.0, you should stick with the Pepper APIs or pure OpenGL ES 2.0 calls
208 described above. If you are porting an application that uses features not in 207 described above. If you are porting an application that uses features not in
209 OpenGL ES 2.0, consider using Regal. Regal is an open source library that 208 OpenGL ES 2.0, consider using Regal. Regal is an open source library that
210 supports many versions of OpenGL. Regal recently added support for Native 209 supports many versions of OpenGL. Regal recently added support for Native
211 Client. Regal forwards most OpenGL calls directly to the underlying graphics 210 Client. Regal forwards most OpenGL calls directly to the underlying graphics
212 library, but it can also emulate other calls that are not included (when 211 library, but it can also emulate other calls that are not included (when
213 hardware support exists). See <a class="reference external" href="http://www.alt devblogaday.com/2012/09/04/bringing-regal-opengl-to-native-client/">libregal</a> 212 hardware support exists). See <a class="reference external" href="http://www.alt devblogaday.com/2012/09/04/bringing-regal-opengl-to-native-client/">libregal</a>
214 for more info.</p> 213 for more info.</p>
215 </section><section id="use-the-pepper-api"> 214 </section><section id="use-the-pepper-api">
216 <h3 id="use-the-pepper-api">Use the Pepper API</h3> 215 <h3 id="use-the-pepper-api">Use the Pepper API</h3>
217 <p>Your code can call the Pepper <a class="reference external" href="https://dev elopers.google.com/native-client/pepperc/struct_p_p_b___open_g_l_e_s2">PPB_OpenG LES2</a> 216 <p>Your code can call the Pepper PPB_OpenGLES2 API directly, as with any Pepper
218 API directly, as with any Pepper interface. When you write in this way, each 217 interface. When you write in this way, each invocation of an OpenGL ES 2.0
219 invocation of an OpenGL ES 2.0 function must begin with a reference to the 218 function must begin with a reference to the Pepper interface, and the first
220 Pepper interface, and the first argument is the graphics context. To invoke the 219 argument is the graphics context. To invoke the function <code>glCompileShader</ code>,
221 function <code>glCompileShader</code>, your code might look like:</p> 220 your code might look like:</p>
222 <pre class="prettyprint"> 221 <pre class="prettyprint">
223 ppb_g3d_interface-&gt;CompileShader(graphicsContext, shader); 222 ppb_g3d_interface-&gt;CompileShader(graphicsContext, shader);
224 </pre> 223 </pre>
225 <p>This approach specifically targets the Pepper APIs. Each call corresponds to a 224 <p>This approach specifically targets the Pepper APIs. Each call corresponds to a
226 OpenGL ES 2.0 function, but the syntax is unique to Native Client, so the source 225 OpenGL ES 2.0 function, but the syntax is unique to Native Client, so the source
227 file is not portable.</p> 226 file is not portable.</p>
228 </section></section><section id="implementing-a-rendering-loop"> 227 </section></section><section id="implementing-a-rendering-loop">
229 <h2 id="implementing-a-rendering-loop">Implementing a rendering loop</h2> 228 <h2 id="implementing-a-rendering-loop">Implementing a rendering loop</h2>
230 <p>Graphics applications require a continuous frame render-and-redraw cycle that 229 <p>Graphics applications require a continuous frame render-and-redraw cycle that
231 runs at a high frequency. To achieve the best frame rate, is important to 230 runs at a high frequency. To achieve the best frame rate, is important to
232 understand how the OpenGL ES 2.0 code in a Native Client module interacts with 231 understand how the OpenGL ES 2.0 code in a Native Client module interacts with
233 Chrome.</p> 232 Chrome.</p>
234 <section id="the-chrome-and-native-client-processes"> 233 <section id="the-chrome-and-native-client-processes">
235 <h3 id="the-chrome-and-native-client-processes">The Chrome and Native Client pro cesses</h3> 234 <h3 id="the-chrome-and-native-client-processes">The Chrome and Native Client pro cesses</h3>
236 <p>Chrome is a multi-process browser. Each Chrome tab is a separate process that is 235 <p>Chrome is a multi-process browser. Each Chrome tab is a separate process that is
237 running an application with its own main thread (we&#8217;ll call it the Chrome main 236 running an application with its own main thread (we&#8217;ll call it the Chrome main
238 thread). When an application launches a Native Client module, the module runs in 237 thread). When an application launches a Native Client module, the module runs in
239 a new, separate sandboxed process. The module&#8217;s process has its own main t hread 238 a new, separate sandboxed process. The module&#8217;s process has its own main t hread
240 (the Native Client thread). The Chrome and Native Client processes communicate 239 (the Native Client thread). The Chrome and Native Client processes communicate
241 with each other using Pepper API calls on their main threads.</p> 240 with each other using Pepper API calls on their main threads.</p>
242 <p>When the Chrome main thread calls the Native Client thread (keyboard and mous e 241 <p>When the Chrome main thread calls the Native Client thread (keyboard and mous e
243 callbacks, for example), the Chrome main thread will block. This means that 242 callbacks, for example), the Chrome main thread will block. This means that
244 lengthy operations on the Native Client thread can steal cycles from Chrome, and 243 lengthy operations on the Native Client thread can steal cycles from Chrome, and
245 performing blocking operations on the Native Client thread can bring your app to 244 performing blocking operations on the Native Client thread can bring your app to
246 a standstill.</p> 245 a standstill.</p>
247 <p>Native Client uses callback functions to synchronize the main threads of the two 246 <p>Native Client uses callback functions to synchronize the main threads of the
248 processes. Only certain Pepper functions use callbacks; <a class="reference exte rnal" href="https://developers.google.com/native-client/pepperc/struct_p_p_b___g raphics3_d__1__0#a293c6941c0da084267ffba3954793497">SwapBuffers</a> 247 two processes. Only certain Pepper functions use callbacks; <a class="reference external" href="/native-client/pepper_stable/c/struct_p_p_b___graphics3_d__1__0# a293c6941c0da084267ffba3954793497">SwapBuffers</a>
249 is one.</p> 248 is one.</p>
250 </section><section id="swapbuffers-and-its-callback-function"> 249 </section><section id="swapbuffers-and-its-callback-function">
251 <h3 id="swapbuffers-and-its-callback-function"><code>SwapBuffers</code> and its callback function</h3> 250 <h3 id="swapbuffers-and-its-callback-function"><code>SwapBuffers</code> and its callback function</h3>
252 <p><code>SwapBuffers</code> is non-blocking; it is called from the Native Client thread and 251 <p><code>SwapBuffers</code> is non-blocking; it is called from the Native Client thread and
253 returns immediately. When <code>SwapBuffers</code> is called, it runs asynchrono usly on 252 returns immediately. When <code>SwapBuffers</code> is called, it runs asynchrono usly on
254 the Chrome main thread. It switches the graphics data buffers, handles any 253 the Chrome main thread. It switches the graphics data buffers, handles any
255 needed compositing operations, and redraws the screen. When the screen update is 254 needed compositing operations, and redraws the screen. When the screen update is
256 complete, the callback function that was included as one of <code>SwapBuffer</co de>&#8216;s 255 complete, the callback function that was included as one of <code>SwapBuffer</co de>&#8216;s
257 arguments will be called from the Chrome thread and executed on the Native 256 arguments will be called from the Chrome thread and executed on the Native
258 Client thread.</p> 257 Client thread.</p>
(...skipping 174 matching lines...) Expand 10 before | Expand all | Expand 10 after
433 2.0 implementation when you update a portion of a buffer (with 432 2.0 implementation when you update a portion of a buffer (with
434 <code>glSubBufferData</code> for example) the entire buffer must be reprocessed. To 433 <code>glSubBufferData</code> for example) the entire buffer must be reprocessed. To
435 avoid this problem, keep static and dynamic data in different buffers.</li> 434 avoid this problem, keep static and dynamic data in different buffers.</li>
436 <li><strong>Don&#8217;t call ``glDisable(GL_TEXTURE_2D)``.</strong> This is an O penGL ES 2.0 435 <li><strong>Don&#8217;t call ``glDisable(GL_TEXTURE_2D)``.</strong> This is an O penGL ES 2.0
437 error. Each time it is called, an error messages will appear in Chrome&#8217;s 436 error. Each time it is called, an error messages will appear in Chrome&#8217;s
438 <code>about:gpu</code> tab.</li> 437 <code>about:gpu</code> tab.</li>
439 </ul> 438 </ul>
440 </section></section></section> 439 </section></section></section>
441 440
442 {{/partials.standard_nacl_article}} 441 {{/partials.standard_nacl_article}}
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698