尝试实现 ShaderToy 时出现 Threejs 错误

Question

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

我正在尝试将这个 shadertoy:https://www.shadertoy.com/view/ltfXWr# 带入一个简单的 html 文件并使用threejs 来显示它。我遵循了这背后的总体思路：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

我只是不完全确定此时该做什么。我对很多东西都很陌生，很可能是我遗漏了一些明显的东西。

我的（不起作用，但你可以看到错误）codepen 在这里：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了解更多信息。