当尝试实现ShaderToy时，出现了3个错误

Threejs error when trying to implement ShaderToy

本文关键字：3个 错误 实现 ShaderToy      更新时间：2023-09-26

第一次海报…我一直在看三ejs/shadertoy的东西，但还没有能够找到这个特殊的问题。我希望有人能帮忙。

我试图将这个shadertoy:https://www.shadertoy.com/view/ltfXWr#放入一个简单的html文件中，并使用三个ejs来显示它。我遵循了这背后的一般想法:如何在three.js中实现ShaderToy着色器?
并在我的片段着色器的顶部添加了一些制服，以弥补Shadertoy使用的独特的东西(iResolution, immouse等)。除此之外，我还没有调整任何代码，从你可以看到的shadertoy源。

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

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



提前感谢!

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

你需要改变这些:

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

查看更多信息

相关文章：