Render in-game SDF sprites with a black outline

korangar/src/graphics/mod.rs

@@ -46,7 +46,7 @@ pub use self::texture::*;
 pub use self::vertices::*;
 use crate::graphics::sampler::{create_new_sampler, SamplerType};
 use crate::interface::layout::ScreenSize;
-use crate::loaders::TextureLoader;
+use crate::loaders::{ImageType, TextureLoader};
 use crate::NUMBER_OF_POINT_LIGHTS_WITH_SHADOWS;
 
 /// The size of a tile in pixel of the tile based light culling.
@@ -377,7 +377,7 @@ impl GlobalContext {
             RgbaImage::from_raw(1, 1, vec![255, 255, 255, 255]).unwrap().as_raw(),
             false,
         ));
-        let walk_indicator_texture = texture_loader.get("grid.tga").unwrap();
+        let walk_indicator_texture = texture_loader.get("grid.tga", ImageType::Color).unwrap();
         let forward_textures = Self::create_forward_textures(device, forward_size, msaa);
         let picker_textures = Self::create_picker_textures(device, screen_size);
         let directional_shadow_map_texture = Self::create_directional_shadow_texture(device, directional_shadow_size);

korangar/src/graphics/passes/interface/shader/rectangle.wgsl

@@ -89,8 +89,8 @@ fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
     switch (instance.rectangle_type) {
         case 1u: {
             // SDF
-            let pixel = textureSample(texture, linear_sampler, input.texture_coordinates);
-            color *= vec4(pixel.rgb, saturate((pixel.a - 0.5) * 2.0 / fwidth(pixel.a)));
+            let distance = textureSample(texture, linear_sampler, input.texture_coordinates).r;
+            color *= vec4(saturate((distance - 0.5) * 2.0 / fwidth(distance)));
         }
         case 2u: {
             // Sprite (linear filtering)

korangar/src/graphics/passes/interface/shader/rectangle_bindless.wgsl

@@ -89,8 +89,8 @@ fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
     switch (instance.rectangle_type) {
         case 1u: {
             // SDF
-            let pixel = textureSample(textures[instance.texture_index], linear_sampler, input.texture_coordinates);
-            color *= vec4(pixel.rgb, saturate((pixel.a - 0.5) * 2.0 / fwidth(pixel.a)));
+            let distance = textureSample(textures[instance.texture_index], linear_sampler, input.texture_coordinates).r;
+            color *= vec4(saturate((distance - 0.5) * 2.0 / fwidth(distance)));
         }
         case 2u: {
             // Sprite (linear filtering)

korangar/src/graphics/passes/postprocessing/shader/rectangle.wgsl

@@ -38,29 +38,61 @@ fn vs_main(
     return output;
 }
 
+/// The range of the SDF border defines the outline of an SDF. msdfgen calls this pxrange.
+/// We normaly use pxrange of 8 px when creating 64x64 SDFs, which results in an out border of 4 px in texture space.
+const BORDER_WIDTH: f32 = 0.5;
+const EDGE_VALUE: f32 = 0.5;
+
 @fragment
 fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
     let instance = instance_data[input.instance_index];
 
+    var color: vec4<f32> = instance.color;
+
     switch (instance.rectangle_type) {
         case 1u: {
             // SDF
-            let pixel = textureSample(texture, linear_sampler, input.texture_coordinates);
-            return vec4(pixel.rgb, saturate((pixel.a - 0.5) * 2.0 / fwidth(pixel.a))) * instance.color;
+            let distance = textureSample(texture, linear_sampler, input.texture_coordinates).r;
+            let aa_width = fwidth(distance);
+
+            color *= vec4(step(EDGE_VALUE, distance));
+
+            // Outside outline
+            if (distance > EDGE_VALUE - BORDER_WIDTH && distance < EDGE_VALUE) {
+                let bias = 0.1;
+                let border_max = (EDGE_VALUE - BORDER_WIDTH) + bias;
+
+                // Transition from transparent to black outline
+                let outer_alpha = smoothstep(
+                    border_max,
+                    border_max + aa_width,
+                    distance
+                );
+                color = vec4<f32>(0.0, 0.0, 0.0, outer_alpha);
+            }
+            // Inside outline
+            else if (distance >= EDGE_VALUE && distance < EDGE_VALUE + aa_width) {
+                // Transition from black outline to fill color
+                let inner_blend = smoothstep(
+                    EDGE_VALUE,
+                    EDGE_VALUE + aa_width,
+                    distance
+                );
+                color = mix(vec4<f32>(0.0, 0.0, 0.0, 1.0), instance.color, inner_blend);
+            }
         }
         case 2u: {
             // Sprite (linear filtering)
-            return textureSample(texture, linear_sampler, input.texture_coordinates) * instance.color;
+            color *= textureSample(texture, linear_sampler, input.texture_coordinates);
         }
         case 3u: {
             // Sprite (nearest filtering)
-            return textureSample(texture, nearest_sampler, input.texture_coordinates) * instance.color;
-        }
-        default: {
-            // Solid
-            return instance.color;
+            color *= textureSample(texture, nearest_sampler, input.texture_coordinates);
         }
+        default: {}
     }
+
+    return color;
 }
 
 // Optimized version of the following truth table:

korangar/src/graphics/passes/postprocessing/shader/rectangle_bindless.wgsl

@@ -38,29 +38,61 @@ fn vs_main(
     return output;
 }
 
+/// The range of the SDF border defines the outline of an SDF. msdfgen calls this pxrange.
+/// We normaly use pxrange of 8 px when creating 64x64 SDFs, which results in an out border of 4 px in texture space.
+const BORDER_WIDTH: f32 = 0.5;
+const EDGE_VALUE: f32 = 0.5;
+
 @fragment
 fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
     let instance = instance_data[input.instance_index];
 
+    var color: vec4<f32> = instance.color;
+
     switch (instance.rectangle_type) {
         case 1u: {
             // SDF
-            let pixel = textureSample(textures[instance.texture_index], linear_sampler, input.texture_coordinates);
-            return vec4(pixel.rgb, saturate((pixel.a - 0.5) * 2.0 / fwidth(pixel.a))) * instance.color;
+            let distance = textureSample(textures[instance.texture_index], linear_sampler, input.texture_coordinates).r;
+            let aa_width = fwidth(distance);
+
+            color *= vec4(step(EDGE_VALUE, distance));
+
+            // Outside outline
+            if (distance > EDGE_VALUE - BORDER_WIDTH && distance < EDGE_VALUE) {
+                let bias = 0.1;
+                let border_max = (EDGE_VALUE - BORDER_WIDTH) + bias;
+
+                // Transition from transparent to black outline
+                let outer_alpha = smoothstep(
+                    border_max,
+                    border_max + aa_width,
+                    distance
+                );
+                color = vec4<f32>(0.0, 0.0, 0.0, outer_alpha);
+            }
+            // Inside outline
+            else if (distance >= EDGE_VALUE && distance < EDGE_VALUE + aa_width) {
+                // Transition from black outline to fill color
+                let inner_blend = smoothstep(
+                    EDGE_VALUE,
+                    EDGE_VALUE + aa_width,
+                    distance
+                );
+                color = mix(vec4<f32>(0.0, 0.0, 0.0, 1.0), instance.color, inner_blend);
+            }
         }
         case 2u: {
             // Sprite (linear filtering)
-            return textureSample(textures[instance.texture_index], linear_sampler, input.texture_coordinates) * instance.color;
+            color *= textureSample(textures[instance.texture_index], linear_sampler, input.texture_coordinates);
         }
         case 3u: {
             // Sprite (nearest filtering)
-            return textureSample(textures[instance.texture_index], nearest_sampler, input.texture_coordinates) * instance.color;
-        }
-        default: {
-            // Solid
-            return instance.color;
+            color *= textureSample(textures[instance.texture_index], nearest_sampler, input.texture_coordinates);
         }
+        default: {}
     }
+
+    return color;
 }
 
 // Optimized version of the following truth table:

korangar/src/loaders/effect/mod.rs

@@ -12,7 +12,7 @@ use ragnarok_formats::version::InternalVersion;
 use wgpu::BlendFactor;
 
 use super::error::LoadError;
-use super::TextureLoader;
+use super::{ImageType, TextureLoader};
 use crate::graphics::Color;
 use crate::loaders::GameFileLoader;
 use crate::world::{AnimationType, Effect, Frame, FrameType, Layer, MultiTexturePresent};
@@ -70,7 +70,7 @@ impl EffectLoader {
                             .into_iter()
                             .map(|name| {
                                 let path = format!("effect\\{}{}", prefix, name.name);
-                                texture_loader.get(&path).unwrap()
+                                texture_loader.get(&path, ImageType::Color).unwrap()
                             })
                             .collect(),
                         {

korangar/src/loaders/map/mod.rs

@@ -22,7 +22,7 @@ pub use self::vertices::MAP_TILE_SIZE;
 use self::vertices::{generate_tile_vertices, ground_vertices};
 use super::error::LoadError;
 use crate::graphics::{Buffer, ModelVertex, NativeModelVertex, Texture};
-use crate::loaders::{GameFileLoader, ModelLoader, TextureAtlasFactory, TextureLoader};
+use crate::loaders::{GameFileLoader, ImageType, ModelLoader, TextureAtlasFactory, TextureLoader};
 use crate::world::{LightSourceKey, Model};
 use crate::{EffectSourceExt, LightSourceExt, Map, Object, ObjectKey, SoundSourceExt};
 
@@ -121,7 +121,7 @@ impl MapLoader {
                     let water_paths = get_water_texture_paths(water_type);
                     water_paths
                         .iter()
-                        .map(|path| texture_loader.get(path).expect("Can't load water texture"))
+                        .map(|path| texture_loader.get(path, ImageType::Color).expect("Can't load water texture"))
                         .collect()
                 });
 

korangar/src/loaders/mod.rs

@@ -23,7 +23,7 @@ pub use self::model::*;
 pub use self::script::{ResourceMetadata, ScriptLoader};
 pub use self::server::{load_client_info, ClientInfo, ServiceId};
 pub use self::sprite::*;
-pub use self::texture::{TextureAtlasFactory, TextureLoader};
+pub use self::texture::{ImageType, TextureAtlasFactory, TextureLoader};
 
 pub const FALLBACK_BMP_FILE: &str = "missing.bmp";
 pub const FALLBACK_JPEG_FILE: &str = "missing.jpg";

korangar/src/loaders/script/mod.rs

@@ -5,7 +5,7 @@ use korangar_util::FileLoader;
 use mlua::Lua;
 use ragnarok_packets::ItemId;
 
-use super::TextureLoader;
+use super::{ImageType, TextureLoader};
 use crate::graphics::Texture;
 use crate::loaders::GameFileLoader;
 
@@ -152,7 +152,7 @@ end
 
         let resource_name = self.get_item_resource_from_id(item.item_id, is_identified);
         let full_path = format!("À¯ÀúÀÎÅÍÆäÀ̽º\\item\\{resource_name}.bmp");
-        let texture = texture_loader.get(&full_path).unwrap();
+        let texture = texture_loader.get(&full_path, ImageType::Color).unwrap();
         let name = self.get_item_name_from_id(item.item_id, is_identified);
 
         let metadata = ResourceMetadata { texture, name };
@@ -163,7 +163,7 @@ end
     pub fn load_market_item_metadata(&self, texture_loader: &TextureLoader, item: ShopItem<NoMetadata>) -> ShopItem<ResourceMetadata> {
         let resource_name = self.get_item_resource_from_id(item.item_id, true);
         let full_path = format!("À¯ÀúÀÎÅÍÆäÀ̽º\\item\\{resource_name}.bmp");
-        let texture = texture_loader.get(&full_path).unwrap();
+        let texture = texture_loader.get(&full_path, ImageType::Color).unwrap();
         let name = self.get_item_name_from_id(item.item_id, true);
 
         let metadata = ResourceMetadata { texture, name };