Orthographic camera

Author: mhochsteger

webgpu/camera.py

@@ -3,6 +3,67 @@
 from .uniforms import BaseBinding, Binding, UniformBase, ct
 from .utils import read_shader_file, Lock
 
+# Shared frustum constants. The camera sits at distance FOCAL from the world
+# origin (the view matrix translates z by -FOCAL); content is scaled to ~unit
+# size by the transform, so NEAR/FAR comfortably bracket it.
+NEAR = 0.1
+FAR = 10
+FOV = 45
+FOCAL = 3
+
+
+def _projection_matrix(aspect, orthographic=False, zoom=1.0):
+    """Build the 4x4 projection matrix for the current aspect ratio.
+
+    Perspective and orthographic share the same vertical field of view: the
+    orthographic half-height is the perspective half-height measured at the
+    focal plane (distance FOCAL from the camera), so both projections render the
+    centered content at the same on-screen size.
+    """
+    if orthographic:
+        top = FOCAL * np.tan(np.radians(FOV) / 2) * zoom
+        height = 2 * top
+        width = aspect * height
+
+        x = 2 / width
+        y = 2 / height
+        c = -1 / (FAR - NEAR)
+        d = -NEAR / (FAR - NEAR)
+
+        return np.array(
+            [
+                [x, 0, 0, 0],
+                [0, y, 0, 0],
+                [0, 0, c, d],
+                [0, 0, 0, 1],
+            ]
+        )
+
+    top = NEAR * (np.tan(np.radians(FOV) / 2)) * zoom
+    height = 2 * top
+    width = aspect * height
+    left = -0.5 * width
+    right = left + width
+    bottom = top - height
+
+    x = 2 * NEAR / (right - left)
+    y = 2 * NEAR / (top - bottom)
+
+    a = (right + left) / (right - left)
+    b = (top + bottom) / (top - bottom)
+
+    c = -FAR / (FAR - NEAR)
+    d = (-FAR * NEAR) / (FAR - NEAR)
+
+    return np.array(
+        [
+            [x, 0, a, 0],
+            [0, y, b, 0],
+            [0, 0, c, d],
+            [0, 0, -1, 0],
+        ]
+    )
+
 
 class CameraUniforms(UniformBase):
     """Uniforms class, derived from ctypes.Structure to ensure correct memory layout"""
@@ -21,49 +82,24 @@ class CameraUniforms(UniformBase):
         ("dpr", ct.c_float),
     ]
 
-    def update(self, transform, canvas, write_buffer=True):
+    def update(self, transform, canvas, write_buffer=True, orthographic=False):
         """Recompute projection/model-view matrices from transform and canvas dimensions.
 
         Returns (model_view_proj, model_view) matrices, or (None, None) if canvas is unavailable.
 
         With ``write_buffer`` False the matrices are computed but the GPU buffer
         is not uploaded (JS-engine mode, where the browser owns the camera).
+
+        With ``orthographic`` True a parallel projection is used instead of the
+        perspective default.
         """
         if canvas is None or canvas.height == 0:
             return None, None
 
-        near = 0.1
-        far = 10
-        fov = 45
         aspect = canvas.width / canvas.height
+        proj_mat = _projection_matrix(aspect, orthographic)
 
-        zoom = 1.0
-        top = near * (np.tan(np.radians(fov) / 2)) * zoom
-        height = 2 * top
-        width = aspect * height
-        left = -0.5 * width
-        right = left + width
-        bottom = top - height
-
-        x = 2 * near / (right - left)
-        y = 2 * near / (top - bottom)
-
-        a = (right + left) / (right - left)
-        b = (top + bottom) / (top - bottom)
-
-        c = -far / (far - near)
-        d = (-far * near) / (far - near)
-
-        proj_mat = np.array(
-            [
-                [x, 0, a, 0],
-                [0, y, b, 0],
-                [0, 0, c, d],
-                [0, 0, -1, 0],
-            ]
-        )
-
-        view_mat = np.array([[1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, -3], [0, 0, 0, 1]])
+        view_mat = np.array([[1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, -FOCAL], [0, 0, 0, 1]])
         model_view = view_mat @ transform.mat
         model_view_proj = proj_mat @ model_view
         normal_mat = np.linalg.inv(model_view)
@@ -218,6 +254,7 @@ class Camera:
 
     def __init__(self):
         self.transform = Transform()
+        self.orthographic = False
         self._observers = []
         self._observers_lock = Lock()
         self._is_moving = False
@@ -226,8 +263,9 @@ def __init__(self):
         self._dblclick_handlers = {}
 
     def __setstate__(self, state):
-        """Restore pickled camera state (only the transform)."""
+        """Restore pickled camera state (transform and projection mode)."""
         self.transform = state["transform"]
+        self.orthographic = state.get("orthographic", False)
         self._observers = []
         self._observers_lock = Lock()
         self._is_moving = False
@@ -237,7 +275,18 @@ def __setstate__(self, state):
 
     def __getstate__(self):
         """Return a minimal picklable representation of the camera."""
-        return {"transform": self.transform}
+        return {"transform": self.transform, "orthographic": self.orthographic}
+
+    def set_orthographic(self, value: bool):
+        """Switch between orthographic and perspective projection.
+
+        Notifies observers (which pushes the change to the JS engine in
+        JS-engine mode) only when the mode actually changes.
+        """
+        value = bool(value)
+        if value != self.orthographic:
+            self.orthographic = value
+            self._notify_observers()
 
     def register_observer(self, callback):
         """Register a callback to be called when the camera transform changes.

webgpu/engine/camera.js

@@ -193,6 +193,7 @@ class Transform {
 class Camera {
   constructor() {
     this.transform = new Transform();
+    this.orthographic = false;
     this._observers = [];
   }
 
@@ -234,29 +235,42 @@ class Camera {
   updateUniforms(width, height) {
     if (height === 0) return null;
 
-    // --- Projection (matches Python exactly) ---
-    const near = 0.1, far = 10, fov = 45;
+    // --- Projection (matches Python camera.py exactly) ---
+    const near = 0.1, far = 10, fov = 45, focal = 3;
     const aspect = width / height;
     const zoom = 1.0;
-    const top = near * Math.tan(fov * DEG2RAD / 2) * zoom;
-    const h = 2 * top;
-    const w = aspect * h;
-    const left = -0.5 * w;
-    const right = left + w;
-    const bottom = top - h;
-
-    const px = 2 * near / (right - left);
-    const py = 2 * near / (top - bottom);
-    const a = (right + left) / (right - left);
-    const b = (top + bottom) / (top - bottom);
-    const c = -far / (far - near);
-    const d = (-far * near) / (far - near);
 
     const proj = new Float64Array(16);
-    proj[0] = px; proj[2] = a;
-    proj[5] = py; proj[6] = b;
-    proj[10] = c; proj[11] = d;
-    proj[14] = -1;
+    if (this.orthographic) {
+      // Parallel projection: half-height matches perspective at the focal plane.
+      const top = focal * Math.tan(fov * DEG2RAD / 2) * zoom;
+      const h = 2 * top;
+      const w = aspect * h;
+      proj[0] = 2 / w;
+      proj[5] = 2 / h;
+      proj[10] = -1 / (far - near);
+      proj[11] = -near / (far - near);
+      proj[15] = 1;
+    } else {
+      const top = near * Math.tan(fov * DEG2RAD / 2) * zoom;
+      const h = 2 * top;
+      const w = aspect * h;
+      const left = -0.5 * w;
+      const right = left + w;
+      const bottom = top - h;
+
+      const px = 2 * near / (right - left);
+      const py = 2 * near / (top - bottom);
+      const a = (right + left) / (right - left);
+      const b = (top + bottom) / (top - bottom);
+      const c = -far / (far - near);
+      const d = (-far * near) / (far - near);
+
+      proj[0] = px; proj[2] = a;
+      proj[5] = py; proj[6] = b;
+      proj[10] = c; proj[11] = d;
+      proj[14] = -1;
+    }
 
     // --- View matrix: identity with z-translation = -3 ---
     const view = mat4Identity();

webgpu/engine/engine.js

@@ -665,6 +665,15 @@ class RenderEngine {
     this._notifyCameraChanged(true);
   }
 
+  /** Live-mode hook: host switches between orthographic and perspective. */
+  setProjection(orthographic) {
+    if (!this.camera) return;
+    this.camera.orthographic = !!orthographic;
+    this._updateCameraBuffer();
+    if (this._cameraBufferId) this.computeDAG.markDirty(this._cameraBufferId);
+    this.render();
+  }
+
   /** Live-mode hook: host sets the background clear color [r,g,b,a] (0..1). */
   setClearColor(rgba) {
     this._clearColorOverride = rgba || null;
@@ -1157,6 +1166,16 @@ class RenderEngine {
 
     pass.end();
     device.queue.submit([encoder.finish()]);
+
+    // Return the exact camera transform the depth was rendered with, so the
+    // host reconstructs pick positions with a matching model_view_projection.
+    // (Browser-side zoom/pan reach the host's camera mirror only via the
+    // debounced on_camera_changed, so without this the host's matrix can lag
+    // the rendered depth and pick coordinates come out mis-scaled.)
+    return {
+      matrix: Array.from(this.camera.transform._mat),
+      center: Array.from(this.camera.transform._center),
+    };
   }
 
   // =========================================================================

webgpu/renderer.py

@@ -119,6 +119,7 @@ def update_buffers(self):
         mvp, _ = self._camera_uniforms.update(
             self.camera.transform, self.canvas,
             write_buffer=not self.skip_camera_buffer_write,
+            orthographic=self.camera.orthographic,
         )
         if mvp is not None:
             self.model_view_proj = mvp

webgpu/scene.py

@@ -521,10 +521,13 @@ def _render_select_via_engine(self, canvas):
         buffers. The host still reads the texture back (caller). Best-effort:
         on failure the select buffer is simply left cleared."""
         try:
-            self._js_engine.renderSelectInto(
+            cam = self._js_engine.renderSelectInto(
                 platform.toJS(canvas.select_texture),
                 platform.toJS(canvas.select_depth_texture),
             )
+            # Sync the Python camera mirror to the transform the engine used for picking
+            if self._set_camera_transform_from_payload(cam):
+                self.options.update_buffers()
         except Exception as e:
             print(f"warning: js_engine.renderSelectInto() failed: {e}")
 
@@ -920,6 +923,7 @@ def _on_camera_changed(self):
                     platform.toJS(t._mat.flatten().tolist()),
                     platform.toJS(list(center)),
                 )
+                self._js_engine.setProjection(self.options.camera.orthographic)
             except Exception as e:
                 print(f"warning: js_engine.setCameraTransform() failed: {e}")
             return
@@ -929,27 +933,33 @@ def _on_camera_changed(self):
             self.options.update_buffers()
         self.render()
 
-    def _apply_camera_from_js(self, payload):
-        """Mirror a JS-engine camera move back into the Python camera (for
-        bookmarks/screenshots/picking). Does not re-render or push back to JS."""
+    def _set_camera_transform_from_payload(self, payload):
+        """Apply an engine camera payload ({matrix, center}) to the Python
+        camera mirror. Returns True on success."""
         import numpy as np
 
         try:
-            try:
-                import pyodide.ffi
+            import pyodide.ffi
 
-                if isinstance(payload, pyodide.ffi.JsProxy):
-                    payload = payload.to_py()
-            except ImportError:
-                pass
-            mat = list(payload["matrix"])
-            center = list(payload["center"])
-            t = self.options.camera.transform
-            t._mat = np.array(mat, dtype=float).reshape(4, 4)
-            t._center = np.array(center, dtype=float)
-            if self._render_mutex is not None:
-                with self._render_mutex:
-                    self._select_buffer_valid = False
+            if isinstance(payload, pyodide.ffi.JsProxy):
+                payload = payload.to_py()
+        except ImportError:
+            pass
+        if not payload:
+            return False
+        t = self.options.camera.transform
+        t._mat = np.array(list(payload["matrix"]), dtype=float).reshape(4, 4)
+        t._center = np.array(list(payload["center"]), dtype=float)
+        return True
+
+    def _apply_camera_from_js(self, payload):
+        """Mirror a JS-engine camera move back into the Python camera (for
+        bookmarks/screenshots/picking). Does not re-render or push back to JS."""
+        try:
+            if self._set_camera_transform_from_payload(payload):
+                if self._render_mutex is not None:
+                    with self._render_mutex:
+                        self._select_buffer_valid = False
         except Exception as e:
             print(f"warning: apply camera from js failed: {e}")