Emscripten/HTML integration tips(floooh.github.io)
floooh.github.io
Emscripten/HTML integration tips
http://floooh.github.io/2017/02/22/emsc-html.html
2 comments
I've been wondering this myself, so thanks for the link. Looks like it lives under the label: "Proposals we might consider in the future".
I've been building a [super early/experimental] rust frontend framework (https://github.com/anowell/quasar), and going through Javascript to manipulate the DOM is the cause of plenty of frustrations and limitations, so I'll be keeping an eye on this.
I've been building a [super early/experimental] rust frontend framework (https://github.com/anowell/quasar), and going through Javascript to manipulate the DOM is the cause of plenty of frustrations and limitations, so I'll be keeping an eye on this.
> First, let’s discard the HTML5 Fullscreen API, it sounds great at first since it provides a fullscreen canvas without any browser window chrome. In reality it is quite useless however, since fullscreen mode must be activated from an input handler, and even then a warning is printed which has a different look and feel on each browser. The kicker is though that the Fullscreen API isn’t supported on iOS Safari (last I checked).
In my own WebGL applications, I support the HTML Fullscreen API, with a shim on iOS that cheats the data that indicates the call succeeded. Since the majority of people are not-iOS (i.e. desktop-of-any-OS or Android), there's no reason for them to receive a shitty experience just because Apple can't be arsed to implement web standards.
> Emscripten’s soft fullscreen ... only has one downside: when activated, it hides all other HTML elements on the page, so it can’t be used together with an HTML UI which should hover on top of the WebGL canvas.
For this among a few reasons, I'm also trying to get rid of all of my HTML UI elements. I have a few buttons left for triggering fullscreen mode, but they will soon be gone. The initial setup is harder--it's so easy to just drop in a new HTML element--but maintaining a consistent look and feel across platforms is easier if you are using only one graphics toolkit. It also makes spinning up new projects a little easier, as again, only one UI toolkit with which to bother.
> emscripten_get_element_css_size()
The documentation on this function (https://kripken.github.io/emscripten-site/docs/api_reference...) doesn't specify what units it returns. Does it return system-pixel values, or CSS-pixel values? I'm assuming from the name it's CSS-pixels. You have to multiply them by devicePixelRatio (a property on the Window object, looks like there is a function: https://kripken.github.io/emscripten-site/docs/api_reference...) to get system-pixel values. It will vary between devices, but on many smartphones your canvas is going to be only 1/3rd the native resolution. It will also be off if the user has zoomed their UI with ctrl+mouse wheel, or if they are running a HighDPI display.
Addendum: I'm curious to know how this function works: https://kripken.github.io/emscripten-site/docs/api_reference.... Is it using the Pointer Lock API, or is it just setting the Canvas element's cursor CSS property to "none"? Pointer Lock isn't available on iOS, Android, or Internet Explorer, but 'cursor: none;' won't let you--for example--mouse around in a 360 circle in an FPS. Given the existence of this function (https://kripken.github.io/emscripten-site/docs/api_reference...), I would assume it means that emscripten_hide_mouse is just setting the cursor property.
In my own WebGL applications, I support the HTML Fullscreen API, with a shim on iOS that cheats the data that indicates the call succeeded. Since the majority of people are not-iOS (i.e. desktop-of-any-OS or Android), there's no reason for them to receive a shitty experience just because Apple can't be arsed to implement web standards.
> Emscripten’s soft fullscreen ... only has one downside: when activated, it hides all other HTML elements on the page, so it can’t be used together with an HTML UI which should hover on top of the WebGL canvas.
For this among a few reasons, I'm also trying to get rid of all of my HTML UI elements. I have a few buttons left for triggering fullscreen mode, but they will soon be gone. The initial setup is harder--it's so easy to just drop in a new HTML element--but maintaining a consistent look and feel across platforms is easier if you are using only one graphics toolkit. It also makes spinning up new projects a little easier, as again, only one UI toolkit with which to bother.
> emscripten_get_element_css_size()
The documentation on this function (https://kripken.github.io/emscripten-site/docs/api_reference...) doesn't specify what units it returns. Does it return system-pixel values, or CSS-pixel values? I'm assuming from the name it's CSS-pixels. You have to multiply them by devicePixelRatio (a property on the Window object, looks like there is a function: https://kripken.github.io/emscripten-site/docs/api_reference...) to get system-pixel values. It will vary between devices, but on many smartphones your canvas is going to be only 1/3rd the native resolution. It will also be off if the user has zoomed their UI with ctrl+mouse wheel, or if they are running a HighDPI display.
Addendum: I'm curious to know how this function works: https://kripken.github.io/emscripten-site/docs/api_reference.... Is it using the Pointer Lock API, or is it just setting the Canvas element's cursor CSS property to "none"? Pointer Lock isn't available on iOS, Android, or Internet Explorer, but 'cursor: none;' won't let you--for example--mouse around in a 360 circle in an FPS. Given the existence of this function (https://kripken.github.io/emscripten-site/docs/api_reference...), I would assume it means that emscripten_hide_mouse is just setting the cursor property.
Thanks for the hint about the device pixel ratio, I haven't thought of that (although it's 'accidentally alright' if on HighDPI devices rendering doesn't happen at full resolution since the GPUs often don't have enough fillrate).
The function implementations are fairly easy to find in the emscripten SDK, e.g.:
emscripten_get_element_css_size(): [1]
emscripten_hide_mouse(): [2]
It's also very easy to inject your own JS 'inline' into C/C++ in case the standard functions don't quite do the right thing with EM_ASM: [3]
[1] https://github.com/kripken/emscripten/blob/6dc4ac5f9e4d8484e...
[2] https://github.com/kripken/emscripten/blob/6dc4ac5f9e4d8484e...
[3] https://kripken.github.io/emscripten-site/docs/porting/conne...
The function implementations are fairly easy to find in the emscripten SDK, e.g.:
emscripten_get_element_css_size(): [1]
emscripten_hide_mouse(): [2]
It's also very easy to inject your own JS 'inline' into C/C++ in case the standard functions don't quite do the right thing with EM_ASM: [3]
[1] https://github.com/kripken/emscripten/blob/6dc4ac5f9e4d8484e...
[2] https://github.com/kripken/emscripten/blob/6dc4ac5f9e4d8484e...
[3] https://kripken.github.io/emscripten-site/docs/porting/conne...
I understand that's on the roadmap, but not high priority.
Edit: No help with a prediction on when, but a bit of the "how": https://github.com/WebAssembly/design/blob/master/GC.md