<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-surface/"class="sidebar-link">The Surface</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"><span>Showcase</span><spanclass="arrow right"></span></p><!----></section></li><li><sectionclass="sidebar-group collapsable depth-0"><pclass="sidebar-heading"><span>News</span><spanclass="arrow right"></span></p><!----></section></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="basic-imgui-demo"><ahref="#basic-imgui-demo"class="header-anchor">#</a> Basic Imgui Demo</h1><divclass="warning"><p>This example is currently broken. It got behind when I was migrating the tutorial to 0.8 as the imgui_wgpu crate was still on 0.7 at the time. I haven't updated it since. While the fixing it wouldn't be too hard (feel free to send a PR), I'm considering removing this example entirely.</p><p>This tutorial is focused how to use wgpu (and by extension the WebGPU standard). I'm looking to minimize the amount of wgpu-adjacent crates that I'm using. They can get in the way of keeping this tutorial as current as possible, and often a crate I'm using will have a different version of wgpu (or winit as is the case as of writing) preventing me from continuing with migration. Beyond dependency conflicts, I'd like to cover some of the topics that so
</code></pre></div><divclass="note"><p>I've excluded some dependencies for brevity. I'm also using the <ahref="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/framework"target="_blank"rel="noopener noreferrer">framework crate<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></a> I've created for showcases to simplify setup. If you see a <code>display</code> variable in code, it's from the <code>framework</code>. <code>Display</code> is where the the <code>device</code>, <code>queue</code>, <code>swap_chain</code>, and other basic wgpu objects are stored.</p></div><p>We need to setup imgui and a <code>WinitPlatform</code> to get started. Do this after creating you're <code>winit::Window</code>.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">let</span><spanclass="token keyword">mut</span> imgui <spanclass="token operator">=</span><spanclass="token namespace">imgui<spanclass="token punctuation">::</span></span><spanclass="token class-name">Context</span><spanclass="token punctuation">::</span><spanclass="token function">create</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Now we need to configure the default font. We'll using the window's scale factor to keep things from being too big or small.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">let</span> hidpi_factor <spanclass="token operator">=</span> display<spanclass="token punctuation">.</span>window<spanclass="token punctuation">.</span><spanclass="token function">scale_factor</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Then you need to create the renderer. We need to use the surface's <code>TextureFormat</code> in order for things to work properly.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">let</span> renderer_config <spanclass="token operator">=</span><spanclass="token class-name">RendererConfig</span><spanclass="token punctuation">{</span>
</code></pre></div><p>When we update the scene, we'll need to update imgui.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">self</span><spanclass="token punctuation">.</span>imgui<spanclass="token punctuation">.</span><spanclass="token function">io_mut</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">.</span><spanclass="token function">update_delta_time</span><spanclass="token punctuation">(</span>dt<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span><spanclass="token comment">// dt: std::time::Duration</span>
</code></pre></div><p>I'm not an expert with imgui, so I'll let the code speak for itself.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token comment">// Build the UI</span>
ui<spanclass="token punctuation">.</span><spanclass="token function">text</span><spanclass="token punctuation">(</span><spanclass="token macro property">im_str!</span><spanclass="token punctuation">(</span><spanclass="token string">"This is a demo of imgui-rs using imgui-wgpu!"</span><spanclass="token punctuation">)</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>That's all there is to it. Here's a picture of the results!</p><p><imgsrc="/learn-wgpu/assets/img/screenshot.1f9dab62.png"alt="./screenshot.png"></p><divclass="auto-github-link"><ahref="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/imgui-demo/"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/18/2022, 5:39:22 PM</span></div></footer><!----></main></div></div><divclass="global-ui"><!----></div></div>
