mirror of
https://github.com/bevyengine/bevy
synced 2024-11-22 04:33:37 +00:00
add a post-processing example (#4797)
# Objective - Add an example showing a custom post processing effect, done after the first rendering pass. ## Solution - A simple post processing "chromatic aberration" effect. I mixed together examples `3d/render_to_texture`, and `shader/shader_material_screenspace_texture` - Reading a bit how https://github.com/bevyengine/bevy/pull/3430 was done gave me pointers to apply the main pass to the 2d render rather than using a 3d quad. This work might be or not be relevant to https://github.com/bevyengine/bevy/issues/2724 <details> <summary> ⚠️ Click for a video of the render ⚠️ I’ve been told it might hurt the eyes 👀 , maybe we should choose another effect just in case ?</summary> https://user-images.githubusercontent.com/2290685/169138830-a6dc8a9f-8798-44b9-8d9e-449e60614916.mp4 </details> # Request for feedbacks - [ ] Is chromatic aberration effect ok ? (Correct term, not a danger for the eyes ?) I'm open to suggestion to make something different. - [ ] Is the code idiomatic ? I preferred a "main camera -> **new camera with post processing applied to a quad**" approach to emulate minimum modification to existing code wanting to add global post processing. --- ## Changelog - Add a full screen post processing shader example
This commit is contained in:
parent
5e2cfb2f19
commit
765bd46c2e
4 changed files with 286 additions and 0 deletions
|
@ -512,6 +512,10 @@ path = "examples/scene/scene.rs"
|
|||
name = "custom_vertex_attribute"
|
||||
path = "examples/shader/custom_vertex_attribute.rs"
|
||||
|
||||
[[example]]
|
||||
name = "post_processing"
|
||||
path = "examples/shader/post_processing.rs"
|
||||
|
||||
[[example]]
|
||||
name = "shader_defs"
|
||||
path = "examples/shader/shader_defs.rs"
|
||||
|
|
25
assets/shaders/custom_material_chromatic_aberration.wgsl
Normal file
25
assets/shaders/custom_material_chromatic_aberration.wgsl
Normal file
|
@ -0,0 +1,25 @@
|
|||
#import bevy_pbr::mesh_view_bindings
|
||||
|
||||
[[group(1), binding(0)]]
|
||||
var texture: texture_2d<f32>;
|
||||
|
||||
[[group(1), binding(1)]]
|
||||
var our_sampler: sampler;
|
||||
|
||||
|
||||
[[stage(fragment)]]
|
||||
fn fragment([[builtin(position)]] position: vec4<f32>) -> [[location(0)]] vec4<f32> {
|
||||
// Get screen position with coordinates from 0 to 1
|
||||
let uv = position.xy / vec2<f32>(view.width, view.height);
|
||||
let offset_strength = 0.02;
|
||||
|
||||
// Sample each color channel with an arbitrary shift
|
||||
var output_color = vec4<f32>(
|
||||
textureSample(texture, our_sampler, uv + vec2<f32>(offset_strength, -offset_strength)).r,
|
||||
textureSample(texture, our_sampler, uv + vec2<f32>(-offset_strength, 0.0)).g,
|
||||
textureSample(texture, our_sampler, uv + vec2<f32>(0.0, offset_strength)).b,
|
||||
1.0
|
||||
);
|
||||
|
||||
return output_color;
|
||||
}
|
|
@ -253,6 +253,7 @@ Example | File | Description
|
|||
`animate_shader` | [`shader/animate_shader.rs`](./shader/animate_shader.rs) | A shader that uses dynamic data like the time since startup.
|
||||
`compute_shader_game_of_life` | [`shader/compute_shader_game_of_life.rs`](./shader/compute_shader_game_of_life.rs) | A compute shader that simulates Conway's Game of Life.
|
||||
`custom_vertex_attribute` | [`shader/custom_vertex_attribute.rs`](./shader/custom_vertex_attribute.rs) | A shader that reads a mesh's custom vertex attribute.
|
||||
`post_processing` | [`shader/post_processing.rs`](./shader/post_processing.rs) | A custom post processing effect, using two cameras, with one reusing the render texture of the first one.
|
||||
`shader_defs` | [`shader/shader_defs.rs`](./shader/shader_defs.rs) | A shader that uses "shaders defs" (a bevy tool to selectively toggle parts of a shader).
|
||||
`shader_instancing` | [`shader/shader_instancing.rs`](./shader/shader_instancing.rs) | A shader that renders a mesh multiple times in one draw call.
|
||||
`shader_material` | [`shader/shader_material.rs`](./shader/shader_material.rs) | A shader and a material that uses it.
|
||||
|
|
256
examples/shader/post_processing.rs
Normal file
256
examples/shader/post_processing.rs
Normal file
|
@ -0,0 +1,256 @@
|
|||
//! A custom post processing effect, using two cameras, with one reusing the render texture of the first one.
|
||||
//! Here a chromatic aberration is applied to a 3d scene containting a rotating cube.
|
||||
//! This example is useful to implement your own post-processing effect such as
|
||||
//! edge detection, blur, pixelization, vignette... and countless others.
|
||||
|
||||
use bevy::{
|
||||
core_pipeline::clear_color::ClearColorConfig,
|
||||
ecs::system::{lifetimeless::SRes, SystemParamItem},
|
||||
prelude::*,
|
||||
reflect::TypeUuid,
|
||||
render::{
|
||||
camera::{Camera, RenderTarget},
|
||||
render_asset::{PrepareAssetError, RenderAsset, RenderAssets},
|
||||
render_resource::{
|
||||
BindGroup, BindGroupDescriptor, BindGroupEntry, BindGroupLayout,
|
||||
BindGroupLayoutDescriptor, BindGroupLayoutEntry, BindingResource, BindingType,
|
||||
Extent3d, SamplerBindingType, ShaderStages, TextureDescriptor, TextureDimension,
|
||||
TextureFormat, TextureSampleType, TextureUsages, TextureViewDimension,
|
||||
},
|
||||
renderer::RenderDevice,
|
||||
view::RenderLayers,
|
||||
},
|
||||
sprite::{Material2d, Material2dPipeline, Material2dPlugin, MaterialMesh2dBundle},
|
||||
};
|
||||
|
||||
fn main() {
|
||||
let mut app = App::new();
|
||||
app.add_plugins(DefaultPlugins)
|
||||
.add_plugin(Material2dPlugin::<PostProcessingMaterial>::default())
|
||||
.add_startup_system(setup)
|
||||
.add_system(main_camera_cube_rotator_system);
|
||||
|
||||
app.run();
|
||||
}
|
||||
|
||||
/// Marks the first camera cube (rendered to a texture.)
|
||||
#[derive(Component)]
|
||||
struct MainCube;
|
||||
|
||||
fn setup(
|
||||
mut commands: Commands,
|
||||
mut windows: ResMut<Windows>,
|
||||
mut meshes: ResMut<Assets<Mesh>>,
|
||||
mut post_processing_materials: ResMut<Assets<PostProcessingMaterial>>,
|
||||
mut materials: ResMut<Assets<StandardMaterial>>,
|
||||
mut images: ResMut<Assets<Image>>,
|
||||
) {
|
||||
let window = windows.get_primary_mut().unwrap();
|
||||
let size = Extent3d {
|
||||
width: window.physical_width(),
|
||||
height: window.physical_height(),
|
||||
..default()
|
||||
};
|
||||
|
||||
// This is the texture that will be rendered to.
|
||||
let mut image = Image {
|
||||
texture_descriptor: TextureDescriptor {
|
||||
label: None,
|
||||
size,
|
||||
dimension: TextureDimension::D2,
|
||||
format: TextureFormat::Bgra8UnormSrgb,
|
||||
mip_level_count: 1,
|
||||
sample_count: 1,
|
||||
usage: TextureUsages::TEXTURE_BINDING
|
||||
| TextureUsages::COPY_DST
|
||||
| TextureUsages::RENDER_ATTACHMENT,
|
||||
},
|
||||
..default()
|
||||
};
|
||||
|
||||
// fill image.data with zeroes
|
||||
image.resize(size);
|
||||
|
||||
let image_handle = images.add(image);
|
||||
|
||||
let cube_handle = meshes.add(Mesh::from(shape::Cube { size: 4.0 }));
|
||||
let cube_material_handle = materials.add(StandardMaterial {
|
||||
base_color: Color::rgb(0.8, 0.7, 0.6),
|
||||
reflectance: 0.02,
|
||||
unlit: false,
|
||||
..default()
|
||||
});
|
||||
|
||||
// The cube that will be rendered to the texture.
|
||||
commands
|
||||
.spawn_bundle(PbrBundle {
|
||||
mesh: cube_handle,
|
||||
material: cube_material_handle,
|
||||
transform: Transform::from_translation(Vec3::new(0.0, 0.0, 1.0)),
|
||||
..default()
|
||||
})
|
||||
.insert(MainCube);
|
||||
|
||||
// Light
|
||||
// NOTE: Currently lights are ignoring render layers - see https://github.com/bevyengine/bevy/issues/3462
|
||||
commands.spawn_bundle(PointLightBundle {
|
||||
transform: Transform::from_translation(Vec3::new(0.0, 0.0, 10.0)),
|
||||
..default()
|
||||
});
|
||||
|
||||
// Main camera, first to render
|
||||
commands.spawn_bundle(Camera3dBundle {
|
||||
camera_3d: Camera3d {
|
||||
clear_color: ClearColorConfig::Custom(Color::WHITE),
|
||||
},
|
||||
camera: Camera {
|
||||
target: RenderTarget::Image(image_handle.clone()),
|
||||
..default()
|
||||
},
|
||||
transform: Transform::from_translation(Vec3::new(0.0, 0.0, 15.0))
|
||||
.looking_at(Vec3::default(), Vec3::Y),
|
||||
..default()
|
||||
});
|
||||
|
||||
// This specifies the layer used for the post processing camera, which will be attached to the post processing camera and 2d quad.
|
||||
let post_processing_pass_layer = RenderLayers::layer((RenderLayers::TOTAL_LAYERS - 1) as u8);
|
||||
|
||||
let quad_handle = meshes.add(Mesh::from(shape::Quad::new(Vec2::new(
|
||||
size.width as f32,
|
||||
size.height as f32,
|
||||
))));
|
||||
|
||||
// This material has the texture that has been rendered.
|
||||
let material_handle = post_processing_materials.add(PostProcessingMaterial {
|
||||
source_image: image_handle,
|
||||
});
|
||||
|
||||
// Post processing 2d quad, with material using the render texture done by the main camera, with a custom shader.
|
||||
commands
|
||||
.spawn_bundle(MaterialMesh2dBundle {
|
||||
mesh: quad_handle.into(),
|
||||
material: material_handle,
|
||||
transform: Transform {
|
||||
translation: Vec3::new(0.0, 0.0, 1.5),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
})
|
||||
.insert(post_processing_pass_layer);
|
||||
|
||||
// The post-processing pass camera.
|
||||
commands
|
||||
.spawn_bundle(Camera2dBundle {
|
||||
camera: Camera {
|
||||
// renders after the first main camera which has default value: 0.
|
||||
priority: 1,
|
||||
..default()
|
||||
},
|
||||
..Camera2dBundle::default()
|
||||
})
|
||||
.insert(post_processing_pass_layer);
|
||||
}
|
||||
|
||||
/// Rotates the cube rendered by the main camera
|
||||
fn main_camera_cube_rotator_system(
|
||||
time: Res<Time>,
|
||||
mut query: Query<&mut Transform, With<MainCube>>,
|
||||
) {
|
||||
for mut transform in query.iter_mut() {
|
||||
transform.rotation *= Quat::from_rotation_x(0.55 * time.delta_seconds());
|
||||
transform.rotation *= Quat::from_rotation_z(0.15 * time.delta_seconds());
|
||||
}
|
||||
}
|
||||
|
||||
// Region below declares of the custom material handling post processing effect
|
||||
|
||||
/// Our custom post processing material
|
||||
#[derive(TypeUuid, Clone)]
|
||||
#[uuid = "bc2f08eb-a0fb-43f1-a908-54871ea597d5"]
|
||||
struct PostProcessingMaterial {
|
||||
/// In this example, this image will be the result of the main camera.
|
||||
source_image: Handle<Image>,
|
||||
}
|
||||
|
||||
struct PostProcessingMaterialGPU {
|
||||
bind_group: BindGroup,
|
||||
}
|
||||
|
||||
impl Material2d for PostProcessingMaterial {
|
||||
fn bind_group(material: &PostProcessingMaterialGPU) -> &BindGroup {
|
||||
&material.bind_group
|
||||
}
|
||||
|
||||
fn bind_group_layout(render_device: &RenderDevice) -> BindGroupLayout {
|
||||
render_device.create_bind_group_layout(&BindGroupLayoutDescriptor {
|
||||
label: None,
|
||||
entries: &[
|
||||
BindGroupLayoutEntry {
|
||||
binding: 0,
|
||||
visibility: ShaderStages::FRAGMENT,
|
||||
ty: BindingType::Texture {
|
||||
multisampled: false,
|
||||
view_dimension: TextureViewDimension::D2,
|
||||
sample_type: TextureSampleType::Float { filterable: true },
|
||||
},
|
||||
count: None,
|
||||
},
|
||||
BindGroupLayoutEntry {
|
||||
binding: 1,
|
||||
visibility: ShaderStages::FRAGMENT,
|
||||
ty: BindingType::Sampler(SamplerBindingType::Filtering),
|
||||
count: None,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
fn fragment_shader(asset_server: &AssetServer) -> Option<Handle<Shader>> {
|
||||
asset_server.watch_for_changes().unwrap();
|
||||
Some(asset_server.load("shaders/custom_material_chromatic_aberration.wgsl"))
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderAsset for PostProcessingMaterial {
|
||||
type ExtractedAsset = PostProcessingMaterial;
|
||||
type PreparedAsset = PostProcessingMaterialGPU;
|
||||
type Param = (
|
||||
SRes<RenderDevice>,
|
||||
SRes<Material2dPipeline<PostProcessingMaterial>>,
|
||||
SRes<RenderAssets<Image>>,
|
||||
);
|
||||
|
||||
fn prepare_asset(
|
||||
extracted_asset: PostProcessingMaterial,
|
||||
(render_device, pipeline, images): &mut SystemParamItem<Self::Param>,
|
||||
) -> Result<PostProcessingMaterialGPU, PrepareAssetError<PostProcessingMaterial>> {
|
||||
let (view, sampler) = if let Some(result) = pipeline
|
||||
.mesh2d_pipeline
|
||||
.get_image_texture(images, &Some(extracted_asset.source_image.clone()))
|
||||
{
|
||||
result
|
||||
} else {
|
||||
return Err(PrepareAssetError::RetryNextUpdate(extracted_asset));
|
||||
};
|
||||
|
||||
let bind_group = render_device.create_bind_group(&BindGroupDescriptor {
|
||||
label: None,
|
||||
layout: &pipeline.material2d_layout,
|
||||
entries: &[
|
||||
BindGroupEntry {
|
||||
binding: 0,
|
||||
resource: BindingResource::TextureView(view),
|
||||
},
|
||||
BindGroupEntry {
|
||||
binding: 1,
|
||||
resource: BindingResource::Sampler(sampler),
|
||||
},
|
||||
],
|
||||
});
|
||||
Ok(PostProcessingMaterialGPU { bind_group })
|
||||
}
|
||||
|
||||
fn extract_asset(&self) -> PostProcessingMaterial {
|
||||
self.clone()
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue