Added the Custom Effect of Sharpeness

Offen

#253 erstellt am 09.11.2023 0 Kommentare 4 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

@kvvasuu arbeitet bereits daran.

Seit 15.8.2026.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Beschreibung

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>

Vorherrschende Sprache: TypeScript
Sterne: 1.4k
Forks: 134
Ø Merge: 4 Min.
Gemergte PRs (30 T.): 4

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus pmndrs/react-postprocessing

Three.js bloom issue with Next.js 14 Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 42/100

pmndrs/react-postprocessing#343 · 1 Kommentar · Erstellt am 25.9.2025
Using Custom Effect with Bloom, Bloom doesn't work Offen

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100

pmndrs/react-postprocessing#286 · Erstellt am 16.6.2024
[Bug] - N8AO works incorrectly with adaptiveDpr Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 35/100

pmndrs/react-postprocessing#280 · 2 Kommentare · 1 Reaktion · Erstellt am 23.4.2024
Bloom Filter breaking Scene in Chrome - Cannot read properties of null (reading 'alpha') Offen

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 25/100

pmndrs/react-postprocessing#240 · 1 Kommentar · 1 Reaktion · Erstellt am 02.10.2023
Integrate realism-effects Offen

enhancement

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 20/100

pmndrs/react-postprocessing#183 · Erstellt am 12.3.2023

Alle Issues in pmndrs/react-postprocessing