PS: if you're just looking for a quick way to render *any* sort of UI in your WebGL canvas and don't want to mess too much with web technologies, Dear ImGui works perfectly fine via emscripten (https://github.com/ocornut/imgui).
For instance the debugging windows in my newer emulators are done with Dear ImGui: https://floooh.github.io/tiny8bit/cpc-ui.html ...as well as the *entire* rendering here: https://floooh.github.io/tiny8bit/lc80.html ...and in this demo, the UI is rendered with Dear ImGui while the chip visualization is rendered directly through WebGL (albeit wrapped via sokol_gfx.h so that it also works as native cross-platform code on top of D3D11 and Metal https://github.com/floooh/sokol) https://floooh.github.io/visual6502remix/ Dear ImGui lets you more quickly bang out user interfaces, but they are sort-of locked away in the WebGL canvas, while doing the UI in HTML+CSS allows to create more "robust" traditional browser UIs. Both have different trade-offs. On Sunday, 1 November 2020 18:05:51 UTC+1, Floh wrote: > > Yes, that's essentially what I've done here: > > https://floooh.github.io/virtualkc/ > > The emulator is written in C++ and the emulator framebuffer is rendered > via OpenGL calls through emscripten's GL-to-WebGL wrapper. > > The buttons on the left border are done via regular handwritten HTML5+CSS, > and there's also file drag'n'drop implemented in Javascript via the HTML5 > drag'n'drop API. The C++ emulator code exposes a few C functions to the > Javascript side to "remote-control" the C++ side from the JS side. > > For instance: you can open the browser's devtools JS console and type > "yakc_toggle_crt()", this is a C function which is made visible to JS via > EMSCRIPTEN_KEEPALIVE, and which toggles the CRT shader effect on and off > (all implemented on the C/C++ side), and the HTML5 "CRT" button in the > bottom calls this function in its onclick handler. > > The starting points in the emscripten docs for this type of stuff are: > > - EMSCRIPTEN_KEEPALIVE (make a C function visible from the Javascript side) > > - EM_JS and EM_ASM ("magic" C macros to embed Javascript code into C code) > > - > https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html > > - emscripten also has C wrapper functions around some (but not all) HTML5 > APIs (for getting input events etc...): > https://emscripten.org/docs/api_reference/html5.h.html > > ...but in general, all of this is also possible to do yourself via > EMSCRIPTEN_KEEPALIVE and EM_JS, the emscripten-provided functions just also > handle a lot more edge cases. But understanding the low-level > "do-it-yourself" approach is important for HTML5 APIs that are not covered > by emscripten (for instance drag'n'drop). > > Cheers, > -Floh. > > On Friday, 30 October 2020 19:15:59 UTC+1, Alessio Mochi wrote: >> >> I would like port my opengl application on web with emscripten. >> It's possible use a css web gui with emscripten and to do the opengl >> rendering is in the c++ side? I have seen some examples and that there is >> an html5 library but I don't understand how I can capture events like html >> button clicked and connect this event to the main loop in the c ++ side. >> >> Thanks in advance >> > -- You received this message because you are subscribed to the Google Groups "emscripten-discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/334737b0-0d93-4c2c-95f6-64dce6887202o%40googlegroups.com.
