Skip to content

feat: optimize dither backgrounds #332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jul 23, 2025
Merged

feat: optimize dither backgrounds #332

merged 1 commit into from
Jul 23, 2025

Conversation

msafdev
Copy link
Contributor

@msafdev msafdev commented Jul 22, 2025

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
Copy link
Owner

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

DavidHDev
DavidHDev approved these changes Jul 23, 2025
View reviewed changes
Copy link
Owner

@DavidHDev DavidHDev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will merge to test it and determine the impact.

@DavidHDev DavidHDev merged commit fc53538 into DavidHDev:main Jul 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@DavidHDev DavidHDev DavidHDev approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@msafdev @DavidHDev