Question

第一次海报...... 我已经通过SO看着threejs / shadertoy的东西，但是没有能够找到这个特殊的问题。我希望有人可以提供帮助。

我试图将这个shadowrtoy：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了解详情。

尝试实现ShaderToy时出现Threejs错误

1 个答案: