Shadertoy转Three.js无渲染输出问题求助

一、修复片段着色器编译错误 #

你遇到的编译错误核心是输出变量不匹配和变量名拼写错误，按以下步骤修正：

1. 替换着色器入口函数
   Shadertoy的入口是void mainImage(out vec4 fragColor, in vec2 fragCoord)，而Three.js的片段着色器入口是void main()，需要删除原函数的参数，改为Three.js的标准入口。
2. 修正输出变量
   • 若使用WebGL1（THREE.WebGLRenderer）：Three.js使用gl_FragColor（注意大写F）作为输出变量，而非你代码里的小写gl_fragColor。将所有gl_fragColor替换为gl_FragColor。
   • 若使用WebGL2（THREE.WebGL2Renderer）：需要在着色器开头声明输出变量：

     out vec4 fragColor;
     

     然后在main()函数中直接赋值给fragColor。
3. 检查赋值维度匹配
   错误提示“维度不匹配”说明你可能将vec4类型的颜色值赋值给了float类型变量。检查第252行的代码，确保赋值的目标是正确的输出变量（gl_FragColor或fragColor），而非某个常量或float变量。

二、解决编译后无渲染输出问题 #

编译通过但无输出，通常是Uniform变量未正确传递或坐标转换错误，逐一排查：

• 传递Shadertoy内置Uniform
  Shadertoy的iTime、iResolution等变量需要手动作为Uniform传递给Three.js材质：

  const shaderMaterial = new THREE.ShaderMaterial({
    vertexShader: `
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: `
      precision highp float;
      uniform float iTime;
      uniform vec2 iResolution;
      varying vec2 vUv;
  
      // 这里粘贴Shadertoy的核心逻辑（去掉mainImage函数）
      void main() {
        vec2 fragCoord = vUv * iResolution;
        // 调用原Shadertoy的颜色计算逻辑，比如vec4 color = ...;
        gl_FragColor = color;
      }
    `,
    uniforms: {
      iTime: { value: 0 },
      iResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
    }
  });
  

  并在动画循环中更新iTime：

  const clock = new THREE.Clock();
  function animate() {
    requestAnimationFrame(animate);
    shaderMaterial.uniforms.iTime.value += clock.getDelta();
    renderer.render(scene, camera);
  }
  

• 坐标系统转换
  Shadertoy的fragCoord是屏幕像素坐标，Three.js的vUv范围是(0,0)到(1,1)，需要转换为Shadertoy的坐标：vec2 fragCoord = vUv * iResolution;。如果直接用gl_FragCoord.xy，需要考虑设备像素比：vec2 fragCoord = gl_FragCoord.xy / window.devicePixelRatio;。
• 确保几何体与相机设置正确
  使用覆盖全屏的平面几何体和正交相机：

  const scene = new THREE.Scene();
  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
  const plane = new THREE.PlaneGeometry(2, 2);
  scene.add(new THREE.Mesh(plane, shaderMaterial));
  

• 调试纯色输出
  在片段着色器的main()开头添加纯色赋值，验证渲染管线是否正常：

  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 输出红色
  

  如果能看到红色，说明问题出在Shadertoy的核心逻辑适配，否则检查材质、几何体、相机的设置。

内容的提问来源于stack exchange，提问作者lucidplatypus42