Resize on the web

[d33p-dev]

I managed to get Magnum to run in wasm on the web. Have some basics working like mouse click drag to pan camera and right click to rotate, etc with a simple cube. Works well. But, how do I handle resize? I can get the canvas to resize on the css/js side but when I resize the window, the contents of the 3d scene change (shrink/grow depending on if I'm making window larger or smaller, etc).

What's the basic approach I need to take to keep the magnum contents stay the same size and only reveal more or less of the 3d scene as the browser window changes dimension?

Thanks

[mosra]

Hi!

This behavior isn't specific to the web, it's working the same way natively as well. Assuming you have the application created with WindowFlag::Resizable, when the window or the canvas gets resized, the viewportEvent() gets called and inside you can implement any behavior you need. (Without the Resizable flag the native window is impossible to resize, and on the web the canvas element is scaled without the canvas framebuffer actually resizing, so you'll get the same image scaled, so either blurry or aliased.)

If you use the scene graph camera, the default behavior if you call SceneGraph::Camera::setViewport() from the viewport event is to preserve the field of view and either clip or extend based on aspect ratio to get a view on the same area regardless of the size.

To achieve what you want, easiest is to form a new projection matrix on every viewport event by specifying a size of the near plane derived from the window / canvas size (instead of using a FoV angle + aspect ratio). A minimal change to the Primitives example with the desired behavior looks like this:

diff --git a/src/primitives/PrimitivesExample.cpp b/src/primitives/PrimitivesExample.cpp
index 5477f3c2..4c649fba 100644
--- a/src/primitives/PrimitivesExample.cpp
+++ b/src/primitives/PrimitivesExample.cpp
@@ -49,6 +49,7 @@ class PrimitivesExample: public Platform::Application {
         explicit PrimitivesExample(const Arguments& arguments);
 
     private:
+        void viewportEvent(ViewportEvent& event) override;
         void drawEvent() override;
         void pointerReleaseEvent(PointerEvent& event) override;
         void pointerMoveEvent(PointerMoveEvent& event) override;
@@ -62,7 +63,8 @@ class PrimitivesExample: public Platform::Application {
 
 PrimitivesExample::PrimitivesExample(const Arguments& arguments):
     Platform::Application{arguments, Configuration{}
-        .setTitle("Magnum Primitives Example")}
+        .setTitle("Magnum Primitives Example")
+        .addWindowFlags(Configuration::WindowFlag::Resizable)}
 {
     GL::Renderer::enable(GL::Renderer::Feature::DepthTest);
     GL::Renderer::enable(GL::Renderer::Feature::FaceCulling);
@@ -73,11 +75,19 @@ PrimitivesExample::PrimitivesExample(const Arguments& arguments):
         Matrix4::rotationX(30.0_degf)*Matrix4::rotationY(40.0_degf);
     _projection =
         Matrix4::perspectiveProjection(
-            35.0_degf, Vector2{windowSize()}.aspectRatio(), 0.01f, 100.0f)*
+            Vector2{windowSize()}*0.000005f, 0.01f, 100.0f)*
         Matrix4::translation(Vector3::zAxis(-10.0f));
     _color = Color3::fromHsv({35.0_degf, 1.0f, 1.0f});
 }
 
+void PrimitivesExample::viewportEvent(ViewportEvent& event) {
+    GL::defaultFramebuffer.setViewport({{}, event.framebufferSize()});
+    _projection =
+        Matrix4::perspectiveProjection(
+            Vector2{windowSize()}*0.000005f, 0.01f, 100.0f)*
+        Matrix4::translation(Vector3::zAxis(-10.0f));
+}
+
 void PrimitivesExample::drawEvent() {
     GL::defaultFramebuffer.clear(
         GL::FramebufferClear::Color|GL::FramebufferClear::Depth);

If you use the scene graph camera, you'd call setProjectionMatrix() with this custom matrix instead, the camera.setViewport() is no longer necessary as you're handling the aspect ratio correction yourself already.

Hope this helps!

[d33p-dev]

Thanks! Magnum is working great on the web. Have some interesting things built with it already...

Low latency messaging bridge to JS/main thread via MessagePort (which is a nice optimized path to get messages to JS from the engine and vice versa when both are on the main thread and it maintained high throughput with great interactivity/responsiveness on the page/DOM side of things)... Then built the same approach but with Magnum in a web worker and that works equally well...

Even without instancing I was rendering 20K cubes with reflective material, a glow effect under each cube on top of a custom floor I design for my scene and getting 30% gpu usage on a MBPro M1 and perfect responsiveness in the browser... With instancing, just like all other tests I've been doing that were built more correctly, GPU use will drop back down to around 3-5% when I enable instancing for that cube test/scenario.

Magnum is excellent!! Thanks!

I did get resizing working and I'm looking at your suggestions to make sure I did it right/well.