| OLD | NEW |
| 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 Loading... |
| 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 "requirements": { | 101 "requirements": { |
| 103 "3D": { | 102 "3D": { |
| 104 "features": ["webgl"] | 103 "features": ["webgl"] |
| 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’s driver is deficient, the ap
p won’t | 113 <p>If the Web Store determines that the user’s driver is deficient, the ap
p won’t |
| 115 appear on the store’s tile display. However, it will appear in store searc
h | 114 appear on the store’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 “This application is not supported on this computer. Installation
has | 118 message “This application is not supported on this computer. Installation
has |
| 120 been disabled.”</p> | 119 been disabled.”</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’s easy if ther
e is a | 127 code should describe the issue as clearly as possible. That’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&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&answer=120294
6">how to do updates</a>.</p> |
| 132 <p>If a user can’t update the driver, or their problem persists, be sure t
o gather | 131 <p>If a user can’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 Loading... |
| 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->CompileShader(graphicsContext, shader); | 222 ppb_g3d_interface->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’ll call it the Chrome
main | 236 running an application with its own main thread (we’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’s process has its own main t
hread | 238 a new, separate sandboxed process. The module’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>‘s | 255 complete, the callback function that was included as one of <code>SwapBuffer</co
de>‘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 Loading... |
| 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’t call ``glDisable(GL_TEXTURE_2D)``.</strong> This is an O
penGL ES 2.0 | 435 <li><strong>Don’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’s | 436 error. Each time it is called, an error messages will appear in Chrome’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}} |
| OLD | NEW |