Fix drawing order to minimize drawing effort.

config/style.css

@@ -37,6 +37,10 @@ layer[name=waterway] {
     background-color: rgb(14, 28, 223);
 }
 
+layer[name=aeroway] {
+    background-color: rgba(223, 14, 84, 0.2);
+}
+
 layer[name=boundary] {
     background-color: rgb(223, 45, 14);
     line-width: 2px;

src/drawing/drawable_tile.rs

@@ -1,3 +1,4 @@
+use wgpu::RenderPipeline;
 use core::ops::Range;
 use crate::drawing::layer_collection::LayerCollection;
 use crate::vector_tile::math::TileId;
@@ -49,14 +50,52 @@ impl DrawableTile {
     pub fn paint(
         &mut self,
         render_pass: &mut RenderPass,
+        blend_pipeline: &RenderPipeline,
+        noblend_pipeline: &RenderPipeline,
         layer_collection: &LayerCollection,
         tile_id: u32,
         outline: bool
     ) {
         render_pass.set_index_buffer(&self.index_buffer, 0);
         render_pass.set_vertex_buffers(&[(&self.vertex_buffer, 0)]);
-        let mut i = 0;
+
+        let mut alpha_set = vec![];
+        let mut opaque_set = vec![];
+
+        self.features.sort_by(|a, b| {
+            layer_collection
+                .get_zindex(a.0)
+                .partial_cmp(&layer_collection.get_zindex(b.0)).unwrap()
+        });
+
         for (id, range) in &self.features {
+            if layer_collection.has_alpha(*id) {
+                alpha_set.push((id, range));
+            } else {
+                opaque_set.push((id, range));
+            }
+        }
+
+        let mut i = 0;
+        render_pass.set_pipeline(noblend_pipeline);
+        for (id, range) in opaque_set {
+            if range.len() > 0 && layer_collection.is_visible(*id) {
+                render_pass.set_stencil_reference(i as u32);
+                i += 1;
+
+                let range_start = (tile_id << 1) | 1;
+                render_pass.draw_indexed(range.clone(), 0, 0 + range_start .. 1 + range_start);
+
+                if layer_collection.has_outline(*id) {
+                    let range_start = tile_id << 1;
+                    render_pass.draw_indexed(range.clone(), 0, 0 + range_start .. 1 + range_start);
+                }
+            }
+        }
+
+        let mut i = 0;
+        render_pass.set_pipeline(blend_pipeline);
+        for (id, range) in alpha_set {
             if range.len() > 0 && layer_collection.is_visible(*id) {
                 render_pass.set_stencil_reference(i as u32);
                 i += 1;

src/drawing/layer_collection.rs

@@ -29,12 +29,8 @@ impl LayerCollection {
         self.layers[id as usize] = true;
     }
 
-    pub fn iter_layers(&self) -> Iter<'_, bool> {
-        self.layers.iter()
-    }
-
-    pub fn iter_features(&self) -> Iter<'_, Feature> {
-        self.features.iter()
+    pub fn get_features(&self) -> &Vec<Feature> {
+        &self.features
     }
 
     pub fn get_feature_id(&mut self, selector: &crate::css::Selector) -> Option<u32> {
@@ -67,12 +63,28 @@ impl LayerCollection {
     }
 
     pub fn is_visible(&self, feature_id: u32) -> bool {
-        self.features[feature_id as usize].style.display
+        let feature = &self.features[feature_id as usize];
+        let bga = feature.style.background_color.a;
+        let bca = feature.style.border_color.a;
+        !(!feature.style.display || (bga == 0.0 && bca == 0.0))
+    }
+
+    pub fn has_alpha(&self, feature_id: u32) -> bool {
+        let feature = &self.features[feature_id as usize];
+        let bga = feature.style.background_color.a;
+        let bca = feature.style.border_color.a;
+        bga < 1.0 || bca < 1.0
     }
 
     pub fn has_outline(&self, feature_id: u32) -> bool {
-           self.features[feature_id as usize].style.border_width > 0.0
-        && self.features[feature_id as usize].style.border_color.a > 0.0
+        let feature = &self.features[feature_id as usize];
+        let bw = feature.style.background_color.a;
+        let bca = feature.style.border_color.a;
+        bw > 0.0 && bca > 0.0
+    }
+
+    pub fn get_zindex(&self, feature_id: u32) -> f32 {
+        self.features[feature_id as usize].style.z_index
     }
 
     pub fn load_styles(&mut self, zoom: f32, css_cache: &mut RulesCache) {

src/drawing/painter.rs

@@ -229,7 +229,8 @@ impl Painter {
                 src_factor: wgpu::BlendFactor::One,
                 dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
                 operation: wgpu::BlendOperation::Add,
-            }
+            },
+            false
         );
 
         let noblend_pipeline = Self::create_layer_render_pipeline(
@@ -238,7 +239,8 @@ impl Painter {
             &layer_vs_module,
             &layer_fs_module,
             wgpu::BlendDescriptor::REPLACE,
-            wgpu::BlendDescriptor::REPLACE
+            wgpu::BlendDescriptor::REPLACE,
+            true
         );
 
         let swap_chain = device.create_swap_chain(
@@ -286,6 +288,7 @@ impl Painter {
         fs_module: &ShaderModule,
         color_blend: wgpu::BlendDescriptor,
         alpha_blend: wgpu::BlendDescriptor,
+        depth_write_enabled: bool,
     ) -> RenderPipeline {
         let pipeline_layout = device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
             bind_group_layouts: &[&bind_group_layout],
@@ -317,7 +320,7 @@ impl Painter {
             }],
             depth_stencil_state: Some(DepthStencilStateDescriptor {
                 format: wgpu::TextureFormat::D24UnormS8Uint,
-                depth_write_enabled: true,
+                depth_write_enabled,
                 depth_compare: wgpu::CompareFunction::Greater,
                 stencil_front: wgpu::StencilStateFaceDescriptor {
                     compare: wgpu::CompareFunction::NotEqual,
@@ -512,7 +515,8 @@ impl Painter {
                             src_factor: wgpu::BlendFactor::One,
                             dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
                             operation: wgpu::BlendOperation::Add,
-                        }
+                        },
+                        false
                     );
 
                     self.noblend_pipeline = Self::create_layer_render_pipeline(
@@ -521,7 +525,8 @@ impl Painter {
                         &vs_module,
                         &fs_module,
                         wgpu::BlendDescriptor::REPLACE,
-                        wgpu::BlendDescriptor::REPLACE
+                        wgpu::BlendDescriptor::REPLACE,
+                        true
                     );
                     true
                 } else {
@@ -726,16 +731,15 @@ impl Painter {
             &self.tile_transform_buffer
         );
         let num_tiles = self.loaded_tiles.len();
-        let mut first = true;
-        dbg!(layer_collection.iter_features().count());
-        if layer_collection.iter_features().count() > 0 && num_tiles > 0 {
+        let features = layer_collection.get_features();
+        if features.len() > 0 && num_tiles > 0 {
             let frame = self.swap_chain.get_next_texture();
             {
                 let mut render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
                     color_attachments: &[wgpu::RenderPassColorAttachmentDescriptor {
                         attachment: if CONFIG.renderer.msaa_samples > 1 { &self.multisampled_framebuffer } else { &frame.view },
                         resolve_target: if CONFIG.renderer.msaa_samples > 1 { Some(&frame.view) } else { None },
-                        load_op: if first { wgpu::LoadOp::Clear } else { wgpu::LoadOp::Load },
+                        load_op: wgpu::LoadOp::Clear,
                         store_op: wgpu::StoreOp::Store,
                         clear_color: wgpu::Color::WHITE,
                     }],
@@ -749,7 +753,6 @@ impl Painter {
                         clear_stencil: 255,
                     }),
                 });
-                render_pass.set_pipeline(&self.blend_pipeline);
                 render_pass.set_bind_group(0, &self.bind_group, &[]);
                 let vec = vec4(0.0, 0.0, 0.0, 1.0);
                 let screen_dimensions = vec2(app_state.screen.width as f32, app_state.screen.height as f32) / 2.0;
@@ -785,7 +788,7 @@ impl Painter {
                         (e.x - s.x) as u32,
                         (e.y - s.y) as u32
                     );
-                    dt.paint(&mut render_pass, &layer_collection, i as u32, false);
+                    dt.paint(&mut render_pass, &self.blend_pipeline, &self.noblend_pipeline, &layer_collection, i as u32, false);
                 }
             }
             self.device.get_queue().submit(&[encoder.finish()]);