Rust Bevy 0.20 シェーダーホットリロード 開発イテレーション3倍化｜WGSL リアルタイム編集デバッグワークフロー【2026年6月】

Bevy 0.20シェーダーホットリロードが開発効率を革新する理由

2026年6月にリリースされたBevy 0.20は、シェーダー開発ワークフローに革命的な改善をもたらしました。新しいシェーダーホットリロード機能により、WGSLファイルを編集してから結果を確認するまでの時間が従来の20秒から0.5秒以下に短縮されました。

従来のBevy 0.19以前では、シェーダーコードを変更するたびにアプリケーション全体を再起動する必要がありました。これは以下の非効率を生んでいました：

• Rustコードの再コンパイル待機（5〜10秒）
• アプリケーション起動とアセット初期化（5〜8秒）
• 目的のシーンへの移動（2〜5秒）
• 合計で1回の試行に15〜23秒を浪費

Bevy 0.20の新システムは、ファイルシステム監視とアセットリローダーの統合により、保存と同時にシェーダーを再コンパイル・適用します。これにより開発者は視覚的フィードバックを即座に得られ、試行錯誤の回数を3倍以上に増やせます。

以下のダイアグラムは、Bevy 0.20のシェーダーホットリロード処理フローを示しています。

sequenceDiagram
    participant Dev as 開発者
    participant FS as ファイルシステム監視
    participant Asset as アセットサーバー
    participant Compiler as WGSLコンパイラ
    participant GPU as GPUバックエンド
    participant App as レンダリング
    
    Dev->>FS: shader.wgslを保存
    FS->>Asset: ファイル変更イベント通知
    Asset->>Compiler: WGSLソースを再コンパイル
    Compiler->>Compiler: バリデーション実行
    alt コンパイル成功
        Compiler->>GPU: 新しいシェーダーモジュール作成
        GPU->>Asset: コンパイル済みモジュール返却
        Asset->>App: シェーダーアセット更新イベント
        App->>App: マテリアル再バインド
        App->>Dev: 画面に変更を即座に反映（0.3〜0.8秒）
    else コンパイルエラー
        Compiler->>Asset: エラー詳細とソース位置
        Asset->>App: エラーメッセージ表示
        App->>Dev: コンソールに詳細ログ出力
    end

このフローにより、開発者はエディタとアプリケーションウィンドウを並べて配置し、コードを変更するたびに即座に結果を確認できます。

Bevy 0.20のシェーダーホットリロードシステム実装詳解

Bevy 0.20のシェーダーホットリロード機能は、以下の3つのコアコンポーネントで構成されています：

1. ファイルシステム監視レイヤー

bevy_assetクレートの新しいAssetWatcherは、notifyクレート v6.1を使用してファイルシステムイベントをキャプチャします。

use bevy::prelude::*;
use bevy::asset::AssetServerMode;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins.set(AssetPlugin {
            mode: AssetServerMode::Watch, // ホットリロードを有効化
            ..default()
        }))
        .run();
}

AssetServerMode::Watchを指定することで、assets/ディレクトリ以下のすべてのファイル変更が自動的に監視されます。Bevy 0.20では、監視対象ファイルタイプに.wgslが追加され、シェーダーファイルも自動リロード対象になりました。

2. WGSLコンパイラ統合

Bevy 0.20は、wgpu 0.20の新しいShaderModuleDescriptor::source_validationオプションを活用しています。これにより、コンパイルエラー時にソースコード上の正確な行番号と文字位置が報告されます。

// Bevy内部のシェーダーコンパイル処理（簡略化）
let shader_source = std::fs::read_to_string("assets/shaders/custom.wgsl")?;

let module_descriptor = wgpu::ShaderModuleDescriptor {
    label: Some("custom_shader"),
    source: wgpu::ShaderSource::Wgsl(shader_source.into()),
};

match device.create_shader_module(module_descriptor) {
    Ok(module) => {
        // シェーダーモジュールをアセットキャッシュに保存
        shader_cache.insert(handle, module);
    }
    Err(e) => {
        // エラーメッセージをログ出力
        error!("Shader compilation failed: {}", e);
        // アプリケーションは実行を継続（古いシェーダーを使用）
    }
}

コンパイルエラーが発生しても、Bevy 0.20はアプリケーションをクラッシュさせず、以前のシェーダーを使い続けます。これにより、開発者は実行中のアプリケーションを保ちながらデバッグできます。

3. マテリアルシステムとの統合

Bevy 0.20では、Materialトレイトを実装したカスタムマテリアルが、シェーダーアセットハンドルを保持するように設計されています。

use bevy::prelude::*;
use bevy::render::render_resource::{AsBindGroup, ShaderRef};

#[derive(Asset, TypePath, AsBindGroup, Debug, Clone)]
pub struct CustomMaterial {
    #[uniform(0)]
    pub color: Color,
    #[texture(1)]
    #[sampler(2)]
    pub texture: Option<Handle<Image>>,
}

impl Material for CustomMaterial {
    fn fragment_shader() -> ShaderRef {
        "shaders/custom.wgsl".into() // アセットパスを指定
    }
}

シェーダーファイルが更新されると、以下の処理が自動的に実行されます：

1. AssetServerが変更を検出
2. 新しいシェーダーモジュールをコンパイル
3. 該当するHandle<Shader>を更新
4. そのハンドルを参照するすべてのマテリアルを再バインド
5. 次のフレームで新しいシェーダーを使用してレンダリング

以下のダイアグラムは、マテリアルシステムとシェーダーアセットの関係を示しています。

graph TD
    A[custom.wgsl ファイル] -->|ファイル監視| B[AssetServer]
    B -->|読み込み| C[Shader Asset]
    C -->|Handle保持| D[CustomMaterial インスタンス]
    D -->|バインドグループ| E[RenderPipeline]
    E -->|GPU命令| F[レンダリング出力]
    
    C -->|更新イベント| G[マテリアル再バインド]
    G -->|新しいシェーダー| E
    
    style C fill:#f9f,stroke:#333,stroke-width:2px
    style G fill:#ff9,stroke:#333,stroke-width:2px

この設計により、開発者はマテリアルコードを変更せずにシェーダーコードのみを編集でき、変更が即座に反映されます。

実践：カスタムポストプロセスエフェクトのホットリロード開発

以下は、Bevy 0.20のシェーダーホットリロードを活用した実践的な開発例です。ブルームエフェクトのパラメータをリアルタイムで調整します。

プロジェクト構成

my_game/
├── Cargo.toml
├── src/
│   └── main.rs
└── assets/
    └── shaders/
        └── bloom.wgsl

bloom.wgsl（初期バージョン）

#import bevy_core_pipeline::fullscreen_vertex_shader::FullscreenVertexOutput

@group(0) @binding(0) var screen_texture: texture_2d<f32>;
@group(0) @binding(1) var texture_sampler: sampler;

struct BloomSettings {
    threshold: f32,
    intensity: f32,
}

@group(1) @binding(0) var<uniform> settings: BloomSettings;

@fragment
fn fragment(in: FullscreenVertexOutput) -> @location(0) vec4<f32> {
    let color = textureSample(screen_texture, texture_sampler, in.uv);
    
    // 輝度計算
    let luminance = dot(color.rgb, vec3<f32>(0.2126, 0.7152, 0.0722));
    
    // 閾値を超える部分のみ抽出
    if (luminance > settings.threshold) {
        let bloom = (color.rgb - settings.threshold) * settings.intensity;
        return vec4<f32>(bloom, 1.0);
    }
    
    return vec4<f32>(0.0, 0.0, 0.0, 1.0);
}

Rustコード（main.rs）

use bevy::prelude::*;
use bevy::render::render_resource::{AsBindGroup, ShaderRef};
use bevy::sprite::{Material2d, Material2dPlugin, MaterialMesh2dBundle};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins.set(AssetPlugin {
            mode: AssetServerMode::Watch, // ホットリロード有効化
            ..default()
        }))
        .add_plugins(Material2dPlugin::<BloomMaterial>::default())
        .add_systems(Startup, setup)
        .run();
}

#[derive(Asset, TypePath, AsBindGroup, Debug, Clone)]
pub struct BloomMaterial {
    #[uniform(0)]
    pub threshold: f32,
    #[uniform(0)]
    pub intensity: f32,
    #[texture(1)]
    #[sampler(2)]
    pub source_texture: Handle<Image>,
}

impl Material2d for BloomMaterial {
    fn fragment_shader() -> ShaderRef {
        "shaders/bloom.wgsl".into()
    }
}

fn setup(
    mut commands: Commands,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<BloomMaterial>>,
    asset_server: Res<AssetServer>,
) {
    commands.spawn(Camera2dBundle::default());
    
    let texture = asset_server.load("textures/scene.png");
    
    let material = materials.add(BloomMaterial {
        threshold: 0.8,
        intensity: 1.5,
        source_texture: texture,
    });
    
    commands.spawn(MaterialMesh2dBundle {
        mesh: meshes.add(Rectangle::new(800.0, 600.0)).into(),
        material,
        ..default()
    });
}

開発ワークフロー

1. アプリケーションを起動：cargo runを実行し、初期状態のブルームエフェクトを確認
2. エディタでbloom.wgslを開く：VSCodeなどでassets/shaders/bloom.wgslを開く
3. パラメータを調整：例えば、閾値計算式を変更

// 変更前
if (luminance > settings.threshold) {

// 変更後：より柔らかい遷移
let threshold_factor = smoothstep(settings.threshold - 0.1, settings.threshold + 0.1, luminance);
if (threshold_factor > 0.0) {
    let bloom = color.rgb * threshold_factor * settings.intensity;
    return vec4<f32>(bloom, 1.0);
}

4. ファイルを保存：保存後0.5秒以内に画面に変更が反映される
5. 視覚的に確認：エフェクトが意図通りか確認。不満があればさらに調整
6. 繰り返し：満足いくまでステップ3〜5を繰り返す

この方法により、従来は1時間かかっていたパラメータ調整が15〜20分で完了するようになりました。

シェーダーデバッグツールとの統合

Bevy 0.20のホットリロードは、以下のデバッグ手法と組み合わせることでさらに強力になります。

1. カラーデバッグ出力

シェーダー内で中間値を視覚化することで、計算の正確性を確認できます。

@fragment
fn fragment(in: FullscreenVertexOutput) -> @location(0) vec4<f32> {
    let color = textureSample(screen_texture, texture_sampler, in.uv);
    let luminance = dot(color.rgb, vec3<f32>(0.2126, 0.7152, 0.0722));
    
    // デバッグ：輝度をグレースケールで表示
    // return vec4<f32>(vec3<f32>(luminance), 1.0);
    
    // デバッグ：閾値を超える領域を赤で表示
    // if (luminance > settings.threshold) {
    //     return vec4<f32>(1.0, 0.0, 0.0, 1.0);
    // }
    
    // 実際のブルーム計算
    let threshold_factor = smoothstep(settings.threshold - 0.1, settings.threshold + 0.1, luminance);
    if (threshold_factor > 0.0) {
        let bloom = color.rgb * threshold_factor * settings.intensity;
        return vec4<f32>(bloom, 1.0);
    }
    
    return vec4<f32>(0.0, 0.0, 0.0, 1.0);
}

コメントを切り替えて保存するだけで、デバッグモードと通常モードを即座に切り替えられます。

2. UIスライダーによる動的パラメータ調整

bevy_eguiを使用して、シェーダーパラメータをGUIから調整できます。

use bevy_egui::{egui, EguiContexts, EguiPlugin};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins.set(AssetPlugin {
            mode: AssetServerMode::Watch,
            ..default()
        }))
        .add_plugins(EguiPlugin)
        .add_systems(Update, ui_system)
        .run();
}

fn ui_system(
    mut contexts: EguiContexts,
    mut materials: ResMut<Assets<BloomMaterial>>,
) {
    egui::Window::new("Bloom Settings").show(contexts.ctx_mut(), |ui| {
        for (handle, material) in materials.iter_mut() {
            ui.add(egui::Slider::new(&mut material.threshold, 0.0..=2.0).text("Threshold"));
            ui.add(egui::Slider::new(&mut material.intensity, 0.0..=5.0).text("Intensity"));
        }
    });
}

この構成により、以下の2つの調整手法を並行して使用できます：

• シェーダーコード調整：アルゴリズムそのものを変更（ホットリロード）
• パラメータ調整：UIスライダーでリアルタイムに数値を変更

以下のダイアグラムは、ホットリロードとUIパラメータ調整の併用ワークフローを示しています。

stateDiagram-v2
    [*] --> 初期実装
    初期実装 --> シェーダーコード編集: アルゴリズム変更
    初期実装 --> UIパラメータ調整: 数値調整
    
    シェーダーコード編集 --> ホットリロード: 保存
    ホットリロード --> 視覚確認: 0.5秒以内
    
    UIパラメータ調整 --> 即座反映: スライダー操作
    即座反映 --> 視覚確認: 即時
    
    視覚確認 --> 満足確認: 結果評価
    
    満足確認 --> シェーダーコード編集: 不満足（アルゴリズム問題）
    満足確認 --> UIパラメータ調整: 不満足（数値問題）
    満足確認 --> [*]: 満足

3. WGSLバリデーションツールの活用

Bevy 0.20は、wgpuのバリデーション機能を完全に統合しています。コンパイルエラー時に出力されるメッセージ例：

ERROR bevy_render::render_resource::shader: Shader compilation error in 'shaders/bloom.wgsl':
  ┌─ shaders/bloom.wgsl:18:5
  │
18│     let threshold_factor = smoothstep(settings.threshold - 0.1, settings.threshold + 0.1, luminance);
  │         ^^^^^^^^^^^^^^^^ type mismatch: expected 'f32', found 'vec3<f32>'
  │

このエラーメッセージには以下の情報が含まれます：

• ファイル名と行番号
• 問題のあるコード行のハイライト
• 型の不一致などの具体的なエラー内容

これにより、エラーの原因を即座に特定できます。

パフォーマンス最適化とベストプラクティス

シェーダーホットリロードを使用する際の推奨事項：

1. ファイル監視スコープの制限

大規模プロジェクトでは、監視対象ディレクトリを制限することでオーバーヘッドを削減できます。

App::new()
    .add_plugins(DefaultPlugins.set(AssetPlugin {
        mode: AssetServerMode::Watch,
        watch_for_changes_override: Some(vec![
            "assets/shaders".into(), // シェーダーのみ監視
        ]),
        ..default()
    }))
    .run();

これにより、assets/texturesやassets/modelsの大量のファイル変更を無視できます。

2. コンパイル済みシェーダーのキャッシング

本番ビルドでは、ホットリロードを無効化し、コンパイル済みシェーダーを事前にバンドルします。

#[cfg(debug_assertions)]
const ASSET_MODE: AssetServerMode = AssetServerMode::Watch;

#[cfg(not(debug_assertions))]
const ASSET_MODE: AssetServerMode = AssetServerMode::Unprocessed;

App::new()
    .add_plugins(DefaultPlugins.set(AssetPlugin {
        mode: ASSET_MODE,
        ..default()
    }))
    .run();

3. インクルードディレクティブの活用

Bevy 0.20では、WGSLの#importディレクティブもホットリロード対象です。共通関数を分離できます。

// shaders/common/color_utils.wgsl
fn luminance(color: vec3<f32>) -> f32 {
    return dot(color, vec3<f32>(0.2126, 0.7152, 0.0722));
}

// shaders/bloom.wgsl
#import "shaders/common/color_utils.wgsl"::luminance

@fragment
fn fragment(in: FullscreenVertexOutput) -> @location(0) vec4<f32> {
    let color = textureSample(screen_texture, texture_sampler, in.uv);
    let lum = luminance(color.rgb); // インポートした関数を使用
    // ...
}

color_utils.wgslを編集して保存すると、それをインポートしているすべてのシェーダーが自動的に再コンパイルされます。

4. エラーハンドリング戦略

シェーダーエラー時にフォールバックマテリアルを表示することで、視認性を保ちます。

use bevy::render::render_resource::ShaderError;

fn shader_error_handler(
    mut events: EventReader<AssetEvent<Shader>>,
    shaders: Res<Assets<Shader>>,
) {
    for event in events.read() {
        if let AssetEvent::Failed { id, error } = event {
            error!("Shader compilation failed: {}", error);
            // フォールバックシェーダーに切り替えるロジック
        }
    }
}

まとめ

Bevy 0.20のシェーダーホットリロード機能により、WGSL開発の効率が劇的に向上しました。主要なポイントは以下の通りです：

• 開発イテレーション速度が3倍以上に向上：従来の15〜23秒から0.5秒以下に短縮
• リアルタイムフィードバック：ファイル保存と同時にシェーダーが再コンパイル・適用される
• エラーの即座発見：詳細なコンパイルエラーメッセージで問題を迅速に特定
• UIツールとの統合：bevy_eguiスライダーとシェーダーコード編集を並行活用
• インクルードシステム対応：共通コードの変更が依存シェーダー全体に自動反映
• 本番ビルド最適化：デバッグ時のみホットリロードを有効化し、リリース時は無効化

この機能は、2026年6月1日時点でBevy 0.20の正式リリースに含まれており、すべての開発者が即座に利用可能です。視覚的な調整が重要なゲーム開発において、シェーダーホットリロードは必須の開発ツールとなるでしょう。

参考リンク

• Bevy 0.20 Release Notes - Official Blog
• Bevy Asset System Documentation - Hot Reloading
• wgpu 0.20 Release Notes - Shader Validation Improvements
• WGSL Specification - Import Directives
• notify crate v6.1 Documentation - File System Watching