Allow prepass in webgl (bevyengine#7537)

# Objective

- Use the prepass textures in webgl

## Solution

- Bind the prepass textures even when using webgl, but only if msaa is disabled
- Also did some refactors to centralize how textures are bound, similar to the EnvironmentMapLight PR
- ~~Also did some refactors of the example to make it work in webgl~~
- ~~To make the example work in webgl, I needed to use a sampler for the depth texture, the resulting code looks a bit weird, but it's simple enough and I think it's worth it to show how it works when using webgl~~

Cargo.toml

@@ -1399,7 +1399,7 @@ path = "examples/shader/shader_prepass.rs"
 
 [package.metadata.example.shader_prepass]
 name = "Material Prepass"
-description = "A shader that uses the depth texture generated in a prepass"
+description = "A shader that uses the various textures generated by the prepass"
 category = "Shaders"
 wasm = false
 

assets/shaders/show_prepass.wgsl

@@ -2,25 +2,28 @@
 #import bevy_pbr::mesh_view_bindings
 #import bevy_pbr::prepass_utils
 
+struct ShowPrepassSettings {
+    show_depth: u32,
+    show_normals: u32,
+    padding_1: u32,
+    padding_2: u32,
+}
 @group(1) @binding(0)
-var<uniform> show_depth: f32;
-@group(1) @binding(1)
-var<uniform> show_normal: f32;
+var<uniform> settings: ShowPrepassSettings;
 
 @fragment
 fn fragment(
     @builtin(position) frag_coord: vec4<f32>,
     @builtin(sample_index) sample_index: u32,
     #import bevy_pbr::mesh_vertex_output
 ) -> @location(0) vec4<f32> {
-    if show_depth == 1.0 {
+    if settings.show_depth == 1u {
         let depth = prepass_depth(frag_coord, sample_index);
         return vec4(depth, depth, depth, 1.0);
-    } else if show_normal == 1.0 {
+    } else if settings.show_normals == 1u {
         let normal = prepass_normal(frag_coord, sample_index);
         return vec4(normal, 1.0);
-    } else {
-        // transparent
-        return vec4(0.0);
     }
+
+    return vec4(0.0);
 }

crates/bevy_pbr/src/prepass/mod.rs

@@ -26,16 +26,17 @@ use bevy_render::{
     },
     render_resource::{
         BindGroup, BindGroupDescriptor, BindGroupEntry, BindGroupLayout, BindGroupLayoutDescriptor,
-        BindGroupLayoutEntry, BindingType, BlendState, BufferBindingType, ColorTargetState,
-        ColorWrites, CompareFunction, DepthBiasState, DepthStencilState, Extent3d, FragmentState,
-        FrontFace, MultisampleState, PipelineCache, PolygonMode, PrimitiveState,
-        RenderPipelineDescriptor, Shader, ShaderDefVal, ShaderRef, ShaderStages, ShaderType,
-        SpecializedMeshPipeline, SpecializedMeshPipelineError, SpecializedMeshPipelines,
-        StencilFaceState, StencilState, TextureDescriptor, TextureDimension, TextureFormat,
-        TextureUsages, VertexState,
+        BindGroupLayoutEntry, BindingResource, BindingType, BlendState, BufferBindingType,
+        ColorTargetState, ColorWrites, CompareFunction, DepthBiasState, DepthStencilState,
+        Extent3d, FragmentState, FrontFace, MultisampleState, PipelineCache, PolygonMode,
+        PrimitiveState, RenderPipelineDescriptor, Shader, ShaderDefVal, ShaderRef, ShaderStages,
+        ShaderType, SpecializedMeshPipeline, SpecializedMeshPipelineError,
+        SpecializedMeshPipelines, StencilFaceState, StencilState, TextureDescriptor,
+        TextureDimension, TextureFormat, TextureSampleType, TextureUsages, TextureViewDimension,
+        VertexState,
     },
     renderer::RenderDevice,
-    texture::TextureCache,
+    texture::{FallbackImagesDepth, FallbackImagesMsaa, TextureCache},
     view::{ExtractedView, Msaa, ViewUniform, ViewUniformOffset, ViewUniforms, VisibleEntities},
     Extract, ExtractSchedule, RenderApp, RenderSet,
 };
@@ -333,6 +334,73 @@ where
     }
 }
 
+pub fn get_bind_group_layout_entries(
+    bindings: [u32; 2],
+    multisampled: bool,
+) -> [BindGroupLayoutEntry; 2] {
+    [
+        // Depth texture
+        BindGroupLayoutEntry {
+            binding: bindings[0],
+            visibility: ShaderStages::FRAGMENT,
+            ty: BindingType::Texture {
+                multisampled,
+                sample_type: TextureSampleType::Depth,
+                view_dimension: TextureViewDimension::D2,
+            },
+            count: None,
+        },
+        // Normal texture
+        BindGroupLayoutEntry {
+            binding: bindings[1],
+            visibility: ShaderStages::FRAGMENT,
+            ty: BindingType::Texture {
+                multisampled,
+                sample_type: TextureSampleType::Float { filterable: true },
+                view_dimension: TextureViewDimension::D2,
+            },
+            count: None,
+        },
+    ]
+}
+
+pub fn get_bindings<'a>(
+    prepass_textures: Option<&'a ViewPrepassTextures>,
+    fallback_images: &'a mut FallbackImagesMsaa,
+    fallback_depths: &'a mut FallbackImagesDepth,
+    msaa: &'a Msaa,
+    bindings: [u32; 2],
+) -> [BindGroupEntry<'a>; 2] {
+    let depth_view = match prepass_textures.and_then(|x| x.depth.as_ref()) {
+        Some(texture) => &texture.default_view,
+        None => {
+            &fallback_depths
+                .image_for_samplecount(msaa.samples())
+                .texture_view
+        }
+    };
+
+    let normal_view = match prepass_textures.and_then(|x| x.normal.as_ref()) {
+        Some(texture) => &texture.default_view,
+        None => {
+            &fallback_images
+                .image_for_samplecount(msaa.samples())
+                .texture_view
+        }
+    };
+
+    [
+        BindGroupEntry {
+            binding: bindings[0],
+            resource: BindingResource::TextureView(depth_view),
+        },
+        BindGroupEntry {
+            binding: bindings[1],
+            resource: BindingResource::TextureView(normal_view),
+        },
+    ]
+}
+
 // Extract the render phases for the prepass
 pub fn extract_camera_prepass_phase(
     mut commands: Commands,

crates/bevy_pbr/src/prepass/prepass_utils.wgsl

@@ -6,7 +6,7 @@ fn prepass_normal(frag_coord: vec4<f32>, sample_index: u32) -> vec3<f32> {
     let normal_sample = textureLoad(normal_prepass_texture, vec2<i32>(frag_coord.xy), i32(sample_index));
 #else
     let normal_sample = textureLoad(normal_prepass_texture, vec2<i32>(frag_coord.xy), 0);
-#endif
+#endif // MULTISAMPLED
     return normal_sample.xyz * 2.0 - vec3(1.0);
 }
 #endif // NORMAL_PREPASS
@@ -17,7 +17,7 @@ fn prepass_depth(frag_coord: vec4<f32>, sample_index: u32) -> f32 {
     let depth_sample = textureLoad(depth_prepass_texture, vec2<i32>(frag_coord.xy), i32(sample_index));
 #else
     let depth_sample = textureLoad(depth_prepass_texture, vec2<i32>(frag_coord.xy), 0);
-#endif
+#endif // MULTISAMPLED
     return depth_sample;
 }
 #endif // DEPTH_PREPASS

crates/bevy_pbr/src/render/mesh.rs

@@ -1,9 +1,9 @@
 use crate::{
-    environment_map, queue_shadow_view_bind_group, EnvironmentMapLight, FogMeta, GlobalLightMeta,
-    GpuFog, GpuLights, GpuPointLights, LightMeta, NotShadowCaster, NotShadowReceiver,
-    ShadowPipeline, ViewClusterBindings, ViewFogUniformOffset, ViewLightsUniformOffset,
-    ViewShadowBindings, CLUSTERED_FORWARD_STORAGE_BUFFER_COUNT, MAX_CASCADES_PER_LIGHT,
-    MAX_DIRECTIONAL_LIGHTS,
+    environment_map, prepass, queue_shadow_view_bind_group, EnvironmentMapLight, FogMeta,
+    GlobalLightMeta, GpuFog, GpuLights, GpuPointLights, LightMeta, NotShadowCaster,
+    NotShadowReceiver, ShadowPipeline, ViewClusterBindings, ViewFogUniformOffset,
+    ViewLightsUniformOffset, ViewShadowBindings, CLUSTERED_FORWARD_STORAGE_BUFFER_COUNT,
+    MAX_CASCADES_PER_LIGHT, MAX_DIRECTIONAL_LIGHTS,
 };
 use bevy_app::{IntoSystemAppConfigs, Plugin};
 use bevy_asset::{load_internal_asset, Assets, Handle, HandleUntyped};
@@ -432,29 +432,11 @@ impl FromWorld for MeshPipeline {
             let tonemapping_lut_entries = get_lut_bind_group_layout_entries([14, 15]);
             entries.extend_from_slice(&tonemapping_lut_entries);
 
-            if cfg!(not(feature = "webgl")) {
-                // Depth texture
-                entries.push(BindGroupLayoutEntry {
-                    binding: 16,
-                    visibility: ShaderStages::FRAGMENT,
-                    ty: BindingType::Texture {
-                        multisampled,
-                        sample_type: TextureSampleType::Depth,
-                        view_dimension: TextureViewDimension::D2,
-                    },
-                    count: None,
-                });
-                // Normal texture
-                entries.push(BindGroupLayoutEntry {
-                    binding: 17,
-                    visibility: ShaderStages::FRAGMENT,
-                    ty: BindingType::Texture {
-                        multisampled,
-                        sample_type: TextureSampleType::Float { filterable: true },
-                        view_dimension: TextureViewDimension::D2,
-                    },
-                    count: None,
-                });
+            if cfg!(not(feature = "webgl")) || (cfg!(feature = "webgl") && !multisampled) {
+                entries.extend_from_slice(&prepass::get_bind_group_layout_entries(
+                    [16, 17],
+                    multisampled,
+                ));
             }
 
             entries
@@ -1067,34 +1049,15 @@ pub fn queue_mesh_view_bind_groups(
                 get_lut_bindings(&images, &tonemapping_luts, tonemapping, [14, 15]);
             entries.extend_from_slice(&tonemapping_luts);
 
-            // When using WebGL with MSAA, we can't create the fallback textures required by the prepass
-            // When using WebGL, and MSAA is disabled, we can't bind the textures either
-            if cfg!(not(feature = "webgl")) {
-                let depth_view = match prepass_textures.and_then(|x| x.depth.as_ref()) {
-                    Some(texture) => &texture.default_view,
-                    None => {
-                        &fallback_depths
-                            .image_for_samplecount(msaa.samples())
-                            .texture_view
-                    }
-                };
-                entries.push(BindGroupEntry {
-                    binding: 16,
-                    resource: BindingResource::TextureView(depth_view),
-                });
-
-                let normal_view = match prepass_textures.and_then(|x| x.normal.as_ref()) {
-                    Some(texture) => &texture.default_view,
-                    None => {
-                        &fallback_images
-                            .image_for_samplecount(msaa.samples())
-                            .texture_view
-                    }
-                };
-                entries.push(BindGroupEntry {
-                    binding: 17,
-                    resource: BindingResource::TextureView(normal_view),
-                });
+            // When using WebGL, we can't have a depth texture with multisampling
+            if cfg!(not(feature = "webgl")) || (cfg!(feature = "webgl") && msaa.samples() == 1) {
+                entries.extend_from_slice(&prepass::get_bindings(
+                    prepass_textures,
+                    &mut fallback_images,
+                    &mut fallback_depths,
+                    &msaa,
+                    [16, 17],
+                ));
             }
 
             let view_bind_group = render_device.create_bind_group(&BindGroupDescriptor {

examples/README.md

@@ -276,7 +276,7 @@ Example | Description
 [Material](../examples/shader/shader_material.rs) | A shader and a material that uses it
 [Material - GLSL](../examples/shader/shader_material_glsl.rs) | A shader that uses the GLSL shading language
 [Material - Screenspace Texture](../examples/shader/shader_material_screenspace_texture.rs) | A shader that samples a texture with view-independent UV coordinates
-[Material Prepass](../examples/shader/shader_prepass.rs) | A shader that uses the depth texture generated in a prepass
+[Material Prepass](../examples/shader/shader_prepass.rs) | A shader that uses the various textures generated by the prepass
 [Post Processing](../examples/shader/post_processing.rs) | A custom post processing effect, using two cameras, with one reusing the render texture of the first one
 [Shader Defs](../examples/shader/shader_defs.rs) | A shader that uses "shaders defs" (a bevy tool to selectively toggle parts of a shader)
 [Texture Binding Array (Bindless Textures)](../examples/shader/texture_binding_array.rs) | A shader that shows how to bind and sample multiple textures as a binding array (a.k.a. bindless textures).

examples/shader/shader_prepass.rs

@@ -10,7 +10,7 @@ use bevy::{
     pbr::{NotShadowCaster, PbrPlugin},
     prelude::*,
     reflect::TypeUuid,
-    render::render_resource::{AsBindGroup, ShaderRef},
+    render::render_resource::{AsBindGroup, ShaderRef, ShaderType},
 };
 
 fn main() {
@@ -30,7 +30,7 @@ fn main() {
         })
         .add_startup_system(setup)
         .add_system(rotate)
-        .add_system(update)
+        .add_system(toggle_prepass_view)
         .run();
 }
 
@@ -69,8 +69,7 @@ fn setup(
         MaterialMeshBundle {
             mesh: meshes.add(shape::Quad::new(Vec2::new(20.0, 20.0)).into()),
             material: depth_materials.add(PrepassOutputMaterial {
-                show_depth: 0.0,
-                show_normal: 0.0,
+                settings: ShowPrepassSettings::default(),
             }),
             transform: Transform::from_xyz(-0.75, 1.25, 3.0)
                 .looking_at(Vec3::new(2.0, -2.5, -5.0), Vec3::Y),
@@ -193,14 +192,20 @@ fn rotate(mut q: Query<&mut Transform, With<Rotates>>, time: Res<Time>) {
     }
 }
 
+#[derive(Debug, Clone, Default, ShaderType)]
+struct ShowPrepassSettings {
+    show_depth: u32,
+    show_normals: u32,
+    padding_1: u32,
+    padding_2: u32,
+}
+
 // This shader simply loads the prepass texture and outputs it directly
 #[derive(AsBindGroup, TypeUuid, Debug, Clone)]
 #[uuid = "0af99895-b96e-4451-bc12-c6b1c1c52750"]
 pub struct PrepassOutputMaterial {
     #[uniform(0)]
-    show_depth: f32,
-    #[uniform(1)]
-    show_normal: f32,
+    settings: ShowPrepassSettings,
 }
 
 impl Material for PrepassOutputMaterial {
@@ -214,28 +219,29 @@ impl Material for PrepassOutputMaterial {
     }
 }
 
-fn update(
+/// Every time you press space, it will cycle between transparent, depth and normals view
+fn toggle_prepass_view(
     keycode: Res<Input<KeyCode>>,
     material_handle: Query<&Handle<PrepassOutputMaterial>>,
     mut materials: ResMut<Assets<PrepassOutputMaterial>>,
     mut text: Query<&mut Text>,
 ) {
     if keycode.just_pressed(KeyCode::Space) {
         let handle = material_handle.single();
-        let mut mat = materials.get_mut(handle).unwrap();
+        let mat = materials.get_mut(handle).unwrap();
         let out_text;
-        if mat.show_depth == 1.0 {
+        if mat.settings.show_depth == 1 {
             out_text = "normal";
-            mat.show_depth = 0.0;
-            mat.show_normal = 1.0;
-        } else if mat.show_normal == 1.0 {
+            mat.settings.show_depth = 0;
+            mat.settings.show_normals = 1;
+        } else if mat.settings.show_normals == 1 {
             out_text = "transparent";
-            mat.show_depth = 0.0;
-            mat.show_normal = 0.0;
+            mat.settings.show_depth = 0;
+            mat.settings.show_normals = 0;
         } else {
             out_text = "depth";
-            mat.show_depth = 1.0;
-            mat.show_normal = 0.0;
+            mat.settings.show_depth = 1;
+            mat.settings.show_normals = 0;
         }
 
         let mut text = text.single_mut();