Module renderer

Tessera Renderer

The core rendering system for the Tessera UI framework. This module provides the main Renderer struct that manages the application lifecycle, event handling, and rendering pipeline for cross-platform UI applications.

Overview

The renderer is built on top of WGPU and winit, providing:

• Cross-platform window management (Windows, Linux, macOS, Android)
• Event handling (mouse, touch, keyboard, IME)
• Pluggable rendering pipeline system
• Component tree management and rendering
• Performance monitoring and optimization

Architecture

The renderer follows a modular architecture with several key components:

• app: WGPU application management and surface handling
• command: Rendering command abstraction
• compute: Compute shader pipeline management
• drawer: Drawing pipeline management and execution

Basic Usage

The most common way to use the renderer is through the Renderer::run method:

use tessera_ui::Renderer;

// Define your UI entry point
fn my_app() {
    // Your UI components go here
}

// Run the application
Renderer::run(
    my_app,  // Entry point function
    |_app| {
        // Register rendering pipelines
        // tessera_ui_basic_components::pipelines::register_pipelines(app);
    }
).unwrap();

Configuration

You can customize the renderer behavior using TesseraConfig:

use tessera_ui::{Renderer, renderer::TesseraConfig};

let config = TesseraConfig {
    sample_count: 8,  // 8x MSAA
};

Renderer::run_with_config(
    || { /* my_app */ },
    |_app| { /* register_pipelines */ },
    config
)?;

Platform Support

Desktop Platforms (Windows, Linux, macOS)

use tessera_ui::Renderer;
use tessera_ui_macros::tessera;

#[tessera] // You need to mark every component function with `#[tessera_macros::tessera]`
fn entry_point() {}
fn register_pipelines(_: &mut tessera_ui::renderer::WgpuApp) {}

Renderer::run(entry_point, register_pipelines)?;

Android

use tessera_ui::Renderer;
use winit::platform::android::activity::AndroidApp;

fn entry_point() {}
fn register_pipelines(_: &mut tessera_ui::renderer::WgpuApp) {}

fn android_main(android_app: AndroidApp) {
    Renderer::run(entry_point, register_pipelines, android_app).unwrap();
}

Event Handling

The renderer automatically handles various input events:

• Mouse Events: Click, move, scroll, enter/leave
• Touch Events: Multi-touch support with gesture recognition
• Keyboard Events: Key press/release, with platform-specific handling
• IME Events: Input method support for international text input

Events are processed and forwarded to the component tree for handling.

Performance Monitoring

The renderer includes built-in performance monitoring that logs frame statistics when performance drops below 60 FPS:

WARN Jank detected! Frame statistics:
    Build tree cost: 2.1ms
    Draw commands cost: 1.8ms
    Render cost: 12.3ms
    Total frame cost: 16.2ms
    Fps: 61.73

Examples

Simple Counter Application

use std::sync::{Arc, atomic::{AtomicU32, Ordering}};

use tessera_ui::{Renderer, Color, Dp};
use tessera_ui_macros::tessera;

struct AppState {
    count: AtomicU32,
}

#[tessera] // You need to mark every component function with `#[tessera_macros::tessera]`
fn counter_app(state: Arc<AppState>) {
    let _count = state.count.load(Ordering::Relaxed);
    // Your UI components would go here
    // This is a simplified example without actual UI components
}

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let state = Arc::new(AppState {
        count: AtomicU32::new(0),
    });

    Renderer::run(
        move || counter_app(state.clone()),
        |_app| {
            // Register your rendering pipelines here
            // tessera_ui_basic_components::pipelines::register_pipelines(app);
        }
    )?;
     
    Ok(())
}

Custom Rendering Pipeline

use tessera_ui::{Renderer, renderer::WgpuApp};

fn register_custom_pipelines(app: &mut WgpuApp) {
    // Register basic components first
    // tessera_ui_basic_components::pipelines::register_pipelines(app);
     
    // Add your custom pipelines
    // app.drawer.register_pipeline("my_custom_shader", my_pipeline);
}

fn main() -> Result<(), Box<dyn std::error::Error>> {
    Renderer::run(
        || { /* your UI */ },
        register_custom_pipelines
    )?;
    Ok(())
}

Re-exports

pub use app::WgpuApp;

pub use command::Command;

pub use compute::ComputablePipeline;

pub use compute::ComputePipelineRegistry;

pub use drawer::BarrierRequirement;

pub use drawer::DrawCommand;

pub use drawer::DrawablePipeline;

pub use drawer::PipelineRegistry;

Modules

app

command

Unified command system for rendering and computation.

compute

A unified system for GPU-based computation.

drawer

Graphics rendering pipeline management.

Structs

Renderer

The main renderer struct that manages the application lifecycle and rendering.

TesseraConfig

Configuration for the Tessera runtime and renderer.