Revision 1018836 of OES_standard_derivatives

<div>{{APIRef("WebGL")}}</div>

<p>The <code><strong>OES_standard_derivatives</strong></code> extension is part of the <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> and adds the GLSL derivative functions <code>dFdx</code>, <code>dFdy</code>, and <code>fwidth</code>.</p>

<p>WebGL extensions are available using the {{domxref("WebGLRenderingContext.getExtension()")}} method. For more information, see also <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Using Extensions</a> in the <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a>.</p>

<div class="note">
<p><strong>Availability:</strong> This extension is only available to {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} contexts. In {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}, the functionality of this extension is available on the WebGL2 context by default. In WebGL 2, the constant is available as <code>gl.FRAGMENT_SHADER_DERIVATIVE_HINT</code> and it requires GLSL <code>#version 300 es</code>.</p>
</div>

<h2 id="Constants">Constants</h2>

<p>This extension exposes one new constant, which can be used in the {{domxref("WebGLRenderingContext.hint()", "hint()")}} and&nbsp;{{domxref("WebGLRenderingContext.getParameter()", "getParameter()")}} methods.</p>

<dl>
 <dt><code>ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES</code></dt>
 <dd>A {{domxref("Glenum")}} indicating the accuracy of the derivative calculation for the GLSL built-in functions: <code>dFdx</code>, <code>dFdy</code>, and <code>fwidth</code>.</dd>
</dl>

<h2 id="GLSL_built-in_functions">GLSL built-in functions</h2>

<p>The following new functions can be used in GLSL shader code, if this extension is enabled:</p>

<pre class="brush: cpp">
genType dFdx(genType)
genType dFdy(genType)
genType fwidth(genType)
</pre>

<h2 id="Examples">Examples</h2>

<p>Enabling the extensions:</p>

<pre class="brush: js">
gl.getExtension("OES_standard_derivatives");
gl.getExtension("EXT_shader_texture_lod");</pre>

<p>Shader code that avoids artifacts when wrapping texture coordinates:</p>

<pre class="brush: html">
&lt;script type="x-shader/x-fragment"&gt;
#extension GL_EXT_shader_texture_lod : enable
#extension GL_OES_standard_derivatives : enable

uniform sampler2D myTexture;
varying vec2 texcoord;

void main(){
  gl_FragColor = texture2DGradEXT(myTexture, mod(texcoord, vec2(0.1, 0.5)), 
                                  dFdx(texcoord), dFdy(texcoord));
}
&lt;/script&gt;</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('OES_standard_derivatives', '', 'OES_standard_derivatives')}}</td>
   <td>{{Spec2('OES_standard_derivatives')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(10)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("WebGLRenderingContext.getExtension()")}}</li>
 <li>{{domxref("EXT_shader_texture_lod")}}</li>
</ul>