<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/"aria-current="page"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/"aria-current="page"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-hdr/"class="sidebar-link">High Dynamic Range Rendering</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
</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 the 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 five 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 one instance of our object. It seems like it would be simpler just to use a <code>u32</code>, right? The reason it's a range is that 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 the 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 similarly 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">// lib.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<span><svgxmlns="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"><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><spanclass="sr-only">(opens new window)</span></span></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 in 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 two 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>, which 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>lib.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 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 that if you add new instances to the <code>Vec</code>, you recreate the <code>instance_buffer</code> 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-wgsl"><code><spanclass="token keyword">struct</span><spanclass="token class-name">InstanceInput</span><spanclass="token punctuation">{</span>
</code></pre></div><p>We need to reassemble the matrix before we can use it.</p><divclass="language-wgsl extra-class"><preclass="language-wgsl"><code><spanclass="token punctuation">@</span><spanclass="token attributes attr-name">vertex</span>
</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-wgsl"><code><spanclass="token punctuation">@</span><spanclass="token attributes attr-name">vertex</span>
</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><divid="wasm-example"><!----><button>Try Tutorial7_instancing!</button></div><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><span><svgxmlns="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"><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><spanclass="sr-only">(opens new window)</span></span></div></div><footerclass="page-edit"><!----><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">1/20/2024, 10:13:50 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">