<metaproperty="article:modified_time"content="2021-02-19T03:56:47.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-03-16T03:29:14.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Buffers and Indices"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/beginner/tutorial4-buffer/"><metaname="twitter:title"content="Buffers and Indices"><metaname="twitter:url"content="/beginner/tutorial4-buffer/"><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-03-21T14:01:00.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-03-21T14:01:00.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-03-21T22:26:16.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">
</code></pre></div><ol><li>Because we've created a new bind group, we need to specify which one we're using in the shader. The number is determined by our <code>render_pipeline_layout</code>. The <code>texture_bind_group_layout</code> is listed first, thus it's <code>set=0</code>, and <code>uniform_bind_group</code> is second, so it's <code>set=1</code>.</li><li>The <code>uniform</code> block requires us to specify global identifiers for all the fields we intend to use. It's important to only specify fields that are actually in our uniform buffer, as trying to access data that isn't there may lead to undefined behavior.</li><li>Multiplication order is important when it comes to matrices. The vector always goes on the right, and the matrices gone on the left in order of importance.</li></ol><h2id="a-controller-for-our-camera"><ahref="#a-controller-for-our-camera"class="header-anchor">#</a> A controller for our camera</h2><p>If you run the code right now, you should get something that looks like this.</p><p><imgsrc="/learn-wgpu/assets/img/static-tree.e1f31949.png"alt="./static-tree.png"></p><p>The shape's less stretched now, but it's still pretty static. You can experiment with moving the camera position around, but most cameras in games move around. Since this tutorial is about using wgpu and not how to process user input, I'm just going to post the <code>CameraController</code> code below.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">struct</span><spanclass="token type-definition class-name">CameraController</span><spanclass="token punctuation">{</span>
</code></pre></div><p>This code is not perfect. The camera slowly moves back when you rotate it. It works for our purposes though. Feel free to improve it!</p><p>We still need to plug this into our existing code to make it do anything. Add the controller to <code>State</code> and create it in <code>new()</code>.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">struct</span><spanclass="token type-definition class-name">State</span><spanclass="token punctuation">{</span>
</code></pre></div><p>That's all we need to do. If you run the code now you should see a pentagon with our tree texture that you can rotate around and zoom into with the wasd/arrow keys.</p><h2id="challenge"><ahref="#challenge"class="header-anchor">#</a> Challenge</h2><p>Have our model rotate on it's own independently of the the camera. <em>Hint: you'll need another matrix for this.</em></p><divclass="auto-github-link"><ahref="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial6-uniforms/"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">3/21/2021, 2:01:00 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
</code></pre></div><p>That's all we need to do. If you run the code now you should see a pentagon with our tree texture that you can rotate around and zoom into with the wasd/arrow keys.</p><h2id="challenge"><ahref="#challenge"class="header-anchor">#</a> Challenge</h2><p>Have our model rotate on it's own independently of the the camera. <em>Hint: you'll need another matrix for this.</em></p><divclass="auto-github-link"><ahref="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial6-uniforms/"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">3/21/2021, 10:26:16 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
<metaproperty="article:modified_time"content="2021-03-21T14:01:00.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-03-11T03:36:23.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-02-21T17:26:16.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-03-11T03:19:09.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="2021-02-12T06:29:40.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-09-19T22:04: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">
<metaproperty="article:modified_time"content="2020-09-19T22:04:10.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="2021-02-19T03:56:47.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">
Deployment Bot (from Travis CI)
3 years ago