Added the Custom Effect of Sharpeness
@kvvasuu 已经在做这个了。
开始于 2026年8月15日。
评估
这个 Issue 还没有评估数据。
描述
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>
- 主要语言
- TypeScript
- 星标
- 1.4k
- 派生
- 134
- 平均合并
- 4 分钟
- 30 天内合并 PR
- 4
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
pmndrs/react-postprocessing 的其他 Issue
-
难度 3/5 1-2 天 新手友好度 42/100
pmndrs/react-postprocessing#343 · 1 条评论 ·
-
难度 4/5 3-5 天 新手友好度 35/100
pmndrs/react-postprocessing#286 ·
-
难度 3/5 1-2 天 新手友好度 35/100
pmndrs/react-postprocessing#280 · 2 条评论 · 1 个 reaction ·
-
难度 4/5 3-5 天 新手友好度 25/100
pmndrs/react-postprocessing#240 · 1 条评论 · 1 个 reaction ·
-
enhancement
难度 5/5 一周以上 新手友好度 20/100
pmndrs/react-postprocessing#183 ·
查看 pmndrs/react-postprocessing 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 72/100
0xMiden/bridge-portal#132 ·
-
难度 2/5 1-3 小时 新手友好度 78/100
-
难度 2/5 1-3 小时 新手友好度 82/100
-
area:tools bug good first issue help wanted priority:P2
难度 2/5 1-3 小时 新手友好度 90/100
TaewoooPark/Motifcode#14 ·
-
bug
难度 2/5 1-3 小时 新手友好度 84/100
newrelic-experimental/preflight#793 · 1 条评论 ·