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

【问题标题】：Converting and using Shadertoy's iResolution variable in a Three.js script在 Three.js 脚本中转换和使用 Shadertoy 的 iResolution 变量
【发布时间】：2019-12-17 22:47:18
【问题描述】：

我正在将 Shadertoy 转换为本地 Three.js 项目，但无法渲染。您可以在这里试用full snippet。

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

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 没有错误。感谢您的观看！

【问题讨论】：

可以做一个可以修改的js fiddle吗？
将着色器更改为 void main() { gl_FragColor = vec4(1,0,0,1); }。你看到红色了吗？如果不是，则问题与您的片段着色器无关。

标签： javascript three.js glsl shader

【解决方案1】：

对于初学者，你甚至不需要做这个除法。如果您使用的是全屏四边形 (PlaneBufferGeometry)，则可以仅使用 uvs 渲染它：

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);，它应该呈现为全屏四边形

【讨论】：