<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 open"><span>Beginner</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/learn-wgpu/beginner/tutorial1-window/"class="sidebar-link">Dependencies and the window</a></li><li><ahref="/learn-wgpu/beginner/tutorial2-surface/"class="sidebar-link">The Surface</a></li><li><ahref="/learn-wgpu/beginner/tutorial3-pipeline/"class="sidebar-link">The Pipeline</a></li><li><ahref="/learn-wgpu/beginner/tutorial4-buffer/"class="sidebar-link">Buffers and Indices</a></li><li><ahref="/learn-wgpu/beginner/tutorial5-textures/"class="sidebar-link">Textures and bind groups</a></li><li><ahref="/learn-wgpu/beginner/tutorial6-uniforms/"class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><ahref="/learn-wgpu/beginner/tutorial7-instancing/"class="active sidebar-link">Instancing</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/learn-wgpu/beginner/tutorial7-instancing/#the-instance-buffer"class="sidebar-link">The Instance Buffer</a></li><liclass="sidebar-sub-header"><ahref="/learn-wgpu/beginner/tutorial7-instancing/#challenge"class="sidebar-link">Challenge</a></li></ul></li><li><ahref="/learn-wgpu/beginner/tutorial8-depth/"class="sidebar-link">The Depth Buffer</a></li><li><ahref="/learn-wgpu/beginner/tutorial9-models/"class="sidebar-link">Model Loading</a></li></ul></section></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Intermediate</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/learn-wgpu/intermediate/tutorial10-lighting/"class="sidebar-link">Working with Lights</a></li><li><ahref="/learn-wgpu/intermediate/tutorial11-normals/"class="sidebar-link">Normal Mapping</a></li><li><ahref="/learn-wgpu/intermediate/tutorial12-camera/"class="sidebar-link">A Better Camera</a></li><li><ahref="/learn-wgpu/intermediate/tutorial13-threading/"class="sidebar-link">Multi-threading with Wgpu and Rayon</a></li></ul></section></li><li><sectionclass="sidebar-group collapsable depth-0"><pclass="sidebar-heading"><span>Showcase</span><spanclass="arrow right"></span></p><!----></section></li><li><sectionclass="sidebar-group collapsable depth-0"><pclass="sidebar-heading"><span>News</span><spanclass="arrow right"></span></p><!----></section></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="instancing"><ahref="#instancing"class="header-anchor">#</a> Instancing</h1><p>Our scene right now is very simple: we have one object centered at (0,0,0). What if we wanted more objects? This is where instancing comes in.</p><p>Instancing allows us to draw the same object multiple times with different properties (position, orientation, size, color, etc.). There are multiple ways of doing instancing. One way would be to modify the uniform buffer to include these properties and then update it before we draw each instance of o
instances<spanclass="token punctuation">:</span><spanclass="token class-name">Range</span><spanclass="token operator"><</span><spanclass="token keyword">u32</span><spanclass="token operator">></span><spanclass="token comment">// <-- This right here</span>
<spanclass="token punctuation">)</span>
</code></pre></div><p>The <code>instances</code> parameter takes a <code>Range<u32></code>. This parameter tells the GPU how many copies, or instances, of our model we want to draw. Currently we are specifying <code>0..1</code>, which instructs the GPU to draw our model once, and then stop. If we used <code>0..5</code>, our code would draw 5 instances.</p><p>The fact that <code>instances</code> is a <code>Range<u32></code> may seem weird as using <code>1..2</code> for instances would still draw 1 instance of our object. Seems like it would be simpler to just use a <code>u32</code> right? The reason it's a range is because sometimes we don't want to draw <strong>all</strong> of our objects. Sometimes we want to draw a selection of them, because others are not in frame, or we are debugging and want to look at a particular set of instances.</p><p>Ok, now we know how to draw multiple instances of an object, how do we tell wgpu what particular instance to draw? We are going to use something known as an instance buffer.</p><h2id="the-instance-buffer"><ahref="#the-instance-buffer"class="header-anchor">#</a> The Instance Buffer</h2><p>We'll create an instance buffer in a similar way to how we create a uniform buffer. First we'll create a struct called <code>Instance</code>.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token comment">// main.rs</span>
</code></pre></div><divclass="note"><p>A <code>Quaternion</code> is a mathematical structure often used to represent rotation. The math behind them is beyond me (it involves imaginary numbers and 4D space) so I won't be covering them here. If you really want to dive into them <ahref="https://mathworld.wolfram.com/Quaternion.html"target="_blank"rel="noopener noreferrer">here's a Wolfram Alpha article<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>.</p></div><p>Using these values directly in the shader would be a pain as quaternions don't have a WGSL analog. I don't feel like writing the math in the shader, so we'll convert the <code>Instance</code> data into a matrix and store it into a struct called <code>InstanceRaw</code>.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token comment">// NEW!</span>
</code></pre></div><p>This is the data that will go into the <code>wgpu::Buffer</code>. We keep these separate so that we can update the <code>Instance</code> as much as we want without needing to mess with matrices. We only need to update the raw data before we draw.</p><p>Let's create a method on <code>Instance</code> to convert to <code>InstanceRaw</code>.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token comment">// NEW!</span>
</code></pre></div><p>Now we need to add 2 fields to <code>State</code>: <code>instances</code>, and <code>instance_buffer</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>The <code>cgmath</code> crate uses traits to provide common mathematical methods across its structs such as <code>Vector3</code>, and these traits must be imported before these methods can be called. For convenience, the <code>prelude</code> module within the crate provides the most common of these extension crates when it is imported.</p><p>To import this prelude module, put this line near the top of <code>main.rs</code>.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">use</span><spanclass="token namespace">cgmath<spanclass="token punctuation">::</span>prelude<spanclass="token punctuation">::</span></span><spanclass="token operator">*</span><spanclass="token punctuation">;</span>
</code></pre></div><p>We'll create the instances in <code>new()</code>. We'll use some constants to simplify things. We'll display our instances in 10 rows of 10, and they'll be spaced evenly apart.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">const</span><spanclass="token constant">NUM_INSTANCES_PER_ROW</span><spanclass="token punctuation">:</span><spanclass="token keyword">u32</span><spanclass="token operator">=</span><spanclass="token number">10</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Now we can create the actual instances.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">impl</span><spanclass="token class-name">State</span><spanclass="token punctuation">{</span>
</code></pre></div><p>We're going to need to create a new <code>VertexBufferLayout</code> for <code>InstanceRaw</code>.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">impl</span><spanclass="token class-name">InstanceRaw</span><spanclass="token punctuation">{</span>
</code></pre></div><p>We need to add this descriptor to the render pipeline so that we can use it when we render.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">let</span> render_pipeline <spanclass="token operator">=</span> device<spanclass="token punctuation">.</span><spanclass="token function">create_render_pipeline</span><spanclass="token punctuation">(</span><spanclass="token operator">&</span><spanclass="token namespace">wgpu<spanclass="token punctuation">::</span></span><spanclass="token class-name">RenderPipelineDescriptor</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Don't forget to return our new variables!</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">Self</span><spanclass="token punctuation">{</span>
</code></pre></div><p>The last change we need to make is in the <code>render()</code> method. We need to bind our <code>instance_buffer</code> and we need to change the range we're using in <code>draw_indexed()</code> to include the number of instances.</p><divclass="language-rust extra-class"><preclass="language-rust"><code>render_pass<spanclass="token punctuation">.</span><spanclass="token function">set_pipeline</span><spanclass="token punctuation">(</span><spanclass="token operator">&</span><spanclass="token keyword">self</span><spanclass="token punctuation">.</span>render_pipeline<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><divclass="warning"><p>Make sure if you add new instances to the <code>Vec</code>, that you recreate the <code>instance_buffer</code> and as well as <code>camera_bind_group</code>, otherwise your new instances won't show up correctly.</p></div><p>We need to reference the parts of our new matrix in <code>shader.wgsl</code> so that we can use it for our instances. Add the following to the top of <code>shader.wgsl</code>.</p><divclass="language-wgsl extra-class"><preclass="language-text"><code>struct InstanceInput {
</code></pre></div><p>We need to reassemble the matrix before we can use it.</p><divclass="language-wgsl extra-class"><preclass="language-text"><code>[[stage(vertex)]]
</code></pre></div><p>We'll apply the <code>model_matrix</code> before we apply <code>camera_uniform.view_proj</code>. We do this because the <code>camera_uniform.view_proj</code> changes the coordinate system from <code>world space</code> to <code>camera space</code>. Our <code>model_matrix</code> is a <code>world space</code> transformation, so we don't want to be in <code>camera space</code> when using it.</p><divclass="language-wgsl extra-class"><preclass="language-text"><code>[[stage(vertex)]]
</code></pre></div><p>With all that done, we should have a forest of trees!</p><p><imgsrc="/learn-wgpu/assets/img/forest.5c5cf3ad.png"alt="./forest.png"></p><h2id="challenge"><ahref="#challenge"class="header-anchor">#</a> Challenge</h2><p>Modify the position and/or rotation of the instances every frame.</p><divclass="auto-github-link"><ahref="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial7-instancing/"target="_blank"rel="noopener noreferrer">Check out the code!</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div></div><footerclass="page-edit"><!----><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">2/26/2022, 6:57:17 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">