在Three.js脚本中转换和使用Shadertoy的iResolution变量

Question

我将Shadertoy转换为本地Three.js项目，并且无法将其渲染。您可以在此处试用full snippet。

我认为问题可能在于我如何转换iResolution变量。据我了解，内置的Shadertoy全局变量iResolution包含窗口的像素尺寸。以下是original Shadertoy中使用iResolution的方式：

vec2 uv = fragCoord.xy / iResolution.y;
vec2 ak = abs(fragCoord.xy / iResolution.xy-0.5);

在将此Shadertoy转换为基于Three.js的本地脚本时，我尝试了两种转换iResolution的方法：

1）将窗口尺寸加载为Vector2并将其作为制服vec2 uResolution发送到着色器中：

vec2 uv = gl_FragCoord.xy / uResolution.y;
vec2 ak = abs(gl_FragCoord.xy / uResolution.xy-0.5);

此解决方案最接近original Shadertoy的设计，但没有任何渲染。

2）第二种方法来自此SO Answer并将uv坐标转换为xy绝对坐标：

vec2 uvCustom = -1.0 + 2.0 *vUv;
vec2 ak = abs(gl_FragCoord.xy / uvCustom.xy-0.5);

在这篇文章中，我承认我并不完全理解它是如何工作的，而我在第二行中对uvCustom的使用可能不正确。

最后，除了我使用的Three.js CameraHelper之外，屏幕上没有任何内容呈现。否则，屏幕为黑色，控制台显示Javascript或WebGL没有错误。谢谢你看看！

Answer 1

对于初学者来说，你甚至不需要进行这种划分。如果您使用的是全屏四边形（PlaneBufferGeometry），则可以仅使用uv进行渲染：

vec2 uv = gl_FragCoord.xy / uResolution.y;
vec2 vUv = varyingUV;

uv == vUv; //sort of

您的顶点着色器可能看起来像这样

varying vec2 varyingUV;

void main(){
  varyingUV = uv;
  gl_Position = vec4( position.xy , 0. , 1.);
}

如果您制作new THREE.PlaneGeometry(2,2,1,1);，则应将其渲染为全屏四边形