Skip to content

Commit

Permalink
Chore: OldFilmFilter backward-compatibility (#429)
Browse files Browse the repository at this point in the history
* Chore: Old Film Filter Deprecations

* Debugger GUI naming fix

---------

Co-authored-by: Baz Utsahajit <[email protected]>
  • Loading branch information
bbazukun123 and bbazukun123 authored Feb 14, 2024
1 parent 1ed388d commit e8fe729
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 28 deletions.
6 changes: 3 additions & 3 deletions examples/src/filters/old-film.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ export default function ()
folder.add(this, 'scratch', -1, 1);
folder.add(this, 'scratchDensity', 0, 1);
folder.add(this, 'scratchWidth', 1, 20);
folder.add(this, 'vignette', 0, 1);
folder.add(this, 'vignetteAlpha', 0, 1);
folder.add(this, 'vignetteBlur', 0, 1);
folder.add(this, 'vignetting', 0, 1);
folder.add(this, 'vignettingAlpha', 0, 1);
folder.add(this, 'vignettingBlur', 0, 1);
},
});
}
28 changes: 14 additions & 14 deletions src/old-film/OldFilmFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +42,17 @@ export interface OldFilmFilterOptions
* The radius of the vignette effect, smaller values produces a smaller vignette
* @default 0.3
*/
vignette?: number;
vignetting?: number;
/**
* Amount of opacity on the vignette
* @default 1
*/
vignetteAlpha?: number;
vignettingAlpha?: number;
/**
* Blur intensity of the vignette
* @default 1
*/
vignetteBlur?: number;
vignettingBlur?: number;
/**
* A seed value to apply to the random noise generation
* @default 0
Expand All @@ -78,17 +78,17 @@ export class OldFilmFilter extends Filter
scratch: 0.5,
scratchDensity: 0.3,
scratchWidth: 1,
vignette: 0.3,
vignetteAlpha: 1,
vignetteBlur: 0.3,
vignetting: 0.3,
vignettingAlpha: 1,
vignettingBlur: 0.3,
seed: 0
};

public uniforms: {
uSepia: number;
uNoise: Float32Array;
uScratch: Float32Array;
uVignette: Float32Array;
uVignetting: Float32Array;
uSeed: number;
uDimensions: Float32Array;
};
Expand Down Expand Up @@ -128,7 +128,7 @@ export class OldFilmFilter extends Filter
uSepia: { value: options.sepia, type: 'f32' },
uNoise: { value: new Float32Array(2), type: 'vec2<f32>' },
uScratch: { value: new Float32Array(3), type: 'vec3<f32>' },
uVignette: { value: new Float32Array(3), type: 'vec3<f32>' },
uVignetting: { value: new Float32Array(3), type: 'vec3<f32>' },
uSeed: { value: options.seed, type: 'f32' },
uDimensions: { value: new Float32Array(2), type: 'vec2<f32>' },
}
Expand Down Expand Up @@ -206,20 +206,20 @@ export class OldFilmFilter extends Filter
* The radius of the vignette effect, smaller values produces a smaller vignette
* @default 0.3
*/
get vignette(): number { return this.uniforms.uVignette[0]; }
set vignette(value: number) { this.uniforms.uVignette[0] = value; }
get vignetting(): number { return this.uniforms.uVignetting[0]; }
set vignetting(value: number) { this.uniforms.uVignetting[0] = value; }

/**
* Amount of opacity on the vignette
* @default 1
*/
get vignetteAlpha(): number { return this.uniforms.uVignette[1]; }
set vignetteAlpha(value: number) { this.uniforms.uVignette[1] = value; }
get vignettingAlpha(): number { return this.uniforms.uVignetting[1]; }
set vignettingAlpha(value: number) { this.uniforms.uVignetting[1] = value; }

/**
* Blur intensity of the vignette
* @default 1
*/
get vignetteBlur(): number { return this.uniforms.uVignette[2]; }
set vignetteBlur(value: number) { this.uniforms.uVignette[2] = value; }
get vignettingBlur(): number { return this.uniforms.uVignetting[2]; }
set vignettingBlur(value: number) { this.uniforms.uVignetting[2] = value; }
}
10 changes: 5 additions & 5 deletions src/old-film/old-film.frag
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ uniform sampler2D uTexture;
uniform float uSepia;
uniform vec2 uNoise;
uniform vec3 uScratch;
uniform vec3 uVignette;
uniform vec3 uVignetting;
uniform float uSeed;
uniform vec2 uDimensions;

Expand Down Expand Up @@ -46,9 +46,9 @@ void main()

vec2 coord = vTextureCoord * uInputSize.xy / uDimensions.xy;

float vignette = uVignette[0];
float vignetteAlpha = uVignette[1];
float vignetteBlur = uVignette[2];
float vignette = uVignetting[0];
float vignetteAlpha = uVignetting[1];
float vignetteBlur = uVignetting[2];

if (vignette > 0.0)
{
Expand Down Expand Up @@ -110,4 +110,4 @@ void main()
}

finalColor.rgb = color;
}
}
12 changes: 6 additions & 6 deletions src/old-film/old-film.wgsl
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ struct OldFilmUniforms {
uSepia: f32,
uNoise: vec2<f32>,
uScratch: vec3<f32>,
uVignette: vec3<f32>,
uVignetting: vec3<f32>,
uSeed: f32,
uDimensions: vec2<f32>,
};
Expand Down Expand Up @@ -36,7 +36,7 @@ fn mainFragment(

let coord: vec2<f32> = uv * gfu.uInputSize.xy / oldFilmUniforms.uDimensions;

if (oldFilmUniforms.uVignette[0] > 0.)
if (oldFilmUniforms.uVignetting[0] > 0.)
{
color *= vec4<f32>(vec3<f32>(vignette(color.rgb, coord)), color.a);
}
Expand Down Expand Up @@ -93,14 +93,14 @@ fn sepia(co: vec3<f32>) -> vec3<f32>

fn vignette(co: vec3<f32>, coord: vec2<f32>) -> f32
{
let uVignette = oldFilmUniforms.uVignette;
let uVignetting = oldFilmUniforms.uVignetting;
let uDimensions = oldFilmUniforms.uDimensions;

let outter: f32 = SQRT_2 - uVignette[0] * SQRT_2;
let outter: f32 = SQRT_2 - uVignetting[0] * SQRT_2;
var dir: vec2<f32> = vec2<f32>(vec2<f32>(0.5) - coord);
dir.y *= uDimensions.y / uDimensions.x;
let darker: f32 = clamp((outter - length(dir) * SQRT_2) / ( 0.00001 + uVignette[2] * SQRT_2), 0.0, 1.0);
return darker + (1.0 - darker) * (1.0 - uVignette[1]);
let darker: f32 = clamp((outter - length(dir) * SQRT_2) / ( 0.00001 + uVignetting[2] * SQRT_2), 0.0, 1.0);
return darker + (1.0 - darker) * (1.0 - uVignetting[1]);
}

fn scratch(co: vec3<f32>, coord: vec2<f32>) -> vec3<f32>
Expand Down

0 comments on commit e8fe729

Please sign in to comment.