pmndrs / pmndrs/react-postprocessing

Added the Custom Effect of Sharpeness

Abierto
#253 0 comentarios 4 reacciones 1 asignado Ver en GitHub

@kvvasuu ya está trabajando en esto.

Desde el 15/8/2026.

enhancement
Lenguaje dominante
TypeScript
Estrellas
1.4k
Forks
134
Merge medio
4 min
PR fusionados (30 d)
4

Descripción

Figured out the sharpenss effect by myself, If anyone who needs it, here is the code
import React, { forwardRef, useMemo } from 'react'
import { SharpEffect } from './sharpness'
export const Sharpeness = forwardRef(({ sharpness = 5 }: { sharpness: number }, ref) => {
  const effect = useMemo(() => new SharpEffect(sharpness), [sharpness])
  return <primitive ref={ref} object={effect} dispose={null} />
})
import { Effect } from 'postprocessing'
import { Uniform, Vector2 } from 'three'
import fragmentShader from './sharpness.frag'

export class SharpEffect extends Effect {
  constructor(sharpness = 1.0) {
    super('SharpEffect', fragmentShader, {
      uniforms: new Map([
        ['d', new Uniform(0)],
        ['iResolution', new Uniform(new Vector2())],
      ]),
    })

    this.resolution = new Vector2()
    this.sharpness = sharpness
  }

  get sharpness() {
    return this._Sharpness
  }

  set sharpness(value) {
    this._Sharpness = value
    this.setSize(this.resolution.width, this.resolution.height)
  }

  getSharpness() {
    return this.sharpness
  }

  setSharpness(value) {
    this.sharpness = value
  }

  setSize(width: number, height: number) {
    const { resolution } = this
    resolution.set(width, height)
    this.uniforms.get('iResolution').value.x = resolution.x
    this.uniforms.get('iResolution').value.y = resolution.y
    this.uniforms.get('d').value = this.sharpness
  }
}
    

glsl sharpen shader

uniform float d; 
uniform vec2 iResolution;
 
void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
    float dx = d / iResolution.x;
    float dy = d / iResolution.y;
    vec4 sum = vec4(0.0);
    sum += -1. * texture2D(inputBuffer, uv + vec2( -1.0 * dx , 0.0 * dy));
    sum += -1. * texture2D(inputBuffer, uv + vec2( 0.0 * dx , -1.0 * dy));
    sum += 5. * texture2D(inputBuffer, uv + vec2( 0.0 * dx , 0.0 * dy));
    sum += -1. * texture2D(inputBuffer, uv + vec2( 0.0 * dx , 1.0 * dy));
    sum += -1. * texture2D(inputBuffer, uv + vec2( 1.0 * dx , 0.0 * dy));
    outputColor = sum;
}
<EffectComposer>
     <Sharpeness sharpness={value} />
 </EffectComposer>

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.