Example template for a custom postprocessing effect.

CustomEffect.js

import * as React from 'react';
import { Uniform } from 'three';
import { Effect } from 'postprocessing';

const fragmentShader = `
  void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
    if (uv.y < .5) discard;
	  outputColor = vec4(vec3(average(inputColor.rgb)), inputColor.a);
  }`;

let _uParam;

// Effect implementation
class CustomEffectImpl extends Effect {
  constructor({
    // Add custom params here
    param = 0.1,
  } = {}) {
    super('CustomEffect', fragmentShader, {
      uniforms: new Map([['param', new Uniform(param)]]),
    });

    _uParam = param;
  } 
  
  // WARNING: You need to comment this line out if you're updating the effect via useFrame
  update(renderer, inputBuffer, deltaTime) {
    this.uniforms.get('param').value = _uParam;
  }
}

// Effect component
export const CustomEffect = React.forwardRef(function Custom(
  { param },
  ref,
) {
  const effect = React.useMemo(() => new CustomEffectImpl(param), [param]);
  return <primitive ref={ref} object={effect} dispose={null} />;
});