<metaproperty="article:modified_time"content="2021-01-26T08:59:12.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-01-26T08:59:12.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-01-15T19:12:44.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-01-15T19:12:44.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-01-03T06:58:12.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-01-03T06:58:12.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="2020-11-18T18:47:13.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="2020-11-18T18:47:13.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-01-15T06:50:55.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-01-15T06:50:55.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="2020-11-18T17:48:28.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="2020-11-18T17:48:28.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-01-26T08:59:12.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-01-26T08:59:12.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="2020-12-12T22:53:42.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-12-12T22:53:42.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="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="2020-11-21T20:16:07.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-11-21T20:16:07.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-08-12T22:09:04.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-08-12T22:11:10.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">8/12/2020, 10:09:04 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">8/12/2020, 10:11:10 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
<metaproperty="article:modified_time"content="2020-08-18T15:07:57.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="2020-08-18T15:07:57.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="2020-08-12T22:09:04.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">
<metaproperty="article:modified_time"content="2020-08-12T22:11:10.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">
</code></pre></div><p>With all that you should have an image like this.</p><p><imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAFq0lEQVR4nO3U2XVcRxBEQcovOiJf5IY8kl8SRLAPAXAweEvvGfFRFlTeP/786+9/vwGRBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEINj3b/+83G8v9/vLJZEABBMABCBUGX8hApkEIJQA8D8BCPRx/IUI5BGAQAJAIQBhPht/IQJZBCCMAPCWAAT5avyFCOQQgCACwEcCEOLo+AsRyCAAIQSARwQgwNnxFyKwPwEIIAB8RgA2d3X8hQjsTQA2JwA8IwAbuzv+QgT2JQAbEwC+IgCbqjX+QgT2JACbEgCOEIAN1R5/IQL7EYANCQBHCcBmWo2/EIG9CMBmBIAzBGAjrcdfiMA+BGAjAsBZArCJXuMvRGAPArAJAeAKAdhA7/EXIrA+AdiAAHCVACxu1PgLEVibACxOALhDABY2evyFCKxLABYmANwlAIuaZfyFCKxJABYlANQgAAuabfyFCKxHABYkANQiAIuZdfyFCKxFABYjANQkAAuZffyFCKxDABYiANQmAItYZfyFCKxBABYhALQgAAtYbfyFCMxPABYgALQiAJNbdfyFCMxNACYnALQkABNbffyFCMxLACYmALQmAJPaZfyFCMxJACYlAPQgABPabfyFCMxHACYkAPQiAJPZdfyFCMxFACYjAPQkABPZffyFCMxDACYiAPQmAJNIGX8hAnMQgEkIACMIwATSxl+IwHgCMAEBYBQBGCx1/IUIjCUAgwmAAIwkAAOlj78QgXEEYCABeCUA4wjAIMb/ngiMIQCDCMB7AjCGAAxg/I+JQH8CMIAAPCYA/QlAZ8b/nAj0JQCdCcBzAtCXAHRk/MeIQD8C0JEAHCMA/QhAJ8Z/jgj0IQCdCMA5AtCHAHRg/NeIQHsC0IEAXCMA7QlAY8Z/jwi0JQCNCcA9AtCWADRk/HWIQDsC0JAA1CEA7QhAI8Zflwi0IQCNCEBdAtCGADRg/G2IQH0C0IAAtCEA9QlAZcbflgjUJQCVCUBbAlCXAFRk/H2IQD0CUJEA9CEA9QhAJcbflwjUIQCVCEBfAlCHAFRg/GOIwH0CUIEAjCEA9wnATcY/lgjcIwA3CcBYAnCPANxg/HMQgesE4AYBmIMAXCcAFxn/XETgGgG4SADmIgDXCMAFxj8nEThPAC4QgDkJwHkCcJLxz00EzhGAkwRgbgJwjgCcYPxrEIHjBOAEAViDABwnAAcZ/1pE4BgBOEgA1iIAxwjAAca/JhH4mgAcIABrEoCvCcAXjH9tIvCcAHxBANYmAM8JwBPGvwcR+JwAPCEAexCAzwnAJ4x/LyLwmAB8QgD2IgCPCcADxr8nEfidADwgAHsSgN8JwAfGvzcReE8APhCAvQnAewLwhvFnEIFfBOANAcggAL8IwE/Gn0UEXgnATwKQRQBeCcAL488kAgLwgwBkEgABeHkB40+WHoH4AEAyAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAIJgAQDABgGACAMEEAIIJAAQTAAgmABBMACCYAEAwAYBgAgDBBACCCQAEEwAIJgAQTAAgmABAMAGAYAIAwQQAggkABBMACCYAEEwAINh/p/JoLhfYRNsAAAAASUVORK5CYII="alt="a brown triangle"></p><divclass="auto-github-link"><ahref="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/windowless/"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">8/12/2020, 10:09:04 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
</code></pre></div><p>With all that you should have an image like this.</p><p><imgsrc="data:image/png;base64,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"alt="a brown triangle"></p><divclass="auto-github-link"><ahref="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/windowless/"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">8/12/2020, 10:11:10 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">