tiramisu/renderer

Renderer host component and renderer-level attributes.

A renderer is the bridge between Lustre’s declarative view tree and the Three.js runtime managed by Tiramisu. Each renderer owns one canvas, one render loop, and one nested tiramisu.scene.

Most applications use this module indirectly through tiramisu.renderer, while using the attribute helpers here to configure the renderer itself.

tiramisu.renderer(
  "main-renderer",
  [
    renderer.width(1280),
    renderer.height(720),
    renderer.antialias(True),
  ],
  [tiramisu.scene("scene", [], [])],
)

Types

Tick

</>

Context provided on each animation frame tick.

Contains timing and input information useful for smooth animations and responsive game controls.

pub type Tick {
  Tick(
    delta_time: duration.Duration,
    timestamp: timestamp.Timestamp,
  )
}

Constructors

```
Tick(
  delta_time: duration.Duration,
  timestamp: timestamp.Timestamp,
)
```
Arguments

delta_time

Time elapsed since the last frame (typically ~16ms at 60fps). Use duration.to_seconds() to convert to a Float for animation math.

timestamp

The timestamp when this frame was rendered. Useful for time-based effects or synchronized animations.

Values

alpha

</>

pub fn alpha(enabled: Bool) -> attribute.Attribute(msg)

Enable or disable a transparent renderer background.

antialias

</>

pub fn antialias(enabled: Bool) -> attribute.Attribute(msg)

Enable or disable antialiasing on the renderer.

height

</>

pub const height: fn(Int) -> attribute.Attribute(a)

Set the renderer canvas height in CSS pixels.

on_tick

</>

pub fn on_tick(
  to_msg: fn(Tick) -> msg,
) -> attribute.Attribute(msg)

Listen for per-frame tick events emitted by the renderer.

This is the main entry point for animation and simulation work in a scene. The callback receives a Tick containing the frame delta and timestamp.

width

</>

pub const width: fn(Int) -> attribute.Attribute(b)

Set the renderer canvas width in CSS pixels.

Constructors

Arguments