Emscripten/Wasm port

dev
1

I am currently working on an emscripten port of glfw3 implemented in c++. It has been quite a fun project so far. I am handling HiDPI and multiple windows/canvas as can be seen in this screenshot:

glfw3 multiple windows in action
glfw3 multiple windows in action1362×636 17.8 KB

The “client” code that runs this example starts like this:

  glfwWindowHint(GLFW_SCALE_TO_MONITOR, GLFW_TRUE);
  glfwWindowHintString(GLFW_EMSCRIPTEN_CANVAS_SELECTOR, "#canvas1");
  auto window1 = glfwCreateWindow(300, 200, "4k", nullptr, nullptr);

  glfwWindowHint(GLFW_SCALE_TO_MONITOR, GLFW_FALSE);
  glfwWindowHintString(GLFW_EMSCRIPTEN_CANVAS_SELECTOR, "#canvas2");
  auto window2 = glfwCreateWindow(300, 200, "2k", nullptr, nullptr);

As you can see in this example, I “invented” a new hint because I need to communicate to the implementation which canvas is associated to which window. If not provided, it uses the same default currently used by the js implementation built into emscripten. For now, I have defined it this way:

#define GLFW_EMSCRIPTEN_CANVAS_SELECTOR  0x00027001

My project is a work in progress at this stage, but if I ever reach stability is there a process to add such a define to glfw3?

Thank you

2

The process for adding functionality to is via the GLFW Github, see the GLFW Contribution Guide for some more details.

Would it be possible to communicate the canvas name with the window name?

For example instead of

glfwWindowHintString(GLFW_EMSCRIPTEN_CANVAS_SELECTOR, "#canvas2");
auto window2 = glfwCreateWindow(300, 200, "2k", nullptr, nullptr);

Use:

auto window2 = glfwCreateWindow(300, 200, "#canvas2", nullptr, nullptr);
3

The thought of using the canvas selector as the window name definitely crossed my mind. The main issue I thought about is that, since the current implementation of glfw3 in emscripten supports only 1 window (= 1 canvas), every single piece of code out there, calls glfwCreateWindow with some window name, not a canvas selector, so it would be hard to know whether you are passing a window title or a canvas selector (which is a css selector, so #canvas1 is only one way of writing this…)

In my current wip implementation, if you don’t provide a canvas selector explicitly (via the new hint), it uses the same “default” as the current emscripten implementation so it is optional. The window title is always provided.

I suppose I could come up with a very specific window title format that is very unlikely to be accidentally triggered, maybe something like this "emscripten://canvas_selector=#canvas1"

Because hints are ignored on platforms for which they are not meant for, it is also easier to use the hint version for multiple platforms, otherwise you need some sort of #define to change the title depending on which platform you are compiling for.

4

Surely if the name doesn’t match a canvas then using the default canvas could be the fallback?

However using a window hint string does seem like a more self-documenting approach.

5

That is brittle: there is no way to distinguish between “name doesn’t match a canvas” and typo. Example: “#canvass1” (2 ss…) would result in the default canvas with no error message.

Absolutely!

Thanks for the feedback