Fix dof and background motion vectors on webgpu (bevyengine#23629)

# Objective

WebGPU-only fix extracted from bevyengine#22554 and bevyengine#22555. Fixes bevyengine#20459

## Solution

Fix normal + motion vector prepass by setting write mask to empty. This
is a firefox/wgpu bug that it's not validated
gfx-rs/wgpu#9147, but chromium does.

Fix dof with bokeh mode. I guess it's `naga_oil` bug but I'm not sure.

## Testing

I tested dof and skybox examples on web.

Author: beicause

crates/bevy_core_pipeline/src/prepass/background_motion_vectors.rs

@@ -150,6 +150,18 @@ impl SpecializedRenderPipeline for BackgroundMotionVectorsPipeline {
     type Key = BackgroundMotionVectorsPipelineKey;
 
     fn specialize(&self, key: Self::Key) -> RenderPipelineDescriptor {
+        let mut targets = prepass_target_descriptors(key.normal_prepass, true, false);
+        // The shader only outputs to attachment at location 1, set write mask of the other attachments to empty
+        // to avoid WebGPU validation error "Color target has no corresponding fragment stage output but writeMask is not zero".
+        for target in
+            targets
+                .iter_mut()
+                .enumerate()
+                .filter_map(|(i, t)| if i == 1 { None } else { t.as_mut() })
+        {
+            target.write_mask = bevy_render::render_resource::ColorWrites::empty();
+        }
+
         RenderPipelineDescriptor {
             label: Some("background_motion_vectors_pipeline".into()),
             layout: vec![self.bind_group_layout.clone()],
@@ -168,7 +180,7 @@ impl SpecializedRenderPipeline for BackgroundMotionVectorsPipeline {
             },
             fragment: Some(FragmentState {
                 shader: self.fragment_shader.clone(),
-                targets: prepass_target_descriptors(key.normal_prepass, true, false),
+                targets,
                 ..default()
             }),
             ..default()

crates/bevy_post_process/src/dof/dof.wgsl

@@ -212,7 +212,7 @@ fn gaussian_vertical(in: FullscreenVertexOutput) -> @location(0) vec4<f32> {
 //       │
 //       │
 @fragment
-fn bokeh_pass_0(in: FullscreenVertexOutput) -> DualOutput {
+fn bokeh_pass_a(in: FullscreenVertexOutput) -> DualOutput {
     let coc = calculate_circle_of_confusion(in.position);
     let vertical = box_blur_a(in.position, coc, vec2(0.0, 1.0));
     let diagonal = box_blur_a(in.position, coc, vec2(COS_NEG_FRAC_PI_6, SIN_NEG_FRAC_PI_6));
@@ -232,7 +232,7 @@ fn bokeh_pass_0(in: FullscreenVertexOutput) -> DualOutput {
 //       •
 #ifdef DUAL_INPUT
 @fragment
-fn bokeh_pass_1(in: FullscreenVertexOutput) -> @location(0) vec4<f32> {
+fn bokeh_pass_b(in: FullscreenVertexOutput) -> @location(0) vec4<f32> {
     let coc = calculate_circle_of_confusion(in.position);
     let output_0 = box_blur_a(in.position, coc, vec2(COS_NEG_FRAC_PI_6, SIN_NEG_FRAC_PI_6));
     let output_1 = box_blur_b(in.position, coc, vec2(COS_NEG_FRAC_PI_5_6, SIN_NEG_FRAC_PI_5_6));

crates/bevy_post_process/src/dof/mod.rs

@@ -124,8 +124,6 @@ pub enum DepthOfFieldMode {
     ///
     /// For more information, see [Wikipedia's article on *bokeh*].
     ///
-    /// This doesn't work on WebGPU.
-    ///
     /// [Wikipedia's article on *bokeh*]: https://en.wikipedia.org/wiki/Bokeh
     Bokeh,
 
@@ -135,9 +133,6 @@ pub enum DepthOfFieldMode {
     /// aesthetically pleasing but requires less video memory bandwidth.
     ///
     /// This is the default.
-    ///
-    /// This works on native and WebGPU.
-    /// If targeting native platforms, consider using [`DepthOfFieldMode::Bokeh`] instead.
     #[default]
     Gaussian,
 }
@@ -642,8 +637,10 @@ impl SpecializedRenderPipeline for DepthOfFieldPipeline {
                 entry_point: Some(match key.pass {
                     DofPass::GaussianHorizontal => "gaussian_horizontal".into(),
                     DofPass::GaussianVertical => "gaussian_vertical".into(),
-                    DofPass::BokehPass0 => "bokeh_pass_0".into(),
-                    DofPass::BokehPass1 => "bokeh_pass_1".into(),
+                    // Entry point names that end with number don't work on wasm. Perhaps `naga_oil` bug.
+                    // See <https://github.com/bevyengine/bevy/pull/23629>
+                    DofPass::BokehPass0 => "bokeh_pass_a".into(),
+                    DofPass::BokehPass1 => "bokeh_pass_b".into(),
                 }),
                 targets,
             }),

examples/3d/skybox.rs

@@ -1,6 +1,6 @@
 //! Load a cubemap texture onto a cube like a skybox and cycle through different compressed texture formats
 
-#[cfg(not(target_arch = "wasm32"))]
+#[cfg(any(feature = "webgpu", not(target_arch = "wasm32")))]
 use bevy::anti_alias::taa::TemporalAntiAliasing;
 
 use bevy::{
@@ -73,7 +73,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn((
         Camera3d::default(),
         Msaa::Off,
-        #[cfg(not(target_arch = "wasm32"))]
+        #[cfg(any(feature = "webgpu", not(target_arch = "wasm32")))]
         TemporalAntiAliasing::default(),
         ScreenSpaceAmbientOcclusion::default(),
         Transform::from_xyz(0.0, 0.0, 8.0).looking_at(Vec3::ZERO, Vec3::Y),