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.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

enhancement
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>
Lenguaje dominante
TypeScript
Estrellas
1.4k
Forks
134
Merge medio
4 min
PR fusionados (30 d)
4

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.

Más de pmndrs/react-postprocessing

Todos los issues de pmndrs/react-postprocessing

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.