使用WebGL时，遇到dFdx不能使用的解决方法

使用WebGL时，遇到dFdx不能使用的解决方法
需要初始化时，在
var gl = canvas.getContext('webgl');
后加上
gl.getExtension('OES_standard_derivatives');
以及在片元着色器开头加上
#extension GL_OES_standard_derivatives : enable

对于dFdx、dFdy的理解
从网上转载一篇文章，讲的比较清楚
转自：http://blog.csdn.net/lsccsl/article/details/45147653
笔者更倾向认为这是一个glsl预编译时处理的一个宏,类似c语言的sizeof
the opengl shading language 4.4 是这么描述这两个函数的:
Returns the derivative in x using local differencing for the input argument p.
这里的p,是一个变量,如声明为 varying 的变量，或者是main函数里声明的变量,如:

main
{
    vec3 var = gl_TexCoord[0].xyz;
    vec3 var1 = vec3(0, 0, 0);
}

var 和 gl_TexCoord[0] 均可作为 dFdx的参数,
如果是uniform变量,为dFdx dFdy返回值始终为0. 另外,值不会变的变量,如 dFdx(var1) 就会返回0值
直观地说，dFdx(var) 就是当屏幕坐标x改变1时, 当前var各个分量 x y z会变化多少.
同理dFdx(gl_TexCoord[0].xyz)

这两个函数的意义
假设我们画一个矩形R,总共有4个顶点,那么顶点着色器会进行4次, gl_TexCoord[0]在顶点着色器会有4个值
假设矩形R映射到屏幕上总共有16个像素(一行4个),
片元着色器被调用16次
gl_TexCoord[0]会有16个取值,在片元着色器中被插值
dFdx(gl_TexCoord[0].xyz) 表示每个像素点之间x y z 分量的差异,类似于求导