<divid="app"data-server-rendered="true"><divclass="theme-container"><headerclass="navbar"><divclass="inner"><divclass="sidebar-button"><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"role="img"viewBox="0 0 448 512"class="icon"><pathfill="currentColor"d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><ahref="/learn-wgpu/"class="home-link router-link-active"><!----><spanclass="site-name">Learn Wgpu</span></a><divclass="links"><!----><divclass="search-box"><inputaria-label="Search"autocomplete="off"spellcheck="false"value=""><!----></div></div></div></header><divclass="sidebar-mask"></div><divclass="docs-layout"><asideclass="sidebar"><!----><ulclass="sidebar-links"><li><ahref="/learn-wgpu/"class="sidebar-link">Introduction</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading open"><span>Beginner</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/learn-wgpu/beginner/tutorial1-window/"class="sidebar-link">Dependencies and the window</a></li><li><ahref="/learn-wgpu/beginner/tutorial2-swapchain/"class="sidebar-link">The Swapchain</a></li><li><ahref="/learn-wgpu/beginner/tutorial3-pipeline/"class="sidebar-link">The Pipeline</a></li><li><ahref="/learn-wgpu/beginner/tutorial4-buffer/"class="sidebar-link">Buffers and Indices</a></li><li><ahref="/learn-wgpu/beginner/tutorial5-textures/"class="sidebar-link">Textures and bind groups</a></li><li><ahref="/learn-wgpu/beginner/tutorial6-uniforms/"class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><ahref="/learn-wgpu/beginner/tutorial7-instancing/"class="sidebar-link">Instancing</a></li><li><ahref="/learn-wgpu/beginner/tutorial8-depth/"class="active sidebar-link">The Depth Buffer</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/learn-wgpu/beginner/tutorial8-depth/#sorting-from-back-to-front"class="sidebar-link">Sorting from back to front</a></li><liclass="sidebar-sub-header"><ahref="/learn-wgpu/beginner/tutorial8-depth/#a-pixels-depth"class="sidebar-link">A pixels depth</a></li><liclass="sidebar-sub-header"><ahref="/learn-wgpu/beginner/tutorial8-depth/#challenge"class="sidebar-link">Challenge</a></li></ul></li><li><ahref="/learn-wgpu/beginner/tutorial9-models/"class="sidebar-link">Model Loading</a></li></ul></section></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Intermediate</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/learn-wgpu/intermediate/tutorial10-lighting/"class="sidebar-link">Working with Lights</a></li><li><ahref="/learn-wgpu/intermediate/tutorial11-normals/"class="sidebar-link">Normal Mapping</a></li><li><ahref="/learn-wgpu/intermediate/tutorial12-camera/"class="sidebar-link">A Better Camera</a></li><li><ahref="/learn-wgpu/intermediate/tutorial13-threading/"class="sidebar-link">Multi-threading with Wgpu and Rayon</a></li></ul></section></li><li><sectionclass="sidebar-group collapsable depth-0"><pclass="sidebar-heading"><span>Showcase</span><spanclass="arrow right"></span></p><!----></section></li><li><ahref="/learn-wgpu/news/"class="sidebar-link">News</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="the-depth-buffer"><ahref="#the-depth-buffer"class="header-anchor">#</a> The Depth Buffer</h1><p>Let's take a closer look at the last example.</p><p><imgsrc="/learn-wgpu/assets/img/forest_with_zoom.a43286ea.png"alt="forest_with_zoom.png"></p><p>Models that should be in the back are getting rendered ahead of ones that should be in the front. This is caused by the draw order. By default, pixel data from a new object will replace old pixel data.</p><p>There are two ways t
</code></pre></div><ol><li>We need the DEPTH_FORMAT for when we create the depth stage of the <code>render_pipeline</code> and creating the depth texture itself.</li><li>Our depth texture needs to be the same size as our screen if we want things to render correctly. We can use our <code>sc_desc</code> to make sure that our depth texture is the same size as our swap chain images.</li><li>Since we are rendering to this texture, we need to add the <code>OUTPUT_ATTACHMENT</code> flag to it.</li><li>We technically don't <em>need</em> a sampler for a depth texture, but our <code>Texture</code> struct requires it, and we need one if we ever want to sample it.</li><li>If we do decide to render our depth texture, we need to use <code>CompareFunction::LessEqual</code>. This is due to how the <code>samplerShadow</code> and <code>sampler2DShadow()</code> interacts with the <code>texture()</code> function in GLSL.</li></ol><p>We create our <code>depth_texture</code> in <code>State::new()</code>.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">let</span> depth_texture <spanclass="token operator">=</span><spanclass="token namespace">texture<spanclass="token punctuation">::</span></span><spanclass="token class-name">Texture</span><spanclass="token punctuation">::</span><spanclass="token function">create_depth_texture</span><spanclass="token punctuation">(</span><spanclass="token operator">&</span>device<spanclass="token punctuation">,</span><spanclass="token operator">&</span>sc_desc<spanclass="token punctuation">,</span><spanclass="token string">"depth_texture"</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>We need to modify our <code>render_pipeline</code> to allow depth testing.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">let</span> render_pipeline <spanclass="token operator">=</span> device<spanclass="token punctuation">.</span><spanclass="token function">create_render_pipeline</span><spanclass="token punctuation">(</span><spanclass="token operator">&</span><spanclass="token namespace">wgpu<spanclass="token punctuation">::</span></span><spanclass="token class-name">RenderPipelineDescriptor</span><spanclass="token punctuation">{</span>
</code></pre></div><ol><li>The <code>depth_compare</code> function tells us when to discard a new pixel. Using <code>LESS</code> means pixels will be drawn front to back. Here are all the values you can use.</li></ol><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token attribute attr-name">#[repr(C)]</span>
</code></pre></div><olstart="2"><li>There's another type of buffer called a stencil buffer. It's common practice to store the stencil buffer and depth buffer in the same texture. This fields control values for stencil testing. Since we aren't using a stencil buffer, we'll use default values. We'll cover stencil buffers <ahref="../../todo">later</a>.</li></ol><p>Don't forget to store the <code>depth_texture</code> in <code>State</code>.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">Self</span><spanclass="token punctuation">{</span>
</code></pre></div><p>We need to remember to change the <code>resize()</code> method to create a new <code>depth_texture</code> and <code>depth_texture_view</code>.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">fn</span><spanclass="token function-definition function">resize</span><spanclass="token punctuation">(</span><spanclass="token operator">&</span><spanclass="token keyword">mut</span><spanclass="token keyword">self</span><spanclass="token punctuation">,</span> new_size<spanclass="token punctuation">:</span><spanclass="token namespace">winit<spanclass="token punctuation">::</span>dpi<spanclass="token punctuation">::</span></span><spanclass="token class-name">PhysicalSize</span><spanclass="token operator"><</span><spanclass="token keyword">u32</span><spanclass="token operator">></span><spanclass="token punctuation">)</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Make sure you update the <code>depth_texture</code><em>after</em> you update <code>sc_desc</code>. If you don't, your program will crash as the <code>depth_texture</code> will be a different size than the <code>swap_chain</code> texture.</p><p>The last change we need to make is in the <code>render()</code> function. We've created the <code>depth_texture</code>, but we're not currently using it. We use it by attaching it to the <code>depth_stencil_attachment</code> of a render pass.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">let</span><spanclass="token keyword">mut</span> render_pass <spanclass="token operator">=</span> encoder<spanclass="token punctuation">.</span><spanclass="token function">begin_render_pass</span><spanclass="token punctuation">(</span><spanclass="token operator">&</span><spanclass="token namespace">wgpu<spanclass="token punctuation">::</span></span><spanclass="token class-name">RenderPassDescriptor</span><spanclass="token punctuation">{</span>
</code></pre></div><p>And that's all we have to do! No shader code needed! If you run the application, the depth issues will be fixed.</p><p><imgsrc="/learn-wgpu/assets/img/forest_fixed.a77f70f6.png"alt="forest_fixed.png"></p><h2id="challenge"><ahref="#challenge"class="header-anchor">#</a> Challenge</h2><p>Since the depth buffer is a texture, we can sample it in the shader. Because it's a depth texture, we'll have to use the <code>samplerShadow</code> uniform type and the <code>sampler2DShadow</code> function instead of <code>sampler</code>, and <code>sampler2D</code> respectively. Create a bind group for the depth texture (or reuse an existing one), and render it to the screen.</p><divclass="auto-github-link"><ahref="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial8-depth/"target="_blank"rel="noopener noreferrer">Check out the code!</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div></div><footerclass="page-edit"><!----><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">2/19/2021, 4:30:18 AM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
