From f5b5302bdf0000501e4ffaeb03c5b23a28c870c6 Mon Sep 17 00:00:00 2001 From: "Deployment Bot (from Travis CI)" Date: Mon, 16 Aug 2021 15:42:20 +0000 Subject: [PATCH] Deploy sotrh/learn-wgpu to github.com/sotrh/learn-wgpu.git:gh-pages --- assets/js/12.1c11b7de.js | 1 + assets/js/12.a3244b3f.js | 1 - assets/js/{app.68e9d3e2.js => app.feef3d64.js} | 4 ++-- beginner/tutorial1-window/index.html | 4 ++-- beginner/tutorial2-swapchain/index.html | 4 ++-- beginner/tutorial3-pipeline/index.html | 10 +++++----- beginner/tutorial4-buffer/index.html | 4 ++-- beginner/tutorial5-textures/index.html | 4 ++-- beginner/tutorial6-uniforms/index.html | 4 ++-- beginner/tutorial7-instancing/index.html | 4 ++-- beginner/tutorial8-depth/index.html | 4 ++-- beginner/tutorial9-models/index.html | 4 ++-- index.html | 4 ++-- intermediate/tutorial10-lighting/index.html | 4 ++-- intermediate/tutorial11-normals/index.html | 4 ++-- intermediate/tutorial12-camera/index.html | 4 ++-- intermediate/tutorial13-threading/index.html | 4 ++-- news/index.html | 4 ++-- showcase/alignment/index.html | 4 ++-- showcase/compute/index.html | 4 ++-- showcase/gifs/index.html | 4 ++-- showcase/imgui-demo/index.html | 4 ++-- showcase/index.html | 4 ++-- showcase/pong/index.html | 4 ++-- showcase/windowless/index.html | 4 ++-- todo.html | 4 ++-- 26 files changed, 52 insertions(+), 52 deletions(-) create mode 100644 assets/js/12.1c11b7de.js delete mode 100644 assets/js/12.a3244b3f.js rename assets/js/{app.68e9d3e2.js => app.feef3d64.js} (99%) diff --git a/assets/js/12.1c11b7de.js b/assets/js/12.1c11b7de.js new file mode 100644 index 00000000..91b443d7 --- /dev/null +++ b/assets/js/12.1c11b7de.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{198:function(t,s,a){t.exports=a.p+"assets/img/tutorial3-pipeline-vertices.5e39e8fc.png"},199:function(t,s){t.exports="data:image/png;base64,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Io8++misWLFi0McDAAA0wDPPPHPxrVljY2O+WR0AAEgzHNHb764HAACYzxw/pxEAAKC/3BEBAADSDUdE/MPf/t6gjwMAAGiI3Rtb3poFAADkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECwJI8Ft+Px+L7gz4MACpKiACwaFcGiBgBYCmECAAAkE6IALAoc90BcVcEgMUSIgAs2M2CQ4wAsBhCBAAASCdEAFiQhdzxcFcEgIUSIgDMazGBIUYAWAghAgAApBMiANzUUu5wuCsCwHyECAA3tJygECMA3IwQAQAA0gkRAObUizsa7ooAcCNCBIDr9DIgxAgAcxEiAABAOiECwFX6cQfDXREAriVEALisn8EgRgC4khABAADSCREAIiLnjoW7IgBcIkQASA0EMQJAhBABAAAGQIgANNwg7lC4KwKAEAFosEEGgRgBaDYhAgAApBMiAA1VhjsSZTgGAAZDiAA0UJkCoEzHAkAeIQIAAKQTIgANU8Y7EGU8JgD6S4gANEiZF/xlPjYAek+IAAAA6YQIQENU4Y5DFY4RgN4QIgANUKUFfpWOFYClEyIAAEA6IQJQc1W8w1DFYwZgcYQIQI1VeUFf5WMHYH5CBAAASCdEAGqqDncU6vA1ADA3IQJQQ3VawNfpawHgA0IEAABIJ0QAaqaOdxDq+DUBNJ0QAaiROi/Y6/y1ATSREAEAANIJEYCaaMIdgyZ8jQBNIUQAaqBJC/Qmfa0AdSZEAACAdEIEoOKaeIegiV8zQN0IEYAKa/KCvMlfO0AdCBEAACCdEAGoKHcEPAcAVSZEACrIAvwDnguAahIiAABAOiECUDHuAFzPcwJQPUIEoEIsuG/McwNQLUIEAABIJ0QAKsKO//w8RwDVIUQAKsACe+E8VwDVIEQAAIB0QgSg5OzwL57nDKD8hAhAiVlQL53nDqDchAgAAJBOiACUlB395fMcApSXEAEoIQvo3vFcApSTEAEAANIJEYCSsYPfe55TgPIRIgAlYsHcP55bgHIRIgAAQDohAlASduz7z3MMUB5CBKAELJDzeK4BykGIAAAA6YQIwIDZoc/nOQcYPCECMEAWxIPjuQcYLCECAACkEyIAA2JHfvC8BgCDI0QABsACuDy8FgCDIUQAAIB0QgQgmR348vGaAOQTIgCJLHjLy2sDkEuIAAAA6YQIQBI77uXnNQLII0QAEljgVofXCiCHEAEAANIJEYA+s8NePV4zgP4TIgB9ZEFbXV47gP4SIgAAQDohAtAndtSrz2sI0D9CBKAPLGDrw2sJ0B9CBAAASCdEAHrMDnr9eE0Bek+IAPSQBWt9eW0BekuIAAAA6YQIQI/YMa8/rzFA7wgRgB6wQG0OrzVAbwgRAAAgnRABWCY75M3jNQdYPiECsAwWpM3ltQdYHiECAACkEyIAS2RHHOcAwNIJEYAlsADlEucCwNIIEQAAIJ0QAVgkO+BcyzkBsHhCBGARLDi5EecGwOIIEQAAIJ0QAVggO97MxzkCsHBCBGABLDBZKOcKwMIIEQAAIJ0QAZiHHW4WyzkDMD8hAnATFpQslXMH4OaECAAAkE6IANyAHW2WyzkEcGNCBGAOFpD0inMJYG5CBAAASCdEAK5hB5tec04BXE+IAFzBgpF+cW4BXE2IAAAA6YQIwPvsWNNvzjGADwgRgLBAJI9zDeAiIQIAAKQTIkDj2aEmm3MOQIgADWdByKA494CmEyIAAEA6IQI0lh1pBs05CDSZEAEayQKQsnAuAk0lRAAAgHRCBGgcO9CUjXMSaCIhAjSKBR9l5dwEmkaIAAAA6YQI0Bh2nCk75yjQJEIEaAQLPKrCuQo0hRABAADSCRGg9uwwUzXOWaAJhAhQaxZ0VJVzF6g7IQIAAKQTIkBt2VGm6pzDQJ0JEaCWLOCoC+cyUFdCBAAASCdEgNqxg0zdOKeBOhIiQK1YsFFXzm2gboQIAACQTogAtWHHmLpzjgN1IkSAWrBAoymc60BdCBEAACCdEAEqzw4xTeOcB+pAiACVZkFGUzn3gaoTIgAAQDohAlSWHWGazjUAVJkQASrJAgwuci0AVSVEAACAdEIEqBw7wHA11wRQRUIEqBQLLpibawOoGiECAACkEyJAZdjxhZtzjQBVIkSASrDAgoVxrQBVIUQAAIB0QgQoPTu8sDiuGaAKhAhQahZUsDSuHaDshAgAAJBOiAClZUcXlsc1BJSZEAFKyQIKesO1BJSVEAEAANIJEaB07OBCb7mmgDISIkCpWDBBf7i2gLIRIgAAQDohApSGHVvoL9cYUCZCBCgFCyTI4VoDykKIAAAA6YQIMHB2aCGXaw4oAyECDJQFEQyGaw8YNCECAACkEyLAwNiRhcFyDQKDJESAgbAAgnJwLQKDIkQAAIB0QgRIZwcWysU1CQyCEAFSWfBAObk2gWxCBAAASCdEgDR2XKHcXKNAJiECpLDAgWpwrQJZhAgAAJBOiAB9Z4cVqsU1C2QQIkBfWdBANbl2gX4TIgAAQDohAvSNHVWoNtcw0E9CBOgLCxioB9cy0C9CBAAASCdEgJ6zgwr14poG+kGIAD1lwQL15NoGek2IAAAA6YQI0DN2TKHeXONALwkRoCcsUKAZXOtArwgRAAAgnRABls0OKTSLax7oBSECLIsFCTSTax9YLiECAACkEyLAktkRhWYzBgDLIUSAJbEAASKMBcDSCREAACCdEAEWzQ4ocCVjArAUQgRYFAsOYC7GBmCxhAgAAJBOiAALZscTuBljBLAYQgRYEAsMYCGMFcBCCREAACCdEAHmZYcTWAxjBrAQQgS4KQsKYCmMHcB8hAgAAJBOiAA3ZEcTWA5jCHAzQgSYkwUE0AvGEuBGhAgAAJBOiADXsYMJ9JIxBZiLEAGuYsEA9IOxBbiWEAEAANIJEeAyO5ZAPxljgCsJESAiLBCAHMYa4BIhAgAApBMigB1KIJUxB4gQItB4FgTAIBh7ACECAACkEyLQYHYkgUEyBkGzCRFoKAsAoAyMRdBcQgQAAEgnRKCB7EACZWJMgmYSItAwJnygjIxN0DxCBAAASCdEoEHsOAJlZoyCZhEi0BAmeKAKjFXQHEIEAABIJ0SgAewwAlVizIJmECJQcyZ0oIqMXVB/QgQAAEgnRKDG7CgCVWYMg3oTIlBTJnCgDoxlUF9CBAAASCdEoIbsIAJ1YkyDehIiUDMmbKCOjG1QP0IEAABIJ0SgRuwYAnVmjIN6ESJQEyZooAmMdVAfQgQAAEgnRKAG7BACTWLMg3oQIlBxJmSgiYx9UH1CBAAASCdEoMLsCAJNZgyEahMiUFEmYABjIVSZEAEAANIJEaggO4AAHzAmQjUJEagYEy7A9YyNUD1CBAAASCdEoELs+AHcmDESqkWIQEWYYAHmZ6yE6hAiAABAOiECFWCHD2DhjJlQDUIESs6ECrB4xk4oPyECAACkEyJQYnb0AJbOGArlJkSgpEygAMtnLIXyEiIAAEA6IQIlZAcPoHeMqVBOQgRKxoQJ0HvGVigfIQIAAKQTIlAiduwA+scYC+UiRKAkTJAA/WeshfIQIgAAQDohAiVghw4gjzEXykGIwICZEAHyGXth8IQIAACQTojAANmRAxgcYzAMlhCBATEBAgyesRgGR4gAAADphAgMgB04gPIwJsNgCBFIZsIDKB9jM+QTIgAAQDohAonsuAGUlzEacgkRSGKCAyg/YzXkESIAAEA6IQIJ7LABVIcxG3IIEegzExpA9Ri7of+ECAAAkE6IQB/ZUQOoLmM49JcQgT4xgQFUn7Ec+keIAAAA6YQI9IEdNID6MKZDfwgR6DETFkD9GNuh94QIAACQTohAD9kxA6gvYzz0lhCBHjFBAdSfsR56R4gAAADphAj0gB0ygOYw5kNvCBFYJhMSQPMY+2H5hAgAAJBOiMAy2BEDaC5zACyPEIElMgEBYC6ApRMiAABAOiECS2AHDIBLzAmwNEIEFsmEA8C1zA2weEIEAABIJ0RgEex4AXAj5ghYHCECC2SCAWA+5gpYOCECAACkEyKwAHa4AFgocwYsjBCBeZhQAFgscwfMb3jQBwBl9/14bNCHAABQO+6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmGIyJ2b2wN+jgAAIAG+f/bSmo4C4fjXQAAAABJRU5ErkJggg=="},256:function(t,s,a){"use strict";a.r(s);var e=a(10),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"the-pipeline"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-pipeline"}},[t._v("#")]),t._v(" The Pipeline")]),t._v(" "),e("h2",{attrs:{id:"what-s-a-pipeline"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#what-s-a-pipeline"}},[t._v("#")]),t._v(" What's a pipeline?")]),t._v(" "),e("p",[t._v("If you're familiar with OpenGL, you may remember using shader programs. You can think of a pipeline as a more robust version of that. A pipeline describes all the actions the gpu will perform when acting on a set of data. In this section, we will be creating a "),e("code",[t._v("RenderPipeline")]),t._v(" specifically.")]),t._v(" "),e("h2",{attrs:{id:"wait-shaders"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#wait-shaders"}},[t._v("#")]),t._v(" Wait shaders?")]),t._v(" "),e("p",[t._v("Shaders are mini programs that you send to the gpu to perform operations on your data. There are 3 main types of shader: vertex, fragment, and compute. There are others such as geometry shaders, but they're more of an advanced topic. For now we're just going to use vertex, and fragment shaders.")]),t._v(" "),e("h2",{attrs:{id:"vertex-fragment-what-are-those"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#vertex-fragment-what-are-those"}},[t._v("#")]),t._v(" Vertex, fragment.. what are those?")]),t._v(" "),e("p",[t._v("A vertex is a point in 3d space (can also be 2d). These vertices are then bundled in groups of 2s to form lines and/or 3s to form triangles.")]),t._v(" "),e("img",{attrs:{src:a(198)}}),t._v(" "),e("p",[t._v("Most modern rendering uses triangles to make all shapes, from simple shapes (such as cubes), to complex ones (such as people). These triangles are stored as vertices which are the points that make up the corners of the triangles.")]),t._v(" "),e("p",[t._v("We use a vertex shader to manipulate the vertices, in order to transform the shape to look the way we want it.")]),t._v(" "),e("p",[t._v("The vertices are then converted into fragments. Every pixel in the result image gets at least one fragment. Each fragment has a color that will be copied to its corresponding pixel. The fragment shader decides what color the fragment will be.")]),t._v(" "),e("h2",{attrs:{id:"wgsl"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#wgsl"}},[t._v("#")]),t._v(" WGSL")]),t._v(" "),e("p",[t._v("WebGPU supports two shader languages natively: SPIR-V, and WGSL. SPIR-V is actually a binary format developed by Kronos to be a compilation target for other languages such as GLSL and HLSL. It allows for easy porting of code. The only problem is that it's not human readable as it's a binary language. WGSL is meant to fix that. WGSL's development focuses on getting it to easily convert into SPIR-V. WGPU even allows us to supply WGSL for our shaders.")]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("If you've gone through this tutorial before you'll likely notice that I've switched from using GLSL to using WGSL. Given that GLSL support is a secondary concern and that WGSL is the first class language of WGPU, I've elected to convert all the tutorials to use WGSL. Some of the showcase examples still use GLSL, but the main tutorial and all examples going forward will be using WGSL.")])]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("The WGSL spec and it's inclusion in WGPU is still in development. If you run into trouble using it, you may want the folks at "),e("a",{attrs:{href:"https://app.element.io/#/room/#wgpu:matrix.org",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://app.element.io/#/room/#wgpu:matrix.org"),e("OutboundLink")],1),t._v(" to take a look at your code.")])]),t._v(" "),e("h2",{attrs:{id:"writing-the-shaders"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#writing-the-shaders"}},[t._v("#")]),t._v(" Writing the shaders")]),t._v(" "),e("p",[t._v("In the same folder as "),e("code",[t._v("main.rs")]),t._v(", create a file "),e("code",[t._v("shader.wgsl")]),t._v(". Write the following code in "),e("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-wgsl extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("// Vertex shader\n\nstruct VertexOutput {\n [[builtin(position)]] clip_position: vec4;\n};\n\n[[stage(vertex)]]\nfn main(\n [[builtin(vertex_index)]] in_vertex_index: u32,\n) -> VertexOutput {\n var out: VertexOutput;\n let x = f32(1 - i32(in_vertex_index)) * 0.5;\n let y = f32(i32(in_vertex_index & 1u) * 2 - 1) * 0.5;\n out.clip_position = vec4(x, y, 0.0, 1.0);\n return out;\n}\n")])])]),e("p",[t._v("First we declare "),e("code",[t._v("struct")]),t._v(" to store the output of our vertex shader. This consists of only one field currently which is our vertex's "),e("code",[t._v("clip_position")]),t._v(". The "),e("code",[t._v("[[builtin(position)]]")]),t._v(" bit tells WGPU that this is the value we want to use as the vertex's "),e("a",{attrs:{href:"https://en.wikipedia.org/wiki/Clip_coordinates",target:"_blank",rel:"noopener noreferrer"}},[t._v("clip coordinates"),e("OutboundLink")],1),t._v(". This is analogous to GLSL's "),e("code",[t._v("gl_Position")]),t._v(" variable.")]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("Vector types such as "),e("code",[t._v("vec4")]),t._v(" are generic. Currently you must specify the type of value the vector will contain. Thus a 3D vector using 32bit floats would be "),e("code",[t._v("vec3")]),t._v(".")])]),t._v(" "),e("p",[t._v("The next part of the shader code is the "),e("code",[t._v("main")]),t._v(" function. We are using "),e("code",[t._v("[[stage(vertex)]]")]),t._v(" to mark this function as a valid entry point for a vertex shader. We expect a "),e("code",[t._v("u32")]),t._v(" called "),e("code",[t._v("in_vertex_index")]),t._v(" which gets its value from "),e("code",[t._v("[[builtin(vertex_index)]]")]),t._v(".")]),t._v(" "),e("p",[t._v("We then declare a variable called "),e("code",[t._v("out")]),t._v(" using our "),e("code",[t._v("VertexOutput")]),t._v(" struct. We create two other variables for the "),e("code",[t._v("x")]),t._v(", and "),e("code",[t._v("y")]),t._v(", of a triangle.")]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("The "),e("code",[t._v("f32()")]),t._v(" and "),e("code",[t._v("i32()")]),t._v(" bits are examples of casts.")])]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("Variables defined with "),e("code",[t._v("var")]),t._v(" can be modified, but must specify their type. Variables created with "),e("code",[t._v("let")]),t._v(" can have their types inferred, but their value cannot be changed during the shader.")])]),t._v(" "),e("p",[t._v("Now we can save our "),e("code",[t._v("clip_position")]),t._v(" to "),e("code",[t._v("out")]),t._v(". We then just return "),e("code",[t._v("out")]),t._v(" and we're done with the vertex shader!")]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("We technically didn't need a struct for this example, and could have just done something like the following:")]),t._v(" "),e("div",{staticClass:"language-wgsl extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("[[stage(vertex)]]\nfn main(\n [[builtin(vertex_index)]] in_vertex_index: u32\n) -> [[builtin(position)]] vec4 {\n // Vertex shader code...\n}\n")])])]),e("p",[t._v("We'll be adding more fields to "),e("code",[t._v("VertexOutput")]),t._v(" later, so we might as well start using it now.")])]),t._v(" "),e("p",[t._v("Next up the fragment shader. Still in "),e("code",[t._v("shader.wgsl")]),t._v(" add the follow:")]),t._v(" "),e("div",{staticClass:"language-wgsl extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("// Fragment shader\n\n[[stage(fragment)]]\nfn main(in: VertexOutput) -> [[location(0)]] vec4 {\n return vec4(0.3, 0.2, 0.1, 1.0);\n}\n")])])]),e("p",[t._v("All this does is set the color of the current fragment to brown color.")]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("Notice that this function is also called "),e("code",[t._v("main")]),t._v(". Because this function is marked as a fragment shader entry point, this is ok. You can change the names around if you like, but I've opted to keep them the same.")])]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("[[location(0)]]")]),t._v(" bit tells WGPU to store the value the "),e("code",[t._v("vec4")]),t._v(" returned by this function in the first color target. We'll get into what this is later.")]),t._v(" "),e("h2",{attrs:{id:"how-do-we-use-the-shaders"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#how-do-we-use-the-shaders"}},[t._v("#")]),t._v(" How do we use the shaders?")]),t._v(" "),e("p",[t._v("This is the part where we finally make the thing in the title: the pipeline. First let's modify "),e("code",[t._v("State")]),t._v(" to include the following.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sc_desc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChainDescriptor")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n swap_chain"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChain")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pipeline"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("Now let's move to the "),e("code",[t._v("new()")]),t._v(" method, and start making the pipeline. We'll have to load in those shaders we made earlier, as the "),e("code",[t._v("render_pipeline")]),t._v(" requires those.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Shader"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flags"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderFlags")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("One more thing, we need to create a "),e("code",[t._v("PipelineLayout")]),t._v(". We'll get more into this after we cover "),e("code",[t._v("Buffer")]),t._v("s.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Finally we have all we need to create the "),e("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n buffers"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n module"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n format"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" sc_desc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n blend"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrite")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// continued ...")]),t._v("\n")])])]),e("p",[t._v("Two things to note here:")]),t._v(" "),e("ol",[e("li",[t._v("Here you can specify which function inside of the shader should be called, which is known as the "),e("code",[t._v("entry_point")]),t._v(". These are the functions we marked with "),e("code",[t._v("[[stage(vertex)]]")]),t._v(" and "),e("code",[t._v("[[stage(fragment)]]")])]),t._v(" "),e("li",[t._v("The "),e("code",[t._v("buffers")]),t._v(" field tells "),e("code",[t._v("wgpu")]),t._v(" what type of vertices we want to pass to the vertex shader. We're specifying the vertices in the vertex shader itself so we'll leave this empty. We'll put something there in the next tutorial.")]),t._v(" "),e("li",[t._v("The "),e("code",[t._v("fragment")]),t._v(" is technically optional, so you have to wrap it in "),e("code",[t._v("Some()")]),t._v(". We need it if we want to store color data to the "),e("code",[t._v("swap_chain")]),t._v(".")]),t._v(" "),e("li",[t._v("The "),e("code",[t._v("targets")]),t._v(" field tells "),e("code",[t._v("wgpu")]),t._v(" what color outputs it should set up.Currently we only need one for the "),e("code",[t._v("swap_chain")]),t._v(". We use the "),e("code",[t._v("swap_chain")]),t._v("'s format so that copying to it is easy, and we specify that the blending should just replace old pixel data with new data. We also tell "),e("code",[t._v("wgpu")]),t._v(" to write to all colors: red, blue, green, and alpha. "),e("em",[t._v("We'll talk more about")]),e("code",[t._v("color_state")]),t._v(" "),e("em",[t._v("when we talk about textures.")])])]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[t._v(" primitive"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n strip_index_format"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n cull_mode"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::DEPTH_CLAMPING")]),t._v("\n clamp_depth"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::CONSERVATIVE_RASTERIZATION")]),t._v("\n conservative"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// continued ...")]),t._v("\n")])])]),e("p",[t._v("The "),e("code",[t._v("primitive")]),t._v(" field describes how to interpret our vertices when converting them into triangles.")]),t._v(" "),e("ol",[e("li",[t._v("Using "),e("code",[t._v("PrimitiveTopology::TriangleList")]),t._v(" means that each three vertices will correspond to one triangle.")]),t._v(" "),e("li",[t._v("The "),e("code",[t._v("front_face")]),t._v(" and "),e("code",[t._v("cull_mode")]),t._v(" fields tell "),e("code",[t._v("wgpu")]),t._v(" how to determine whether a given triangle is facing forward or not. "),e("code",[t._v("FrontFace::Ccw")]),t._v(" means that a triangle is facing forward if the vertices are arranged in a counter clockwise direction. Triangles that are not considered facing forward are culled (not included in the render) as specified by "),e("code",[t._v("CullMode::Back")]),t._v(". We'll cover culling a bit more when we cover "),e("code",[t._v("Buffer")]),t._v("s.")])]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[t._v(" depth_stencil"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n multisample"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n mask"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n alpha_to_coverage_enabled"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("The rest of the method is pretty simple:")]),t._v(" "),e("ol",[e("li",[t._v("We're not using a depth/stencil buffer currently, so we leave "),e("code",[t._v("depth_stencil")]),t._v(" as "),e("code",[t._v("None")]),t._v(". "),e("em",[t._v("This will change later")]),t._v(".")]),t._v(" "),e("li",[t._v("This determines how many samples this pipeline will use. Multisampling is a complex topic, so we won't get into it here.")]),t._v(" "),e("li",[e("code",[t._v("sample_mask")]),t._v(" specifies which samples should be active. In this case we are using all of them.")]),t._v(" "),e("li",[e("code",[t._v("alpha_to_coverage_enabled")]),t._v(" has to do with anti-aliasing. We're not covering anti-aliasing here, so we'll leave this as false now.")])]),t._v(" "),e("p",[t._v("Now all we have to do is save the "),e("code",[t._v("render_pipeline")]),t._v(" to "),e("code",[t._v("State")]),t._v(" and then we can use it!")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new()")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sc_desc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n swap_chain"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pipeline"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("h2",{attrs:{id:"using-a-pipeline"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#using-a-pipeline"}},[t._v("#")]),t._v(" Using a pipeline")]),t._v(" "),e("p",[t._v("If you run your program now, it'll take a little longer to start, but it will still show the blue screen we got in the last section. That's because while we created the "),e("code",[t._v("render_pipeline")]),t._v(", we need to modify the code in "),e("code",[t._v("render()")]),t._v(" to actually use it.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is what [[location(0)]] in the fragment shader targets")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("frame"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n render_pass"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n")])])]),e("p",[t._v("We didn't change much, but let's talk about what we did change.")]),t._v(" "),e("ol",[e("li",[t._v("We renamed "),e("code",[t._v("_render_pass")]),t._v(" to "),e("code",[t._v("render_pass")]),t._v(" and made it mutable.")]),t._v(" "),e("li",[t._v("We set the pipeline on the "),e("code",[t._v("render_pass")]),t._v(" using the one we just created.")]),t._v(" "),e("li",[t._v("We tell "),e("code",[t._v("wgpu")]),t._v(" to draw "),e("em",[t._v("something")]),t._v(" with 3 vertices, and 1 instance. This is where "),e("code",[t._v("[[builtin(vertex_index)]]")]),t._v(" comes from.")])]),t._v(" "),e("p",[t._v("With all that you should be seeing a lovely brown triangle.")]),t._v(" "),e("p",[e("img",{attrs:{src:a(199),alt:"Said lovely brown triangle"}})]),t._v(" "),e("h2",{attrs:{id:"challenge"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),e("p",[t._v("Create a second pipeline that uses the triangle's position data to create a color that it then sends to the fragment shader. Have the app swap between these when you press the spacebar. "),e("em",[t._v("Hint: you'll need to modify")]),t._v(" "),e("code",[t._v("VertexOutput")])]),t._v(" "),e("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/12.a3244b3f.js b/assets/js/12.a3244b3f.js deleted file mode 100644 index 8bc5d98e..00000000 --- a/assets/js/12.a3244b3f.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{198:function(t,s,a){t.exports=a.p+"assets/img/tutorial3-pipeline-vertices.5e39e8fc.png"},199:function(t,s){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyIAAAJzCAYAAADz6Ke4AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAByFSURBVHic7d1rkJ31fdjx3zl7EyAkIaEVSDJIsgdjiRiZCNIa5DQGh2majlt3WrtTe/rCY0/z2nnXvmtnept22pmOp3Y742ntJG2aJm16iwmMCWNS18gEEwwYBEK2bruLtLqiy+45T18ICV1W2ts5v/NcPp9XuuwePXvO8/z//+//Obtqbdy4sSiKIoaGhuLhhx+P7ds3x/r162N0dDQAAACWY2ZmJqanp+Oll16KPXv2RKfTiVarFcNFUcSqVavi85//fOzevTt2794dY2Njgz5eAACgJk6dOhV79uyJ559/Pr7zne/EyZMnY3hoaCi+8IUvxNe+9rWIiJieno5utzvgQwUAAOpiaGgoPv7xj8euXbsiIuIb3/hGDO/atSsef/zxaLVacfLkyQEfIgAAUDedTic6nU6cP38+HnnkkdizZ08Mb9++PR588ME4ffp0FEUx6GMEAABq7L777oudO3fG8Pj4eKxatcrdEAAAoO+Gh4dj7dq10R4dHY1OpzPo4wEAABpiZGQkhiMuvmfL27IAAIAsQgQAAEjXjghvzQKoou6h+P5/+Nfxr/7907HvQh8/p9/HdJ1OvPPU1+Of/7N/Ef/l5ffCNhnA4ExMTMSPf/zjq/57j6Io4uWXX47Dhw8v67HdEQGoqiKimJmN2QvdiKIbRdFa0ucU5w7GK392JFbueCi2rlrAY/T6mOYwOtaOiFaMjrXNTwAL8N3vfjciIp588smePeb09PTlCGm327Fjx44oiiJeeeWVOHz4cBw5ciTGxsbijjvuWNLjD0dEdLtdAz1A1bS3xK///X8af6OYjZOT78Z73QWM49d9TjdOv/GDeOZPj8Un7t0ZW25v5x/TdYpotd4PmKKIKAp3RQAWqJdr+vHx8di2bVvs3bs3Dh48GK1WKzqdzuU7IR/+8IdjfHw8LlxY2i3wy3dEABi0M/Hy7/27eGr/bfGLX/hy/MqmVrz7f78d//H5yShW7oy/+ZUn4p72dLzw29+KP5lYH4998ZNx/N/8t3hlZlv82m/89dg+/Hb80b/9g3hj8xPx2c0H4rkX9sa750di7bZfis/86i/GxrGImH01fucf/MH7n/PZuPvtP47/9dw7Mdvtxg9/61/GD1u3xC987u/Fk1uH8o4pIi5M/Fn88VM/iL1HZ+O2zQ/GznVj0Yozl5+Z4uzBePHZ5+LFtybiTGcs1my+P37plx+Lj915YXHH93e/GH9h3TLv+gA0xMzMTDzyyCMxPDwcr7/+ehw4cODy391///3x0EMPxdGjR5f8+N6aBVAaK+O+7ZvimXcOxOTEiehuHI3JyemIkZEYOjsVUye68aEVE3HkaBHttffHx8ZXxIvtiGiNxViriCLGYqwdMfP29+L3998eG+/9UKz9+b6Y+umfxFN3bIovPboh2u9/zKXPmS2GY8VoRHFuLO7e/onYsnpFbL6zdcWckHBMswfi+f/5vXh9uoiROzbG6rOvxvMvvRdFtCOiiKJ7NH70h78fzx64ECvW3RtbbjkeP3vnR/G/330v2l/8K4s7vvURRcd8B9TD008/fd0a/qmnnrr868985jPLevyiKGJqaip27twZExMTMT09HRERa9eujZ07d8bU1NSyHl+IAJRGJ27ZtDXWtn8WRw4eibMPrIhDh7px10MPx+ieF+Pw5LmYWXEoDs5E3LrtnlgzO/PBpxbF5XG86I7GA3/nN+NLvzAa7734rfhH/+nVOH70WJwvxmPFlWN90Y6ND//leOjNl+OdU7fFR3b/evzava04d+JYnLpQpB3T6OG9sfdEN1rrHo0vf+1z8ZHRk/GDb/7j+L03uhFRROfwq/HnB89H+86/FF/9zb8a9wydi1d/55/Et158M156/Xh89COLOL5OEToEyPD000/f9O+feOKJvh9DL9b3RVHEc889dzlCIiKOHTsWzz77bOzYseODt9IugbdmAZRI9457YuutES8cOhITUyvi0LlbYut922P0zRfi5YmpeHfsYLwXI7F9y3h04+DcD9LeFFvWTsehw91oja2J21oRJy9+q8U1ijh/cjrOFxd/PXv6aExNXT+h9PuYZs6ejjPdVoxu2Rqrjx2Mg92huHPL+mi/MRERETOnjseJbitGNm+MFZMH41DRjtX3bIyhH70RR49Px+xijs+mG1AjX/nKVy7/+pvf/GZERHz1q1+9/Gdvv/32sh6/KIr4yU9+EkeOHImIiB07dkS3243XXnvtqj9baoy4IwJQIsXsnbFly0i88NpUHNk/Gsdam+Ivrl0TY5uH4k8nD8X+kaNRtO+NrXcVVy+qr7j7EO2RaHc7UbQiurOXPqZ19cdc/pyr/vU5YqX/xxTtixNYq3shznaKaMdMXOhcmtSKiKH3v4G+eyHOdYsYik6cm7n4YyRb7eGlHx9AH10ZBHN56623lv1vzPUYvXjcS06cOBGTk5MREfHRj340HnjggYi42A5vvPFGTE5OxubNm2P16tVLenw/NQugTIpWbNi6Odo/mYh39o9FrHswxociRjbeFa19+2LfcDdaG7bFpuFuFLNXfNo1UVF0iijaccVPmyqu/5j3fxpVq92KKDoxM9ONopjjp2b1+ZhGVt8RK1tFnPz5vjh0YWNsGj4TB382Fd2LDxKj6zfEuvZrMXVgfxy+sDk2jZyLA+8cjk6rHeMb1karGws/vg9+DD5AX+3du3cg/26vf2rWpz/96di/f/9V3xPy0EMPRbfbjS1btsTo6GicO3duSY9/+Y7Ict7fBUCvdGN049ZY39oXRw6fjbGdd8XtRTdi/O649cwLcaSIWL1jc6wsImbnf7AFGIs1a2+NVnEqfvx//nNMrGrH2k98Ln7lwyNpx9Qa3xEfX/f/4rmje+IPf+tArB87E1NHZyPi/Xlp3Sdi930/jP/60w/+fmLydMTtO+OTH7stojOb/JwBlM+lOzC9DKBz587FypUrY9euXTExMXH5zycnJ+Phhx+OM2fOxOnTp5f8+JdDZGhoaL6PBSBBZ+WHYtuqiCPHW7Fx07rodouINXfH3e0iftq5Jbbdc0fMdjvX392Y4/fzf0wrNj361+KTh/97vPDzd2Mi7oqtq67/TwT7eUzd2XXxy1/6XJz+3T+KP584ERc2Px5ffnIyvv3tH0UUEd3zQ/Gxv/0b8bee+h/xvZf2xeEzo7Huvt3xq599Iu7tHIvTxSKOb5mvDUBZvfnmm3153FOnTsWpU6eu+/NL3yOyHK2vf/3rxac+9akYGRmZ/6MB6L/WrTG+dXOsGS7i7OQ78fPjMxHDq2Pz1g1xa6sTpw7ti8OnuxGt22LDtk2xun06jrx1KE4W1/y+G9G6ZTy2fGhNDL83GfsOHI/Zaz+nG9EauT3G714ft48NRXQuxPEjP4t33yvyjiki2ivWxIYN62LlaMTMmemYPD0ad991e5ybeDsOnuhEDK2INXfeGWtW3hIj7W7MnD0Vx6bejZPnu4s7PgBK4ZlnnrkYIo8++misWLFi0McDAAA0wDPPPHPxrVljY2O+WR0AAEgzHNHb764HAACYzxw/pxEAAKC/3BEBAADSDUdE/MPf/t6gjwMAAGiI3Rtb3poFAADkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABAOiECAACkEyIAAEA6IQIAAKQTIgAAQDohAgAApBMiAABA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9Ri7of+ECAAAkE6IQB/ZUQOoLmM49JcQgT4xgQFUn7Ec+keIAAAA6YQI9IEdNID6MKZDfwgR6DETFkD9GNuh94QIAACQTohAD9kxA6gvYzz0lhCBHjFBAdSfsR56R4gAAADphAj0gB0ygOYw5kNvCBFYJhMSQPMY+2H5hAgAAJBOiMAy2BEDaC5zACyPEIElMgEBYC6ApRMiAABAOiECS2AHDIBLzAmwNEIEFsmEA8C1zA2weEIEAABIJ0RgEex4AXAj5ghYHCECC2SCAWA+5gpYOCECAACkEyKwAHa4AFgocwYsjBCBeZhQAFgscwfMb3jQBwBl9/14bNCHAABQO+6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmECAAAkE6IAAAA6YQIAACQTogAAADphAgAAJBOiAAAAOmGIyJ2b2wN+jgAAIAG+f/bSmo4C4fjXQAAAABJRU5ErkJggg=="},256:function(t,s,a){"use strict";a.r(s);var e=a(10),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"the-pipeline"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-pipeline"}},[t._v("#")]),t._v(" The Pipeline")]),t._v(" "),e("h2",{attrs:{id:"what-s-a-pipeline"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#what-s-a-pipeline"}},[t._v("#")]),t._v(" What's a pipeline?")]),t._v(" "),e("p",[t._v("If you're familiar with OpenGL, you may remember using shader programs. You can think of a pipeline as a more robust version of that. A pipeline describes all the actions the gpu will perform when acting on a set of data. In this section, we will be creating a "),e("code",[t._v("RenderPipeline")]),t._v(" specifically.")]),t._v(" "),e("h2",{attrs:{id:"wait-shaders"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#wait-shaders"}},[t._v("#")]),t._v(" Wait shaders?")]),t._v(" "),e("p",[t._v("Shaders are mini programs that you send to the gpu to perform operations on your data. There are 3 main types of shader: vertex, fragment, and compute. There are others such as geometry shaders, but they're more of an advanced topic. For now we're just going to use vertex, and fragment shaders.")]),t._v(" "),e("h2",{attrs:{id:"vertex-fragment-what-are-those"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#vertex-fragment-what-are-those"}},[t._v("#")]),t._v(" Vertex, fragment.. what are those?")]),t._v(" "),e("p",[t._v("A vertex is a point in 3d space (can also be 2d). These vertices are then bundled in groups of 2s to form lines and/or 3s to form triangles.")]),t._v(" "),e("img",{attrs:{src:a(198)}}),t._v(" "),e("p",[t._v("Most modern rendering uses triangles to make all shapes, from simple shapes (such as cubes), to complex ones (such as people). These triangles are stored as vertices which are the points that make up the corners of the triangles.")]),t._v(" "),e("p",[t._v("We use a vertex shader to manipulate the vertices, in order to transform the shape to look the way we want it.")]),t._v(" "),e("p",[t._v("The vertices are then converted into fragments. Every pixel in the result image gets at least one fragment. Each fragment has a color that will be copied to its corresponding pixel. The fragment shader decides what color the fragment will be.")]),t._v(" "),e("h2",{attrs:{id:"wgsl"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#wgsl"}},[t._v("#")]),t._v(" WGSL")]),t._v(" "),e("p",[t._v("WebGPU supports two shader languages natively: SPIR-V, and WGSL. SPIR-V is actually a binary format developed by Kronos to be a compilation target for other languages such as GLSL and HLSL. It allows for easy porting of code. The only problem is that it's not human readable as it's a binary language. WGSL is meant to fix that. WGSL's development focuses on getting it to easily convert into SPIR-V. WGPU even allows us to supply WGSL for our shaders.")]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("If you've gone through this tutorial before you'll likely notice that I've switched from using GLSL to using WGSL. Given that GLSL support is a secondary concern and that WGSL is the first class language of WGPU, I've elected to convert all the tutorials to use WGSL. Some of the showcase examples still use GLSL, but the main tutorial and all examples going forward will be using WGSL.")])]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("The WGSL spec and it's inclusion in WGPU is still in development. If you run into trouble using it, you may want the folks at "),e("a",{attrs:{href:"https://app.element.io/#/room/#wgpu:matrix.org",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://app.element.io/#/room/#wgpu:matrix.org"),e("OutboundLink")],1),t._v(" to take a look at your code.")])]),t._v(" "),e("h2",{attrs:{id:"writing-the-shaders"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#writing-the-shaders"}},[t._v("#")]),t._v(" Writing the shaders")]),t._v(" "),e("p",[t._v("In the same folder as "),e("code",[t._v("main.rs")]),t._v(", create a file "),e("code",[t._v("shader.wgsl")]),t._v(". Write the following code in "),e("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-wgsl extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("// Vertex shader\n\nstruct VertexOutput {\n [[builtin(position)]] clip_position: vec4;\n};\n\n[[stage(vertex)]]\nfn main(\n [[builtin(vertex_index)]] in_vertex_index: u32,\n) -> VertexOutput {\n var out: VertexOutput;\n let x = f32(1 - i32(in_vertex_index)) * 0.5;\n let y = f32(i32(in_vertex_index & 1u) * 2 - 1) * 0.5;\n out.clip_position = vec4(x, y, 0.0, 1.0);\n return out;\n}\n")])])]),e("p",[t._v("First we declare "),e("code",[t._v("struct")]),t._v(" to store the output of our vertex shader. This consists of only one field currently which is our vertex's "),e("code",[t._v("clip_position")]),t._v(". The "),e("code",[t._v("[[builtin(position)]]")]),t._v(" bit tells WGPU that this is the value we want to use as the vertex's "),e("a",{attrs:{href:"https://en.wikipedia.org/wiki/Clip_coordinates",target:"_blank",rel:"noopener noreferrer"}},[t._v("clip coordinates"),e("OutboundLink")],1),t._v(". This is analogous to GLSL's "),e("code",[t._v("gl_Position")]),t._v(" variable.")]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("Vector types such as "),e("code",[t._v("vec4")]),t._v(" are generic. Currently you must specify the type of value the vector will contain. Thus a 3D vector using 32bit floats would be "),e("code",[t._v("vec3")]),t._v(".")])]),t._v(" "),e("p",[t._v("The next part of the shader code is the "),e("code",[t._v("main")]),t._v(" function. We using "),e("code",[t._v("[[stage(vertex)]]")]),t._v(" to mark this function as a valid entry point for a vertex shader. We expect a "),e("code",[t._v("u32")]),t._v(" called "),e("code",[t._v("in_vertex_index")]),t._v(" which gets its value from "),e("code",[t._v("[[builtin(vertex_index)]]")]),t._v(".")]),t._v(" "),e("p",[t._v("We then declare a variable called "),e("code",[t._v("out")]),t._v(" using our "),e("code",[t._v("VertexOutput")]),t._v(" struct. We create two other variables for the "),e("code",[t._v("x")]),t._v(", and "),e("code",[t._v("y")]),t._v(", of a triangle.")]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("The "),e("code",[t._v("f32()")]),t._v(" and "),e("code",[t._v("i32()")]),t._v(" bits are examples of casts.")])]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("Variables defined with "),e("code",[t._v("var")]),t._v(" can be modified, but must specify their type. Variables created with "),e("code",[t._v("let")]),t._v(" can have their types inferred, but their value cannot be changed during the shader.")])]),t._v(" "),e("p",[t._v("Now we can save our "),e("code",[t._v("clip_position")]),t._v(" to "),e("code",[t._v("out")]),t._v(". We then just return "),e("code",[t._v("out")]),t._v(" and we're done with the vertex shader!")]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("We technically didn't need a struct for this example, and could have just done something like the following:")]),t._v(" "),e("div",{staticClass:"language-wgsl extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("[[stage(vertex)]]\nfn main(\n [[builtin(vertex_index)]] in_vertex_index: u32\n) -> [[builtin(position)]] vec4 {\n // Vertex shader code...\n}\n")])])]),e("p",[t._v("We'll be adding more fields to "),e("code",[t._v("VertexOutput")]),t._v(" later, so we might as well start using it now.")])]),t._v(" "),e("p",[t._v("Next up the fragment shader. Still in "),e("code",[t._v("shader.wgsl")]),t._v(" add the follow:")]),t._v(" "),e("div",{staticClass:"language-wgsl extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("// Fragment shader\n\n[[stage(fragment)]]\nfn main(in: VertexOutput) -> [[location(0)]] vec4 {\n return vec4(0.3, 0.2, 0.1, 1.0);\n}\n")])])]),e("p",[t._v("All this does is set the color of the current fragment to brown color.")]),t._v(" "),e("div",{staticClass:"note"},[e("p",[t._v("Notice that this function is also called "),e("code",[t._v("main")]),t._v(". Because this function is marked as a fragment shader entry point, this is ok. You can change the names around if you like, but I've opted to keep them the same.")])]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("[[location(0)]]")]),t._v(" bit tells WGPU to store the value the "),e("code",[t._v("vec4")]),t._v(" returned by this function in the first color target. We'll get into what this is later.")]),t._v(" "),e("h2",{attrs:{id:"how-do-we-use-the-shaders"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#how-do-we-use-the-shaders"}},[t._v("#")]),t._v(" How do we use the shaders?")]),t._v(" "),e("p",[t._v("This is the part where we finally make the thing in the title: the pipeline. First let's modify "),e("code",[t._v("State")]),t._v(" to include the following.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.rs")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sc_desc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChainDescriptor")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n swap_chain"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwapChain")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pipeline"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("Now let's move to the "),e("code",[t._v("new()")]),t._v(" method, and start making the pipeline. We'll have to load in those shaders we made earlier, as the "),e("code",[t._v("render_pipeline")]),t._v(" requires those.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Shader"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flags"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderFlags")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("One more thing, we need to create a "),e("code",[t._v("PipelineLayout")]),t._v(". We'll get more into this after we cover "),e("code",[t._v("Buffer")]),t._v("s.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Finally we have all we need to create the "),e("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n buffers"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n module"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n format"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" sc_desc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n blend"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrite")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// continued ...")]),t._v("\n")])])]),e("p",[t._v("Two things to note here:")]),t._v(" "),e("ol",[e("li",[t._v("Here you can specify which function inside of the shader should be called, which is known as the "),e("code",[t._v("entry_point")]),t._v(". These are the functions we marked with "),e("code",[t._v("[[stage(vertex)]]")]),t._v(" and "),e("code",[t._v("[[stage(fragment)]]")])]),t._v(" "),e("li",[t._v("The "),e("code",[t._v("buffers")]),t._v(" field tells "),e("code",[t._v("wgpu")]),t._v(" what type of vertices we want to pass to the vertex shader. We're specifying the vertices in the vertex shader itself so we'll leave this empty. We'll put something there in the next tutorial.")]),t._v(" "),e("li",[t._v("The "),e("code",[t._v("fragment")]),t._v(" is technically optional, so you have to wrap it in "),e("code",[t._v("Some()")]),t._v(". We need it if we want to store color data to the "),e("code",[t._v("swap_chain")]),t._v(".")]),t._v(" "),e("li",[t._v("The "),e("code",[t._v("targets")]),t._v(" field tells "),e("code",[t._v("wgpu")]),t._v(" what color outputs it should set up.Currently we only need one for the "),e("code",[t._v("swap_chain")]),t._v(". We use the "),e("code",[t._v("swap_chain")]),t._v("'s format so that copying to it is easy, and we specify that the blending should just replace old pixel data with new data. We also tell "),e("code",[t._v("wgpu")]),t._v(" to write to all colors: red, blue, green, and alpha. "),e("em",[t._v("We'll talk more about")]),e("code",[t._v("color_state")]),t._v(" "),e("em",[t._v("when we talk about textures.")])])]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[t._v(" primitive"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n strip_index_format"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n cull_mode"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::DEPTH_CLAMPING")]),t._v("\n clamp_depth"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::CONSERVATIVE_RASTERIZATION")]),t._v("\n conservative"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// continued ...")]),t._v("\n")])])]),e("p",[t._v("The "),e("code",[t._v("primitive")]),t._v(" field describes how to interpret our vertices when converting them into triangles.")]),t._v(" "),e("ol",[e("li",[t._v("Using "),e("code",[t._v("PrimitiveTopology::TriangleList")]),t._v(" means that each three vertices will correspond to one triangle.")]),t._v(" "),e("li",[t._v("The "),e("code",[t._v("front_face")]),t._v(" and "),e("code",[t._v("cull_mode")]),t._v(" fields tell "),e("code",[t._v("wgpu")]),t._v(" how to determine whether a given triangle is facing forward or not. "),e("code",[t._v("FrontFace::Ccw")]),t._v(" means that a triangle is facing forward if the vertices are arranged in a counter clockwise direction. Triangles that are not considered facing forward are culled (not included in the render) as specified by "),e("code",[t._v("CullMode::Back")]),t._v(". We'll cover culling a bit more when we cover "),e("code",[t._v("Buffer")]),t._v("s.")])]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[t._v(" depth_stencil"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n multisample"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n mask"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n alpha_to_coverage_enabled"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("The rest of the method is pretty simple:")]),t._v(" "),e("ol",[e("li",[t._v("We're not using a depth/stencil buffer currently, so we leave "),e("code",[t._v("depth_stencil")]),t._v(" as "),e("code",[t._v("None")]),t._v(". "),e("em",[t._v("This will change later")]),t._v(".")]),t._v(" "),e("li",[t._v("This determines how many samples this pipeline will use. Multisampling is a complex topic, so we won't get into it here.")]),t._v(" "),e("li",[e("code",[t._v("sample_mask")]),t._v(" specifies which samples should be active. In this case we are using all of them.")]),t._v(" "),e("li",[e("code",[t._v("alpha_to_coverage_enabled")]),t._v(" has to do with anti-aliasing. We're not covering anti-aliasing here, so we'll leave this as false now.")])]),t._v(" "),e("p",[t._v("Now all we have to do is save the "),e("code",[t._v("render_pipeline")]),t._v(" to "),e("code",[t._v("State")]),t._v(" and then we can use it!")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new()")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sc_desc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n swap_chain"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pipeline"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("h2",{attrs:{id:"using-a-pipeline"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#using-a-pipeline"}},[t._v("#")]),t._v(" Using a pipeline")]),t._v(" "),e("p",[t._v("If you run your program now, it'll take a little longer to start, but it will still show the blue screen we got in the last section. That's because while we created the "),e("code",[t._v("render_pipeline")]),t._v(", we need to modify the code in "),e("code",[t._v("render()")]),t._v(" to actually use it.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is what [[location(0)]] in the fragment shader targets")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("frame"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n render_pass"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n")])])]),e("p",[t._v("We didn't change much, but let's talk about what we did change.")]),t._v(" "),e("ol",[e("li",[t._v("We renamed "),e("code",[t._v("_render_pass")]),t._v(" to "),e("code",[t._v("render_pass")]),t._v(" and made it mutable.")]),t._v(" "),e("li",[t._v("We set the pipeline on the "),e("code",[t._v("render_pass")]),t._v(" using the one we just created.")]),t._v(" "),e("li",[t._v("We tell "),e("code",[t._v("wgpu")]),t._v(" to draw "),e("em",[t._v("something")]),t._v(" with 3 vertices, and 1 instance. This is where "),e("code",[t._v("[[builtin(vertex_index)]]")]),t._v(" comes from.")])]),t._v(" "),e("p",[t._v("With all that you should be seeing a lovely brown triangle.")]),t._v(" "),e("p",[e("img",{attrs:{src:a(199),alt:"Said lovely brown triangle"}})]),t._v(" "),e("h2",{attrs:{id:"challenge"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),e("p",[t._v("Create a second pipeline that uses the triangle's position data to create a color that it then sends to the fragment shader. Have the app swap between these when you press the spacebar. "),e("em",[t._v("Hint: you'll need to modify")]),t._v(" "),e("code",[t._v("VertexOutput")])]),t._v(" "),e("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/app.68e9d3e2.js b/assets/js/app.feef3d64.js similarity index 99% rename from assets/js/app.68e9d3e2.js rename to assets/js/app.feef3d64.js index 0a0ec0b0..ff6a1247 100644 --- a/assets/js/app.68e9d3e2.js +++ b/assets/js/app.feef3d64.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=[];f0?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" + diff --git a/beginner/tutorial2-swapchain/index.html b/beginner/tutorial2-swapchain/index.html index bf1d6228..5ca42ad3 100644 --- a/beginner/tutorial2-swapchain/index.html +++ b/beginner/tutorial2-swapchain/index.html @@ -8,7 +8,7 @@ - + @@ -250,6 +250,6 @@ event_loop.r →

- + diff --git a/beginner/tutorial3-pipeline/index.html b/beginner/tutorial3-pipeline/index.html index ab3e2cdf..c1dbcca6 100644 --- a/beginner/tutorial3-pipeline/index.html +++ b/beginner/tutorial3-pipeline/index.html @@ -7,8 +7,8 @@ - - + + @@ -28,7 +28,7 @@ fn main( out.clip_position = vec4<f32>(x, y, 0.0, 1.0); return out; } -

First we declare struct to store the output of our vertex shader. This consists of only one field currently which is our vertex's clip_position. The [[builtin(position)]] bit tells WGPU that this is the value we want to use as the vertex's clip coordinates. This is analogous to GLSL's gl_Position variable.

Vector types such as vec4 are generic. Currently you must specify the type of value the vector will contain. Thus a 3D vector using 32bit floats would be vec3<f32>.

The next part of the shader code is the main function. We using [[stage(vertex)]] to mark this function as a valid entry point for a vertex shader. We expect a u32 called in_vertex_index which gets its value from [[builtin(vertex_index)]].

We then declare a variable called out using our VertexOutput struct. We create two other variables for the x, and y, of a triangle.

The f32() and i32() bits are examples of casts.

Variables defined with var can be modified, but must specify their type. Variables created with let can have their types inferred, but their value cannot be changed during the shader.

Now we can save our clip_position to out. We then just return out and we're done with the vertex shader!

We technically didn't need a struct for this example, and could have just done something like the following:

[[stage(vertex)]]
+

First we declare struct to store the output of our vertex shader. This consists of only one field currently which is our vertex's clip_position. The [[builtin(position)]] bit tells WGPU that this is the value we want to use as the vertex's clip coordinates. This is analogous to GLSL's gl_Position variable.

Vector types such as vec4 are generic. Currently you must specify the type of value the vector will contain. Thus a 3D vector using 32bit floats would be vec3<f32>.

The next part of the shader code is the main function. We are using [[stage(vertex)]] to mark this function as a valid entry point for a vertex shader. We expect a u32 called in_vertex_index which gets its value from [[builtin(vertex_index)]].

We then declare a variable called out using our VertexOutput struct. We create two other variables for the x, and y, of a triangle.

The f32() and i32() bits are examples of casts.

Variables defined with var can be modified, but must specify their type. Variables created with let can have their types inferred, but their value cannot be changed during the shader.

Now we can save our clip_position to out. We then just return out and we're done with the vertex shader!

We technically didn't need a struct for this example, and could have just done something like the following:

[[stage(vertex)]]
 fn main(
     [[builtin(vertex_index)]] in_vertex_index: u32
 ) -> [[builtin(position)]] vec4<f32> {
@@ -144,7 +144,7 @@ fn main(in: VertexOutput) -> [[location(0)]] vec4<f32> {
     render_pass.draw(0..3, 0..1); // 3.
 }
 // ...
-

We didn't change much, but let's talk about what we did change.

  1. We renamed _render_pass to render_pass and made it mutable.
  2. We set the pipeline on the render_pass using the one we just created.
  3. We tell wgpu to draw something with 3 vertices, and 1 instance. This is where [[builtin(vertex_index)]] comes from.

With all that you should be seeing a lovely brown triangle.

Said lovely brown triangle

# Challenge

Create a second pipeline that uses the triangle's position data to create a color that it then sends to the fragment shader. Have the app swap between these when you press the spacebar. Hint: you'll need to modify VertexOutput

Check out the code!
Last Updated: 8/10/2021, 7:57:07 PM

+

We didn't change much, but let's talk about what we did change.

  1. We renamed _render_pass to render_pass and made it mutable.
  2. We set the pipeline on the render_pass using the one we just created.
  3. We tell wgpu to draw something with 3 vertices, and 1 instance. This is where [[builtin(vertex_index)]] comes from.

With all that you should be seeing a lovely brown triangle.

Said lovely brown triangle

# Challenge

Create a second pipeline that uses the triangle's position data to create a color that it then sends to the fragment shader. Have the app swap between these when you press the spacebar. Hint: you'll need to modify VertexOutput

Check out the code!
Last Updated: 8/16/2021, 3:40:36 PM

← →

- + diff --git a/beginner/tutorial4-buffer/index.html b/beginner/tutorial4-buffer/index.html index 44b5a87a..7b204cca 100644 --- a/beginner/tutorial4-buffer/index.html +++ b/beginner/tutorial4-buffer/index.html @@ -8,7 +8,7 @@ - + @@ -260,6 +260,6 @@ render_pass. →

- + diff --git a/beginner/tutorial5-textures/index.html b/beginner/tutorial5-textures/index.html index ea1bc756..1c2bdf51 100644 --- a/beginner/tutorial5-textures/index.html +++ b/beginner/tutorial5-textures/index.html @@ -8,7 +8,7 @@ - + @@ -406,6 +406,6 @@ fn main( →

- + diff --git a/beginner/tutorial6-uniforms/index.html b/beginner/tutorial6-uniforms/index.html index 3d6212ea..8c6c19c9 100644 --- a/beginner/tutorial6-uniforms/index.html +++ b/beginner/tutorial6-uniforms/index.html @@ -8,7 +8,7 @@ - + @@ -328,6 +328,6 @@ fn main( →

- + diff --git a/beginner/tutorial7-instancing/index.html b/beginner/tutorial7-instancing/index.html index 2625cc60..66e6e240 100644 --- a/beginner/tutorial7-instancing/index.html +++ b/beginner/tutorial7-instancing/index.html @@ -8,7 +8,7 @@ - + @@ -181,6 +181,6 @@ fn main( →

- + diff --git a/beginner/tutorial8-depth/index.html b/beginner/tutorial8-depth/index.html index 4526366e..d2b48f2a 100644 --- a/beginner/tutorial8-depth/index.html +++ b/beginner/tutorial8-depth/index.html @@ -8,7 +8,7 @@ - + @@ -109,6 +109,6 @@ →

- + diff --git a/beginner/tutorial9-models/index.html b/beginner/tutorial9-models/index.html index f6d9303e..63d27142 100644 --- a/beginner/tutorial9-models/index.html +++ b/beginner/tutorial9-models/index.html @@ -8,7 +8,7 @@ - + @@ -361,6 +361,6 @@ render_pass. →

- + diff --git a/index.html b/index.html index f09cd4ce..0ac385cc 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + @@ -17,6 +17,6 @@ →

- + diff --git a/intermediate/tutorial10-lighting/index.html b/intermediate/tutorial10-lighting/index.html index f27b7597..bcc54495 100644 --- a/intermediate/tutorial10-lighting/index.html +++ b/intermediate/tutorial10-lighting/index.html @@ -8,7 +8,7 @@ - + @@ -628,6 +628,6 @@ let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0); →

- + diff --git a/intermediate/tutorial11-normals/index.html b/intermediate/tutorial11-normals/index.html index 6cf45093..1ae2394b 100644 --- a/intermediate/tutorial11-normals/index.html +++ b/intermediate/tutorial11-normals/index.html @@ -8,7 +8,7 @@ - + @@ -480,6 +480,6 @@ render_pass. →

- + diff --git a/intermediate/tutorial12-camera/index.html b/intermediate/tutorial12-camera/index.html index f6b44a1e..ab665ccd 100644 --- a/intermediate/tutorial12-camera/index.html +++ b/intermediate/tutorial12-camera/index.html @@ -8,7 +8,7 @@ - + @@ -375,6 +375,6 @@ →

- + diff --git a/intermediate/tutorial13-threading/index.html b/intermediate/tutorial13-threading/index.html index 5e8b8415..63e8dce4 100644 --- a/intermediate/tutorial13-threading/index.html +++ b/intermediate/tutorial13-threading/index.html @@ -8,7 +8,7 @@ - + @@ -108,6 +108,6 @@ Elapsed (Threaded): 199.645027ms →

- + diff --git a/news/index.html b/news/index.html index 859b001b..70ab43c2 100644 --- a/news/index.html +++ b/news/index.html @@ -8,7 +8,7 @@ - + @@ -24,6 +24,6 @@

- + diff --git a/showcase/alignment/index.html b/showcase/alignment/index.html index db774f20..c005b977 100644 --- a/showcase/alignment/index.html +++ b/showcase/alignment/index.html @@ -8,7 +8,7 @@ - + @@ -23,6 +23,6 @@ →

- + diff --git a/showcase/compute/index.html b/showcase/compute/index.html index afca02ee..4dfbd553 100644 --- a/showcase/compute/index.html +++ b/showcase/compute/index.html @@ -8,7 +8,7 @@ - + @@ -122,6 +122,6 @@ →

- + diff --git a/showcase/gifs/index.html b/showcase/gifs/index.html index 1e85c937..20315579 100644 --- a/showcase/gifs/index.html +++ b/showcase/gifs/index.html @@ -8,7 +8,7 @@ - + @@ -149,6 +149,6 @@ →

- + diff --git a/showcase/imgui-demo/index.html b/showcase/imgui-demo/index.html index 64710c73..bb41d9de 100644 --- a/showcase/imgui-demo/index.html +++ b/showcase/imgui-demo/index.html @@ -8,7 +8,7 @@ - + @@ -115,6 +115,6 @@ display.queue - + diff --git a/showcase/index.html b/showcase/index.html index 89fff2b1..4d871920 100644 --- a/showcase/index.html +++ b/showcase/index.html @@ -8,7 +8,7 @@ - + @@ -21,6 +21,6 @@ →

- + diff --git a/showcase/pong/index.html b/showcase/pong/index.html index 885512ff..d8115bed 100644 --- a/showcase/pong/index.html +++ b/showcase/pong/index.html @@ -8,7 +8,7 @@ - + @@ -205,6 +205,6 @@ →

- + diff --git a/showcase/windowless/index.html b/showcase/windowless/index.html index 0517ab40..1550e01d 100644 --- a/showcase/windowless/index.html +++ b/showcase/windowless/index.html @@ -8,7 +8,7 @@ - + @@ -228,6 +228,6 @@ output_buffer. - + diff --git a/todo.html b/todo.html index fa2ef96e..230bb76a 100644 --- a/todo.html +++ b/todo.html @@ -8,11 +8,11 @@ - + - +