如何在React Fiber项目中使用Bad TV Shader的ShaderPass

1. 安装依赖 #

首先安装适配React Three Fiber的后期处理库：

npm install @react-three/postprocessing
# 或使用yarn
yarn add @react-three/postprocessing

2. 定义Bad TV Shader #

创建一个BadTVShader.js文件，写入该Shader的核心代码：

export default {
  uniforms: {
    tDiffuse: { value: null },
    distortion: { value: 1.0 },
    distortion2: { value: 1.0 },
    speed: { value: 0.2 },
    rollSpeed: { value: 0.1 }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform float distortion;
    uniform float distortion2;
    uniform float speed;
    uniform float rollSpeed;
    varying vec2 vUv;
    
    float rand(vec2 co){
      return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
    }
    
    void main() {
      vec2 p = vUv;
      float time = mod(10000.0 + speed * 1000.0, 10000.0);
      float offset = rand(vec2(time, time)) * 2.0;
      offset = offset * offset * offset;
      offset = offset * 0.1;
      p.x = p.x + sin(p.y * 10.0 + time) * distortion * offset;
      p.y = p.y + sin(p.x * 10.0 + time) * distortion2 * offset;
      p.y = p.y + sin(time) * rollSpeed * offset;
      gl_FragColor = texture2D(tDiffuse, p);
    }
  `
};

3. 在React Three Fiber场景中集成 #

在你的场景组件中，通过EffectComposer组合渲染通道和自定义Shader通道：

import { Canvas } from '@react-three/fiber';
import { EffectComposer, RenderPass, ShaderPass } from '@react-three/postprocessing';
import BadTVShader from './BadTVShader';

function SceneContent() {
  return (
    <>
      {/* 这里放置你的3D场景元素（模型、灯光等） */}
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="hotpink" />
      </mesh>
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} />

      {/* 后期处理管道 */}
      <EffectComposer>
        <RenderPass />
        <ShaderPass
          shader={BadTVShader}
          renderToScreen={true}
          // 可选：动态调整Shader参数
          uniforms={{
            distortion: { value: 1.2 },
            speed: { value: 0.3 }
          }}
        />
      </EffectComposer>
    </>
  );
}

export default function App() {
  return (
    <Canvas>
      <SceneContent />
    </Canvas>
  );
}

核心要点 #

• @react-three/postprocessing的EffectComposer会自动绑定Canvas的渲染器，无需手动传入
• ShaderPass直接接收我们定义的Shader对象，替代原生Three.js的THREE.ShaderPass
• 通过uniforms属性可以实时调整Shader的效果参数
• renderToScreen={true}确保最终处理后的画面输出到屏幕

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