raui 0.70.17

Renderer Agnostic User Interface
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

// This example shows how to render arbitrary geometry "raw" way into a texture
// that can be used as image in the UI - useful for more demanding rendering.

use raui_app::{
    Vertex,
    app::declarative::DeclarativeApp,
    render_worker::{RenderWorkerDescriptor, RenderWorkerTaskContext, RenderWorkersViewModel},
    third_party::spitfire_glow::{
        graphics::GraphicsBatch,
        renderer::{GlowBlending, GlowTextureFormat, GlowUniformValue},
    },
};
use raui_core::{
    make_widget, pre_hooks,
    widget::{
        component::image_box::{ImageBoxProps, image_box},
        context::WidgetContext,
        node::WidgetNode,
    },
};

fn use_app(ctx: &mut WidgetContext) {
    ctx.life_cycle.mount(|mut ctx| {
        // RenderWorkersViewModel is a special view model that stores render worker
        // surfaces that we can schedule render tasks to.
        let mut workers = ctx
            .view_models
            .view_model_mut(RenderWorkersViewModel::VIEW_MODEL)
            .unwrap()
            .write::<RenderWorkersViewModel>()
            .unwrap();
        // First we add worker with the same id as the widget id, to ensure its
        // uniqueness - we can use whatever id we want, but if workers are
        // intended to be personalized to widgets, it's good to use widget id.
        workers.add_worker(RenderWorkerDescriptor {
            id: ctx.id.to_string(),
            width: 256,
            height: 256,
            format: GlowTextureFormat::Rgba,
            color: [1.0, 1.0, 1.0, 0.0],
        });
        // Once we added worker, we schedule to render its content first time.
        workers.schedule_task(ctx.id.as_ref(), true, render_task);
    });

    ctx.life_cycle.unmount(|mut ctx| {
        let mut workers = ctx
            .view_models
            .view_model_mut(RenderWorkersViewModel::VIEW_MODEL)
            .unwrap()
            .write::<RenderWorkersViewModel>()
            .unwrap();
        // When widget is unmounted, we need to remove the worker,
        // otherwise it will be left in the view model for ever.
        workers.remove_worker(ctx.id.as_ref());
    });

    ctx.life_cycle.change(|mut ctx| {
        let mut workers = ctx
            .view_models
            .view_model_mut(RenderWorkersViewModel::VIEW_MODEL)
            .unwrap()
            .write::<RenderWorkersViewModel>()
            .unwrap();
        // When widget is changed, we need to update the worker surface content.
        workers.schedule_task(ctx.id.as_ref(), true, render_task);
    });
}

#[pre_hooks(use_app)]
fn app(mut ctx: WidgetContext) -> WidgetNode {
    // Show rendered worker surface as image with aspect ratio to not stretch it.
    make_widget!(image_box)
        .with_props(ImageBoxProps::image_aspect_ratio(ctx.id.as_ref(), false))
        .into()
}

fn main() {
    DeclarativeApp::simple("Render Workers", make_widget!(app));
}

// Function representing render task that will paint some surface content.
fn render_task(ctx: RenderWorkerTaskContext) {
    ctx.graphics.state.stream.batch_optimized(GraphicsBatch {
        shader: Some(ctx.colored_shader.clone()),
        uniforms: [(
            "u_projection_view".into(),
            GlowUniformValue::M4(
                ctx.graphics
                    .state
                    .main_camera
                    .world_matrix()
                    .into_col_array(),
            ),
        )]
        .into_iter()
        .collect(),
        textures: Default::default(),
        blending: GlowBlending::Alpha,
        scissor: None,
        wireframe: false,
    });
    ctx.graphics.state.stream.quad([
        Vertex {
            position: [
                ctx.graphics.state.main_camera.screen_size.x * 0.25,
                ctx.graphics.state.main_camera.screen_size.y * 0.25,
            ],
            uv: [0.0, 0.0, 0.0],
            color: [1.0, 0.0, 0.0, 1.0],
        },
        Vertex {
            position: [
                ctx.graphics.state.main_camera.screen_size.x * 0.75,
                ctx.graphics.state.main_camera.screen_size.y * 0.25,
            ],
            uv: [0.0, 0.0, 0.0],
            color: [0.0, 1.0, 0.0, 1.0],
        },
        Vertex {
            position: [
                ctx.graphics.state.main_camera.screen_size.x * 0.75,
                ctx.graphics.state.main_camera.screen_size.y * 0.75,
            ],
            uv: [0.0, 0.0, 0.0],
            color: [0.0, 0.0, 1.0, 1.0],
        },
        Vertex {
            position: [
                ctx.graphics.state.main_camera.screen_size.x * 0.25,
                ctx.graphics.state.main_camera.screen_size.y * 0.75,
            ],
            uv: [0.0, 0.0, 0.0],
            color: [1.0, 1.0, 0.0, 1.0],
        },
    ]);
}