Issues with properly resizing and initializing Unity WebGL content

Note: below in a reply I’ve added more details on the problems I experience

For my project I’ve created a webgl template that is used during the builds. I also played around with the UnityProgress function. However I have the impression there is lack of control for us developers to properly configure the WebGL builds. Here is what I mean.
For instance I want to specify the canvas clientWidth/clientHeight and the width/height on the canvas upon creation. All we have is that gameContainer to specify drawingbuffer width and height. As I watch how the elements are added to the DOM, the canvas appears dynamically at some point, and I need to do some javascript/css tricks in order to do what I need. I haven’t succeeded still though. Here are the things I want to achieve and currently it is not possible.

  • Have a callback or way to subscribe for the canvas element being added to the DOM. It would be great if it is there from the beginning. Now it just appears at some point.
  • Possibility to specify desired clientWidth/clientHeight and width/height prior to the canvas actually being created. Currently I have to (1) detect when the canvas is being loaded and (2) set these properties after the canvas has been initialized.
  • The above is mainly needed to adjust for Retina displays i.e. drawingbuffer width/height twice the shown width/height.
  • The UnityLoader.js script obviously removes all other style properties of the gameContainer. This forces me to either put it inside a wrapper and put that style properties to the wrapper itself.
  • Provided function to handle dynamic resizing of the webGL content without writing fancy JS scripts would also be of great benefit.

I am not really sure if I have missed something and that stuff already exists, or it actually doesn’t. If the latter, is this functionality or similar about to be released soon?

Here is some progress I made:

  • Had to use MutationObserver to subscribe for canvas creation in the DOM, I found no other way, UnityProgress with progress == 1 gets executed long time before the canvas actually gets created.
  • Upon canvas creation (detected with the above method), I execute a JS script to resize the canvas to a 16:9 aspect ratio with regards to available space I have in the viewport. I also take into consideration retina displays to increase twice (or whatever window.devicePixelRatio is) the drawing buffer.
  • Obviously Unity webGL content changes dynamically the width/height/style properties of the canvas when the game starts, so I have to detect that and return them to the values set in step 2. I’m not sure why that is.
  • There is also a page created by Unity guys which talks about that. Notice the two comments below that no one paid attention to. When executing step 2 and 3 I get the very same results - instead of the webGL canvas being properly resized and suited for retina too, I get my content stretched/squeezed and with large black areas next to it (all inside the canvas). I believe this is because the Unity webGL build fails to properly take into consideration the parameters being set (canvas width/height). The resolution is not updated too, it gets even more blurry.
  • This is offtopic, but I see huge delay before UnityProgress with progress == 1 being called and the Unity logo flashing and game being booted. I think this is because the UnityProgress does not take into consideration the decompression or whatever process takes place before the game actually being booted. The result is having black screen long after the loading bar has completed and vanished, and game being displayed. Every normal user will have closed the page long before the game has any chance to start and impress him. This is a huge issue.

All above is tested and reproduced in latest Chrome and Firefox

can’t no one really shed some light on this?
Thanks

Quick reply on this: The loading flow did not take into account the time it takes to initialize Unity engine code.
This problem has been fixed in recent 2017.x patches. Now, there should not be any gap between logo/progress-bar and the canvas rendering.

Thanks for your reply!
I am using Unity 2017.3.0b11 when experiencing this, I think I have it with the latest stable Unity 2017.3, can you reconfirm where it has been fixed?

I would be very glad if you can share your thoughts on the drawing buffer resizing and the issues with the stretching/black boxes, etc, the same problems some guys have reported in the Unity help blog post I linked.

Thanks again

@Marco-Trivellato I had it in Unity Beta 2017.3.0b11, but now I switched to latest stable Unity 2017.3 and it is resolved - progress bar stays up until the Unity logo flashes.

I found this bug - Unity Issue Tracker - [WebGL] Missing Progress bar for some projects, but it is maybe not the same since it says it will be fixed in a future release

Can you shed light on the Retina display issues above? Thank you again!

I think it’s the same problem. It probably says it will be fixed in a future release because the fix has not been back-ported to 5.6.

so basically you want to render to higher resolution on retina displays, is that right?

@Marco-Trivellato
hi, yes, there is a reference article here https://support.unity3d.com/hc/en-us/articles/214948483-WebGL-looks-wrong-on-High-resolutions-Retina- which tries to explain how to dynamically resize for retina displays, but I get exactly the same behavior as the two guys commenting below - streched/squished even more low-res content, with empty black areas on the sides.