Open imtns opened 11 months ago
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>
Figured out the sharpenss effect by myself, If anyone who needs it, here is the code
glsl sharpen shader