Does anyone know how to do a performant water refraction shader? Examples?

[l-monninger]

I've been playing around with some water shader concepts. However, anytime I add any kind of alpha, full screen renders of the material drop the frame rate hard. It seems I would need to pull into a more manual second pass, which I'm planning to give a try soon. But, any suggestions? Examples?

[l-monninger]

I was able to do a stylized one here: ramate-io/maybraid#34

FPS on my M3 Pro chip drops as low as 30 at sharp refraction angles and when texture is full screen.

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

#[derive(Asset, TypePath, AsBindGroup, Clone)]
pub struct RefractionWater {
	/// Overall water tint + "how much water color overrides refracted scene"
	/// (alpha is used as opacity in the shader)
	#[uniform(0)]
	pub water_color: LinearRgba,

	/// Shallow water tint (beach / clear water)
	#[uniform(1)]
	pub shallow_color: LinearRgba,

	/// Deep water tint (ocean / lake depths)
	#[uniform(2)]
	pub deep_color: LinearRgba,

	/// UV distortion strength (refraction amount)
	/// keep small for performance
	#[uniform(3)]
	pub distortion_strength: f32,

	/// Depth scale in view-space units (bigger = stays shallow longer)
	/// Higher is smoother
	#[uniform(4)]
	pub depth_scale: f32,

	/// Fade out distortion near the camera to avoid shimmer/jitter
	/// (0 disables fading, 1 is typical)
	#[uniform(5)]
	pub close_fade_strength: f32,
}

impl Default for RefractionWater {
	fn default() -> Self {
		Self {
			water_color: LinearRgba::new(0.05, 0.35, 0.45, 0.35),
			shallow_color: LinearRgba::new(0.15, 0.55, 0.60, 1.0),
			deep_color: LinearRgba::new(0.02, 0.08, 0.18, 1.0),
			distortion_strength: 0.006, // keep small for performance
			depth_scale: 10.0,          // higher is smoother
			close_fade_strength: 1.0,
		}
	}
}

impl Material for RefractionWater {
	fn fragment_shader() -> ShaderRef {
		"shaders/refraction_water.wgsl".into()
	}

	fn reads_view_transmission_texture(&self) -> bool {
		true
	}

	fn enable_prepass() -> bool {
		false
	}

	fn enable_shadows() -> bool {
		false
	}
}

#import bevy_pbr::{
    forward_io::VertexOutput,
    mesh_view_bindings::view,
    mesh_view_bindings::view_transmission_texture,
    mesh_view_bindings::view_transmission_sampler,
    mesh_view_bindings::depth_prepass_texture,
    utils::coords_to_viewport_uv,
    view_transformations::depth_ndc_to_view_z,
}

// --------------------
// Material uniforms
// --------------------
@group(#{MATERIAL_BIND_GROUP}) @binding(0)
var<uniform> water_color: vec4<f32>; // rgb tint, a = opacity

@group(#{MATERIAL_BIND_GROUP}) @binding(1)
var<uniform> shallow_color: vec4<f32>;

@group(#{MATERIAL_BIND_GROUP}) @binding(2)
var<uniform> deep_color: vec4<f32>;

@group(#{MATERIAL_BIND_GROUP}) @binding(3)
var<uniform> distortion_strength: f32;

@group(#{MATERIAL_BIND_GROUP}) @binding(4)
var<uniform> depth_scale: f32;

@group(#{MATERIAL_BIND_GROUP}) @binding(5)
var<uniform> close_fade_strength: f32;


// --------------------
// Helpers
// --------------------
fn saturate(x: f32) -> f32 {
    return clamp(x, 0.0, 1.0);
}

fn posterize3(c: vec3<f32>, steps: f32) -> vec3<f32> {
    let s = max(steps, 1.0);
    return floor(c * s) / s;
}

@fragment
fn fragment(in: VertexOutput) -> @location(0) vec4<f32> {
    // Screen UV in [0,1]
    var viewport_uv = coords_to_viewport_uv(in.position.xy, view.viewport);

    // vec3 world/camera positions
    let cam_pos = view.world_position.xyz;
    let world_pos = in.world_position.xyz;

    // Depth difference: scene behind minus water surface depth
    let depth_raw = textureLoad(depth_prepass_texture, vec2<i32>(in.position.xy), 0);
    let water_view_z = depth_ndc_to_view_z(in.position.z);
    let scene_view_z = depth_ndc_to_view_z(depth_raw);
    let depth = max(scene_view_z - water_view_z, 0.0);

    // Normal
    let n = normalize(in.world_normal);

    // Fade distortion near camera (reduces shimmer)
    let dist_to_cam = length(world_pos - cam_pos);
    let close_fade = saturate((dist_to_cam - 2.0) / 6.0);
    let fade = mix(1.0, close_fade, saturate(close_fade_strength));

    // Distort UV (tiny)
    viewport_uv += n.xz * distortion_strength * fade;

    // ONE sample only (this is the big perf win)
    let scene_col = textureSample(
        view_transmission_texture,
        view_transmission_sampler,
        viewport_uv
    ).rgb;

    // Depth tint
    let deepness = saturate(depth / max(depth_scale, 0.0001));
    let tint = mix(shallow_color.rgb, deep_color.rgb, deepness);

    // Manual compositing (fake transparency)
    let base_opacity = saturate(water_color.a);
    let opacity = saturate(base_opacity * (0.25 + deepness * 0.75));

    var col = mix(scene_col, tint, opacity);

    // Stylize: multiply tint + posterize
    col = mix(col, col * water_color.rgb, 0.45);

    // Simple ink rim darken (cheap, no pow)
    let V = normalize(world_pos - cam_pos);
    let NoV = saturate(dot(n, V));
    let rim = saturate((1.0 - NoV) * 1.1);
    col *= (1.0 - rim * 0.25);

    // Toon-ish steps
    col = posterize3(col, 6.0);

    return vec4<f32>(col, 1.0);
}

Credits to @MatrixDev and #22623