diff --git a/assets/js/6.a4165a76.js b/assets/js/6.3afd850a.js
similarity index 53%
rename from assets/js/6.a4165a76.js
rename to assets/js/6.3afd850a.js
index f94fc3d9..81f107bd 100644
--- a/assets/js/6.a4165a76.js
+++ b/assets/js/6.3afd850a.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{200:function(t,s,a){t.exports=a.p+"assets/img/vb_desc.63afb652.png"},201:function(t,s,a){t.exports=a.p+"assets/img/triangle.11560f32.png"},202:function(t,s,a){t.exports=a.p+"assets/img/pentagon.2c2be93b.png"},203:function(t,s){t.exports="data:image/png;base64,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EAEqzVSkP4QGAP0mRIDKEyOLIzYAGCQhAlBTQgOAMhMiQC00dSoiNgCoKiEC1EYdY0RoAFBXQgSolSrGiNgAoImECECfCQ0AuJIQAWoneyoiNABg4YQIUEu9jhGxAQC9JUQAQmgAQDYhAtTW5VMRsQEA5SFEgFoTHwBQTu1BLwAAAGgeIQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQbjoh4ZH1r0OsAAAAa5P8D75CpLfCP/NcAAAAASUVORK5CYII="},257:function(t,s,a){"use strict";a.r(s);var n=a(10),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"buffers-and-indices"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#buffers-and-indices"}},[t._v("#")]),t._v(" Buffers and Indices")]),t._v(" "),n("h2",{attrs:{id:"we-re-finally-talking-about-them"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#we-re-finally-talking-about-them"}},[t._v("#")]),t._v(" We're finally talking about them!")]),t._v(" "),n("p",[t._v("You were probably getting sick of me saying stuff like \"we'll get to that when we talk about buffers\". Well now's the time to finally talk about buffers, but first...")]),t._v(" "),n("h2",{attrs:{id:"what-is-a-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#what-is-a-buffer"}},[t._v("#")]),t._v(" What is a buffer?")]),t._v(" "),n("p",[t._v("A buffer is a blob of data on the GPU. A buffer is guaranteed to be contiguous, meaning that all the data is stored sequentially in memory. Buffers are generally used to store simple things like structs or arrays, but it can store more complex stuff such as graph structures like trees (provided all the nodes are stored together and don't reference anything outside of the buffer). We are going to use buffers a lot, so let's get started with two of the most important ones: the vertex buffer, and the index buffer.")]),t._v(" "),n("h2",{attrs:{id:"the-vertex-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-vertex-buffer"}},[t._v("#")]),t._v(" The vertex buffer")]),t._v(" "),n("p",[t._v("Previously we've stored vertex data directly in the vertex shader. While that worked fine to get our bootstraps on, it simply won't do for the long-term. The types of objects we need to draw will vary in size, and recompiling the shader whenever we need to update the model would massively slow down our program. Instead we are going to use buffers to store the vertex data we want to draw. Before we do that though we need to describe what a vertex looks like. We'll do this by creating a new struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Our vertices will all have a position and a color. The position represents the x, y, and z of the vertex in 3d space. The color is the red, green, and blue values for the vertex. We need the "),n("code",[t._v("Vertex")]),t._v(" to be copyable so we can create a buffer with it.")]),t._v(" "),n("p",[t._v("Next we need the actual data that will make up our triangle. Below "),n("code",[t._v("Vertex")]),t._v(" add the following.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We arrange the vertices in counter clockwise order: top, bottom left, bottom right. We do it this way partially out of tradition, but mostly because we specified in the "),n("code",[t._v("rasterization_state")]),t._v(" of the "),n("code",[t._v("render_pipeline")]),t._v(" that we want the "),n("code",[t._v("front_face")]),t._v(" of our triangle to be "),n("code",[t._v("wgpu::FrontFace::Ccw")]),t._v(" so that we cull the back face. This means that any triangle that should be facing us should have its vertices in counter clockwise order.")]),t._v(" "),n("p",[t._v("Now that we have our vertex data, we need to store it in a buffer. Let's add a "),n("code",[t._v("vertex_buffer")]),t._v(" field to "),n("code",[t._v("State")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n    vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now let's create the buffer in "),n("code",[t._v("new()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new()")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("To access the "),n("code",[t._v("create_buffer_init")]),t._v(" method on "),n("code",[t._v("wgpu::Device")]),t._v(" we'll have to import the "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.7.0/wgpu/util/trait.DeviceExt.html#tymethod.create_buffer_init",target:"_blank",rel:"noopener noreferrer"}},[t._v("DeviceExt"),n("OutboundLink")],1),t._v(" extension trait. For more information on extension traits, check out "),n("a",{attrs:{href:"http://xion.io/post/code/rust-extension-traits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("this article"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("p",[t._v("To import the extension trait, this line somewhere near the top of "),n("code",[t._v("main.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceExt")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("You'll note that we're using "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.2.0/bytemuck/",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck"),n("OutboundLink")],1),t._v(" to cast our "),n("code",[t._v("VERTICES")]),t._v(" as a "),n("code",[t._v("&[u8]")]),t._v(". The "),n("code",[t._v("create_buffer_init()")]),t._v(" method expects a "),n("code",[t._v("&[u8]")]),t._v(", and "),n("code",[t._v("bytemuck::cast_slice")]),t._v(" does that for us. Add the following to your "),n("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.4"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"derive"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We're also going to need to implement two traits to get "),n("code",[t._v("bytemuck")]),t._v(" to work. These are "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.3.0/bytemuck/trait.Pod.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Pod"),n("OutboundLink")],1),t._v(" and "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.3.0/bytemuck/trait.Zeroable.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Zeroable"),n("OutboundLink")],1),t._v(". "),n("code",[t._v("Pod")]),t._v(" indicates that our "),n("code",[t._v("Vertex")]),t._v(' is "Plain Old Data", and thus can be interpretted as a '),n("code",[t._v("&[u8]")]),t._v(". "),n("code",[t._v("Zeroable")]),t._v(" indicates that we can use "),n("code",[t._v("std::mem::zeroed()")]),t._v(". We can modify our "),n("code",[t._v("Vertex")]),t._v(" struct to derive these methods.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("If your struct includes types that don't implement "),n("code",[t._v("Pod")]),t._v(" and "),n("code",[t._v("Zeroable")]),t._v(", you'll need to implement these traits manually. These traits don't require us to implement any methods, so we just need to use the following to get our code to work.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Zeroable")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),n("p",[t._v("Finally we can add our "),n("code",[t._v("vertex_buffer")]),t._v(" to our "),n("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"so-what-do-i-do-with-it"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#so-what-do-i-do-with-it"}},[t._v("#")]),t._v(" So what do I do with it?")]),t._v(" "),n("p",[t._v("We need to tell the "),n("code",[t._v("render_pipeline")]),t._v(" to use this buffer when we are drawing, but first we need to tell the "),n("code",[t._v("render_pipeline")]),t._v(" how to read the buffer. We do this using "),n("code",[t._v("VertexBufferLayout")]),t._v("s and the "),n("code",[t._v("vertex_buffers")]),t._v(" field that I promised we'd talk about when we created the "),n("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),n("p",[t._v("A "),n("code",[t._v("VertexBufferLayout")]),t._v(" defines how a buffer is layed out in memory. Without this, the render_pipeline has no idea how to map the buffer in the shader. Here's what the descriptor for a buffer full of "),n("code",[t._v("Vertex")]),t._v(" would look like.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n    step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InputStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n    attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n            shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 5.")]),t._v("\n            format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 6.")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("ol",[n("li",[t._v("The "),n("code",[t._v("array_stride")]),t._v(" defines how wide a vertex is. When the shader goes to read the next vertex, it will skip over "),n("code",[t._v("array_stride")]),t._v(" number of bytes. In our case, array_stride will probably be 24 bytes.")]),t._v(" "),n("li",[n("code",[t._v("step_mode")]),t._v(" tells the pipeline how often it should move to the next vertex. This seems redundant in our case, but we can specify "),n("code",[t._v("wgpu::InputStepMode::Instance")]),t._v(" if we only want to change vertices when we start drawing a new instance. We'll cover instancing in a later tutorial.")]),t._v(" "),n("li",[t._v("Vertex attributes describe the individual parts of the vertex. Generally this is a 1:1 mapping with a struct's fields, which it is in our case.")]),t._v(" "),n("li",[t._v("This defines the "),n("code",[t._v("offset")]),t._v(" in bytes that this attribute starts. The first attribute is usually zero, and any future attributes are the collective "),n("code",[t._v("size_of")]),t._v(" the previous attributes data.")]),t._v(" "),n("li",[t._v("This tells the shader what location to store this attribute at. For example "),n("code",[t._v("layout(location=0) in vec3 x")]),t._v(" in the vertex shader would correspond to the position field of the struct, while "),n("code",[t._v("layout(location=1) in vec3 x")]),t._v(" would be the color field.")]),t._v(" "),n("li",[n("code",[t._v("format")]),t._v(" tells the shader the shape of the attribute. "),n("code",[t._v("Float3")]),t._v(" corresponds to "),n("code",[t._v("vec3")]),t._v(" in shader code. The max value we can store in an attribute is "),n("code",[t._v("Float4")]),t._v(" ("),n("code",[t._v("Uint4")]),t._v(", and "),n("code",[t._v("Int4")]),t._v(" work as well). We'll keep this in mind for when we have to store things that are bigger than "),n("code",[t._v("Float4")]),t._v(".")])]),t._v(" "),n("p",[t._v("For you visually learners, our vertex buffer looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(200),alt:"A figure of the VertexBufferLayout"}})]),t._v(" "),n("p",[t._v("Let's create a static method on "),n("code",[t._v("Vertex")]),t._v(" that returns this descriptor.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InputStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("Specifying the attributes as we did now is quite verbose. We could use the "),n("code",[t._v("vertex_attr_array")]),t._v(" macro provided by wgpu to clean things up a bit. With it our "),n("code",[t._v("VertexBufferLayout")]),t._v(" becomes")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InputStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vertex_attr_array!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("While this is definitely nice, we would have to change the lifetime on "),n("code",[t._v("wgpu::VertexBufferLayout")]),t._v(" to "),n("code",[t._v("'static")]),t._v(" as rust wouldn't compile the code because the result of "),n("code",[t._v("vertex_attr_array")]),t._v(" is a temporary value, which we can't return from a function.")]),t._v(" "),n("p",[t._v("Beyond that, I feel it's good to show how the data gets mapped, so I'll forgo using this macro for now.")])]),t._v(" "),n("p",[t._v("Now we can use it when we create the "),n("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n        buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("One more thing: we need to actually set the vertex buffer in the render method otherwise our program will crash.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[n("code",[t._v("set_vertex_buffer")]),t._v(" takes two parameters. The first is what buffer slot to use for this vertex buffer. You can have multiple vertex buffers set at a time.")]),t._v(" "),n("p",[t._v("The second parameter is the slice of the buffer to use. You can store as many objects in a buffer as your hardware allows, so "),n("code",[t._v("slice")]),t._v(" allows us to specify which portion of the buffer to use. We use "),n("code",[t._v("..")]),t._v(" to specify the entire buffer.")]),t._v(" "),n("p",[t._v("Before we continue, we should change the "),n("code",[t._v("render_pass.draw()")]),t._v(" call to use the number of vertices specified by "),n("code",[t._v("VERTICES")]),t._v(". Add a "),n("code",[t._v("num_vertices")]),t._v(" to "),n("code",[t._v("State")]),t._v(", and set it to be equal to "),n("code",[t._v("VERTICES.len()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_vertices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Then use it in the draw call.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Before our changes will have any effect, we need to update our vertex shader to get its data from the vertex buffer. We'll also have it include the vertex color as well.")]),t._v(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("builtin")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" clip_position"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("stage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nfn "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    model"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" VertexInput"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" VertexOutput "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    var "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" VertexOutput"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("stage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fragment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nfn "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" VertexOutput"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("If you've done things correctly, you should see a triangle that looks something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(201),alt:"A colorful triangle"}})]),t._v(" "),n("h2",{attrs:{id:"the-index-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-index-buffer"}},[t._v("#")]),t._v(" The index buffer")]),t._v(" "),n("p",[t._v("We technically don't "),n("em",[t._v("need")]),t._v(" an index buffer, but they still are plenty useful. An index buffer comes into play when we start using models with a lot of triangles. Consider this pentagon.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(202),alt:"A pentagon made of 3 triangles"}})]),t._v(" "),n("p",[t._v("It has a total of 5 vertices, and 3 triangles. Now if we wanted to display something like this using just vertices we would need something like the following.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("You'll note though that some of the vertices are used more than once. C, and B get used twice, and E is repeated 3 times. Assuming that each float is 4 bytes, then that means of the 216 bytes we use for "),n("code",[t._v("VERTICES")]),t._v(", 96 of them are duplicate data. Wouldn't it be nice if we could list these vertices once? Well we can! That's were an index buffer comes into play.")]),t._v(" "),n("p",[t._v("Basically we store all the unique vertices in "),n("code",[t._v("VERTICES")]),t._v(" and we create another buffer that stores indices to elements in "),n("code",[t._v("VERTICES")]),t._v(" to create the triangles. Here's an example of that with our pentagon.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* padding */")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now with this setup our "),n("code",[t._v("VERTICES")]),t._v(" take up about 120 bytes and "),n("code",[t._v("INDICES")]),t._v(" is just 18 bytes given that "),n("code",[t._v("u16")]),t._v(" is 2 bytes wide. We add 2 bytes padding as wgpu requires buffers to be aligned to 4 bytes. All together our pentagon is 134 bytes in total. That means we saved 82 bytes! It may not seem like much, but when dealing with tri counts in the hundreds of thousands, indexing saves a lot of memory.")]),t._v(" "),n("p",[t._v("There's a couple of things we need to change in order to use indexing. The first is we need to create a buffer to store the indices. In "),n("code",[t._v("State")]),t._v("'s "),n("code",[t._v("new()")]),t._v(" method create the "),n("code",[t._v("index_buffer")]),t._v(" after you create the "),n("code",[t._v("vertex_buffer")]),t._v(". Also change "),n("code",[t._v("num_vertices")]),t._v(" to "),n("code",[t._v("num_indices")]),t._v(" and set it equal to "),n("code",[t._v("INDICES.len()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Index Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_indices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We don't need to implement "),n("code",[t._v("Pod")]),t._v(" and "),n("code",[t._v("Zeroable")]),t._v(" for our indices, because "),n("code",[t._v("bytemuck")]),t._v(" has already implemented them for basic types such as "),n("code",[t._v("u16")]),t._v(". That means we can just add "),n("code",[t._v("index_buffer")]),t._v(" and "),n("code",[t._v("num_indices")]),t._v(" to the "),n("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChainDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n    index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n    num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("And then populate these fields in the constructor:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n    index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("All we have to do now is update the "),n("code",[t._v("render()")]),t._v(" method to use the "),n("code",[t._v("index_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n")])])]),n("p",[t._v("A couple things to note:")]),t._v(" "),n("ol",[n("li",[t._v("The method name is "),n("code",[t._v("set_index_buffer")]),t._v(" not "),n("code",[t._v("set_index_buffers")]),t._v(". You can only have one index buffer set at a time.")]),t._v(" "),n("li",[t._v("When using an index buffer, you need to use "),n("code",[t._v("draw_indexed")]),t._v(". The "),n("code",[t._v("draw")]),t._v(" method ignores the index buffer. Also make sure you use the number of indices ("),n("code",[t._v("num_indices")]),t._v("), not vertices as your model will either draw wrong, or the method will "),n("code",[t._v("panic")]),t._v(" because there are not enough indices.")])]),t._v(" "),n("p",[t._v("With all that you should have a garishly magenta pentagon in your window.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(203),alt:"Magenta pentagon in window"}})]),t._v(" "),n("h2",{attrs:{id:"color-correction"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#color-correction"}},[t._v("#")]),t._v(" Color Correction")]),t._v(" "),n("p",[t._v("If you use a color picker on the magenta pentagon, you'll get a hex value of #BC00BC. If you convert this to RGB values you'll get (188, 0, 188). Dividing these values by 255 to get them into the [0, 1] range we get roughly (0.737254902, 0, 0.737254902). This is not the same as we are using for our vertex colors which is (0.5, 0.0, 0.5). The reason for this has to do with color spaces.")]),t._v(" "),n("p",[t._v("Most monitors use a color space know as sRGB. Our swap chain is (most likely depending on what is returned from "),n("code",[t._v("adapter.get_swap_chain_preferred_format()")]),t._v(") using an sRGB texture format. The sRGB format stores colors according to their relative brightness instead of their actual brightness. The reason for this is that our eyes don't perceive light linearly. We notice more differences in darker colors than we do lighter colors.")]),t._v(" "),n("p",[t._v("You get an approximation of the correct color using the following formula: "),n("code",[t._v("srgb_color = (rgb_color / 255) ^ 2.2")]),t._v(". Doing this with an RGB value of (188, 0, 188) will give us (0.511397819, 0.0, 0.511397819). A little off from our (0.5, 0.0, 0.5). While you could tweak the formula to get the desired values, you'll likely save a lot of time by using textures instead as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.")]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Create a more complex shape than the one we made (aka. more than three triangles) using a vertex buffer and an index buffer. Toggle between the two with the space key.")]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{200:function(t,s,a){t.exports=a.p+"assets/img/vb_desc.63afb652.png"},201:function(t,s,a){t.exports=a.p+"assets/img/triangle.11560f32.png"},202:function(t,s,a){t.exports=a.p+"assets/img/pentagon.2c2be93b.png"},203:function(t,s){t.exports="data:image/png;base64,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EAEqzVSkP4QGAP0mRIDKEyOLIzYAGCQhAlBTQgOAMhMiQC00dSoiNgCoKiEC1EYdY0RoAFBXQgSolSrGiNgAoImECECfCQ0AuJIQAWoneyoiNABg4YQIUEu9jhGxAQC9JUQAQmgAQDYhAtTW5VMRsQEA5SFEgFoTHwBQTu1BLwAAAGgeIQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQbjoh4ZH1r0OsAAAAa5P8D75CpLfCP/NcAAAAASUVORK5CYII="},257:function(t,s,a){"use strict";a.r(s);var n=a(10),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"buffers-and-indices"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#buffers-and-indices"}},[t._v("#")]),t._v(" Buffers and Indices")]),t._v(" "),n("h2",{attrs:{id:"we-re-finally-talking-about-them"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#we-re-finally-talking-about-them"}},[t._v("#")]),t._v(" We're finally talking about them!")]),t._v(" "),n("p",[t._v("You were probably getting sick of me saying stuff like \"we'll get to that when we talk about buffers\". Well now's the time to finally talk about buffers, but first...")]),t._v(" "),n("h2",{attrs:{id:"what-is-a-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#what-is-a-buffer"}},[t._v("#")]),t._v(" What is a buffer?")]),t._v(" "),n("p",[t._v("A buffer is a blob of data on the GPU. A buffer is guaranteed to be contiguous, meaning that all the data is stored sequentially in memory. Buffers are generally used to store simple things like structs or arrays, but it can store more complex stuff such as graph structures like trees (provided all the nodes are stored together and don't reference anything outside of the buffer). We are going to use buffers a lot, so let's get started with two of the most important ones: the vertex buffer, and the index buffer.")]),t._v(" "),n("h2",{attrs:{id:"the-vertex-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-vertex-buffer"}},[t._v("#")]),t._v(" The vertex buffer")]),t._v(" "),n("p",[t._v("Previously we've stored vertex data directly in the vertex shader. While that worked fine to get our bootstraps on, it simply won't do for the long-term. The types of objects we need to draw will vary in size, and recompiling the shader whenever we need to update the model would massively slow down our program. Instead we are going to use buffers to store the vertex data we want to draw. Before we do that though we need to describe what a vertex looks like. We'll do this by creating a new struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Our vertices will all have a position and a color. The position represents the x, y, and z of the vertex in 3d space. The color is the red, green, and blue values for the vertex. We need the "),n("code",[t._v("Vertex")]),t._v(" to be copyable so we can create a buffer with it.")]),t._v(" "),n("p",[t._v("Next we need the actual data that will make up our triangle. Below "),n("code",[t._v("Vertex")]),t._v(" add the following.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We arrange the vertices in counter clockwise order: top, bottom left, bottom right. We do it this way partially out of tradition, but mostly because we specified in the "),n("code",[t._v("rasterization_state")]),t._v(" of the "),n("code",[t._v("render_pipeline")]),t._v(" that we want the "),n("code",[t._v("front_face")]),t._v(" of our triangle to be "),n("code",[t._v("wgpu::FrontFace::Ccw")]),t._v(" so that we cull the back face. This means that any triangle that should be facing us should have its vertices in counter clockwise order.")]),t._v(" "),n("p",[t._v("Now that we have our vertex data, we need to store it in a buffer. Let's add a "),n("code",[t._v("vertex_buffer")]),t._v(" field to "),n("code",[t._v("State")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n    vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now let's create the buffer in "),n("code",[t._v("new()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new()")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("To access the "),n("code",[t._v("create_buffer_init")]),t._v(" method on "),n("code",[t._v("wgpu::Device")]),t._v(" we'll have to import the "),n("a",{attrs:{href:"https://docs.rs/wgpu/0.7.0/wgpu/util/trait.DeviceExt.html#tymethod.create_buffer_init",target:"_blank",rel:"noopener noreferrer"}},[t._v("DeviceExt"),n("OutboundLink")],1),t._v(" extension trait. For more information on extension traits, check out "),n("a",{attrs:{href:"http://xion.io/post/code/rust-extension-traits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("this article"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("p",[t._v("To import the extension trait, this line somewhere near the top of "),n("code",[t._v("main.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceExt")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("You'll note that we're using "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.2.0/bytemuck/",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck"),n("OutboundLink")],1),t._v(" to cast our "),n("code",[t._v("VERTICES")]),t._v(" as a "),n("code",[t._v("&[u8]")]),t._v(". The "),n("code",[t._v("create_buffer_init()")]),t._v(" method expects a "),n("code",[t._v("&[u8]")]),t._v(", and "),n("code",[t._v("bytemuck::cast_slice")]),t._v(" does that for us. Add the following to your "),n("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.4"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"derive"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We're also going to need to implement two traits to get "),n("code",[t._v("bytemuck")]),t._v(" to work. These are "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.3.0/bytemuck/trait.Pod.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Pod"),n("OutboundLink")],1),t._v(" and "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.3.0/bytemuck/trait.Zeroable.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Zeroable"),n("OutboundLink")],1),t._v(". "),n("code",[t._v("Pod")]),t._v(" indicates that our "),n("code",[t._v("Vertex")]),t._v(' is "Plain Old Data", and thus can be interpretted as a '),n("code",[t._v("&[u8]")]),t._v(". "),n("code",[t._v("Zeroable")]),t._v(" indicates that we can use "),n("code",[t._v("std::mem::zeroed()")]),t._v(". We can modify our "),n("code",[t._v("Vertex")]),t._v(" struct to derive these methods.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("If your struct includes types that don't implement "),n("code",[t._v("Pod")]),t._v(" and "),n("code",[t._v("Zeroable")]),t._v(", you'll need to implement these traits manually. These traits don't require us to implement any methods, so we just need to use the following to get our code to work.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Zeroable")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),n("p",[t._v("Finally we can add our "),n("code",[t._v("vertex_buffer")]),t._v(" to our "),n("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"so-what-do-i-do-with-it"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#so-what-do-i-do-with-it"}},[t._v("#")]),t._v(" So what do I do with it?")]),t._v(" "),n("p",[t._v("We need to tell the "),n("code",[t._v("render_pipeline")]),t._v(" to use this buffer when we are drawing, but first we need to tell the "),n("code",[t._v("render_pipeline")]),t._v(" how to read the buffer. We do this using "),n("code",[t._v("VertexBufferLayout")]),t._v("s and the "),n("code",[t._v("vertex_buffers")]),t._v(" field that I promised we'd talk about when we created the "),n("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),n("p",[t._v("A "),n("code",[t._v("VertexBufferLayout")]),t._v(" defines how a buffer is layed out in memory. Without this, the render_pipeline has no idea how to map the buffer in the shader. Here's what the descriptor for a buffer full of "),n("code",[t._v("Vertex")]),t._v(" would look like.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n    step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InputStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n    attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n            shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 5.")]),t._v("\n            format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 6.")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("ol",[n("li",[t._v("The "),n("code",[t._v("array_stride")]),t._v(" defines how wide a vertex is. When the shader goes to read the next vertex, it will skip over "),n("code",[t._v("array_stride")]),t._v(" number of bytes. In our case, array_stride will probably be 24 bytes.")]),t._v(" "),n("li",[n("code",[t._v("step_mode")]),t._v(" tells the pipeline how often it should move to the next vertex. This seems redundant in our case, but we can specify "),n("code",[t._v("wgpu::InputStepMode::Instance")]),t._v(" if we only want to change vertices when we start drawing a new instance. We'll cover instancing in a later tutorial.")]),t._v(" "),n("li",[t._v("Vertex attributes describe the individual parts of the vertex. Generally this is a 1:1 mapping with a struct's fields, which it is in our case.")]),t._v(" "),n("li",[t._v("This defines the "),n("code",[t._v("offset")]),t._v(" in bytes that this attribute starts. The first attribute is usually zero, and any future attributes are the collective "),n("code",[t._v("size_of")]),t._v(" the previous attributes data.")]),t._v(" "),n("li",[t._v("This tells the shader what location to store this attribute at. For example "),n("code",[t._v("layout(location=0) in vec3 x")]),t._v(" in the vertex shader would correspond to the position field of the struct, while "),n("code",[t._v("layout(location=1) in vec3 x")]),t._v(" would be the color field.")]),t._v(" "),n("li",[n("code",[t._v("format")]),t._v(" tells the shader the shape of the attribute. "),n("code",[t._v("Float3")]),t._v(" corresponds to "),n("code",[t._v("vec3")]),t._v(" in shader code. The max value we can store in an attribute is "),n("code",[t._v("Float4")]),t._v(" ("),n("code",[t._v("Uint4")]),t._v(", and "),n("code",[t._v("Int4")]),t._v(" work as well). We'll keep this in mind for when we have to store things that are bigger than "),n("code",[t._v("Float4")]),t._v(".")])]),t._v(" "),n("p",[t._v("For you visually learners, our vertex buffer looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(200),alt:"A figure of the VertexBufferLayout"}})]),t._v(" "),n("p",[t._v("Let's create a static method on "),n("code",[t._v("Vertex")]),t._v(" that returns this descriptor.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InputStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("Specifying the attributes as we did now is quite verbose. We could use the "),n("code",[t._v("vertex_attr_array")]),t._v(" macro provided by wgpu to clean things up a bit. With it our "),n("code",[t._v("VertexBufferLayout")]),t._v(" becomes")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InputStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vertex_attr_array!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("While this is definitely nice, we would have to change the lifetime on "),n("code",[t._v("wgpu::VertexBufferLayout")]),t._v(" to "),n("code",[t._v("'static")]),t._v(" as rust wouldn't compile the code because the result of "),n("code",[t._v("vertex_attr_array")]),t._v(" is a temporary value, which we can't return from a function.")]),t._v(" "),n("p",[t._v("Beyond that, I feel it's good to show how the data gets mapped, so I'll forgo using this macro for now.")])]),t._v(" "),n("p",[t._v("Now we can use it when we create the "),n("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n        buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("One more thing: we need to actually set the vertex buffer in the render method otherwise our program will crash.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[n("code",[t._v("set_vertex_buffer")]),t._v(" takes two parameters. The first is what buffer slot to use for this vertex buffer. You can have multiple vertex buffers set at a time.")]),t._v(" "),n("p",[t._v("The second parameter is the slice of the buffer to use. You can store as many objects in a buffer as your hardware allows, so "),n("code",[t._v("slice")]),t._v(" allows us to specify which portion of the buffer to use. We use "),n("code",[t._v("..")]),t._v(" to specify the entire buffer.")]),t._v(" "),n("p",[t._v("Before we continue, we should change the "),n("code",[t._v("render_pass.draw()")]),t._v(" call to use the number of vertices specified by "),n("code",[t._v("VERTICES")]),t._v(". Add a "),n("code",[t._v("num_vertices")]),t._v(" to "),n("code",[t._v("State")]),t._v(", and set it to be equal to "),n("code",[t._v("VERTICES.len()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_vertices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Then use it in the draw call.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Before our changes will have any effect, we need to update our vertex shader to get its data from the vertex buffer. We'll also have it include the vertex color as well.")]),t._v(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vertex shader")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexOutput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("builtin")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" clip_position"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("stage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nfn "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    model"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" VertexInput"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" VertexOutput "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    var "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" VertexOutput"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clip_position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fragment shader")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("stage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fragment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nfn "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" VertexOutput"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("f32"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("If you've done things correctly, you should see a triangle that looks something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(201),alt:"A colorful triangle"}})]),t._v(" "),n("h2",{attrs:{id:"the-index-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-index-buffer"}},[t._v("#")]),t._v(" The index buffer")]),t._v(" "),n("p",[t._v("We technically don't "),n("em",[t._v("need")]),t._v(" an index buffer, but they still are plenty useful. An index buffer comes into play when we start using models with a lot of triangles. Consider this pentagon.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(202),alt:"A pentagon made of 3 triangles"}})]),t._v(" "),n("p",[t._v("It has a total of 5 vertices, and 3 triangles. Now if we wanted to display something like this using just vertices we would need something like the following.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("You'll note though that some of the vertices are used more than once. C, and B get used twice, and E is repeated 3 times. Assuming that each float is 4 bytes, then that means of the 216 bytes we use for "),n("code",[t._v("VERTICES")]),t._v(", 96 of them are duplicate data. Wouldn't it be nice if we could list these vertices once? Well we can! That's were an index buffer comes into play.")]),t._v(" "),n("p",[t._v("Basically we store all the unique vertices in "),n("code",[t._v("VERTICES")]),t._v(" and we create another buffer that stores indices to elements in "),n("code",[t._v("VERTICES")]),t._v(" to create the triangles. Here's an example of that with our pentagon.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* padding */")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now with this setup our "),n("code",[t._v("VERTICES")]),t._v(" take up about 120 bytes and "),n("code",[t._v("INDICES")]),t._v(" is just 18 bytes given that "),n("code",[t._v("u16")]),t._v(" is 2 bytes wide. We add 2 bytes padding as wgpu requires buffers to be aligned to 4 bytes. All together our pentagon is 134 bytes in total. That means we saved 82 bytes! It may not seem like much, but when dealing with tri counts in the hundreds of thousands, indexing saves a lot of memory.")]),t._v(" "),n("p",[t._v("There's a couple of things we need to change in order to use indexing. The first is we need to create a buffer to store the indices. In "),n("code",[t._v("State")]),t._v("'s "),n("code",[t._v("new()")]),t._v(" method create the "),n("code",[t._v("index_buffer")]),t._v(" after you create the "),n("code",[t._v("vertex_buffer")]),t._v(". Also change "),n("code",[t._v("num_vertices")]),t._v(" to "),n("code",[t._v("num_indices")]),t._v(" and set it equal to "),n("code",[t._v("INDICES.len()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Index Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_indices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We don't need to implement "),n("code",[t._v("Pod")]),t._v(" and "),n("code",[t._v("Zeroable")]),t._v(" for our indices, because "),n("code",[t._v("bytemuck")]),t._v(" has already implemented them for basic types such as "),n("code",[t._v("u16")]),t._v(". That means we can just add "),n("code",[t._v("index_buffer")]),t._v(" and "),n("code",[t._v("num_indices")]),t._v(" to the "),n("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChainDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n    index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n    num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("And then populate these fields in the constructor:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    sc_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n    index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("All we have to do now is update the "),n("code",[t._v("render()")]),t._v(" method to use the "),n("code",[t._v("index_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n")])])]),n("p",[t._v("A couple things to note:")]),t._v(" "),n("ol",[n("li",[t._v("The method name is "),n("code",[t._v("set_index_buffer")]),t._v(" not "),n("code",[t._v("set_index_buffers")]),t._v(". You can only have one index buffer set at a time.")]),t._v(" "),n("li",[t._v("When using an index buffer, you need to use "),n("code",[t._v("draw_indexed")]),t._v(". The "),n("code",[t._v("draw")]),t._v(" method ignores the index buffer. Also make sure you use the number of indices ("),n("code",[t._v("num_indices")]),t._v("), not vertices as your model will either draw wrong, or the method will "),n("code",[t._v("panic")]),t._v(" because there are not enough indices.")])]),t._v(" "),n("p",[t._v("With all that you should have a garishly magenta pentagon in your window.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(203),alt:"Magenta pentagon in window"}})]),t._v(" "),n("h2",{attrs:{id:"color-correction"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#color-correction"}},[t._v("#")]),t._v(" Color Correction")]),t._v(" "),n("p",[t._v("If you use a color picker on the magenta pentagon, you'll get a hex value of #BC00BC. If you convert this to RGB values you'll get (188, 0, 188). Dividing these values by 255 to get them into the [0, 1] range we get roughly (0.737254902, 0, 0.737254902). This is not the same as we are using for our vertex colors which is (0.5, 0.0, 0.5). The reason for this has to do with color spaces.")]),t._v(" "),n("p",[t._v("Most monitors use a color space know as sRGB. Our swap chain is (most likely depending on what is returned from "),n("code",[t._v("adapter.get_swap_chain_preferred_format()")]),t._v(") using an sRGB texture format. The sRGB format stores colors according to their relative brightness instead of their actual brightness. The reason for this is that our eyes don't perceive light linearly. We notice more differences in darker colors than we do lighter colors.")]),t._v(" "),n("p",[t._v("You get an approximation of the correct color using the following formula: "),n("code",[t._v("srgb_color = (rgb_color / 255) ^ 2.2")]),t._v(". Doing this with an RGB value of (188, 0, 188) will give us (0.511397819, 0.0, 0.511397819). A little off from our (0.5, 0.0, 0.5). While you could tweak the formula to get the desired values, you'll likely save a lot of time by using textures instead as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.")]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Create a more complex shape than the one we made (aka. more than three triangles) using a vertex buffer and an index buffer. Toggle between the two with the space key.")]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/assets/js/app.153fadbc.js b/assets/js/app.68e9d3e2.js
similarity index 85%
rename from assets/js/app.153fadbc.js
rename to assets/js/app.68e9d3e2.js
index 9d4b9fee..0a0ec0b0 100644
--- a/assets/js/app.153fadbc.js
+++ b/assets/js/app.68e9d3e2.js
@@ -1,4 +1,4 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(t){function e(e){for(var r,a,s=e[0],c=e[1],u=e[2],f=0,p=[];f<s.length;f++)a=s[f],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(t[r]=c[r]);for(l&&l(e);p.length;)p.shift()();return i.push.apply(i,u||[]),n()}function n(){for(var t,e=0;e<i.length;e++){for(var n=i[e],r=!0,s=1;s<n.length;s++){var c=n[s];0!==o[c]&&(r=!1)}r&&(i.splice(e--,1),t=a(a.s=n[0]))}return t}var r={},o={1:0},i=[];function a(e){if(r[e])return r[e].exports;var n=r[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(t){var e=[],n=o[t];if(0!==n)if(n)e.push(n[2]);else{var r=new Promise((function(e,r){n=o[t]=[e,r]}));e.push(n[2]=r);var i,s=document.createElement("script");s.charset="utf-8",s.timeout=120,a.nc&&s.setAttribute("nonce",a.nc),s.src=function(t){return a.p+"assets/js/"+({}[t]||t)+"."+{2:"da3fd46f",3:"ee149516",4:"a1927191",5:"5061acf7",6:"a4165a76",7:"88810c81",8:"a23f98ec",9:"ecb6e79c",10:"de8cadfb",11:"fdda3025",12:"a3244b3f",13:"2da6599a",14:"3139647c",15:"4800fa06",16:"8cb7b62f",17:"d3375cb5",18:"83accaf9",19:"bee0cfc3",20:"17c44988",21:"fed3f353",22:"2132e362",23:"1a88f225",24:"5e2c93e5",25:"5c4d11d0",26:"745a2634",27:"04f788d9",28:"a3ac06e2",29:"281013fa",30:"dc887be9"}[t]+".js"}(t);var c=new Error;i=function(e){s.onerror=s.onload=null,clearTimeout(u);var n=o[t];if(0!==n){if(n){var r=e&&("load"===e.type?"missing":e.type),i=e&&e.target&&e.target.src;c.message="Loading chunk "+t+" failed.\n("+r+": "+i+")",c.name="ChunkLoadError",c.type=r,c.request=i,n[1](c)}o[t]=void 0}};var u=setTimeout((function(){i({type:"timeout",target:s})}),12e4);s.onerror=s.onload=i,document.head.appendChild(s)}return Promise.all(e)},a.m=t,a.c=r,a.d=function(t,e,n){a.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},a.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},a.t=function(t,e){if(1&e&&(t=a(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)a.d(n,r,function(e){return t[e]}.bind(null,r));return n},a.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(e,"a",e),e},a.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},a.p="/learn-wgpu/",a.oe=function(t){throw console.error(t),t};var s=window.webpackJsonp=window.webpackJsonp||[],c=s.push.bind(s);s.push=e,s=s.slice();for(var u=0;u<s.length;u++)e(s[u]);var l=c;i.push([119,0]),n()}([function(t,e,n){var r=n(3),o=n(19).f,i=n(9),a=n(11),s=n(53),c=n(78),u=n(49);t.exports=function(t,e){var n,l,f,p,d,h=t.target,v=t.global,m=t.stat;if(n=v?r:m?r[h]||s(h,{}):(r[h]||{}).prototype)for(l in e){if(p=e[l],f=t.noTargetGet?(d=o(n,l))&&d.value:n[l],!u(v?l:h+(m?".":"#")+l,t.forced)&&void 0!==f){if(typeof p==typeof f)continue;c(p,f)}(t.sham||f&&f.sham)&&i(p,"sham",!0),a(n,l,p,t)}}},function(t,e,n){var r=n(3),o=n(54),i=n(5),a=n(36),s=n(58),c=n(85),u=o("wks"),l=r.Symbol,f=c?l:l&&l.withoutSetter||a;t.exports=function(t){return i(u,t)||(s&&i(l,t)?u[t]=l[t]:u[t]=f("Symbol."+t)),u[t]}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){var n=function(t){return t&&t.Math==Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof global&&global)||Function("return this")()},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(2);t.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(t,e,n){var r=n(6),o=n(74),i=n(8),a=n(25),s=Object.defineProperty;e.f=r?s:function(t,e,n){if(i(t),e=a(e,!0),i(n),o)try{return s(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(4);t.exports=function(t){if(!r(t))throw TypeError(String(t)+" is not an object");return t}},function(t,e,n){var r=n(6),o=n(7),i=n(24);t.exports=r?function(t,e,n){return o.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){"use strict";function r(t,e,n,r,o,i,a,s){var c,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=c):o&&(c=s?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(u.functional){u._injectStyles=c;var l=u.render;u.render=function(t,e){return c.call(e),l(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,c):[c]}return{exports:t,options:u}}n.d(e,"a",(function(){return r}))},function(t,e,n){var r=n(3),o=n(9),i=n(5),a=n(53),s=n(76),c=n(23),u=c.get,l=c.enforce,f=String(String).split("String");(t.exports=function(t,e,n,s){var c=!!s&&!!s.unsafe,u=!!s&&!!s.enumerable,p=!!s&&!!s.noTargetGet;"function"==typeof n&&("string"!=typeof e||i(n,"name")||o(n,"name",e),l(n).source=f.join("string"==typeof e?e:"")),t!==r?(c?!p&&t[e]&&(u=!0):delete t[e],u?t[e]=n:o(t,e,n)):u?t[e]=n:a(e,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&u(this).source||s(this)}))},function(t,e,n){var r=n(37),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(48),o=n(16);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(16);t.exports=function(t){return Object(r(t))}},function(t,e,n){var r=n(6),o=n(2),i=n(5),a=Object.defineProperty,s={},c=function(t){throw t};t.exports=function(t,e){if(i(s,t))return s[t];e||(e={});var n=[][t],u=!!i(e,"ACCESSORS")&&e.ACCESSORS,l=i(e,0)?e[0]:c,f=i(e,1)?e[1]:void 0;return s[t]=!!n&&!o((function(){if(u&&!r)return!0;var t={length:-1};u?a(t,1,{enumerable:!0,get:c}):t[1]=1,n.call(t,l,f)}))}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){var r=n(60),o=n(11),i=n(121);r||o(Object.prototype,"toString",i,{unsafe:!0})},function(t,e,n){"use strict";var r=n(0),o=n(29).filter,i=n(38),a=n(15),s=i("filter"),c=a("filter");r({target:"Array",proto:!0,forced:!s||!c},{filter:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(6),o=n(73),i=n(24),a=n(13),s=n(25),c=n(5),u=n(74),l=Object.getOwnPropertyDescriptor;e.f=r?l:function(t,e){if(t=a(t),e=s(e,!0),u)try{return l(t,e)}catch(t){}if(c(t,e))return i(!o.f.call(t,e),t[e])}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var r,o=n(8),i=n(123),a=n(56),s=n(27),c=n(124),u=n(75),l=n(35),f=l("IE_PROTO"),p=function(){},d=function(t){return"<script>"+t+"<\/script>"},h=function(){try{r=document.domain&&new ActiveXObject("htmlfile")}catch(t){}var t,e;h=r?function(t){t.write(d("")),t.close();var e=t.parentWindow.Object;return t=null,e}(r):((e=u("iframe")).style.display="none",c.appendChild(e),e.src=String("javascript:"),(t=e.contentWindow.document).open(),t.write(d("document.F=Object")),t.close(),t.F);for(var n=a.length;n--;)delete h.prototype[a[n]];return h()};s[f]=!0,t.exports=Object.create||function(t,e){var n;return null!==t?(p.prototype=o(t),n=new p,p.prototype=null,n[f]=t):n=h(),void 0===e?n:i(n,e)}},function(t,e,n){"use strict";var r=n(0),o=n(52);r({target:"RegExp",proto:!0,forced:/./.exec!==o},{exec:o})},function(t,e,n){var r,o,i,a=n(120),s=n(3),c=n(4),u=n(9),l=n(5),f=n(35),p=n(27),d=s.WeakMap;if(a){var h=new d,v=h.get,m=h.has,g=h.set;r=function(t,e){return g.call(h,t,e),e},o=function(t){return v.call(h,t)||{}},i=function(t){return m.call(h,t)}}else{var y=f("state");p[y]=!0,r=function(t,e){return u(t,y,e),e},o=function(t){return l(t,y)?t[y]:{}},i=function(t){return l(t,y)}}t.exports={set:r,get:o,has:i,enforce:function(t){return i(t)?o(t):r(t,{})},getterFor:function(t){return function(e){var n;if(!c(e)||(n=o(e)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return n}}}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var r=n(4);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e){t.exports=!1},function(t,e){t.exports={}},function(t,e,n){var r=n(80),o=n(3),i=function(t){return"function"==typeof t?t:void 0};t.exports=function(t,e){return arguments.length<2?i(r[t])||i(o[t]):r[t]&&r[t][e]||o[t]&&o[t][e]}},function(t,e,n){var r=n(57),o=n(48),i=n(14),a=n(12),s=n(84),c=[].push,u=function(t){var e=1==t,n=2==t,u=3==t,l=4==t,f=6==t,p=5==t||f;return function(d,h,v,m){for(var g,y,b=i(d),w=o(b),_=r(h,v,3),x=a(w.length),S=0,E=m||s,O=e?E(d,x):n?E(d,0):void 0;x>S;S++)if((p||S in w)&&(y=_(g=w[S],S,b),t))if(e)O[S]=y;else if(y)switch(t){case 3:return!0;case 5:return g;case 6:return S;case 2:c.call(O,g)}else if(l)return!1;return f?-1:u||l?l:O}};t.exports={forEach:u(0),map:u(1),filter:u(2),some:u(3),every:u(4),find:u(5),findIndex:u(6)}},function(t,e){t.exports={}},function(t,e,n){"use strict";var r=n(2);t.exports=function(t,e){var n=[][t];return!!n&&r((function(){n.call(null,e||function(){throw 1},1)}))}},function(t,e,n){var r=n(81),o=n(56).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,e,n){var r=n(20);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){"use strict";var r=n(0),o=n(4),i=n(33),a=n(82),s=n(12),c=n(13),u=n(59),l=n(1),f=n(38),p=n(15),d=f("slice"),h=p("slice",{ACCESSORS:!0,0:0,1:2}),v=l("species"),m=[].slice,g=Math.max;r({target:"Array",proto:!0,forced:!d||!h},{slice:function(t,e){var n,r,l,f=c(this),p=s(f.length),d=a(t,p),h=a(void 0===e?p:e,p);if(i(f)&&("function"!=typeof(n=f.constructor)||n!==Array&&!i(n.prototype)?o(n)&&null===(n=n[v])&&(n=void 0):n=void 0,n===Array||void 0===n))return m.call(f,d,h);for(r=new(void 0===n?Array:n)(g(h-d,0)),l=0;d<h;d++,l++)d in f&&u(r,l,f[d]);return r.length=l,r}})},function(t,e,n){var r=n(54),o=n(36),i=r("keys");t.exports=function(t){return i[t]||(i[t]=o(t))}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol("+String(void 0===t?"":t)+")_"+(++n+r).toString(36)}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(2),o=n(1),i=n(86),a=o("species");t.exports=function(t){return i>=51||!r((function(){var e=[];return(e.constructor={})[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},function(t,e,n){var r=n(7).f,o=n(5),i=n(1)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){"use strict";function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function o(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}n.d(e,"a",(function(){return o}))},function(t,e){var n=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,i=/^0o[0-7]+$/i,a=parseInt,s="object"==typeof global&&global&&global.Object===Object&&global,c="object"==typeof self&&self&&self.Object===Object&&self,u=s||c||Function("return this")(),l=Object.prototype.toString,f=Math.max,p=Math.min,d=function(){return u.Date.now()};function h(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function v(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==l.call(t)}(t))return NaN;if(h(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=h(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(n,"");var s=o.test(t);return s||i.test(t)?a(t.slice(2),s?2:8):r.test(t)?NaN:+t}t.exports=function(t,e,n){var r,o,i,a,s,c,u=0,l=!1,m=!1,g=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var n=r,i=o;return r=o=void 0,u=e,a=t.apply(i,n)}function b(t){return u=t,s=setTimeout(_,e),l?y(t):a}function w(t){var n=t-c;return void 0===c||n>=e||n<0||m&&t-u>=i}function _(){var t=d();if(w(t))return x(t);s=setTimeout(_,function(t){var n=e-(t-c);return m?p(n,i-(t-u)):n}(t))}function x(t){return s=void 0,g&&r?y(t):(r=o=void 0,a)}function S(){var t=d(),n=w(t);if(r=arguments,o=this,c=t,n){if(void 0===s)return b(c);if(m)return s=setTimeout(_,e),y(c)}return void 0===s&&(s=setTimeout(_,e)),a}return e=v(e)||0,h(n)&&(l=!!n.leading,i=(m="maxWait"in n)?f(v(n.maxWait)||0,e):i,g="trailing"in n?!!n.trailing:g),S.cancel=function(){void 0!==s&&clearTimeout(s),u=0,r=c=o=s=void 0},S.flush=function(){return void 0===s?a:x(d())},S}},function(t,e,n){var r,o;
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(t){function e(e){for(var r,a,s=e[0],c=e[1],u=e[2],f=0,p=[];f<s.length;f++)a=s[f],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(t[r]=c[r]);for(l&&l(e);p.length;)p.shift()();return i.push.apply(i,u||[]),n()}function n(){for(var t,e=0;e<i.length;e++){for(var n=i[e],r=!0,s=1;s<n.length;s++){var c=n[s];0!==o[c]&&(r=!1)}r&&(i.splice(e--,1),t=a(a.s=n[0]))}return t}var r={},o={1:0},i=[];function a(e){if(r[e])return r[e].exports;var n=r[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(t){var e=[],n=o[t];if(0!==n)if(n)e.push(n[2]);else{var r=new Promise((function(e,r){n=o[t]=[e,r]}));e.push(n[2]=r);var i,s=document.createElement("script");s.charset="utf-8",s.timeout=120,a.nc&&s.setAttribute("nonce",a.nc),s.src=function(t){return a.p+"assets/js/"+({}[t]||t)+"."+{2:"da3fd46f",3:"ee149516",4:"a1927191",5:"5061acf7",6:"3afd850a",7:"88810c81",8:"a23f98ec",9:"ecb6e79c",10:"de8cadfb",11:"fdda3025",12:"a3244b3f",13:"2da6599a",14:"3139647c",15:"4800fa06",16:"8cb7b62f",17:"d3375cb5",18:"83accaf9",19:"bee0cfc3",20:"17c44988",21:"fed3f353",22:"2132e362",23:"1a88f225",24:"5e2c93e5",25:"5c4d11d0",26:"745a2634",27:"04f788d9",28:"a3ac06e2",29:"281013fa",30:"dc887be9"}[t]+".js"}(t);var c=new Error;i=function(e){s.onerror=s.onload=null,clearTimeout(u);var n=o[t];if(0!==n){if(n){var r=e&&("load"===e.type?"missing":e.type),i=e&&e.target&&e.target.src;c.message="Loading chunk "+t+" failed.\n("+r+": "+i+")",c.name="ChunkLoadError",c.type=r,c.request=i,n[1](c)}o[t]=void 0}};var u=setTimeout((function(){i({type:"timeout",target:s})}),12e4);s.onerror=s.onload=i,document.head.appendChild(s)}return Promise.all(e)},a.m=t,a.c=r,a.d=function(t,e,n){a.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},a.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},a.t=function(t,e){if(1&e&&(t=a(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)a.d(n,r,function(e){return t[e]}.bind(null,r));return n},a.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(e,"a",e),e},a.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},a.p="/learn-wgpu/",a.oe=function(t){throw console.error(t),t};var s=window.webpackJsonp=window.webpackJsonp||[],c=s.push.bind(s);s.push=e,s=s.slice();for(var u=0;u<s.length;u++)e(s[u]);var l=c;i.push([119,0]),n()}([function(t,e,n){var r=n(3),o=n(19).f,i=n(9),a=n(11),s=n(53),c=n(78),u=n(49);t.exports=function(t,e){var n,l,f,p,d,h=t.target,v=t.global,m=t.stat;if(n=v?r:m?r[h]||s(h,{}):(r[h]||{}).prototype)for(l in e){if(p=e[l],f=t.noTargetGet?(d=o(n,l))&&d.value:n[l],!u(v?l:h+(m?".":"#")+l,t.forced)&&void 0!==f){if(typeof p==typeof f)continue;c(p,f)}(t.sham||f&&f.sham)&&i(p,"sham",!0),a(n,l,p,t)}}},function(t,e,n){var r=n(3),o=n(54),i=n(5),a=n(36),s=n(58),c=n(85),u=o("wks"),l=r.Symbol,f=c?l:l&&l.withoutSetter||a;t.exports=function(t){return i(u,t)||(s&&i(l,t)?u[t]=l[t]:u[t]=f("Symbol."+t)),u[t]}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){var n=function(t){return t&&t.Math==Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof global&&global)||Function("return this")()},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(2);t.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(t,e,n){var r=n(6),o=n(74),i=n(8),a=n(25),s=Object.defineProperty;e.f=r?s:function(t,e,n){if(i(t),e=a(e,!0),i(n),o)try{return s(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(4);t.exports=function(t){if(!r(t))throw TypeError(String(t)+" is not an object");return t}},function(t,e,n){var r=n(6),o=n(7),i=n(24);t.exports=r?function(t,e,n){return o.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){"use strict";function r(t,e,n,r,o,i,a,s){var c,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=c):o&&(c=s?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(u.functional){u._injectStyles=c;var l=u.render;u.render=function(t,e){return c.call(e),l(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,c):[c]}return{exports:t,options:u}}n.d(e,"a",(function(){return r}))},function(t,e,n){var r=n(3),o=n(9),i=n(5),a=n(53),s=n(76),c=n(23),u=c.get,l=c.enforce,f=String(String).split("String");(t.exports=function(t,e,n,s){var c=!!s&&!!s.unsafe,u=!!s&&!!s.enumerable,p=!!s&&!!s.noTargetGet;"function"==typeof n&&("string"!=typeof e||i(n,"name")||o(n,"name",e),l(n).source=f.join("string"==typeof e?e:"")),t!==r?(c?!p&&t[e]&&(u=!0):delete t[e],u?t[e]=n:o(t,e,n)):u?t[e]=n:a(e,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&u(this).source||s(this)}))},function(t,e,n){var r=n(37),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(48),o=n(16);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(16);t.exports=function(t){return Object(r(t))}},function(t,e,n){var r=n(6),o=n(2),i=n(5),a=Object.defineProperty,s={},c=function(t){throw t};t.exports=function(t,e){if(i(s,t))return s[t];e||(e={});var n=[][t],u=!!i(e,"ACCESSORS")&&e.ACCESSORS,l=i(e,0)?e[0]:c,f=i(e,1)?e[1]:void 0;return s[t]=!!n&&!o((function(){if(u&&!r)return!0;var t={length:-1};u?a(t,1,{enumerable:!0,get:c}):t[1]=1,n.call(t,l,f)}))}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){var r=n(60),o=n(11),i=n(121);r||o(Object.prototype,"toString",i,{unsafe:!0})},function(t,e,n){"use strict";var r=n(0),o=n(29).filter,i=n(38),a=n(15),s=i("filter"),c=a("filter");r({target:"Array",proto:!0,forced:!s||!c},{filter:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(6),o=n(73),i=n(24),a=n(13),s=n(25),c=n(5),u=n(74),l=Object.getOwnPropertyDescriptor;e.f=r?l:function(t,e){if(t=a(t),e=s(e,!0),u)try{return l(t,e)}catch(t){}if(c(t,e))return i(!o.f.call(t,e),t[e])}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var r,o=n(8),i=n(123),a=n(56),s=n(27),c=n(124),u=n(75),l=n(35),f=l("IE_PROTO"),p=function(){},d=function(t){return"<script>"+t+"<\/script>"},h=function(){try{r=document.domain&&new ActiveXObject("htmlfile")}catch(t){}var t,e;h=r?function(t){t.write(d("")),t.close();var e=t.parentWindow.Object;return t=null,e}(r):((e=u("iframe")).style.display="none",c.appendChild(e),e.src=String("javascript:"),(t=e.contentWindow.document).open(),t.write(d("document.F=Object")),t.close(),t.F);for(var n=a.length;n--;)delete h.prototype[a[n]];return h()};s[f]=!0,t.exports=Object.create||function(t,e){var n;return null!==t?(p.prototype=o(t),n=new p,p.prototype=null,n[f]=t):n=h(),void 0===e?n:i(n,e)}},function(t,e,n){"use strict";var r=n(0),o=n(52);r({target:"RegExp",proto:!0,forced:/./.exec!==o},{exec:o})},function(t,e,n){var r,o,i,a=n(120),s=n(3),c=n(4),u=n(9),l=n(5),f=n(35),p=n(27),d=s.WeakMap;if(a){var h=new d,v=h.get,m=h.has,g=h.set;r=function(t,e){return g.call(h,t,e),e},o=function(t){return v.call(h,t)||{}},i=function(t){return m.call(h,t)}}else{var y=f("state");p[y]=!0,r=function(t,e){return u(t,y,e),e},o=function(t){return l(t,y)?t[y]:{}},i=function(t){return l(t,y)}}t.exports={set:r,get:o,has:i,enforce:function(t){return i(t)?o(t):r(t,{})},getterFor:function(t){return function(e){var n;if(!c(e)||(n=o(e)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return n}}}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var r=n(4);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e){t.exports=!1},function(t,e){t.exports={}},function(t,e,n){var r=n(80),o=n(3),i=function(t){return"function"==typeof t?t:void 0};t.exports=function(t,e){return arguments.length<2?i(r[t])||i(o[t]):r[t]&&r[t][e]||o[t]&&o[t][e]}},function(t,e,n){var r=n(57),o=n(48),i=n(14),a=n(12),s=n(84),c=[].push,u=function(t){var e=1==t,n=2==t,u=3==t,l=4==t,f=6==t,p=5==t||f;return function(d,h,v,m){for(var g,y,b=i(d),w=o(b),_=r(h,v,3),x=a(w.length),S=0,E=m||s,O=e?E(d,x):n?E(d,0):void 0;x>S;S++)if((p||S in w)&&(y=_(g=w[S],S,b),t))if(e)O[S]=y;else if(y)switch(t){case 3:return!0;case 5:return g;case 6:return S;case 2:c.call(O,g)}else if(l)return!1;return f?-1:u||l?l:O}};t.exports={forEach:u(0),map:u(1),filter:u(2),some:u(3),every:u(4),find:u(5),findIndex:u(6)}},function(t,e){t.exports={}},function(t,e,n){"use strict";var r=n(2);t.exports=function(t,e){var n=[][t];return!!n&&r((function(){n.call(null,e||function(){throw 1},1)}))}},function(t,e,n){var r=n(81),o=n(56).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,e,n){var r=n(20);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){"use strict";var r=n(0),o=n(4),i=n(33),a=n(82),s=n(12),c=n(13),u=n(59),l=n(1),f=n(38),p=n(15),d=f("slice"),h=p("slice",{ACCESSORS:!0,0:0,1:2}),v=l("species"),m=[].slice,g=Math.max;r({target:"Array",proto:!0,forced:!d||!h},{slice:function(t,e){var n,r,l,f=c(this),p=s(f.length),d=a(t,p),h=a(void 0===e?p:e,p);if(i(f)&&("function"!=typeof(n=f.constructor)||n!==Array&&!i(n.prototype)?o(n)&&null===(n=n[v])&&(n=void 0):n=void 0,n===Array||void 0===n))return m.call(f,d,h);for(r=new(void 0===n?Array:n)(g(h-d,0)),l=0;d<h;d++,l++)d in f&&u(r,l,f[d]);return r.length=l,r}})},function(t,e,n){var r=n(54),o=n(36),i=r("keys");t.exports=function(t){return i[t]||(i[t]=o(t))}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol("+String(void 0===t?"":t)+")_"+(++n+r).toString(36)}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(2),o=n(1),i=n(86),a=o("species");t.exports=function(t){return i>=51||!r((function(){var e=[];return(e.constructor={})[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},function(t,e,n){var r=n(7).f,o=n(5),i=n(1)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){"use strict";function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function o(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}n.d(e,"a",(function(){return o}))},function(t,e){var n=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,i=/^0o[0-7]+$/i,a=parseInt,s="object"==typeof global&&global&&global.Object===Object&&global,c="object"==typeof self&&self&&self.Object===Object&&self,u=s||c||Function("return this")(),l=Object.prototype.toString,f=Math.max,p=Math.min,d=function(){return u.Date.now()};function h(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function v(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==l.call(t)}(t))return NaN;if(h(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=h(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(n,"");var s=o.test(t);return s||i.test(t)?a(t.slice(2),s?2:8):r.test(t)?NaN:+t}t.exports=function(t,e,n){var r,o,i,a,s,c,u=0,l=!1,m=!1,g=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var n=r,i=o;return r=o=void 0,u=e,a=t.apply(i,n)}function b(t){return u=t,s=setTimeout(_,e),l?y(t):a}function w(t){var n=t-c;return void 0===c||n>=e||n<0||m&&t-u>=i}function _(){var t=d();if(w(t))return x(t);s=setTimeout(_,function(t){var n=e-(t-c);return m?p(n,i-(t-u)):n}(t))}function x(t){return s=void 0,g&&r?y(t):(r=o=void 0,a)}function S(){var t=d(),n=w(t);if(r=arguments,o=this,c=t,n){if(void 0===s)return b(c);if(m)return s=setTimeout(_,e),y(c)}return void 0===s&&(s=setTimeout(_,e)),a}return e=v(e)||0,h(n)&&(l=!!n.leading,i=(m="maxWait"in n)?f(v(n.maxWait)||0,e):i,g="trailing"in n?!!n.trailing:g),S.cancel=function(){void 0!==s&&clearTimeout(s),u=0,r=c=o=s=void 0},S.flush=function(){return void 0===s?a:x(d())},S}},function(t,e,n){var r,o;
 /* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
  * @license MIT */void 0===(o="function"==typeof(r=function(){var t,e,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function o(t,e,n){return t<e?e:t>n?n:t}function i(t){return 100*(-1+t)}n.configure=function(t){var e,n;for(e in t)void 0!==(n=t[e])&&t.hasOwnProperty(e)&&(r[e]=n);return this},n.status=null,n.set=function(t){var e=n.isStarted();t=o(t,r.minimum,1),n.status=1===t?null:t;var c=n.render(!e),u=c.querySelector(r.barSelector),l=r.speed,f=r.easing;return c.offsetWidth,a((function(e){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(u,function(t,e,n){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+i(t)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+i(t)+"%,0)"}:{"margin-left":i(t)+"%"}).transition="all "+e+"ms "+n,o}(t,l,f)),1===t?(s(c,{transition:"none",opacity:1}),c.offsetWidth,setTimeout((function(){s(c,{transition:"all "+l+"ms linear",opacity:0}),setTimeout((function(){n.remove(),e()}),l)}),l)):setTimeout(e,l)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var t=function(){setTimeout((function(){n.status&&(n.trickle(),t())}),r.trickleSpeed)};return r.trickle&&t(),this},n.done=function(t){return t||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(t){var e=n.status;return e?("number"!=typeof t&&(t=(1-e)*o(Math.random()*e,.1,.95)),e=o(e+t,0,.994),n.set(e)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},t=0,e=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===e&&n.start(),t++,e++,r.always((function(){0==--e?(t=0,n.done()):n.set((t-e)/t)})),this):this},n.render=function(t){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var e=document.createElement("div");e.id="nprogress",e.innerHTML=r.template;var o,a=e.querySelector(r.barSelector),c=t?"-100":i(n.status||0),l=document.querySelector(r.parent);return s(a,{transition:"all 0 linear",transform:"translate3d("+c+"%,0,0)"}),r.showSpinner||(o=e.querySelector(r.spinnerSelector))&&p(o),l!=document.body&&u(l,"nprogress-custom-parent"),l.appendChild(e),e},n.remove=function(){l(document.documentElement,"nprogress-busy"),l(document.querySelector(r.parent),"nprogress-custom-parent");var t=document.getElementById("nprogress");t&&p(t)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var t=document.body.style,e="WebkitTransform"in t?"Webkit":"MozTransform"in t?"Moz":"msTransform"in t?"ms":"OTransform"in t?"O":"";return e+"Perspective"in t?"translate3d":e+"Transform"in t?"translate":"margin"};var a=function(){var t=[];function e(){var n=t.shift();n&&n(e)}return function(n){t.push(n),1==t.length&&e()}}(),s=function(){var t=["Webkit","O","Moz","ms"],e={};function n(n){return n=n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(t,e){return e.toUpperCase()})),e[n]||(e[n]=function(e){var n=document.body.style;if(e in n)return e;for(var r,o=t.length,i=e.charAt(0).toUpperCase()+e.slice(1);o--;)if((r=t[o]+i)in n)return r;return e}(n))}function r(t,e,r){e=n(e),t.style[e]=r}return function(t,e){var n,o,i=arguments;if(2==i.length)for(n in e)void 0!==(o=e[n])&&e.hasOwnProperty(n)&&r(t,n,o);else r(t,i[1],i[2])}}();function c(t,e){return("string"==typeof t?t:f(t)).indexOf(" "+e+" ")>=0}function u(t,e){var n=f(t),r=n+e;c(n,e)||(t.className=r.substring(1))}function l(t,e){var n,r=f(t);c(t,e)&&(n=r.replace(" "+e+" "," "),t.className=n.substring(1,n.length-1))}function f(t){return(" "+(t.className||"")+" ").replace(/\s+/gi," ")}function p(t){t&&t.parentNode&&t.parentNode.removeChild(t)}return n})?r.call(e,n,e,t):r)||(t.exports=o)},function(t,e,n){"use strict";var r=n(0),o=n(29).map,i=n(38),a=n(15),s=i("map"),c=a("map");r({target:"Array",proto:!0,forced:!s||!c},{map:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){"use strict";var r=n(111),o=n(8),i=n(14),a=n(12),s=n(37),c=n(16),u=n(112),l=n(113),f=Math.max,p=Math.min,d=Math.floor,h=/\$([$&'`]|\d\d?|<[^>]*>)/g,v=/\$([$&'`]|\d\d?)/g;r("replace",2,(function(t,e,n,r){var m=r.REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE,g=r.REPLACE_KEEPS_$0,y=m?"$":"$0";return[function(n,r){var o=c(this),i=null==n?void 0:n[t];return void 0!==i?i.call(n,o,r):e.call(String(o),n,r)},function(t,r){if(!m&&g||"string"==typeof r&&-1===r.indexOf(y)){var i=n(e,t,this,r);if(i.done)return i.value}var c=o(t),d=String(this),h="function"==typeof r;h||(r=String(r));var v=c.global;if(v){var w=c.unicode;c.lastIndex=0}for(var _=[];;){var x=l(c,d);if(null===x)break;if(_.push(x),!v)break;""===String(x[0])&&(c.lastIndex=u(d,a(c.lastIndex),w))}for(var S,E="",O=0,k=0;k<_.length;k++){x=_[k];for(var C=String(x[0]),A=f(p(s(x.index),d.length),0),T=[],$=1;$<x.length;$++)T.push(void 0===(S=x[$])?S:String(S));var j=x.groups;if(h){var P=[C].concat(T,A,d);void 0!==j&&P.push(j);var L=String(r.apply(void 0,P))}else L=b(C,d,A,T,j,r);A>=O&&(E+=d.slice(O,A)+L,O=A+C.length)}return E+d.slice(O)}];function b(t,n,r,o,a,s){var c=r+t.length,u=o.length,l=v;return void 0!==a&&(a=i(a),l=h),e.call(s,l,(function(e,i){var s;switch(i.charAt(0)){case"$":return"$";case"&":return t;case"`":return n.slice(0,r);case"'":return n.slice(c);case"<":s=a[i.slice(1,-1)];break;default:var l=+i;if(0===l)return e;if(l>u){var f=d(l/10);return 0===f?e:f<=u?void 0===o[f-1]?i.charAt(1):o[f-1]+i.charAt(1):e}s=o[l-1]}return void 0===s?"":s}))}}))},function(t,e,n){var r=n(2),o=n(20),i="".split;t.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(t){return"String"==o(t)?i.call(t,""):Object(t)}:Object},function(t,e,n){var r=n(2),o=/#|\.prototype\./,i=function(t,e){var n=s[a(t)];return n==u||n!=c&&("function"==typeof e?r(e):!!e)},a=i.normalize=function(t){return String(t).replace(o,".").toLowerCase()},s=i.data={},c=i.NATIVE="N",u=i.POLYFILL="P";t.exports=i},function(t,e,n){"use strict";var r=n(0),o=n(96);r({target:"Array",proto:!0,forced:[].forEach!=o},{forEach:o})},function(t,e,n){var r=n(3),o=n(93),i=n(96),a=n(9);for(var s in o){var c=r[s],u=c&&c.prototype;if(u&&u.forEach!==i)try{a(u,"forEach",i)}catch(t){u.forEach=i}}},function(t,e,n){"use strict";var r,o,i=n(109),a=n(115),s=RegExp.prototype.exec,c=String.prototype.replace,u=s,l=(r=/a/,o=/b*/g,s.call(r,"a"),s.call(o,"a"),0!==r.lastIndex||0!==o.lastIndex),f=a.UNSUPPORTED_Y||a.BROKEN_CARET,p=void 0!==/()??/.exec("")[1];(l||p||f)&&(u=function(t){var e,n,r,o,a=this,u=f&&a.sticky,d=i.call(a),h=a.source,v=0,m=t;return u&&(-1===(d=d.replace("y","")).indexOf("g")&&(d+="g"),m=String(t).slice(a.lastIndex),a.lastIndex>0&&(!a.multiline||a.multiline&&"\n"!==t[a.lastIndex-1])&&(h="(?: "+h+")",m=" "+m,v++),n=new RegExp("^(?:"+h+")",d)),p&&(n=new RegExp("^"+h+"$(?!\\s)",d)),l&&(e=a.lastIndex),r=s.call(u?n:a,m),u?r?(r.input=r.input.slice(v),r[0]=r[0].slice(v),r.index=a.lastIndex,a.lastIndex+=r[0].length):a.lastIndex=0:l&&r&&(a.lastIndex=a.global?r.index+r[0].length:e),p&&r&&r.length>1&&c.call(r[0],n,(function(){for(o=1;o<arguments.length-2;o++)void 0===arguments[o]&&(r[o]=void 0)})),r}),t.exports=u},function(t,e,n){var r=n(3),o=n(9);t.exports=function(t,e){try{o(r,t,e)}catch(n){r[t]=e}return e}},function(t,e,n){var r=n(26),o=n(77);(t.exports=function(t,e){return o[t]||(o[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.6.5",mode:r?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},function(t,e,n){var r=n(13),o=n(12),i=n(82),a=function(t){return function(e,n,a){var s,c=r(e),u=o(c.length),l=i(a,u);if(t&&n!=n){for(;u>l;)if((s=c[l++])!=s)return!0}else for(;u>l;l++)if((t||l in c)&&c[l]===n)return t||l||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},function(t,e){t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(t,e,n){var r=n(68);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 0:return function(){return t.call(e)};case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,o){return t.call(e,n,r,o)}}return function(){return t.apply(e,arguments)}}},function(t,e,n){var r=n(2);t.exports=!!Object.getOwnPropertySymbols&&!r((function(){return!String(Symbol())}))},function(t,e,n){"use strict";var r=n(25),o=n(7),i=n(24);t.exports=function(t,e,n){var a=r(e);a in t?o.f(t,a,i(0,n)):t[a]=n}},function(t,e,n){var r={};r[n(1)("toStringTag")]="z",t.exports="[object z]"===String(r)},function(t,e,n){"use strict";var r=n(89).charAt,o=n(23),i=n(62),a=o.set,s=o.getterFor("String Iterator");i(String,"String",(function(t){a(this,{type:"String Iterator",string:String(t),index:0})}),(function(){var t,e=s(this),n=e.string,o=e.index;return o>=n.length?{value:void 0,done:!0}:(t=r(n,o),e.index+=t.length,{value:t,done:!1})}))},function(t,e,n){"use strict";var r=n(0),o=n(122),i=n(63),a=n(92),s=n(39),c=n(9),u=n(11),l=n(1),f=n(26),p=n(30),d=n(90),h=d.IteratorPrototype,v=d.BUGGY_SAFARI_ITERATORS,m=l("iterator"),g=function(){return this};t.exports=function(t,e,n,l,d,y,b){o(n,e,l);var w,_,x,S=function(t){if(t===d&&A)return A;if(!v&&t in k)return k[t];switch(t){case"keys":case"values":case"entries":return function(){return new n(this,t)}}return function(){return new n(this)}},E=e+" Iterator",O=!1,k=t.prototype,C=k[m]||k["@@iterator"]||d&&k[d],A=!v&&C||S(d),T="Array"==e&&k.entries||C;if(T&&(w=i(T.call(new t)),h!==Object.prototype&&w.next&&(f||i(w)===h||(a?a(w,h):"function"!=typeof w[m]&&c(w,m,g)),s(w,E,!0,!0),f&&(p[E]=g))),"values"==d&&C&&"values"!==C.name&&(O=!0,A=function(){return C.call(this)}),f&&!b||k[m]===A||c(k,m,A),p[e]=A,d)if(_={values:S("values"),keys:y?A:S("keys"),entries:S("entries")},b)for(x in _)(v||O||!(x in k))&&u(k,x,_[x]);else r({target:e,proto:!0,forced:v||O},_);return _}},function(t,e,n){var r=n(5),o=n(14),i=n(35),a=n(91),s=i("IE_PROTO"),c=Object.prototype;t.exports=a?Object.getPrototypeOf:function(t){return t=o(t),r(t,s)?t[s]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?c:null}},function(t,e,n){var r=n(81),o=n(56);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e,n){var r=n(3),o=n(93),i=n(126),a=n(9),s=n(1),c=s("iterator"),u=s("toStringTag"),l=i.values;for(var f in o){var p=r[f],d=p&&p.prototype;if(d){if(d[c]!==l)try{a(d,c,l)}catch(t){d[c]=l}if(d[u]||a(d,u,f),o[f])for(var h in i)if(d[h]!==i[h])try{a(d,h,i[h])}catch(t){d[h]=i[h]}}}},function(t,e,n){var r=n(27),o=n(4),i=n(5),a=n(7).f,s=n(36),c=n(97),u=s("meta"),l=0,f=Object.isExtensible||function(){return!0},p=function(t){a(t,u,{value:{objectID:"O"+ ++l,weakData:{}}})},d=t.exports={REQUIRED:!1,fastKey:function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,u)){if(!f(t))return"F";if(!e)return"E";p(t)}return t[u].objectID},getWeakData:function(t,e){if(!i(t,u)){if(!f(t))return!0;if(!e)return!1;p(t)}return t[u].weakData},onFreeze:function(t){return c&&d.REQUIRED&&f(t)&&!i(t,u)&&p(t),t}};r[u]=!0},function(t,e,n){var r=n(6),o=n(7).f,i=Function.prototype,a=i.toString,s=/^\s*function ([^ (]*)/;r&&!("name"in i)&&o(i,"name",{configurable:!0,get:function(){try{return a.call(this).match(s)[1]}catch(t){return""}}})},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(String(t)+" is not a function");return t}},function(t,e,n){var r=n(0),o=n(14),i=n(64);r({target:"Object",stat:!0,forced:n(2)((function(){i(1)}))},{keys:function(t){return i(o(t))}})},function(t,e,n){var r=n(4),o=n(92);t.exports=function(t,e,n){var i,a;return o&&"function"==typeof(i=e.constructor)&&i!==n&&r(a=i.prototype)&&a!==n.prototype&&o(t,a),t}},function(t,e,n){var r=n(16),o="["+n(72)+"]",i=RegExp("^"+o+o+"*"),a=RegExp(o+o+"*$"),s=function(t){return function(e){var n=String(r(e));return 1&t&&(n=n.replace(i,"")),2&t&&(n=n.replace(a,"")),n}};t.exports={start:s(1),end:s(2),trim:s(3)}},function(t,e){t.exports="\t\n\v\f\r                　\u2028\u2029\ufeff"},function(t,e,n){"use strict";var r={}.propertyIsEnumerable,o=Object.getOwnPropertyDescriptor,i=o&&!r.call({1:2},1);e.f=i?function(t){var e=o(this,t);return!!e&&e.enumerable}:r},function(t,e,n){var r=n(6),o=n(2),i=n(75);t.exports=!r&&!o((function(){return 7!=Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},function(t,e,n){var r=n(3),o=n(4),i=r.document,a=o(i)&&o(i.createElement);t.exports=function(t){return a?i.createElement(t):{}}},function(t,e,n){var r=n(77),o=Function.toString;"function"!=typeof r.inspectSource&&(r.inspectSource=function(t){return o.call(t)}),t.exports=r.inspectSource},function(t,e,n){var r=n(3),o=n(53),i=r["__core-js_shared__"]||o("__core-js_shared__",{});t.exports=i},function(t,e,n){var r=n(5),o=n(79),i=n(19),a=n(7);t.exports=function(t,e){for(var n=o(e),s=a.f,c=i.f,u=0;u<n.length;u++){var l=n[u];r(t,l)||s(t,l,c(e,l))}}},function(t,e,n){var r=n(28),o=n(32),i=n(83),a=n(8);t.exports=r("Reflect","ownKeys")||function(t){var e=o.f(a(t)),n=i.f;return n?e.concat(n(t)):e}},function(t,e,n){var r=n(3);t.exports=r},function(t,e,n){var r=n(5),o=n(13),i=n(55).indexOf,a=n(27);t.exports=function(t,e){var n,s=o(t),c=0,u=[];for(n in s)!r(a,n)&&r(s,n)&&u.push(n);for(;e.length>c;)r(s,n=e[c++])&&(~i(u,n)||u.push(n));return u}},function(t,e,n){var r=n(37),o=Math.max,i=Math.min;t.exports=function(t,e){var n=r(t);return n<0?o(n+e,0):i(n,e)}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var r=n(4),o=n(33),i=n(1)("species");t.exports=function(t,e){var n;return o(t)&&("function"!=typeof(n=t.constructor)||n!==Array&&!o(n.prototype)?r(n)&&null===(n=n[i])&&(n=void 0):n=void 0),new(void 0===n?Array:n)(0===e?0:e)}},function(t,e,n){var r=n(58);t.exports=r&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},function(t,e,n){var r,o,i=n(3),a=n(87),s=i.process,c=s&&s.versions,u=c&&c.v8;u?o=(r=u.split("."))[0]+r[1]:a&&(!(r=a.match(/Edge\/(\d+)/))||r[1]>=74)&&(r=a.match(/Chrome\/(\d+)/))&&(o=r[1]),t.exports=o&&+o},function(t,e,n){var r=n(28);t.exports=r("navigator","userAgent")||""},function(t,e,n){var r=n(60),o=n(20),i=n(1)("toStringTag"),a="Arguments"==o(function(){return arguments}());t.exports=r?o:function(t){var e,n,r;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),i))?n:a?o(e):"Object"==(r=o(e))&&"function"==typeof e.callee?"Arguments":r}},function(t,e,n){var r=n(37),o=n(16),i=function(t){return function(e,n){var i,a,s=String(o(e)),c=r(n),u=s.length;return c<0||c>=u?t?"":void 0:(i=s.charCodeAt(c))<55296||i>56319||c+1===u||(a=s.charCodeAt(c+1))<56320||a>57343?t?s.charAt(c):i:t?s.slice(c,c+2):a-56320+(i-55296<<10)+65536}};t.exports={codeAt:i(!1),charAt:i(!0)}},function(t,e,n){"use strict";var r,o,i,a=n(63),s=n(9),c=n(5),u=n(1),l=n(26),f=u("iterator"),p=!1;[].keys&&("next"in(i=[].keys())?(o=a(a(i)))!==Object.prototype&&(r=o):p=!0),null==r&&(r={}),l||c(r,f)||s(r,f,(function(){return this})),t.exports={IteratorPrototype:r,BUGGY_SAFARI_ITERATORS:p}},function(t,e,n){var r=n(2);t.exports=!r((function(){function t(){}return t.prototype.constructor=null,Object.getPrototypeOf(new t)!==t.prototype}))},function(t,e,n){var r=n(8),o=n(125);t.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var t,e=!1,n={};try{(t=Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set).call(n,[]),e=n instanceof Array}catch(t){}return function(n,i){return r(n),o(i),e?t.call(n,i):n.__proto__=i,n}}():void 0)},function(t,e){t.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0}},function(t,e,n){var r=n(1),o=n(21),i=n(7),a=r("unscopables"),s=Array.prototype;null==s[a]&&i.f(s,a,{configurable:!0,value:o(null)}),t.exports=function(t){s[a][t]=!0}},function(t,e,n){var r=function(t){"use strict";var e=Object.prototype,n=e.hasOwnProperty,r="function"==typeof Symbol?Symbol:{},o=r.iterator||"@@iterator",i=r.asyncIterator||"@@asyncIterator",a=r.toStringTag||"@@toStringTag";function s(t,e,n,r){var o=e&&e.prototype instanceof l?e:l,i=Object.create(o.prototype),a=new x(r||[]);return i._invoke=function(t,e,n){var r="suspendedStart";return function(o,i){if("executing"===r)throw new Error("Generator is already running");if("completed"===r){if("throw"===o)throw i;return E()}for(n.method=o,n.arg=i;;){var a=n.delegate;if(a){var s=b(a,n);if(s){if(s===u)continue;return s}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===r)throw r="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r="executing";var l=c(t,e,n);if("normal"===l.type){if(r=n.done?"completed":"suspendedYield",l.arg===u)continue;return{value:l.arg,done:n.done}}"throw"===l.type&&(r="completed",n.method="throw",n.arg=l.arg)}}}(t,n,a),i}function c(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=s;var u={};function l(){}function f(){}function p(){}var d={};d[o]=function(){return this};var h=Object.getPrototypeOf,v=h&&h(h(S([])));v&&v!==e&&n.call(v,o)&&(d=v);var m=p.prototype=l.prototype=Object.create(d);function g(t){["next","throw","return"].forEach((function(e){t[e]=function(t){return this._invoke(e,t)}}))}function y(t,e){var r;this._invoke=function(o,i){function a(){return new e((function(r,a){!function r(o,i,a,s){var u=c(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==typeof f&&n.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,a,s)}),(function(t){r("throw",t,a,s)})):e.resolve(f).then((function(t){l.value=t,a(l)}),(function(t){return r("throw",t,a,s)}))}s(u.arg)}(o,i,r,a)}))}return r=r?r.then(a,a):a()}}function b(t,e){var n=t.iterator[e.method];if(void 0===n){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,b(t,e),"throw"===e.method))return u;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return u}var r=c(n,t.iterator,e.arg);if("throw"===r.type)return e.method="throw",e.arg=r.arg,e.delegate=null,u;var o=r.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,u):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,u)}function w(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function _(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function x(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(w,this),this.reset(!0)}function S(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,i=function e(){for(;++r<t.length;)if(n.call(t,r))return e.value=t[r],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:E}}function E(){return{value:void 0,done:!0}}return f.prototype=m.constructor=p,p.constructor=f,p[a]=f.displayName="GeneratorFunction",t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===f||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,a in t||(t[a]="GeneratorFunction")),t.prototype=Object.create(m),t},t.awrap=function(t){return{__await:t}},g(y.prototype),y.prototype[i]=function(){return this},t.AsyncIterator=y,t.async=function(e,n,r,o,i){void 0===i&&(i=Promise);var a=new y(s(e,n,r,o),i);return t.isGeneratorFunction(n)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},g(m),m[a]="Generator",m[o]=function(){return this},m.toString=function(){return"[object Generator]"},t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var r=e.pop();if(r in t)return n.value=r,n.done=!1,n}return n.done=!0,n}},t.values=S,x.prototype={constructor:x,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(_),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function r(n,r){return a.type="throw",a.arg=t,e.next=n,r&&(e.method="next",e.arg=void 0),!!r}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return r("end");if(i.tryLoc<=this.prev){var s=n.call(i,"catchLoc"),c=n.call(i,"finallyLoc");if(s&&c){if(this.prev<i.catchLoc)return r(i.catchLoc,!0);if(this.prev<i.finallyLoc)return r(i.finallyLoc)}else if(s){if(this.prev<i.catchLoc)return r(i.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return r(i.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,u):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),u},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),_(n),u}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var o=r.arg;_(n)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:S(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=void 0),u}},t}(t.exports);try{regeneratorRuntime=r}catch(t){Function("r","regeneratorRuntime = r")(r)}},function(t,e,n){"use strict";var r=n(29).forEach,o=n(31),i=n(15),a=o("forEach"),s=i("forEach");t.exports=a&&s?[].forEach:function(t){return r(this,t,arguments.length>1?arguments[1]:void 0)}},function(t,e,n){var r=n(2);t.exports=!r((function(){return Object.isExtensible(Object.preventExtensions({}))}))},function(t,e,n){var r=n(107);t.exports=function(t){if(r(t))throw TypeError("The method doesn't accept regular expressions");return t}},function(t,e,n){var r=n(1)("match");t.exports=function(t){var e=/./;try{"/./"[t](e)}catch(n){try{return e[r]=!1,"/./"[t](e)}catch(t){}}return!1}},function(t,e,n){"use strict";var r=n(0),o=n(3),i=n(28),a=n(26),s=n(6),c=n(58),u=n(85),l=n(2),f=n(5),p=n(33),d=n(4),h=n(8),v=n(14),m=n(13),g=n(25),y=n(24),b=n(21),w=n(64),_=n(32),x=n(134),S=n(83),E=n(19),O=n(7),k=n(73),C=n(9),A=n(11),T=n(54),$=n(35),j=n(27),P=n(36),L=n(1),R=n(101),I=n(135),M=n(39),D=n(23),N=n(29).forEach,U=$("hidden"),B=L("toPrimitive"),F=D.set,W=D.getterFor("Symbol"),H=Object.prototype,V=o.Symbol,z=i("JSON","stringify"),G=E.f,q=O.f,Z=x.f,K=k.f,X=T("symbols"),Y=T("op-symbols"),J=T("string-to-symbol-registry"),Q=T("symbol-to-string-registry"),tt=T("wks"),et=o.QObject,nt=!et||!et.prototype||!et.prototype.findChild,rt=s&&l((function(){return 7!=b(q({},"a",{get:function(){return q(this,"a",{value:7}).a}})).a}))?function(t,e,n){var r=G(H,e);r&&delete H[e],q(t,e,n),r&&t!==H&&q(H,e,r)}:q,ot=function(t,e){var n=X[t]=b(V.prototype);return F(n,{type:"Symbol",tag:t,description:e}),s||(n.description=e),n},it=u?function(t){return"symbol"==typeof t}:function(t){return Object(t)instanceof V},at=function(t,e,n){t===H&&at(Y,e,n),h(t);var r=g(e,!0);return h(n),f(X,r)?(n.enumerable?(f(t,U)&&t[U][r]&&(t[U][r]=!1),n=b(n,{enumerable:y(0,!1)})):(f(t,U)||q(t,U,y(1,{})),t[U][r]=!0),rt(t,r,n)):q(t,r,n)},st=function(t,e){h(t);var n=m(e),r=w(n).concat(ft(n));return N(r,(function(e){s&&!ct.call(n,e)||at(t,e,n[e])})),t},ct=function(t){var e=g(t,!0),n=K.call(this,e);return!(this===H&&f(X,e)&&!f(Y,e))&&(!(n||!f(this,e)||!f(X,e)||f(this,U)&&this[U][e])||n)},ut=function(t,e){var n=m(t),r=g(e,!0);if(n!==H||!f(X,r)||f(Y,r)){var o=G(n,r);return!o||!f(X,r)||f(n,U)&&n[U][r]||(o.enumerable=!0),o}},lt=function(t){var e=Z(m(t)),n=[];return N(e,(function(t){f(X,t)||f(j,t)||n.push(t)})),n},ft=function(t){var e=t===H,n=Z(e?Y:m(t)),r=[];return N(n,(function(t){!f(X,t)||e&&!f(H,t)||r.push(X[t])})),r};(c||(A((V=function(){if(this instanceof V)throw TypeError("Symbol is not a constructor");var t=arguments.length&&void 0!==arguments[0]?String(arguments[0]):void 0,e=P(t),n=function(t){this===H&&n.call(Y,t),f(this,U)&&f(this[U],e)&&(this[U][e]=!1),rt(this,e,y(1,t))};return s&&nt&&rt(H,e,{configurable:!0,set:n}),ot(e,t)}).prototype,"toString",(function(){return W(this).tag})),A(V,"withoutSetter",(function(t){return ot(P(t),t)})),k.f=ct,O.f=at,E.f=ut,_.f=x.f=lt,S.f=ft,R.f=function(t){return ot(L(t),t)},s&&(q(V.prototype,"description",{configurable:!0,get:function(){return W(this).description}}),a||A(H,"propertyIsEnumerable",ct,{unsafe:!0}))),r({global:!0,wrap:!0,forced:!c,sham:!c},{Symbol:V}),N(w(tt),(function(t){I(t)})),r({target:"Symbol",stat:!0,forced:!c},{for:function(t){var e=String(t);if(f(J,e))return J[e];var n=V(e);return J[e]=n,Q[n]=e,n},keyFor:function(t){if(!it(t))throw TypeError(t+" is not a symbol");if(f(Q,t))return Q[t]},useSetter:function(){nt=!0},useSimple:function(){nt=!1}}),r({target:"Object",stat:!0,forced:!c,sham:!s},{create:function(t,e){return void 0===e?b(t):st(b(t),e)},defineProperty:at,defineProperties:st,getOwnPropertyDescriptor:ut}),r({target:"Object",stat:!0,forced:!c},{getOwnPropertyNames:lt,getOwnPropertySymbols:ft}),r({target:"Object",stat:!0,forced:l((function(){S.f(1)}))},{getOwnPropertySymbols:function(t){return S.f(v(t))}}),z)&&r({target:"JSON",stat:!0,forced:!c||l((function(){var t=V();return"[null]"!=z([t])||"{}"!=z({a:t})||"{}"!=z(Object(t))}))},{stringify:function(t,e,n){for(var r,o=[t],i=1;arguments.length>i;)o.push(arguments[i++]);if(r=e,(d(e)||void 0!==t)&&!it(t))return p(e)||(e=function(t,e){if("function"==typeof r&&(e=r.call(this,t,e)),!it(e))return e}),o[1]=e,z.apply(null,o)}});V.prototype[B]||C(V.prototype,B,V.prototype.valueOf),M(V,"Symbol"),j[U]=!0},function(t,e,n){var r=n(1);e.f=r},function(t,e,n){"use strict";var r=n(0),o=n(6),i=n(3),a=n(5),s=n(4),c=n(7).f,u=n(78),l=i.Symbol;if(o&&"function"==typeof l&&(!("description"in l.prototype)||void 0!==l().description)){var f={},p=function(){var t=arguments.length<1||void 0===arguments[0]?void 0:String(arguments[0]),e=this instanceof p?new l(t):void 0===t?l():l(t);return""===t&&(f[e]=!0),e};u(p,l);var d=p.prototype=l.prototype;d.constructor=p;var h=d.toString,v="Symbol(test)"==String(l("test")),m=/^Symbol\((.*)\)[^)]+$/;c(d,"description",{configurable:!0,get:function(){var t=s(this)?this.valueOf():this,e=h.call(t);if(a(f,t))return"";var n=v?e.slice(7,-1):e.replace(m,"$1");return""===n?void 0:n}}),r({global:!0,forced:!0},{Symbol:p})}},function(t,e,n){var r=n(8),o=n(138),i=n(12),a=n(57),s=n(139),c=n(140),u=function(t,e){this.stopped=t,this.result=e};(t.exports=function(t,e,n,l,f){var p,d,h,v,m,g,y,b=a(e,n,l?2:1);if(f)p=t;else{if("function"!=typeof(d=s(t)))throw TypeError("Target is not iterable");if(o(d)){for(h=0,v=i(t.length);v>h;h++)if((m=l?b(r(y=t[h])[0],y[1]):b(t[h]))&&m instanceof u)return m;return new u(!1)}p=d.call(t)}for(g=p.next;!(y=g.call(p)).done;)if("object"==typeof(m=c(p,b,y.value,l))&&m&&m instanceof u)return m;return new u(!1)}).stop=function(t){return new u(!0,t)}},function(t,e){t.exports=function(t,e,n){if(!(t instanceof e))throw TypeError("Incorrect "+(n?n+" ":"")+"invocation");return t}},function(t,e,n){var r=n(0),o=n(3),i=n(87),a=[].slice,s=function(t){return function(e,n){var r=arguments.length>2,o=r?a.call(arguments,2):void 0;return t(r?function(){("function"==typeof e?e:Function(e)).apply(this,o)}:e,n)}};r({global:!0,bind:!0,forced:/MSIE .\./.test(i)},{setTimeout:s(o.setTimeout),setInterval:s(o.setInterval)})},function(t,e,n){"use strict";var r=n(0),o=n(29).some,i=n(31),a=n(15),s=i("some"),c=a("some");r({target:"Array",proto:!0,forced:!s||!c},{some:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(4),o=n(20),i=n(1)("match");t.exports=function(t){var e;return r(t)&&(void 0!==(e=t[i])?!!e:"RegExp"==o(t))}},function(t,e,n){"use strict";var r=n(0),o=n(55).includes,i=n(94);r({target:"Array",proto:!0,forced:!n(15)("indexOf",{ACCESSORS:!0,1:0})},{includes:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),i("includes")},function(t,e,n){"use strict";var r=n(8);t.exports=function(){var t=r(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.dotAll&&(e+="s"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},function(t,e,n){"use strict";var r=n(0),o=n(98),i=n(16);r({target:"String",proto:!0,forced:!n(99)("includes")},{includes:function(t){return!!~String(i(this)).indexOf(o(t),arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){"use strict";n(22);var r=n(11),o=n(2),i=n(1),a=n(52),s=n(9),c=i("species"),u=!o((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$<a>")})),l="$0"==="a".replace(/./,"$0"),f=i("replace"),p=!!/./[f]&&""===/./[f]("a","$0"),d=!o((function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2!==n.length||"a"!==n[0]||"b"!==n[1]}));t.exports=function(t,e,n,f){var h=i(t),v=!o((function(){var e={};return e[h]=function(){return 7},7!=""[t](e)})),m=v&&!o((function(){var e=!1,n=/a/;return"split"===t&&((n={}).constructor={},n.constructor[c]=function(){return n},n.flags="",n[h]=/./[h]),n.exec=function(){return e=!0,null},n[h](""),!e}));if(!v||!m||"replace"===t&&(!u||!l||p)||"split"===t&&!d){var g=/./[h],y=n(h,""[t],(function(t,e,n,r,o){return e.exec===a?v&&!o?{done:!0,value:g.call(e,n,r)}:{done:!0,value:t.call(n,e,r)}:{done:!1}}),{REPLACE_KEEPS_$0:l,REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE:p}),b=y[0],w=y[1];r(String.prototype,t,b),r(RegExp.prototype,h,2==e?function(t,e){return w.call(t,this,e)}:function(t){return w.call(t,this)})}f&&s(RegExp.prototype[h],"sham",!0)}},function(t,e,n){"use strict";var r=n(89).charAt;t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},function(t,e,n){var r=n(20),o=n(52);t.exports=function(t,e){var n=t.exec;if("function"==typeof n){var i=n.call(t,e);if("object"!=typeof i)throw TypeError("RegExp exec method returned something other than an Object or null");return i}if("RegExp"!==r(t))throw TypeError("RegExp#exec called on incompatible receiver");return o.call(t,e)}},function(t,e,n){"use strict";var r=n(0),o=n(55).indexOf,i=n(31),a=n(15),s=[].indexOf,c=!!s&&1/[1].indexOf(1,-0)<0,u=i("indexOf"),l=a("indexOf",{ACCESSORS:!0,1:0});r({target:"Array",proto:!0,forced:c||!u||!l},{indexOf:function(t){return c?s.apply(this,arguments)||0:o(this,t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){"use strict";var r=n(2);function o(t,e){return RegExp(t,e)}e.UNSUPPORTED_Y=r((function(){var t=o("a","y");return t.lastIndex=2,null!=t.exec("abcd")})),e.BROKEN_CARET=r((function(){var t=o("^r","gy");return t.lastIndex=2,null!=t.exec("str")}))},function(t,e,n){"use strict";var r=n(28),o=n(7),i=n(1),a=n(6),s=i("species");t.exports=function(t){var e=r(t),n=o.f;a&&e&&!e[s]&&n(e,s,{configurable:!0,get:function(){return this}})}},function(t,e,n){"use strict";var r=n(0),o=n(2),i=n(33),a=n(4),s=n(14),c=n(12),u=n(59),l=n(84),f=n(38),p=n(1),d=n(86),h=p("isConcatSpreadable"),v=d>=51||!o((function(){var t=[];return t[h]=!1,t.concat()[0]!==t})),m=f("concat"),g=function(t){if(!a(t))return!1;var e=t[h];return void 0!==e?!!e:i(t)};r({target:"Array",proto:!0,forced:!v||!m},{concat:function(t){var e,n,r,o,i,a=s(this),f=l(a,0),p=0;for(e=-1,r=arguments.length;e<r;e++)if(i=-1===e?a:arguments[e],g(i)){if(p+(o=c(i.length))>9007199254740991)throw TypeError("Maximum allowed index exceeded");for(n=0;n<o;n++,p++)n in i&&u(f,p,i[n])}else{if(p>=9007199254740991)throw TypeError("Maximum allowed index exceeded");u(f,p++,i)}return f.length=p,f}})},function(t,e,n){var r=n(0),o=n(144);r({global:!0,forced:parseInt!=o},{parseInt:o})},function(t,e,n){t.exports=n(152)},function(t,e,n){var r=n(3),o=n(76),i=r.WeakMap;t.exports="function"==typeof i&&/native code/.test(o(i))},function(t,e,n){"use strict";var r=n(60),o=n(88);t.exports=r?{}.toString:function(){return"[object "+o(this)+"]"}},function(t,e,n){"use strict";var r=n(90).IteratorPrototype,o=n(21),i=n(24),a=n(39),s=n(30),c=function(){return this};t.exports=function(t,e,n){var u=e+" Iterator";return t.prototype=o(r,{next:i(1,n)}),a(t,u,!1,!0),s[u]=c,t}},function(t,e,n){var r=n(6),o=n(7),i=n(8),a=n(64);t.exports=r?Object.defineProperties:function(t,e){i(t);for(var n,r=a(e),s=r.length,c=0;s>c;)o.f(t,n=r[c++],e[n]);return t}},function(t,e,n){var r=n(28);t.exports=r("document","documentElement")},function(t,e,n){var r=n(4);t.exports=function(t){if(!r(t)&&null!==t)throw TypeError("Can't set "+String(t)+" as a prototype");return t}},function(t,e,n){"use strict";var r=n(13),o=n(94),i=n(30),a=n(23),s=n(62),c=a.set,u=a.getterFor("Array Iterator");t.exports=s(Array,"Array",(function(t,e){c(this,{type:"Array Iterator",target:r(t),index:0,kind:e})}),(function(){var t=u(this),e=t.target,n=t.kind,r=t.index++;return!e||r>=e.length?(t.target=void 0,{value:void 0,done:!0}):"keys"==n?{value:r,done:!1}:"values"==n?{value:e[r],done:!1}:{value:[r,e[r]],done:!1}}),"values"),i.Arguments=i.Array,o("keys"),o("values"),o("entries")},function(t,e,n){"use strict";var r=n(0),o=n(128).left,i=n(31),a=n(15),s=i("reduce"),c=a("reduce",{1:0});r({target:"Array",proto:!0,forced:!s||!c},{reduce:function(t){return o(this,t,arguments.length,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(68),o=n(14),i=n(48),a=n(12),s=function(t){return function(e,n,s,c){r(n);var u=o(e),l=i(u),f=a(u.length),p=t?f-1:0,d=t?-1:1;if(s<2)for(;;){if(p in l){c=l[p],p+=d;break}if(p+=d,t?p<0:f<=p)throw TypeError("Reduce of empty array with no initial value")}for(;t?p>=0:f>p;p+=d)p in l&&(c=n(c,l[p],p,u));return c}};t.exports={left:s(!1),right:s(!0)}},function(t,e,n){var r=n(0),o=n(97),i=n(2),a=n(4),s=n(66).onFreeze,c=Object.freeze;r({target:"Object",stat:!0,forced:i((function(){c(1)})),sham:!o},{freeze:function(t){return c&&a(t)?c(s(t)):t}})},function(t,e,n){var r=n(0),o=n(6),i=n(79),a=n(13),s=n(19),c=n(59);r({target:"Object",stat:!0,sham:!o},{getOwnPropertyDescriptors:function(t){for(var e,n,r=a(t),o=s.f,u=i(r),l={},f=0;u.length>f;)void 0!==(n=o(r,e=u[f++]))&&c(l,e,n);return l}})},function(t,e,n){var r=n(0),o=n(2),i=n(14),a=n(63),s=n(91);r({target:"Object",stat:!0,forced:o((function(){a(1)})),sham:!s},{getPrototypeOf:function(t){return a(i(t))}})},function(t,e,n){"use strict";var r,o=n(0),i=n(19).f,a=n(12),s=n(98),c=n(16),u=n(99),l=n(26),f="".startsWith,p=Math.min,d=u("startsWith");o({target:"String",proto:!0,forced:!!(l||d||(r=i(String.prototype,"startsWith"),!r||r.writable))&&!d},{startsWith:function(t){var e=String(c(this));s(t);var n=a(p(arguments.length>1?arguments[1]:void 0,e.length)),r=String(t);return f?f.call(e,r,n):e.slice(n,n+r.length)===r}})},function(t,e,n){n(0)({target:"Object",stat:!0,sham:!n(6)},{create:n(21)})},function(t,e,n){var r=n(13),o=n(32).f,i={}.toString,a="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return a&&"[object Window]"==i.call(t)?function(t){try{return o(t)}catch(t){return a.slice()}}(t):o(r(t))}},function(t,e,n){var r=n(80),o=n(5),i=n(101),a=n(7).f;t.exports=function(t){var e=r.Symbol||(r.Symbol={});o(e,t)||a(e,t,{value:i.f(t)})}},function(t,e,n){"use strict";var r=n(137),o=n(142);t.exports=r("Set",(function(t){return function(){return t(this,arguments.length?arguments[0]:void 0)}}),o)},function(t,e,n){"use strict";var r=n(0),o=n(3),i=n(49),a=n(11),s=n(66),c=n(103),u=n(104),l=n(4),f=n(2),p=n(141),d=n(39),h=n(70);t.exports=function(t,e,n){var v=-1!==t.indexOf("Map"),m=-1!==t.indexOf("Weak"),g=v?"set":"add",y=o[t],b=y&&y.prototype,w=y,_={},x=function(t){var e=b[t];a(b,t,"add"==t?function(t){return e.call(this,0===t?0:t),this}:"delete"==t?function(t){return!(m&&!l(t))&&e.call(this,0===t?0:t)}:"get"==t?function(t){return m&&!l(t)?void 0:e.call(this,0===t?0:t)}:"has"==t?function(t){return!(m&&!l(t))&&e.call(this,0===t?0:t)}:function(t,n){return e.call(this,0===t?0:t,n),this})};if(i(t,"function"!=typeof y||!(m||b.forEach&&!f((function(){(new y).entries().next()})))))w=n.getConstructor(e,t,v,g),s.REQUIRED=!0;else if(i(t,!0)){var S=new w,E=S[g](m?{}:-0,1)!=S,O=f((function(){S.has(1)})),k=p((function(t){new y(t)})),C=!m&&f((function(){for(var t=new y,e=5;e--;)t[g](e,e);return!t.has(-0)}));k||((w=e((function(e,n){u(e,w,t);var r=h(new y,e,w);return null!=n&&c(n,r[g],r,v),r}))).prototype=b,b.constructor=w),(O||C)&&(x("delete"),x("has"),v&&x("get")),(C||E)&&x(g),m&&b.clear&&delete b.clear}return _[t]=w,r({global:!0,forced:w!=y},_),d(w,t),m||n.setStrong(w,t,v),w}},function(t,e,n){var r=n(1),o=n(30),i=r("iterator"),a=Array.prototype;t.exports=function(t){return void 0!==t&&(o.Array===t||a[i]===t)}},function(t,e,n){var r=n(88),o=n(30),i=n(1)("iterator");t.exports=function(t){if(null!=t)return t[i]||t["@@iterator"]||o[r(t)]}},function(t,e,n){var r=n(8);t.exports=function(t,e,n,o){try{return o?e(r(n)[0],n[1]):e(n)}catch(e){var i=t.return;throw void 0!==i&&r(i.call(t)),e}}},function(t,e,n){var r=n(1)("iterator"),o=!1;try{var i=0,a={next:function(){return{done:!!i++}},return:function(){o=!0}};a[r]=function(){return this},Array.from(a,(function(){throw 2}))}catch(t){}t.exports=function(t,e){if(!e&&!o)return!1;var n=!1;try{var i={};i[r]=function(){return{next:function(){return{done:n=!0}}}},t(i)}catch(t){}return n}},function(t,e,n){"use strict";var r=n(7).f,o=n(21),i=n(143),a=n(57),s=n(104),c=n(103),u=n(62),l=n(116),f=n(6),p=n(66).fastKey,d=n(23),h=d.set,v=d.getterFor;t.exports={getConstructor:function(t,e,n,u){var l=t((function(t,r){s(t,l,e),h(t,{type:e,index:o(null),first:void 0,last:void 0,size:0}),f||(t.size=0),null!=r&&c(r,t[u],t,n)})),d=v(e),m=function(t,e,n){var r,o,i=d(t),a=g(t,e);return a?a.value=n:(i.last=a={index:o=p(e,!0),key:e,value:n,previous:r=i.last,next:void 0,removed:!1},i.first||(i.first=a),r&&(r.next=a),f?i.size++:t.size++,"F"!==o&&(i.index[o]=a)),t},g=function(t,e){var n,r=d(t),o=p(e);if("F"!==o)return r.index[o];for(n=r.first;n;n=n.next)if(n.key==e)return n};return i(l.prototype,{clear:function(){for(var t=d(this),e=t.index,n=t.first;n;)n.removed=!0,n.previous&&(n.previous=n.previous.next=void 0),delete e[n.index],n=n.next;t.first=t.last=void 0,f?t.size=0:this.size=0},delete:function(t){var e=d(this),n=g(this,t);if(n){var r=n.next,o=n.previous;delete e.index[n.index],n.removed=!0,o&&(o.next=r),r&&(r.previous=o),e.first==n&&(e.first=r),e.last==n&&(e.last=o),f?e.size--:this.size--}return!!n},forEach:function(t){for(var e,n=d(this),r=a(t,arguments.length>1?arguments[1]:void 0,3);e=e?e.next:n.first;)for(r(e.value,e.key,this);e&&e.removed;)e=e.previous},has:function(t){return!!g(this,t)}}),i(l.prototype,n?{get:function(t){var e=g(this,t);return e&&e.value},set:function(t,e){return m(this,0===t?0:t,e)}}:{add:function(t){return m(this,t=0===t?0:t,t)}}),f&&r(l.prototype,"size",{get:function(){return d(this).size}}),l},setStrong:function(t,e,n){var r=e+" Iterator",o=v(e),i=v(r);u(t,e,(function(t,e){h(this,{type:r,target:t,state:o(t),kind:e,last:void 0})}),(function(){for(var t=i(this),e=t.kind,n=t.last;n&&n.removed;)n=n.previous;return t.target&&(t.last=n=n?n.next:t.state.first)?"keys"==e?{value:n.key,done:!1}:"values"==e?{value:n.value,done:!1}:{value:[n.key,n.value],done:!1}:(t.target=void 0,{value:void 0,done:!0})}),n?"entries":"values",!n,!0),l(e)}}},function(t,e,n){var r=n(11);t.exports=function(t,e,n){for(var o in e)r(t,o,e[o],n);return t}},function(t,e,n){var r=n(3),o=n(71).trim,i=n(72),a=r.parseInt,s=/^[+-]?0[Xx]/,c=8!==a(i+"08")||22!==a(i+"0x16");t.exports=c?function(t,e){var n=o(String(t));return a(n,e>>>0||(s.test(n)?16:10))}:a},function(t,e,n){"use strict";var r=n(40);n.n(r).a},function(t,e,n){},function(t,e,n){n(17),Promise.all([n.e(0),n.e(30)]).then(n.t.bind(null,153,7))},function(t,e,n){},function(t,e,n){"use strict";var r=n(6),o=n(3),i=n(49),a=n(11),s=n(5),c=n(20),u=n(70),l=n(25),f=n(2),p=n(21),d=n(32).f,h=n(19).f,v=n(7).f,m=n(71).trim,g=o.Number,y=g.prototype,b="Number"==c(p(y)),w=function(t){var e,n,r,o,i,a,s,c,u=l(t,!1);if("string"==typeof u&&u.length>2)if(43===(e=(u=m(u)).charCodeAt(0))||45===e){if(88===(n=u.charCodeAt(2))||120===n)return NaN}else if(48===e){switch(u.charCodeAt(1)){case 66:case 98:r=2,o=49;break;case 79:case 111:r=8,o=55;break;default:return+u}for(a=(i=u.slice(2)).length,s=0;s<a;s++)if((c=i.charCodeAt(s))<48||c>o)return NaN;return parseInt(i,r)}return+u};if(i("Number",!g(" 0o1")||!g("0b1")||g("+0x1"))){for(var _,x=function(t){var e=arguments.length<1?0:t,n=this;return n instanceof x&&(b?f((function(){y.valueOf.call(n)})):"Number"!=c(n))?u(new g(w(e)),n,x):w(e)},S=r?d(g):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),E=0;S.length>E;E++)s(g,_=S[E])&&!s(x,_)&&v(x,_,h(g,_));x.prototype=y,y.constructor=x,a(o,"Number",x)}},function(t,e,n){"use strict";var r=n(41);n.n(r).a},function(t,e,n){"use strict";var r=n(42);n.n(r).a},function(t,e,n){"use strict";n.r(e);n(18),n(46),n(34),n(17),n(61),n(65),n(95);function r(t,e,n,r,o,i,a){try{var s=t[i](a),c=s.value}catch(t){return void n(t)}s.done?e(c):Promise.resolve(c).then(r,o)}function o(t){return function(){var e=this,n=arguments;return new Promise((function(o,i){var a=t.apply(e,n);function s(t){r(a,o,i,s,c,"next",t)}function c(t){r(a,o,i,s,c,"throw",t)}s(void 0)}))}}
 /*!
@@ -10,4 +10,4 @@
   * vue-router v3.1.6
   * (c) 2020 Evan You
   * @license MIT
-  */function Io(t){return Object.prototype.toString.call(t).indexOf("Error")>-1}function Mo(t,e){return e instanceof t||e&&(e.name===t.name||e._name===t._name)}function Do(t,e){for(var n in e)t[n]=e[n];return t}var No={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(t,e){var n=e.props,r=e.children,o=e.parent,i=e.data;i.routerView=!0;for(var a=o.$createElement,s=n.name,c=o.$route,u=o._routerViewCache||(o._routerViewCache={}),l=0,f=!1;o&&o._routerRoot!==o;){var p=o.$vnode?o.$vnode.data:{};p.routerView&&l++,p.keepAlive&&o._directInactive&&o._inactive&&(f=!0),o=o.$parent}if(i.routerViewDepth=l,f){var d=u[s],h=d&&d.component;return h?(d.configProps&&Uo(h,i,d.route,d.configProps),a(h,i,r)):a()}var v=c.matched[l],m=v&&v.components[s];if(!v||!m)return u[s]=null,a();u[s]={component:m},i.registerRouteInstance=function(t,e){var n=v.instances[s];(e&&n!==t||!e&&n===t)&&(v.instances[s]=e)},(i.hook||(i.hook={})).prepatch=function(t,e){v.instances[s]=e.componentInstance},i.hook.init=function(t){t.data.keepAlive&&t.componentInstance&&t.componentInstance!==v.instances[s]&&(v.instances[s]=t.componentInstance)};var g=v.props&&v.props[s];return g&&(Do(u[s],{route:c,configProps:g}),Uo(m,i,c,g)),a(m,i,r)}};function Uo(t,e,n,r){var o=e.props=function(t,e){switch(typeof e){case"undefined":return;case"object":return e;case"function":return e(t);case"boolean":return e?t.params:void 0;default:0}}(n,r);if(o){o=e.props=Do({},o);var i=e.attrs=e.attrs||{};for(var a in o)t.props&&a in t.props||(i[a]=o[a],delete o[a])}}var Bo=/[!'()*]/g,Fo=function(t){return"%"+t.charCodeAt(0).toString(16)},Wo=/%2C/g,Ho=function(t){return encodeURIComponent(t).replace(Bo,Fo).replace(Wo,",")},Vo=decodeURIComponent;function zo(t){var e={};return(t=t.trim().replace(/^(\?|#|&)/,""))?(t.split("&").forEach((function(t){var n=t.replace(/\+/g," ").split("="),r=Vo(n.shift()),o=n.length>0?Vo(n.join("=")):null;void 0===e[r]?e[r]=o:Array.isArray(e[r])?e[r].push(o):e[r]=[e[r],o]})),e):e}function Go(t){var e=t?Object.keys(t).map((function(e){var n=t[e];if(void 0===n)return"";if(null===n)return Ho(e);if(Array.isArray(n)){var r=[];return n.forEach((function(t){void 0!==t&&(null===t?r.push(Ho(e)):r.push(Ho(e)+"="+Ho(t)))})),r.join("&")}return Ho(e)+"="+Ho(n)})).filter((function(t){return t.length>0})).join("&"):null;return e?"?"+e:""}var qo=/\/?$/;function Zo(t,e,n,r){var o=r&&r.options.stringifyQuery,i=e.query||{};try{i=Ko(i)}catch(t){}var a={name:e.name||t&&t.name,meta:t&&t.meta||{},path:e.path||"/",hash:e.hash||"",query:i,params:e.params||{},fullPath:Jo(e,o),matched:t?Yo(t):[]};return n&&(a.redirectedFrom=Jo(n,o)),Object.freeze(a)}function Ko(t){if(Array.isArray(t))return t.map(Ko);if(t&&"object"==typeof t){var e={};for(var n in t)e[n]=Ko(t[n]);return e}return t}var Xo=Zo(null,{path:"/"});function Yo(t){for(var e=[];t;)e.unshift(t),t=t.parent;return e}function Jo(t,e){var n=t.path,r=t.query;void 0===r&&(r={});var o=t.hash;return void 0===o&&(o=""),(n||"/")+(e||Go)(r)+o}function Qo(t,e){return e===Xo?t===e:!!e&&(t.path&&e.path?t.path.replace(qo,"")===e.path.replace(qo,"")&&t.hash===e.hash&&ti(t.query,e.query):!(!t.name||!e.name)&&(t.name===e.name&&t.hash===e.hash&&ti(t.query,e.query)&&ti(t.params,e.params)))}function ti(t,e){if(void 0===t&&(t={}),void 0===e&&(e={}),!t||!e)return t===e;var n=Object.keys(t),r=Object.keys(e);return n.length===r.length&&n.every((function(n){var r=t[n],o=e[n];return"object"==typeof r&&"object"==typeof o?ti(r,o):String(r)===String(o)}))}function ei(t,e,n){var r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;var o=e.split("/");n&&o[o.length-1]||o.pop();for(var i=t.replace(/^\//,"").split("/"),a=0;a<i.length;a++){var s=i[a];".."===s?o.pop():"."!==s&&o.push(s)}return""!==o[0]&&o.unshift(""),o.join("/")}function ni(t){return t.replace(/\/\//g,"/")}var ri=Array.isArray||function(t){return"[object Array]"==Object.prototype.toString.call(t)},oi=yi,ii=li,ai=function(t,e){return pi(li(t,e))},si=pi,ci=gi,ui=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function li(t,e){for(var n,r=[],o=0,i=0,a="",s=e&&e.delimiter||"/";null!=(n=ui.exec(t));){var c=n[0],u=n[1],l=n.index;if(a+=t.slice(i,l),i=l+c.length,u)a+=u[1];else{var f=t[i],p=n[2],d=n[3],h=n[4],v=n[5],m=n[6],g=n[7];a&&(r.push(a),a="");var y=null!=p&&null!=f&&f!==p,b="+"===m||"*"===m,w="?"===m||"*"===m,_=n[2]||s,x=h||v;r.push({name:d||o++,prefix:p||"",delimiter:_,optional:w,repeat:b,partial:y,asterisk:!!g,pattern:x?hi(x):g?".*":"[^"+di(_)+"]+?"})}}return i<t.length&&(a+=t.substr(i)),a&&r.push(a),r}function fi(t){return encodeURI(t).replace(/[\/?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()}))}function pi(t){for(var e=new Array(t.length),n=0;n<t.length;n++)"object"==typeof t[n]&&(e[n]=new RegExp("^(?:"+t[n].pattern+")$"));return function(n,r){for(var o="",i=n||{},a=(r||{}).pretty?fi:encodeURIComponent,s=0;s<t.length;s++){var c=t[s];if("string"!=typeof c){var u,l=i[c.name];if(null==l){if(c.optional){c.partial&&(o+=c.prefix);continue}throw new TypeError('Expected "'+c.name+'" to be defined')}if(ri(l)){if(!c.repeat)throw new TypeError('Expected "'+c.name+'" to not repeat, but received `'+JSON.stringify(l)+"`");if(0===l.length){if(c.optional)continue;throw new TypeError('Expected "'+c.name+'" to not be empty')}for(var f=0;f<l.length;f++){if(u=a(l[f]),!e[s].test(u))throw new TypeError('Expected all "'+c.name+'" to match "'+c.pattern+'", but received `'+JSON.stringify(u)+"`");o+=(0===f?c.prefix:c.delimiter)+u}}else{if(u=c.asterisk?encodeURI(l).replace(/[?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()})):a(l),!e[s].test(u))throw new TypeError('Expected "'+c.name+'" to match "'+c.pattern+'", but received "'+u+'"');o+=c.prefix+u}}else o+=c}return o}}function di(t){return t.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function hi(t){return t.replace(/([=!:$\/()])/g,"\\$1")}function vi(t,e){return t.keys=e,t}function mi(t){return t.sensitive?"":"i"}function gi(t,e,n){ri(e)||(n=e||n,e=[]);for(var r=(n=n||{}).strict,o=!1!==n.end,i="",a=0;a<t.length;a++){var s=t[a];if("string"==typeof s)i+=di(s);else{var c=di(s.prefix),u="(?:"+s.pattern+")";e.push(s),s.repeat&&(u+="(?:"+c+u+")*"),i+=u=s.optional?s.partial?c+"("+u+")?":"(?:"+c+"("+u+"))?":c+"("+u+")"}}var l=di(n.delimiter||"/"),f=i.slice(-l.length)===l;return r||(i=(f?i.slice(0,-l.length):i)+"(?:"+l+"(?=$))?"),i+=o?"$":r&&f?"":"(?="+l+"|$)",vi(new RegExp("^"+i,mi(n)),e)}function yi(t,e,n){return ri(e)||(n=e||n,e=[]),n=n||{},t instanceof RegExp?function(t,e){var n=t.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)e.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return vi(t,e)}(t,e):ri(t)?function(t,e,n){for(var r=[],o=0;o<t.length;o++)r.push(yi(t[o],e,n).source);return vi(new RegExp("(?:"+r.join("|")+")",mi(n)),e)}(t,e,n):function(t,e,n){return gi(li(t,n),e,n)}(t,e,n)}oi.parse=ii,oi.compile=ai,oi.tokensToFunction=si,oi.tokensToRegExp=ci;var bi=Object.create(null);function wi(t,e,n){e=e||{};try{var r=bi[t]||(bi[t]=oi.compile(t));return"string"==typeof e.pathMatch&&(e[0]=e.pathMatch),r(e,{pretty:!0})}catch(t){return""}finally{delete e[0]}}function _i(t,e,n,r){var o="string"==typeof t?{path:t}:t;if(o._normalized)return o;if(o.name){var i=(o=Do({},t)).params;return i&&"object"==typeof i&&(o.params=Do({},i)),o}if(!o.path&&o.params&&e){(o=Do({},o))._normalized=!0;var a=Do(Do({},e.params),o.params);if(e.name)o.name=e.name,o.params=a;else if(e.matched.length){var s=e.matched[e.matched.length-1].path;o.path=wi(s,a,e.path)}else 0;return o}var c=function(t){var e="",n="",r=t.indexOf("#");r>=0&&(e=t.slice(r),t=t.slice(0,r));var o=t.indexOf("?");return o>=0&&(n=t.slice(o+1),t=t.slice(0,o)),{path:t,query:n,hash:e}}(o.path||""),u=e&&e.path||"/",l=c.path?ei(c.path,u,n||o.append):u,f=function(t,e,n){void 0===e&&(e={});var r,o=n||zo;try{r=o(t||"")}catch(t){r={}}for(var i in e)r[i]=e[i];return r}(c.query,o.query,r&&r.options.parseQuery),p=o.hash||c.hash;return p&&"#"!==p.charAt(0)&&(p="#"+p),{_normalized:!0,path:l,query:f,hash:p}}var xi,Si=function(){},Ei={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},exact:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,event:{type:[String,Array],default:"click"}},render:function(t){var e=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),i=o.location,a=o.route,s=o.href,c={},u=n.options.linkActiveClass,l=n.options.linkExactActiveClass,f=null==u?"router-link-active":u,p=null==l?"router-link-exact-active":l,d=null==this.activeClass?f:this.activeClass,h=null==this.exactActiveClass?p:this.exactActiveClass,v=a.redirectedFrom?Zo(null,_i(a.redirectedFrom),null,n):a;c[h]=Qo(r,v),c[d]=this.exact?c[h]:function(t,e){return 0===t.path.replace(qo,"/").indexOf(e.path.replace(qo,"/"))&&(!e.hash||t.hash===e.hash)&&function(t,e){for(var n in e)if(!(n in t))return!1;return!0}(t.query,e.query)}(r,v);var m=function(t){Oi(t)&&(e.replace?n.replace(i,Si):n.push(i,Si))},g={click:Oi};Array.isArray(this.event)?this.event.forEach((function(t){g[t]=m})):g[this.event]=m;var y={class:c},b=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:s,route:a,navigate:m,isActive:c[d],isExactActive:c[h]});if(b){if(1===b.length)return b[0];if(b.length>1||!b.length)return 0===b.length?t():t("span",{},b)}if("a"===this.tag)y.on=g,y.attrs={href:s};else{var w=function t(e){var n;if(e)for(var r=0;r<e.length;r++){if("a"===(n=e[r]).tag)return n;if(n.children&&(n=t(n.children)))return n}}(this.$slots.default);if(w){w.isStatic=!1;var _=w.data=Do({},w.data);for(var x in _.on=_.on||{},_.on){var S=_.on[x];x in g&&(_.on[x]=Array.isArray(S)?S:[S])}for(var E in g)E in _.on?_.on[E].push(g[E]):_.on[E]=m;(w.data.attrs=Do({},w.data.attrs)).href=s}else y.on=g}return t(this.tag,y,this.$slots.default)}};function Oi(t){if(!(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||t.defaultPrevented||void 0!==t.button&&0!==t.button)){if(t.currentTarget&&t.currentTarget.getAttribute){var e=t.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(e))return}return t.preventDefault&&t.preventDefault(),!0}}var ki="undefined"!=typeof window;function Ci(t,e,n,r){var o=e||[],i=n||Object.create(null),a=r||Object.create(null);t.forEach((function(t){!function t(e,n,r,o,i,a){var s=o.path,c=o.name;0;var u=o.pathToRegexpOptions||{},l=function(t,e,n){n||(t=t.replace(/\/$/,""));if("/"===t[0])return t;if(null==e)return t;return ni(e.path+"/"+t)}(s,i,u.strict);"boolean"==typeof o.caseSensitive&&(u.sensitive=o.caseSensitive);var f={path:l,regex:Ai(l,u),components:o.components||{default:o.component},instances:{},name:c,parent:i,matchAs:a,redirect:o.redirect,beforeEnter:o.beforeEnter,meta:o.meta||{},props:null==o.props?{}:o.components?o.props:{default:o.props}};o.children&&o.children.forEach((function(o){var i=a?ni(a+"/"+o.path):void 0;t(e,n,r,o,f,i)}));n[f.path]||(e.push(f.path),n[f.path]=f);if(void 0!==o.alias)for(var p=Array.isArray(o.alias)?o.alias:[o.alias],d=0;d<p.length;++d){0;var h={path:p[d],children:o.children};t(e,n,r,h,i,f.path||"/")}c&&(r[c]||(r[c]=f))}(o,i,a,t)}));for(var s=0,c=o.length;s<c;s++)"*"===o[s]&&(o.push(o.splice(s,1)[0]),c--,s--);return{pathList:o,pathMap:i,nameMap:a}}function Ai(t,e){return oi(t,[],e)}function Ti(t,e){var n=Ci(t),r=n.pathList,o=n.pathMap,i=n.nameMap;function a(t,n,a){var s=_i(t,n,!1,e),u=s.name;if(u){var l=i[u];if(!l)return c(null,s);var f=l.regex.keys.filter((function(t){return!t.optional})).map((function(t){return t.name}));if("object"!=typeof s.params&&(s.params={}),n&&"object"==typeof n.params)for(var p in n.params)!(p in s.params)&&f.indexOf(p)>-1&&(s.params[p]=n.params[p]);return s.path=wi(l.path,s.params),c(l,s,a)}if(s.path){s.params={};for(var d=0;d<r.length;d++){var h=r[d],v=o[h];if($i(v.regex,s.path,s.params))return c(v,s,a)}}return c(null,s)}function s(t,n){var r=t.redirect,o="function"==typeof r?r(Zo(t,n,null,e)):r;if("string"==typeof o&&(o={path:o}),!o||"object"!=typeof o)return c(null,n);var s=o,u=s.name,l=s.path,f=n.query,p=n.hash,d=n.params;if(f=s.hasOwnProperty("query")?s.query:f,p=s.hasOwnProperty("hash")?s.hash:p,d=s.hasOwnProperty("params")?s.params:d,u){i[u];return a({_normalized:!0,name:u,query:f,hash:p,params:d},void 0,n)}if(l){var h=function(t,e){return ei(t,e.parent?e.parent.path:"/",!0)}(l,t);return a({_normalized:!0,path:wi(h,d),query:f,hash:p},void 0,n)}return c(null,n)}function c(t,n,r){return t&&t.redirect?s(t,r||n):t&&t.matchAs?function(t,e,n){var r=a({_normalized:!0,path:wi(n,e.params)});if(r){var o=r.matched,i=o[o.length-1];return e.params=r.params,c(i,e)}return c(null,e)}(0,n,t.matchAs):Zo(t,n,r,e)}return{match:a,addRoutes:function(t){Ci(t,r,o,i)}}}function $i(t,e,n){var r=e.match(t);if(!r)return!1;if(!n)return!0;for(var o=1,i=r.length;o<i;++o){var a=t.keys[o-1],s="string"==typeof r[o]?decodeURIComponent(r[o]):r[o];a&&(n[a.name||"pathMatch"]=s)}return!0}var ji=ki&&window.performance&&window.performance.now?window.performance:Date;function Pi(){return ji.now().toFixed(3)}var Li=Pi();function Ri(){return Li}function Ii(t){return Li=t}var Mi=Object.create(null);function Di(){var t=window.location.protocol+"//"+window.location.host,e=window.location.href.replace(t,""),n=Do({},window.history.state);n.key=Ri(),window.history.replaceState(n,"",e),window.addEventListener("popstate",(function(t){Ui(),t.state&&t.state.key&&Ii(t.state.key)}))}function Ni(t,e,n,r){if(t.app){var o=t.options.scrollBehavior;o&&t.app.$nextTick((function(){var i=function(){var t=Ri();if(t)return Mi[t]}(),a=o.call(t,e,n,r?i:null);a&&("function"==typeof a.then?a.then((function(t){Vi(t,i)})).catch((function(t){0})):Vi(a,i))}))}}function Ui(){var t=Ri();t&&(Mi[t]={x:window.pageXOffset,y:window.pageYOffset})}function Bi(t){return Wi(t.x)||Wi(t.y)}function Fi(t){return{x:Wi(t.x)?t.x:window.pageXOffset,y:Wi(t.y)?t.y:window.pageYOffset}}function Wi(t){return"number"==typeof t}var Hi=/^#\d/;function Vi(t,e){var n,r="object"==typeof t;if(r&&"string"==typeof t.selector){var o=Hi.test(t.selector)?document.getElementById(t.selector.slice(1)):document.querySelector(t.selector);if(o){var i=t.offset&&"object"==typeof t.offset?t.offset:{};e=function(t,e){var n=document.documentElement.getBoundingClientRect(),r=t.getBoundingClientRect();return{x:r.left-n.left-e.x,y:r.top-n.top-e.y}}(o,i={x:Wi((n=i).x)?n.x:0,y:Wi(n.y)?n.y:0})}else Bi(t)&&(e=Fi(t))}else r&&Bi(t)&&(e=Fi(t));e&&window.scrollTo(e.x,e.y)}var zi,Gi=ki&&((-1===(zi=window.navigator.userAgent).indexOf("Android 2.")&&-1===zi.indexOf("Android 4.0")||-1===zi.indexOf("Mobile Safari")||-1!==zi.indexOf("Chrome")||-1!==zi.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history);function qi(t,e){Ui();var n=window.history;try{if(e){var r=Do({},n.state);r.key=Ri(),n.replaceState(r,"",t)}else n.pushState({key:Ii(Pi())},"",t)}catch(n){window.location[e?"replace":"assign"](t)}}function Zi(t){qi(t,!0)}function Ki(t,e,n){var r=function(o){o>=t.length?n():t[o]?e(t[o],(function(){r(o+1)})):r(o+1)};r(0)}function Xi(t){return function(e,n,r){var o=!1,i=0,a=null;Yi(t,(function(t,e,n,s){if("function"==typeof t&&void 0===t.cid){o=!0,i++;var c,u=ta((function(e){var o;((o=e).__esModule||Qi&&"Module"===o[Symbol.toStringTag])&&(e=e.default),t.resolved="function"==typeof e?e:xi.extend(e),n.components[s]=e,--i<=0&&r()})),l=ta((function(t){var e="Failed to resolve async component "+s+": "+t;a||(a=Io(t)?t:new Error(e),r(a))}));try{c=t(u,l)}catch(t){l(t)}if(c)if("function"==typeof c.then)c.then(u,l);else{var f=c.component;f&&"function"==typeof f.then&&f.then(u,l)}}})),o||r()}}function Yi(t,e){return Ji(t.map((function(t){return Object.keys(t.components).map((function(n){return e(t.components[n],t.instances[n],t,n)}))})))}function Ji(t){return Array.prototype.concat.apply([],t)}var Qi="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function ta(t){var e=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!e)return e=!0,t.apply(this,n)}}var ea=function(t){function e(e){t.call(this),this.name=this._name="NavigationDuplicated",this.message='Navigating to current location ("'+e.fullPath+'") is not allowed',Object.defineProperty(this,"stack",{value:(new t).stack,writable:!0,configurable:!0})}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e}(Error);ea._name="NavigationDuplicated";var na=function(t,e){this.router=t,this.base=function(t){if(!t)if(ki){var e=document.querySelector("base");t=(t=e&&e.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else t="/";"/"!==t.charAt(0)&&(t="/"+t);return t.replace(/\/$/,"")}(e),this.current=Xo,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[]};function ra(t,e,n,r){var o=Yi(t,(function(t,r,o,i){var a=function(t,e){"function"!=typeof t&&(t=xi.extend(t));return t.options[e]}(t,e);if(a)return Array.isArray(a)?a.map((function(t){return n(t,r,o,i)})):n(a,r,o,i)}));return Ji(r?o.reverse():o)}function oa(t,e){if(e)return function(){return t.apply(e,arguments)}}na.prototype.listen=function(t){this.cb=t},na.prototype.onReady=function(t,e){this.ready?t():(this.readyCbs.push(t),e&&this.readyErrorCbs.push(e))},na.prototype.onError=function(t){this.errorCbs.push(t)},na.prototype.transitionTo=function(t,e,n){var r=this,o=this.router.match(t,this.current);this.confirmTransition(o,(function(){r.updateRoute(o),e&&e(o),r.ensureURL(),r.ready||(r.ready=!0,r.readyCbs.forEach((function(t){t(o)})))}),(function(t){n&&n(t),t&&!r.ready&&(r.ready=!0,r.readyErrorCbs.forEach((function(e){e(t)})))}))},na.prototype.confirmTransition=function(t,e,n){var r=this,o=this.current,i=function(t){!Mo(ea,t)&&Io(t)&&(r.errorCbs.length?r.errorCbs.forEach((function(e){e(t)})):console.error(t)),n&&n(t)};if(Qo(t,o)&&t.matched.length===o.matched.length)return this.ensureURL(),i(new ea(t));var a=function(t,e){var n,r=Math.max(t.length,e.length);for(n=0;n<r&&t[n]===e[n];n++);return{updated:e.slice(0,n),activated:e.slice(n),deactivated:t.slice(n)}}(this.current.matched,t.matched),s=a.updated,c=a.deactivated,u=a.activated,l=[].concat(function(t){return ra(t,"beforeRouteLeave",oa,!0)}(c),this.router.beforeHooks,function(t){return ra(t,"beforeRouteUpdate",oa)}(s),u.map((function(t){return t.beforeEnter})),Xi(u));this.pending=t;var f=function(e,n){if(r.pending!==t)return i();try{e(t,o,(function(t){!1===t||Io(t)?(r.ensureURL(!0),i(t)):"string"==typeof t||"object"==typeof t&&("string"==typeof t.path||"string"==typeof t.name)?(i(),"object"==typeof t&&t.replace?r.replace(t):r.push(t)):n(t)}))}catch(t){i(t)}};Ki(l,f,(function(){var n=[];Ki(function(t,e,n){return ra(t,"beforeRouteEnter",(function(t,r,o,i){return function(t,e,n,r,o){return function(i,a,s){return t(i,a,(function(t){"function"==typeof t&&r.push((function(){!function t(e,n,r,o){n[r]&&!n[r]._isBeingDestroyed?e(n[r]):o()&&setTimeout((function(){t(e,n,r,o)}),16)}(t,e.instances,n,o)})),s(t)}))}}(t,o,i,e,n)}))}(u,n,(function(){return r.current===t})).concat(r.router.resolveHooks),f,(function(){if(r.pending!==t)return i();r.pending=null,e(t),r.router.app&&r.router.app.$nextTick((function(){n.forEach((function(t){t()}))}))}))}))},na.prototype.updateRoute=function(t){var e=this.current;this.current=t,this.cb&&this.cb(t),this.router.afterHooks.forEach((function(n){n&&n(t,e)}))};var ia=function(t){function e(e,n){var r=this;t.call(this,e,n);var o=e.options.scrollBehavior,i=Gi&&o;i&&Di();var a=aa(this.base);window.addEventListener("popstate",(function(t){var n=r.current,o=aa(r.base);r.current===Xo&&o===a||r.transitionTo(o,(function(t){i&&Ni(e,t,n,!0)}))}))}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.go=function(t){window.history.go(t)},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){qi(ni(r.base+t.fullPath)),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Zi(ni(r.base+t.fullPath)),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.ensureURL=function(t){if(aa(this.base)!==this.current.fullPath){var e=ni(this.base+this.current.fullPath);t?qi(e):Zi(e)}},e.prototype.getCurrentLocation=function(){return aa(this.base)},e}(na);function aa(t){var e=decodeURI(window.location.pathname);return t&&0===e.indexOf(t)&&(e=e.slice(t.length)),(e||"/")+window.location.search+window.location.hash}var sa=function(t){function e(e,n,r){t.call(this,e,n),r&&function(t){var e=aa(t);if(!/^\/#/.test(e))return window.location.replace(ni(t+"/#"+e)),!0}(this.base)||ca()}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this,e=this.router.options.scrollBehavior,n=Gi&&e;n&&Di(),window.addEventListener(Gi?"popstate":"hashchange",(function(){var e=t.current;ca()&&t.transitionTo(ua(),(function(r){n&&Ni(t.router,r,e,!0),Gi||pa(r.fullPath)}))}))},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){fa(t.fullPath),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){pa(t.fullPath),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.go=function(t){window.history.go(t)},e.prototype.ensureURL=function(t){var e=this.current.fullPath;ua()!==e&&(t?fa(e):pa(e))},e.prototype.getCurrentLocation=function(){return ua()},e}(na);function ca(){var t=ua();return"/"===t.charAt(0)||(pa("/"+t),!1)}function ua(){var t=window.location.href,e=t.indexOf("#");if(e<0)return"";var n=(t=t.slice(e+1)).indexOf("?");if(n<0){var r=t.indexOf("#");t=r>-1?decodeURI(t.slice(0,r))+t.slice(r):decodeURI(t)}else t=decodeURI(t.slice(0,n))+t.slice(n);return t}function la(t){var e=window.location.href,n=e.indexOf("#");return(n>=0?e.slice(0,n):e)+"#"+t}function fa(t){Gi?qi(la(t)):window.location.hash=t}function pa(t){Gi?Zi(la(t)):window.location.replace(la(t))}var da=function(t){function e(e,n){t.call(this,e,n),this.stack=[],this.index=-1}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.push=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index+1).concat(t),r.index++,e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index).concat(t),e&&e(t)}),n)},e.prototype.go=function(t){var e=this,n=this.index+t;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){e.index=n,e.updateRoute(r)}),(function(t){Mo(ea,t)&&(e.index=n)}))}},e.prototype.getCurrentLocation=function(){var t=this.stack[this.stack.length-1];return t?t.fullPath:"/"},e.prototype.ensureURL=function(){},e}(na),ha=function(t){void 0===t&&(t={}),this.app=null,this.apps=[],this.options=t,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Ti(t.routes||[],this);var e=t.mode||"hash";switch(this.fallback="history"===e&&!Gi&&!1!==t.fallback,this.fallback&&(e="hash"),ki||(e="abstract"),this.mode=e,e){case"history":this.history=new ia(this,t.base);break;case"hash":this.history=new sa(this,t.base,this.fallback);break;case"abstract":this.history=new da(this,t.base);break;default:0}},va={currentRoute:{configurable:!0}};function ma(t,e){return t.push(e),function(){var n=t.indexOf(e);n>-1&&t.splice(n,1)}}ha.prototype.match=function(t,e,n){return this.matcher.match(t,e,n)},va.currentRoute.get=function(){return this.history&&this.history.current},ha.prototype.init=function(t){var e=this;if(this.apps.push(t),t.$once("hook:destroyed",(function(){var n=e.apps.indexOf(t);n>-1&&e.apps.splice(n,1),e.app===t&&(e.app=e.apps[0]||null)})),!this.app){this.app=t;var n=this.history;if(n instanceof ia)n.transitionTo(n.getCurrentLocation());else if(n instanceof sa){var r=function(){n.setupListeners()};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(t){e.apps.forEach((function(e){e._route=t}))}))}},ha.prototype.beforeEach=function(t){return ma(this.beforeHooks,t)},ha.prototype.beforeResolve=function(t){return ma(this.resolveHooks,t)},ha.prototype.afterEach=function(t){return ma(this.afterHooks,t)},ha.prototype.onReady=function(t,e){this.history.onReady(t,e)},ha.prototype.onError=function(t){this.history.onError(t)},ha.prototype.push=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.push(t,e,n)}));this.history.push(t,e,n)},ha.prototype.replace=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.replace(t,e,n)}));this.history.replace(t,e,n)},ha.prototype.go=function(t){this.history.go(t)},ha.prototype.back=function(){this.go(-1)},ha.prototype.forward=function(){this.go(1)},ha.prototype.getMatchedComponents=function(t){var e=t?t.matched?t:this.resolve(t).route:this.currentRoute;return e?[].concat.apply([],e.matched.map((function(t){return Object.keys(t.components).map((function(e){return t.components[e]}))}))):[]},ha.prototype.resolve=function(t,e,n){var r=_i(t,e=e||this.history.current,n,this),o=this.match(r,e),i=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(t,e,n){var r="hash"===n?"#"+e:e;return t?ni(t+"/"+r):r}(this.history.base,i,this.mode),normalizedTo:r,resolved:o}},ha.prototype.addRoutes=function(t){this.matcher.addRoutes(t),this.history.current!==Xo&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(ha.prototype,va),ha.install=function t(e){if(!t.installed||xi!==e){t.installed=!0,xi=e;var n=function(t){return void 0!==t},r=function(t,e){var r=t.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(t,e)};e.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),e.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(e.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(e.prototype,"$route",{get:function(){return this._routerRoot._route}}),e.component("RouterView",No),e.component("RouterLink",Ei);var o=e.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},ha.version="3.1.6",ki&&window.Vue&&window.Vue.use(ha);var ga=ha;n(50),n(127),n(129),n(130),n(131),n(69),n(132),n(51);function ya(t){t.locales&&Object.keys(t.locales).forEach((function(e){t.locales[e].path=e})),Object.freeze(t)}n(108),n(133),n(22),n(110),n(47);function ba(t){return(ba="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var wa=n(43),_a={NotFound:function(){return n.e(23).then(n.bind(null,250))},Layout:function(){return Promise.all([n.e(0),n.e(2)]).then(n.bind(null,249))}},xa={"v-64a170d8":function(){return n.e(24).then(n.bind(null,253))},"v-078c5be8":function(){return n.e(25).then(n.bind(null,254))},"v-5655e588":function(){return n.e(11).then(n.bind(null,255))},"v-4ef07d88":function(){return n.e(12).then(n.bind(null,256))},"v-64577bce":function(){return n.e(6).then(n.bind(null,257))},"v-3f6f84e0":function(){return n.e(5).then(n.bind(null,258))},"v-2524cb94":function(){return n.e(15).then(n.bind(null,259))},"v-56b3c5a0":function(){return n.e(16).then(n.bind(null,260))},"v-68f30830":function(){return n.e(13).then(n.bind(null,261))},"v-b07002f8":function(){return n.e(8).then(n.bind(null,262))},"v-a06af470":function(){return n.e(3).then(n.bind(null,263))},"v-27757210":function(){return n.e(4).then(n.bind(null,264))},"v-20dff7a8":function(){return n.e(14).then(n.bind(null,265))},"v-1633bbb4":function(){return n.e(26).then(n.bind(null,266))},"v-70e651e8":function(){return n.e(17).then(n.bind(null,267))},"v-45ee3628":function(){return n.e(27).then(n.bind(null,268))},"v-a42e43b0":function(){return n.e(28).then(n.bind(null,269))},"v-22582db0":function(){return n.e(7).then(n.bind(null,270))},"v-39635cd4":function(){return n.e(18).then(n.bind(null,271))},"v-7ded8e00":function(){return n.e(19).then(n.bind(null,272))},"v-06f2dc82":function(){return n.e(20).then(n.bind(null,273))},"v-9fe692c0":function(){return n.e(21).then(n.bind(null,274))},"v-b2ccea3a":function(){return n.e(29).then(n.bind(null,275))}};function Sa(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var Ea=/-(\w)/g,Oa=Sa((function(t){return t.replace(Ea,(function(t,e){return e?e.toUpperCase():""}))})),ka=/\B([A-Z])/g,Ca=Sa((function(t){return t.replace(ka,"-$1").toLowerCase()})),Aa=Sa((function(t){return t.charAt(0).toUpperCase()+t.slice(1)}));function Ta(t,e){if(e)return t(e)?t(e):e.includes("-")?t(Aa(Oa(e))):t(Aa(e))||t(Ca(e))}var $a=Object.assign({},_a,xa),ja=function(t){return $a[t]},Pa=function(t){return xa[t]},La=function(t){return _a[t]},Ra=function(t){return Ro.component(t)};function Ia(t){return Ta(Pa,t)}function Ma(t){return Ta(La,t)}function Da(t){return Ta(ja,t)}function Na(t){return Ta(Ra,t)}function Ua(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return Promise.all(e.filter((function(t){return t})).map(function(){var t=o(regeneratorRuntime.mark((function t(e){var n;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Na(e)||!Da(e)){t.next=5;break}return t.next=3,Da(e)();case 3:n=t.sent,Ro.component(e,n.default);case 5:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()))}function Ba(t,e){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[t]=e)}n(100),n(102),n(67),n(136);var Fa={created:function(){this.$ssrContext&&(this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.description=this.$page.description||this.$description)},mounted:function(){this.currentMetaTags=new Set,this.updateMeta()},methods:{updateMeta:function(){var t=this;document.title=this.$title,document.documentElement.lang=this.$lang;var e=this.$page.frontmatter.meta||[],n=e.slice(0);0===e.filter((function(t){return"description"===t.name})).length&&n.push({name:"description",content:this.$description});var r=document.querySelectorAll('meta[name="description"]');r.length&&r.forEach((function(e){return t.currentMetaTags.add(e)})),this.currentMetaTags=new Set(Wa(n,this.currentMetaTags))}},watch:{$page:function(){this.updateMeta()}},beforeDestroy:function(){Wa(null,this.currentMetaTags)}};function Wa(t,e){if(e&&Object(wa.a)(e).forEach((function(t){document.head.removeChild(t)})),t)return t.map((function(t){var e=document.createElement("meta");return Object.keys(t).forEach((function(n){e.setAttribute(n,t[n])})),document.head.appendChild(e),e}))}n(106);var Ha=n(44),Va=n.n(Ha),za={mounted:function(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:Va()((function(){this.setActiveHash()}),300),setActiveHash:function(){for(var t=this,e=[].slice.call(document.querySelectorAll(".sidebar-link")),n=[].slice.call(document.querySelectorAll(".header-anchor")).filter((function(t){return e.some((function(e){return e.hash===t.hash}))})),r=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),o=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),i=window.innerHeight+r,a=0;a<n.length;a++){var s=n[a],c=n[a+1],u=0===a&&0===r||r>=s.parentElement.offsetTop+10&&(!c||r<c.parentElement.offsetTop-10),l=decodeURIComponent(this.$route.hash);if(u&&l!==decodeURIComponent(s.hash)){var f=s;if(i===o)for(var p=a+1;p<n.length;p++)if(l===decodeURIComponent(n[p].hash))return;return this.$vuepress.$set("disableScrollBehavior",!0),void this.$router.replace(decodeURIComponent(f.hash),(function(){t.$nextTick((function(){t.$vuepress.$set("disableScrollBehavior",!1)}))}))}}}},beforeDestroy:function(){window.removeEventListener("scroll",this.onScroll)}},Ga=n(45),qa=n.n(Ga),Za={mounted:function(){var t=this;qa.a.configure({showSpinner:!1}),this.$router.beforeEach((function(t,e,n){t.path===e.path||Ro.component(t.name)||qa.a.start(),n()})),this.$router.afterEach((function(){qa.a.done(),t.isSidebarOpen=!1}))}};n(105);function Ka(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function Xa(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}n(117),n(118);var Ya={props:{parent:Object,code:String,options:{align:String,color:String,backgroundTransition:Boolean,backgroundColor:String,successText:String,staticIcon:Boolean}},data:function(){return{success:!1,originalBackground:null,originalTransition:null}},computed:{alignStyle:function(){var t={};return t[this.options.align]="7.5px",t},iconClass:function(){return this.options.staticIcon?"":"hover"}},mounted:function(){this.originalTransition=this.parent.style.transition,this.originalBackground=this.parent.style.background},beforeDestroy:function(){this.parent.style.transition=this.originalTransition,this.parent.style.background=this.originalBackground},methods:{hexToRgb:function(t){var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null},copyToClipboard:function(t){var e=this;if(navigator.clipboard)navigator.clipboard.writeText(this.code).then((function(){e.setSuccessTransitions()}),(function(){}));else{var n=document.createElement("textarea");document.body.appendChild(n),n.value=this.code,n.select(),document.execCommand("Copy"),n.remove(),this.setSuccessTransitions()}},setSuccessTransitions:function(){var t=this;if(clearTimeout(this.successTimeout),this.options.backgroundTransition){this.parent.style.transition="background 350ms";var e=this.hexToRgb(this.options.backgroundColor);this.parent.style.background="rgba(".concat(e.r,", ").concat(e.g,", ").concat(e.b,", 0.1)")}this.success=!0,this.successTimeout=setTimeout((function(){t.options.backgroundTransition&&(t.parent.style.background=t.originalBackground,t.parent.style.transition=t.originalTransition),t.success=!1}),500)}}},Ja=(n(145),n(10)),Qa=Object(Ja.a)(Ya,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"code-copy"},[n("svg",{class:t.iconClass,style:t.alignStyle,attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},on:{click:t.copyToClipboard}},[n("path",{attrs:{fill:"none",d:"M0 0h24v24H0z"}}),t._v(" "),n("path",{attrs:{fill:t.options.color,d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"}})]),t._v(" "),n("span",{class:t.success?"success":"",style:t.alignStyle},[t._v("\n        "+t._s(t.options.successText)+"\n    ")])])}),[],!1,null,"49140617",null).exports,ts=(n(146),[Fa,za,Za,{updated:function(){this.update()},methods:{update:function(){setTimeout((function(){document.querySelectorAll('div[class*="language-"] pre').forEach((function(t){if(!t.classList.contains("code-copy-added")){var e=new(Ro.extend(Qa));e.options=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Xa(Object(n),!0).forEach((function(e){Ka(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Xa(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},{align:"bottom",color:"#27b1ff",backgroundTransition:!0,backgroundColor:"#0075b8",successText:"Copied!",staticIcon:!1}),e.code=t.innerText,e.parent=t,e.$mount(),t.classList.add("code-copy-added"),t.appendChild(e.$el)}}))}),100)}}}]),es={name:"GlobalLayout",computed:{layout:function(){var t=this.getLayout();return Ba("layout",t),Ro.component(t)}},methods:{getLayout:function(){if(this.$page.path){var t=this.$page.frontmatter.layout;return t&&(this.$vuepress.getLayoutAsyncComponent(t)||this.$vuepress.getVueComponent(t))?t:"Layout"}return"NotFound"}}},ns=Object(Ja.a)(es,(function(){var t=this.$createElement;return(this._self._c||t)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(t,e,n){var r;switch(e){case"components":t[e]||(t[e]={}),Object.assign(t[e],n);break;case"mixins":t[e]||(t[e]=[]),(r=t[e]).push.apply(r,Object(wa.a)(n));break;default:throw new Error("Unknown option name.")}}(ns,"mixins",ts);var rs=[{name:"v-64a170d8",path:"/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-64a170d8").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-078c5be8",path:"/beginner/tutorial1-window/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-078c5be8").then(n)}},{path:"/beginner/tutorial1-window/index.html",redirect:"/beginner/tutorial1-window/"},{name:"v-5655e588",path:"/beginner/tutorial2-swapchain/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-5655e588").then(n)}},{path:"/beginner/tutorial2-swapchain/index.html",redirect:"/beginner/tutorial2-swapchain/"},{name:"v-4ef07d88",path:"/beginner/tutorial3-pipeline/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-4ef07d88").then(n)}},{path:"/beginner/tutorial3-pipeline/index.html",redirect:"/beginner/tutorial3-pipeline/"},{name:"v-64577bce",path:"/beginner/tutorial4-buffer/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-64577bce").then(n)}},{path:"/beginner/tutorial4-buffer/index.html",redirect:"/beginner/tutorial4-buffer/"},{name:"v-3f6f84e0",path:"/beginner/tutorial5-textures/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-3f6f84e0").then(n)}},{path:"/beginner/tutorial5-textures/index.html",redirect:"/beginner/tutorial5-textures/"},{name:"v-2524cb94",path:"/beginner/tutorial6-uniforms/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-2524cb94").then(n)}},{path:"/beginner/tutorial6-uniforms/index.html",redirect:"/beginner/tutorial6-uniforms/"},{name:"v-56b3c5a0",path:"/beginner/tutorial7-instancing/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-56b3c5a0").then(n)}},{path:"/beginner/tutorial7-instancing/index.html",redirect:"/beginner/tutorial7-instancing/"},{name:"v-68f30830",path:"/beginner/tutorial8-depth/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-68f30830").then(n)}},{path:"/beginner/tutorial8-depth/index.html",redirect:"/beginner/tutorial8-depth/"},{name:"v-b07002f8",path:"/beginner/tutorial9-models/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-b07002f8").then(n)}},{path:"/beginner/tutorial9-models/index.html",redirect:"/beginner/tutorial9-models/"},{name:"v-a06af470",path:"/intermediate/tutorial10-lighting/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-a06af470").then(n)}},{path:"/intermediate/tutorial10-lighting/index.html",redirect:"/intermediate/tutorial10-lighting/"},{name:"v-27757210",path:"/intermediate/tutorial11-normals/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-27757210").then(n)}},{path:"/intermediate/tutorial11-normals/index.html",redirect:"/intermediate/tutorial11-normals/"},{name:"v-20dff7a8",path:"/intermediate/tutorial12-camera/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-20dff7a8").then(n)}},{path:"/intermediate/tutorial12-camera/index.html",redirect:"/intermediate/tutorial12-camera/"},{name:"v-1633bbb4",path:"/intermediate/tutorial13-threading/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-1633bbb4").then(n)}},{path:"/intermediate/tutorial13-threading/index.html",redirect:"/intermediate/tutorial13-threading/"},{name:"v-70e651e8",path:"/news/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-70e651e8").then(n)}},{path:"/news/index.html",redirect:"/news/"},{name:"v-45ee3628",path:"/showcase/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-45ee3628").then(n)}},{path:"/showcase/index.html",redirect:"/showcase/"},{name:"v-a42e43b0",path:"/showcase/alignment/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-a42e43b0").then(n)}},{path:"/showcase/alignment/index.html",redirect:"/showcase/alignment/"},{name:"v-22582db0",path:"/showcase/compute/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-22582db0").then(n)}},{path:"/showcase/compute/index.html",redirect:"/showcase/compute/"},{name:"v-39635cd4",path:"/showcase/gifs/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-39635cd4").then(n)}},{path:"/showcase/gifs/index.html",redirect:"/showcase/gifs/"},{name:"v-7ded8e00",path:"/showcase/imgui-demo/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-7ded8e00").then(n)}},{path:"/showcase/imgui-demo/index.html",redirect:"/showcase/imgui-demo/"},{name:"v-06f2dc82",path:"/showcase/pong/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-06f2dc82").then(n)}},{path:"/showcase/pong/index.html",redirect:"/showcase/pong/"},{name:"v-9fe692c0",path:"/showcase/windowless/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-9fe692c0").then(n)}},{path:"/showcase/windowless/index.html",redirect:"/showcase/windowless/"},{name:"v-b2ccea3a",path:"/todo.html",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-b2ccea3a").then(n)}},{path:"*",component:ns}],os={title:"Learn Wgpu",description:"",base:"/learn-wgpu/",pages:[{title:"Introduction",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-15T16:52:25.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Introduction"},{property:"og:type",content:"website"},{property:"og:url",content:"/"},{name:"twitter:title",content:"Introduction"},{name:"twitter:url",content:"/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/",relativePath:"README.md",key:"v-64a170d8",path:"/",headers:[{level:2,title:"What is wgpu?",slug:"what-is-wgpu"},{level:2,title:"Why Rust?",slug:"why-rust"},{level:2,title:"Contribution and Support",slug:"contribution-and-support"},{level:2,title:"Special thanks to these patrons!",slug:"special-thanks-to-these-patrons"}],lastUpdated:"8/15/2021, 4:52:25 PM"},{title:"Dependencies and the window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T14:25:23.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Dependencies and the window"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial1-window/"},{name:"twitter:title",content:"Dependencies and the window"},{name:"twitter:url",content:"/beginner/tutorial1-window/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial1-window/",relativePath:"beginner/tutorial1-window/README.md",key:"v-078c5be8",path:"/beginner/tutorial1-window/",headers:[{level:2,title:"Boring, I know",slug:"boring-i-know"},{level:2,title:"What crates are we using?",slug:"what-crates-are-we-using"},{level:2,title:"The code",slug:"the-code"}],lastUpdated:"8/4/2021, 2:25:23 PM"},{title:"The Swapchain",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-09T22:20:36.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Swapchain"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial2-swapchain/"},{name:"twitter:title",content:"The Swapchain"},{name:"twitter:url",content:"/beginner/tutorial2-swapchain/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial2-swapchain/",relativePath:"beginner/tutorial2-swapchain/README.md",key:"v-5655e588",path:"/beginner/tutorial2-swapchain/",headers:[{level:2,title:"First, some house keeping: State",slug:"first-some-house-keeping-state"},{level:2,title:"State::new()",slug:"state-new"},{level:2,title:"resize()",slug:"resize"},{level:2,title:"input()",slug:"input"},{level:2,title:"update()",slug:"update"},{level:2,title:"render()",slug:"render"},{level:2,title:"Wait, what's going on with RenderPassDescriptor?",slug:"wait-what-s-going-on-with-renderpassdescriptor"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"8/9/2021, 10:20:36 PM"},{title:"The Pipeline",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-10T19:57:07.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Pipeline"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial3-pipeline/"},{name:"twitter:title",content:"The Pipeline"},{name:"twitter:url",content:"/beginner/tutorial3-pipeline/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial3-pipeline/",relativePath:"beginner/tutorial3-pipeline/README.md",key:"v-4ef07d88",path:"/beginner/tutorial3-pipeline/",headers:[{level:2,title:"What's a pipeline?",slug:"what-s-a-pipeline"},{level:2,title:"Wait shaders?",slug:"wait-shaders"},{level:2,title:"Vertex, fragment.. what are those?",slug:"vertex-fragment-what-are-those"},{level:2,title:"WGSL",slug:"wgsl"},{level:2,title:"Writing the shaders",slug:"writing-the-shaders"},{level:2,title:"How do we use the shaders?",slug:"how-do-we-use-the-shaders"},{level:2,title:"Using a pipeline",slug:"using-a-pipeline"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"8/10/2021, 7:57:07 PM"},{title:"Buffers and Indices",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-12T23:50:52.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Buffers and Indices"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial4-buffer/"},{name:"twitter:title",content:"Buffers and Indices"},{name:"twitter:url",content:"/beginner/tutorial4-buffer/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial4-buffer/",relativePath:"beginner/tutorial4-buffer/README.md",key:"v-64577bce",path:"/beginner/tutorial4-buffer/",headers:[{level:2,title:"We're finally talking about them!",slug:"we-re-finally-talking-about-them"},{level:2,title:"What is a buffer?",slug:"what-is-a-buffer"},{level:2,title:"The vertex buffer",slug:"the-vertex-buffer"},{level:2,title:"So what do I do with it?",slug:"so-what-do-i-do-with-it"},{level:2,title:"The index buffer",slug:"the-index-buffer"},{level:2,title:"Color Correction",slug:"color-correction"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"8/12/2021, 11:50:52 PM"},{title:"Textures and bind groups",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T14:25:23.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Textures and bind groups"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial5-textures/"},{name:"twitter:title",content:"Textures and bind groups"},{name:"twitter:url",content:"/beginner/tutorial5-textures/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial5-textures/",relativePath:"beginner/tutorial5-textures/README.md",key:"v-3f6f84e0",path:"/beginner/tutorial5-textures/",headers:[{level:2,title:"Loading an image from a file",slug:"loading-an-image-from-a-file"},{level:2,title:"Getting data into a Texture",slug:"getting-data-into-a-texture"},{level:2,title:"TextureViews and Samplers",slug:"textureviews-and-samplers"},{level:2,title:"The BindGroup",slug:"the-bindgroup"},{level:2,title:"PipelineLayout",slug:"pipelinelayout"},{level:2,title:"A change to the VERTICES",slug:"a-change-to-the-vertices"},{level:2,title:"Shader time",slug:"shader-time"},{level:2,title:"The results",slug:"the-results"},{level:2,title:"Cleaning things up",slug:"cleaning-things-up"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"8/4/2021, 2:25:23 PM"},{title:"Uniform buffers and a 3d camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-06-06T17:30:46.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Uniform buffers and a 3d camera"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial6-uniforms/"},{name:"twitter:title",content:"Uniform buffers and a 3d camera"},{name:"twitter:url",content:"/beginner/tutorial6-uniforms/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial6-uniforms/",relativePath:"beginner/tutorial6-uniforms/README.md",key:"v-2524cb94",path:"/beginner/tutorial6-uniforms/",headers:[{level:2,title:"A perspective camera",slug:"a-perspective-camera"},{level:2,title:"The uniform buffer",slug:"the-uniform-buffer"},{level:2,title:"Uniform buffers and bind groups",slug:"uniform-buffers-and-bind-groups"},{level:2,title:"Using the uniforms in the vertex shader",slug:"using-the-uniforms-in-the-vertex-shader"},{level:2,title:"A controller for our camera",slug:"a-controller-for-our-camera"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"6/6/2021, 5:30:46 PM"},{title:"Instancing",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T13:13:08.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Instancing"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial7-instancing/"},{name:"twitter:title",content:"Instancing"},{name:"twitter:url",content:"/beginner/tutorial7-instancing/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial7-instancing/",relativePath:"beginner/tutorial7-instancing/README.md",key:"v-56b3c5a0",path:"/beginner/tutorial7-instancing/",headers:[{level:2,title:"The Instance Buffer",slug:"the-instance-buffer"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"8/4/2021, 1:13:08 PM"},{title:"The Depth Buffer",frontmatter:{meta:[{property:"article:modified_time",content:"2021-06-08T07:19:51.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Depth Buffer"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial8-depth/"},{name:"twitter:title",content:"The Depth Buffer"},{name:"twitter:url",content:"/beginner/tutorial8-depth/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial8-depth/",relativePath:"beginner/tutorial8-depth/README.md",key:"v-68f30830",path:"/beginner/tutorial8-depth/",headers:[{level:2,title:"Sorting from back to front",slug:"sorting-from-back-to-front"},{level:2,title:"A pixels depth",slug:"a-pixels-depth"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"6/8/2021, 7:19:51 AM"},{title:"Model Loading",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T13:13:08.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Model Loading"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial9-models/"},{name:"twitter:title",content:"Model Loading"},{name:"twitter:url",content:"/beginner/tutorial9-models/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial9-models/",relativePath:"beginner/tutorial9-models/README.md",key:"v-b07002f8",path:"/beginner/tutorial9-models/",headers:[{level:2,title:"Accessing files in the res folder",slug:"accessing-files-in-the-res-folder"},{level:2,title:"Loading models with TOBJ",slug:"loading-models-with-tobj"},{level:2,title:"Rendering a mesh",slug:"rendering-a-mesh"},{level:2,title:"Using the correct textures",slug:"using-the-correct-textures"},{level:2,title:"Rendering the entire model",slug:"rendering-the-entire-model"}],lastUpdated:"8/4/2021, 1:13:08 PM"},{title:"Working with Lights",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T13:06:53.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Working with Lights"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial10-lighting/"},{name:"twitter:title",content:"Working with Lights"},{name:"twitter:url",content:"/intermediate/tutorial10-lighting/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial10-lighting/",relativePath:"intermediate/tutorial10-lighting/README.md",key:"v-a06af470",path:"/intermediate/tutorial10-lighting/",headers:[{level:2,title:"Ray/Path Tracing",slug:"ray-path-tracing"},{level:2,title:"The Blinn-Phong Model",slug:"the-blinn-phong-model"},{level:2,title:"Seeing the light",slug:"seeing-the-light"},{level:2,title:"Ambient Lighting",slug:"ambient-lighting"},{level:2,title:"Diffuse Lighting",slug:"diffuse-lighting"},{level:2,title:"The normal matrix",slug:"the-normal-matrix"},{level:2,title:"Specular Lighting",slug:"specular-lighting"},{level:2,title:"The half direction",slug:"the-half-direction"}],lastUpdated:"8/4/2021, 1:06:53 PM"},{title:"Normal Mapping",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-15T16:44:57.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Normal Mapping"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial11-normals/"},{name:"twitter:title",content:"Normal Mapping"},{name:"twitter:url",content:"/intermediate/tutorial11-normals/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial11-normals/",relativePath:"intermediate/tutorial11-normals/README.md",key:"v-27757210",path:"/intermediate/tutorial11-normals/",headers:[{level:2,title:"Tangent Space to World Space",slug:"tangent-space-to-world-space"},{level:2,title:"The tangent, and the bitangent",slug:"the-tangent-and-the-bitangent"},{level:2,title:"World Space to Tangent Space",slug:"world-space-to-tangent-space"},{level:2,title:"Srgb and normal textures",slug:"srgb-and-normal-textures"},{level:2,title:"Unrelated stuff",slug:"unrelated-stuff"}],lastUpdated:"8/15/2021, 4:44:57 PM"},{title:"A Better Camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T12:17:21.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"A Better Camera"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial12-camera/"},{name:"twitter:title",content:"A Better Camera"},{name:"twitter:url",content:"/intermediate/tutorial12-camera/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial12-camera/",relativePath:"intermediate/tutorial12-camera/README.md",key:"v-20dff7a8",path:"/intermediate/tutorial12-camera/",headers:[{level:2,title:"The Camera",slug:"the-camera"},{level:2,title:"The Projection",slug:"the-projection"},{level:2,title:"Cleaning up main.rs",slug:"cleaning-up-main-rs"}],lastUpdated:"8/4/2021, 12:17:21 PM"},{title:"Multi-threading with Wgpu and Rayon",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T17:44:10.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Multi-threading with Wgpu and Rayon"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial13-threading/"},{name:"twitter:title",content:"Multi-threading with Wgpu and Rayon"},{name:"twitter:url",content:"/intermediate/tutorial13-threading/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial13-threading/",relativePath:"intermediate/tutorial13-threading/README.md",key:"v-1633bbb4",path:"/intermediate/tutorial13-threading/",headers:[{level:2,title:"Parallelizing loading models and textures",slug:"parallelizing-loading-models-and-textures"},{level:2,title:"It's that easy!",slug:"it-s-that-easy"}],lastUpdated:"5/24/2021, 5:44:10 PM"},{title:"News",frontmatter:{meta:[{property:"article:modified_time",content:"2021-07-10T08:04:39.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"News"},{property:"og:type",content:"website"},{property:"og:url",content:"/news/"},{name:"twitter:title",content:"News"},{name:"twitter:url",content:"/news/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/news/",relativePath:"news/README.md",key:"v-70e651e8",path:"/news/",headers:[{level:2,title:"Pong and imgui demos are fixed!",slug:"pong-and-imgui-demos-are-fixed"},{level:2,title:"0.8 and WGSL",slug:"_0-8-and-wgsl"},{level:3,title:"The GLSL shaders have been translated to WGSL",slug:"the-glsl-shaders-have-been-translated-to-wgsl"},{level:3,title:"Shaderc has been removed",slug:"shaderc-has-been-removed"},{level:3,title:"Some of the showcase examples are broken",slug:"some-of-the-showcase-examples-are-broken"},{level:3,title:"Various API changes",slug:"various-api-changes"},{level:2,title:"0.7",slug:"_0-7"},{level:2,title:"November 2020 Cleanup, Content Freeze, and Patreon",slug:"november-2020-cleanup-content-freeze-and-patreon"},{level:2,title:"0.6",slug:"_0-6"},{level:2,title:"Added Pong Showcase",slug:"added-pong-showcase"},{level:2,title:"Normal mapping",slug:"normal-mapping"},{level:2,title:"0.5!",slug:"_0-5"},{level:2,title:"Reworked lighting tutorial",slug:"reworked-lighting-tutorial"},{level:2,title:"Added GIF showcase",slug:"added-gif-showcase"},{level:2,title:"Updated texture tutorials",slug:"updated-texture-tutorials"},{level:2,title:"Fixed panics do to not specifying the correct usage",slug:"fixed-panics-do-to-not-specifying-the-correct-usage"},{level:2,title:"Updating Winit from 0.20.0-alpha5 to 0.20",slug:"updating-winit-from-0-20-0-alpha5-to-0-20"},{level:2,title:"Changed tutorial examples to use a src directory",slug:"changed-tutorial-examples-to-use-a-src-directory"},{level:2,title:"Updating to 0.4 from 0.3",slug:"updating-to-0-4-from-0-3"},{level:2,title:"New/Recent Articles",slug:"new-recent-articles"}],lastUpdated:"7/10/2021, 8:04:39 AM"},{title:"Foreward",frontmatter:{meta:[{property:"article:modified_time",content:"2020-10-08T22:49:47.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Foreward"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/"},{name:"twitter:title",content:"Foreward"},{name:"twitter:url",content:"/showcase/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/",relativePath:"showcase/README.md",key:"v-45ee3628",path:"/showcase/",lastUpdated:"10/8/2020, 10:49:47 PM"},{title:"Memory Layout in GLSL",frontmatter:{meta:[{property:"article:modified_time",content:"2020-11-21T20:16:07.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Memory Layout in GLSL"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/alignment/"},{name:"twitter:title",content:"Memory Layout in GLSL"},{name:"twitter:url",content:"/showcase/alignment/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/alignment/",relativePath:"showcase/alignment/README.md",key:"v-a42e43b0",path:"/showcase/alignment/",headers:[{level:2,title:"Alignments",slug:"alignments"},{level:2,title:"In WGPU",slug:"in-wgpu"},{level:2,title:"std140 (since GLSL 1.4, OpenGL 3.1)",slug:"std140-since-glsl-1-4-opengl-3-1"},{level:3,title:"crates to make your struct compatible with std140",slug:"crates-to-make-your-struct-compatible-with-std140"},{level:2,title:"std430 (since GLSL 4.3, OpenGL 4.3)",slug:"std430-since-glsl-4-3-opengl-4-3"},{level:3,title:"crates to make yuor struct compatible with std430",slug:"crates-to-make-yuor-struct-compatible-with-std430"}],lastUpdated:"11/21/2020, 8:16:07 PM"},{title:"Compute Example: Tangents and Bitangents",frontmatter:{meta:[{property:"article:modified_time",content:"2021-02-12T06:29:40.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Compute Example: Tangents and Bitangents"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/compute/"},{name:"twitter:title",content:"Compute Example: Tangents and Bitangents"},{name:"twitter:url",content:"/showcase/compute/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/compute/",relativePath:"showcase/compute/README.md",key:"v-22582db0",path:"/showcase/compute/",headers:[{level:2,title:"Possible Improvements",slug:"possible-improvements"},{level:2,title:"Results",slug:"results"}],lastUpdated:"2/12/2021, 6:29:40 AM"},{title:"Creating gifs",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-26T00:21:56.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Creating gifs"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/gifs/"},{name:"twitter:title",content:"Creating gifs"},{name:"twitter:url",content:"/showcase/gifs/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/gifs/",relativePath:"showcase/gifs/README.md",key:"v-39635cd4",path:"/showcase/gifs/",headers:[{level:2,title:"How are we making the GIF?",slug:"how-are-we-making-the-gif"},{level:2,title:"How do we make the frames?",slug:"how-do-we-make-the-frames"}],lastUpdated:"5/26/2021, 12:21:56 AM"},{title:"Basic Imgui Demo",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T19:14:17.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Basic Imgui Demo"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/imgui-demo/"},{name:"twitter:title",content:"Basic Imgui Demo"},{name:"twitter:url",content:"/showcase/imgui-demo/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/imgui-demo/",relativePath:"showcase/imgui-demo/README.md",key:"v-7ded8e00",path:"/showcase/imgui-demo/",lastUpdated:"5/24/2021, 7:14:17 PM"},{title:"Pong",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T19:14:17.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Pong"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/pong/"},{name:"twitter:title",content:"Pong"},{name:"twitter:url",content:"/showcase/pong/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/pong/",relativePath:"showcase/pong/README.md",key:"v-06f2dc82",path:"/showcase/pong/",headers:[{level:2,title:"The Architecture",slug:"the-architecture"},{level:2,title:"Input",slug:"input"},{level:2,title:"Render",slug:"render"},{level:2,title:"Sound",slug:"sound"},{level:2,title:"Summary",slug:"summary"}],lastUpdated:"5/24/2021, 7:14:17 PM"},{title:"Wgpu without a window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-07-14T12:26:05.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Wgpu without a window"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/windowless/"},{name:"twitter:title",content:"Wgpu without a window"},{name:"twitter:url",content:"/showcase/windowless/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/windowless/",relativePath:"showcase/windowless/README.md",key:"v-9fe692c0",path:"/showcase/windowless/",headers:[{level:2,title:"So what do we need to do?",slug:"so-what-do-we-need-to-do"},{level:2,title:"A triangle without a window",slug:"a-triangle-without-a-window"},{level:2,title:"Getting data out of a buffer",slug:"getting-data-out-of-a-buffer"},{level:2,title:"Main is not asyncable",slug:"main-is-not-asyncable"}],lastUpdated:"7/14/2021, 12:26:05 PM"},{title:"Coming Soon!",frontmatter:{meta:[{property:"article:modified_time",content:"2020-10-08T22:49:47.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Coming Soon!"},{property:"og:type",content:"website"},{property:"og:url",content:"/todo.html"},{name:"twitter:title",content:"Coming Soon!"},{name:"twitter:url",content:"/todo.html"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/todo.html",relativePath:"todo.md",key:"v-b2ccea3a",path:"/todo.html",lastUpdated:"10/8/2020, 10:49:47 PM"}],themeConfig:{author:{name:"Benjamin R Hansen",twitter:"https://twitter.com/sotrh760"},displayAllHeaders:!1,lastUpdated:"Last Updated",sidebar:["/",{title:"Beginner",collapsable:!1,children:["/beginner/tutorial1-window/","/beginner/tutorial2-swapchain/","/beginner/tutorial3-pipeline/","/beginner/tutorial4-buffer/","/beginner/tutorial5-textures/","/beginner/tutorial6-uniforms/","/beginner/tutorial7-instancing/","/beginner/tutorial8-depth/","/beginner/tutorial9-models/"]},{title:"Intermediate",collapsable:!1,children:["/intermediate/tutorial10-lighting/","/intermediate/tutorial11-normals/","/intermediate/tutorial12-camera/","/intermediate/tutorial13-threading/"]},{title:"Showcase",collapsable:!0,children:["/showcase/","/showcase/windowless/","/showcase/gifs/","/showcase/pong/","/showcase/compute/","/showcase/alignment/","/showcase/imgui-demo/"]},"/news/"]}};n(147);Ro.component("AutoGithubLink",(function(){return n.e(22).then(n.bind(null,251))})),Ro.component("RecentArticles",(function(){return n.e(9).then(n.bind(null,252))})),Ro.component("Badge",(function(){return Promise.all([n.e(0),n.e(10)]).then(n.bind(null,276))}));n(148),n(149);var is={name:"BackToTop",props:{threshold:{type:Number,default:300}},data:function(){return{scrollTop:null}},computed:{show:function(){return this.scrollTop>this.threshold}},mounted:function(){var t=this;this.scrollTop=this.getScrollTop(),window.addEventListener("scroll",Va()((function(){t.scrollTop=t.getScrollTop()}),100))},methods:{getScrollTop:function(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"}),this.scrollTop=0}}},as=(n(150),Object(Ja.a)(is,(function(){var t=this.$createElement,e=this._self._c||t;return e("transition",{attrs:{name:"fade"}},[this.show?e("svg",{staticClass:"go-to-top",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 49.484 28.284"},on:{click:this.scrollToTop}},[e("g",{attrs:{transform:"translate(-229 -126.358)"}},[e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(229 151.107) rotate(-45)"}}),this._v(" "),e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(274.949 154.642) rotate(-135)"}})])]):this._e()])}),[],!1,null,"5fd4ef0c",null).exports),ss=[{},function(t){t.Vue.mixin({computed:{$dataBlock:function(){return this.$options.__data__block__}}})},{},{},function(t){t.Vue.component("CodeCopy",Qa)},function(t){t.Vue.component("BackToTop",as)}],cs=["BackToTop"];n(114);function us(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function ls(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function fs(t,e,n){return e&&ls(t.prototype,e),n&&ls(t,n),t}function ps(t,e){return(ps=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function ds(t){return(ds=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function hs(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}function vs(t,e){return!e||"object"!==ba(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var ms=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&ps(t,e)}(r,t);var e,n=(e=r,function(){var t,n=ds(e);if(hs()){var r=ds(this).constructor;t=Reflect.construct(n,arguments,r)}else t=n.apply(this,arguments);return vs(this,t)});function r(){return us(this,r),n.apply(this,arguments)}return r}(function(){function t(){us(this,t),this.store=new Ro({data:{state:{}}})}return fs(t,[{key:"$get",value:function(t){return this.store.state[t]}},{key:"$set",value:function(t,e){Ro.set(this.store.state,t,e)}},{key:"$emit",value:function(){var t;(t=this.store).$emit.apply(t,arguments)}},{key:"$on",value:function(){var t;(t=this.store).$on.apply(t,arguments)}}]),t}());Object.assign(ms.prototype,{getPageAsyncComponent:Ia,getLayoutAsyncComponent:Ma,getAsyncComponent:Da,getVueComponent:Na});var gs={install:function(t){var e=new ms;t.$vuepress=e,t.prototype.$vuepress=e}};function ys(t){t.beforeEach((function(e,n,r){if(bs(t,e.path))r();else if(/(\/|\.html)$/.test(e.path))if(/\/$/.test(e.path)){var o=e.path.replace(/\/$/,"")+".html";bs(t,o)?r(o):r()}else r();else{var i=e.path+"/",a=e.path+".html";bs(t,a)?r(a):bs(t,i)?r(i):r()}}))}function bs(t,e){return t.options.routes.filter((function(t){return t.path.toLowerCase()===e.toLowerCase()})).length>0}var ws={props:{pageKey:String,slotKey:{type:String,default:"default"}},render:function(t){var e=this.pageKey||this.$parent.$page.key;return Ba("pageKey",e),Ro.component(e)||Ro.component(e,Ia(e)),Ro.component(e)?t(e):t("")}},_s={functional:!0,props:{slotKey:String,required:!0},render:function(t,e){var n=e.props,r=e.slots;return t("div",{class:["content__".concat(n.slotKey)]},r()[n.slotKey])}},xs=(n(151),Object(Ja.a)({},(function(t,e){var n=e._c;return n("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[n("path",{attrs:{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"}}),e._v(" "),n("polygon",{attrs:{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"}})])}),[],!0,null,null,null).exports);function Ss(){return(Ss=o(regeneratorRuntime.mark((function t(e){var n,r,o,i;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n="undefined"!=typeof window&&window.__VUEPRESS_ROUTER_BASE__?window.__VUEPRESS_ROUTER_BASE__:os.routerBase||os.base,ys(r=new ga({base:n,mode:"history",fallback:!1,routes:rs,scrollBehavior:function(t,e,n){return n||(t.hash?!Ro.$vuepress.$get("disableScrollBehavior")&&{selector:t.hash}:{x:0,y:0})}})),o={},t.prev=4,t.next=7,Promise.all(ss.filter((function(t){return"function"==typeof t})).map((function(t){return t({Vue:Ro,options:o,router:r,siteData:os,isServer:e})})));case 7:t.next=12;break;case 9:t.prev=9,t.t0=t.catch(4),console.error(t.t0);case 12:return i=new Ro(Object.assign(o,{router:r,render:function(t){return t("div",{attrs:{id:"app"}},[t("RouterView",{ref:"layout"}),t("div",{class:"global-ui"},cs.map((function(e){return t(e)})))])}})),t.abrupt("return",{app:i,router:r});case 14:case"end":return t.stop()}}),t,null,[[4,9]])})))).apply(this,arguments)}Ro.config.productionTip=!1,Ro.use(ga),Ro.use(gs),Ro.mixin(function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Ro;ya(e),n.$vuepress.$set("siteData",e);var r=t(n.$vuepress.$get("siteData")),o=new r,i=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(o)),a={};return Object.keys(i).reduce((function(t,e){return e.startsWith("$")&&(t[e]=i[e].get),t}),a),{computed:a}}((function(t){return function(){function e(){us(this,e)}return fs(e,[{key:"setPage",value:function(t){this.__page=t}},{key:"$site",get:function(){return t}},{key:"$themeConfig",get:function(){return this.$site.themeConfig}},{key:"$frontmatter",get:function(){return this.$page.frontmatter}},{key:"$localeConfig",get:function(){var t,e,n=this.$site.locales,r=void 0===n?{}:n;for(var o in r)"/"===o?e=r[o]:0===this.$page.path.indexOf(o)&&(t=r[o]);return t||e||{}}},{key:"$siteTitle",get:function(){return this.$localeConfig.title||this.$site.title||""}},{key:"$title",get:function(){var t=this.$page,e=this.$page.frontmatter.metaTitle;if("string"==typeof e)return e;var n=this.$siteTitle,r=t.frontmatter.home?null:t.frontmatter.title||t.title;return n?r?r+" | "+n:n:r||"VuePress"}},{key:"$description",get:function(){var t=function(t){if(t){var e=t.filter((function(t){return"description"===t.name}))[0];if(e)return e.content}}(this.$page.frontmatter.meta);return t||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}},{key:"$lang",get:function(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}},{key:"$localePath",get:function(){return this.$localeConfig.path||"/"}},{key:"$themeLocaleConfig",get:function(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}},{key:"$page",get:function(){return this.__page?this.__page:function(t,e){for(var n=0;n<t.length;n++){var r=t[n];if(r.path.toLowerCase()===e.toLowerCase())return r}return{path:"",frontmatter:{}}}(this.$site.pages,this.$route.path)}}]),e}()}),os)),Ro.component("Content",ws),Ro.component("ContentSlotsDistributor",_s),Ro.component("OutboundLink",xs),Ro.component("ClientOnly",{functional:!0,render:function(t,e){var n=e.parent,r=e.children;if(n._isMounted)return r;n.$once("hook:mounted",(function(){n.$forceUpdate()}))}}),Ro.component("Layout",Ma("Layout")),Ro.component("NotFound",Ma("NotFound")),Ro.prototype.$withBase=function(t){var e=this.$site.base;return"/"===t.charAt(0)?e+t.slice(1):t},window.__VUEPRESS__={version:"1.4.0",hash:"59bc306"},function(t){return Ss.apply(this,arguments)}(!1).then((function(t){var e=t.app;t.router.onReady((function(){e.$mount("#app")}))}))}]);
\ No newline at end of file
+  */function Io(t){return Object.prototype.toString.call(t).indexOf("Error")>-1}function Mo(t,e){return e instanceof t||e&&(e.name===t.name||e._name===t._name)}function Do(t,e){for(var n in e)t[n]=e[n];return t}var No={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(t,e){var n=e.props,r=e.children,o=e.parent,i=e.data;i.routerView=!0;for(var a=o.$createElement,s=n.name,c=o.$route,u=o._routerViewCache||(o._routerViewCache={}),l=0,f=!1;o&&o._routerRoot!==o;){var p=o.$vnode?o.$vnode.data:{};p.routerView&&l++,p.keepAlive&&o._directInactive&&o._inactive&&(f=!0),o=o.$parent}if(i.routerViewDepth=l,f){var d=u[s],h=d&&d.component;return h?(d.configProps&&Uo(h,i,d.route,d.configProps),a(h,i,r)):a()}var v=c.matched[l],m=v&&v.components[s];if(!v||!m)return u[s]=null,a();u[s]={component:m},i.registerRouteInstance=function(t,e){var n=v.instances[s];(e&&n!==t||!e&&n===t)&&(v.instances[s]=e)},(i.hook||(i.hook={})).prepatch=function(t,e){v.instances[s]=e.componentInstance},i.hook.init=function(t){t.data.keepAlive&&t.componentInstance&&t.componentInstance!==v.instances[s]&&(v.instances[s]=t.componentInstance)};var g=v.props&&v.props[s];return g&&(Do(u[s],{route:c,configProps:g}),Uo(m,i,c,g)),a(m,i,r)}};function Uo(t,e,n,r){var o=e.props=function(t,e){switch(typeof e){case"undefined":return;case"object":return e;case"function":return e(t);case"boolean":return e?t.params:void 0;default:0}}(n,r);if(o){o=e.props=Do({},o);var i=e.attrs=e.attrs||{};for(var a in o)t.props&&a in t.props||(i[a]=o[a],delete o[a])}}var Bo=/[!'()*]/g,Fo=function(t){return"%"+t.charCodeAt(0).toString(16)},Wo=/%2C/g,Ho=function(t){return encodeURIComponent(t).replace(Bo,Fo).replace(Wo,",")},Vo=decodeURIComponent;function zo(t){var e={};return(t=t.trim().replace(/^(\?|#|&)/,""))?(t.split("&").forEach((function(t){var n=t.replace(/\+/g," ").split("="),r=Vo(n.shift()),o=n.length>0?Vo(n.join("=")):null;void 0===e[r]?e[r]=o:Array.isArray(e[r])?e[r].push(o):e[r]=[e[r],o]})),e):e}function Go(t){var e=t?Object.keys(t).map((function(e){var n=t[e];if(void 0===n)return"";if(null===n)return Ho(e);if(Array.isArray(n)){var r=[];return n.forEach((function(t){void 0!==t&&(null===t?r.push(Ho(e)):r.push(Ho(e)+"="+Ho(t)))})),r.join("&")}return Ho(e)+"="+Ho(n)})).filter((function(t){return t.length>0})).join("&"):null;return e?"?"+e:""}var qo=/\/?$/;function Zo(t,e,n,r){var o=r&&r.options.stringifyQuery,i=e.query||{};try{i=Ko(i)}catch(t){}var a={name:e.name||t&&t.name,meta:t&&t.meta||{},path:e.path||"/",hash:e.hash||"",query:i,params:e.params||{},fullPath:Jo(e,o),matched:t?Yo(t):[]};return n&&(a.redirectedFrom=Jo(n,o)),Object.freeze(a)}function Ko(t){if(Array.isArray(t))return t.map(Ko);if(t&&"object"==typeof t){var e={};for(var n in t)e[n]=Ko(t[n]);return e}return t}var Xo=Zo(null,{path:"/"});function Yo(t){for(var e=[];t;)e.unshift(t),t=t.parent;return e}function Jo(t,e){var n=t.path,r=t.query;void 0===r&&(r={});var o=t.hash;return void 0===o&&(o=""),(n||"/")+(e||Go)(r)+o}function Qo(t,e){return e===Xo?t===e:!!e&&(t.path&&e.path?t.path.replace(qo,"")===e.path.replace(qo,"")&&t.hash===e.hash&&ti(t.query,e.query):!(!t.name||!e.name)&&(t.name===e.name&&t.hash===e.hash&&ti(t.query,e.query)&&ti(t.params,e.params)))}function ti(t,e){if(void 0===t&&(t={}),void 0===e&&(e={}),!t||!e)return t===e;var n=Object.keys(t),r=Object.keys(e);return n.length===r.length&&n.every((function(n){var r=t[n],o=e[n];return"object"==typeof r&&"object"==typeof o?ti(r,o):String(r)===String(o)}))}function ei(t,e,n){var r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;var o=e.split("/");n&&o[o.length-1]||o.pop();for(var i=t.replace(/^\//,"").split("/"),a=0;a<i.length;a++){var s=i[a];".."===s?o.pop():"."!==s&&o.push(s)}return""!==o[0]&&o.unshift(""),o.join("/")}function ni(t){return t.replace(/\/\//g,"/")}var ri=Array.isArray||function(t){return"[object Array]"==Object.prototype.toString.call(t)},oi=yi,ii=li,ai=function(t,e){return pi(li(t,e))},si=pi,ci=gi,ui=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function li(t,e){for(var n,r=[],o=0,i=0,a="",s=e&&e.delimiter||"/";null!=(n=ui.exec(t));){var c=n[0],u=n[1],l=n.index;if(a+=t.slice(i,l),i=l+c.length,u)a+=u[1];else{var f=t[i],p=n[2],d=n[3],h=n[4],v=n[5],m=n[6],g=n[7];a&&(r.push(a),a="");var y=null!=p&&null!=f&&f!==p,b="+"===m||"*"===m,w="?"===m||"*"===m,_=n[2]||s,x=h||v;r.push({name:d||o++,prefix:p||"",delimiter:_,optional:w,repeat:b,partial:y,asterisk:!!g,pattern:x?hi(x):g?".*":"[^"+di(_)+"]+?"})}}return i<t.length&&(a+=t.substr(i)),a&&r.push(a),r}function fi(t){return encodeURI(t).replace(/[\/?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()}))}function pi(t){for(var e=new Array(t.length),n=0;n<t.length;n++)"object"==typeof t[n]&&(e[n]=new RegExp("^(?:"+t[n].pattern+")$"));return function(n,r){for(var o="",i=n||{},a=(r||{}).pretty?fi:encodeURIComponent,s=0;s<t.length;s++){var c=t[s];if("string"!=typeof c){var u,l=i[c.name];if(null==l){if(c.optional){c.partial&&(o+=c.prefix);continue}throw new TypeError('Expected "'+c.name+'" to be defined')}if(ri(l)){if(!c.repeat)throw new TypeError('Expected "'+c.name+'" to not repeat, but received `'+JSON.stringify(l)+"`");if(0===l.length){if(c.optional)continue;throw new TypeError('Expected "'+c.name+'" to not be empty')}for(var f=0;f<l.length;f++){if(u=a(l[f]),!e[s].test(u))throw new TypeError('Expected all "'+c.name+'" to match "'+c.pattern+'", but received `'+JSON.stringify(u)+"`");o+=(0===f?c.prefix:c.delimiter)+u}}else{if(u=c.asterisk?encodeURI(l).replace(/[?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()})):a(l),!e[s].test(u))throw new TypeError('Expected "'+c.name+'" to match "'+c.pattern+'", but received "'+u+'"');o+=c.prefix+u}}else o+=c}return o}}function di(t){return t.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function hi(t){return t.replace(/([=!:$\/()])/g,"\\$1")}function vi(t,e){return t.keys=e,t}function mi(t){return t.sensitive?"":"i"}function gi(t,e,n){ri(e)||(n=e||n,e=[]);for(var r=(n=n||{}).strict,o=!1!==n.end,i="",a=0;a<t.length;a++){var s=t[a];if("string"==typeof s)i+=di(s);else{var c=di(s.prefix),u="(?:"+s.pattern+")";e.push(s),s.repeat&&(u+="(?:"+c+u+")*"),i+=u=s.optional?s.partial?c+"("+u+")?":"(?:"+c+"("+u+"))?":c+"("+u+")"}}var l=di(n.delimiter||"/"),f=i.slice(-l.length)===l;return r||(i=(f?i.slice(0,-l.length):i)+"(?:"+l+"(?=$))?"),i+=o?"$":r&&f?"":"(?="+l+"|$)",vi(new RegExp("^"+i,mi(n)),e)}function yi(t,e,n){return ri(e)||(n=e||n,e=[]),n=n||{},t instanceof RegExp?function(t,e){var n=t.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)e.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return vi(t,e)}(t,e):ri(t)?function(t,e,n){for(var r=[],o=0;o<t.length;o++)r.push(yi(t[o],e,n).source);return vi(new RegExp("(?:"+r.join("|")+")",mi(n)),e)}(t,e,n):function(t,e,n){return gi(li(t,n),e,n)}(t,e,n)}oi.parse=ii,oi.compile=ai,oi.tokensToFunction=si,oi.tokensToRegExp=ci;var bi=Object.create(null);function wi(t,e,n){e=e||{};try{var r=bi[t]||(bi[t]=oi.compile(t));return"string"==typeof e.pathMatch&&(e[0]=e.pathMatch),r(e,{pretty:!0})}catch(t){return""}finally{delete e[0]}}function _i(t,e,n,r){var o="string"==typeof t?{path:t}:t;if(o._normalized)return o;if(o.name){var i=(o=Do({},t)).params;return i&&"object"==typeof i&&(o.params=Do({},i)),o}if(!o.path&&o.params&&e){(o=Do({},o))._normalized=!0;var a=Do(Do({},e.params),o.params);if(e.name)o.name=e.name,o.params=a;else if(e.matched.length){var s=e.matched[e.matched.length-1].path;o.path=wi(s,a,e.path)}else 0;return o}var c=function(t){var e="",n="",r=t.indexOf("#");r>=0&&(e=t.slice(r),t=t.slice(0,r));var o=t.indexOf("?");return o>=0&&(n=t.slice(o+1),t=t.slice(0,o)),{path:t,query:n,hash:e}}(o.path||""),u=e&&e.path||"/",l=c.path?ei(c.path,u,n||o.append):u,f=function(t,e,n){void 0===e&&(e={});var r,o=n||zo;try{r=o(t||"")}catch(t){r={}}for(var i in e)r[i]=e[i];return r}(c.query,o.query,r&&r.options.parseQuery),p=o.hash||c.hash;return p&&"#"!==p.charAt(0)&&(p="#"+p),{_normalized:!0,path:l,query:f,hash:p}}var xi,Si=function(){},Ei={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},exact:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,event:{type:[String,Array],default:"click"}},render:function(t){var e=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),i=o.location,a=o.route,s=o.href,c={},u=n.options.linkActiveClass,l=n.options.linkExactActiveClass,f=null==u?"router-link-active":u,p=null==l?"router-link-exact-active":l,d=null==this.activeClass?f:this.activeClass,h=null==this.exactActiveClass?p:this.exactActiveClass,v=a.redirectedFrom?Zo(null,_i(a.redirectedFrom),null,n):a;c[h]=Qo(r,v),c[d]=this.exact?c[h]:function(t,e){return 0===t.path.replace(qo,"/").indexOf(e.path.replace(qo,"/"))&&(!e.hash||t.hash===e.hash)&&function(t,e){for(var n in e)if(!(n in t))return!1;return!0}(t.query,e.query)}(r,v);var m=function(t){Oi(t)&&(e.replace?n.replace(i,Si):n.push(i,Si))},g={click:Oi};Array.isArray(this.event)?this.event.forEach((function(t){g[t]=m})):g[this.event]=m;var y={class:c},b=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:s,route:a,navigate:m,isActive:c[d],isExactActive:c[h]});if(b){if(1===b.length)return b[0];if(b.length>1||!b.length)return 0===b.length?t():t("span",{},b)}if("a"===this.tag)y.on=g,y.attrs={href:s};else{var w=function t(e){var n;if(e)for(var r=0;r<e.length;r++){if("a"===(n=e[r]).tag)return n;if(n.children&&(n=t(n.children)))return n}}(this.$slots.default);if(w){w.isStatic=!1;var _=w.data=Do({},w.data);for(var x in _.on=_.on||{},_.on){var S=_.on[x];x in g&&(_.on[x]=Array.isArray(S)?S:[S])}for(var E in g)E in _.on?_.on[E].push(g[E]):_.on[E]=m;(w.data.attrs=Do({},w.data.attrs)).href=s}else y.on=g}return t(this.tag,y,this.$slots.default)}};function Oi(t){if(!(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||t.defaultPrevented||void 0!==t.button&&0!==t.button)){if(t.currentTarget&&t.currentTarget.getAttribute){var e=t.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(e))return}return t.preventDefault&&t.preventDefault(),!0}}var ki="undefined"!=typeof window;function Ci(t,e,n,r){var o=e||[],i=n||Object.create(null),a=r||Object.create(null);t.forEach((function(t){!function t(e,n,r,o,i,a){var s=o.path,c=o.name;0;var u=o.pathToRegexpOptions||{},l=function(t,e,n){n||(t=t.replace(/\/$/,""));if("/"===t[0])return t;if(null==e)return t;return ni(e.path+"/"+t)}(s,i,u.strict);"boolean"==typeof o.caseSensitive&&(u.sensitive=o.caseSensitive);var f={path:l,regex:Ai(l,u),components:o.components||{default:o.component},instances:{},name:c,parent:i,matchAs:a,redirect:o.redirect,beforeEnter:o.beforeEnter,meta:o.meta||{},props:null==o.props?{}:o.components?o.props:{default:o.props}};o.children&&o.children.forEach((function(o){var i=a?ni(a+"/"+o.path):void 0;t(e,n,r,o,f,i)}));n[f.path]||(e.push(f.path),n[f.path]=f);if(void 0!==o.alias)for(var p=Array.isArray(o.alias)?o.alias:[o.alias],d=0;d<p.length;++d){0;var h={path:p[d],children:o.children};t(e,n,r,h,i,f.path||"/")}c&&(r[c]||(r[c]=f))}(o,i,a,t)}));for(var s=0,c=o.length;s<c;s++)"*"===o[s]&&(o.push(o.splice(s,1)[0]),c--,s--);return{pathList:o,pathMap:i,nameMap:a}}function Ai(t,e){return oi(t,[],e)}function Ti(t,e){var n=Ci(t),r=n.pathList,o=n.pathMap,i=n.nameMap;function a(t,n,a){var s=_i(t,n,!1,e),u=s.name;if(u){var l=i[u];if(!l)return c(null,s);var f=l.regex.keys.filter((function(t){return!t.optional})).map((function(t){return t.name}));if("object"!=typeof s.params&&(s.params={}),n&&"object"==typeof n.params)for(var p in n.params)!(p in s.params)&&f.indexOf(p)>-1&&(s.params[p]=n.params[p]);return s.path=wi(l.path,s.params),c(l,s,a)}if(s.path){s.params={};for(var d=0;d<r.length;d++){var h=r[d],v=o[h];if($i(v.regex,s.path,s.params))return c(v,s,a)}}return c(null,s)}function s(t,n){var r=t.redirect,o="function"==typeof r?r(Zo(t,n,null,e)):r;if("string"==typeof o&&(o={path:o}),!o||"object"!=typeof o)return c(null,n);var s=o,u=s.name,l=s.path,f=n.query,p=n.hash,d=n.params;if(f=s.hasOwnProperty("query")?s.query:f,p=s.hasOwnProperty("hash")?s.hash:p,d=s.hasOwnProperty("params")?s.params:d,u){i[u];return a({_normalized:!0,name:u,query:f,hash:p,params:d},void 0,n)}if(l){var h=function(t,e){return ei(t,e.parent?e.parent.path:"/",!0)}(l,t);return a({_normalized:!0,path:wi(h,d),query:f,hash:p},void 0,n)}return c(null,n)}function c(t,n,r){return t&&t.redirect?s(t,r||n):t&&t.matchAs?function(t,e,n){var r=a({_normalized:!0,path:wi(n,e.params)});if(r){var o=r.matched,i=o[o.length-1];return e.params=r.params,c(i,e)}return c(null,e)}(0,n,t.matchAs):Zo(t,n,r,e)}return{match:a,addRoutes:function(t){Ci(t,r,o,i)}}}function $i(t,e,n){var r=e.match(t);if(!r)return!1;if(!n)return!0;for(var o=1,i=r.length;o<i;++o){var a=t.keys[o-1],s="string"==typeof r[o]?decodeURIComponent(r[o]):r[o];a&&(n[a.name||"pathMatch"]=s)}return!0}var ji=ki&&window.performance&&window.performance.now?window.performance:Date;function Pi(){return ji.now().toFixed(3)}var Li=Pi();function Ri(){return Li}function Ii(t){return Li=t}var Mi=Object.create(null);function Di(){var t=window.location.protocol+"//"+window.location.host,e=window.location.href.replace(t,""),n=Do({},window.history.state);n.key=Ri(),window.history.replaceState(n,"",e),window.addEventListener("popstate",(function(t){Ui(),t.state&&t.state.key&&Ii(t.state.key)}))}function Ni(t,e,n,r){if(t.app){var o=t.options.scrollBehavior;o&&t.app.$nextTick((function(){var i=function(){var t=Ri();if(t)return Mi[t]}(),a=o.call(t,e,n,r?i:null);a&&("function"==typeof a.then?a.then((function(t){Vi(t,i)})).catch((function(t){0})):Vi(a,i))}))}}function Ui(){var t=Ri();t&&(Mi[t]={x:window.pageXOffset,y:window.pageYOffset})}function Bi(t){return Wi(t.x)||Wi(t.y)}function Fi(t){return{x:Wi(t.x)?t.x:window.pageXOffset,y:Wi(t.y)?t.y:window.pageYOffset}}function Wi(t){return"number"==typeof t}var Hi=/^#\d/;function Vi(t,e){var n,r="object"==typeof t;if(r&&"string"==typeof t.selector){var o=Hi.test(t.selector)?document.getElementById(t.selector.slice(1)):document.querySelector(t.selector);if(o){var i=t.offset&&"object"==typeof t.offset?t.offset:{};e=function(t,e){var n=document.documentElement.getBoundingClientRect(),r=t.getBoundingClientRect();return{x:r.left-n.left-e.x,y:r.top-n.top-e.y}}(o,i={x:Wi((n=i).x)?n.x:0,y:Wi(n.y)?n.y:0})}else Bi(t)&&(e=Fi(t))}else r&&Bi(t)&&(e=Fi(t));e&&window.scrollTo(e.x,e.y)}var zi,Gi=ki&&((-1===(zi=window.navigator.userAgent).indexOf("Android 2.")&&-1===zi.indexOf("Android 4.0")||-1===zi.indexOf("Mobile Safari")||-1!==zi.indexOf("Chrome")||-1!==zi.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history);function qi(t,e){Ui();var n=window.history;try{if(e){var r=Do({},n.state);r.key=Ri(),n.replaceState(r,"",t)}else n.pushState({key:Ii(Pi())},"",t)}catch(n){window.location[e?"replace":"assign"](t)}}function Zi(t){qi(t,!0)}function Ki(t,e,n){var r=function(o){o>=t.length?n():t[o]?e(t[o],(function(){r(o+1)})):r(o+1)};r(0)}function Xi(t){return function(e,n,r){var o=!1,i=0,a=null;Yi(t,(function(t,e,n,s){if("function"==typeof t&&void 0===t.cid){o=!0,i++;var c,u=ta((function(e){var o;((o=e).__esModule||Qi&&"Module"===o[Symbol.toStringTag])&&(e=e.default),t.resolved="function"==typeof e?e:xi.extend(e),n.components[s]=e,--i<=0&&r()})),l=ta((function(t){var e="Failed to resolve async component "+s+": "+t;a||(a=Io(t)?t:new Error(e),r(a))}));try{c=t(u,l)}catch(t){l(t)}if(c)if("function"==typeof c.then)c.then(u,l);else{var f=c.component;f&&"function"==typeof f.then&&f.then(u,l)}}})),o||r()}}function Yi(t,e){return Ji(t.map((function(t){return Object.keys(t.components).map((function(n){return e(t.components[n],t.instances[n],t,n)}))})))}function Ji(t){return Array.prototype.concat.apply([],t)}var Qi="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function ta(t){var e=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!e)return e=!0,t.apply(this,n)}}var ea=function(t){function e(e){t.call(this),this.name=this._name="NavigationDuplicated",this.message='Navigating to current location ("'+e.fullPath+'") is not allowed',Object.defineProperty(this,"stack",{value:(new t).stack,writable:!0,configurable:!0})}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e}(Error);ea._name="NavigationDuplicated";var na=function(t,e){this.router=t,this.base=function(t){if(!t)if(ki){var e=document.querySelector("base");t=(t=e&&e.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else t="/";"/"!==t.charAt(0)&&(t="/"+t);return t.replace(/\/$/,"")}(e),this.current=Xo,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[]};function ra(t,e,n,r){var o=Yi(t,(function(t,r,o,i){var a=function(t,e){"function"!=typeof t&&(t=xi.extend(t));return t.options[e]}(t,e);if(a)return Array.isArray(a)?a.map((function(t){return n(t,r,o,i)})):n(a,r,o,i)}));return Ji(r?o.reverse():o)}function oa(t,e){if(e)return function(){return t.apply(e,arguments)}}na.prototype.listen=function(t){this.cb=t},na.prototype.onReady=function(t,e){this.ready?t():(this.readyCbs.push(t),e&&this.readyErrorCbs.push(e))},na.prototype.onError=function(t){this.errorCbs.push(t)},na.prototype.transitionTo=function(t,e,n){var r=this,o=this.router.match(t,this.current);this.confirmTransition(o,(function(){r.updateRoute(o),e&&e(o),r.ensureURL(),r.ready||(r.ready=!0,r.readyCbs.forEach((function(t){t(o)})))}),(function(t){n&&n(t),t&&!r.ready&&(r.ready=!0,r.readyErrorCbs.forEach((function(e){e(t)})))}))},na.prototype.confirmTransition=function(t,e,n){var r=this,o=this.current,i=function(t){!Mo(ea,t)&&Io(t)&&(r.errorCbs.length?r.errorCbs.forEach((function(e){e(t)})):console.error(t)),n&&n(t)};if(Qo(t,o)&&t.matched.length===o.matched.length)return this.ensureURL(),i(new ea(t));var a=function(t,e){var n,r=Math.max(t.length,e.length);for(n=0;n<r&&t[n]===e[n];n++);return{updated:e.slice(0,n),activated:e.slice(n),deactivated:t.slice(n)}}(this.current.matched,t.matched),s=a.updated,c=a.deactivated,u=a.activated,l=[].concat(function(t){return ra(t,"beforeRouteLeave",oa,!0)}(c),this.router.beforeHooks,function(t){return ra(t,"beforeRouteUpdate",oa)}(s),u.map((function(t){return t.beforeEnter})),Xi(u));this.pending=t;var f=function(e,n){if(r.pending!==t)return i();try{e(t,o,(function(t){!1===t||Io(t)?(r.ensureURL(!0),i(t)):"string"==typeof t||"object"==typeof t&&("string"==typeof t.path||"string"==typeof t.name)?(i(),"object"==typeof t&&t.replace?r.replace(t):r.push(t)):n(t)}))}catch(t){i(t)}};Ki(l,f,(function(){var n=[];Ki(function(t,e,n){return ra(t,"beforeRouteEnter",(function(t,r,o,i){return function(t,e,n,r,o){return function(i,a,s){return t(i,a,(function(t){"function"==typeof t&&r.push((function(){!function t(e,n,r,o){n[r]&&!n[r]._isBeingDestroyed?e(n[r]):o()&&setTimeout((function(){t(e,n,r,o)}),16)}(t,e.instances,n,o)})),s(t)}))}}(t,o,i,e,n)}))}(u,n,(function(){return r.current===t})).concat(r.router.resolveHooks),f,(function(){if(r.pending!==t)return i();r.pending=null,e(t),r.router.app&&r.router.app.$nextTick((function(){n.forEach((function(t){t()}))}))}))}))},na.prototype.updateRoute=function(t){var e=this.current;this.current=t,this.cb&&this.cb(t),this.router.afterHooks.forEach((function(n){n&&n(t,e)}))};var ia=function(t){function e(e,n){var r=this;t.call(this,e,n);var o=e.options.scrollBehavior,i=Gi&&o;i&&Di();var a=aa(this.base);window.addEventListener("popstate",(function(t){var n=r.current,o=aa(r.base);r.current===Xo&&o===a||r.transitionTo(o,(function(t){i&&Ni(e,t,n,!0)}))}))}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.go=function(t){window.history.go(t)},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){qi(ni(r.base+t.fullPath)),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Zi(ni(r.base+t.fullPath)),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.ensureURL=function(t){if(aa(this.base)!==this.current.fullPath){var e=ni(this.base+this.current.fullPath);t?qi(e):Zi(e)}},e.prototype.getCurrentLocation=function(){return aa(this.base)},e}(na);function aa(t){var e=decodeURI(window.location.pathname);return t&&0===e.indexOf(t)&&(e=e.slice(t.length)),(e||"/")+window.location.search+window.location.hash}var sa=function(t){function e(e,n,r){t.call(this,e,n),r&&function(t){var e=aa(t);if(!/^\/#/.test(e))return window.location.replace(ni(t+"/#"+e)),!0}(this.base)||ca()}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this,e=this.router.options.scrollBehavior,n=Gi&&e;n&&Di(),window.addEventListener(Gi?"popstate":"hashchange",(function(){var e=t.current;ca()&&t.transitionTo(ua(),(function(r){n&&Ni(t.router,r,e,!0),Gi||pa(r.fullPath)}))}))},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){fa(t.fullPath),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){pa(t.fullPath),Ni(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.go=function(t){window.history.go(t)},e.prototype.ensureURL=function(t){var e=this.current.fullPath;ua()!==e&&(t?fa(e):pa(e))},e.prototype.getCurrentLocation=function(){return ua()},e}(na);function ca(){var t=ua();return"/"===t.charAt(0)||(pa("/"+t),!1)}function ua(){var t=window.location.href,e=t.indexOf("#");if(e<0)return"";var n=(t=t.slice(e+1)).indexOf("?");if(n<0){var r=t.indexOf("#");t=r>-1?decodeURI(t.slice(0,r))+t.slice(r):decodeURI(t)}else t=decodeURI(t.slice(0,n))+t.slice(n);return t}function la(t){var e=window.location.href,n=e.indexOf("#");return(n>=0?e.slice(0,n):e)+"#"+t}function fa(t){Gi?qi(la(t)):window.location.hash=t}function pa(t){Gi?Zi(la(t)):window.location.replace(la(t))}var da=function(t){function e(e,n){t.call(this,e,n),this.stack=[],this.index=-1}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.push=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index+1).concat(t),r.index++,e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index).concat(t),e&&e(t)}),n)},e.prototype.go=function(t){var e=this,n=this.index+t;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){e.index=n,e.updateRoute(r)}),(function(t){Mo(ea,t)&&(e.index=n)}))}},e.prototype.getCurrentLocation=function(){var t=this.stack[this.stack.length-1];return t?t.fullPath:"/"},e.prototype.ensureURL=function(){},e}(na),ha=function(t){void 0===t&&(t={}),this.app=null,this.apps=[],this.options=t,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Ti(t.routes||[],this);var e=t.mode||"hash";switch(this.fallback="history"===e&&!Gi&&!1!==t.fallback,this.fallback&&(e="hash"),ki||(e="abstract"),this.mode=e,e){case"history":this.history=new ia(this,t.base);break;case"hash":this.history=new sa(this,t.base,this.fallback);break;case"abstract":this.history=new da(this,t.base);break;default:0}},va={currentRoute:{configurable:!0}};function ma(t,e){return t.push(e),function(){var n=t.indexOf(e);n>-1&&t.splice(n,1)}}ha.prototype.match=function(t,e,n){return this.matcher.match(t,e,n)},va.currentRoute.get=function(){return this.history&&this.history.current},ha.prototype.init=function(t){var e=this;if(this.apps.push(t),t.$once("hook:destroyed",(function(){var n=e.apps.indexOf(t);n>-1&&e.apps.splice(n,1),e.app===t&&(e.app=e.apps[0]||null)})),!this.app){this.app=t;var n=this.history;if(n instanceof ia)n.transitionTo(n.getCurrentLocation());else if(n instanceof sa){var r=function(){n.setupListeners()};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(t){e.apps.forEach((function(e){e._route=t}))}))}},ha.prototype.beforeEach=function(t){return ma(this.beforeHooks,t)},ha.prototype.beforeResolve=function(t){return ma(this.resolveHooks,t)},ha.prototype.afterEach=function(t){return ma(this.afterHooks,t)},ha.prototype.onReady=function(t,e){this.history.onReady(t,e)},ha.prototype.onError=function(t){this.history.onError(t)},ha.prototype.push=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.push(t,e,n)}));this.history.push(t,e,n)},ha.prototype.replace=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.replace(t,e,n)}));this.history.replace(t,e,n)},ha.prototype.go=function(t){this.history.go(t)},ha.prototype.back=function(){this.go(-1)},ha.prototype.forward=function(){this.go(1)},ha.prototype.getMatchedComponents=function(t){var e=t?t.matched?t:this.resolve(t).route:this.currentRoute;return e?[].concat.apply([],e.matched.map((function(t){return Object.keys(t.components).map((function(e){return t.components[e]}))}))):[]},ha.prototype.resolve=function(t,e,n){var r=_i(t,e=e||this.history.current,n,this),o=this.match(r,e),i=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(t,e,n){var r="hash"===n?"#"+e:e;return t?ni(t+"/"+r):r}(this.history.base,i,this.mode),normalizedTo:r,resolved:o}},ha.prototype.addRoutes=function(t){this.matcher.addRoutes(t),this.history.current!==Xo&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(ha.prototype,va),ha.install=function t(e){if(!t.installed||xi!==e){t.installed=!0,xi=e;var n=function(t){return void 0!==t},r=function(t,e){var r=t.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(t,e)};e.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),e.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(e.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(e.prototype,"$route",{get:function(){return this._routerRoot._route}}),e.component("RouterView",No),e.component("RouterLink",Ei);var o=e.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},ha.version="3.1.6",ki&&window.Vue&&window.Vue.use(ha);var ga=ha;n(50),n(127),n(129),n(130),n(131),n(69),n(132),n(51);function ya(t){t.locales&&Object.keys(t.locales).forEach((function(e){t.locales[e].path=e})),Object.freeze(t)}n(108),n(133),n(22),n(110),n(47);function ba(t){return(ba="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var wa=n(43),_a={NotFound:function(){return n.e(23).then(n.bind(null,250))},Layout:function(){return Promise.all([n.e(0),n.e(2)]).then(n.bind(null,249))}},xa={"v-64a170d8":function(){return n.e(24).then(n.bind(null,253))},"v-078c5be8":function(){return n.e(25).then(n.bind(null,254))},"v-5655e588":function(){return n.e(11).then(n.bind(null,255))},"v-4ef07d88":function(){return n.e(12).then(n.bind(null,256))},"v-64577bce":function(){return n.e(6).then(n.bind(null,257))},"v-3f6f84e0":function(){return n.e(5).then(n.bind(null,258))},"v-2524cb94":function(){return n.e(15).then(n.bind(null,259))},"v-56b3c5a0":function(){return n.e(16).then(n.bind(null,260))},"v-68f30830":function(){return n.e(13).then(n.bind(null,261))},"v-b07002f8":function(){return n.e(8).then(n.bind(null,262))},"v-a06af470":function(){return n.e(3).then(n.bind(null,263))},"v-27757210":function(){return n.e(4).then(n.bind(null,264))},"v-20dff7a8":function(){return n.e(14).then(n.bind(null,265))},"v-1633bbb4":function(){return n.e(26).then(n.bind(null,266))},"v-70e651e8":function(){return n.e(17).then(n.bind(null,267))},"v-45ee3628":function(){return n.e(27).then(n.bind(null,268))},"v-a42e43b0":function(){return n.e(28).then(n.bind(null,269))},"v-22582db0":function(){return n.e(7).then(n.bind(null,270))},"v-39635cd4":function(){return n.e(18).then(n.bind(null,271))},"v-7ded8e00":function(){return n.e(19).then(n.bind(null,272))},"v-06f2dc82":function(){return n.e(20).then(n.bind(null,273))},"v-9fe692c0":function(){return n.e(21).then(n.bind(null,274))},"v-b2ccea3a":function(){return n.e(29).then(n.bind(null,275))}};function Sa(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var Ea=/-(\w)/g,Oa=Sa((function(t){return t.replace(Ea,(function(t,e){return e?e.toUpperCase():""}))})),ka=/\B([A-Z])/g,Ca=Sa((function(t){return t.replace(ka,"-$1").toLowerCase()})),Aa=Sa((function(t){return t.charAt(0).toUpperCase()+t.slice(1)}));function Ta(t,e){if(e)return t(e)?t(e):e.includes("-")?t(Aa(Oa(e))):t(Aa(e))||t(Ca(e))}var $a=Object.assign({},_a,xa),ja=function(t){return $a[t]},Pa=function(t){return xa[t]},La=function(t){return _a[t]},Ra=function(t){return Ro.component(t)};function Ia(t){return Ta(Pa,t)}function Ma(t){return Ta(La,t)}function Da(t){return Ta(ja,t)}function Na(t){return Ta(Ra,t)}function Ua(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return Promise.all(e.filter((function(t){return t})).map(function(){var t=o(regeneratorRuntime.mark((function t(e){var n;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Na(e)||!Da(e)){t.next=5;break}return t.next=3,Da(e)();case 3:n=t.sent,Ro.component(e,n.default);case 5:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()))}function Ba(t,e){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[t]=e)}n(100),n(102),n(67),n(136);var Fa={created:function(){this.$ssrContext&&(this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.description=this.$page.description||this.$description)},mounted:function(){this.currentMetaTags=new Set,this.updateMeta()},methods:{updateMeta:function(){var t=this;document.title=this.$title,document.documentElement.lang=this.$lang;var e=this.$page.frontmatter.meta||[],n=e.slice(0);0===e.filter((function(t){return"description"===t.name})).length&&n.push({name:"description",content:this.$description});var r=document.querySelectorAll('meta[name="description"]');r.length&&r.forEach((function(e){return t.currentMetaTags.add(e)})),this.currentMetaTags=new Set(Wa(n,this.currentMetaTags))}},watch:{$page:function(){this.updateMeta()}},beforeDestroy:function(){Wa(null,this.currentMetaTags)}};function Wa(t,e){if(e&&Object(wa.a)(e).forEach((function(t){document.head.removeChild(t)})),t)return t.map((function(t){var e=document.createElement("meta");return Object.keys(t).forEach((function(n){e.setAttribute(n,t[n])})),document.head.appendChild(e),e}))}n(106);var Ha=n(44),Va=n.n(Ha),za={mounted:function(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:Va()((function(){this.setActiveHash()}),300),setActiveHash:function(){for(var t=this,e=[].slice.call(document.querySelectorAll(".sidebar-link")),n=[].slice.call(document.querySelectorAll(".header-anchor")).filter((function(t){return e.some((function(e){return e.hash===t.hash}))})),r=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),o=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),i=window.innerHeight+r,a=0;a<n.length;a++){var s=n[a],c=n[a+1],u=0===a&&0===r||r>=s.parentElement.offsetTop+10&&(!c||r<c.parentElement.offsetTop-10),l=decodeURIComponent(this.$route.hash);if(u&&l!==decodeURIComponent(s.hash)){var f=s;if(i===o)for(var p=a+1;p<n.length;p++)if(l===decodeURIComponent(n[p].hash))return;return this.$vuepress.$set("disableScrollBehavior",!0),void this.$router.replace(decodeURIComponent(f.hash),(function(){t.$nextTick((function(){t.$vuepress.$set("disableScrollBehavior",!1)}))}))}}}},beforeDestroy:function(){window.removeEventListener("scroll",this.onScroll)}},Ga=n(45),qa=n.n(Ga),Za={mounted:function(){var t=this;qa.a.configure({showSpinner:!1}),this.$router.beforeEach((function(t,e,n){t.path===e.path||Ro.component(t.name)||qa.a.start(),n()})),this.$router.afterEach((function(){qa.a.done(),t.isSidebarOpen=!1}))}};n(105);function Ka(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function Xa(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}n(117),n(118);var Ya={props:{parent:Object,code:String,options:{align:String,color:String,backgroundTransition:Boolean,backgroundColor:String,successText:String,staticIcon:Boolean}},data:function(){return{success:!1,originalBackground:null,originalTransition:null}},computed:{alignStyle:function(){var t={};return t[this.options.align]="7.5px",t},iconClass:function(){return this.options.staticIcon?"":"hover"}},mounted:function(){this.originalTransition=this.parent.style.transition,this.originalBackground=this.parent.style.background},beforeDestroy:function(){this.parent.style.transition=this.originalTransition,this.parent.style.background=this.originalBackground},methods:{hexToRgb:function(t){var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null},copyToClipboard:function(t){var e=this;if(navigator.clipboard)navigator.clipboard.writeText(this.code).then((function(){e.setSuccessTransitions()}),(function(){}));else{var n=document.createElement("textarea");document.body.appendChild(n),n.value=this.code,n.select(),document.execCommand("Copy"),n.remove(),this.setSuccessTransitions()}},setSuccessTransitions:function(){var t=this;if(clearTimeout(this.successTimeout),this.options.backgroundTransition){this.parent.style.transition="background 350ms";var e=this.hexToRgb(this.options.backgroundColor);this.parent.style.background="rgba(".concat(e.r,", ").concat(e.g,", ").concat(e.b,", 0.1)")}this.success=!0,this.successTimeout=setTimeout((function(){t.options.backgroundTransition&&(t.parent.style.background=t.originalBackground,t.parent.style.transition=t.originalTransition),t.success=!1}),500)}}},Ja=(n(145),n(10)),Qa=Object(Ja.a)(Ya,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"code-copy"},[n("svg",{class:t.iconClass,style:t.alignStyle,attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},on:{click:t.copyToClipboard}},[n("path",{attrs:{fill:"none",d:"M0 0h24v24H0z"}}),t._v(" "),n("path",{attrs:{fill:t.options.color,d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"}})]),t._v(" "),n("span",{class:t.success?"success":"",style:t.alignStyle},[t._v("\n        "+t._s(t.options.successText)+"\n    ")])])}),[],!1,null,"49140617",null).exports,ts=(n(146),[Fa,za,Za,{updated:function(){this.update()},methods:{update:function(){setTimeout((function(){document.querySelectorAll('div[class*="language-"] pre').forEach((function(t){if(!t.classList.contains("code-copy-added")){var e=new(Ro.extend(Qa));e.options=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?Xa(Object(n),!0).forEach((function(e){Ka(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Xa(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},{align:"bottom",color:"#27b1ff",backgroundTransition:!0,backgroundColor:"#0075b8",successText:"Copied!",staticIcon:!1}),e.code=t.innerText,e.parent=t,e.$mount(),t.classList.add("code-copy-added"),t.appendChild(e.$el)}}))}),100)}}}]),es={name:"GlobalLayout",computed:{layout:function(){var t=this.getLayout();return Ba("layout",t),Ro.component(t)}},methods:{getLayout:function(){if(this.$page.path){var t=this.$page.frontmatter.layout;return t&&(this.$vuepress.getLayoutAsyncComponent(t)||this.$vuepress.getVueComponent(t))?t:"Layout"}return"NotFound"}}},ns=Object(Ja.a)(es,(function(){var t=this.$createElement;return(this._self._c||t)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(t,e,n){var r;switch(e){case"components":t[e]||(t[e]={}),Object.assign(t[e],n);break;case"mixins":t[e]||(t[e]=[]),(r=t[e]).push.apply(r,Object(wa.a)(n));break;default:throw new Error("Unknown option name.")}}(ns,"mixins",ts);var rs=[{name:"v-64a170d8",path:"/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-64a170d8").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-078c5be8",path:"/beginner/tutorial1-window/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-078c5be8").then(n)}},{path:"/beginner/tutorial1-window/index.html",redirect:"/beginner/tutorial1-window/"},{name:"v-5655e588",path:"/beginner/tutorial2-swapchain/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-5655e588").then(n)}},{path:"/beginner/tutorial2-swapchain/index.html",redirect:"/beginner/tutorial2-swapchain/"},{name:"v-4ef07d88",path:"/beginner/tutorial3-pipeline/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-4ef07d88").then(n)}},{path:"/beginner/tutorial3-pipeline/index.html",redirect:"/beginner/tutorial3-pipeline/"},{name:"v-64577bce",path:"/beginner/tutorial4-buffer/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-64577bce").then(n)}},{path:"/beginner/tutorial4-buffer/index.html",redirect:"/beginner/tutorial4-buffer/"},{name:"v-3f6f84e0",path:"/beginner/tutorial5-textures/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-3f6f84e0").then(n)}},{path:"/beginner/tutorial5-textures/index.html",redirect:"/beginner/tutorial5-textures/"},{name:"v-2524cb94",path:"/beginner/tutorial6-uniforms/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-2524cb94").then(n)}},{path:"/beginner/tutorial6-uniforms/index.html",redirect:"/beginner/tutorial6-uniforms/"},{name:"v-56b3c5a0",path:"/beginner/tutorial7-instancing/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-56b3c5a0").then(n)}},{path:"/beginner/tutorial7-instancing/index.html",redirect:"/beginner/tutorial7-instancing/"},{name:"v-68f30830",path:"/beginner/tutorial8-depth/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-68f30830").then(n)}},{path:"/beginner/tutorial8-depth/index.html",redirect:"/beginner/tutorial8-depth/"},{name:"v-b07002f8",path:"/beginner/tutorial9-models/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-b07002f8").then(n)}},{path:"/beginner/tutorial9-models/index.html",redirect:"/beginner/tutorial9-models/"},{name:"v-a06af470",path:"/intermediate/tutorial10-lighting/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-a06af470").then(n)}},{path:"/intermediate/tutorial10-lighting/index.html",redirect:"/intermediate/tutorial10-lighting/"},{name:"v-27757210",path:"/intermediate/tutorial11-normals/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-27757210").then(n)}},{path:"/intermediate/tutorial11-normals/index.html",redirect:"/intermediate/tutorial11-normals/"},{name:"v-20dff7a8",path:"/intermediate/tutorial12-camera/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-20dff7a8").then(n)}},{path:"/intermediate/tutorial12-camera/index.html",redirect:"/intermediate/tutorial12-camera/"},{name:"v-1633bbb4",path:"/intermediate/tutorial13-threading/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-1633bbb4").then(n)}},{path:"/intermediate/tutorial13-threading/index.html",redirect:"/intermediate/tutorial13-threading/"},{name:"v-70e651e8",path:"/news/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-70e651e8").then(n)}},{path:"/news/index.html",redirect:"/news/"},{name:"v-45ee3628",path:"/showcase/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-45ee3628").then(n)}},{path:"/showcase/index.html",redirect:"/showcase/"},{name:"v-a42e43b0",path:"/showcase/alignment/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-a42e43b0").then(n)}},{path:"/showcase/alignment/index.html",redirect:"/showcase/alignment/"},{name:"v-22582db0",path:"/showcase/compute/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-22582db0").then(n)}},{path:"/showcase/compute/index.html",redirect:"/showcase/compute/"},{name:"v-39635cd4",path:"/showcase/gifs/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-39635cd4").then(n)}},{path:"/showcase/gifs/index.html",redirect:"/showcase/gifs/"},{name:"v-7ded8e00",path:"/showcase/imgui-demo/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-7ded8e00").then(n)}},{path:"/showcase/imgui-demo/index.html",redirect:"/showcase/imgui-demo/"},{name:"v-06f2dc82",path:"/showcase/pong/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-06f2dc82").then(n)}},{path:"/showcase/pong/index.html",redirect:"/showcase/pong/"},{name:"v-9fe692c0",path:"/showcase/windowless/",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-9fe692c0").then(n)}},{path:"/showcase/windowless/index.html",redirect:"/showcase/windowless/"},{name:"v-b2ccea3a",path:"/todo.html",component:ns,beforeEnter:function(t,e,n){Ua("Layout","v-b2ccea3a").then(n)}},{path:"*",component:ns}],os={title:"Learn Wgpu",description:"",base:"/learn-wgpu/",pages:[{title:"Introduction",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-15T16:52:25.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Introduction"},{property:"og:type",content:"website"},{property:"og:url",content:"/"},{name:"twitter:title",content:"Introduction"},{name:"twitter:url",content:"/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/",relativePath:"README.md",key:"v-64a170d8",path:"/",headers:[{level:2,title:"What is wgpu?",slug:"what-is-wgpu"},{level:2,title:"Why Rust?",slug:"why-rust"},{level:2,title:"Contribution and Support",slug:"contribution-and-support"},{level:2,title:"Special thanks to these patrons!",slug:"special-thanks-to-these-patrons"}],lastUpdated:"8/15/2021, 4:52:25 PM"},{title:"Dependencies and the window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T14:25:23.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Dependencies and the window"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial1-window/"},{name:"twitter:title",content:"Dependencies and the window"},{name:"twitter:url",content:"/beginner/tutorial1-window/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial1-window/",relativePath:"beginner/tutorial1-window/README.md",key:"v-078c5be8",path:"/beginner/tutorial1-window/",headers:[{level:2,title:"Boring, I know",slug:"boring-i-know"},{level:2,title:"What crates are we using?",slug:"what-crates-are-we-using"},{level:2,title:"The code",slug:"the-code"}],lastUpdated:"8/4/2021, 2:25:23 PM"},{title:"The Swapchain",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-09T22:20:36.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Swapchain"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial2-swapchain/"},{name:"twitter:title",content:"The Swapchain"},{name:"twitter:url",content:"/beginner/tutorial2-swapchain/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial2-swapchain/",relativePath:"beginner/tutorial2-swapchain/README.md",key:"v-5655e588",path:"/beginner/tutorial2-swapchain/",headers:[{level:2,title:"First, some house keeping: State",slug:"first-some-house-keeping-state"},{level:2,title:"State::new()",slug:"state-new"},{level:2,title:"resize()",slug:"resize"},{level:2,title:"input()",slug:"input"},{level:2,title:"update()",slug:"update"},{level:2,title:"render()",slug:"render"},{level:2,title:"Wait, what's going on with RenderPassDescriptor?",slug:"wait-what-s-going-on-with-renderpassdescriptor"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"8/9/2021, 10:20:36 PM"},{title:"The Pipeline",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-10T19:57:07.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Pipeline"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial3-pipeline/"},{name:"twitter:title",content:"The Pipeline"},{name:"twitter:url",content:"/beginner/tutorial3-pipeline/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial3-pipeline/",relativePath:"beginner/tutorial3-pipeline/README.md",key:"v-4ef07d88",path:"/beginner/tutorial3-pipeline/",headers:[{level:2,title:"What's a pipeline?",slug:"what-s-a-pipeline"},{level:2,title:"Wait shaders?",slug:"wait-shaders"},{level:2,title:"Vertex, fragment.. what are those?",slug:"vertex-fragment-what-are-those"},{level:2,title:"WGSL",slug:"wgsl"},{level:2,title:"Writing the shaders",slug:"writing-the-shaders"},{level:2,title:"How do we use the shaders?",slug:"how-do-we-use-the-shaders"},{level:2,title:"Using a pipeline",slug:"using-a-pipeline"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"8/10/2021, 7:57:07 PM"},{title:"Buffers and Indices",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-16T15:40:03.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Buffers and Indices"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial4-buffer/"},{name:"twitter:title",content:"Buffers and Indices"},{name:"twitter:url",content:"/beginner/tutorial4-buffer/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial4-buffer/",relativePath:"beginner/tutorial4-buffer/README.md",key:"v-64577bce",path:"/beginner/tutorial4-buffer/",headers:[{level:2,title:"We're finally talking about them!",slug:"we-re-finally-talking-about-them"},{level:2,title:"What is a buffer?",slug:"what-is-a-buffer"},{level:2,title:"The vertex buffer",slug:"the-vertex-buffer"},{level:2,title:"So what do I do with it?",slug:"so-what-do-i-do-with-it"},{level:2,title:"The index buffer",slug:"the-index-buffer"},{level:2,title:"Color Correction",slug:"color-correction"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"8/16/2021, 3:40:03 PM"},{title:"Textures and bind groups",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T14:25:23.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Textures and bind groups"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial5-textures/"},{name:"twitter:title",content:"Textures and bind groups"},{name:"twitter:url",content:"/beginner/tutorial5-textures/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial5-textures/",relativePath:"beginner/tutorial5-textures/README.md",key:"v-3f6f84e0",path:"/beginner/tutorial5-textures/",headers:[{level:2,title:"Loading an image from a file",slug:"loading-an-image-from-a-file"},{level:2,title:"Getting data into a Texture",slug:"getting-data-into-a-texture"},{level:2,title:"TextureViews and Samplers",slug:"textureviews-and-samplers"},{level:2,title:"The BindGroup",slug:"the-bindgroup"},{level:2,title:"PipelineLayout",slug:"pipelinelayout"},{level:2,title:"A change to the VERTICES",slug:"a-change-to-the-vertices"},{level:2,title:"Shader time",slug:"shader-time"},{level:2,title:"The results",slug:"the-results"},{level:2,title:"Cleaning things up",slug:"cleaning-things-up"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"8/4/2021, 2:25:23 PM"},{title:"Uniform buffers and a 3d camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-06-06T17:30:46.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Uniform buffers and a 3d camera"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial6-uniforms/"},{name:"twitter:title",content:"Uniform buffers and a 3d camera"},{name:"twitter:url",content:"/beginner/tutorial6-uniforms/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial6-uniforms/",relativePath:"beginner/tutorial6-uniforms/README.md",key:"v-2524cb94",path:"/beginner/tutorial6-uniforms/",headers:[{level:2,title:"A perspective camera",slug:"a-perspective-camera"},{level:2,title:"The uniform buffer",slug:"the-uniform-buffer"},{level:2,title:"Uniform buffers and bind groups",slug:"uniform-buffers-and-bind-groups"},{level:2,title:"Using the uniforms in the vertex shader",slug:"using-the-uniforms-in-the-vertex-shader"},{level:2,title:"A controller for our camera",slug:"a-controller-for-our-camera"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"6/6/2021, 5:30:46 PM"},{title:"Instancing",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T13:13:08.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Instancing"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial7-instancing/"},{name:"twitter:title",content:"Instancing"},{name:"twitter:url",content:"/beginner/tutorial7-instancing/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial7-instancing/",relativePath:"beginner/tutorial7-instancing/README.md",key:"v-56b3c5a0",path:"/beginner/tutorial7-instancing/",headers:[{level:2,title:"The Instance Buffer",slug:"the-instance-buffer"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"8/4/2021, 1:13:08 PM"},{title:"The Depth Buffer",frontmatter:{meta:[{property:"article:modified_time",content:"2021-06-08T07:19:51.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"The Depth Buffer"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial8-depth/"},{name:"twitter:title",content:"The Depth Buffer"},{name:"twitter:url",content:"/beginner/tutorial8-depth/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial8-depth/",relativePath:"beginner/tutorial8-depth/README.md",key:"v-68f30830",path:"/beginner/tutorial8-depth/",headers:[{level:2,title:"Sorting from back to front",slug:"sorting-from-back-to-front"},{level:2,title:"A pixels depth",slug:"a-pixels-depth"},{level:2,title:"Challenge",slug:"challenge"}],lastUpdated:"6/8/2021, 7:19:51 AM"},{title:"Model Loading",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T13:13:08.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Model Loading"},{property:"og:type",content:"website"},{property:"og:url",content:"/beginner/tutorial9-models/"},{name:"twitter:title",content:"Model Loading"},{name:"twitter:url",content:"/beginner/tutorial9-models/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/beginner/tutorial9-models/",relativePath:"beginner/tutorial9-models/README.md",key:"v-b07002f8",path:"/beginner/tutorial9-models/",headers:[{level:2,title:"Accessing files in the res folder",slug:"accessing-files-in-the-res-folder"},{level:2,title:"Loading models with TOBJ",slug:"loading-models-with-tobj"},{level:2,title:"Rendering a mesh",slug:"rendering-a-mesh"},{level:2,title:"Using the correct textures",slug:"using-the-correct-textures"},{level:2,title:"Rendering the entire model",slug:"rendering-the-entire-model"}],lastUpdated:"8/4/2021, 1:13:08 PM"},{title:"Working with Lights",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T13:06:53.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Working with Lights"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial10-lighting/"},{name:"twitter:title",content:"Working with Lights"},{name:"twitter:url",content:"/intermediate/tutorial10-lighting/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial10-lighting/",relativePath:"intermediate/tutorial10-lighting/README.md",key:"v-a06af470",path:"/intermediate/tutorial10-lighting/",headers:[{level:2,title:"Ray/Path Tracing",slug:"ray-path-tracing"},{level:2,title:"The Blinn-Phong Model",slug:"the-blinn-phong-model"},{level:2,title:"Seeing the light",slug:"seeing-the-light"},{level:2,title:"Ambient Lighting",slug:"ambient-lighting"},{level:2,title:"Diffuse Lighting",slug:"diffuse-lighting"},{level:2,title:"The normal matrix",slug:"the-normal-matrix"},{level:2,title:"Specular Lighting",slug:"specular-lighting"},{level:2,title:"The half direction",slug:"the-half-direction"}],lastUpdated:"8/4/2021, 1:06:53 PM"},{title:"Normal Mapping",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-15T16:44:57.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Normal Mapping"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial11-normals/"},{name:"twitter:title",content:"Normal Mapping"},{name:"twitter:url",content:"/intermediate/tutorial11-normals/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial11-normals/",relativePath:"intermediate/tutorial11-normals/README.md",key:"v-27757210",path:"/intermediate/tutorial11-normals/",headers:[{level:2,title:"Tangent Space to World Space",slug:"tangent-space-to-world-space"},{level:2,title:"The tangent, and the bitangent",slug:"the-tangent-and-the-bitangent"},{level:2,title:"World Space to Tangent Space",slug:"world-space-to-tangent-space"},{level:2,title:"Srgb and normal textures",slug:"srgb-and-normal-textures"},{level:2,title:"Unrelated stuff",slug:"unrelated-stuff"}],lastUpdated:"8/15/2021, 4:44:57 PM"},{title:"A Better Camera",frontmatter:{meta:[{property:"article:modified_time",content:"2021-08-04T12:17:21.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"A Better Camera"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial12-camera/"},{name:"twitter:title",content:"A Better Camera"},{name:"twitter:url",content:"/intermediate/tutorial12-camera/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial12-camera/",relativePath:"intermediate/tutorial12-camera/README.md",key:"v-20dff7a8",path:"/intermediate/tutorial12-camera/",headers:[{level:2,title:"The Camera",slug:"the-camera"},{level:2,title:"The Projection",slug:"the-projection"},{level:2,title:"Cleaning up main.rs",slug:"cleaning-up-main-rs"}],lastUpdated:"8/4/2021, 12:17:21 PM"},{title:"Multi-threading with Wgpu and Rayon",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T17:44:10.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Multi-threading with Wgpu and Rayon"},{property:"og:type",content:"website"},{property:"og:url",content:"/intermediate/tutorial13-threading/"},{name:"twitter:title",content:"Multi-threading with Wgpu and Rayon"},{name:"twitter:url",content:"/intermediate/tutorial13-threading/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/intermediate/tutorial13-threading/",relativePath:"intermediate/tutorial13-threading/README.md",key:"v-1633bbb4",path:"/intermediate/tutorial13-threading/",headers:[{level:2,title:"Parallelizing loading models and textures",slug:"parallelizing-loading-models-and-textures"},{level:2,title:"It's that easy!",slug:"it-s-that-easy"}],lastUpdated:"5/24/2021, 5:44:10 PM"},{title:"News",frontmatter:{meta:[{property:"article:modified_time",content:"2021-07-10T08:04:39.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"News"},{property:"og:type",content:"website"},{property:"og:url",content:"/news/"},{name:"twitter:title",content:"News"},{name:"twitter:url",content:"/news/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/news/",relativePath:"news/README.md",key:"v-70e651e8",path:"/news/",headers:[{level:2,title:"Pong and imgui demos are fixed!",slug:"pong-and-imgui-demos-are-fixed"},{level:2,title:"0.8 and WGSL",slug:"_0-8-and-wgsl"},{level:3,title:"The GLSL shaders have been translated to WGSL",slug:"the-glsl-shaders-have-been-translated-to-wgsl"},{level:3,title:"Shaderc has been removed",slug:"shaderc-has-been-removed"},{level:3,title:"Some of the showcase examples are broken",slug:"some-of-the-showcase-examples-are-broken"},{level:3,title:"Various API changes",slug:"various-api-changes"},{level:2,title:"0.7",slug:"_0-7"},{level:2,title:"November 2020 Cleanup, Content Freeze, and Patreon",slug:"november-2020-cleanup-content-freeze-and-patreon"},{level:2,title:"0.6",slug:"_0-6"},{level:2,title:"Added Pong Showcase",slug:"added-pong-showcase"},{level:2,title:"Normal mapping",slug:"normal-mapping"},{level:2,title:"0.5!",slug:"_0-5"},{level:2,title:"Reworked lighting tutorial",slug:"reworked-lighting-tutorial"},{level:2,title:"Added GIF showcase",slug:"added-gif-showcase"},{level:2,title:"Updated texture tutorials",slug:"updated-texture-tutorials"},{level:2,title:"Fixed panics do to not specifying the correct usage",slug:"fixed-panics-do-to-not-specifying-the-correct-usage"},{level:2,title:"Updating Winit from 0.20.0-alpha5 to 0.20",slug:"updating-winit-from-0-20-0-alpha5-to-0-20"},{level:2,title:"Changed tutorial examples to use a src directory",slug:"changed-tutorial-examples-to-use-a-src-directory"},{level:2,title:"Updating to 0.4 from 0.3",slug:"updating-to-0-4-from-0-3"},{level:2,title:"New/Recent Articles",slug:"new-recent-articles"}],lastUpdated:"7/10/2021, 8:04:39 AM"},{title:"Foreward",frontmatter:{meta:[{property:"article:modified_time",content:"2020-10-08T22:49:47.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Foreward"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/"},{name:"twitter:title",content:"Foreward"},{name:"twitter:url",content:"/showcase/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/",relativePath:"showcase/README.md",key:"v-45ee3628",path:"/showcase/",lastUpdated:"10/8/2020, 10:49:47 PM"},{title:"Memory Layout in GLSL",frontmatter:{meta:[{property:"article:modified_time",content:"2020-11-21T20:16:07.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Memory Layout in GLSL"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/alignment/"},{name:"twitter:title",content:"Memory Layout in GLSL"},{name:"twitter:url",content:"/showcase/alignment/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/alignment/",relativePath:"showcase/alignment/README.md",key:"v-a42e43b0",path:"/showcase/alignment/",headers:[{level:2,title:"Alignments",slug:"alignments"},{level:2,title:"In WGPU",slug:"in-wgpu"},{level:2,title:"std140 (since GLSL 1.4, OpenGL 3.1)",slug:"std140-since-glsl-1-4-opengl-3-1"},{level:3,title:"crates to make your struct compatible with std140",slug:"crates-to-make-your-struct-compatible-with-std140"},{level:2,title:"std430 (since GLSL 4.3, OpenGL 4.3)",slug:"std430-since-glsl-4-3-opengl-4-3"},{level:3,title:"crates to make yuor struct compatible with std430",slug:"crates-to-make-yuor-struct-compatible-with-std430"}],lastUpdated:"11/21/2020, 8:16:07 PM"},{title:"Compute Example: Tangents and Bitangents",frontmatter:{meta:[{property:"article:modified_time",content:"2021-02-12T06:29:40.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Compute Example: Tangents and Bitangents"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/compute/"},{name:"twitter:title",content:"Compute Example: Tangents and Bitangents"},{name:"twitter:url",content:"/showcase/compute/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/compute/",relativePath:"showcase/compute/README.md",key:"v-22582db0",path:"/showcase/compute/",headers:[{level:2,title:"Possible Improvements",slug:"possible-improvements"},{level:2,title:"Results",slug:"results"}],lastUpdated:"2/12/2021, 6:29:40 AM"},{title:"Creating gifs",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-26T00:21:56.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Creating gifs"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/gifs/"},{name:"twitter:title",content:"Creating gifs"},{name:"twitter:url",content:"/showcase/gifs/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/gifs/",relativePath:"showcase/gifs/README.md",key:"v-39635cd4",path:"/showcase/gifs/",headers:[{level:2,title:"How are we making the GIF?",slug:"how-are-we-making-the-gif"},{level:2,title:"How do we make the frames?",slug:"how-do-we-make-the-frames"}],lastUpdated:"5/26/2021, 12:21:56 AM"},{title:"Basic Imgui Demo",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T19:14:17.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Basic Imgui Demo"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/imgui-demo/"},{name:"twitter:title",content:"Basic Imgui Demo"},{name:"twitter:url",content:"/showcase/imgui-demo/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/imgui-demo/",relativePath:"showcase/imgui-demo/README.md",key:"v-7ded8e00",path:"/showcase/imgui-demo/",lastUpdated:"5/24/2021, 7:14:17 PM"},{title:"Pong",frontmatter:{meta:[{property:"article:modified_time",content:"2021-05-24T19:14:17.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Pong"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/pong/"},{name:"twitter:title",content:"Pong"},{name:"twitter:url",content:"/showcase/pong/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/pong/",relativePath:"showcase/pong/README.md",key:"v-06f2dc82",path:"/showcase/pong/",headers:[{level:2,title:"The Architecture",slug:"the-architecture"},{level:2,title:"Input",slug:"input"},{level:2,title:"Render",slug:"render"},{level:2,title:"Sound",slug:"sound"},{level:2,title:"Summary",slug:"summary"}],lastUpdated:"5/24/2021, 7:14:17 PM"},{title:"Wgpu without a window",frontmatter:{meta:[{property:"article:modified_time",content:"2021-07-14T12:26:05.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Wgpu without a window"},{property:"og:type",content:"website"},{property:"og:url",content:"/showcase/windowless/"},{name:"twitter:title",content:"Wgpu without a window"},{name:"twitter:url",content:"/showcase/windowless/"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/showcase/windowless/",relativePath:"showcase/windowless/README.md",key:"v-9fe692c0",path:"/showcase/windowless/",headers:[{level:2,title:"So what do we need to do?",slug:"so-what-do-we-need-to-do"},{level:2,title:"A triangle without a window",slug:"a-triangle-without-a-window"},{level:2,title:"Getting data out of a buffer",slug:"getting-data-out-of-a-buffer"},{level:2,title:"Main is not asyncable",slug:"main-is-not-asyncable"}],lastUpdated:"7/14/2021, 12:26:05 PM"},{title:"Coming Soon!",frontmatter:{meta:[{property:"article:modified_time",content:"2020-10-08T22:49:47.000Z"},{property:"og:site_name",content:"Learn Wgpu"},{property:"og:title",content:"Coming Soon!"},{property:"og:type",content:"website"},{property:"og:url",content:"/todo.html"},{name:"twitter:title",content:"Coming Soon!"},{name:"twitter:url",content:"/todo.html"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:label1",content:"Written by"},{name:"twitter:data2",content:"Benjamin R Hansen"},{name:"twitter:creator",content:"https://twitter.com/sotrh760"}]},regularPath:"/todo.html",relativePath:"todo.md",key:"v-b2ccea3a",path:"/todo.html",lastUpdated:"10/8/2020, 10:49:47 PM"}],themeConfig:{author:{name:"Benjamin R Hansen",twitter:"https://twitter.com/sotrh760"},displayAllHeaders:!1,lastUpdated:"Last Updated",sidebar:["/",{title:"Beginner",collapsable:!1,children:["/beginner/tutorial1-window/","/beginner/tutorial2-swapchain/","/beginner/tutorial3-pipeline/","/beginner/tutorial4-buffer/","/beginner/tutorial5-textures/","/beginner/tutorial6-uniforms/","/beginner/tutorial7-instancing/","/beginner/tutorial8-depth/","/beginner/tutorial9-models/"]},{title:"Intermediate",collapsable:!1,children:["/intermediate/tutorial10-lighting/","/intermediate/tutorial11-normals/","/intermediate/tutorial12-camera/","/intermediate/tutorial13-threading/"]},{title:"Showcase",collapsable:!0,children:["/showcase/","/showcase/windowless/","/showcase/gifs/","/showcase/pong/","/showcase/compute/","/showcase/alignment/","/showcase/imgui-demo/"]},"/news/"]}};n(147);Ro.component("AutoGithubLink",(function(){return n.e(22).then(n.bind(null,251))})),Ro.component("RecentArticles",(function(){return n.e(9).then(n.bind(null,252))})),Ro.component("Badge",(function(){return Promise.all([n.e(0),n.e(10)]).then(n.bind(null,276))}));n(148),n(149);var is={name:"BackToTop",props:{threshold:{type:Number,default:300}},data:function(){return{scrollTop:null}},computed:{show:function(){return this.scrollTop>this.threshold}},mounted:function(){var t=this;this.scrollTop=this.getScrollTop(),window.addEventListener("scroll",Va()((function(){t.scrollTop=t.getScrollTop()}),100))},methods:{getScrollTop:function(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"}),this.scrollTop=0}}},as=(n(150),Object(Ja.a)(is,(function(){var t=this.$createElement,e=this._self._c||t;return e("transition",{attrs:{name:"fade"}},[this.show?e("svg",{staticClass:"go-to-top",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 49.484 28.284"},on:{click:this.scrollToTop}},[e("g",{attrs:{transform:"translate(-229 -126.358)"}},[e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(229 151.107) rotate(-45)"}}),this._v(" "),e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(274.949 154.642) rotate(-135)"}})])]):this._e()])}),[],!1,null,"5fd4ef0c",null).exports),ss=[{},function(t){t.Vue.mixin({computed:{$dataBlock:function(){return this.$options.__data__block__}}})},{},{},function(t){t.Vue.component("CodeCopy",Qa)},function(t){t.Vue.component("BackToTop",as)}],cs=["BackToTop"];n(114);function us(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function ls(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function fs(t,e,n){return e&&ls(t.prototype,e),n&&ls(t,n),t}function ps(t,e){return(ps=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function ds(t){return(ds=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function hs(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}function vs(t,e){return!e||"object"!==ba(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var ms=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&ps(t,e)}(r,t);var e,n=(e=r,function(){var t,n=ds(e);if(hs()){var r=ds(this).constructor;t=Reflect.construct(n,arguments,r)}else t=n.apply(this,arguments);return vs(this,t)});function r(){return us(this,r),n.apply(this,arguments)}return r}(function(){function t(){us(this,t),this.store=new Ro({data:{state:{}}})}return fs(t,[{key:"$get",value:function(t){return this.store.state[t]}},{key:"$set",value:function(t,e){Ro.set(this.store.state,t,e)}},{key:"$emit",value:function(){var t;(t=this.store).$emit.apply(t,arguments)}},{key:"$on",value:function(){var t;(t=this.store).$on.apply(t,arguments)}}]),t}());Object.assign(ms.prototype,{getPageAsyncComponent:Ia,getLayoutAsyncComponent:Ma,getAsyncComponent:Da,getVueComponent:Na});var gs={install:function(t){var e=new ms;t.$vuepress=e,t.prototype.$vuepress=e}};function ys(t){t.beforeEach((function(e,n,r){if(bs(t,e.path))r();else if(/(\/|\.html)$/.test(e.path))if(/\/$/.test(e.path)){var o=e.path.replace(/\/$/,"")+".html";bs(t,o)?r(o):r()}else r();else{var i=e.path+"/",a=e.path+".html";bs(t,a)?r(a):bs(t,i)?r(i):r()}}))}function bs(t,e){return t.options.routes.filter((function(t){return t.path.toLowerCase()===e.toLowerCase()})).length>0}var ws={props:{pageKey:String,slotKey:{type:String,default:"default"}},render:function(t){var e=this.pageKey||this.$parent.$page.key;return Ba("pageKey",e),Ro.component(e)||Ro.component(e,Ia(e)),Ro.component(e)?t(e):t("")}},_s={functional:!0,props:{slotKey:String,required:!0},render:function(t,e){var n=e.props,r=e.slots;return t("div",{class:["content__".concat(n.slotKey)]},r()[n.slotKey])}},xs=(n(151),Object(Ja.a)({},(function(t,e){var n=e._c;return n("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[n("path",{attrs:{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"}}),e._v(" "),n("polygon",{attrs:{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"}})])}),[],!0,null,null,null).exports);function Ss(){return(Ss=o(regeneratorRuntime.mark((function t(e){var n,r,o,i;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n="undefined"!=typeof window&&window.__VUEPRESS_ROUTER_BASE__?window.__VUEPRESS_ROUTER_BASE__:os.routerBase||os.base,ys(r=new ga({base:n,mode:"history",fallback:!1,routes:rs,scrollBehavior:function(t,e,n){return n||(t.hash?!Ro.$vuepress.$get("disableScrollBehavior")&&{selector:t.hash}:{x:0,y:0})}})),o={},t.prev=4,t.next=7,Promise.all(ss.filter((function(t){return"function"==typeof t})).map((function(t){return t({Vue:Ro,options:o,router:r,siteData:os,isServer:e})})));case 7:t.next=12;break;case 9:t.prev=9,t.t0=t.catch(4),console.error(t.t0);case 12:return i=new Ro(Object.assign(o,{router:r,render:function(t){return t("div",{attrs:{id:"app"}},[t("RouterView",{ref:"layout"}),t("div",{class:"global-ui"},cs.map((function(e){return t(e)})))])}})),t.abrupt("return",{app:i,router:r});case 14:case"end":return t.stop()}}),t,null,[[4,9]])})))).apply(this,arguments)}Ro.config.productionTip=!1,Ro.use(ga),Ro.use(gs),Ro.mixin(function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Ro;ya(e),n.$vuepress.$set("siteData",e);var r=t(n.$vuepress.$get("siteData")),o=new r,i=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(o)),a={};return Object.keys(i).reduce((function(t,e){return e.startsWith("$")&&(t[e]=i[e].get),t}),a),{computed:a}}((function(t){return function(){function e(){us(this,e)}return fs(e,[{key:"setPage",value:function(t){this.__page=t}},{key:"$site",get:function(){return t}},{key:"$themeConfig",get:function(){return this.$site.themeConfig}},{key:"$frontmatter",get:function(){return this.$page.frontmatter}},{key:"$localeConfig",get:function(){var t,e,n=this.$site.locales,r=void 0===n?{}:n;for(var o in r)"/"===o?e=r[o]:0===this.$page.path.indexOf(o)&&(t=r[o]);return t||e||{}}},{key:"$siteTitle",get:function(){return this.$localeConfig.title||this.$site.title||""}},{key:"$title",get:function(){var t=this.$page,e=this.$page.frontmatter.metaTitle;if("string"==typeof e)return e;var n=this.$siteTitle,r=t.frontmatter.home?null:t.frontmatter.title||t.title;return n?r?r+" | "+n:n:r||"VuePress"}},{key:"$description",get:function(){var t=function(t){if(t){var e=t.filter((function(t){return"description"===t.name}))[0];if(e)return e.content}}(this.$page.frontmatter.meta);return t||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}},{key:"$lang",get:function(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}},{key:"$localePath",get:function(){return this.$localeConfig.path||"/"}},{key:"$themeLocaleConfig",get:function(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}},{key:"$page",get:function(){return this.__page?this.__page:function(t,e){for(var n=0;n<t.length;n++){var r=t[n];if(r.path.toLowerCase()===e.toLowerCase())return r}return{path:"",frontmatter:{}}}(this.$site.pages,this.$route.path)}}]),e}()}),os)),Ro.component("Content",ws),Ro.component("ContentSlotsDistributor",_s),Ro.component("OutboundLink",xs),Ro.component("ClientOnly",{functional:!0,render:function(t,e){var n=e.parent,r=e.children;if(n._isMounted)return r;n.$once("hook:mounted",(function(){n.$forceUpdate()}))}}),Ro.component("Layout",Ma("Layout")),Ro.component("NotFound",Ma("NotFound")),Ro.prototype.$withBase=function(t){var e=this.$site.base;return"/"===t.charAt(0)?e+t.slice(1):t},window.__VUEPRESS__={version:"1.4.0",hash:"0b1adb4"},function(t){return Ss.apply(this,arguments)}(!1).then((function(t){var e=t.app;t.router.onReady((function(){e.$mount("#app")}))}))}]);
\ No newline at end of file
diff --git a/beginner/tutorial1-window/index.html b/beginner/tutorial1-window/index.html
index 75905002..4c5af9c7 100644
--- a/beginner/tutorial1-window/index.html
+++ b/beginner/tutorial1-window/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-08-04T14:25:23.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Dependencies and the window"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial1-window/"><meta name="twitter:title" content="Dependencies and the window"><meta name="twitter:url" content="/beginner/tutorial1-window/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5c4d11d0.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.5c4d11d0.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -61,6 +61,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/25.5c4d11d0.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/25.5c4d11d0.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial2-swapchain/index.html b/beginner/tutorial2-swapchain/index.html
index 5974d79d..bf1d6228 100644
--- a/beginner/tutorial2-swapchain/index.html
+++ b/beginner/tutorial2-swapchain/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-08-09T22:20:36.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="The Swapchain"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial2-swapchain/"><meta name="twitter:title" content="The Swapchain"><meta name="twitter:url" content="/beginner/tutorial2-swapchain/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/11.fdda3025.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/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/11.fdda3025.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/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -250,6 +250,6 @@ event_loop<span class="token punctuation">.</span><span class="token function">r
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/11.fdda3025.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/11.fdda3025.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial3-pipeline/index.html b/beginner/tutorial3-pipeline/index.html
index 65e35cdd..ab3e2cdf 100644
--- a/beginner/tutorial3-pipeline/index.html
+++ b/beginner/tutorial3-pipeline/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-08-10T19:57:07.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="The Pipeline"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial3-pipeline/"><meta name="twitter:title" content="The Pipeline"><meta name="twitter:url" content="/beginner/tutorial3-pipeline/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/12.a3244b3f.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/12.a3244b3f.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -153,6 +153,6 @@ fn main(in: VertexOutput) -&gt; [[location(0)]] vec4&lt;f32&gt; {
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/12.a3244b3f.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/12.a3244b3f.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial4-buffer/index.html b/beginner/tutorial4-buffer/index.html
index a0d6d9d9..44b5a87a 100644
--- a/beginner/tutorial4-buffer/index.html
+++ b/beginner/tutorial4-buffer/index.html
@@ -7,8 +7,8 @@
     <meta name="description" content="">
     <meta name="generator" content="VuePress 1.4.0">
     
-    <meta property="article:modified_time" content="2021-08-12T23:50:52.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Buffers and Indices"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial4-buffer/"><meta name="twitter:title" content="Buffers and Indices"><meta name="twitter:url" content="/beginner/tutorial4-buffer/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/6.a4165a76.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <meta property="article:modified_time" content="2021-08-16T15:40:03.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Buffers and Indices"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial4-buffer/"><meta name="twitter:title" content="Buffers and Indices"><meta name="twitter:url" content="/beginner/tutorial4-buffer/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/6.3afd850a.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -103,7 +103,7 @@
 </code></pre></div><div class="note"><p>Specifying the attributes as we did now is quite verbose. We could use the <code>vertex_attr_array</code> macro provided by wgpu to clean things up a bit. With it our <code>VertexBufferLayout</code> becomes</p> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">VertexBufferLayout</span> <span class="token punctuation">{</span>
     array_stride<span class="token punctuation">:</span> <span class="token namespace">std<span class="token punctuation">::</span>mem<span class="token punctuation">::</span></span><span class="token function">size_of</span><span class="token punctuation">::</span><span class="token operator">&lt;</span><span class="token class-name">Vertex</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">BufferAddress</span><span class="token punctuation">,</span>
     step_mode<span class="token punctuation">:</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">InputStepMode</span><span class="token punctuation">::</span><span class="token class-name">Vertex</span><span class="token punctuation">,</span>
-    attributes<span class="token punctuation">:</span> <span class="token operator">&amp;</span><span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token macro property">vertex_attr_array!</span><span class="token punctuation">[</span><span class="token number">0</span> <span class="token operator">=&gt;</span> <span class="token class-name">Float32</span><span class="token punctuation">,</span> <span class="token number">1</span> <span class="token operator">=&gt;</span> <span class="token class-name">Float32</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+    attributes<span class="token punctuation">:</span> <span class="token operator">&amp;</span><span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token macro property">vertex_attr_array!</span><span class="token punctuation">[</span><span class="token number">0</span> <span class="token operator">=&gt;</span> <span class="token class-name">Float32x3</span><span class="token punctuation">,</span> <span class="token number">1</span> <span class="token operator">=&gt;</span> <span class="token class-name">Float32x3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span>
 </code></pre></div><p>While this is definitely nice, we would have to change the lifetime on <code>wgpu::VertexBufferLayout</code> to <code>'static</code> as rust wouldn't compile the code because the result of <code>vertex_attr_array</code> is a temporary value, which we can't return from a function.</p> <p>Beyond that, I feel it's good to show how the data gets mapped, so I'll forgo using this macro for now.</p></div> <p>Now we can use it when we create the <code>render_pipeline</code>.</p> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token keyword">let</span> render_pipeline <span class="token operator">=</span> device<span class="token punctuation">.</span><span class="token function">create_render_pipeline</span><span class="token punctuation">(</span><span class="token operator">&amp;</span><span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">RenderPipelineDescriptor</span> <span class="token punctuation">{</span>
     <span class="token comment">// ...</span>
@@ -251,7 +251,7 @@ render_pass<span class="token punctuation">.</span><span class="token function">
 render_pass<span class="token punctuation">.</span><span class="token function">set_vertex_buffer</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token keyword">self</span><span class="token punctuation">.</span>vertex_buffer<span class="token punctuation">.</span><span class="token function">slice</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>
 render_pass<span class="token punctuation">.</span><span class="token function">set_index_buffer</span><span class="token punctuation">(</span><span class="token keyword">self</span><span class="token punctuation">.</span>index_buffer<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">..</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token namespace">wgpu<span class="token punctuation">::</span></span><span class="token class-name">IndexFormat</span><span class="token punctuation">::</span><span class="token class-name">Uint16</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1.</span>
 render_pass<span class="token punctuation">.</span><span class="token function">draw_indexed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">..</span><span class="token keyword">self</span><span class="token punctuation">.</span>num_indices<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">..</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2.</span>
-</code></pre></div><p>A couple things to note:</p> <ol><li>The method name is <code>set_index_buffer</code> not <code>set_index_buffers</code>. You can only have one index buffer set at a time.</li> <li>When using an index buffer, you need to use <code>draw_indexed</code>. The <code>draw</code> method ignores the index buffer. Also make sure you use the number of indices (<code>num_indices</code>), not vertices as your model will either draw wrong, or the method will <code>panic</code> because there are not enough indices.</li></ol> <p>With all that you should have a garishly magenta pentagon in your window.</p> <p><img src="data:image/png;base64,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EAEqzVSkP4QGAP0mRIDKEyOLIzYAGCQhAlBTQgOAMhMiQC00dSoiNgCoKiEC1EYdY0RoAFBXQgSolSrGiNgAoImECECfCQ0AuJIQAWoneyoiNABg4YQIUEu9jhGxAQC9JUQAQmgAQDYhAtTW5VMRsQEA5SFEgFoTHwBQTu1BLwAAAGgeIQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQbjoh4ZH1r0OsAAAAa5P8D75CpLfCP/NcAAAAASUVORK5CYII=" alt="Magenta pentagon in window"></p> <h2 id="color-correction"><a href="#color-correction" class="header-anchor">#</a> Color Correction</h2> <p>If you use a color picker on the magenta pentagon, you'll get a hex value of #BC00BC. If you convert this to RGB values you'll get (188, 0, 188). Dividing these values by 255 to get them into the [0, 1] range we get roughly (0.737254902, 0, 0.737254902). This is not the same as we are using for our vertex colors which is (0.5, 0.0, 0.5). The reason for this has to do with color spaces.</p> <p>Most monitors use a color space know as sRGB. Our swap chain is (most likely depending on what is returned from <code>adapter.get_swap_chain_preferred_format()</code>) using an sRGB texture format. The sRGB format stores colors according to their relative brightness instead of their actual brightness. The reason for this is that our eyes don't perceive light linearly. We notice more differences in darker colors than we do lighter colors.</p> <p>You get an approximation of the correct color using the following formula: <code>srgb_color = (rgb_color / 255) ^ 2.2</code>. Doing this with an RGB value of (188, 0, 188) will give us (0.511397819, 0.0, 0.511397819). A little off from our (0.5, 0.0, 0.5). While you could tweak the formula to get the desired values, you'll likely save a lot of time by using textures instead as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.</p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Create a more complex shape than the one we made (aka. more than three triangles) using a vertex buffer and an index buffer. Toggle between the two with the space key.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial4-buffer/" 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">8/12/2021, 11:50:52 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
+</code></pre></div><p>A couple things to note:</p> <ol><li>The method name is <code>set_index_buffer</code> not <code>set_index_buffers</code>. You can only have one index buffer set at a time.</li> <li>When using an index buffer, you need to use <code>draw_indexed</code>. The <code>draw</code> method ignores the index buffer. Also make sure you use the number of indices (<code>num_indices</code>), not vertices as your model will either draw wrong, or the method will <code>panic</code> because there are not enough indices.</li></ol> <p>With all that you should have a garishly magenta pentagon in your window.</p> <p><img src="data:image/png;base64,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EAEqzVSkP4QGAP0mRIDKEyOLIzYAGCQhAlBTQgOAMhMiQC00dSoiNgCoKiEC1EYdY0RoAFBXQgSolSrGiNgAoImECECfCQ0AuJIQAWoneyoiNABg4YQIUEu9jhGxAQC9JUQAQmgAQDYhAtTW5VMRsQEA5SFEgFoTHwBQTu1BLwAAAGgeIQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQbjoh4ZH1r0OsAAAAa5P8D75CpLfCP/NcAAAAASUVORK5CYII=" alt="Magenta pentagon in window"></p> <h2 id="color-correction"><a href="#color-correction" class="header-anchor">#</a> Color Correction</h2> <p>If you use a color picker on the magenta pentagon, you'll get a hex value of #BC00BC. If you convert this to RGB values you'll get (188, 0, 188). Dividing these values by 255 to get them into the [0, 1] range we get roughly (0.737254902, 0, 0.737254902). This is not the same as we are using for our vertex colors which is (0.5, 0.0, 0.5). The reason for this has to do with color spaces.</p> <p>Most monitors use a color space know as sRGB. Our swap chain is (most likely depending on what is returned from <code>adapter.get_swap_chain_preferred_format()</code>) using an sRGB texture format. The sRGB format stores colors according to their relative brightness instead of their actual brightness. The reason for this is that our eyes don't perceive light linearly. We notice more differences in darker colors than we do lighter colors.</p> <p>You get an approximation of the correct color using the following formula: <code>srgb_color = (rgb_color / 255) ^ 2.2</code>. Doing this with an RGB value of (188, 0, 188) will give us (0.511397819, 0.0, 0.511397819). A little off from our (0.5, 0.0, 0.5). While you could tweak the formula to get the desired values, you'll likely save a lot of time by using textures instead as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.</p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Create a more complex shape than the one we made (aka. more than three triangles) using a vertex buffer and an index buffer. Toggle between the two with the space key.</p> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial4-buffer/" 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">8/16/2021, 3:40:03 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
         ←
         <a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="prev">
           The Pipeline
@@ -260,6 +260,6 @@ render_pass<span class="token punctuation">.</span><span class="token function">
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/6.a4165a76.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/6.3afd850a.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial5-textures/index.html b/beginner/tutorial5-textures/index.html
index f13c4d27..ea1bc756 100644
--- a/beginner/tutorial5-textures/index.html
+++ b/beginner/tutorial5-textures/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-08-04T14:25:23.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Textures and bind groups"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial5-textures/"><meta name="twitter:title" content="Textures and bind groups"><meta name="twitter:url" content="/beginner/tutorial5-textures/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.5061acf7.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.5061acf7.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -406,6 +406,6 @@ fn <span class="token function">main</span><span class="token punctuation">(</sp
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/5.5061acf7.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/5.5061acf7.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial6-uniforms/index.html b/beginner/tutorial6-uniforms/index.html
index 860ef3cf..3d6212ea 100644
--- a/beginner/tutorial6-uniforms/index.html
+++ b/beginner/tutorial6-uniforms/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-06-06T17:30:46.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Uniform buffers and a 3d camera"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial6-uniforms/"><meta name="twitter:title" content="Uniform buffers and a 3d camera"><meta name="twitter:url" content="/beginner/tutorial6-uniforms/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/15.4800fa06.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/15.4800fa06.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -328,6 +328,6 @@ fn main(
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/15.4800fa06.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/15.4800fa06.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial7-instancing/index.html b/beginner/tutorial7-instancing/index.html
index f57887a8..2625cc60 100644
--- a/beginner/tutorial7-instancing/index.html
+++ b/beginner/tutorial7-instancing/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-08-04T13:13:08.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Instancing"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial7-instancing/"><meta name="twitter:title" content="Instancing"><meta name="twitter:url" content="/beginner/tutorial7-instancing/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/16.8cb7b62f.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/16.8cb7b62f.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -181,6 +181,6 @@ fn main(
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/16.8cb7b62f.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/16.8cb7b62f.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial8-depth/index.html b/beginner/tutorial8-depth/index.html
index 15bad595..4526366e 100644
--- a/beginner/tutorial8-depth/index.html
+++ b/beginner/tutorial8-depth/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-06-08T07:19:51.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="The Depth Buffer"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial8-depth/"><meta name="twitter:title" content="The Depth Buffer"><meta name="twitter:url" content="/beginner/tutorial8-depth/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/13.2da6599a.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/13.2da6599a.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -109,6 +109,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/13.2da6599a.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/13.2da6599a.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/beginner/tutorial9-models/index.html b/beginner/tutorial9-models/index.html
index 2bd5fbdc..f6d9303e 100644
--- a/beginner/tutorial9-models/index.html
+++ b/beginner/tutorial9-models/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-08-04T13:13:08.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Model Loading"><meta property="og:type" content="website"><meta property="og:url" content="/beginner/tutorial9-models/"><meta name="twitter:title" content="Model Loading"><meta name="twitter:url" content="/beginner/tutorial9-models/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/8.a23f98ec.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/8.a23f98ec.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -361,6 +361,6 @@ render_pass<span class="token punctuation">.</span><span class="token function">
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/8.a23f98ec.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/8.a23f98ec.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/index.html b/index.html
index 2771f771..f09cd4ce 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-08-15T16:52:25.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Introduction"><meta property="og:type" content="website"><meta property="og:url" content="/"><meta name="twitter:title" content="Introduction"><meta name="twitter:url" content="/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/24.5e2c93e5.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/24.5e2c93e5.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -17,6 +17,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/24.5e2c93e5.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/24.5e2c93e5.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial10-lighting/index.html b/intermediate/tutorial10-lighting/index.html
index ca756cc3..f27b7597 100644
--- a/intermediate/tutorial10-lighting/index.html
+++ b/intermediate/tutorial10-lighting/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-08-04T13:06:53.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Working with Lights"><meta property="og:type" content="website"><meta property="og:url" content="/intermediate/tutorial10-lighting/"><meta name="twitter:title" content="Working with Lights"><meta name="twitter:url" content="/intermediate/tutorial10-lighting/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/3.ee149516.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/3.ee149516.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -628,6 +628,6 @@ let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/3.ee149516.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/3.ee149516.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial11-normals/index.html b/intermediate/tutorial11-normals/index.html
index 2a0b8338..6cf45093 100644
--- a/intermediate/tutorial11-normals/index.html
+++ b/intermediate/tutorial11-normals/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-08-15T16:44:57.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Normal Mapping"><meta property="og:type" content="website"><meta property="og:url" content="/intermediate/tutorial11-normals/"><meta name="twitter:title" content="Normal Mapping"><meta name="twitter:url" content="/intermediate/tutorial11-normals/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.a1927191.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/4.a1927191.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -480,6 +480,6 @@ render_pass<span class="token punctuation">.</span><span class="token function">
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/4.a1927191.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/4.a1927191.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial12-camera/index.html b/intermediate/tutorial12-camera/index.html
index ab1d388e..f6b44a1e 100644
--- a/intermediate/tutorial12-camera/index.html
+++ b/intermediate/tutorial12-camera/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-08-04T12:17:21.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="A Better Camera"><meta property="og:type" content="website"><meta property="og:url" content="/intermediate/tutorial12-camera/"><meta name="twitter:title" content="A Better Camera"><meta name="twitter:url" content="/intermediate/tutorial12-camera/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/14.3139647c.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/14.3139647c.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -375,6 +375,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/14.3139647c.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/14.3139647c.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/intermediate/tutorial13-threading/index.html b/intermediate/tutorial13-threading/index.html
index c94891d3..5e8b8415 100644
--- a/intermediate/tutorial13-threading/index.html
+++ b/intermediate/tutorial13-threading/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-24T17:44:10.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Multi-threading with Wgpu and Rayon"><meta property="og:type" content="website"><meta property="og:url" content="/intermediate/tutorial13-threading/"><meta name="twitter:title" content="Multi-threading with Wgpu and Rayon"><meta name="twitter:url" content="/intermediate/tutorial13-threading/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/26.745a2634.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/26.745a2634.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -108,6 +108,6 @@ Elapsed (Threaded): 199.645027ms
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/26.745a2634.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/26.745a2634.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/news/index.html b/news/index.html
index 95056ce7..859b001b 100644
--- a/news/index.html
+++ b/news/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-07-10T08:04:39.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="News"><meta property="og:type" content="website"><meta property="og:url" content="/news/"><meta name="twitter:title" content="News"><meta name="twitter:url" content="/news/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.d3375cb5.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/9.ecb6e79c.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.d3375cb5.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/9.ecb6e79c.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -24,6 +24,6 @@
         <a href="/learn-wgpu/showcase/imgui-demo/" class="prev">
           Basic Imgui Demo
         </a></span> <!----></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/17.d3375cb5.js" defer></script><script src="/learn-wgpu/assets/js/9.ecb6e79c.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/17.d3375cb5.js" defer></script><script src="/learn-wgpu/assets/js/9.ecb6e79c.js" defer></script>
   </body>
 </html>
diff --git a/showcase/alignment/index.html b/showcase/alignment/index.html
index b24a2a66..db774f20 100644
--- a/showcase/alignment/index.html
+++ b/showcase/alignment/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2020-11-21T20:16:07.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Memory Layout in GLSL"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/alignment/"><meta name="twitter:title" content="Memory Layout in GLSL"><meta name="twitter:url" content="/showcase/alignment/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/28.a3ac06e2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/28.a3ac06e2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -23,6 +23,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/28.a3ac06e2.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/28.a3ac06e2.js" defer></script>
   </body>
 </html>
diff --git a/showcase/compute/index.html b/showcase/compute/index.html
index 7ed6bc56..afca02ee 100644
--- a/showcase/compute/index.html
+++ b/showcase/compute/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-02-12T06:29:40.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Compute Example: Tangents and Bitangents"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/compute/"><meta name="twitter:title" content="Compute Example: Tangents and Bitangents"><meta name="twitter:url" content="/showcase/compute/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/7.88810c81.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/7.88810c81.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -122,6 +122,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/7.88810c81.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/7.88810c81.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/showcase/gifs/index.html b/showcase/gifs/index.html
index f780da2c..1e85c937 100644
--- a/showcase/gifs/index.html
+++ b/showcase/gifs/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-26T00:21:56.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Creating gifs"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/gifs/"><meta name="twitter:title" content="Creating gifs"><meta name="twitter:url" content="/showcase/gifs/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/18.83accaf9.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/18.83accaf9.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -149,6 +149,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/18.83accaf9.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/18.83accaf9.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/showcase/imgui-demo/index.html b/showcase/imgui-demo/index.html
index 4ef354a0..64710c73 100644
--- a/showcase/imgui-demo/index.html
+++ b/showcase/imgui-demo/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-24T19:14:17.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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.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.bee0cfc3.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.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.bee0cfc3.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -115,6 +115,6 @@ display<span class="token punctuation">.</span>queue<span class="token punctuati
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/19.bee0cfc3.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/19.bee0cfc3.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/showcase/index.html b/showcase/index.html
index eb1c0018..89fff2b1 100644
--- a/showcase/index.html
+++ b/showcase/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2020-10-08T22:49:47.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Foreward"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/"><meta name="twitter:title" content="Foreward"><meta name="twitter:url" content="/showcase/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/27.04f788d9.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/27.04f788d9.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -21,6 +21,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/27.04f788d9.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/27.04f788d9.js" defer></script>
   </body>
 </html>
diff --git a/showcase/pong/index.html b/showcase/pong/index.html
index d9b5c087..885512ff 100644
--- a/showcase/pong/index.html
+++ b/showcase/pong/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-05-24T19:14:17.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Pong"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/pong/"><meta name="twitter:title" content="Pong"><meta name="twitter:url" content="/showcase/pong/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/20.17c44988.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/20.17c44988.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -205,6 +205,6 @@
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/20.17c44988.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/20.17c44988.js" defer></script>
   </body>
 </html>
diff --git a/showcase/windowless/index.html b/showcase/windowless/index.html
index 0158f309..0517ab40 100644
--- a/showcase/windowless/index.html
+++ b/showcase/windowless/index.html
@@ -8,7 +8,7 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2021-07-14T12:26:05.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Wgpu without a window"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/windowless/"><meta name="twitter:title" content="Wgpu without a window"><meta name="twitter:url" content="/showcase/windowless/"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/21.fed3f353.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/21.fed3f353.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.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css">
   </head>
   <body>
@@ -228,6 +228,6 @@ output_buffer<span class="token punctuation">.</span><span class="token function
         </a>
         →
       </span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/21.fed3f353.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/21.fed3f353.js" defer></script><script src="/learn-wgpu/assets/js/22.2132e362.js" defer></script>
   </body>
 </html>
diff --git a/todo.html b/todo.html
index 18aa75bf..fa2ef96e 100644
--- a/todo.html
+++ b/todo.html
@@ -8,11 +8,11 @@
     <meta name="generator" content="VuePress 1.4.0">
     
     <meta property="article:modified_time" content="2020-10-08T22:49:47.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Coming Soon!"><meta property="og:type" content="website"><meta property="og:url" content="/todo.html"><meta name="twitter:title" content="Coming Soon!"><meta name="twitter:url" content="/todo.html"><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.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.153fadbc.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/29.281013fa.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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/3.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.a4165a76.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
+    <link rel="preload" href="/learn-wgpu/assets/css/0.styles.e2608c6d.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.68e9d3e2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/29.281013fa.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.fdda3025.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a3244b3f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.2da6599a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.3139647c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.4800fa06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.8cb7b62f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.d3375cb5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.83accaf9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.bee0cfc3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.17c44988.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.fed3f353.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5e2c93e5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.5c4d11d0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.745a2634.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/3.ee149516.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.a1927191.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.5061acf7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.3afd850a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.a23f98ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
     <link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.e2608c6d.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"><span>Showcase</span> <span class="arrow right"></span></p> <!----></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="coming-soon"><a href="#coming-soon" class="header-anchor">#</a> Coming Soon!</h1> <p>This section has not yet been completed.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">10/8/2020, 10:49:47 PM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
-    <script src="/learn-wgpu/assets/js/app.153fadbc.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/29.281013fa.js" defer></script>
+    <script src="/learn-wgpu/assets/js/app.68e9d3e2.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/29.281013fa.js" defer></script>
   </body>
 </html>