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

Posted 2023-02-27

【中文标题】在 Three.js 着色器上启用扩展

【英文标题】：Enabling an extension on a Three.js shader

【发布时间】：2012-06-19 18:20:42

【问题描述】：

如何？

到目前为止我的代码：

获得扩展：

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”转换为“float 的 2 分量向量” 错误：0:33：“dFdy”：找不到匹配的重载函数 错误：0:33：'='：无法从 'const mediump float' 转换为 '2-component vector of float'

阅读this issue on github后，我尝试了这个例子：From http://jsfiddle.net/VJca4/ I get these errors

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

【问题讨论】：

jsfiddle 缺少 vec2，并且 three.js 太旧了 - 请参阅 jsfiddle.net/VJca4/9 它完全有效）

【参考方案1】：

发现错误。你必须使用渲染器的 dom 元素：

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

【参考方案2】：

您也应该能够做到这一点：

renderer.context.getExtension('OES_standard_derivatives');

【讨论】：

你是如何使用它的？我有一个非常相似的问题。

我也有这个问题。我正在调用renderer.context.getExtension('GL_OES_standard_derivatives');，但是当我尝试从我的着色器代码创建ShaderMaterial 时，我得到ERROR: 0:114: 'GL_OES_standard_derivatives' : extension is disabled。如果我在第一行使用 #extension GL_OES_standard_derivatives : enable 在常规 webgl 中编译着色器，它可以工作。

似乎在当前的three.js代码库中执行此操作的方法是在创建时在ShaderMaterial中设置derivatives = true。

MyShaderMaterial.extensions.derivatives = true;自 r88 起