Revert "Add a round-pixels slider"

This reverts commit 0005569.

Author: rogeralsing

index.html

@@ -225,11 +225,6 @@
         <input id="glow" type="range" min="0" max="2" step="0.01" value="2" />
         <span class="val" id="glow-val">2.00</span>
       </div>
-      <div class="row">
-        <label for="roundness">Round pixels</label>
-        <input id="roundness" type="range" min="0" max="1" step="0.01" value="0" />
-        <span class="val" id="roundness-val">0.00</span>
-      </div>
       <div class="row">
         <label for="volume">Volume</label>
         <input id="volume" type="range" min="0" max="1" step="0.01" value="0.5" />

src/main.ts

@@ -55,7 +55,7 @@ const PICTURE_KEY = 'abusejs.picture'
  * The same four numbers appear as the `value` attributes in index.html and as
  * CrtFilter's own fallbacks. Keep the three in step.
  */
-const PICTURE_DEFAULTS = { brightness: 1.05, contrast: 1.21, glow: 2, roundness: 0, volume: 0.5 }
+const PICTURE_DEFAULTS = { brightness: 1.05, contrast: 1.21, glow: 2, volume: 0.5 }
 
 function loadPictureSettings(): typeof PICTURE_DEFAULTS {
   try {
@@ -68,10 +68,6 @@ function loadPictureSettings(): typeof PICTURE_DEFAULTS {
       contrast: Number(parsed.contrast) || PICTURE_DEFAULTS.contrast,
       // Same reasoning as volume: 0 glow is a deliberate setting, not a miss.
       glow: Number.isFinite(Number(parsed.glow)) ? Number(parsed.glow) : PICTURE_DEFAULTS.glow,
-      // 0 is the default and a deliberate setting both, so `||` will not do.
-      roundness: Number.isFinite(Number(parsed.roundness))
-        ? Number(parsed.roundness)
-        : PICTURE_DEFAULTS.roundness,
       // `||` would turn a deliberate 0 back into the default, but 0 is the
       // default here anyway - be explicit so it stays correct if that changes.
       volume: Number.isFinite(volume) ? volume : PICTURE_DEFAULTS.volume,
@@ -86,36 +82,31 @@ function mountPictureControls(
   crt: CrtFilter,
   audio: AudioBank,
   initialGlow: number,
-  initialRoundness: number,
   initialVolume: number,
   onVolumeChange: (muted: boolean) => void,
 ): void {
   const panel = document.getElementById('controls') as HTMLDivElement | null
   const brightness = document.getElementById('brightness') as HTMLInputElement | null
   const contrast = document.getElementById('contrast') as HTMLInputElement | null
   const glow = document.getElementById('glow') as HTMLInputElement | null
-  const roundness = document.getElementById('roundness') as HTMLInputElement | null
   const volume = document.getElementById('volume') as HTMLInputElement | null
   const brightnessVal = document.getElementById('brightness-val')
   const contrastVal = document.getElementById('contrast-val')
   const glowVal = document.getElementById('glow-val')
-  const roundnessVal = document.getElementById('roundness-val')
   const volumeVal = document.getElementById('volume-val')
   const reset = document.getElementById('reset-levels')
-  if (!panel || !brightness || !contrast || !glow || !roundness || !volume) return
-  if (!brightnessVal || !contrastVal || !glowVal || !roundnessVal || !volumeVal || !reset) return
+  if (!panel || !brightness || !contrast || !glow || !volume) return
+  if (!brightnessVal || !contrastVal || !glowVal || !volumeVal || !reset) return
 
   const sync = (persist: boolean) => {
     crt.brightness = Number(brightness.value)
     crt.contrast = Number(contrast.value)
     crt.glow = Number(glow.value)
-    crt.roundness = Number(roundness.value)
     audio.volume = Number(volume.value)
 
     brightnessVal.textContent = crt.brightness.toFixed(2)
     contrastVal.textContent = crt.contrast.toFixed(2)
     glowVal.textContent = crt.glow.toFixed(2)
-    roundnessVal.textContent = crt.roundness.toFixed(2)
     volumeVal.textContent = audio.muted ? 'off' : audio.volume.toFixed(2)
 
     if (persist) {
@@ -126,7 +117,6 @@ function mountPictureControls(
             brightness: crt.brightness,
             contrast: crt.contrast,
             glow: crt.glow,
-            roundness: crt.roundness,
             volume: audio.volume,
           }),
         )
@@ -139,12 +129,11 @@ function mountPictureControls(
   brightness.value = String(crt.brightness)
   contrast.value = String(crt.contrast)
   glow.value = String(initialGlow)
-  roundness.value = String(initialRoundness)
   volume.value = String(initialVolume)
   sync(false)
 
   let wasMuted = audio.muted
-  for (const slider of [brightness, contrast, glow, roundness, volume]) {
+  for (const slider of [brightness, contrast, glow, volume]) {
     slider.addEventListener('input', () => {
       sync(true)
       if (audio.muted !== wasMuted) {
@@ -162,7 +151,6 @@ function mountPictureControls(
     brightness.value = String(PICTURE_DEFAULTS.brightness)
     contrast.value = String(PICTURE_DEFAULTS.contrast)
     glow.value = String(PICTURE_DEFAULTS.glow)
-    roundness.value = String(PICTURE_DEFAULTS.roundness)
     volume.value = String(PICTURE_DEFAULTS.volume)
     sync(true)
     reset.blur()
@@ -318,7 +306,7 @@ async function start() {
     crt.intensity = on ? 1 : 0
   }
 
-  mountPictureControls(crt, audio, picture.glow, picture.roundness, picture.volume, (muted) => {
+  mountPictureControls(crt, audio, picture.glow, picture.volume, (muted) => {
     // Unmuting has to (re)start the soundtrack, since it never started while
     // silent - and the AudioContext may only just have been unlocked.
     if (muted) music.stop()
@@ -346,8 +334,6 @@ async function start() {
     app.stage.filterArea = app.screen
     crt.pixelScale = crtPixelScale(height)
     crt.gridPeriod = crtGridPeriod(zoom, app.renderer.resolution)
-    // One game pixel, for the roundness mask - see CrtFilter.pixelSize.
-    crt.pixelSize = zoom * app.renderer.resolution
     crt.setScreenSize(width, height)
   }
   applySize()

src/render/CrtFilter.ts

@@ -40,8 +40,6 @@ uniform float uIntensity;
 uniform vec2 uScreenSize;
 uniform float uBrightness;
 uniform float uContrast;
-uniform float uRoundness;
-uniform float uPixelSize;
 
 // --- constants, in the original's 960x540 present space ---
 const float CURVE          = 9.0;    // px the image is squeezed at the edges
@@ -62,23 +60,6 @@ const float VIGNETTE_INNER = 0.45;
 const float VIGNETTE_OUTER = 0.95;
 const float VIGNETTE_ALPHA = 0.5;
 
-// Superellipse exponents the roundness slider sweeps between. 8 still reads as
-// a square - only the very corners are off - and 2 is a true circle.
-const float SQUIRCLE_SQUARE = 8.0;
-const float SQUIRCLE_ROUND  = 2.0;
-// How dark the gap between dots goes at full roundness. Below 1 so the picture
-// keeps some floor rather than dropping to black between pixels.
-const float DOT_DEPTH       = 0.85;
-// Average of the dot mask over one cell, which is what the brightness
-// compensation has to undo. Straight lines in the feather width, fitted to the
-// mask integrated numerically at each end - 1 - pi/4 is the right answer only
-// for a hard-edged circle, and the feather widens it by more than it looks:
-// at the widest setting a square already averages 0.29, not 0.02.
-const float GAP_SQUARE_BASE  = 0.026;
-const float GAP_SQUARE_SLOPE = 0.876;
-const float GAP_ROUND_BASE   = 0.218;
-const float GAP_ROUND_SLOPE  = 0.703;
-
 vec3 sampleScene(vec2 frameUv) {
     // Outside the tube there is nothing behind the glass.
     if (frameUv.x < 0.0 || frameUv.x > 1.0 || frameUv.y < 0.0 || frameUv.y > 1.0) return vec3(0.0);
@@ -144,36 +125,6 @@ void main() {
     float grilleAlpha = col < 2.0 ? GRILLE_ALPHA : GRILLE_ALPHA_B;
     color = mix(color, tint, grilleAlpha);
 
-    // --- pixel roundness --------------------------------------------------
-    // Shapes each *game* pixel, so it needs uPixelSize rather than the grille's
-    // uGridPeriod - those are the same thing only at zoom 3 and above.
-    //
-    // A superellipse, |x|^n + |y|^n = 1: n large is a square with the corners
-    // barely off, n = 2 is a circle. Sweeping the exponent rather than mixing
-    // in a circle keeps every intermediate value a real shape instead of a
-    // cross-fade between two, so the slider reads as one dial being turned.
-    //
-    // Carving gaps costs light, so the level is put back below - see there.
-    if (uRoundness > 0.0 && uPixelSize >= 2.0) {
-        vec2 cell = fract(frag / uPixelSize) * 2.0 - 1.0;
-        float n = mix(SQUIRCLE_SQUARE, SQUIRCLE_ROUND, uRoundness);
-        float d = pow(pow(abs(cell.x), n) + pow(abs(cell.y), n), 1.0 / n);
-        // Feather over roughly a device pixel so a dot has an edge rather than
-        // a staircase, but kept narrow: a wide ramp shades most of the cell
-        // instead of just its corners, and the picture goes out with it.
-        float feather = clamp(1.2 / uPixelSize, 0.05, 0.3);
-        float mask = smoothstep(1.0 - feather, 1.0, d);
-
-        // Carving gaps removes light, and a control labelled "round" that also
-        // dims is two controls. Divide the mask by its own average so the cell
-        // keeps the level it came in with, and only its shape changes.
-        float gap = mix(
-            GAP_SQUARE_BASE + GAP_SQUARE_SLOPE * feather,
-            GAP_ROUND_BASE + GAP_ROUND_SLOPE * feather,
-            uRoundness);
-        color *= (1.0 - uRoundness * DOT_DEPTH * mask) / (1.0 - uRoundness * DOT_DEPTH * gap);
-    }
-
     // --- slow rolling band ------------------------------------------------
     float bandSpan = size.y + 160.0 * px;
     float bandY = mod(uTime * BAND_SPEED * px, bandSpan) - 160.0 * px;
@@ -223,10 +174,6 @@ export interface CrtOptions {
   brightness?: number
   /** 1 = unchanged, pivoting around mid grey. Applied after the CRT pass. */
   contrast?: number
-  /** 0 square, 1 round. See the shader's pixel-roundness block. */
-  roundness?: number
-  /** One game pixel in device pixels - `zoom * resolution`. */
-  pixelSize?: number
 }
 
 export class CrtFilter extends Filter {
@@ -240,8 +187,6 @@ export class CrtFilter extends Filter {
       uScreenSize: { value: new Float32Array([960, 540]), type: 'vec2<f32>' },
       uBrightness: { value: options.brightness ?? 1.05, type: 'f32' },
       uContrast: { value: options.contrast ?? 1.21, type: 'f32' },
-      uRoundness: { value: options.roundness ?? 0, type: 'f32' },
-      uPixelSize: { value: options.pixelSize ?? 3, type: 'f32' },
     })
 
     super({
@@ -264,8 +209,6 @@ export class CrtFilter extends Filter {
       uGridPeriod: number
       uGlow: number
       uIntensity: number
-      uRoundness: number
-      uPixelSize: number
       uScreenSize: Float32Array
       uBrightness: number
       uContrast: number
@@ -286,27 +229,6 @@ export class CrtFilter extends Filter {
     this.uniforms.uGridPeriod = value
   }
 
-  /**
-   * One game pixel in device pixels - `zoom * resolution`.
-   *
-   * Not `gridPeriod`: that is a scanline cycle, which is grown to at least
-   * three device pixels so the mask can draw at all. Rounding wants the real
-   * pixel, and switches itself off below two device pixels because there is
-   * nothing there to shape.
-   */
-  set pixelSize(value: number) {
-    this.uniforms.uPixelSize = value
-  }
-
-  /** 0 leaves pixels square; 1 makes them round. */
-  get roundness(): number {
-    return this.uniforms.uRoundness
-  }
-
-  set roundness(value: number) {
-    this.uniforms.uRoundness = Math.max(0, Math.min(1, value))
-  }
-
   /**
    * How much bloom and convergence ghosting to add. 1 is the amount the
    * original effect was authored with; 0 leaves the picture sharp.