feat: optimize dither backgrounds

[msafdev]

Improve Dither Performance - (25 FPS → 60+ FPS)

Changes

Reduced FBM Octaves

- const int OCTAVES = 8;
+ const int OCTAVES = 4;

🧠 Cuts number of cnoise() calls in half — big shader win.

---

Simplified pattern() Function

- return fbm(p - fbm(p + fbm(p2)));
+ return fbm(p + fbm(p2));

Reduced expensive nested FBM calls.

---

Memoized waveColor uniform

// Before
u.waveColor.value.set(...waveColor);

// After
if (!prevColor.every((v, i) => v === waveColor[i])) {
  u.waveColor.value.set(...waveColor);
  prevColor = [...waveColor];
}

---

Replaced useState with useRef for mousePos

- const [mousePos, setMousePos] = useState(...);
+ const mouseRef = useRef(new THREE.Vector2());

// useFrame
u.mousePos.value.copy(mouseRef.current);

Prevents re-renders per second on pointer move.

---

Uniform Sync Optimization in useFrame

if (u.waveSpeed.value !== waveSpeed) u.waveSpeed.value = waveSpeed;
if (u.waveFrequency.value !== waveFrequency) u.waveFrequency.value = waveFrequency;
if (u.waveAmplitude.value !== waveAmplitude) u.waveAmplitude.value = waveAmplitude;

Avoids redundant uniform updates – leaner frame loop.

---

DX

• No setState() rerenders
• Less GPU memory traffic
• Frame loop = clean and tight
• Maintains same visual quality in most use cases

[DavidHDev]

Can you confirm this has 0 impact on the visual aspect of the component?

[DavidHDev]

Will merge to test it and determine the impact.