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 上檢視此頁面 • 報告此內容的錯誤