全部专题

Shadertoy 的 iChannel0 从哪里来?把输入图片绑定到 Shader

iChannel0 是运行环境定义的采样器名称,并不会自动关联图片。需要加载纹理、绑定到同名 uniform,并与着色器中的采样器类型匹配。先用带文字和箭头的测试图检查绑定、方向与过滤方式,能更容易看出输入问题。

先固定问题

iChannel0 是宿主约定的采样器名字,不会自动关联一张图。移植时必须加载图片,把纹理对象放进同名 uniform,再保证 shader 声明的类型一致。最小测试只返回一张带字和箭头的图片,这样能同时检查绑定、坐标方向和过滤。

关键代码

const texture=new THREE.TextureLoader().load('/fixture.png');
texture.wrapS=texture.wrapT=THREE.ClampToEdgeWrapping;
const uniforms={iChannel0:{value:texture}};
// In the fragment shader:
// uniform sampler2D iChannel0;
// gl_FragColor=texture2D(iChannel0,vUv);

按顺序验证

先让采样坐标就是 vUv,确认整图显示,再加入像素化或折射位移。按导入器提示把 iChannel0 映射到目标采样器,而不是只改 GLSL 变量名。

适用范围和常见错误

samplerCube、视频帧、音频数据和 Buffer A 都不是普通静态二维图片。它们需要各自的上传与更新流程。

继续实验

参考

官方文档

运行相关示例