LineStrips2D displayed 3D in web

[karolmajek]

Bug description

LineStrips2D are displayed with non zero 3rd axis values in Web GUI
Instead of being displayed sticking to the image plane - as in native app

Image+LineStrips2D natively [Reference - this wokrs good!]

rr.init("rerun_example_image", spawn=True)
# rr.serve_web()

Image+LineStrips2D in Web GUI [this behavior is unexpected/surprising/just wrong]

rr.init("rerun_example_image", spawn=False)
rr.serve_web()

trajectories are in 3D in front of the image

To Reproduce
Steps to reproduce the behavior:

import numpy as np
import rerun as rr
import random

img = np.ones((1080, 1920, 3))

rr.init("rerun_example_image", spawn=False)
rr.serve_web()

rr.log("image", rr.Image(img[:, :, ::-1]))


# Parameters
n = 1000  # Number of trajectories
xmin, xmax = 0, img.shape[1]  # X range
ymin, ymax = 0, img.shape[0]  # Y range
step_min, step_max = 0.1, 2.0  # Minimum and maximum step size

# Generate and log trajectories
for i in range(n):
    # Generate random length for the trajectory
    trajectory_length = random.randint(3, 1000)

    # Start the trajectory at a random initial point
    x, y = random.uniform(xmin, xmax), random.uniform(ymin, ymax)
    trajectory = [[x, y]]

    for _ in range(trajectory_length - 1):
        # Generate a small random step
        step_x = random.uniform(-step_max, step_max)
        step_y = random.uniform(-step_max, step_max)

        # Update the current position with constraints
        x = max(xmin, min(xmax, x + step_x))
        y = max(ymin, min(ymax, y + step_y))

        trajectory.append(
            [
                x,
                y,
            ]
        )

    # Log the trajectory to rerun
    rr.log(f"trajectory_{i}", rr.LineStrips2D([trajectory]))

Expected behavior
to get the same as in native - all trajectories placed on image plane

Desktop (please complete the following information):

lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 24.04.1 LTS
Release:	24.04
Codename:	noble

Rerun version

rerun --version
rerun-cli 0.20.1 (default map_view nasm native_viewer release web_viewer) [rustc 1.79.0 (129f3b996 2024-06-10), LLVM 18.1.7] x86_64-unknown-linux-gnu release-0.20.1 b85fa9f, built 2024-11-21T08:18:32Z
Video features: av1 default ffmpeg nasm serde

Additional context
Python

python -V
Python 3.12.3

Browser:

brave-browser --version
Brave Browser 131.1.73.89 

[Wumpf]

Took me a bit to get the issue from reading it, but was glaring obvious with the repo (thanks for adding that!!)

Repros fine in Firefox on Mac:

firefox.mov

As I suspected this does not happen in Chrome where we use WebGPU:

chrome.mov

(also this is horribly slow in both cases, which is also a huge problem but obviously orthogonal)

This is because we use depth offsetting for the layering right now (to be changed as part of work on transparency - the connection is that we don't control draw order in the renderer very well right now) and on WebGL we have to exaggerate the depth offset a lot (to deal with -1:1 depth range conversions [...]).
There surely is a more adhoc fix to this, but at this point we really have to rip of the bandaid of converting depth offset with draw order.

Making this ticket strongly related to:

• Depth offset moves lines and points in (Web)GL #4787