Added the Custom Effect of Sharpeness
@kvvasuu ya está trabajando en esto.
Desde el 15/8/2026.
Evaluación
Este issue todavía no se ha evaluado.
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>
- Lenguaje dominante
- TypeScript
- Estrellas
- 1.4k
- Forks
- 134
- Merge medio
- 4 min
- PR fusionados (30 d)
- 4
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de pmndrs/react-postprocessing
-
Dificultad 3/5 1-2 días Aptitud para principiantes 42/100
pmndrs/react-postprocessing#343 · 1 comentario ·
-
Dificultad 4/5 3-5 días Aptitud para principiantes 35/100
pmndrs/react-postprocessing#286 ·
-
Dificultad 3/5 1-2 días Aptitud para principiantes 35/100
pmndrs/react-postprocessing#280 · 2 comentarios · 1 reacción ·
-
Dificultad 4/5 3-5 días Aptitud para principiantes 25/100
pmndrs/react-postprocessing#240 · 1 comentario · 1 reacción ·
-
Integrate realism-effects Abiertoenhancement
Dificultad 5/5 Más de una semana Aptitud para principiantes 20/100
pmndrs/react-postprocessing#183 ·
Todos los issues de pmndrs/react-postprocessing
Issues similares
-
Type/Bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
OpenNSW/nsw-srilanka#497 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
0xMiden/bridge-portal#132 ·
-
react-doctor severity:warning tech-debt
Dificultad 1/5 Menos de una hora Aptitud para principiantes 88/100
digidem/comapeo-cloud-app#403 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100