Chore: Old Film Filter Tweaks

examples/src/filters/old-film.mjs

@@ -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);
         },
     });
 }

src/old-film/OldFilmFilter.ts

@@ -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
@@ -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;
     };
@@ -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>' },
                 }
@@ -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; }
 }

src/old-film/old-film.frag

@@ -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;
 
@@ -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)
     {
@@ -110,4 +110,4 @@ void main()
     }
 
     finalColor.rgb = color;
-}
+}

src/old-film/old-film.wgsl

@@ -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>,
 };
@@ -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);
   }
@@ -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>