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 |