From 035259fba7ec49484ad029f1f0670f2feb058f54 Mon Sep 17 00:00:00 2001 From: Silas Bartha Date: Tue, 25 Feb 2025 19:48:54 -0500 Subject: Added Depth-based Outlines --- assets/shaders/outline_post_process.wgsl | 109 +++++++++++++++++++------------ src/components.rs | 22 +++++-- src/lib.rs | 21 ++++-- src/nodes.rs | 7 +- src/resources.rs | 6 +- 5 files changed, 108 insertions(+), 57 deletions(-) diff --git a/assets/shaders/outline_post_process.wgsl b/assets/shaders/outline_post_process.wgsl index e4dfacc..e5263a1 100644 --- a/assets/shaders/outline_post_process.wgsl +++ b/assets/shaders/outline_post_process.wgsl @@ -1,62 +1,87 @@ #import bevy_core_pipeline::fullscreen_vertex_shader::FullscreenVertexOutput; #import bevy_pbr::{ rgb9e5 }; +#import bevy_pbr::view_transformations::{ + perspective_camera_near, +}; +#import bevy_pbr::mesh_view_bindings as view_bindings; struct OutlinePostProcessSettings { weight: f32, normal_threshold: f32, - adaptive: u32, - light_threshold: f32, + depth_threshold: f32, + adaptive: u32, + camera_near: f32, } @group(0) @binding(0) var screen_texture: texture_2d; @group(0) @binding(1) var screen_sampler: sampler; @group(0) @binding(2) var normal_texture: texture_2d; @group(0) @binding(3) var normal_sampler: sampler; -@group(0) @binding(4) var deferred_texture: texture_2d; -@group(0) @binding(5) var settings: OutlinePostProcessSettings; +@group(0) @binding(4) var depth_texture: texture_depth_2d; +@group(0) @binding(5) var depth_sampler: sampler; +@group(0) @binding(6) var settings: OutlinePostProcessSettings; @fragment fn fragment( in: FullscreenVertexOutput ) -> @location(0) vec4 { let screen_color = textureSample(screen_texture, screen_sampler, in.uv); - let deferred_dimensions = textureDimensions(deferred_texture); - let deferred_texel = textureLoad(deferred_texture, vec2u(vec2f(deferred_dimensions) * in.uv), 0); - let deferred_color = vec4f(vec3f(unpack4x8unorm(deferred_texel.r).rgb), 1.0); - let emissive = vec4f(rgb9e5::rgb9e5_to_vec3_(deferred_texel.g), 1.0); - let light = screen_color / ((deferred_color) + vec4f(0.001, 0.001, 0.001, 1.0)); - let luma = (0.2126 * screen_color.r + 0.7152 * screen_color.g + 0.0722 * screen_color.b); - let light_luma = (0.2126 * light.r + 0.7152 * light.g + 0.0722 * light.b); - let emissive_luma = (0.2126 * emissive.r + 0.7152 * emissive.g + 0.0722 * emissive.b); - let final_luma = luma + light_luma + emissive_luma; - - if final_luma > settings.light_threshold { - let outline_width = settings.weight / vec2f(textureDimensions(screen_texture)); - - let uv_top = vec2f(in.uv.x, in.uv.y - outline_width.y); - let uv_right = vec2f(in.uv.x + outline_width.x, in.uv.y); - let uv_top_right = vec2f(in.uv.x + outline_width.x, in.uv.y - outline_width.y); - - let normal = textureSample(normal_texture, normal_sampler, in.uv); - let normal_top = textureSample(normal_texture, normal_sampler, uv_top); - let normal_right = textureSample(normal_texture, normal_sampler, uv_right); - let normal_top_right = textureSample(normal_texture, normal_sampler, uv_top_right); - - let normal_delta_top = abs(normal - normal_top); - let normal_delta_right = abs(normal - normal_right); - let normal_delta_top_right = abs(normal - normal_top_right); - - let normal_delta_max = max(normal_delta_top, max(normal_delta_right, normal_delta_top_right)); - let normal_delta_raw = max(normal_delta_max.x, max(normal_delta_max.y, normal_delta_max.z)); - - let show_outline = f32(normal_delta_raw > settings.normal_threshold); - - var outline = vec4f(show_outline, show_outline, show_outline, 0.0); - if settings.adaptive != 0 && luma < 0.5 { - outline = outline * -1; - } - return screen_color - outline + emissive; - } - return screen_color + emissive; + + let outline_width = settings.weight / vec2f(textureDimensions(screen_texture)); + let uv_top = vec2f(in.uv.x, in.uv.y - outline_width.y); + let uv_right = vec2f(in.uv.x + outline_width.x, in.uv.y); + let uv_top_right = vec2f(in.uv.x + outline_width.x, in.uv.y - outline_width.y); + + // NORMAL FACTOR {{{ + let normal = textureSample(normal_texture, normal_sampler, in.uv); + let normal_top = textureSample(normal_texture, normal_sampler, uv_top); + let normal_right = textureSample(normal_texture, normal_sampler, uv_right); + let normal_top_right = textureSample(normal_texture, normal_sampler, uv_top_right); + + let normal_delta_top = abs(normal - normal_top); + let normal_delta_right = abs(normal - normal_right); + let normal_delta_top_right = abs(normal - normal_top_right); + + let normal_delta_max = max(normal_delta_top, max(normal_delta_right, normal_delta_top_right)); + let normal_delta_raw = max(normal_delta_max.x, max(normal_delta_max.y, normal_delta_max.z)); + + let show_outline_normal = f32(normal_delta_raw > settings.normal_threshold); + let normal_outline = vec4f(show_outline_normal, show_outline_normal, show_outline_normal, 0.0); + // }}} + + let frag_width = settings.weight / vec2f(textureDimensions(screen_texture)); + let depth_uv_top_right = vec2f(in.uv.x + frag_width.x, in.uv.y - frag_width.y); + let depth_uv_top_left = vec2f(in.uv.x - frag_width.x, in.uv.y - frag_width.y); + let depth_uv_bottom_right = vec2f(in.uv.x + frag_width.x, in.uv.y + frag_width.y); + let depth_uv_bottom_left = vec2f(in.uv.x - frag_width.x, in.uv.y + frag_width.y); + // DEPTH FACTOR {{{ + let depth_color = textureSample(depth_texture, depth_sampler, in.uv); + let depth = linearize_depth(depth_color); + let depth_top_right = linearize_depth(textureSample(depth_texture, depth_sampler, depth_uv_top_right)); + let depth_top_left = linearize_depth(textureSample(depth_texture, depth_sampler, depth_uv_top_left)); + let depth_bottom_right = linearize_depth(textureSample(depth_texture, depth_sampler, depth_uv_bottom_right)); + let depth_bottom_left = linearize_depth(textureSample(depth_texture, depth_sampler, depth_uv_bottom_left)); + + var depth_delta = 0.0; + depth_delta = depth_delta + depth - depth_top_right; + depth_delta = depth_delta + depth - depth_top_left; + depth_delta = depth_delta + depth - depth_bottom_right; + depth_delta = depth_delta + depth - depth_bottom_left; + + var depth_outline = vec4(step(settings.depth_threshold, depth_delta)); + if depth_color == 0.0 { + depth_outline = vec4(0.0); + } + // }}} + + var outline = (depth_outline + normal_outline); + if settings.adaptive != 0 && luma < 0.5 { + outline = outline * -1; + } + return screen_color - outline ; +} + +fn linearize_depth(depth: f32) -> f32 { + return settings.camera_near / depth; } diff --git a/src/components.rs b/src/components.rs index 22de86c..bdce6c9 100644 --- a/src/components.rs +++ b/src/components.rs @@ -1,7 +1,7 @@ use bevy::{ + core_pipeline::prepass::{DeferredPrepass, DepthPrepass, NormalPrepass}, prelude::*, render::{extract_component::ExtractComponent, render_resource::ShaderType}, - core_pipeline::prepass::{NormalPrepass, DepthPrepass, DeferredPrepass}, }; /// Component which, when inserted into an entity with a camera and normal prepass, enables an outline effect for that @@ -14,20 +14,29 @@ pub struct OutlinePostProcessSettings { /// A threshold for normal differences, values below this threshold will not become outlines. /// Higher values will result in more outlines which may look better on smooth surfaces. normal_threshold: f32, + /// A threshold for depth differences (in units), values below this threshold will not become outlines. + /// Higher values will result in more outlines which may look better on smooth surfaces. + depth_threshold: f32, /// Whether to use adaptive outlines. White outlines will be drawn around darker objects, while black ones will be drawn around lighter ones. adaptive: u32, - /// Threshold of illumination for outlines to apply. Requires deferred prepass. - light_threshold: f32, + /// Near plane depth of camera, used for linearization of depth buffer values + pub(crate) camera_near: f32, } impl OutlinePostProcessSettings { /// Create a new instance with the given settings - pub fn new(weight: f32, normal_threshold: f32, adaptive: bool, light_threshold: f32) -> Self { + pub fn new( + weight: f32, + normal_threshold: f32, + depth_threshold: f32, + adaptive: bool, + ) -> Self { Self { weight, normal_threshold, adaptive: adaptive as u32, - light_threshold, + depth_threshold, + camera_near: 0.0, } } } @@ -38,7 +47,8 @@ impl Default for OutlinePostProcessSettings { weight: 1.0, normal_threshold: 0.0, adaptive: 0, - light_threshold: 0.0, + depth_threshold: 0.05, + camera_near: 0.0, } } } diff --git a/src/lib.rs b/src/lib.rs index 3040bff..f189cd4 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -1,7 +1,7 @@ #![warn(missing_docs)] //! A plugin for the Bevy game engine which provides an outline post-process effect. The effect -//! makes use of a normal prepass to generate outlines where differences in the normal buffer +//! makes use of a normal and depth prepass to generate outlines where significant differences in the values //! occur. use bevy::{ @@ -9,12 +9,11 @@ use bevy::{ core_pipeline::core_3d::graph::{Core3d, Node3d}, prelude::*, render::{ - extract_component::{ExtractComponentPlugin, UniformComponentPlugin}, - render_graph::{RenderGraphApp, ViewNodeRunner}, - RenderApp, + extract_component::{ExtractComponentPlugin, UniformComponentPlugin}, render_graph::{RenderGraphApp, ViewNodeRunner}, RenderApp }, }; +use components::OutlinePostProcessSettings; pub use nodes::OutlineRenderLabel; /// Components used by this plugin. @@ -32,7 +31,7 @@ impl Plugin for OutlinePostProcessPlugin { app.add_plugins(( UniformComponentPlugin::::default(), ExtractComponentPlugin::::default(), - )); + )).add_systems(Update, update_shader_clip_planes); let Some(render_app) = app.get_sub_app_mut(RenderApp) else { return; @@ -61,3 +60,15 @@ impl Plugin for OutlinePostProcessPlugin { render_app.init_resource::(); } } + +fn update_shader_clip_planes( + mut settings_query: Query<(Ref, &mut OutlinePostProcessSettings)>, +) { + for (projection, mut settings) in settings_query.iter_mut() { + if projection.is_changed() { + if let Projection::Perspective(projection) = projection.into_inner() { + settings.camera_near = projection.near; + } + } + } +} diff --git a/src/nodes.rs b/src/nodes.rs index 1c750c7..b2b4a22 100644 --- a/src/nodes.rs +++ b/src/nodes.rs @@ -57,8 +57,8 @@ impl ViewNode for OutlineRenderNode { return Ok(()); }; - let Some(deferred_buffer_view) = view_prepass_textures.deferred_view() else { - error!("Failed to get deferred buffer view"); + let Some(depth_buffer_view) = view_prepass_textures.depth_view() else { + error!("Failed to get normal buffer view"); return Ok(()); }; @@ -72,7 +72,8 @@ impl ViewNode for OutlineRenderNode { &render_pipeline.screen_sampler, normal_buffer_view, &render_pipeline.normal_sampler, - deferred_buffer_view, + depth_buffer_view, + &render_pipeline.depth_sampler, uniform_binding, )), ); diff --git a/src/resources.rs b/src/resources.rs index 072b21c..4460558 100644 --- a/src/resources.rs +++ b/src/resources.rs @@ -20,6 +20,7 @@ pub struct OutlinePostProcessPipeline { pub layout: BindGroupLayout, pub screen_sampler: Sampler, pub normal_sampler: Sampler, + pub depth_sampler: Sampler, pub pipeline_id: CachedRenderPipelineId, } @@ -36,7 +37,8 @@ impl FromWorld for OutlinePostProcessPipeline { sampler(SamplerBindingType::Filtering), texture_2d(TextureSampleType::Float { filterable: true }), sampler(SamplerBindingType::Filtering), - texture_2d(TextureSampleType::Uint), + texture_2d(TextureSampleType::Depth), + sampler(SamplerBindingType::NonFiltering), uniform_buffer::(false), ), ), @@ -44,6 +46,7 @@ impl FromWorld for OutlinePostProcessPipeline { let screen_sampler = render_device.create_sampler(&SamplerDescriptor::default()); let normal_sampler = render_device.create_sampler(&SamplerDescriptor::default()); + let depth_sampler = render_device.create_sampler(&SamplerDescriptor::default()); let shader = world.resource::().load::( "embedded://bevy_outline_post_process/../assets/shaders/outline_post_process.wgsl", @@ -77,6 +80,7 @@ impl FromWorld for OutlinePostProcessPipeline { layout, screen_sampler, normal_sampler, + depth_sampler, pipeline_id, } } -- cgit v1.2.3