Javascript 转换和使用Shadertoy'；3.js脚本中的iResolution变量

我正在将a转换为一个本地的Three.js项目，但无法对其进行渲染。你可以在这里试试

我认为问题可能在于如何转换

iResolution

变量。据我所知，内置Shadertoy全局变量

iResolution

包含窗口的像素尺寸。以下是如何在中使用

iResolution

：

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

iResolution

：

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

1）将窗口尺寸加载为矢量2，并将其作为统一的

vec2解决方案发送到着色器中

：

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

此解决方案最接近于的设计，但遗憾的是没有渲染

2）第二种方法来自此，并将

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的错误。谢谢你看

首先，您甚至不需要进行此划分。如果使用全屏四元（

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.);
}

---

如果你做了一个

新的三平面几何（2,2,1,1）

这应该渲染为全屏四元体

你能制作一个可以修改的js小提琴吗？将你的着色器更改为void main（）{gl_FragColor=vec4（1,0,0,1）；}。你看到红色了吗？如果不是，则问题与片段着色器无关。