[performance] Poor performance and scroll stuttering on landing page from Globe

[shelwinsunga]

A lot of complaints regarding intensive gpu usage that damages UX and first impressions. This is especially prominent on non-MacOS devices. On my windows laptop, roughly 100% of my GPU is being used on the front page.

A preliminary inspection I conducted showed that the Globe, cobe, is really resource intensive. I haven't done much profiling besides that, but you'd wanna see if the following options are viable:

• Basic performance optimizations: simplifying the shader, reduce vertices, limit framerate
• Conditionally load the Globe(s) based on the client's device capability
• Use WebGPU rather than WebGL?
• Stop the animations that aren't in view

[itsarghyadas]

@shelwinsunga Yes, we would love to make it more performant for all devices, and those are some excellent improvement points you've mentioned.

Please let us know if you have any more suggestions or if you'd like to help us implement this approach. If you want you can join our discord group.

Thank you,
Arghya

[BankkRoll]

Yeah same im not even able to load the landing page or the bento grid, seems to make my pc freeze almost completely. I think the biggest issue is "Globe" looking thru docs seems globe was at fault on my end as well.. Would get this changed asap as the landing page is not even usable on my end.

NewTab-GoogleChrome2024-05-2511-28-29-ezgif.com-crop-video.mp4

[dillionverma]

Also want to link this related issue as well

shuding/cobe#78

[dillionverma]

From my preliminary evaluation, it looks like cobe has performance issues that need to be resolved and they are being carried upstream into this library.

We can resolve this issue by solving the core underlying issue, or just removing it from magicui.

Resolving the core underlying issue is preferred but will take time

Here's a simple + fast plan of action that can be done in the next few hours.

Possible Next Steps

1. Remove globe demo from landing page bento grid and landing page. Replace with a different demo.
2. Add a performance warning indicator on the globe docs here https://magicui.design/docs/components/globe so people are aware that the globe has performance issues

Let me know if you have any other suggestions

[BankkRoll]

Yeah found those issues checking myself as well into cobe. I think its best as you suggested, remove from the landing page so eyes can still get on your great project without performance issues! And making some performance callout would be great!

Another spot is here in the docs the bento grid, not able to checkout as is super intensive there as well.

p.s 🚀 great components!

[dillionverma]

Pushed performance fix heree!

a61ab0f

Can someone confirm if its faster yet?

[itsarghyadas]

@dillionverma Yes, on my system, both my phone and PC feel much faster. To make it load even faster, you might consider stopping the animation of the hero headline and other elements. However, I think it's good to go. Let's hear from others as well.

[dillionverma]

sounds good! closing for now, please let me know if theres any other issues which pop up relating to this

[BankkRoll]

Tested all areas of performance issues. Super fast load times now! 🚀

[dancrump1]

Agreed, site is much more performant on my wimpy work computer.

[andrewdoro]

https://ui.aceternity.com/components/github-globe not sure if this is a better option, it's using react three fiber instead of cobe

[BankkRoll]

https://ui.aceternity.com/components/github-globe not sure if this is a better option, it's using react three fiber instead of cobe

+1

Runs little heavy but loads instantly and 90% smoother then the current globe fosure!

[alamenai]

How GitHub made it !

[Abdulali97]

@alamenai they don't use any texture! , thy use light only to draw earth region.

here is a blog about how they made it
https://github.blog/2020-12-21-how-we-built-the-github-globe/

[khalidx]

FYI, if this is resolved, this content may need to be removed from the documentation:

Page: https://magicui.design/docs/components/globe

Content:

⚠️ Warning
The globe has known performance issues causing computer GPU and CPU to spike. See [here](https://github.com/magicuidesign/magicui/issues/42) for more details.

[omarfarukee]

this is my first time i am using this magical ui library , when i 1st time look on the the golbe it was just wow , but when i was implement that globe, my hole website animation was like slowly moveing😥💔, but i wish this problem will be sloved soon.

[FollowNaim]

While the globe component is in view, it will render as expected. When it's out of view, it will be destroyed immediately.
This approach helps mitigate the issue of the globe running continuously in the background, which can cause performance issues and potentially freeze your PC.
Although there are still a few bugs to address, this solution is a significant improvement over constant background rendering.

[austintackaberry]

This component is still unfortunately unusable on my test PC, so I am not able to move forward with using it. The github globe component from aceternity is also unusable though.

I noticed that the globes on stripe.com and github.com do work just fine on my test PC.

The blog posts discussing their approaches are here:

• https://stripe.com/blog/globe
• https://github.blog/engineering/engineering-principles/how-we-built-the-github-globe/

There's not enough there to fully build the component, but it's clear they put a lot of thought and effort into performance.

I took a stab at reverse engineering the stripe globe by inspecting source and unminifying. I had to stop so that I could go back to being a productive human being, but I will share a gist in case anyone is interested in picking up where I left off. I was able to get it to run without errors but it's not showing a globe at all at the moment.

https://gist.github.com/austintackaberry/0dcb3c2f8e2f2ef16bf5f6f7caccfb7c

The component on the stripe blog is live and that is the one I was trying to reverse engineer.