Added the Custom Effect of Sharpeness

Đang mở
#253 0 bình luận 4 reaction 1 người được giao Xem trên GitHub

@kvvasuu đang làm issue này rồi.

Từ ngày 15/8/2026.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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>
Ngôn ngữ chính
TypeScript
Star
1.4k
Fork
134
Merge trung bình
4 phút
Pull request đã merge (30 ngày)
4

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của pmndrs/react-postprocessing

Tất cả issue của pmndrs/react-postprocessing

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.