canvas size issues when using custom resolution with last repo

[onelsonic]

Hi there,
using the latest repo and having manually downloaded again as specified.
I found an issue when exporting to 'html5' with the lastest repo.
The canvas size is going bananas when using : Post Processing > Resolution > Custom Resolution
I checked with only the default cube and previous repo works as expected.
When the new repo is cropping the canvas or gives arbitrary canvas size.

[e2002e]

Did you enable dynamic resolution ? This, for me breaks the display as you said.
Only way to enable that feature is to set the processing filter to closest.
Also maybe try to use a custom resolution that is a multiple of the original one.

[MoritzBrueckner]

I'm not really sure if I understand the issue. The custom resolution does not change the canvas/window size for me (like it should). Custom resolution instead is the resolution of the render targets used for rendering (they are later upscaled to match the canvas size again). Maybe you can share a screenshot of how it looks like for you and what you mean with "going bananas" exactly? Does the canvas size in the browser arbitrarily change between runs? Which browser and version do you use?

Dynamic resolution also looks ok for me (in a relatively simple test file however...)

[onelsonic]

since the July repo the Post Processing > Resolution > Custom Resolution and Canvas size is not acting the same.
same problem with the August and current repo.

see here with just the default cube scene:
source : https://github.com/onelsonic/armory_tests/blob/master/cubes.7z?raw=true

June 06 repo html5: https://onelsonic.github.io/june06cube/index.html
July 08 repo html5: https://onelsonic.github.io/aug08cube/index.html

The canvas size will differ on all browser lastest version Firefox 103.0.2, Chrome 104.0.5112.102

[onelsonic]

found what is causing this : Kha was not updated since 6 months.
In the current Kha repo that was added with Armory in July we have now this :
Kode/Kha@a0db16d

This is causing unexpected canvas sizes in Armory when exporting to html5

[onelsonic]

I pushed a pull request to Kha to fix this thing :
Kode/Kha#1427

[onelsonic]

PR got rejected : I've been told :
"to set big canvas size and N times smaller canvas.style size, or canvas will have blur."

While I have not detected any blur if the scale is correctly specified in the meta headers to 1.0 scale.
Blur is only showing when scale is set above 100% on the physical device and in this case adjusting the scale in the meta header fixes the blur.

With the last changes in Kha, Canvas sizes are now inconsistent across browsers as canvas.style sizes are forcibly specified.
Correct me if I am wrong but we cannot use 100vw or 100vh values and also cannot correctly center the canvas on all platforms without dedicated code for each platform :
I found a workaround for Chrome/Firefox but the canvas style is causing issues on Safari.
Now the Webgl canvas does not resize according to the scale in the meta headers anymore.
The Fullscreen setting is also therefore invalid.

From a webdesign standpoint this change in Kha looks like a step backward, removing the flexibility to do what we want with the canvas and its style.

This point is valid except if you are targeting one platform in particular and don't bother the other platforms.

[musasixx]

Hi there,
First of all, let me say "Thank you very much for your efforts to developing Armory3D"!

I’m having a problem with html5 full screen behavior on mobile web browser in horizontal and vertical mode.
I set ”full screen” on Armory3D and pushed play button.
The behaviors are ,
Armory3D ver 2022_06: is Good for me.
Armory3D ver 2022_07, 08, 09: are Not full screen.

I checked them using “Google Chrome Developer Tools F12” and also checked on my mobile phone Google pixel 5a after publishing it on my server.
The results are exactly same.
Please look at my screen shots (bottom).
I would be happy if it was improved. I'm craving it.
Thanks in advance and sorry for my poor English.

[musasixx]

@onelsonic,
Thank you very much for your comment.
It's quite difficult and complicated situation, isn't it.
I'm a beginner of Armory3D and not a programmer.
I would be happy if anyone of Armory3D developer improve this issue.

[MoritzBrueckner]

Hi, and thanks for these really helpful screenshots, @ musasixx! I'm able to reproduce your issue (I'm not sure though if it's the same that @ onelsonic originally described, it sounds different?) and I can confirm that it's also caused by the commit @ onelsonic already identified for the original issue: armory3d/Kha@a0db16d.

I will try to reproduce this issue in a small pure-Kha project in the next days, and if it has the same problems we can open an issue on the Kha repository so that Robert can fix it. He doesn't like to work on issues that don't include a pure-Kha example ;)

[musasixx]

@MoritzBrueckner,
Thank you very much for your time and comment.
I'm sorry I'm not sure if it's the realy same that @ onelsonic originally described.
Thank you in advance, @MoritzBrueckner.

[MoritzBrueckner]

Hi, sorry for my late answer. I finally had time to create the Kha example, and it looks like Kha doesn't support any auto-sizing by default. I asked on the Kha Discord whether this is wanted, but Robert (the Kha dev) didn't answer, instead someone from the community answered with a workaround that I will try in a minute.

Armory currently sets the canvas size to 100wh/100vh, but this may interfere with some Kha code. If that is the case, perhaps we need to implement better auto-size-functionality in Armory to not rely too much on Kha's internals. For now, I will remove the "Kha" label again until we find the exact cause of this issue.

Also, thank you very much for your images in https://forums.armory3d.org/t/html5-full-screen-behavior-on-mobile-browser-horizontal-and-vertical/4977/15 (they are very helpful!), what browsers did you use when testing the three PCs?

---

Edit: I found a new workaround that works for me, could you please unzip the following html5 build (pure Kha project, already compiled), open index.html in your browser and test whether it works for you as expected? If yes, I will implement it in Armory and give you another Armory-based test build.
kha_html5_maximized.zip

I haven't tested this with "true" full screen yet, it's possible that it will break then. Browsers only allow this after the user has interacted with the page, so we can't directly start in true full screen.

[musasixx]

@MoritzBrueckner
First of all, let me say thank you very much for sparing so much of your precious time and testing this issue.

1_
I used Google Chrome when I tested on my three PCs.
(https://forums.armory3d.org/t/html5-full-screen-behavior-on-mobile-browser-horizontal-and-vertical/4977/15)

2_
I unziped and tested the "html5 build" you gave me.
I tested on Google Chrome and Microsoft Edge.
The results are as follows.
Desktop web browser : Fine full-screen.
Mobile web browser : Not full-screen.
Please look at following movies.
Please let me know if any information is missing.
(If you need, I will test it on my web server too.)
Thank you very much in advance, @ MoritzBrueckner.

test on chrome
https://user-images.githubusercontent.com/113965828/193990367-0a6f294f-70ba-49d3-abf3-fc57e6de0d1f.mp4

test on edge
https://user-images.githubusercontent.com/113965828/193990425-b76edae2-41b6-4fb4-8b4e-8b4b875e8334.mp4

[onelsonic]

same issue

See longer discussion with Robert here :
Kode/Kha@a0db16d#commitcomment-82027775

with the changes in Kha (from 9 months ago),
a Kha project now runs with a fixed pixel size.
They did that to correct blur issues for DPI resolutions devices.
While the correct html way is to use the viewport meta to adjust the viewport to the correct resolution scale.

<meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, initial-scale=1.0, user-scalable=no, viewport-fit=cover">

at each frame Kha is resizing the canvas to its fixed pixel size.

My workaround :
multiply the canvas size by the scale instead of dividing it, (how it should be really)

https://github.com/armory3d/Kha/blob/3752b107a5ee7870c5ce274155d34b1f85226fe4/Backends/HTML5/kha/SystemImpl.hx#L580
https://github.com/armory3d/Kha/blob/3752b107a5ee7870c5ce274155d34b1f85226fe4/Backends/HTML5/kha/SystemImpl.hx#L581

[tong]

Browsers only allow this after the user has interacted with the page, so we can't directly start in true full screen.

Side note: Now you can by setting the environment variable.
Chrome for example:

ARMORY_PLAY_HTML5='chromium $url --new-window --start-fullscreen'

Firefox kiosk mode:

ARMORY_PLAY_HTML5='firefox --kiosk $url'

[musasixx]

@onelsonic
Nice to see you @ onelsonic.
Your last comment is very helpful for me!
Armory SDK-2022-06 works correctly from before.
So, I tried to replace the part of code of "SystemImpl.hx" in (Armory SDK-2022-10th) on my PC by an old one (Armory SDK-2022-06) as below.
Now, Armory SDK-2022-10th works well with fullscreen on mobile web browser for me.
It works well in both of horizontal and vertical angle .
Thank you very very much @ onelsonic.
(p.s. I would appreciate it if someone could verify this, because I'm a beginner of Armory and not a programmer.)

[tong]

Here is a solution which works for me.
It uses a 'layout' flag to use the desired css class for the canvas layout.

• center fixed size canvas in center position (example)
• fill resize canvas to fill container (example)

Personally i mostly use the 'fill' layout in combination with browser arguments to set the window size for development: export ARMORY_PLAY_HTML5='chromium --app=$url --new-window --window-size=$width,$height'

Following the discussion i think it's hard to satisfy every users (devices) needs, so the thinking is that it should just work for development, for production one should use a custom html/layout for the targeted device.
This could easily be done by creating a text block in blender named 'index.html' (probably external) or by modifying armsdk/armory/Assets/index.html itself.

[rpaladin]

I keep forgetting to post these solutions:

• I believe you can use project.addDefine('kha_html5_disable_automatic_size_adjust'); to define a dynamically resized canvas [viewport].
  • https://github.com/Kode/Kha/wiki/HTML5#full-page-canvas
• Enabling Fullscreen instead of Window as your project's window mode solves the issue (at least for me).

[tong]

@rpaladin Thanks for sharing, never heard of this flag.

[moisesjpelaez]

I have been having the same issue, I found out that just replacing the content of the if (lastCanvasClientWidth != canvas.clientWidth || lastCanvasClientHeight != canvas.clientHeight) statement inside SystemImpl.hx with:

	canvas.width = Std.int(canvas.clientWidth);
	canvas.height = Std.int(canvas.clientHeight);
	lastCanvasClientWidth = canvas.clientWidth;
	lastCanvasClientHeight = canvas.clientHeight;

Then enabling Fullscreen in ArmoryProject > Window works for me.

The original SystemImpl.hx uses a scale variable which caused the canvas look proportionally smaller in my main monitor, since it has a pixel ratio of 1.25.