pmndrs / pmndrs/react-postprocessing
Added the Custom Effect of Sharpeness
オープン
@kvvasuu がすでに取り組んでいます。
2026年8月15日 から。
enhancement
- 主要言語
- TypeScript
- スター
- 1.4k
- フォーク
- 134
- 平均マージ
- 4分
- マージ済み PR(30日)
- 4
説明
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>
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
評価
この issue はまだ評価されていません。