Skip to content

AR Panels

Overview

M2ArPanel is a 2D panel positioned in 3D world space. It acts as a billboard - always facing the user - and contains standard HUD drawables (text, shapes, images) laid out in 2D pixel coordinates within the panel.

This is the most common way to display information in AR: text labels, status indicators, navigation cues, and UI elements anchored to real-world positions.

Positioning Modes

M2ArPanel supports four positioning modes:

Direct ENU Coordinates

val panel = M2ArPanel(east = 0f, north = 3f, up = 1f)

Eye-Relative (Current Look Direction)

// Place at wherever the user is currently looking
val panel = M2ArPanel(qtrn = lastM2Quaternion)

Eye-Relative with Offset

// Place forward and to the right of the user's gaze
val panel = M2ArPanel(
    qtrn = lastM2Quaternion,
    xEye = 0.5f,    // right
    yEye = 0f,      // level
    zEye = -2f      // forward
)

Geographic Coordinates

// Anchor to a real-world lat/lon/alt
val target = GeoLocation(lat = 32.0853, lon = 34.7818, alt = 0.0)
val user = GeoLocation(lat = 32.0850, lon = 34.7815, alt = 0.0)
val panel = M2ArPanel(targetPosition = target, userPosition = user)

Adding Content to a Panel

Add standard HUD drawables as children:

val panel = M2ArPanel(east = 0f, north = 5f, up = 1.5f)
panel.setWidthHeight(200f, 60f)

val label = M2Text()
label.setResource(M2FontResource.fontMedium)
    .setText("Waypoint A")
    .setTextAlign(Align.CenterHorizontal)
    .setX(100f).setY(30f)
    .setColor(M2Color.White)

panel.add(label)
screen.add(panel) // automatically routed to AR root tree

Anchor Points

By default, the panel's center is pinned to the world position. Use M2LosAnchorPoint to change which point is pinned:

Anchor Description
M2LosAnchorPoint.Center Center of panel (default)
M2LosAnchorPoint.TopLeft Top-left corner
M2LosAnchorPoint.TopRight Top-right corner
M2LosAnchorPoint.BottomLeft Bottom-left corner
M2LosAnchorPoint.BottomRight Bottom-right corner 
panel.setAnchorPoint(M2LosAnchorPoint.BottomLeft)

Updating Position

Move a panel after creation:

// Direct world position
panel.setWorldPosition(east = 1f, north = 4f, up = 2f)

// Eye-relative (tracks where the user looks)
panel.setEyePosition(currentQuaternion)

// Geographic
panel.setGeoPosition(targetPosition = newTarget, userPosition = newUserLocation)

Hit Testing

M2ArPanel supports three hit testing methods:

// 2D display-coordinate hit test
val hit = panel.hitTest(screenPoint)

// Test against the user's current gaze direction
val hit = panel.hitTest()

// 3D ray intersection in world space
val hit = panel.hitTest(worldDirectionVec, returnSelf = true)

Depth Ordering

AR panels are automatically sorted by distance from the user - farthest panels render first (painter's algorithm). When you update a panel's world position, the owning screen re-sorts the AR tree.

See Also