8000 Slow performance on mobile · Issue #39 · shuding/cobe · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Slow performance on mobile #39

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
Closed
benmccann opened this issue Aug 19, 2022 · 5 comments
Closed

Slow performance on mobile #39

benmccann opened this issue Aug 19, 2022 · 5 comments

Comments

@benmccann
Copy link

I created a globe on this draft of a new SvelteKit homepage: https://kit-svelte-4iwujf16y-svelte.vercel.app/

When I pull it up on mobile, it makes the page laggy and temporarily locks up my phone. I confirmed with another maintainer who also has a high-end phone.

I think it should be possible as I noticed https://stripe.com/blog/globe works fine on my phone.

I'm not sure if I've done anything obviously wrong. You can see my code here: https://github.com/benmccann/kit/blob/2c2ff26d0c2765571977d46a54602f3b08dc130d/sites/kit.svelte.dev/src/routes/Grow.svelte
@shuding
Copy link
Owner
shuding commented Aug 26, 2022

Yeah I noticed the same performance issue. I'm wondering if it's because the canvas dimension being too large? Currently it's 1800x400 with DPR=2 (3600x800) even on mobile. Could you try changing it to fit into window.innerWidth?

@benmccann
Copy link
Author

Ah, yeah, that could be. I'm trying to change it, but can't really make sense of the dimension settings. Why does the example set width and height twice? (once via width property and once via style property). It also seems like the library is updating the canvas element to change some of the dimensions I'm specifying. Can I use dimensions that change? Like 100% of the page width? Will the globe resize as I resize the page in that case?

Screenshot from 2022-08-26 10-26-14

@RoberOrz
Copy link
RoberOrz commented Sep 9, 2022

This is the problem , Does anyone know how to disable the antialias?
gpu consum cobe

@steven-tey steven-tey mentioned this issue Sep 22, 2022
Closed
@shuding
Copy link
Owner
shuding commented Sep 22, 2022

@RoberOrz in latest version, you can pass context: { antialias: false } as per #47.

@benmccann

Why does the example set width and height twice?

Because the HTML canvas itself requires width and height to know how many pixels it should render. And then there is CSS width and height to let the browser show it on screen. So in your case style="width: 500px; height: 500px" makes it like a 500x500 picture on screen, and width="1000" makes the actual image computation base on the 1000x1000 canvas (2x), so the image is clear on a high device pixel ratio screen (which is most screens have nowadays).

And then, because the viewport size can change any time and to always maintain a 2x ratio, you have to add event listeners to resize and then set width and height for the globe just like all the examples do.

@shuding
Copy link
Owner
shuding commented Sep 22, 2022

I'm gonna close this for now as the performance issue is more related to the canvas and webgl itself, not specifically to this lib's code.

@shuding shuding closed this as completed Sep 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@benmccann @shuding @RoberOrz
0