嘗試實施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等）。除此之外，我還沒有調整你可以看到的有關coolrtoy源碼的任何代碼。

當我運行代碼，我收到以下錯誤：

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以獲取更多信息。