diff --git a/Cargo.toml b/Cargo.toml
index 70f2cdd..31bb957 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -22,7 +22,7 @@ default = [
 
 [dependencies]
 winit = {version = "0.24.0", features = ["web-sys"]}
-bevy = {version = "0.4.0", default-features = false}
+bevy = { git = "https://github.com/bevyengine/bevy/", rev="c2a427f1a38db6b1d9798e631a7da7a8507fe18c", default-features=false }
 regex = "1.4"
 cfg-if = "1.0.0"
 js-sys = "0.3.45"
@@ -46,8 +46,8 @@ web-sys = {version = "0.3.45", features = [
 
 [dev-dependencies]
 compile-time-run = "0.2"
-rand = "0.7"
-getrandom = {version="0.1", features=["wasm-bindgen"]}
+rand = "0.8"
+getrandom = { version = "0.1", features = ["wasm-bindgen"] }
 
 [profile.release]
 opt-level = 's'
@@ -64,7 +64,7 @@ name = "sprite_sheet"
 path = "examples/2d/sprite_sheet.rs"
 
 # disabled as it do not compile on github Actions
-# [[example]]
+#[[example]]
 # name = "contributors"
 # path = "examples/2d/contributors.rs"
 
diff --git a/examples/2d/contributors.rs b/examples/2d/contributors.rs
index 88e1d40..061338f 100644
--- a/examples/2d/contributors.rs
+++ b/examples/2d/contributors.rs
@@ -1,6 +1,10 @@
 use bevy::prelude::*;
 use rand::{prelude::SliceRandom, Rng};
-use std::collections::BTreeSet;
+use std::{
+    collections::BTreeSet,
+    io::{BufRead, BufReader},
+    process::Stdio,
+};
 
 fn main() {
     App::build()
@@ -36,8 +40,8 @@ struct Velocity {
 const GRAVITY: f32 = -9.821 * 100.0;
 const SPRITE_SIZE: f32 = 75.0;
 
-const COL_DESELECTED: Color = Color::rgb_linear(0.03, 0.03, 0.03);
-const COL_SELECTED: Color = Color::rgb_linear(5.0, 5.0, 5.0);
+const COL_DESELECTED: Color = Color::rgba_linear(0.03, 0.03, 0.03, 0.92);
+const COL_SELECTED: Color = Color::WHITE;
 
 const SHOWCASE_TIMER_SECS: f32 = 3.0;
 
@@ -47,11 +51,12 @@ fn setup(
     mut materials: ResMut<Assets<ColorMaterial>>,
 ) {
     let contribs = contributors();
+
     let texture_handle = asset_server.load("branding/icon.png");
 
     commands
-        .spawn(Camera2dBundle::default())
-        .spawn(CameraUiBundle::default());
+        .spawn(OrthographicCameraBundle::new_2d())
+        .spawn(UiCameraBundle::default());
 
     let mut sel = ContributorSelection {
         order: vec![],
@@ -61,15 +66,15 @@ fn setup(
     let mut rnd = rand::thread_rng();
 
     for name in contribs {
-        let pos = (rnd.gen_range(-400.0, 400.0), rnd.gen_range(0.0, 400.0));
-        let dir = rnd.gen_range(-1.0, 1.0);
+        let pos = (rnd.gen_range(-400.0..400.0), rnd.gen_range(0.0..400.0));
+        let dir = rnd.gen_range(-1.0..1.0);
         let velocity = Vec3::new(dir * 500.0, 0.0, 0.0);
         let col = gen_color(&mut rnd);
 
         // some sprites should be flipped
         let flipped = rnd.gen_bool(0.5);
 
-        let mut transform = Transform::from_translation(Vec3::new(pos.0, pos.1, 0.0));
+        let mut transform = Transform::from_xyz(pos.0, pos.1, 0.0);
         transform.scale.x *= if flipped { -1.0 } else { 1.0 };
 
         commands
@@ -108,13 +113,25 @@ fn setup(
                 ..Default::default()
             },
             text: Text {
-                value: "Contributor showcase".to_string(),
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                style: TextStyle {
-                    font_size: 60.0,
-                    color: Color::WHITE,
-                    ..Default::default()
-                },
+                sections: vec![
+                    TextSection {
+                        value: "Contributor showcase".to_string(),
+                        style: TextStyle {
+                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                            font_size: 60.0,
+                            color: Color::WHITE,
+                        },
+                    },
+                    TextSection {
+                        value: "".to_string(),
+                        style: TextStyle {
+                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                            font_size: 60.0,
+                            color: Color::WHITE,
+                        },
+                    },
+                ],
+                ..Default::default()
             },
             ..Default::default()
         });
@@ -127,9 +144,9 @@ fn select_system(
     mut materials: ResMut<Assets<ColorMaterial>>,
     mut sel: ResMut<ContributorSelection>,
     mut dq: Query<Mut<Text>, With<ContributorDisplay>>,
-    time: Res<Time>,
     mut tq: Query<Mut<Timer>, With<SelectTimer>>,
     mut q: Query<(&Contributor, &Handle<ColorMaterial>, &mut Transform)>,
+    time: Res<Time>,
 ) {
     let mut timer_fired = false;
     for mut t in tq.iter_mut() {
@@ -190,7 +207,9 @@ fn select(
 
     trans.translation.z = 100.0;
 
-    text.value = format!("Contributor: {}", name);
+    text.sections[0].value = "Contributor: ".to_string();
+    text.sections[1].value = name.to_string();
+    text.sections[1].style.color = mat.color;
 
     Some(())
 }
@@ -249,7 +268,7 @@ fn collision_system(
         if bottom < ground {
             t.translation.y = ground + SPRITE_SIZE / 2.0;
             // apply an impulse upwards
-            v.translation.y = rnd.gen_range(700.0, 1000.0);
+            v.translation.y = rnd.gen_range(700.0..1000.0);
         }
         if top > ceiling {
             t.translation.y = ceiling - SPRITE_SIZE / 2.0;
@@ -291,6 +310,7 @@ fn contributors() -> Contributors {
         "log",
         "--pretty=format:%an"
     );
+
     stdout.split("\n").map(|x| x.to_string()).collect()
 }
 
@@ -299,9 +319,14 @@ fn contributors() -> Contributors {
 /// Because there is no `Mul<Color> for Color` instead `[f32; 3]` is
 /// used.
 fn gen_color(rng: &mut impl Rng) -> [f32; 3] {
-    let r = rng.gen_range(0.2, 1.0);
-    let g = rng.gen_range(0.2, 1.0);
-    let b = rng.gen_range(0.2, 1.0);
-    let v = Vec3::new(r, g, b);
-    v.normalize().into()
+    loop {
+        let rgb = rng.gen();
+        if luminance(rgb) >= 0.6 {
+            break rgb;
+        }
+    }
+}
+
+fn luminance([r, g, b]: [f32; 3]) -> f32 {
+    0.299 * r + 0.587 * g + 0.114 * b
 }
diff --git a/examples/2d/sprite.rs b/examples/2d/sprite.rs
index d9082e0..ec7da91 100644
--- a/examples/2d/sprite.rs
+++ b/examples/2d/sprite.rs
@@ -14,7 +14,7 @@ fn setup(
 ) {
     let texture_handle = asset_server.load("branding/icon.png");
     commands
-        .spawn(Camera2dBundle::default())
+        .spawn(OrthographicCameraBundle::new_2d())
         .spawn(SpriteBundle {
             material: materials.add(texture_handle.into()),
             ..Default::default()
diff --git a/examples/2d/sprite_sheet.rs b/examples/2d/sprite_sheet.rs
index 933e1fc..318302b 100644
--- a/examples/2d/sprite_sheet.rs
+++ b/examples/2d/sprite_sheet.rs
@@ -31,7 +31,7 @@ fn setup(
     let texture_atlas = TextureAtlas::from_grid(texture_handle, Vec2::new(24.0, 24.0), 7, 1);
     let texture_atlas_handle = texture_atlases.add(texture_atlas);
     commands
-        .spawn(Camera2dBundle::default())
+        .spawn(OrthographicCameraBundle::new_2d())
         .spawn(SpriteSheetBundle {
             texture_atlas: texture_atlas_handle,
             transform: Transform::from_scale(Vec3::splat(6.0)),
diff --git a/examples/3d/3d_scene.rs b/examples/3d/3d_scene.rs
index cb624be..e64586c 100644
--- a/examples/3d/3d_scene.rs
+++ b/examples/3d/3d_scene.rs
@@ -2,7 +2,7 @@ use bevy::prelude::*;
 
 fn main() {
     App::build()
-        .add_resource(Msaa { samples: 4 })
+        .insert_resource(Msaa { samples: 4 })
         .add_plugins(bevy_webgl2::DefaultPlugins)
         .add_startup_system(setup.system())
         .run();
@@ -26,17 +26,17 @@ fn setup(
         .spawn(PbrBundle {
             mesh: meshes.add(Mesh::from(shape::Cube { size: 1.0 })),
             material: materials.add(Color::rgb(0.8, 0.7, 0.6).into()),
-            transform: Transform::from_translation(Vec3::new(0.0, 0.5, 0.0)),
+            transform: Transform::from_xyz(0.0, 0.5, 0.0),
             ..Default::default()
         })
         // light
         .spawn(LightBundle {
-            transform: Transform::from_translation(Vec3::new(4.0, 8.0, 4.0)),
+            transform: Transform::from_xyz(4.0, 8.0, 4.0),
             ..Default::default()
         })
         // camera
-        .spawn(Camera3dBundle {
-            transform: Transform::from_translation(Vec3::new(-2.0, 2.5, 5.0))
+        .spawn(PerspectiveCameraBundle {
+            transform: Transform::from_xyz(-2.0, 2.5, 5.0)
                 .looking_at(Vec3::default(), Vec3::unit_y()),
             ..Default::default()
         });
diff --git a/examples/3d/load_gltf.rs b/examples/3d/load_gltf.rs
index d5d744b..f5472f7 100644
--- a/examples/3d/load_gltf.rs
+++ b/examples/3d/load_gltf.rs
@@ -2,7 +2,7 @@ use bevy::prelude::*;
 
 fn main() {
     App::build()
-        .add_resource(Msaa { samples: 4 })
+        .insert_resource(Msaa { samples: 4 })
         .add_plugins(bevy_webgl2::DefaultPlugins)
         .add_startup_system(setup.system())
         .run();
@@ -10,13 +10,13 @@ fn main() {
 
 fn setup(commands: &mut Commands, asset_server: Res<AssetServer>) {
     commands
-        .spawn_scene(asset_server.load("models/FlightHelmet/FlightHelmet.gltf"))
+        .spawn_scene(asset_server.load("models/FlightHelmet/FlightHelmet.gltf#Scene0"))
         .spawn(LightBundle {
-            transform: Transform::from_translation(Vec3::new(4.0, 5.0, 4.0)),
+            transform: Transform::from_xyz(4.0, 5.0, 4.0),
             ..Default::default()
         })
-        .spawn(Camera3dBundle {
-            transform: Transform::from_translation(Vec3::new(0.7, 0.7, 1.0))
+        .spawn(PerspectiveCameraBundle {
+            transform: Transform::from_xyz(0.7, 0.7, 1.0)
                 .looking_at(Vec3::new(0.0, 0.3, 0.0), Vec3::unit_y()),
             ..Default::default()
         });
diff --git a/examples/3d/parenting.rs b/examples/3d/parenting.rs
index 1708642..e506637 100644
--- a/examples/3d/parenting.rs
+++ b/examples/3d/parenting.rs
@@ -4,7 +4,7 @@ use bevy::prelude::*;
 /// are propagated to their descendants
 fn main() {
     App::build()
-        .add_resource(Msaa { samples: 4 })
+        .insert_resource(Msaa { samples: 4 })
         .add_plugins(bevy_webgl2::DefaultPlugins)
         .add_startup_system(setup.system())
         .add_system(rotator_system.system())
@@ -38,7 +38,7 @@ fn setup(
         .spawn(PbrBundle {
             mesh: cube_handle.clone(),
             material: cube_material_handle.clone(),
-            transform: Transform::from_translation(Vec3::new(0.0, 0.0, 1.0)),
+            transform: Transform::from_xyz(0.0, 0.0, 1.0),
             ..Default::default()
         })
         .with(Rotator)
@@ -47,18 +47,18 @@ fn setup(
             parent.spawn(PbrBundle {
                 mesh: cube_handle,
                 material: cube_material_handle,
-                transform: Transform::from_translation(Vec3::new(0.0, 0.0, 3.0)),
+                transform: Transform::from_xyz(0.0, 0.0, 3.0),
                 ..Default::default()
             });
         })
         // light
         .spawn(LightBundle {
-            transform: Transform::from_translation(Vec3::new(4.0, 5.0, -4.0)),
+            transform: Transform::from_xyz(4.0, 5.0, -4.0),
             ..Default::default()
         })
         // camera
-        .spawn(Camera3dBundle {
-            transform: Transform::from_translation(Vec3::new(5.0, 10.0, 10.0))
+        .spawn(PerspectiveCameraBundle {
+            transform: Transform::from_xyz(5.0, 10.0, 10.0)
                 .looking_at(Vec3::default(), Vec3::unit_y()),
             ..Default::default()
         });
diff --git a/examples/3d/texture.rs b/examples/3d/texture.rs
index 41cd440..35f48ad 100644
--- a/examples/3d/texture.rs
+++ b/examples/3d/texture.rs
@@ -29,7 +29,7 @@ fn setup(
     // this material renders the texture normally
     let material_handle = materials.add(StandardMaterial {
         albedo_texture: Some(texture_handle.clone()),
-        shaded: false,
+        unlit: true,
         ..Default::default()
     });
 
@@ -37,14 +37,14 @@ fn setup(
     let red_material_handle = materials.add(StandardMaterial {
         albedo: Color::rgba(1.0, 0.0, 0.0, 0.5),
         albedo_texture: Some(texture_handle.clone()),
-        shaded: false,
+        unlit: true,
     });
 
     // and lets make this one blue! (and also slightly transparent)
     let blue_material_handle = materials.add(StandardMaterial {
         albedo: Color::rgba(0.0, 0.0, 1.0, 0.5),
         albedo_texture: Some(texture_handle),
-        shaded: false,
+        unlit: true,
     });
 
     // add entities to the world
@@ -95,8 +95,8 @@ fn setup(
             ..Default::default()
         })
         // camera
-        .spawn(Camera3dBundle {
-            transform: Transform::from_translation(Vec3::new(3.0, 5.0, 8.0))
+        .spawn(PerspectiveCameraBundle {
+            transform: Transform::from_xyz(3.0, 5.0, 8.0)
                 .looking_at(Vec3::default(), Vec3::unit_y()),
             ..Default::default()
         });
diff --git a/examples/3d/z_sort_debug.rs b/examples/3d/z_sort_debug.rs
index 4c77aa1..cbac7cb 100644
--- a/examples/3d/z_sort_debug.rs
+++ b/examples/3d/z_sort_debug.rs
@@ -34,7 +34,7 @@ fn camera_order_color_system(
         for visible_entity in visible_entities.iter() {
             if let Ok(material_handle) = material_query.get(visible_entity.entity) {
                 let material = materials.get_mut(&*material_handle).unwrap();
-                let value = 1.0 - (visible_entity.order.0 - 10.0) / 7.0;
+                let value = 1.0 - (visible_entity.order.0.sqrt() - 10.0) / 7.0;
                 material.albedo = Color::rgb(value, value, value);
             }
         }
@@ -52,10 +52,10 @@ fn setup(
         .spawn(PbrBundle {
             mesh: cube_handle.clone(),
             material: materials.add(StandardMaterial {
-                shaded: false,
+                unlit: true,
                 ..Default::default()
             }),
-            transform: Transform::from_translation(Vec3::new(0.0, 0.0, 1.0)),
+            transform: Transform::from_xyz(0.0, 0.0, 1.0),
             ..Default::default()
         })
         .with(Rotator)
@@ -65,25 +65,25 @@ fn setup(
                 .spawn(PbrBundle {
                     mesh: cube_handle.clone(),
                     material: materials.add(StandardMaterial {
-                        shaded: false,
+                        unlit: true,
                         ..Default::default()
                     }),
-                    transform: Transform::from_translation(Vec3::new(0.0, 3.0, 0.0)),
+                    transform: Transform::from_xyz(0.0, 3.0, 0.0),
                     ..Default::default()
                 })
                 .spawn(PbrBundle {
                     mesh: cube_handle,
                     material: materials.add(StandardMaterial {
-                        shaded: false,
+                        unlit: true,
                         ..Default::default()
                     }),
-                    transform: Transform::from_translation(Vec3::new(0.0, -3.0, 0.0)),
+                    transform: Transform::from_xyz(0.0, -3.0, 0.0),
                     ..Default::default()
                 });
         })
         // camera
-        .spawn(Camera3dBundle {
-            transform: Transform::from_translation(Vec3::new(5.0, 10.0, 10.0))
+        .spawn(PerspectiveCameraBundle {
+            transform: Transform::from_xyz(5.0, 10.0, 10.0)
                 .looking_at(Vec3::default(), Vec3::unit_y()),
             ..Default::default()
         });
diff --git a/examples/game/breakout.rs b/examples/game/breakout.rs
index 95acbc1..0e4472e 100644
--- a/examples/game/breakout.rs
+++ b/examples/game/breakout.rs
@@ -8,8 +8,8 @@ use bevy::{
 fn main() {
     App::build()
         .add_plugins(bevy_webgl2::DefaultPlugins)
-        .add_resource(Scoreboard { score: 0 })
-        .add_resource(ClearColor(Color::rgb(0.9, 0.9, 0.9)))
+        .insert_resource(Scoreboard { score: 0 })
+        .insert_resource(ClearColor(Color::rgb(0.9, 0.9, 0.9)))
         .add_startup_system(setup.system())
         .add_system(paddle_movement_system.system())
         .add_system(ball_collision_system.system())
@@ -44,12 +44,12 @@ fn setup(
     // Add the game's entities to our world
     commands
         // cameras
-        .spawn(Camera2dBundle::default())
-        .spawn(CameraUiBundle::default())
+        .spawn(OrthographicCameraBundle::new_2d())
+        .spawn(UiCameraBundle::default())
         // paddle
         .spawn(SpriteBundle {
             material: materials.add(Color::rgb(0.5, 0.5, 1.0).into()),
-            transform: Transform::from_translation(Vec3::new(0.0, -215.0, 0.0)),
+            transform: Transform::from_xyz(0.0, -215.0, 0.0),
             sprite: Sprite::new(Vec2::new(120.0, 30.0)),
             ..Default::default()
         })
@@ -58,7 +58,7 @@ fn setup(
         // ball
         .spawn(SpriteBundle {
             material: materials.add(Color::rgb(1.0, 0.5, 0.5).into()),
-            transform: Transform::from_translation(Vec3::new(0.0, -50.0, 1.0)),
+            transform: Transform::from_xyz(0.0, -50.0, 1.0),
             sprite: Sprite::new(Vec2::new(30.0, 30.0)),
             ..Default::default()
         })
@@ -68,13 +68,25 @@ fn setup(
         // scoreboard
         .spawn(TextBundle {
             text: Text {
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                value: "Score:".to_string(),
-                style: TextStyle {
-                    color: Color::rgb(0.5, 0.5, 1.0),
-                    font_size: 40.0,
-                    ..Default::default()
-                },
+                sections: vec![
+                    TextSection {
+                        value: "Score: ".to_string(),
+                        style: TextStyle {
+                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                            font_size: 40.0,
+                            color: Color::rgb(0.5, 0.5, 1.0),
+                        },
+                    },
+                    TextSection {
+                        value: "".to_string(),
+                        style: TextStyle {
+                            font: asset_server.load("fonts/FiraMono-Medium.ttf"),
+                            font_size: 40.0,
+                            color: Color::rgb(1.0, 0.5, 0.5),
+                        },
+                    },
+                ],
+                ..Default::default()
             },
             style: Style {
                 position_type: PositionType::Absolute,
@@ -97,7 +109,7 @@ fn setup(
         // left
         .spawn(SpriteBundle {
             material: wall_material.clone(),
-            transform: Transform::from_translation(Vec3::new(-bounds.x / 2.0, 0.0, 0.0)),
+            transform: Transform::from_xyz(-bounds.x / 2.0, 0.0, 0.0),
             sprite: Sprite::new(Vec2::new(wall_thickness, bounds.y + wall_thickness)),
             ..Default::default()
         })
@@ -105,7 +117,7 @@ fn setup(
         // right
         .spawn(SpriteBundle {
             material: wall_material.clone(),
-            transform: Transform::from_translation(Vec3::new(bounds.x / 2.0, 0.0, 0.0)),
+            transform: Transform::from_xyz(bounds.x / 2.0, 0.0, 0.0),
             sprite: Sprite::new(Vec2::new(wall_thickness, bounds.y + wall_thickness)),
             ..Default::default()
         })
@@ -113,7 +125,7 @@ fn setup(
         // bottom
         .spawn(SpriteBundle {
             material: wall_material.clone(),
-            transform: Transform::from_translation(Vec3::new(0.0, -bounds.y / 2.0, 0.0)),
+            transform: Transform::from_xyz(0.0, -bounds.y / 2.0, 0.0),
             sprite: Sprite::new(Vec2::new(bounds.x + wall_thickness, wall_thickness)),
             ..Default::default()
         })
@@ -121,7 +133,7 @@ fn setup(
         // top
         .spawn(SpriteBundle {
             material: wall_material,
-            transform: Transform::from_translation(Vec3::new(0.0, bounds.y / 2.0, 0.0)),
+            transform: Transform::from_xyz(0.0, bounds.y / 2.0, 0.0),
             sprite: Sprite::new(Vec2::new(bounds.x + wall_thickness, wall_thickness)),
             ..Default::default()
         })
@@ -191,7 +203,7 @@ fn ball_movement_system(time: Res<Time>, mut ball_query: Query<(&Ball, &mut Tran
 
 fn scoreboard_system(scoreboard: Res<Scoreboard>, mut query: Query<&mut Text>) {
     for mut text in query.iter_mut() {
-        text.value = format!("Score: {}", scoreboard.score);
+        text.sections[1].value = scoreboard.score.to_string();
     }
 }
 
diff --git a/examples/shader/mesh_custom_attribute.rs b/examples/shader/mesh_custom_attribute.rs
index e71cea5..babe6f3 100644
--- a/examples/shader/mesh_custom_attribute.rs
+++ b/examples/shader/mesh_custom_attribute.rs
@@ -136,6 +136,7 @@ fn setup(
             [0.20, 0.27, 0.29],
         ]),
     );
+
     // Setup our world
     commands
         // cube
@@ -149,7 +150,7 @@ fn setup(
         })
         .with(material)
         // camera
-        .spawn(Camera3dBundle {
+        .spawn(PerspectiveCameraBundle {
             transform: Transform::from_translation(Vec3::new(3.0, 5.0, -8.0))
                 .looking_at(Vec3::default(), Vec3::unit_y()),
             ..Default::default()
diff --git a/examples/shader/shader_custom_material.rs b/examples/shader/shader_custom_material.rs
index 2db1168..f7d1167 100644
--- a/examples/shader/shader_custom_material.rs
+++ b/examples/shader/shader_custom_material.rs
@@ -102,7 +102,7 @@ fn setup(
         })
         .with(material)
         // camera
-        .spawn(Camera3dBundle {
+        .spawn(PerspectiveCameraBundle {
             transform: Transform::from_translation(Vec3::new(3.0, 5.0, -8.0))
                 .looking_at(Vec3::default(), Vec3::unit_y()),
             ..Default::default()
diff --git a/examples/shader/shader_defs.rs b/examples/shader/shader_defs.rs
index e93acbd..56e2770 100644
--- a/examples/shader/shader_defs.rs
+++ b/examples/shader/shader_defs.rs
@@ -18,7 +18,7 @@ fn main() {
         .add_asset::<MyMaterial>()
         .add_startup_system(setup.system())
         .add_system_to_stage(
-            stage::POST_UPDATE,
+            CoreStage::PostUpdate,
             asset_shader_defs_system::<MyMaterial>.system(),
         )
         .run();
@@ -135,7 +135,7 @@ fn setup(
         })
         .with(blue_material)
         // camera
-        .spawn(Camera3dBundle {
+        .spawn(PerspectiveCameraBundle {
             transform: Transform::from_translation(Vec3::new(3.0, 5.0, -8.0))
                 .looking_at(Vec3::default(), Vec3::unit_y()),
             ..Default::default()
diff --git a/examples/ui/button.rs b/examples/ui/button.rs
index cace6a7..2a934c5 100644
--- a/examples/ui/button.rs
+++ b/examples/ui/button.rs
@@ -39,15 +39,15 @@ fn button_system(
         let mut text = text_query.get_mut(children[0]).unwrap();
         match *interaction {
             Interaction::Clicked => {
-                text.value = "Press".to_string();
+                text.sections[0].value = "Press".to_string();
                 *material = button_materials.pressed.clone();
             }
             Interaction::Hovered => {
-                text.value = "Hover".to_string();
+                text.sections[0].value = "Hover".to_string();
                 *material = button_materials.hovered.clone();
             }
             Interaction::None => {
-                text.value = "Button".to_string();
+                text.sections[0].value = "Button".to_string();
                 *material = button_materials.normal.clone();
             }
         }
@@ -61,7 +61,7 @@ fn setup(
 ) {
     commands
         // ui camera
-        .spawn(CameraUiBundle::default())
+        .spawn(UiCameraBundle::default())
         .spawn(ButtonBundle {
             style: Style {
                 size: Size::new(Val::Px(150.0), Val::Px(65.0)),
@@ -78,15 +78,15 @@ fn setup(
         })
         .with_children(|parent| {
             parent.spawn(TextBundle {
-                text: Text {
-                    value: "Button".to_string(),
-                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                    style: TextStyle {
+                text: Text::with_section(
+                    "Button",
+                    TextStyle {
+                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                         font_size: 40.0,
                         color: Color::rgb(0.9, 0.9, 0.9),
-                        ..Default::default()
                     },
-                },
+                    Default::default(),
+                ),
                 ..Default::default()
             });
         });
diff --git a/examples/ui/font_atlas_debug.rs b/examples/ui/font_atlas_debug.rs
index b0d377d..60bde78 100644
--- a/examples/ui/font_atlas_debug.rs
+++ b/examples/ui/font_atlas_debug.rs
@@ -1,9 +1,11 @@
 use bevy::{prelude::*, text::FontAtlasSet};
 
+// TODO: This is now broken. See #1243
 /// This example illustrates how FontAtlases are populated. Bevy uses FontAtlases under the hood to optimize text rendering.
 fn main() {
     App::build()
         .init_resource::<State>()
+        .insert_resource(ClearColor(Color::BLACK))
         .add_plugins(bevy_webgl2::DefaultPlugins)
         .add_startup_system(setup.system())
         .add_system(text_update_system.system())
@@ -65,8 +67,8 @@ fn text_update_system(mut state: ResMut<State>, time: Res<Time>, mut query: Quer
     if state.timer.tick(time.delta_seconds()).finished() {
         for mut text in query.iter_mut() {
             let c = rand::random::<u8>() as char;
-            if !text.value.contains(c) {
-                text.value = format!("{}{}", text.value, c);
+            if !text.sections[0].value.contains(c) {
+                text.sections[0].value.push(c);
             }
         }
 
@@ -77,16 +79,16 @@ fn text_update_system(mut state: ResMut<State>, time: Res<Time>, mut query: Quer
 fn setup(commands: &mut Commands, asset_server: Res<AssetServer>, mut state: ResMut<State>) {
     let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
     state.handle = font_handle.clone();
-    commands.spawn(CameraUiBundle::default()).spawn(TextBundle {
-        text: Text {
-            value: "a".to_string(),
-            font: font_handle,
-            style: TextStyle {
+    commands.spawn(UiCameraBundle::default()).spawn(TextBundle {
+        text: Text::with_section(
+            "a",
+            TextStyle {
+                font: font_handle,
                 font_size: 60.0,
-                color: Color::WHITE,
-                ..Default::default()
+                color: Color::YELLOW,
             },
-        },
+            Default::default(),
+        ),
         ..Default::default()
     });
 }
diff --git a/examples/ui/text.rs b/examples/ui/text.rs
index 9abcb9b..f4c7d26 100644
--- a/examples/ui/text.rs
+++ b/examples/ui/text.rs
@@ -3,49 +3,114 @@ use bevy::{
     prelude::*,
 };
 
-/// This example illustrates how to create text and update it in a system. It displays the current FPS in the upper left hand corner.
+/// This example illustrates how to create UI text and update it in a system. It displays the
+/// current FPS in the top left corner, as well as text that changes colour in the bottom right.
+/// For text within a scene, please see the text2d example.
 fn main() {
     App::build()
         .add_plugins(bevy_webgl2::DefaultPlugins)
         .add_plugin(FrameTimeDiagnosticsPlugin::default())
         .add_startup_system(setup.system())
         .add_system(text_update_system.system())
+        .add_system(text_color_system.system())
         .run();
 }
 
 // A unit struct to help identify the FPS UI component, since there may be many Text components
 struct FpsText;
 
-fn text_update_system(diagnostics: Res<Diagnostics>, mut query: Query<&mut Text, With<FpsText>>) {
-    for mut text in query.iter_mut() {
-        if let Some(fps) = diagnostics.get(FrameTimeDiagnosticsPlugin::FPS) {
-            if let Some(average) = fps.average() {
-                text.value = format!("FPS: {:.2}", average);
-            }
-        }
-    }
-}
+// A unit struct to help identify the color-changing Text component
+struct ColorText;
 
 fn setup(commands: &mut Commands, asset_server: Res<AssetServer>) {
     commands
-        // 2d camera
-        .spawn(CameraUiBundle::default())
-        // texture
+        // UI camera
+        .spawn(UiCameraBundle::default())
+        // Text with one section
         .spawn(TextBundle {
             style: Style {
                 align_self: AlignSelf::FlexEnd,
+                position_type: PositionType::Absolute,
+                position: Rect {
+                    bottom: Val::Px(5.0),
+                    right: Val::Px(15.0),
+                    ..Default::default()
+                },
                 ..Default::default()
             },
-            text: Text {
-                value: "FPS:".to_string(),
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                style: TextStyle {
-                    font_size: 60.0,
+            // Use the `Text::with_section` constructor
+            text: Text::with_section(
+                // Accepts a `String` or any type that converts into a `String`, such as `&str`
+                "hello\nbevy!",
+                TextStyle {
+                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                    font_size: 100.0,
                     color: Color::WHITE,
+                },
+                // Note: You can use `Default::default()` in place of the `TextAlignment`
+                TextAlignment {
+                    horizontal: HorizontalAlign::Center,
                     ..Default::default()
                 },
+            ),
+            ..Default::default()
+        })
+        .with(ColorText)
+        // Rich text with multiple sections
+        .spawn(TextBundle {
+            style: Style {
+                align_self: AlignSelf::FlexEnd,
+                ..Default::default()
+            },
+            // Use `Text` directly
+            text: Text {
+                // Construct a `Vec` of `TextSection`s
+                sections: vec![
+                    TextSection {
+                        value: "FPS: ".to_string(),
+                        style: TextStyle {
+                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                            font_size: 60.0,
+                            color: Color::WHITE,
+                        },
+                    },
+                    TextSection {
+                        value: "".to_string(),
+                        style: TextStyle {
+                            font: asset_server.load("fonts/FiraMono-Medium.ttf"),
+                            font_size: 60.0,
+                            color: Color::GOLD,
+                        },
+                    },
+                ],
+                ..Default::default()
             },
             ..Default::default()
         })
         .with(FpsText);
 }
+
+fn text_update_system(diagnostics: Res<Diagnostics>, mut query: Query<&mut Text, With<FpsText>>) {
+    for mut text in query.iter_mut() {
+        if let Some(fps) = diagnostics.get(FrameTimeDiagnosticsPlugin::FPS) {
+            if let Some(average) = fps.average() {
+                // Update the value of the second section
+                text.sections[1].value = format!("{:.2}", average);
+            }
+        }
+    }
+}
+
+fn text_color_system(time: Res<Time>, mut query: Query<&mut Text, With<ColorText>>) {
+    for mut text in query.iter_mut() {
+        let seconds = time.seconds_since_startup() as f32;
+        // We used the `Text::with_section` helper method, but it is still just a `Text`,
+        // so to update it, we are still updating the one and only section
+        text.sections[0]
+            .style
+            .color
+            .set_r((1.25 * seconds).sin() / 2.0 + 0.5)
+            .set_g((0.75 * seconds).sin() / 2.0 + 0.5)
+            .set_b((0.50 * seconds).sin() / 2.0 + 0.5);
+    }
+}
diff --git a/examples/ui/text_debug.rs b/examples/ui/text_debug.rs
index 9eeb4d5..118d963 100644
--- a/examples/ui/text_debug.rs
+++ b/examples/ui/text_debug.rs
@@ -6,7 +6,7 @@ use bevy::{
 /// This example is for debugging text layout
 fn main() {
     App::build()
-        .add_resource(WindowDescriptor {
+        .insert_resource(WindowDescriptor {
             vsync: false,
             ..Default::default()
         })
@@ -21,7 +21,8 @@ struct TextChanges;
 
 fn infotext_system(commands: &mut Commands, asset_server: Res<AssetServer>) {
     let font = asset_server.load("fonts/FiraSans-Bold.ttf");
-    commands.spawn(CameraUiBundle::default()).spawn(TextBundle {
+    commands.spawn(UiCameraBundle::default());
+    commands.spawn(TextBundle {
         style: Style {
             align_self: AlignSelf::FlexEnd,
             position_type: PositionType::Absolute,
@@ -32,18 +33,18 @@ fn infotext_system(commands: &mut Commands, asset_server: Res<AssetServer>) {
             },
             ..Default::default()
         },
-        text: Text {
-            value: "This is\ntext with\nline breaks\nin the top left".to_string(),
-            font: font.clone(),
-            style: TextStyle {
+        text: Text::with_section(
+            "This is\ntext with\nline breaks\nin the top left",
+            TextStyle {
+                font: font.clone(),
                 font_size: 50.0,
                 color: Color::WHITE,
-                alignment: TextAlignment::default(),
             },
-        },
+            Default::default(),
+        ),
         ..Default::default()
     });
-    commands.spawn(CameraUiBundle::default()).spawn(TextBundle {
+    commands.spawn(TextBundle {
         style: Style {
             align_self: AlignSelf::FlexEnd,
             position_type: PositionType::Absolute,
@@ -58,23 +59,21 @@ fn infotext_system(commands: &mut Commands, asset_server: Res<AssetServer>) {
             },
             ..Default::default()
         },
-        text: Text {
-            value: "This is very long text with limited width in the top right and is also pink"
-                .to_string(),
-            font: font.clone(),
-            style: TextStyle {
-                font_size: 50.0,
-                color: Color::rgb(0.8, 0.2, 0.7),
-                alignment: TextAlignment {
-                    horizontal: HorizontalAlign::Center,
-                    vertical: VerticalAlign::Center,
+        text: Text::with_section(
+                    "This text is very long, has a limited width, is centred, is positioned in the top right and is also coloured pink.",
+                        TextStyle {
+                    font: font.clone(),
+                    font_size: 50.0,
+                    color: Color::rgb(0.8, 0.2, 0.7),
                 },
+            TextAlignment {
+                horizontal: HorizontalAlign::Center,
+                vertical: VerticalAlign::Center,
             },
-        },
+        ),
         ..Default::default()
     });
     commands
-        .spawn(CameraUiBundle::default())
         .spawn(TextBundle {
             style: Style {
                 align_self: AlignSelf::FlexEnd,
@@ -87,18 +86,62 @@ fn infotext_system(commands: &mut Commands, asset_server: Res<AssetServer>) {
                 ..Default::default()
             },
             text: Text {
-                value: "This text changes in the bottom right".to_string(),
-                font: font.clone(),
-                style: TextStyle {
-                    font_size: 30.0,
-                    color: Color::WHITE,
-                    alignment: TextAlignment::default(),
-                },
+                sections: vec![
+                    TextSection {
+                        value: "This text changes in the bottom right".to_string(),
+                        style: TextStyle {
+                            font: font.clone(),
+                            font_size: 30.0,
+                            color: Color::WHITE,
+                        },
+                    },
+                    TextSection {
+                        value: "\nThis text changes in the bottom right - ".to_string(),
+                        style: TextStyle {
+                            font: font.clone(),
+                            font_size: 30.0,
+                            color: Color::RED,
+                        },
+                    },
+                    TextSection {
+                        value: "".to_string(),
+                        style: TextStyle {
+                            font: font.clone(),
+                            font_size: 30.0,
+                            color: Color::ORANGE_RED,
+                        },
+                    },
+                    TextSection {
+                        value: " fps, ".to_string(),
+                        style: TextStyle {
+                            font: font.clone(),
+                            font_size: 30.0,
+                            color: Color::YELLOW,
+                        },
+                    },
+                    TextSection {
+                        value: "".to_string(),
+                        style: TextStyle {
+                            font: font.clone(),
+                            font_size: 30.0,
+                            color: Color::GREEN,
+                        },
+                    },
+                    TextSection {
+                        value: " ms/frame".to_string(),
+                        style: TextStyle {
+                            font: font.clone(),
+                            font_size: 30.0,
+                            color: Color::BLUE,
+                        },
+                    },
+                ],
+                alignment: Default::default(),
             },
             ..Default::default()
         })
         .with(TextChanges);
-    commands.spawn(CameraUiBundle::default()).spawn(TextBundle {
+    commands.spawn(TextBundle {
         style: Style {
             align_self: AlignSelf::FlexEnd,
             position_type: PositionType::Absolute,
@@ -113,16 +156,15 @@ fn infotext_system(commands: &mut Commands, asset_server: Res<AssetServer>) {
             },
             ..Default::default()
         },
-        text: Text {
-            value: "This\ntext has\nline breaks and also a set width in the bottom left"
-                .to_string(),
-            font,
-            style: TextStyle {
+        text: Text::with_section(
+            "This\ntext has\nline breaks and also a set width in the bottom left".to_string(),
+            TextStyle {
+                font,
                 font_size: 50.0,
                 color: Color::WHITE,
-                alignment: TextAlignment::default(),
             },
-        },
+            Default::default(),
+        ),
         ..Default::default()
     });
 }
@@ -148,10 +190,14 @@ fn change_text_system(
             }
         }
 
-        text.value = format!(
+        text.sections[0].value = format!(
             "This text changes in the bottom right - {:.1} fps, {:.3} ms/frame",
             fps,
             frame_time * 1000.0,
         );
+
+        text.sections[2].value = format!("{:.1}", fps);
+
+        text.sections[4].value = format!("{:.3}", frame_time * 1000.0);
     }
 }
diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs
index 90cd288..7ac8502 100644
--- a/examples/ui/ui.rs
+++ b/examples/ui/ui.rs
@@ -15,7 +15,7 @@ fn setup(
 ) {
     commands
         // ui camera
-        .spawn(CameraUiBundle::default())
+        .spawn(UiCameraBundle::default())
         // root node
         .spawn(NodeBundle {
             style: Style {
@@ -57,15 +57,15 @@ fn setup(
                                     margin: Rect::all(Val::Px(5.0)),
                                     ..Default::default()
                                 },
-                                text: Text {
-                                    value: "Text Example".to_string(),
-                                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                                    style: TextStyle {
+                                text: Text::with_section(
+                                    "Text Example",
+                                    TextStyle {
+                                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                         font_size: 30.0,
                                         color: Color::WHITE,
-                                        ..Default::default()
                                     },
-                                },
+                                    Default::default(),
+                                ),
                                 ..Default::default()
                             });
                         });
@@ -115,10 +115,6 @@ fn setup(
                         ..Default::default()
                     },
                     material: materials.add(Color::NONE.into()),
-                    visible: Visible {
-                        is_transparent: true,
-                        ..Default::default()
-                    },
                     ..Default::default()
                 })
                 .with_children(|parent| {
@@ -188,10 +184,6 @@ fn setup(
                                         ..Default::default()
                                     },
                                     material: materials.add(Color::rgba(1.0, 0.9, 0.9, 0.4).into()),
-                                    visible: Visible {
-                                        is_transparent: true,
-                                        ..Default::default()
-                                    },
                                     ..Default::default()
                                 });
                         });
@@ -206,10 +198,6 @@ fn setup(
                         ..Default::default()
                     },
                     material: materials.add(Color::NONE.into()),
-                    visible: Visible {
-                        is_transparent: true,
-                        ..Default::default()
-                    },
                     ..Default::default()
                 })
                 .with_children(|parent| {
@@ -221,10 +209,6 @@ fn setup(
                         },
                         material: materials
                             .add(asset_server.load("branding/bevy_logo_dark_big.png").into()),
-                        visible: Visible {
-                            is_transparent: true,
-                            ..Default::default()
-                        },
                         ..Default::default()
                     });
                 });
diff --git a/src/lib.rs b/src/lib.rs
index 1e7ebda..b450335 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -14,13 +14,13 @@ pub use webgl2_resources::*;
 
 use bevy::asset::{Assets, HandleUntyped};
 use bevy::ecs::prelude::*;
-use bevy::ecs::{Resources, SystemStage, World};
+use bevy::ecs::{Resources, StageLabel, SystemStage, World};
 use bevy::reflect::TypeUuid;
 use bevy::render::{
     pipeline::PipelineDescriptor,
     renderer::{shared_buffers_update_system, RenderResourceContext, SharedBuffers},
     shader::{Shader, ShaderStage},
-    stage::{RENDER, RENDER_RESOURCE},
+    RenderStage,
 };
 
 pub const SPRITE_PIPELINE_HANDLE: HandleUntyped =
@@ -34,6 +34,10 @@ pub const FORWARD_PIPELINE_HANDLE: HandleUntyped =
 
 pub const UI_PIPELINE_HANDLE: HandleUntyped =
     HandleUntyped::weak_from_u64(PipelineDescriptor::TYPE_UUID, 3234320022263993878);
+#[derive(Debug, Hash, PartialEq, Eq, Clone, StageLabel)]
+pub enum WebGL2Stage {
+    PreRenderResource,
+}
 
 #[derive(Default)]
 pub struct WebGL2Plugin;
@@ -86,26 +90,26 @@ impl Plugin for WebGL2Plugin {
         let render_system = webgl2_render_system(resources);
         let handle_events_system = webgl2_handle_window_created_events_system();
         app.add_stage_before(
-            RENDER_RESOURCE,
-            "webgl2_pre_render_resource",
+            RenderStage::RenderResource,
+            WebGL2Stage::PreRenderResource,
             SystemStage::parallel(),
         )
-        .add_system_to_stage("webgl2_pre_render_resource", handle_events_system.system())
-        .add_system_to_stage(RENDER, render_system.system())
         .add_system_to_stage(
-            bevy::render::stage::POST_RENDER,
+            WebGL2Stage::PreRenderResource,
+            handle_events_system.exclusive_system(),
+        )
+        .add_system_to_stage(RenderStage::Render, render_system.exclusive_system())
+        .add_system_to_stage(
+            RenderStage::PostRender,
             shared_buffers_update_system.system(),
         );
     }
 }
 
-#[derive(Default)]
-pub struct State {
-    pub window_created_event_reader: EventReader<WindowCreated>,
-}
-
 pub fn webgl2_handle_window_created_events_system() -> impl FnMut(&mut World, &mut Resources) {
-    let mut window_created_event_reader: EventReader<WindowCreated> = Default::default();
+    let events = Events::<WindowCreated>::default();
+    let mut window_created_event_reader = events.get_reader();
+
     move |_, resources| {
         let events = {
             let window_created_events = resources.get::<Events<WindowCreated>>().unwrap();
diff --git a/src/renderer/utils.rs b/src/renderer/utils.rs
index 4ffe856..8f34b36 100644
--- a/src/renderer/utils.rs
+++ b/src/renderer/utils.rs
@@ -4,10 +4,9 @@ use bevy::log::prelude::*;
 use bevy::render::{
     pipeline::{
         BindGroupDescriptor, BindType, BindingDescriptor, BindingShaderStage, InputStepMode,
-        PipelineLayout, UniformProperty, VertexAttributeDescriptor, VertexBufferDescriptor,
-        VertexFormat,
+        PipelineLayout, UniformProperty, VertexAttribute, VertexBufferLayout, VertexFormat,
     },
-    texture::{TextureComponentType, TextureViewDimension},
+    texture::{TextureSampleType, TextureViewDimension},
 };
 use bevy::utils::HashSet;
 use std::iter::Extend;
@@ -114,11 +113,11 @@ pub fn reflect_layout(context: &WebGl2RenderingContext, program: &GlProgram) ->
 
         let format = get_vertex_format(info.type_());
 
-        vertex_buffer_descriptors.push(VertexBufferDescriptor {
+        vertex_buffer_descriptors.push(VertexBufferLayout {
             name: info.name().into(),
             stride: 0,
             step_mode: InputStepMode::Vertex,
-            attributes: vec![VertexAttributeDescriptor {
+            attributes: vec![VertexAttribute {
                 name: info.name().into(),
                 offset: 0,
                 format,
@@ -158,7 +157,7 @@ pub fn reflect_layout(context: &WebGl2RenderingContext, program: &GlProgram) ->
                     name: "Camera".to_string(),
                     index: 0,
                     bind_type: BindType::Uniform {
-                        dynamic: false,
+                        has_dynamic_offset: false,
                         property: UniformProperty::Struct(vec![UniformProperty::Mat4]),
                     },
                     shader_stage: BindingShaderStage::VERTEX | BindingShaderStage::FRAGMENT,
@@ -213,7 +212,7 @@ pub fn reflect_layout(context: &WebGl2RenderingContext, program: &GlProgram) ->
             name,
             index,
             bind_type: BindType::Uniform {
-                dynamic: false,
+                has_dynamic_offset: false,
                 property,
             },
             shader_stage: BindingShaderStage::VERTEX | BindingShaderStage::FRAGMENT,
@@ -248,10 +247,10 @@ pub fn reflect_layout(context: &WebGl2RenderingContext, program: &GlProgram) ->
             let binding = BindingDescriptor {
                 name: info.name(),
                 index: index,
-                bind_type: BindType::SampledTexture {
+                bind_type: BindType::Texture {
                     multisampled: false,
-                    dimension: TextureViewDimension::D2,
-                    component_type: TextureComponentType::Float,
+                    view_dimension: TextureViewDimension::D2,
+                    sample_type: TextureSampleType::Float { filterable: true },
                 },
                 shader_stage: BindingShaderStage::FRAGMENT,
             };
diff --git a/src/renderer/webgl2_render_context.rs b/src/renderer/webgl2_render_context.rs
index c3936f1..171a70c 100644
--- a/src/renderer/webgl2_render_context.rs
+++ b/src/renderer/webgl2_render_context.rs
@@ -114,7 +114,6 @@ impl RenderContext for WebGL2RenderContext {
             )
         )
         .expect("tex image");
-        gl_call!(gl.generate_mipmap(Gl::TEXTURE_2D));
 
         gl_call!(gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_MIN_FILTER, Gl::NEAREST as i32));
         gl_call!(gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_MAG_FILTER, Gl::NEAREST as i32));
@@ -134,6 +133,32 @@ impl RenderContext for WebGL2RenderContext {
         // ));
     }
 
+    fn copy_texture_to_buffer(
+        &mut self,
+        _source_texture: TextureId,
+        _source_origin: [u32; 3],
+        _source_mip_level: u32,
+        _destination_buffer: BufferId,
+        _destination_offset: u64,
+        _destination_bytes_per_row: u32,
+        _size: Extent3d,
+    ) {
+        unimplemented!()
+    }
+
+    fn copy_texture_to_texture(
+        &mut self,
+        _source_texture: TextureId,
+        _source_origin: [u32; 3],
+        _source_mip_level: u32,
+        _destination_texture: TextureId,
+        _destination_origin: [u32; 3],
+        _destination_mip_level: u32,
+        _size: Extent3d,
+    ) {
+        unimplemented!()
+    }
+
     fn resources(&self) -> &dyn RenderResourceContext {
         &self.render_resource_context
     }
@@ -170,7 +195,6 @@ impl RenderContext for WebGL2RenderContext {
         }
         let mut render_pass = WebGL2RenderPass {
             render_context: self,
-            pipeline_descriptor: None,
             pipeline: None,
         };
         run_pass(&mut render_pass);
diff --git a/src/renderer/webgl2_render_resource_context.rs b/src/renderer/webgl2_render_resource_context.rs
index 67988c5..d3c9d5f 100644
--- a/src/renderer/webgl2_render_resource_context.rs
+++ b/src/renderer/webgl2_render_resource_context.rs
@@ -7,11 +7,12 @@ use bevy::asset::{Assets, Handle, HandleUntyped};
 use bevy::log::prelude::*;
 use bevy::render::{
     pipeline::{
-        BindGroupDescriptor, BindGroupDescriptorId, BindType, PipelineDescriptor, PipelineLayout,
+        BindGroupDescriptor, BindGroupDescriptorId, BindType, IndexFormat, PipelineDescriptor,
+        PipelineLayout,
     },
     renderer::{
-        BindGroup, BufferId, BufferInfo, BufferUsage, RenderResourceBinding, RenderResourceContext,
-        RenderResourceId, SamplerId, TextureId,
+        BindGroup, BufferId, BufferInfo, BufferMapMode, BufferUsage, RenderResourceBinding,
+        RenderResourceContext, RenderResourceId, SamplerId, TextureId,
     },
     shader::{Shader, ShaderError, ShaderSource, ShaderStage, ShaderStages},
     texture::{SamplerDescriptor, TextureDescriptor},
@@ -279,7 +280,16 @@ impl RenderResourceContext for WebGL2RenderResourceContext {
         // );
     }
 
-    fn map_buffer(&self, _id: BufferId) {
+    fn read_mapped_buffer(
+        &self,
+        _id: BufferId,
+        _range: Range<u64>,
+        _read: &dyn Fn(&[u8], &dyn RenderResourceContext),
+    ) {
+        unimplemented!();
+    }
+
+    fn map_buffer(&self, _id: BufferId, _mode: BufferMapMode) {
         // info!("map buffer {:?}", _id);
     }
 
@@ -418,7 +428,7 @@ impl RenderResourceContext for WebGL2RenderResourceContext {
                         gl_call!(gl.get_uniform_location(&program.program, &binding.name))
                     {
                         info!("found uniform location: {:?}", uniform_location);
-                        if let BindType::SampledTexture { .. } = binding.bind_type {
+                        if let BindType::Texture { .. } = binding.bind_type {
                             let texture_unit = self
                                 .resources
                                 .get_or_create_texture_unit(bind_group.index, binding.index);
@@ -469,10 +479,11 @@ impl RenderResourceContext for WebGL2RenderResourceContext {
             vao,
             update_vao: false,
             index_buffer: None,
+            index_format: IndexFormat::Uint32,
             vertex_buffer: None,
-            color_states: pipeline_descriptor.color_states.clone(),
-            depth_stencil_state: pipeline_descriptor.depth_stencil_state.clone(),
-            rasterization_state: pipeline_descriptor.rasterization_state.clone(),
+            color_target_states: pipeline_descriptor.color_target_states.clone(),
+            depth_stencil: pipeline_descriptor.depth_stencil.clone(),
+            primitive: pipeline_descriptor.primitive.clone(),
             scissors_state: None,
         };
         self.pipeline_descriptors
diff --git a/src/shaders/forward.frag b/src/shaders/forward.frag
index 785d600..187b6a0 100644
--- a/src/shaders/forward.frag
+++ b/src/shaders/forward.frag
@@ -52,7 +52,7 @@ void main() {
     );
 #endif
 
-#ifdef STANDARDMATERIAL_SHADED
+#ifndef STANDARDMATERIAL_UNLIT
     vec3 normal = normalize(v_Normal);
     // accumulate color
     vec3 color = AmbientColor;
diff --git a/src/webgl2_render_pass.rs b/src/webgl2_render_pass.rs
index efdf5bc..ac9943f 100644
--- a/src/webgl2_render_pass.rs
+++ b/src/webgl2_render_pass.rs
@@ -12,7 +12,6 @@ use std::ops::Range;
 
 pub struct WebGL2RenderPass<'a> {
     pub render_context: &'a WebGL2RenderContext,
-    pub pipeline_descriptor: Option<PipelineDescriptor>,
     pub pipeline: Option<Handle<PipelineDescriptor>>,
 }
 
@@ -130,8 +129,9 @@ impl<'a> RenderPass for WebGL2RenderPass<'a> {
 
     fn set_stencil_reference(&mut self, _reference: u32) {}
 
-    fn set_index_buffer(&mut self, buffer_id: BufferId, _offset: u64) {
+    fn set_index_buffer(&mut self, buffer_id: BufferId, _offset: u64, index_format: IndexFormat) {
         // TODO - offset parameter
+        // TODO - index_format parameter
 
         let resources = &self.render_context.render_resource_context.resources;
         let mut pipelines = resources.pipelines.write();
@@ -140,15 +140,24 @@ impl<'a> RenderPass for WebGL2RenderPass<'a> {
 
         if pipeline.index_buffer != Some(buffer_id) {
             pipeline.index_buffer = Some(buffer_id);
+            pipeline.index_format = index_format;
             pipeline.update_vao = true;
         }
     }
 
     fn draw_indexed(&mut self, indices: Range<u32>, _base_vertex: i32, instances: Range<u32>) {
-        let (index_type, type_size) = match self.pipeline_descriptor.as_ref().unwrap().index_format
-        {
-            IndexFormat::Uint16 => (Gl::UNSIGNED_SHORT, 2),
-            IndexFormat::Uint32 => (Gl::UNSIGNED_INT, 4),
+        // mysterious "Parking not supported on this platform" panic if you let this code
+        // out of its block.
+        let (index_type, type_size) = {
+            let resources = &self.render_context.render_resource_context.resources;
+            let pipelines = resources.pipelines.read();
+            let pipeline_handle = self.pipeline.as_ref().unwrap();
+            let pipeline = pipelines.get(&pipeline_handle).unwrap();
+
+            match pipeline.index_format {
+                IndexFormat::Uint16 => (Gl::UNSIGNED_SHORT, 2),
+                IndexFormat::Uint32 => (Gl::UNSIGNED_INT, 4),
+            }
         };
 
         let ctx = &self.render_context;
@@ -236,12 +245,6 @@ impl<'a> RenderPass for WebGL2RenderPass<'a> {
 
     fn set_pipeline(&mut self, pipeline_handle: &Handle<PipelineDescriptor>) {
         self.pipeline = Some(pipeline_handle.as_weak());
-        let pipeline_descriptors = self
-            .render_context
-            .render_resource_context
-            .pipeline_descriptors
-            .read();
-        self.pipeline_descriptor = pipeline_descriptors.get(pipeline_handle).cloned();
 
         let resources = &self.render_context.render_resource_context.resources;
         let programs = resources.programs.read();
@@ -250,25 +253,24 @@ impl<'a> RenderPass for WebGL2RenderPass<'a> {
         let ctx = self.render_context;
         let gl = &ctx.device.get_context();
 
-        if let Some(state) = &pipeline.rasterization_state {
-            match state.cull_mode {
-                CullMode::None => {
-                    // TODO - can we always keep CULL_FACE enabled
-                    // and use cullFace(FRONT_AND_BACK)?
-                    // it seems do not work on contributors example
-                    gl_call!(gl.disable(Gl::CULL_FACE));
-                }
-                CullMode::Front => {
-                    gl_call!(gl.enable(Gl::CULL_FACE));
-                    gl_call!(gl.cull_face(Gl::FRONT));
-                }
-                CullMode::Back => {
-                    gl_call!(gl.enable(Gl::CULL_FACE));
-                    gl_call!(gl.cull_face(Gl::BACK));
-                }
+        match &pipeline.primitive.cull_mode {
+            CullMode::None => {
+                // TODO - can we always keep CULL_FACE enabled
+                // and use cullFace(FRONT_AND_BACK)?
+                // it seems do not work on contributors example
+                gl_call!(gl.disable(Gl::CULL_FACE));
+            }
+            CullMode::Front => {
+                gl_call!(gl.enable(Gl::CULL_FACE));
+                gl_call!(gl.cull_face(Gl::FRONT));
+            }
+            CullMode::Back => {
+                gl_call!(gl.enable(Gl::CULL_FACE));
+                gl_call!(gl.cull_face(Gl::BACK));
             }
         }
-        if let Some(state) = &pipeline.depth_stencil_state {
+
+        if let Some(state) = &pipeline.depth_stencil {
             let depth_func = match state.depth_compare {
                 bevy::render::pipeline::CompareFunction::Never => Gl::NEVER,
                 bevy::render::pipeline::CompareFunction::Less => Gl::LESS,
@@ -282,7 +284,7 @@ impl<'a> RenderPass for WebGL2RenderPass<'a> {
             gl_call!(gl.depth_func(depth_func));
         }
 
-        if let Some(state) = pipeline.color_states.get(0) {
+        if let Some(state) = pipeline.color_target_states.get(0) {
             gl_call!(gl.enable(Gl::BLEND));
             fn blend_factor(factor: &BlendFactor) -> u32 {
                 match factor {
diff --git a/src/webgl2_resources.rs b/src/webgl2_resources.rs
index 61fef85..7834cb2 100644
--- a/src/webgl2_resources.rs
+++ b/src/webgl2_resources.rs
@@ -8,9 +8,9 @@ use crate::{
 use bevy::asset::{Handle, HandleUntyped};
 use bevy::render::{
     pipeline::{
-        BindGroupDescriptor, BindGroupDescriptorId, ColorStateDescriptor,
-        DepthStencilStateDescriptor, InputStepMode, PipelineDescriptor,
-        RasterizationStateDescriptor, VertexAttributeDescriptor, VertexBufferDescriptor,
+        BindGroupDescriptor, BindGroupDescriptorId, ColorTargetState, DepthStencilState,
+        IndexFormat, InputStepMode, PipelineDescriptor, PrimitiveState, VertexAttribute,
+        VertexBufferLayout,
     },
     renderer::{BindGroupId, BufferId, BufferInfo, RenderResourceId, SamplerId, TextureId},
     shader::ShaderStages,
@@ -27,21 +27,21 @@ pub struct GlVertexFormat {
     pub normalized: bool,
 }
 
-pub struct GlVertexAttributeDescriptor {
+pub struct GlVertexAttribute {
     pub name: Cow<'static, str>,
     pub offset: i32,
     pub format: GlVertexFormat,
     pub attrib_location: i32,
 }
 
-impl GlVertexAttributeDescriptor {
+impl GlVertexAttribute {
     pub fn from(
         gl: &WebGl2RenderingContext,
         program: &WebGlProgram,
-        attr: &VertexAttributeDescriptor,
-    ) -> GlVertexAttributeDescriptor {
+        attr: &VertexAttribute,
+    ) -> GlVertexAttribute {
         let attrib_location = gl_call!(gl.get_attrib_location(&program, &*attr.name));
-        GlVertexAttributeDescriptor {
+        GlVertexAttribute {
             name: attr.name.to_owned(),
             offset: attr.offset as i32,
             format: gl_vertex_format(&attr.format),
@@ -54,14 +54,14 @@ pub struct GlVertexBufferDescripror {
     pub name: Cow<'static, str>,
     pub stride: i32,
     pub step_mode: InputStepMode,
-    pub attributes: Vec<GlVertexAttributeDescriptor>,
+    pub attributes: Vec<GlVertexAttribute>,
 }
 
 impl GlVertexBufferDescripror {
     pub fn from(
         gl: &WebGl2RenderingContext,
         program: &WebGlProgram,
-        vertex_buffer_descriptor: &VertexBufferDescriptor,
+        vertex_buffer_descriptor: &VertexBufferLayout,
     ) -> GlVertexBufferDescripror {
         GlVertexBufferDescripror {
             name: vertex_buffer_descriptor.name.to_owned(),
@@ -70,7 +70,7 @@ impl GlVertexBufferDescripror {
             attributes: vertex_buffer_descriptor
                 .attributes
                 .iter()
-                .map(|attr| GlVertexAttributeDescriptor::from(gl, program, attr))
+                .map(|attr| GlVertexAttribute::from(gl, program, attr))
                 .collect(),
         }
     }
@@ -82,10 +82,11 @@ pub struct WebGL2Pipeline {
     pub vao: WebGlVertexArrayObject,
     pub vertex_buffer: Option<BufferId>,
     pub index_buffer: Option<BufferId>,
+    pub index_format: IndexFormat,
     pub update_vao: bool,
-    pub color_states: Vec<ColorStateDescriptor>,
-    pub depth_stencil_state: Option<DepthStencilStateDescriptor>,
-    pub rasterization_state: Option<RasterizationStateDescriptor>,
+    pub color_target_states: Vec<ColorTargetState>,
+    pub depth_stencil: Option<DepthStencilState>,
+    pub primitive: PrimitiveState,
     pub scissors_state: Option<ScissorsState>,
 }