
Emscripten/HTML integration tips - rl3
http://floooh.github.io/2017/02/22/emsc-html.html
======
tyingq
I wonder when webassembly will define some general purpose interface to tie
into the DOM.

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](https://github.com/WebAssembly/design/blob/master/GC.md)

~~~
anowell
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](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.

------
moron4hire
> 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...](https://kripken.github.io/emscripten-
site/docs/api_reference/html5.h.html#c.emscripten_get_element_css_size))
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...](https://kripken.github.io/emscripten-
site/docs/api_reference/emscripten.h.html#c.emscripten_get_device_pixel_ratio))
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...](https://kripken.github.io/emscripten-
site/docs/api_reference/emscripten.h.html#c.emscripten_hide_mouse). 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...](https://kripken.github.io/emscripten-
site/docs/api_reference/html5.h.html#c.emscripten_request_pointerlock)), I
would assume it means that emscripten_hide_mouse is just setting the cursor
property.

~~~
flohofwoe
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...](https://github.com/kripken/emscripten/blob/6dc4ac5f9e4d8484e273e4dcc554f809738cedd6/src/library_html5.js#L1905)

[2]
[https://github.com/kripken/emscripten/blob/6dc4ac5f9e4d8484e...](https://github.com/kripken/emscripten/blob/6dc4ac5f9e4d8484e273e4dcc554f809738cedd6/src/library_browser.js#L1300)

[3] [https://kripken.github.io/emscripten-
site/docs/porting/conne...](https://kripken.github.io/emscripten-
site/docs/porting/connecting_cpp_and_javascript/Interacting-with-
code.html#calling-javascript-from-c-c)

