WebGL build pixelated & not reacting to input

Problem:
In the past my WebGL build worked fine but something must have been changed because whenever I build the website shows a highly pixelated version of my game. Additionally all my buttons don’t work. They just don’t register the click so I can’t do anything.

What I tried to solve this issue:

  • I tried with and without URP and it is the same problem in both cases

  • Made sure my canvas size are correct

  • Made sure the build resolution is correct

  • Tried it with some resolution like 1920x1080 and same problem.

  • Printed debug output and all the debug output is showing up in the web console, so the app is running just not reacting to my clicks and looks like garbage.

  • I tried to print what the mouse is over:

   void Update()
    {
        if (EventSystem.current.IsPointerOverGameObject())
        {
            var pd = new PointerEventData(EventSystem.current) { position = Input.mousePosition };
            var results = new List<RaycastResult>();
            EventSystem.current.RaycastAll(pd, results);
            foreach (var result in results)
            {
                Debug.Log(result);
            }
        } else {
             Debug.Log("None");
        }
    }

In the editor this works but on the WebGL build it only prints the else “None”.

More info about my setup:

  • I am using Unity 2019.421f1
  • Working under Windows 10 and I tried to open the website in Chrome and Firefox, same issue.

Any ideas?

I finally managed to solve this by binary searching through my complete commit history which took a few hours. In the end the problem is the following:

QualitySettings.vSyncCount = 0;
Application.targetFrameRate = 60;

I can remove the vSyncCount but then the targetFrameRate is not respected, so I guess I just have to live with that on the WebGL build? Kinda annoying, so please let me know if there is another option.

Thanks!

1 Like