<metaproperty="article:modified_time"content="2021-05-01T21:55:26.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Dependencies and the window"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/beginner/tutorial1-window/"><metaname="twitter:title"content="Dependencies and the window"><metaname="twitter:url"content="/beginner/tutorial1-window/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2021-05-19T02:38:15.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Buffers and Indices"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/beginner/tutorial4-buffer/"><metaname="twitter:title"content="Buffers and Indices"><metaname="twitter:url"content="/beginner/tutorial4-buffer/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2021-05-19T02:38:15.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Textures and bind groups"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/beginner/tutorial5-textures/"><metaname="twitter:title"content="Textures and bind groups"><metaname="twitter:url"content="/beginner/tutorial5-textures/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2021-05-24T20:38:27.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Textures and bind groups"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/beginner/tutorial5-textures/"><metaname="twitter:title"content="Textures and bind groups"><metaname="twitter:url"content="/beginner/tutorial5-textures/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
</code></pre></div><p>Looking at this you might get a bit of déjà vu! That's because a <code>BindGroup</code> is a more specific declaration of the <code>BindGroupLayout</code>. The reason why they're separate is it allows us to swap out <code>BindGroup</code>s on the fly, so long as they all share the same <code>BindGroupLayout</code>. For each texture and sampler we create, we need to create its own<code>BindGroup</code>.</p><p>Now that we have our <code>diffuse_bind_group</code>, let's add it to our <code>State</code> struct:</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">struct</span><spanclass="token type-definition class-name">State</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Looking at this you might get a bit of déjà vu! That's because a <code>BindGroup</code> is a more specific declaration of the <code>BindGroupLayout</code>. The reason why they're separate is it allows us to swap out <code>BindGroup</code>s on the fly, so long as they all share the same <code>BindGroupLayout</code>. Each texture and sampler we create will need to be added to a<code>BindGroup</code>. For our purposes, we'll create a new bind group for each texture.</p><p>Now that we have our <code>diffuse_bind_group</code>, let's add it to our <code>State</code> struct:</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">struct</span><spanclass="token type-definition class-name">State</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Phew!</p><p>With these changes in place, the code should be working the same as it was before, but we now have a much easier way to create textures.</p><h2id="challenge"><ahref="#challenge"class="header-anchor">#</a> Challenge</h2><p>Create another texture and swap it out when you press the space key.</p><divclass="auto-github-link"><ahref="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial5-textures/"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">5/19/2021, 2:38:15 AM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
</code></pre></div><p>Phew!</p><p>With these changes in place, the code should be working the same as it was before, but we now have a much easier way to create textures.</p><h2id="challenge"><ahref="#challenge"class="header-anchor">#</a> Challenge</h2><p>Create another texture and swap it out when you press the space key.</p><divclass="auto-github-link"><ahref="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial5-textures/"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">5/24/2021, 8:38:27 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
<metaproperty="article:modified_time"content="2021-05-20T23:53:47.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Uniform buffers and a 3d camera"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/beginner/tutorial6-uniforms/"><metaname="twitter:title"content="Uniform buffers and a 3d camera"><metaname="twitter:url"content="/beginner/tutorial6-uniforms/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2021-05-20T23:53:47.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Instancing"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/beginner/tutorial7-instancing/"><metaname="twitter:title"content="Instancing"><metaname="twitter:url"content="/beginner/tutorial7-instancing/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2021-03-20T13:35:03.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Introduction"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/"><metaname="twitter:title"content="Introduction"><metaname="twitter:url"content="/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2021-05-24T17:44:10.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Working with Lights"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/intermediate/tutorial10-lighting/"><metaname="twitter:title"content="Working with Lights"><metaname="twitter:url"content="/intermediate/tutorial10-lighting/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2021-05-24T17:44:10.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Multi-threading with Wgpu and Rayon"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/intermediate/tutorial13-threading/"><metaname="twitter:title"content="Multi-threading with Wgpu and Rayon"><metaname="twitter:url"content="/intermediate/tutorial13-threading/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2021-05-24T19:14:17.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="News"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/news/"><metaname="twitter:title"content="News"><metaname="twitter:url"content="/news/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2020-11-21T20:16:07.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Memory Layout in GLSL"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/showcase/alignment/"><metaname="twitter:title"content="Memory Layout in GLSL"><metaname="twitter:url"content="/showcase/alignment/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2021-02-12T06:29:40.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Compute Example: Tangents and Bitangents"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/showcase/compute/"><metaname="twitter:title"content="Compute Example: Tangents and Bitangents"><metaname="twitter:url"content="/showcase/compute/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2020-09-25T21:57:57.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Foreward"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/showcase/"><metaname="twitter:title"content="Foreward"><metaname="twitter:url"content="/showcase/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2020-09-28T04:53:31.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Foreward"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/showcase/"><metaname="twitter:title"content="Foreward"><metaname="twitter:url"content="/showcase/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<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"><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="sidebar-link">The Depth Buffer</a></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 open"><span>Showcase</span><spanclass="arrow down"></span></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/learn-wgpu/showcase/"class="active sidebar-link">Foreward</a></li><li><ahref="/learn-wgpu/showcase/windowless/"class="sidebar-link">Wgpu without a window</a></li><li><ahref="/learn-wgpu/showcase/gifs/"class="sidebar-link">Creating gifs</a></li><li><ahref="/learn-wgpu/showcase/pong/"class="sidebar-link">Pong</a></li><li><ahref="/learn-wgpu/showcase/compute/"class="sidebar-link">Compute Example: Tangents and Bitangents</a></li><li><ahref="/learn-wgpu/showcase/alignment/"class="sidebar-link">Memory Layout in GLSL</a></li><li><ahref="/learn-wgpu/showcase/imgui-demo/"class="sidebar-link">Basic Imgui Demo</a></li></ul></section></li><li><ahref="/learn-wgpu/news/"class="sidebar-link">News</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="foreward"><ahref="#foreward"class="header-anchor">#</a> Foreward</h1><p>The articles in this section are not meant to be tutorials. They are showcases of the various things you can do with <code>wgpu</code>. I won't go over specifics of creating <code>wgpu</code> resources, as those will be covered elsewhere. The code for these examples is still available however, and will be accessible on Github.</p></div><footerclass="page-edit"><!----><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">9/25/2020, 9:57:57 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
<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"><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="sidebar-link">The Depth Buffer</a></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 open"><span>Showcase</span><spanclass="arrow down"></span></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/learn-wgpu/showcase/"class="active sidebar-link">Foreward</a></li><li><ahref="/learn-wgpu/showcase/windowless/"class="sidebar-link">Wgpu without a window</a></li><li><ahref="/learn-wgpu/showcase/gifs/"class="sidebar-link">Creating gifs</a></li><li><ahref="/learn-wgpu/showcase/pong/"class="sidebar-link">Pong</a></li><li><ahref="/learn-wgpu/showcase/compute/"class="sidebar-link">Compute Example: Tangents and Bitangents</a></li><li><ahref="/learn-wgpu/showcase/alignment/"class="sidebar-link">Memory Layout in GLSL</a></li><li><ahref="/learn-wgpu/showcase/imgui-demo/"class="sidebar-link">Basic Imgui Demo</a></li></ul></section></li><li><ahref="/learn-wgpu/news/"class="sidebar-link">News</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="foreward"><ahref="#foreward"class="header-anchor">#</a> Foreward</h1><p>The articles in this section are not meant to be tutorials. They are showcases of the various things you can do with <code>wgpu</code>. I won't go over specifics of creating <code>wgpu</code> resources, as those will be covered elsewhere. The code for these examples is still available however, and will be accessible on Github.</p></div><footerclass="page-edit"><!----><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">9/28/2020, 4:53:31 AM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
<metaproperty="article:modified_time"content="2021-05-24T19:14:17.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Pong"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/showcase/pong/"><metaname="twitter:title"content="Pong"><metaname="twitter:url"content="/showcase/pong/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
<metaproperty="article:modified_time"content="2021-05-01T21:55:26.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Wgpu without a window"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/showcase/windowless/"><metaname="twitter:title"content="Wgpu without a window"><metaname="twitter:url"content="/showcase/windowless/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
Deployment Bot (from Travis CI)
3 years ago