Skip to content

BROWSER_CACHE_FIX.md

Latest commit

 

History

History
159 lines (116 loc) · 4.89 KB

BROWSER_CACHE_FIX.md

File metadata and controls

159 lines (116 loc) · 4.89 KB

Browser Cache Fix - Pixelated Car Issue

Problem Identified

The car appeared pixelated and low quality on Netlify deployment despite having ultra quality settings in the code. This was NOT a code issue - it was a browser caching issue.

Root Cause

  1. Previous deployment had code that defaulted to medium/high quality
  2. Browser cached the old JavaScript bundle with aggressive 1-year cache headers
  3. New deployment with ultra quality settings was not being loaded
  4. User's browser continued serving the old cached JavaScript with lower quality settings

Solution Implemented

1. Added No-Cache Headers for HTML Files

Modified netlify.toml to prevent HTML caching:

# Prevent caching of HTML files to ensure users get latest version
[[headers]]
  for = "/*.html"
  [headers.values]
    Cache-Control = "no-cache, no-store, must-revalidate"

[[headers]]
  for = "/"
  [headers.values]
    Cache-Control = "no-cache, no-store, must-revalidate"

Why this works:

  • HTML files are now always fetched fresh from the server
  • HTML contains references to hashed JavaScript bundles (e.g., index-CTusykuK.js)
  • When HTML is fresh, it loads the latest JavaScript bundle
  • JavaScript bundles still have 1-year cache (good for performance)
  • Vite generates new hashes when code changes, so new bundles are always loaded

2. Added Debug Logging

Added console logging in Game.ts to verify quality settings:

console.log(`[Quality] Applied: ${preset.id}`, {
  resolutionScale: preset.resolutionScale,
  hardwareScalingLevel,
  shadowMapSize: preset.shadows.mapSize,
  renderWidth: engine.getRenderWidth(),
  renderHeight: engine.getRenderHeight()
});

How to Verify the Fix

Step 1: Hard Refresh Your Browser

IMPORTANT: You must clear your browser cache first!

  • Chrome/Edge (Windows/Linux): Press Ctrl + Shift + R or Ctrl + F5
  • Chrome/Edge (Mac): Press Cmd + Shift + R
  • Firefox (Windows/Linux): Press Ctrl + Shift + R or Ctrl + F5
  • Firefox (Mac): Press Cmd + Shift + R
  • Safari (Mac): Press Cmd + Option + R

Step 2: Check Console Logs

  1. Open DevTools (F12 or right-click → Inspect)
  2. Go to the Console tab
  3. Look for the quality log message:
[Quality] Applied: ultra {
  resolutionScale: 1,
  hardwareScalingLevel: 1,
  shadowMapSize: 4096,
  renderWidth: 1920,  // Your screen width
  renderHeight: 1080  // Your screen height
}

Step 3: Verify Visual Quality

The car should now appear:

  • ✅ Sharp and detailed
  • ✅ Smooth edges (not pixelated)
  • ✅ High-resolution textures
  • ✅ Proper shadows (4096px shadow map)

Quality Settings Explained

Ultra Quality (Desktop Default)

  • Resolution Scale: 1.0 (100% - full resolution)
  • Hardware Scaling Level: 1 (no downscaling)
  • Shadow Map Size: 4096px (highest quality shadows)
  • Post-Processing: All effects enabled (TAA, SSAO, SSR, Motion Blur, Bloom)

How Hardware Scaling Works

Babylon.js setHardwareScalingLevel() works as follows:

  • Level 1 = Full resolution (100%)
  • Level 2 = Half resolution (50%)
  • Level 1.176 = 85% resolution (1 / 0.85)

Formula: hardwareScalingLevel = 1 / resolutionScale

Technical Details

Cache Strategy

HTML Files: No cache (always fresh)

  • Ensures users always get the latest bundle references
  • Small file size (~0.42 kB) - negligible performance impact

JavaScript Bundles: 1-year cache (immutable)

  • Vite generates hashed filenames (e.g., index-CTusykuK.js)
  • Hash changes when code changes
  • Old bundles are never loaded because HTML references new hash
  • Excellent performance - bundles only downloaded once

Static Assets: 1-year cache (immutable)

  • Images, fonts, environment maps
  • Never change, so safe to cache aggressively

Why This Happened

  1. First deployment: Had medium/high quality defaults
  2. Browser cached: Old JavaScript bundle for 1 year
  3. Second deployment: Changed to ultra quality
  4. Browser still used: Old cached bundle (ignored new deployment)
  5. Result: Pixelated car despite ultra quality code

Why This Won't Happen Again

  1. HTML never cached: Always fetches fresh from server
  2. Fresh HTML loads: Latest JavaScript bundle (new hash)
  3. New code runs: Ultra quality settings applied
  4. Visual quality: Perfect!

Deployment Status

✅ Committed: Commit 68d98b5 ✅ Pushed: To GitHub main branch ✅ Netlify: Will auto-deploy in ~2 minutes

Next Steps

  1. Wait for Netlify deployment to complete (~2 minutes)
  2. Hard refresh your browser (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows)
  3. Check console logs to verify ultra quality is applied
  4. Enjoy crisp, high-quality visuals!

Note: If you still see pixelated graphics after hard refresh, try:

  1. Clear all browser cache (Settings → Privacy → Clear browsing data)
  2. Open in incognito/private window
  3. Try a different browser