Fix Bleeding Between Tiles

src/render/extract.rs

@@ -189,6 +189,7 @@ pub fn extract_tilemaps(
                             .collect();
 
                         Some(ExtractedChunk {
+                            tile_size,
                             origin: chunk.origin,
                             tiles,
                             last_change_at: chunk.last_change_at,

src/render/mod.rs

@@ -27,6 +27,7 @@ pub struct ExtractedTile {
 
 pub struct ExtractedChunk {
     pub origin: IVec3,
+    pub tile_size: Vec2,
     pub tiles: Vec<ExtractedTile>,
     pub last_change_at: Instant,
 }
@@ -56,19 +57,24 @@ pub struct TilemapAssetEvents {
 struct TilemapVertex {
     pub position: [f32; 3],
     pub uv: [f32; 2],
+    pub tile_uv: [f32; 2],
     pub color: u32,
 }
 
 #[repr(C)]
 #[derive(Copy, Clone, Default, Pod, Zeroable, AsStd140)]
 pub struct TilemapGpuData {
     pub transform: Mat4,
+    pub tile_size: Vec2,
+    pub texture_size: Vec2,
 }
 
 pub struct ChunkMeta {
     vertices: BufferVec<TilemapVertex>,
     tilemap_gpu_data: DynamicUniformVec<TilemapGpuData>,
     tilemap_gpu_data_bind_group: Option<BindGroup>,
+    texture_size: Vec2,
+    tile_size: Vec2,
 }
 
 impl Default for ChunkMeta {
@@ -77,6 +83,8 @@ impl Default for ChunkMeta {
             vertices: BufferVec::new(BufferUsages::VERTEX),
             tilemap_gpu_data: DynamicUniformVec::default(),
             tilemap_gpu_data_bind_group: None,
+            texture_size: Vec2::ZERO,
+            tile_size: Vec2::ZERO,
         }
     }
 }

src/render/pipeline.rs

@@ -78,7 +78,7 @@ impl FromWorld for TilemapPipeline {
         let tilemap_gpu_data_layout = render_device.create_bind_group_layout(&BindGroupLayoutDescriptor {
             entries: &[BindGroupLayoutEntry {
                 binding: 0,
-                visibility: ShaderStages::VERTEX,
+                visibility: ShaderStages::VERTEX | ShaderStages::FRAGMENT,
                 ty: BindingType::Buffer {
                     ty: BufferBindingType::Uniform,
                     has_dynamic_offset: true,
@@ -106,6 +106,8 @@ impl SpecializedRenderPipeline for TilemapPipeline {
             VertexFormat::Float32x3,
             // UV
             VertexFormat::Float32x2,
+            // Tile UV
+            VertexFormat::Float32x2,
             // Color
             VertexFormat::Uint32,
         ];

src/render/queue.rs

@@ -152,6 +152,8 @@ pub fn queue_tilemaps(
                             ((tilemap.entity, chunk.origin), ChunkMeta::default())
                         };
 
+                        chunk_meta.tile_size = chunk.tile_size;
+                        chunk_meta.texture_size = image_size;
                         chunk_meta.vertices.clear();
 
                         let z = chunk.origin.z as f32;
@@ -168,6 +170,7 @@ pub fn queue_tilemaps(
                             if tile.flags.contains(TileFlags::FLIP_Y) {
                                 uvs = [uvs[3], uvs[2], uvs[1], uvs[0]];
                             }
+                            let tile_uvs = uvs;
 
                             // By default, the size of the quad is the size of the texture
                             //let mut quad_size = image_size;
@@ -204,6 +207,7 @@ pub fn queue_tilemaps(
                                 chunk_meta.vertices.push(TilemapVertex {
                                     position: positions[*i],
                                     uv: uvs[*i].into(),
+                                    tile_uv: tile_uvs[*i].into(),
                                     color,
                                 });
                             }
@@ -259,6 +263,8 @@ pub fn queue_tilemaps(
                 chunk_meta.tilemap_gpu_data.clear();
                 chunk_meta.tilemap_gpu_data.push(TilemapGpuData {
                     transform: tilemap_transform.compute_matrix(),
+                    tile_size: chunk_meta.tile_size,
+                    texture_size: chunk_meta.texture_size,
                 });
 
                 chunk_meta.tilemap_gpu_data.write_buffer(&render_device, &render_queue);

src/render/tilemap.wgsl

@@ -9,11 +9,14 @@ var<uniform> view: View;
 struct VertexOutput {
     [[location(0)]] uv: vec2<f32>;
     [[location(1)]] color: vec4<f32>;
+    [[location(2)]] tile_uv: vec2<f32>;
     [[builtin(position)]] position: vec4<f32>;
 };
 
 struct TilemapGpuData {
     transform: mat4x4<f32>;
+    tile_size: vec2<f32>;
+    texture_size: vec2<f32>;
 };
 
 [[group(2), binding(0)]]
@@ -24,10 +27,12 @@ fn vertex(
     [[builtin(vertex_index)]] vertex_index: u32,
     [[location(0)]] vertex_position: vec3<f32>,
     [[location(1)]] vertex_uv: vec2<f32>,
-    [[location(2)]] vertex_color: u32,
+    [[location(2)]] vertex_tile_uv: vec2<f32>,
+    [[location(3)]] vertex_color: u32,
 ) -> VertexOutput {
     var out: VertexOutput;
     out.uv = vertex_uv;
+    out.tile_uv = vertex_tile_uv;
     out.position = view.view_proj * tilemap.transform * vec4<f32>(vertex_position, 1.0);
     out.color = vec4<f32>((vec4<u32>(vertex_color) >> vec4<u32>(0u, 8u, 16u, 24u)) & vec4<u32>(255u)) / 255.0;
 
@@ -41,7 +46,26 @@ var sprite_sampler: sampler;
 
 [[stage(fragment)]]
 fn fragment(in: VertexOutput) -> [[location(0)]] vec4<f32> {
-    var color = textureSample(sprite_texture, sprite_sampler, in.uv);
-    color = in.color * color;
+    var half_texture_pixel_size_u = 0.5 / tilemap.texture_size.x;
+    var half_texture_pixel_size_v = 0.5 / tilemap.texture_size.y;
+    let half_tile_pixel_size_u = 0.5 / tilemap.tile_size.x;
+    let half_tile_pixel_size_v = 0.5 / tilemap.tile_size.y;
+
+    // Offset the UV 1/2 pixel from the sides of the tile, so that the sampler doesn't bleed onto
+    // adjacent tiles at the edges.
+    var uv_offset: vec2<f32> = vec2<f32>(0.0, 0.0);
+    if (in.tile_uv.x < half_tile_pixel_size_u) {
+        uv_offset.x = half_texture_pixel_size_u;
+    } else if (in.tile_uv.x > (1.0 - half_tile_pixel_size_u)) {
+        uv_offset.x = - half_texture_pixel_size_u;
+    }
+    if (in.tile_uv.y < half_tile_pixel_size_v) {
+        uv_offset.y = half_texture_pixel_size_v;
+    } else if (in.tile_uv.y > (1.0 - half_tile_pixel_size_v)) {
+        uv_offset.y = - half_texture_pixel_size_v;
+    }
+
+    var color = textureSample(sprite_texture, sprite_sampler, in.uv + uv_offset) * in.color;
+
     return color;
 }