mirror of https://github.com/sotrh/learn-wgpu
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
36 KiB
HTML
113 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Basic Imgui Demo | Learn Wgpu</title>
|
|
<meta name="generator" content="VuePress 1.9.10">
|
|
|
|
<meta name="description" content="">
|
|
|
|
<link rel="preload" href="/learn-wgpu/assets/css/0.styles.81cb5453.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.8ee4646c.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.2ef7287a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/1.eaeeb819.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/50.05fd19ce.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/37.5ecf7ce2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.baf5d1fe.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.b8633c49.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.0b8835f1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.af1bbe85.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.626c7cb3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.5a8ea302.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.f4e8226b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.ea2d3b52.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.4eb59bb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.48960e96.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.a01dc53f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.5e81f33c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.caf73498.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ddff5db2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.9ed2104b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.1676676b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.01a5696a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.3b14c055.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d1a4ff6c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.ea2d6bbf.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.80d94795.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.f08bd92d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.fbafea68.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.3d0e544d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.945dce62.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.0fe8e5e4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.7c607f94.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.2e1d433e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/38.b0253733.js"><link rel="prefetch" href="/learn-wgpu/assets/js/39.73123b03.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.ff267fdb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/40.30864a0f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/41.0b7d478f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/42.4caac867.js"><link rel="prefetch" href="/learn-wgpu/assets/js/43.991fa7d2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/44.27513d85.js"><link rel="prefetch" href="/learn-wgpu/assets/js/45.2ea5b108.js"><link rel="prefetch" href="/learn-wgpu/assets/js/46.61045c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/47.ea92b080.js"><link rel="prefetch" href="/learn-wgpu/assets/js/48.cc620f49.js"><link rel="prefetch" href="/learn-wgpu/assets/js/49.6426e080.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.250d79d3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/51.47410096.js"><link rel="prefetch" href="/learn-wgpu/assets/js/52.ecbe158e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/53.8c976652.js"><link rel="prefetch" href="/learn-wgpu/assets/js/54.daee63ce.js"><link rel="prefetch" href="/learn-wgpu/assets/js/55.3799ddaa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/56.74e5dcef.js"><link rel="prefetch" href="/learn-wgpu/assets/js/57.9cdfcb79.js"><link rel="prefetch" href="/learn-wgpu/assets/js/58.35b75a7b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/59.5dd82339.js"><link rel="prefetch" href="/learn-wgpu/assets/js/60.1ced8124.js"><link rel="prefetch" href="/learn-wgpu/assets/js/61.f10516d3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/62.fc721fd9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/63.68526f40.js"><link rel="prefetch" href="/learn-wgpu/assets/js/64.b9a310af.js"><link rel="prefetch" href="/learn-wgpu/assets/js/65.e23a076d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/66.19a033d1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/67.ab338058.js"><link rel="prefetch" href="/learn-wgpu/assets/js/68.d785413d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.2c0d831a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.985bc61a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/vendors~docsearch.efa6f8ef.js">
|
|
<link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.81cb5453.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="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> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/learn-wgpu/" aria-current="page" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-surface/" class="sidebar-link">The Surface</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li><li><a href="/learn-wgpu/intermediate/tutorial13-hdr/" class="sidebar-link">High Dynamic Range Rendering</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Showcase</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="basic-imgui-demo"><a href="#basic-imgui-demo" class="header-anchor">#</a> Basic Imgui Demo</h1> <div class="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 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 on 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 some of the existing crates implement such as text and guis.</p> <p>For the 0.10 migration, I'll keep this example in and keep the showcase code excluded.</p></div> <p>This is not an in-depth guide on how to use Imgui. But here are some of the basics you'll need to get started. We'll need to import <a href="https://docs.rs/imgui" target="_blank" rel="noopener noreferrer">imgui-rs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></a>, <a href="https://docs.rs/imgui-wgpu" target="_blank" rel="noopener noreferrer">imgui-wgpu<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></a>, and <a href="https://docs.rs/imgui-winit-support" target="_blank" rel="noopener noreferrer">imgui-winit-support<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></a>.</p> <div class="language-toml extra-class"><pre class="language-toml"><code><span class="token key property">imgui</span> <span class="token punctuation">=</span> <span class="token string">"0.7"</span>
|
|
<span class="token key property">imgui-wgpu</span> <span class="token punctuation">=</span> <span class="token string">"0.18"</span>
|
|
<span class="token key property">imgui-winit-support</span> <span class="token punctuation">=</span> <span class="token string">"0.7"</span>
|
|
</code></pre></div><div class="note"><p>I've excluded some dependencies for brevity. I'm also using the <a href="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/framework" target="_blank" rel="noopener noreferrer">framework crate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></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 <code>device</code>, <code>queue</code>, <code>swap_chain</code>, and other basic wgpu objects are stored.</p></div> <p>We need to set up imgui and a <code>WinitPlatform</code> to get started. Do this after creating you're <code>winit::Window</code>.</p> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token keyword">let</span> <span class="token keyword">mut</span> imgui <span class="token operator">=</span> <span class="token namespace">imgui<span class="token punctuation">::</span></span><span class="token class-name">Context</span><span class="token punctuation">::</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">let</span> <span class="token keyword">mut</span> platform <span class="token operator">=</span> <span class="token namespace">imgui_winit_support<span class="token punctuation">::</span></span><span class="token class-name">WinitPlatform</span><span class="token punctuation">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token operator">&</span><span class="token keyword">mut</span> imgui<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
platform<span class="token punctuation">.</span><span class="token function">attach_window</span><span class="token punctuation">(</span>
|
|
imgui<span class="token punctuation">.</span><span class="token function">io_mut</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token operator">&</span>display<span class="token punctuation">.</span>window<span class="token punctuation">,</span>
|
|
<span class="token namespace">imgui_winit_support<span class="token punctuation">::</span></span><span class="token class-name">HiDpiMode</span><span class="token punctuation">::</span><span class="token class-name">Default</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
imgui<span class="token punctuation">.</span><span class="token function">set_ini_filename</span><span class="token punctuation">(</span><span class="token class-name">None</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Now we need to configure the default font. We'll be using the window's scale factor to keep things from being too big or small.</p> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token keyword">let</span> hidpi_factor <span class="token operator">=</span> display<span class="token punctuation">.</span>window<span class="token punctuation">.</span><span class="token function">scale_factor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">let</span> font_size <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">13.0</span> <span class="token operator">*</span> hidpi_factor<span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token keyword">f32</span><span class="token punctuation">;</span>
|
|
imgui<span class="token punctuation">.</span><span class="token function">io_mut</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>font_global_scale <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">1.0</span> <span class="token operator">/</span> hidpi_factor<span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token keyword">f32</span><span class="token punctuation">;</span>
|
|
imgui<span class="token punctuation">.</span><span class="token function">fonts</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add_font</span><span class="token punctuation">(</span><span class="token operator">&</span><span class="token punctuation">[</span><span class="token class-name">FontSource</span><span class="token punctuation">::</span><span class="token class-name">DefaultFontData</span> <span class="token punctuation">{</span>
|
|
config<span class="token punctuation">:</span> <span class="token class-name">Some</span><span class="token punctuation">(</span><span class="token namespace">imgui<span class="token punctuation">::</span></span><span class="token class-name">FontConfig</span> <span class="token punctuation">{</span>
|
|
oversample_h<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
|
pixel_snap_h<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
size_pixels<span class="token punctuation">:</span> font_size<span class="token punctuation">,</span>
|
|
<span class="token punctuation">..</span><span class="token class-name">Default</span><span class="token punctuation">::</span><span class="token function">default</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="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> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token keyword">let</span> renderer_config <span class="token operator">=</span> <span class="token class-name">RendererConfig</span> <span class="token punctuation">{</span>
|
|
texture_format<span class="token punctuation">:</span> display<span class="token punctuation">.</span>config<span class="token punctuation">.</span>format<span class="token punctuation">,</span>
|
|
<span class="token punctuation">..</span><span class="token class-name">Default</span><span class="token punctuation">::</span><span class="token function">default</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">let</span> renderer <span class="token operator">=</span> <span class="token class-name">Renderer</span><span class="token punctuation">::</span><span class="token function">new</span><span class="token punctuation">(</span><span class="token operator">&</span><span class="token keyword">mut</span> imgui<span class="token punctuation">,</span> <span class="token operator">&</span>display<span class="token punctuation">.</span>device<span class="token punctuation">,</span> <span class="token operator">&</span>display<span class="token punctuation">.</span>queue<span class="token punctuation">,</span> renderer_config<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>When we update the scene, we'll need to update imgui.</p> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token keyword">self</span><span class="token punctuation">.</span>imgui<span class="token punctuation">.</span><span class="token function">io_mut</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">update_delta_time</span><span class="token punctuation">(</span>dt<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="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> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token comment">// Build the UI</span>
|
|
<span class="token keyword">self</span><span class="token punctuation">.</span>platform
|
|
<span class="token punctuation">.</span><span class="token function">prepare_frame</span><span class="token punctuation">(</span><span class="token keyword">self</span><span class="token punctuation">.</span>imgui<span class="token punctuation">.</span><span class="token function">io_mut</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token operator">&</span>display<span class="token punctuation">.</span>window<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">expect</span><span class="token punctuation">(</span><span class="token string">"Failed to prepare frame!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">let</span> ui <span class="token operator">=</span> <span class="token keyword">self</span><span class="token punctuation">.</span>imgui<span class="token punctuation">.</span><span class="token function">frame</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> window <span class="token operator">=</span> <span class="token namespace">imgui<span class="token punctuation">::</span></span><span class="token class-name">Window</span><span class="token punctuation">::</span><span class="token function">new</span><span class="token punctuation">(</span><span class="token macro property">im_str!</span><span class="token punctuation">(</span><span class="token string">"Hello Imgui from WGPU!"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
window
|
|
<span class="token punctuation">.</span><span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">300.0</span><span class="token punctuation">,</span> <span class="token number">100.0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token class-name">Condition</span><span class="token punctuation">::</span><span class="token class-name">FirstUseEver</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token operator">&</span>ui<span class="token punctuation">,</span> <span class="token closure-params"><span class="token closure-punctuation punctuation">|</span><span class="token closure-punctuation punctuation">|</span></span> <span class="token punctuation">{</span>
|
|
ui<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token macro property">im_str!</span><span class="token punctuation">(</span><span class="token string">"Hello world!"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
ui<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token macro property">im_str!</span><span class="token punctuation">(</span><span class="token string">"This is a demo of imgui-rs using imgui-wgpu!"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
ui<span class="token punctuation">.</span><span class="token function">separator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">let</span> mouse_pos <span class="token operator">=</span> ui<span class="token punctuation">.</span><span class="token function">io</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>mouse_pos<span class="token punctuation">;</span>
|
|
ui<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token macro property">im_str!</span><span class="token punctuation">(</span>
|
|
<span class="token string">"Mouse Position: ({:.1}, {:.1})"</span><span class="token punctuation">,</span>
|
|
mouse_pos<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
mouse_pos<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment">// Prepare to render</span>
|
|
<span class="token keyword">let</span> <span class="token keyword">mut</span> encoder <span class="token operator">=</span> display<span class="token punctuation">.</span>device<span class="token punctuation">.</span><span class="token function">create_command_encoder</span><span class="token punctuation">(</span><span class="token operator">&</span><span class="token class-name">Default</span><span class="token punctuation">::</span><span class="token function">default</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">let</span> output <span class="token operator">=</span> <span class="token keyword">match</span> display<span class="token punctuation">.</span>swap_chain<span class="token punctuation">.</span><span class="token function">get_current_texture</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token class-name">Ok</span><span class="token punctuation">(</span>frame<span class="token punctuation">)</span> <span class="token operator">=></span> frame<span class="token punctuation">,</span>
|
|
<span class="token class-name">Err</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token macro property">eprintln!</span><span class="token punctuation">(</span><span class="token string">"Error getting frame: {:?}"</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">.</span>output<span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Render the scene</span>
|
|
<span class="token keyword">self</span><span class="token punctuation">.</span>canvas<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator">&</span>display<span class="token punctuation">.</span>queue<span class="token punctuation">,</span>
|
|
<span class="token operator">&</span><span class="token keyword">mut</span> encoder<span class="token punctuation">,</span>
|
|
<span class="token operator">&</span>output<span class="token punctuation">.</span>view<span class="token punctuation">,</span>
|
|
display<span class="token punctuation">.</span>config<span class="token punctuation">.</span>width <span class="token keyword">as</span> <span class="token keyword">f32</span><span class="token punctuation">,</span>
|
|
display<span class="token punctuation">.</span>config<span class="token punctuation">.</span>height <span class="token keyword">as</span> <span class="token keyword">f32</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Render the UI</span>
|
|
<span class="token keyword">if</span> <span class="token keyword">self</span><span class="token punctuation">.</span>last_cursor <span class="token operator">!=</span> ui<span class="token punctuation">.</span><span class="token function">mouse_cursor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">self</span><span class="token punctuation">.</span>last_cursor <span class="token operator">=</span> ui<span class="token punctuation">.</span><span class="token function">mouse_cursor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">self</span><span class="token punctuation">.</span>platform<span class="token punctuation">.</span><span class="token function">prepare_render</span><span class="token punctuation">(</span><span class="token operator">&</span>ui<span class="token punctuation">,</span> <span class="token operator">&</span>display<span class="token punctuation">.</span>window<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token keyword">let</span> <span class="token keyword">mut</span> pass <span class="token operator">=</span> encoder<span class="token punctuation">.</span><span class="token function">begin_render_pass</span><span class="token punctuation">(</span><span class="token operator">&</span><span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">RenderPassDescriptor</span> <span class="token punctuation">{</span>
|
|
label<span class="token punctuation">:</span> <span class="token class-name">Some</span><span class="token punctuation">(</span><span class="token string">"UI RenderPass"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
color_attachments<span class="token punctuation">:</span> <span class="token operator">&</span><span class="token punctuation">[</span><span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">RenderPassColorAttachment</span> <span class="token punctuation">{</span>
|
|
view<span class="token punctuation">:</span> <span class="token operator">&</span>view<span class="token punctuation">,</span>
|
|
attachment<span class="token punctuation">:</span> <span class="token operator">&</span>output<span class="token punctuation">.</span>view<span class="token punctuation">,</span>
|
|
resolve_target<span class="token punctuation">:</span> <span class="token class-name">None</span><span class="token punctuation">,</span>
|
|
ops<span class="token punctuation">:</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">Operations</span> <span class="token punctuation">{</span>
|
|
load<span class="token punctuation">:</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">LoadOp</span><span class="token punctuation">::</span><span class="token class-name">Load</span><span class="token punctuation">,</span>
|
|
store<span class="token punctuation">:</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">StoreOp</span><span class="token punctuation">::</span><span class="token class-name">Store</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
depth_stencil_attachment<span class="token punctuation">:</span> <span class="token class-name">None</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">self</span><span class="token punctuation">.</span>renderer
|
|
<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>ui<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token operator">&</span>display<span class="token punctuation">.</span>queue<span class="token punctuation">,</span> <span class="token operator">&</span>display<span class="token punctuation">.</span>device<span class="token punctuation">,</span> <span class="token operator">&</span><span class="token keyword">mut</span> pass<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">expect</span><span class="token punctuation">(</span><span class="token string">"Failed to render UI!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token function">drop</span><span class="token punctuation">(</span>pass<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
display<span class="token punctuation">.</span>queue<span class="token punctuation">.</span><span class="token function">submit</span><span class="token punctuation">(</span><span class="token class-name">Some</span><span class="token punctuation">(</span>encoder<span class="token punctuation">.</span><span class="token function">finish</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>That's all there is to it. Here's a picture of the results!</p> <p><img src="/learn-wgpu/assets/img/screenshot.1f9dab62.png" alt="./screenshot.png"></p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/imgui-demo/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="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> <polygon fill="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> <span class="sr-only">(opens new window)</span></span></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">11/27/2023, 10:42:27 PM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
|
|
<script src="/learn-wgpu/assets/js/app.8ee4646c.js" defer></script><script src="/learn-wgpu/assets/js/2.2ef7287a.js" defer></script><script src="/learn-wgpu/assets/js/1.eaeeb819.js" defer></script><script src="/learn-wgpu/assets/js/50.05fd19ce.js" defer></script><script src="/learn-wgpu/assets/js/37.5ecf7ce2.js" defer></script>
|
|
</body>
|
|
</html>
|