在Three.js着色器上启用扩展

Question

如何在Three.js着色器上启用扩展(extension)？

我的目前的代码：

获取扩展(extension)：

var domElement = document.createElement( 'canvas' );
var gl = domElement.getContext('webgl') || domElement.getContext('experimental-webgl');
gl.getExtension('OES_standard_derivatives');

在我的着色器上：

fragmentShader: [
    "#extension GL_OES_standard_derivatives : enable",
    "code..."
]...

控制台输出：
警告：0:26：不支持扩展'GL_OES_standard_derivatives'
错误：0:32：未找到匹配的重载函数'dFdx'
错误：0:32：'='：无法将'const mediump float'转换为'2-component vector of float'
错误：0:33：未找到匹配的重载函数'dFdy'
错误：0:33：'='：无法将'const mediump float'转换为'2-component vector of float'

阅读了github上的问题后，我尝试了这个示例：http://jsfiddle.net/VJca4/，结果出现了以下错误：

警告：0:27：不支持扩展'GL_OES_standard_derivatives'
错误：0:30：'='：无法将'const mediump float'转换为'2-component vector of float'
错误：0:31：未找到匹配的重载函数'dFdx'
错误：0:31：'='：无法将'const mediump float'转换为'2-component vector of float'

- frank

---

jsfiddle缺少vec2，而three.js版本太旧了 - 请参见http://jsfiddle.net/VJca4/9/ 它完全可以工作) - makc

Answer 1

你也应该能够这样做：

renderer.context.getExtension('OES_standard_derivatives');

- mrdoob

---

你是如何将这个应用起来的？我有一个非常类似的问题。 - Hobbes

我也遇到了这个问题。我正在调用 renderer.context.getExtension('GL_OES_standard_derivatives');，但是当我尝试从我的着色器代码创建 ShaderMaterial 时，我会得到 ERROR: 0:114: 'GL_OES_standard_derivatives'：扩展已禁用 的错误。如果我在常规的webgl中编译带有 #extension GL_OES_standard_derivatives：enable 的第一行的着色器代码，则可以正常工作。 - matth

在当前的three.js代码库中，似乎通过在创建时在ShaderMaterial中设置derivatives = true来实现这个目的。 - matth

从r88开始，我的ShaderMaterial.extensions.derivatives = true; - Aydin K.

Answer 2

发现了错误。您需要使用渲染器的DOM元素：

var gl = renderer.domElement.getContext('webgl') ||
            renderer.domElement.getContext('experimental-webgl');
gl.getExtension('OES_standard_derivatives');

- frank