@react-three/postprocessing是否有锐化效果？如何在React中添加自定义锐化效果？

一、是否内置锐化效果？ #

@react-three/postprocessing本身没有提供专门的内置锐化效果，但它的底层依赖postprocessing库支持通过自定义着色器快速实现锐化，也可以通过组合现有Pass间接实现类似效果（最直接高效的方式还是自定义ShaderPass）。

二、添加自定义锐化效果的步骤 #

1. 确认依赖安装 #

如果项目还未安装相关依赖，先执行：

npm install @react-three/fiber @react-three/postprocessing postprocessing @react-three/drei

（@react-three/drei的shaderMaterial可以简化自定义着色器材质的创建，不用的话也可以手动编写材质，但用它能减少冗余代码）

2. 编写自定义锐化着色器 #

用shaderMaterial创建带锐化逻辑的材质，核心是通过片段着色器的卷积运算实现锐化：

import { shaderMaterial } from '@react-three/drei';

const SharpenMaterial = shaderMaterial(
  { amount: 1.5 }, // 可调节的锐化强度参数
  // 顶点着色器：全屏渲染通用逻辑
  `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
  `,
  // 片段着色器：3x3卷积核实现锐化
  `
  uniform sampler2D tDiffuse;
  uniform float amount;
  varying vec2 vUv;

  void main() {
    vec2 texelSize = 1.0 / vec2(textureSize(tDiffuse, 0));
    // 获取原纹理颜色
    vec4 baseColor = texture2D(tDiffuse, vUv);
    // 锐化计算：中心像素权重为5，上下左右四个像素权重各为-1
    vec4 sharpened = baseColor * 5.0;
    sharpened -= texture2D(tDiffuse, vUv + vec2(texelSize.x, 0.0));
    sharpened -= texture2D(tDiffuse, vUv - vec2(texelSize.x, 0.0));
    sharpened -= texture2D(tDiffuse, vUv + vec2(0.0, texelSize.y));
    sharpened -= texture2D(tDiffuse, vUv - vec2(0.0, texelSize.y));
    // 混合原颜色与锐化结果，通过amount控制锐化强度
    gl_FragColor = mix(baseColor, sharpened, amount);
  }
  `
);

3. 集成到EffectComposer #

在3D场景中，将自定义的锐化ShaderPass添加到EffectComposer中：

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

function Your3DScene() {
  return (
    <>
      {/* 这里放置你的3D内容，比如模型、灯光等 */}
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="hotpink" />
      </mesh>
      <ambientLight intensity={0.5} />
      <directionalLight position={[3, 3, 3]} />
    </>
  );
}

export default function App() {
  return (
    <Canvas>
      <Your3DScene />
      <EffectComposer>
        <ShaderPass shader={SharpenMaterial} />
      </EffectComposer>
    </Canvas>
  );
}

4. 动态调整锐化强度 #

你可以直接修改参数或用状态动态控制锐化程度：

import { useState } from 'react';

// ...
function App() {
  const [sharpenAmount, setSharpenAmount] = useState(1.5);
  return (
    <Canvas>
      <Your3DScene />
      <EffectComposer>
        <ShaderPass shader={SharpenMaterial} uniforms={{ amount: { value: sharpenAmount } }} />
      </EffectComposer>
      {/* 添加滑块实时调整锐化强度 */}
      <div style={{ position: 'absolute', top: 20, left: 20, zIndex: 1 }}>
        <input
          type="range"
          min="0"
          max="3"
          step="0.1"
          value={sharpenAmount}
          onChange={(e) => setSharpenAmount(parseFloat(e.target.value))}
        />
      </div>
    </Canvas>
  );
}

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