请求协助将ShaderToy着色器转换为Three.js兼容的WebGL着色器

我帮你排查了原Shader的问题，主要是语法错误和Three.js与ShaderToy的API差异导致的白屏，下面是修复后的完整代码和问题解析：

原代码的核心问题 #

• 宏定义#define F的表达式不完整，缺少闭合括号，直接导致编译失败
• uniform vec2 u_resolution的定义位置错误，且矩阵初始化语法混乱（元素格式和分隔符使用错误）
• 错误地直接修改gl_FragColor来进行中间计算，不符合WebGL常规写法，容易引发逻辑混乱
• min、pow等函数的参数传递完全不符合语法要求，比如嵌套括号不匹配、参数数量不足

修复后的Three.js兼容着色器 #

Three.js需要明确的顶点着色器（ShaderToy默认省略了这部分），先看顶点着色器：

varying vec2 vUv;

void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

再看修复后的片元着色器：

#ifdef GL_ES
precision mediump float;
#endif

#define F length(.5 - fract(gl_FragCoord.xyw * mat3(-2., -1., 2., 3., -2., 1., 1., 2., 2.)))

uniform vec2 u_resolution;

void main() {
    vec2 p = gl_FragCoord.xy / u_resolution.xy;
    // 用临时变量存储中间计算结果，避免直接修改gl_FragColor
    vec4 fragColor = vec4(p * (F + .2) * .1, 0.0, 0.0);
    // 修正min和pow的语法，确保参数数量和类型正确
    fragColor = pow(min(min(fragColor, vec4(F * .4)), vec4(F * .3)), vec4(7.)) * 25. + vec4(0., .35, .5, 1.);
    gl_FragColor = fragColor;
}

关键修复说明 #

1. 宏定义修正：补全了#define F的矩阵乘法表达式和闭合括号，确保语法合法
2. 中间变量替换：引入临时变量fragColor处理中间计算，避免直接修改输出变量gl_FragColor导致的逻辑错误
3. 函数语法修复：修正了min的嵌套写法（每个min必须接收两个参数），同时给pow补充了正确的参数数量（底数和指数）
4. 矩阵语法修正：给矩阵的每个数值添加小数点，确保是浮点类型，避免整数与浮点数的类型不匹配问题
5. 顶点着色器补充：Three.js要求必须提供顶点着色器，这里的顶点着色器负责传递UV坐标和处理顶点位置（虽然当前片元着色器主要用gl_FragCoord，但顶点着色器是必填项）

在Three.js中使用的注意事项 #

你需要在Three.js的材质中定义u_resolution uniform，并实时更新为画布尺寸：

// 假设已经创建了ShaderMaterial实例
const material = new THREE.ShaderMaterial({
    vertexShader: 你的顶点着色器代码,
    fragmentShader: 你的片元着色器代码,
    uniforms: {
        u_resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
    }
});

// 监听窗口大小变化，更新分辨率和渲染尺寸
window.addEventListener('resize', () => {
    material.uniforms.u_resolution.value.set(window.innerWidth, window.innerHeight);
    renderer.setSize(window.innerWidth, window.innerHeight);
});

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