Test all remaining wasm bindings (#2554)

Author: Meakk

doc/libf3d/LANGUAGE_BINDINGS.md

@@ -54,7 +54,7 @@ public class F3DExample {
 }
 ```
 
-## Javascript (experimental)
+## Javascript
 
 If the Javascript bindings have been generated by building F3D with webassembly and emscriptem, the libf3d can be used directly from a browser.
 
@@ -124,3 +124,11 @@ f3d(settings)
     console.error("Internal exception: " + error);
   });
 ```
+
+Some advanced libf3d API are not bound yet, here's the exhaustive list:
+
+- `f3d::scene`: light related functions
+- `f3d::scene`: `scene& add(const mesh_t& mesh)`
+- `f3d::camera`: state management
+- `f3d::interactor`: bindings related functions
+- `f3d::interactor`: `playInteraction` and `recordInteraction`

testing/baselines/TestWasmInteraction.png

@@ -284,10 +284,22 @@ EMSCRIPTEN_BINDINGS(f3d)
     .function("render", &f3d::window::render)
     .function("renderToImage", &f3d::window::renderToImage)
     .function("setSize", &f3d::window::setSize, emscripten::return_value_policy::reference())
-    .function("getWidth", &f3d::window::getWidth)
-    .function("getHeight", &f3d::window::getHeight)
-    .function("getWorldFromDisplay", &f3d::window::getWorldFromDisplay)
-    .function("getDisplayFromWorld", &f3d::window::getDisplayFromWorld);
+    .property("width", &f3d::window::getWidth)
+    .property("height", &f3d::window::getHeight)
+    .function(
+      "getWorldFromDisplay",
+      +[](const f3d::window& win, emscripten::val jsArray) -> emscripten::val
+      {
+        return containerToJSArray(win.getWorldFromDisplay(
+          { jsArray[0].as<float>(), jsArray[1].as<float>(), jsArray[2].as<float>() }));
+      })
+    .function(
+      "getDisplayFromWorld",
+      +[](const f3d::window& win, emscripten::val jsArray) -> emscripten::val
+      {
+        return containerToJSArray(win.getDisplayFromWorld(
+          { jsArray[0].as<float>(), jsArray[1].as<float>(), jsArray[2].as<float>() }));
+      });
 
   // f3d::interactor
   // Not bound on purpose because usually used for external interactors:
@@ -298,11 +310,24 @@ EMSCRIPTEN_BINDINGS(f3d)
     .function(
       "initCommands", &f3d::interactor::initCommands, emscripten::return_value_policy::reference())
     .function(
-      "addCommand", &f3d::interactor::addCommand, emscripten::return_value_policy::reference())
+      "addCommand",
+      +[](f3d::interactor& interactor, const std::string& action,
+         const emscripten::val& callback) -> f3d::interactor&
+      {
+        auto wrapCallback = [=](const std::vector<std::string>& args)
+        { callback(containerToJSArray(args)); };
+        return interactor.addCommand(action, wrapCallback);
+      },
+      emscripten::return_value_policy::reference())
     .function("removeCommand", &f3d::interactor::removeCommand,
       emscripten::return_value_policy::reference())
-    .function("getCommandActions", &f3d::interactor::getCommandActions)
-    .function("triggerCommand", &f3d::interactor::triggerCommand)
+    .function(
+      "getCommandActions", +[](const f3d::interactor& interactor) -> emscripten::val
+      { return containerToJSArray(interactor.getCommandActions()); })
+    .function(
+      "triggerCommand",
+      +[](f3d::interactor& interactor, const std::string& command, bool keepComments) -> bool
+      { return interactor.triggerCommand(command, keepComments); })
     .function("toggleAnimation", &f3d::interactor::toggleAnimation,
       emscripten::return_value_policy::reference())
     .function("startAnimation", &f3d::interactor::startAnimation,
@@ -314,8 +339,6 @@ EMSCRIPTEN_BINDINGS(f3d)
       emscripten::return_value_policy::reference())
     .function("disableCameraMovement", &f3d::interactor::disableCameraMovement,
       emscripten::return_value_policy::reference())
-    .function("playInteraction", &f3d::interactor::playInteraction)
-    .function("recordInteraction", &f3d::interactor::recordInteraction)
     .function(
       "start", +[](f3d::interactor& interactor) -> f3d::interactor& { return interactor.start(); },
       emscripten::return_value_policy::reference())

webassembly/F3DEmscriptenBindings.cxx

@@ -2,6 +2,7 @@ set(f3djsTests_list
   "test_camera"
   "test_engine"
   "test_image"
+  "test_interactor"
   "test_options"
   "test_render"
   "test_scene"

webassembly/testing/CMakeLists.txt

@@ -0,0 +1,81 @@
+import utils from "./utils.js";
+
+const settings = {
+  runBefore: (Module) => {
+    // does nothing but called for coverage
+    Module.engineInstance.getScene().clear();
+
+    const options = Module.engineInstance.getOptions();
+
+    // background must be set to black for proper blending with transparent canvas
+    options.setAsString("render.background.color", "#000000");
+
+    // display widgets
+    options.toggle("ui.axis");
+    options.toggle("render.grid.enable");
+  },
+
+  runAfter: (Module) => {
+    const interactor = Module.engineInstance.getInteractor();
+
+    // commands
+    interactor.initCommands();
+
+    let callbackCalled = false;
+
+    interactor.addCommand("foo", (args) => {
+      utils.assert(args[0] === "bar");
+      callbackCalled = true;
+    });
+
+    utils.assert(
+      interactor.getCommandActions().includes("foo"),
+      "command not added",
+    );
+
+    interactor.triggerCommand("foo bar baz", true);
+
+    utils.assert(callbackCalled, "command callback not called");
+
+    interactor.removeCommand("foo");
+    utils.assert(
+      !interactor.getCommandActions().includes("foo"),
+      "command not removed",
+    );
+
+    // animations
+    utils.assert(
+      !interactor.isPlayingAnimation(),
+      "animation should not be playing",
+    );
+
+    interactor.startAnimation();
+    utils.assert(
+      interactor.isPlayingAnimation(),
+      "animation should be playing",
+    );
+
+    interactor.stopAnimation();
+    utils.assert(
+      !interactor.isPlayingAnimation(),
+      "animation should not be playing",
+    );
+
+    interactor.toggleAnimation();
+    utils.assert(
+      interactor.isPlayingAnimation(),
+      "animation should be playing",
+    );
+
+    // only for coverage, do not test the actual feature yet
+    interactor.disableCameraMovement();
+    interactor.enableCameraMovement();
+    interactor.requestRender();
+    interactor.stop();
+  },
+};
+
+utils.runRenderTest(settings, {
+  data: "f3d.glb",
+  baseline: "TestWasmInteraction.png",
+});

webassembly/testing/test_interactor.js

@@ -26,6 +26,25 @@ const settings = {
     // default to +Z
     options.setAsString("scene.up_direction", "+Z");
   },
+
+  runAfter: (Module) => {
+    // check that space conversion works
+    const window = Module.engineInstance.getWindow();
+
+    const ptWorld = window.getWorldFromDisplay([0, 0, 0]);
+
+    utils.assert(
+      !utils.numArrayEquals(ptWorld, [0, 0, 0], 0.001),
+      "point has no been transformed",
+    );
+
+    const ptDisplay = window.getDisplayFromWorld(ptWorld);
+
+    utils.assert(
+      utils.numArrayEquals(ptDisplay, [0, 0, 0], 0.001),
+      "point has no been restored to original value",
+    );
+  },
 };
 
 utils.runRenderTest(settings, {

webassembly/testing/test_render.js

@@ -90,6 +90,17 @@ const utils = {
             scale * Module.canvas.clientHeight,
           );
 
+        utils.assert(
+          Module.engineInstance.getWindow().width ===
+            scale * Module.canvas.clientWidth,
+          "Failed to get width",
+        );
+        utils.assert(
+          Module.engineInstance.getWindow().height ===
+            scale * Module.canvas.clientHeight,
+          "Failed to get height",
+        );
+
         const scene = Module.engineInstance.getScene();
 
         utils.assert(