OES_standard_derivatives 扩展

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

OES_standard_derivatives 扩展是 WebGL API 的一部分，它添加了 GLSL 的导数函数 dFdx、dFdy 和 fwidth。

可以使用 WebGLRenderingContext.getExtension() 方法来访问 WebGL 扩展。有关更多信息，请参阅 WebGL 教程中的使用扩展。

注意：此扩展仅适用于 WebGL1 上下文。在 WebGL2 中，此扩展的功能默认在 WebGL2 上下文中可用。在 WebGL 2 中，常量可作为 gl.FRAGMENT_SHADER_DERIVATIVE_HINT 使用，并且需要 GLSL #version 300 es。

常量

此扩展公开了一个新常量，可用于 hint() 和 getParameter() 方法。

ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES: 一个 GLenum，用于指示 GLSL 内置函数：dFdx、dFdy 和 fwidth 的导数计算精度。

GLSL 内置函数

如果启用了此扩展，则可以在 GLSL 着色器代码中使用以下新函数：

genType dFdx(genType p)
genType dFdy(genType p)
genType fwidth(genType p)

dFdx(): 使用局部差分法，为输入参数 p 返回 x 方向的导数。
dFdy(): 使用局部差分法，为输入参数 p 返回 y 方向的导数。
fwidth(): 使用局部差分法，为输入参数 p 返回 x 和 y 方向导数的绝对值之和。即 abs(dFdx(p)) + abs(dFdy(p))。

dFdx() 和 dFdy() 通常用于估算用于程序化纹理抗锯齿的过滤器的宽度。

示例

启用扩展

gl.getExtension("OES_standard_derivatives");
gl.getExtension("EXT_shader_texture_lod");

避免纹理坐标环绕时出现伪影的着色器代码

html

<script type="x-shader/x-fragment">
  #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));
  }
</script>

规范

规范
WebGL OES_standard_derivatives Khronos 批准的扩展规范

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年4月22日⁩，由 MDN 贡献者进行修改。

在 GitHub 上查看此页面 • 报告此内容的错误