尝试实现 ShaderToy 时出现 Threejs 错误

Question

第一次海报... 我已经通过 SO 查看 threejs/shadertoy 的东西，但未能找到这个特定问题。我希望有人能提供帮助。

我正在尝试带上这个着色玩具：https://www.shadertoy.com/view/ltfXWr# into a simple html file and use threejs to display it. I followed the general idea behind this: How to implement a ShaderToy shader in three.js?
并在我的片段着色器顶部添加了一些制服，以弥补 Shadertoy 使用的独特内容（iResolution、iMouse 等）。除此之外，我没有调整任何您可以从 shadertoy 源代码中看到的代码。

当我运行代码时，我收到以下错误：

THREE.WebGLProgram: shader error:  0 gl.VALIDATE_STATUS false gl.getProgramInfoLog invalid shaders  ERROR: 0:168: 'GL_OES_standard_derivatives' : extension is disabled<br>
ERROR: 0:188: 'xy' :  field selection requires structure, vector, or matrix on left hand side <br>
ERROR: 0:188: 'y' :  field selection requires structure, vector, or matrix on left hand side <br>
ERROR: 0:188: 'res' : redefinition <br>
ERROR: 0:189: 'y' :  field selection requires structure, vector, or matrix on left hand side <br>
ERROR: 0:189: 'uv' : redefinition <br>
ERROR: 0:191: 'xy' :  field selection requires structure, vector, or matrix on left hand side <br>
ERROR: 0:191: 'xy' :  field selection requires structure, vector, or matrix on left hand side <br>
ERROR: 0:191: 'constructor' : not enough data provided for construction

我只是不确定此时该做什么。我对其中的很多东西都不熟悉，很可能是我遗漏了一些明显的东西。

我的（没有运行，但你可以看到错误）代码笔在这里：http://codepen.io/ikimono/pen/RWVJYv

提前致谢！

Answer 1

重定义错误意味着您已经定义了一个变量。只有在定义变量时才需要声明变量的类型。

您需要更改这些：

vec2 uv = -1.0 + 2.0 *vUv;
vec2 res = -1.0 + 2.0 *vUv;
vec2 res = iResolution.xy / iResolution.y;
vec2 uv = fragCoord.xy / iResolution.y;

致这些：

vec2 uv = -1.0 + 2.0 *vUv;
vec2 res = -1.0 + 2.0 *vUv;
res = iResolution.xy / iResolution.y;
uv = fragCoord.xy / iResolution.y;

编辑：

对于扩展错误，这意味着您需要启用GL_OES_standard_derivatives扩展，如果您的显卡支持的话。要检查扩展是否可用，您可以使用它来将可用扩展列表打印到控制台：

console.log(gl.getSupportedExtensions());

其中 gl 是您的 WebGL 上下文。

如果扩展有效可用，您可以通过调用以下命令启用它：

gl.getExtension('OES_texture_float');

并在着色器的开头添加：

#ifdef GL_OES_standard_derivatives
    #extension GL_OES_standard_derivatives : enable
#endif

查看 this page 了解更多信息。

尝试实现 ShaderToy 时出现 Threejs 错误

Threejs error when trying to implement ShaderToy

javascript

glsl

webgl