Skip to content

Added the Custom Effect of Sharpeness #253

Description

@imtns

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>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions