Automatic Performance Profiling

[chtzvt]

Given the resources needed to run the full 3D version of the site, it may be a good idea to automatically switch to the plaintext version depending on certain performance indicators (e.g. framerate or data from a performanceobserver).

This'd help deliver the best experience a user could receive on the device they have, and make sure they can still access information about the hackathon.

[CodaBool]

Should be pretty doable

I already have a react hook that detects their GPU.

I already do swap out the most expensive 3D component. Which is the water and sky. If it detects what it calls a "tier 1" GPU. (Or if it detects safari since the shaders were not working on safari)

[CodaBool]

@chtzvt I'm curious have you seen a device which runs bad on the site?

[chtzvt]

@CodaBool Yes, I experience lots of stuttering/dropped frames in Firefox on Mac, as well as on some mobile devices. Here's a video:

https://github.com/TampaDevs/bayhacks.dev/assets/7227500/277cf633-eb7f-45ab-b30b-36789aa21b91

There could be a few ways to approach this in terms of progressively degrading site functionality based on performance:

• Cap the framerate?
• Disable or remove certain models/animations,
• Swap in lower complexity/aggressively decimated models?
• Ultimately fall back to plain text experience?

[CodaBool]

gotcha, since I don't personally have access to a mac. Do you mind copying over any errors you see in the console tab?

There are two solutions I can do for this:

Solution 1 (the easy way)

Detect framerate and swap over to the traditional view if it goes too low.

Solution 2 (the smart way)

The initial fps is low on all devices so, solution 1 is not amazing in that your first 5 seconds on the site is waiting to see if you can run it. A better approach would be to detect the hardware and not even try to display the 3D scene if we know the hardware is unlikely to perform well. In order to get an accurate hardware performance list we need to do some testing.

I think both solutions should be implemented but solution 2 will take some time to find out exactly what machines & browsers are on the no fly list so to speak. I will see about adding solution 1 later tonight but we need to start compiling a list of confirmed hardware where it performs bad. Can you write out what CPU (or if mobile what phone), OS and browser you get stuttering on? We should get started on a hardware performance list.

I can add the fps as a gui easily if that helps us get this resolved.

[CodaBool]

I noticed it's trying to use the expensive water and sky shader in your video. Makes me think macs can't use those shaders in general. Since I had to remove those shaders for Safari to run nicely.

I would have thought that stops at the browser level but it might be something about the mac CPU & GPU too that's not working well with those shaders. I can try just falling back on the performant water and sky version if it detects a mac device.

[CodaBool]

🧪 Test Site up

just deployed a test version of the site to help gather some data on this. If you go to this site

https://bayhacks.codabool.com

we should have everything we could need printed to the console. It will print several things:

• high fps
• low fps
• as much hardware info as possible
• average fps

So, you can use this to compare performance objectively.

Swap Modes

I also added a neat feature here where you can click on the first box. The one that says "scroll down". This will swap between the high and low performance modes I've made for the 3D scene. So, you can get a test of what it runs like in both modes. The high performance mode removes the use of the sky and water shaders which would cause errors on Safari (but I am not thinking its mac things in general). But this will let us know objectively if your mac will do better with the high performance mode turned on.

[chtzvt]

This is definitely a browser issue, not a hardware or OS issue. The site is buttery smooth on my machine in Chrome, only Firefox has problems with performance. I'm not familiar enough with the differences in rendering pipelines between Chrome, Firefox, and Safari to speak in depth about where the issues there may lie.

Here's a video from the test site taken in Firefox:

https://github.com/TampaDevs/bayhacks.dev/assets/7227500/d605be08-5412-4d9f-95e6-7cb796aa325c

You can see that it's also not a problem with framerate, as FPS stay >100 throughout my test session.

My hardware is fairly new and powerful:

[CodaBool]

I have to disagree because the page runs smooth on my Pixel 6 with Firefox. As well as desktop window Firefox

I can maybe see about adding Firefox with Mac to the high performance mode

[chtzvt]

It seems the root cause of both the performance issues and #5 were Cloudflare's Rocket Loader. I have disabled this and auto-minification for https://bayhacks.dev, and the issues appear to be resolved.