WebGL中启用GL_OES_standard_derivatives扩展使用fwidth报错如何解决

1. 修正扩展指令位置 #

GLSL规范要求所有#extension指令必须放在着色器的最顶部，仅可排在#version声明之后，不能出现在任何自定义宏定义、业务代码之前。你当前将扩展声明放在了GL_ES分支内部且前置了自定义宏定义，触发了位置错误警告，甚至会导致扩展被误判为不支持。
正确的着色器开头写法如下：

// 如有#version声明必须放在第一行
#version 100

// 扩展声明放在所有其他非version预处理指令、业务代码之前
#extension GL_OES_standard_derivatives : enable

#ifndef GL_ES
#define lowp
#define mediump
#define highp
#endif

2. JS端主动启用上下文扩展 #

仅在着色器内声明扩展无效，需要在WebGL上下文初始化阶段主动启用对应扩展：

const gl = canvas.getContext('webgl');
const hasDerivExt = gl.getExtension('OES_standard_derivatives');
if (!hasDerivExt) {
  // 此处可添加自定义降级逻辑，比如替换为低精度效果
  console.warn('当前设备不支持标准导数扩展');
}

如果你使用的是WebGL2环境，OES_standard_derivatives属于核心内置特性，不需要额外调用getExtension，也不需要在着色器中添加扩展声明，直接使用fwidth即可。 #

3. 异常兼容方案 #

如果扩展支持但仍识别不到fwidth，可以手动添加等效宏定义：

#define fwidth(value) (abs(dFdx(value)) + abs(dFdy(value)))

如果设备确实不支持该扩展，可根据业务场景降级使用固定阈值替代fwidth的计算结果。

内容的提问来源于stack exchange，提问作者Andrew Hordynsky