[Performance]: Extreme GPU Overhead on Mobile Devices - [LightPillar]

[MrQuantum1915]

Description

The LightPillarcomponent is unusable on most mobile devices.
Basically the component causes the website to lag heavily on Mobile devices. I used it in my project and it made site much laggy on mobile. Lag was even more than on reactbits website.

Mobile: realme narzo 70 pro 5g specs

By laggy i mean both the component rendered with burst of animation rather than smooth and also the whole browser/device being laggy due to it.

Here's the screen recording for the same , you can see the component being static for long time and also the scrolling is laggy:

Record_2025-12-30-03-30-00_e4424258c8b8649f6e67d283a50a2cbc.mp4

Reasons

The current implementation utilizes a fragment shader with a raymarching loop (100 iterations) containing multiple trigonometric functions (cos, sin) and procedural noise calculations per step.

Main issue - Pixel Fill Rate. On mobile devices with high density displays (Retina/OLED), if we have 1440p display -> 2-3 million pixels. For 100 iterations for each pixel per second-> 300 million iterations per frame.
For 60fps GPU has to do 20 billion iterations per second. For my phone this is near the limit of the gpu.

This would not have issue on high end gaming mobiles I think but its not common.

I tried to optimise but the quality worsened everytime.

So I think for this component to work, either the current method of rendering each pixel through that trig equations, needs to replaced by something else to avoid real time calculations. May be raymarching should not be used.

Suggested Improvements

• refactor the current implementation instead of using per pixel raymarching,

• Until a mobile-performant refactor is implemented, the documentation should be updated to reflect the current hardware limitations:

  • Add a "High Performance" or "Desktop Recommended" tag to the LightPillar component on website warning about sub-optimal frame rates on high-DPI mobiles.

[DavidHDev]

I'll take a look, thanks

[DavidHDev]

Added a quality prop with mobile auto-detection, reduced iterations (100→24-80), pre-computed trig values on CPU, inlined shader functions, adaptive pixel ratio scaling, etc

It should work much better now, and you're able to set low quality for mobile for better performance.