<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="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="active 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="basic-imgui-demo"><ahref="#basic-imgui-demo"class="header-anchor">#</a> Basic Imgui Demo</h1><divclass="warning"><p>This example is currently broken for 0.8. Some of the dependecies used are still on wgpu 0.7 which causes some dependency conflicts. Once the <code
</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 swap chains <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">5/24/2021, 7:14:17 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
