Skip to content

Fixes: WebGL Cleanup#884

Open
Utkarsh-Singhal-26 wants to merge 1 commit intoDavidHDev:mainfrom
Utkarsh-Singhal-26:fixes/webgl-cleanup
Open

Fixes: WebGL Cleanup#884
Utkarsh-Singhal-26 wants to merge 1 commit intoDavidHDev:mainfrom
Utkarsh-Singhal-26:fixes/webgl-cleanup

Conversation

@Utkarsh-Singhal-26
Copy link
Contributor

@Utkarsh-Singhal-26 Utkarsh-Singhal-26 commented Feb 14, 2026

Fixes: #875

Components Affected:

  • ASCIIText
  • Ballpit
  • ColorBends
  • FloatingLines
  • GhostCursor
  • GridDistortion
  • GridScan
  • Hyperspeed
  • LaserFlow
  • LiquidEther
  • PixelBlast
  • PixelSnow
  • PixelTrail
  • ShapeBlur

@Utkarsh-Singhal-26 Utkarsh-Singhal-26 marked this pull request as draft February 14, 2026 05:20
@Utkarsh-Singhal-26 Utkarsh-Singhal-26 marked this pull request as ready for review February 15, 2026 08:50
Comment on lines +259 to +282

useEffect(() => {
if (materialRef.current) materialRef.current.uniforms.u_shapeSize.value = shapeSize;
}, [shapeSize]);

useEffect(() => {
if (materialRef.current) materialRef.current.uniforms.u_roundness.value = roundness;
}, [roundness]);

useEffect(() => {
if (materialRef.current) materialRef.current.uniforms.u_borderSize.value = borderSize;
}, [borderSize]);

useEffect(() => {
if (materialRef.current) materialRef.current.uniforms.u_circleSize.value = circleSize;
}, [circleSize]);

useEffect(() => {
if (materialRef.current) materialRef.current.uniforms.u_circleEdge.value = circleEdge;
}, [circleEdge]);

useEffect(() => {
if (materialRef.current) materialRef.current.uniforms.u_pixelRatio.value = pixelRatioProp;
}, [pixelRatioProp]);
Copy link
Contributor

Choose a reason for hiding this comment

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

Why is splitting the changes across several individual useEffects better than before?

Copy link
Contributor

Choose a reason for hiding this comment

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

I am not an official reviewer, but I took a look, and those changes look great. There is only one thing that I do not understand the benefit of, at ShapeBlur components

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Splitting the changes across multiple useEffect is better because it avoids rebuilding the entire Three.js scene every time a prop changes.

In the original version, any change to shapeSize, roundness, etc. triggers the main effect, which:

  • Disposes the renderer
  • Removes the canvas
  • Recreates the scene, camera, material, listeners, animation loop

That’s expensive and unnecessary.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Check cleanup of WebGL contexts throughout the library

2 participants