Skip to content

Rendering Pipeline

This page focuses on the draw loop, rendering rate, and data flow. For an overview of the on-board rendering model and screen/drawable lifecycle, see Lifecycle.

Data Flow

Your App            SDK Engine           BLE Transport       Glasses Render Engine
   |                    |                     |                      |
   |-- Create drawables -->                   |                      |
   |-- screen.add(drawable) -->               |                      |
   |                    |-- Object defs ------>|-- Create objects --->|
   |                    |   and resources      |   on-device         |
   |                    |                     |                      |
   |  [Every Tick]      |                     |                      |
   |-- Update props --->|                     |                      |
   |                    |-- Diff state        |                      |
   |                    |-- Deltas only ----->|-- Apply changes ---->|
   |                    |                     |                      |
   |                    |                     |   [67 Hz On-Device]  |
   |                    |                     |      Render frame <--|

Draw Loop

The M2ScreenService drives a draw loop at the configured RenderingRate:

  1. The screen's onBeforeDraw(timestamp) callback fires - this is where you update drawable properties.
  2. The SDK serializes any changed properties as compact command deltas.
  3. Deltas are sent to the glasses over BLE.
  4. The glasses apply the changes to their on-device scene graph.
  5. The glasses render the next frame independently.

Rendering Rate

The draw loop tick rate is configured per screen via M2Screen.setRenderingRate():

Rate Tick Interval Use Case
RenderingRate.PowerSaving 480 ms Static or rarely-updated content
RenderingRate.Normal 45 ms Default for most applications
RenderingRate.Fast 30 ms Frequently-updated content

Note

The rendering rate controls how often the SDK sends updates to the glasses, not how often the glasses render.

Example

class MyScreen : M2FullScreen() {
    private val title = M2Text()

    override fun onCreate() {
        title.setFont(M2FontResource.fontMedium)
            .setText("Hello Maverick AI!")
            .setAlign(Align.CenterHorizontal)
            .setX(width / 2f).setY(height / 2f)
        add(title)
    }

    override fun onTouch(touch: Touch) {
        if (touch == Touch.Tap) {
            title.setText("Tapped!")
        }
    }
}

// Add screen to the stack
Evs.screenService.addScreen(MyScreen())

See Also