Stencil (#649)

* started writeup

* finished write up

Author: sotrh

code/showcase/snow/src/main.rs

@@ -266,7 +266,7 @@ impl framework::Demo for Snow {
         })
     }
 
-    fn handle_mouse_move(&mut self, dx: f64, dy: f64) {
+    fn handle_mouse_move(&mut self, _dx: f64, _dy: f64) {
         // self.camera_controller.process_mouse(dx, dy);
         // self.uniforms_dirty = true;
     }

code/showcase/stencil/src/main.rs

@@ -1,7 +1,7 @@
 use core::f32;
-use std::f32::consts::PI;
+use core::f32::consts::PI;
 
-use framework::{Demo, DrawModel, MaterialBinder, ModelVertex, Vertex};
+use framework::{Demo, MaterialBinder, ModelVertex, Vertex};
 use glam::{Vec3, Vec4};
 use rand::Rng;
 use winit::keyboard::KeyCode;
@@ -23,18 +23,12 @@ impl InstanceVertex {
     };
 }
 
-fn random_color() -> Vec4 {
-    let mut rng = rand::thread_rng();
-    Vec4::new(rng.r#gen(), rng.r#gen(), rng.r#gen(), 1.0)
-}
-
 fn random_position_scale(min: Vec3, max: Vec3) -> Vec4 {
     let mut rng = rand::thread_rng();
     Vec4::new(
         rng.gen_range(min.x..=max.x),
         rng.gen_range(min.y..=max.y),
         rng.gen_range(min.z..=max.z),
-        // rng.gen_range(0.25..=0.75),
         0.5,
     )
 }
@@ -56,7 +50,7 @@ pub struct Stencil {
     mask_bind_group: wgpu::BindGroup,
     model: framework::Model,
     visible_pipeline: wgpu::RenderPipeline,
-    invisible_pipeline: wgpu::RenderPipeline,
+    hidden_pipeline: wgpu::RenderPipeline,
     lmb_presssed: bool,
 }
 
@@ -218,11 +212,6 @@ impl Demo for Stencil {
             .vertex_shader(mask_shader.clone())
             .fragment_shader(mask_shader.clone())
             .fragment_entry_point("fs_mask")
-            .color_state(wgpu::ColorTargetState {
-                format: display.config.format,
-                blend: None,
-                write_mask: wgpu::ColorWrites::empty(),
-            })
             .cull_mode(Some(wgpu::Face::Back))
             .depth_stencil(wgpu::DepthStencilState {
                 format: depth_stencil_format,
@@ -283,7 +272,7 @@ impl Demo for Stencil {
             .vertex_buffer_desc(InstanceVertex::DESC)
             .build(&display.device)?;
 
-        let invisible_pipeline = framework::RenderPipelineBuilder::new()
+        let hidden_pipeline = framework::RenderPipelineBuilder::new()
             .layout(&model_pipeline_layout)
             .vertex_shader(model_shader.clone())
             .fragment_shader(model_shader.clone())
@@ -329,7 +318,7 @@ impl Demo for Stencil {
             mask_bind_group,
             model,
             visible_pipeline,
-            invisible_pipeline,
+            hidden_pipeline,
             lmb_presssed,
         })
     }
@@ -393,28 +382,20 @@ impl Demo for Stencil {
         {
             let mut draw_mask_stencil = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
                 label: Some("draw_mask"),
-                color_attachments: &[Some(wgpu::RenderPassColorAttachment {
-                    view: &view,
-                    resolve_target: None,
-                    ops: wgpu::Operations {
-                        load: wgpu::LoadOp::Load,
-                        store: wgpu::StoreOp::Store,
-                    },
-                    depth_slice: None,
-                })],
+                color_attachments: &[],
                 depth_stencil_attachment: Some(wgpu::RenderPassDepthStencilAttachment {
                     view: &self.depth_stencil_view,
                     depth_ops: None,
                     stencil_ops: Some(wgpu::Operations {
-                        load: wgpu::LoadOp::Clear(0xFF),
+                        load: wgpu::LoadOp::Clear(0),
                         store: wgpu::StoreOp::Store,
                     }),
                 }),
                 timestamp_writes: None,
                 occlusion_query_set: None,
             });
 
-            draw_mask_stencil.set_stencil_reference(0);
+            draw_mask_stencil.set_stencil_reference(0xFF);
             draw_mask_stencil.set_pipeline(&self.mask_pipeline);
             draw_mask_stencil.set_bind_group(0, &self.mask_bind_group, &[]);
             draw_mask_stencil.draw(0..3, 0..1);
@@ -462,7 +443,7 @@ impl Demo for Stencil {
         }
 
         {
-            let mut draw_invisible = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
+            let mut draw_hidden = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
                 label: Some("draw_invisible"),
                 color_attachments: &[Some(wgpu::RenderPassColorAttachment {
                     view: &view,
@@ -488,17 +469,17 @@ impl Demo for Stencil {
                 timestamp_writes: None,
             });
 
-            draw_invisible.set_stencil_reference(0xFF);
-            draw_invisible.set_pipeline(&self.invisible_pipeline);
-            draw_invisible.set_bind_group(0, &self.camera_bind_group, &[]);
-            draw_invisible.set_vertex_buffer(1, self.instance_buffer.buffer.slice(..));
+            draw_hidden.set_stencil_reference(0xFF);
+            draw_hidden.set_pipeline(&self.hidden_pipeline);
+            draw_hidden.set_bind_group(0, &self.camera_bind_group, &[]);
+            draw_hidden.set_vertex_buffer(1, self.instance_buffer.buffer.slice(..));
             for mesh in &self.model.meshes {
                 if let Some(material) = self.model.materials.get(mesh.material) {
-                    draw_invisible.set_bind_group(1, &material.bind_group, &[]);
-                    draw_invisible
+                    draw_hidden.set_bind_group(1, &material.bind_group, &[]);
+                    draw_hidden
                         .set_index_buffer(mesh.index_buffer.slice(..), wgpu::IndexFormat::Uint32);
-                    draw_invisible.set_vertex_buffer(0, mesh.vertex_buffer.slice(..));
-                    draw_invisible.draw_indexed(
+                    draw_hidden.set_vertex_buffer(0, mesh.vertex_buffer.slice(..));
+                    draw_hidden.draw_indexed(
                         0..mesh.num_elements,
                         0,
                         instance_split..num_instances,

code/showcase/stencil/src/mask.wgsl

@@ -23,10 +23,13 @@ fn vs_main(
     return out;
 }
 
+
 @fragment
 fn fs_mask(in: VertexOutput) {
     let sample = textureSample(mask_texture, mask_sampler, in.uv);
-    if (sample.a < 0.1) {
+    // We invert this check so that the mask will render objects in
+    // the center
+    if (sample.a > 0.1) {
         discard;
     }
 }

docs/.vuepress/config.js

@@ -59,9 +59,10 @@ module.exports = {
                     '/showcase/',
                     '/showcase/windowless/',
                     '/showcase/gifs/',
+                    '/showcase/stencil/',
                     '/showcase/pong/',
-                    '/showcase/compute/',
                     '/showcase/alignment/',
+                    // '/showcase/compute/',
                 ]
             },
             {