search

sirxemic / jquery.ripples

Add a water ripple effect to your background using WebGL.
https://sirxemic.github.io/jquery.ripples/
MIT License
1.06k stars 417 forks source link

WebGL Issue on Google Chrome #76

Open lushdomain opened 3 years ago

lushdomain commented 3 years ago

Hi,

I've noticed recently that your ripples.js plugin does not work well with chrome anymore. It works fine on Firefox and IE.

This problem has existed for a while now. Are there plans afoot to modify the JS so that Chrome can render the ripples properly?

The problem seems to be with the way Chrome renders WebGL.

Thanks for an otherwise great little JS plugin.

sirxemic commented 3 years ago

I checked the demo in Chrome (latest version) and it seems to run just fine on my PC. Could you perhaps give a bit more details? Web page, OS, Chrome version?

lushdomain commented 3 years ago

Hi,

I have this problem on both of my machines, one on Win7, the other on Win8.1, when in chrome. I checked the versions on both machines and they say: Google Chrome is up to date Version 87.0.4280.88 (Official Build) (64-bit)

I checked your demo page and it reacts in the same slow way as my website (https://gmvehicleservices.co.uk) Instead of the ripples being 'lifelike' as they are in FF and IE. In Chrome they react very sluggishly and look more like a rough sea.

https://user-images.githubusercontent.com/76781379/103375525-5a175c00-4ad2-11eb-8950-ceb2d7bc49dd.mp4

https://user-images.githubusercontent.com/76781379/103375537-5edc1000-4ad2-11eb-9dcd-406be08e9232.mp4

I've attached 2 videos. Github has renamed them, but I assume they are in order. So the first one is on a Win 8.1 machine with FF, and it seems fine. The second video is on the same machine but in Chrome. You can see that as the ripples follow the curser they are much more sluggish, the page also seems to take a long time to calm down to a flat water effect. Whereas FF and IE react a lot smoother and the ripples disappear quickly.

When I first set this up, about a year ago it worked fine on chrome.

I hope this helps

Regards, Brendan

lushdomain commented 3 years ago

As an additional note. I've also noticed that the ripple effect does not work well on some older MAC screens. Maybe this is a WEBGL support problem.

sirxemic commented 3 years ago

I honestly have no clue where to even begin. I don't have any machines with Win 7 or 8.1 so I cannot easily test different things out.

Does other WebGL stuff work fine?

Also, could you maybe change the line that says 

this.context = gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')

to

this.context = gl = (
  canvas.getContext('webgl', { powerPreference: 'high-performance' }) || 
  canvas.getContext('experimental-webgl', { powerPreference: 'high-performance' })
)

and see if it makes any difference?

legaosijek-dev commented 3 years ago

Hi, I think this is related to high CPU usage... Your older computer have less powerful CPU.

I had noticed this problem few days ago, on OPERA browser , CPU usage spikes to up to 100. Google Chrome is using enormous CPU . Firefox is performing best, although CPU is 20% - 40 % constantly.

All this, without even using an effect. I've just loaded page, standing still , , cpu 90 % on certain browsers.....

legaosijek-dev commented 3 years ago

Hi, I have the same problem in Chrome 93.0.4577.63 on a new MacBook Pro 16" with OSX 10.15.7. In Safari it works perfectly.

https://bit.ly/3hvswIr

Web GL is dead. Find an alternatiive

Razorholt commented 1 year ago

Hi, I have the same problem in Chrome 93.0.4577.63 on a new MacBook Pro 16" with OSX 10.15.7. In Safari it works perfectly. https://bit.ly/3hvswIr

Web GL is dead. Find an alternatiive

And what would that be?