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.
120 lines
34 KiB
HTML
120 lines
34 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="description" content="">
|
|
<meta name="generator" content="VuePress 1.4.0">
|
|
|
|
<meta property="article:modified_time" content="2021-02-22T17:20:00.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Basic Imgui Demo"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/imgui-demo/"><meta name="twitter:title" content="Basic Imgui Demo"><meta name="twitter:url" content="/showcase/imgui-demo/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
|
|
<link rel="preload" href="/learn-wgpu/assets/css/0.styles.7acc6ef6.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.00a40aeb.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/19.e9350ae9.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.2132e362.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.65c8dcc2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.26aabcb1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.78eedf26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.f852c057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.057386b5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.9abecf13.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.f03fd0c9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.d3691f26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.70e640cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.19d2890c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.c0cbce8a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.2c8435d6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.5b0dad74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.a3ac06e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.2a393c66.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.6b1a77da.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5e4953de.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.cc40d32a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.d5139107.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
|
|
<link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.7acc6ef6.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/" 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-swapchain/" class="sidebar-link">The Swapchain</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-threading/" class="sidebar-link">Multi-threading with Wgpu and Rayon</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Showcase</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/showcase/" class="sidebar-link">Foreward</a></li><li><a href="/learn-wgpu/showcase/windowless/" class="sidebar-link">Wgpu without a window</a></li><li><a href="/learn-wgpu/showcase/gifs/" class="sidebar-link">Creating gifs</a></li><li><a href="/learn-wgpu/showcase/pong/" class="sidebar-link">Pong</a></li><li><a href="/learn-wgpu/showcase/compute/" class="sidebar-link">Compute Example: Tangents and Bitangents</a></li><li><a href="/learn-wgpu/showcase/alignment/" class="sidebar-link">Memory Layout in GLSL</a></li><li><a href="/learn-wgpu/showcase/imgui-demo/" class="active sidebar-link">Basic Imgui Demo</a></li></ul></section></li><li><a href="/learn-wgpu/news/" class="sidebar-link">News</a></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> <p>This is not an in depth guid 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<svg xmlns="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"><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></a>, <a href="https://docs.rs/imgui-wgpu" target="_blank" rel="noopener noreferrer">imgui-wgpu<svg xmlns="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"><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></a>, and <a href="https://docs.rs/imgui-winit-support" target="_blank" rel="noopener noreferrer">imgui-winit-support<svg xmlns="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"><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></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.14"</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<svg xmlns="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"><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></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> <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 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 swap chains <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>sc_desc<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_frame</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>sc_desc<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>sc_desc<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">RenderPassColorAttachmentDescriptor</span> <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 boolean">true</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> <svg xmlns="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"><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></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">2/22/2021, 5:20:00 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/learn-wgpu/showcase/alignment/" class="prev">
|
|
Memory Layout in GLSL
|
|
</a></span> <span class="next"><a href="/learn-wgpu/news/">
|
|
News
|
|
</a>
|
|
→
|
|
</span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
|
|
<script src="/learn-wgpu/assets/js/app.00a40aeb.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/19.e9350ae9.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
|
|
</body>
|
|
</html>
|