External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: align background blur with effect blur intensity scale

Browse Source
This commit is contained in:
Maze Winther
2026-04-01 15:15:41 +02:00
parent e579ae1202
commit 8a1d37cf3e
7 changed files with 193 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/lib/effects/definitions/blur.ts
+9 -12
View File
@@ -7,11 +7,6 @@ const MAX_STEP = 4;
const MAX_EFFECTIVE_SIGMA = MAX_SINGLE_PASS_SIGMA * MAX_STEP;
const MAX_ITERATIONS = 8;
/**
* Builds multi-pass gaussian blur passes for a given sigma.
* Shared by the blur effect and background blur — they each
* compute their own sigma from their own intensity scale.
*/
export function buildGaussianBlurPasses({
sigmaX,
sigmaY,
@@ -59,8 +54,10 @@ export function buildGaussianBlurPasses({
return passes;
}
function intensityToSigma(intensity: number, resolution: number, reference: number): number {
return (intensity / 5) * (resolution / reference);
export const INTENSITY_TO_SIGMA_DIVISOR = 5;
export function intensityToSigma({ intensity, resolution, reference }: { intensity: number; resolution: number; reference: number }): number {
return (intensity / INTENSITY_TO_SIGMA_DIVISOR) * (resolution / reference);
}
function parseIntensity(effectParams: Record<string, unknown>): number {
@@ -88,7 +85,7 @@ export const blurEffectDefinition: EffectDefinition = {
{
shader: GAUSSIAN_BLUR_SHADER,
uniforms: ({ effectParams, width }) => ({
u_sigma: Math.max(intensityToSigma(parseIntensity(effectParams), width, 1920), 0.001),
u_sigma: Math.max(intensityToSigma({ intensity: parseIntensity(effectParams), resolution: width, reference: 1920 }), 0.001),
u_step: 1,
u_direction: [1, 0],
}),
@@ -96,7 +93,7 @@ export const blurEffectDefinition: EffectDefinition = {
{
shader: GAUSSIAN_BLUR_SHADER,
uniforms: ({ effectParams, height }) => ({
u_sigma: Math.max(intensityToSigma(parseIntensity(effectParams), height, 1080), 0.001),
u_sigma: Math.max(intensityToSigma({ intensity: parseIntensity(effectParams), resolution: height, reference: 1080 }), 0.001),
u_step: 1,
u_direction: [0, 1],
}),
@@ -104,9 +101,9 @@ export const blurEffectDefinition: EffectDefinition = {
],
buildPasses: ({ effectParams, width, height }) => {
const intensity = parseIntensity(effectParams);
return buildGaussianBlurPasses({
sigmaX: intensityToSigma(intensity, width, 1920),
sigmaY: intensityToSigma(intensity, height, 1080),
return buildGaussianBlurPasses({
sigmaX: intensityToSigma({ intensity, resolution: width, reference: 1920 }),
sigmaY: intensityToSigma({ intensity, resolution: height, reference: 1080 }),
});
},
},